1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

Transcriptie

1 Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te gaan maken. Klaar? Daar gaan we! 1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien. Hoofdstuk 1 De pagina indelen met behulp van tabellen 2. Klik op Tabel (dat kan op twee plaatsen, zie de cirkels in het plaatje hieronder) 3. Ga naar het tabblad Precies en zorg voor de volgende instellingen en klik OK: 13

2 Er is nu een tabel gemaakt. Voor het gemak nummeren we de cellen in gedachten even. In de rest van deze minicursus worden steeds deze namen gebruikt, zodat altijd duidelijk is over welke cel er gepraat wordt: (Let op: Je hoeft dit dus niets in te typen in de cellen!) Cel 1 Cel 2 Cel 3 Cel 4 Cel 5 Cel 6 4. Ga met de cursor boven Cel 1 hangen en klik hierin met de rechter muistoets. Kies voor Tabelcel eigenschappen (Zie onderstaande afbeelding) 14

3 5. Zorg voor de volgende instellingen en druk op OK: 6. Zorg ervoor dat de instellingen van iedere cel als volgt worden aangepast: Hoogte Breedte Achtergrondkleur Cel pixels 20% van tabel Groen Cel pixels 80% van tabel Wit Cel 3 Niet instellen 20% van tabel Groen Cel 4 Niet instellen 80% van tabel Wit Cel 5 50 pixels 20% van tabel Groen Cel 6 50 pixels 80% van tabel Wit Tip: Je kunt eenvoudig naar de volgende cel gaan door op volgende te klikken. Vergeet niet na elke cel eerst op Toepassen te klikken voor je naar de volgende gaat. 15

4 Als het goed is ziet je pagina er nu zo uit: 16

5 Hoofdstuk 2 Opslaan van de pagina 7. Geef eerst de pagina een titel: Ga naar Opmaak en kies Paginatitel en eigenschappen 8. Typ achter Titel: Energie en klik op OK De titel die je nu opgeeft, zul je straks in de titelbalk van de browser te zien krijgen. De tekst die je hier opgeeft, wordt ook gebruikt als titel bij de Favorieten (ook wel bookmarks of bladwijzers genoemd). Nu kunnen we de pagina opslaan: Je ziet nu ook dat er niet meer (Geen titel) boven je pagina staat, maar de nieuwe titel: Energie. 9. Kies Bestand > Opslaan als 10. Zoek nu de map Mijn documenten op 11. Maak een nieuwe map aan die je Mijn website noemt 12. Sla het bestand op in de map Mijn website onder de naam index.html Informatief: over de index-pagina: De eerste pagina van een website heet altijd index.html. Browsers (Internet Explorer, Firefox etc.) gaan altijd op zoek naar dit bestand als je een website bezoekt. Van hieruit is de rest van je website te bekijken door middel van hyperlinks die je later in deze les leert maken. Zorg ervoor dat de startpagina van je website dus altijd index.html heet! 17

6 Hoofdstuk 3 Een menu maken We beginnen even met een kop bovenaan de pagina 13. Typ het woord Energie in Cel Pas lettertype e.d. aan. Bekijk hiervoor alle groene omcirkelde instellingen in onderstaande afbeelding en probeer dit na te maken: In Cel 3 gaan we een menu maken voor de website. 15. Maak het volgende na. De groene cirkels geven weer aan welke knoppen je moet gebruiken. 18

7 16. Zorg ervoor dat de tekst van het menu bovenin Cel 3 verschijnt, in plaats van in het midden. Dit gaat als volgt: 1. Klik met rechts in Cel 3 2. Kies Tabelcel eigenschappen 3. In het tabblad cellen stel je in bij Inhoudsuitlijning: Verticaal: Boven 17. Klik eens op Voorbeeld. Je bent nu in de modus die je laat zien hoe je pagina er straks op het internet uit zal gaan zien. Het is niet zo mooi dat er witte lijntjes staan tussen de groene cellen hè? Dit kun je als volgt verhelpen: 18. Ga weer terug naar de Normaal-modus. 19. Klik nu ergens in de tabel met rechts en kies weer voor Tabelcel eigenschappen. Ga dit keer naar het tabblad Tabel en zorg voor de volgende instelling en klik op OK: Kijk nu nog eens in de Voorbeeld-modus. Beter zo hè? Je hebt zojuist de ruimte tussen cellen op 0 gezet, dus nu sluiten ze netjes op elkaar aan. 19

8 !! Vergeet niet tussendoor je werk op te slaan. Als je hier dit rode tekentje ziet staan, betekent dat dat je de laatste wijzigingen nog niet hebt opgeslagen. Opslaan kan via het pictogram Opslaan of via Bestand > Opslaan. 20

9 Hoofdstuk 4 Tekst op de pagina zetten en een nieuwe pagina aanmaken 20. Typ de volgende tekst over in Cel 4 (zie plaatje): Welkom op deze website over energie. Op deze pagina kun je veel te weten komen over energie. In het menu hiernaast zie je welke informatie er zoal te vinden is. 21. Zorg dat de tekst minder dicht op de groene cel staat door te klikken op de knop Inspringing vergroten 22. Pas ook het lettertype en de lettergrootte weer aan. 23. Zorg er voor dat de tekst bovenin Cel 4 verschijnt, in plaats van in het midden. Als je niet meer weet hoe dit moet, blader dan even terug naar stap 15. Als het goed is, ziet je pagina er nu zo uit: 21

10 Hoofdstuk 5 Een tweede pagina voor je website maken en linken aan index.html Je gaat nu een tweede pagina maken. Dit wordt de pagina die zal gaan over Wat is energie?. Je gaat er ook voor zorgen dat bezoekers via een hyperlink vanaf de index-pagina naar deze pagina kunnen komen. Je wilt graag dat de tweede pagina er hetzelfde uitziet als de indexpagina. Alleen komt er een andere tekst in Cel 4 te staan. Dit doe je als volgt: 24. Zorg dat de cursor ergens in je pagina staat. 25. Druk CTRL-A in. Dit doe je zo: houd de CTRL-toets ingedrukt en druk dan op de letter a. Je hebt nu de hele pagina geselecteerd (CTRL-A betekent dus: selecteer alles) 26. Doe nu CTRL-C. Dit betekent: kopieer alles wat geselecteerd is. 27. Klik nu op Nieuw. Je ziet dat er nu een nieuwe pagina geopend is. 28. Doe nu CTRL-V. Dit betekent: Plak alles. De nieuwe pagina ziet er nu exact zo uit als de eerste. Tip: Wil je echt alle opmaak exact kopiëren van een andere pagina, dan kun je beter de broncode kopiëren en plakken. Dit doe je zo: 1. Ga naar de Bron-modus onderaan de pagina. 2. Selecteer en kopieer alle tekst. (CTRL-A en CTRL-C). 3.Ga weer naar de Normaal-modus 4. Ga naar de nieuwe pagina 5. open de Bron-modus van de nieuwe pagina 6. Selecteer alles (CTRL-A) en delete dit met de delete-knop op het toetsenbord 7. Plak alles (CTRL-V) en ga weer naar de Normaal-modus 22

11 29. Vervang de kop en de tekst door: 30. Sla de pagina op in de map Mijn website onder de naam watisenergie.html. Dit doe je zo: 1. Geef de pagina een titel via Opmaak > Paginatitel en eigenschappen 2. Kies Bestand > Opslaan als 3. Sla het bestand op onder de naam watisenergie.html in dezelfde map als de index.html, dus in Mijn website Tips voor het kiezen van bestandsnamen: Bij het kiezen van een bestandsnaam moet je wel omzichtig tewerk gaan. In Windows maakt dit niet veel uit, maar als je je pagina s op het internet gaat plaatsen, moet je je wel houden aan enkele afspraken: Gebruik voor de bestandsnaam bij voorkeur kleine letters of cijfers. In een bestandsnaam gebruik je in geen geval spaties of speciale tekens, uitgezonderd underscores (_). Geef het bestand een naam waaruit je later gemakkelijk kan afleiden waarover die webpagina gaat. Je bestandsnaam maak je liefst niet te lang (vroeger was dit maximaal 8 karakters, het mag tegenwoordig wel wat langer). 23

12 En dan nu de link! 31. Ga weer terug naar de index-pagina. Klik hiervoor op het tabblad Energie. 32. Selecteer in het menu in Cel 3 de tekst Wat is energie? 33. Klik op Koppeling 34. Zorg voor de volgende instellingen in het scherm dat je nu krijgt: De koppelingslocatie kun je het beste toevoegen door op het gele envelopje aan de rechterkant te klikken en in de map Mijn Website de pagina watisenergie.html aan te klikken en dan op de knop Openen te drukken. 35. Klik op OK als je klaar bent. 24

13 Als het goed is, ziet je pagina er nu zo uit: De blauwe kleur past niet zo mooi bij de groene achtergrond. Pas dit als volgt aan: Ga naar Opmaak > Paginakleuren en achtergrond en verander de kleuren bijvoorbeeld op deze manier: Belangrijkste is dat je de Koppelingstekst instelt op de kleur wit. Iedere hyperlink die je vanaf nu maakt is op deze pagina standaard wit van kleur. 25

14 De hyperlink testen Hoogste tijd om te kijken of de link werkt. Dat gaat als volgt: 36. Sla eerst de laatste wijzigingen op. 37. Ga dan naar Bestand > Pagina bekijken of druk op F5 of klik op de knop Bekijken. 38. Klik op Toepassing starten. De pagina wordt nu geopend in de internet browser. Klik eens op de hyperlink die je net gemaakt hebt. Werkt hij? Opdracht: 1. Zorg dat beide pagina s deze hyperlink hebben. Nu staat hij alleen op index.html, en niet op de pagina watisenergie.html. Tip: copy-paste (Kopieer en Plak) 2. Maak op dezelfde manier als hierboven beschreven een derde pagina die je energieopwekken.html noemt. 3. Maak links naar deze nieuwe pagina vanaf de andere pagina s. 4. Typ op elke pagina in Cel 6 het woordje Home in een klein lettertype en centreer het. 5. Selecteer het woord Home en maak er een hyperlink van naar index.html. Zorg dat deze link op alle pagina s staat. Tip: Copy-Paste Let op dat je de tekstkleur van het woord Home hierna wijzigt in bijvoorbeeld blauw of zwart. Hyperlinks hebben standaard de kleur wit gekregen. Het woord Home staat echter op een witte achtergrond, dus dat is niet handig. 6. Een groene kolom op alle pagina s vind je misschien een beetje saai. Probeer de menu-kolom van watisenergie.html eens een andere kleur te geven. 26

15 Een link maken naar een bestaande internetpagina Behalve links naar je eigen pagina s wil je vaak ook links maken die verwijzen naar andere internetpagina s. We gaan nu een link maken naar de website van het Fioretti. 39. Typ in Cel 5: Fioretticollege Lisse 40. Zorg voor een passend lettertype, lettergrootte en kleur en centreer de tekst. 41. Selecteer de tekst 42. Klik op de knop Koppeling en typ bij Koppelingslocatie: Stel in dat de koppeling geopend moet worden in een nieuw venster en druk op OK 44. Sla de pagina op en bekijk de pagina in een internetbrowser 45. Test de link 27

16 De gekleurde kolommen lopen niet tot onderaan de pagina. Wat nu? Als je je pagina nu bekijkt in een internetbrowser, dan zie je dat de tabellen niet helemaal tot aan beneden doorlopen. Dit probleem los je niet op door alleen maar de tabel een hoogte van 100% van het venster te geven, wat het meest voor de hand ligt. Het is helaas iets ingewikkelder. Mocht je willen weten hoe het precies zit, vraag het dan aan mevrouw Randsdorp of meneer Wanders. Toch kun je het wel oplossen. Daarvoor moet je naar de Bron-modus en het volgende stukje code invoegen: <style type="text/css"> html, body { margin:0; padding:0; width:100%; height:100%; }.height_100 { height:100%; } </style> Zorg ervoor dat je dit stukje code invoegt tussen <head> en </head>! Bijvoorbeeld direct boven </head>. Je krijgt dan dus dit: 28

17 Nadat je dit stukje code hebt toegevoegd moet je ook nog de hoogte van de tabel instellen op 100% van het venster: 46. Klik met rechts in de tabel en kies Tabelcel eigenschappen 47. Ga naar het tabblad Tabel 48. Stel in Hoogte: 100% van venster Opdracht: voeg het stukje code toe op iedere pagina en stel overal de hoogte van de tabel in op 100% van het venster. 29

18 Hoofdstuk 6 Afbeeldingen toevoegen Een website met alleen maar tekst is vrij saai. Tijd om hem op te fleuren met wat plaatjes. De plaatjes gaan we opslaan in een submap van de map Mijn website. Daarom gaan we eerst deze submap aanmaken. Dit doe je buiten het programma KompoZer. 49. Ga naar Mijn documenten > Mijn website 50. Maak een nieuwe map aan die je images noemt Nu de plaatjes: 51. Zoek op het internet een afbeelding die past bij het onderwerp van de website: Energie. 52. Sla deze afbeelding als volgt op op de computer: 1. Klik met rechts op de afbeelding en kies Afbeelding opslaan als 2. Ga naar de map Mijn website 3. Open de map images 4. Sla de afbeelding op 53. Ga weer naar KompoZer en kies de index.html pagina 54. Zet de cursor aan het einde van de tekst in Cel Klik op de knop Afbeelding en stel het volgende in: 56. Klik op OK 30

19 57. Het kan zijn dat je plaatje veel te groot is. Pas als volgt de afmetingen aan: 1. Klik met rechts op de afbeelding en kies Afbeelding eigenschappen. Je komt nu weer in hetzelfde scherm als net. 2. Kies het tabblad Afmetingen en stel het volgende in en klik op OK: Of: 1. Klik op het plaatje. Je ziet er nu vierkante witte blokjes omheen verschijnen. 2. Met de muis kun je zo n blokje beetpakken (kies één van de vier hoekblokjes) 3. Sleep de afbeelding nu tot de gewenste grootte. Tips: In het tabblad Vormgeving kun je de tussenruimtes, de randbreedte en de uitlijning van de afbeelding met de tekst instellen. Tussenruimtes zijn het aantal pixels dat leeg moet gelaten worden rondom de afbeelding, de marge rond de afbeelding anders gezegd. Tekst uitlijnen naar afbeelding bepaalt waar de afbeelding komt te staan ten opzichte van de tekst: aan de bovenkant, in het midden, aan de onderkant, aan de linkerkant of aan de rechterkant. Via het tabblad Koppeling kun je van je plaatje ook een hyperlink maken. 31

20 Einde van deze minicursus Dit is het einde van deze minicursus KompoZer. Je hebt een hoop geleerd. De hoogste tijd om je eigen website te gaan bouwen. Nog enkele aandachtspunten tot slot: Een lay-out maken met behulp van tabellen is op zich handig. Let er wel op dat je iedere pagina dezelfde basislay-out geeft. Iedere verandering in bijvoorbeeld het menu zul je op elke pagina moeten doorvoeren. Een website bouwen is precisiewerk! Echte website-bouwers gebruiken CSS om de lay-out van hun website op te maken. Dat werkt eigenlijk veel beter dan tabellen, maar is binnen deze science module te ingewikkeld om even te leren. Heb je er interesse in, dan kun je altijd op internet eens zoeken naar handleidingen (tutorials) over CSS. Het stukje code dat je op blz. 16 hebt ingevoegd, is een stukje css code. Succes met het bouwen van je eigen website! 32