Stap 2 Je template invullen Allereerst in stap 2 gaan we onze template ophalen. Die staat op www.alphamegahosting.com/516, ook de uitleg is daar te vinden. Je kunt hem vanaf daar downloaden en op je bureaublad plaatsen. De verdere uitleg vind je ook op die pagina. Dan gaan we nu beginnen aan het leuke werk, het ombouwen van die template (een template is in dit geval een pagina die al helemaal af is, en die je naar jouw persoonlijke wensen kunt aanpassen). Je template openen in Kompozer Op je bureaublad staat nog het icoontje van Kompozer, open het programma. Je gaat nu links bovenin naar de knop Bestand en klikt hierop. Nu komt er weer het bekende menu onder te hangen. Hier klik je op bestand openen. als je op bestand klikt komt er een nieuw menuutje onder te hangen. Daar klik je op bestand openen Er verschijnt nu een venster met als titel HTML bestand openen, en aan de linkerzijde moet je weer eerst de keuze bureaublad selecteren. Je ziet nu in het witte vlak alles wat er op je bureaublad staat. Daar staat ook de map Starterspakket. Daar moet je op dubbelklikken, en de inhoud hiervan wordt in een nieuw venster getoond.. Een mapje images, een mapje includes en een index.html-bestand. De laatste is voor jou interessant, die andere twee mappen daar doen we vooralsnog niets mee. Klik op index.html en vervolgens op open. 9
'Klik op index.html en vervolgens op open.' En zie daar! De homepage van de template staat in het werkvlak van Kompozer. je ziet de index.html-pagina in het werkvlak van Kompozer 10
Je eigen teksten plaatsen Je gaat nu weer gewoon verder als in een tekstverwerker. Je gaat ergens in de tekst staan en verwijdert dingen of voegt dingen toe. De belangrijkste tip die we je nu geven bespaart je heel veel ergernis! Ga NOOIT helemaal aan het begin of aan het eind van een woord of regel de cursor plaatsen. Dan kan er met dit soort editors weleens wat vreemds gebeuren. Plaats de cursor altijd midden in het woord of de regel die je wilt wijzigen en ga van daaruit de nieuwe tekst erin verwerken. Laten we maar eens wat proberen. Ga helemaal bovenin waar Jouw eerste Website staat midden in het woord Jouw staan en klik een keer. Er begint nu een cursor te knipperen. Schrijf nu Mijn en verwijder met de delete-knop de rechtse letters, u en w, en ga met de backspace-knop de letters j en o weghalen. Nu staat er Mijn eerste Website. Doordat je een wijziging hebt aangebracht is er een icoontje actief geworden dat je kunt gebruiken om tussentijds je pagina op te slaan. Het icoontje staat linksboven in Kompozer tussen openen en publiceren. Het heeft het uiterlijk van een floppy-disk. Als je nu hierop klikt worden de veranderingen opgeslagen. Doe dit regelmatig zodat je werk niet verloren gaat. het icoontje opslaan is gemakkelijk om tussentijds wijzigingen op te slaan. Twee icoontjes rechts ervan staat een icoontje bekijken waarmee je een voorbeeld van de pagina lokaal in je browser kunt bekijken Nou, eigenlijk gaat het met alle teksten exact gelijk! Dus laat je nu maar eens gaan. Schrijf je eerste homepage maar eens opnieuw. Steeds als je iets hebt aangepast en je ziet dat het goed is kun je op opslaan klikken. En als je hierna op het icoontje twee plaatsen rechts van opslaan klikt, het icoontje bekijken kun je de website zien zoals hij er straks op het internet uit zal zien. Je ziet hem dan lokaal in de browser, je bent dan niet op het internet! Externe links aanpassen Wat nu gaat gebeuren is heel belangrijk voor de verdere uitbreiding van je website. Het is iets meer werk, maar zeker niet ingewikkeld. We gaan de links aanpassen. We zullen eerst alle links in de pagina even benoemen. Linksboven in het menu, home terug naar de homepage Daarlangs pagina 1 en pagina 2 naar de twee nieuwe pagina s) In de eerste tekst alphamegahosting een externe link naar onze site In de rechterkolom, Mijn links, alles over en het website, dat zijn net als de vorige zogenaamde externe links, die gaan naar een andere website In het vlak Jouw Adres, je email-adres, als je hierop klikt gaat het mailprogramma Outlook open En helemaal onderin zie je een home -link en een link naar onze website. 11
We gaan eerst de externe link in de tekst veranderen. Ga maar eens in de link Alphamegahosting staan en klik. Je kunt nu het zichtbare deel van de link veranderen. De tekstlink Alphamegahosting kun je eenvoudig aanpassen. We maken er Google van. Natuurlijk moeten we dan ook de bestemming van de link aanpassen. 12
Schrijf meteen Google ermidden in, en verwijder daarna links en rechts de oude tekst. Als je nu ergens anders in de pagina klikt zie je dat de link Google is geworden. Alleen is de bestemming, het doel van die link, nog niet veranderd. Dat gaan we nu regelen. Ga met de cursor weer boven de link staan die nu Google heet. Nu moet je dubbelklikken. Dan verschijnt er een nieuw venster. Dat venster heeft de volgende naam koppelingseigenschappen. De bestemmings URL, de website waar de link naar toestuurt zie je in het bovenste venster. Daar moet je die link ook aanpassen. Je ziet in het eerste witte venster de url van de bestemming van de link. Daar staat nu http://www.alphamegahosting.com Je ziet in het tweede witte vlak staan in een nieuw venster, dat wil zeggen dat deze externe link opengaat in een nieuw scherm en niet jouw website wegdrukt. Laat dat maar zo staan. Maar daar heeft de link Google niets mee te maken, dus gaan we dit aanpassen. Zet de cursor achter http://www. En vóór alphamegahosting.com..nu kun je met de delete-knop het achterste deel weghalen. 13
je gaat net zoals bij de tekst midden erin staan en schrijft de nieuwe url, eromheen haal je de oude tekst weg! Als dit gedaan is type je google.nl en daarna klik je op OK, onderin het scherm. Het zichtbare deel van de link is nu google en als je erop klikt in de browser ga je naar http://www.google.nl Interne links aanpassen Dit kun je zo voor alle links doen, alleen de links in het bovenste menu, dat zijn interne links, daar gaan we nu apart naar kijken. 'de links in het bovenste menu zijn 'interne' links' Het menu bestaat uit zogenaamde interne links, die openen pagina s in jouw eigen website. We hebben vast twee knopjes aangemaakt, pagina 1 en pagina 2. De naam ervan moet je nu zelf heel gemakkelijk kunnen aanpassen door er weer middenin te gaan staan en je eigen naam te typen. Haal daarna de oude tekstdelen weg. 14
Als je op pagina 1 hebt gedubbelklikt, zie je in het eerste witte venster pagina-1.html staan, dat is de bestandsnaam van de pagina. Die hebben we straks nodig als we nieuwe pagina s gaan aanmaken. een blik op het koppelingseigenschappen scherm met de interne link Je ziet eronder staan aangevinkt dat de URL relatief is ten opzichte van de paginalocatie. Dat is goed zo! Dat betekent dat deze pagina een interne is die, als hij wordt aangeklikt, de vorige vervangt; je blijft gewoon in je eigen website. Klik maar op OK en je bent weer terug in Kompozer. Als je alles hebt veranderd naar je eigen inzichten en de pagina voor de laatste keer hebt opgeslagen mag je Kompozer afsluiten. Als er de vraag komt of je de wijzigingen wilt opslaan kies je volmondig voor Opslaan. Als je afsluit kun je de vraag krijgen of je wilt opslaan, dat is natuurlijk wel de bedoeling, anders is al je werk voor niets geweest! 15
Meerdere pagina's maken Je eerste pagina is wat tekst en links aangaat klaar. Nu gaan we twee nieuwe pagina s aanmaken die verschijnen als je op pagina 1 en pagina 2 klikt in het menu. Op je bureaublad staat het mapje starterspakket ; open het en je ziet alle bestanden van je website. Nu klik je met de rechtermuisknop op het index.html bestand. Kies voor de optie Kopieren. In het venster staan alle bestanden van jouw eerste website. De index.html is de pagina die je zojuist helemaal hebt bijgewerkt. Die gaan we gebruiken om twee nieuwe pagina s te maken Ga nu op een lege plek in dat witte venster staan en klik weer op de rechtermuisknop. Kies nu voor plakken. door te plakken kun je van één helemaal goede pagina een onbeperkt aantal kopieën maken, die kun je dan weer door een menu aan elkaar verbinden, wij maken een website van drie pagina s Doe dit plakken nog een keer! Je hebt nu twee nieuwe bestanden, kopie van index.html en kopie(2) van index.html. 16
Die gaan we nu de juiste naam geven. Weet je nog hoe die naam was van die ene interne link die we bekeken hebben? Juist, pagina-1.html, en de tweede is dan logischerwijs pagina-2.html. de namen van die pagina s moeten wel overeenkomen met de namen zoals we die gezien hebben in het venster met koppelingseigenschappen, dus die gaan we nu aanpassen Klik met de rechtermuisknop op de eerste kopie en kies in het menuutje wat er komt naam wijzigen. Nu kun je de naam in het venster wijzigen in pagina-1.html, doe het ook zo voor de tweede kopie! hier zie je het menu waarin je de keuze naam wijzigen kunt maken, en in de volgende afbeelding zie je het gewenste resultaat 'het gewenste resultaat Als je dit gedaan hebt bestaat jouw website uit drie pagina s. En als je nu Kompozer opent kun je die twee nieuwe pagina s op exact dezelfde manier bewerken als de index.html -pagina. 17
Publiceren De naam van de homepage index.html mag je nooit veranderen, dat is de eerste pagina die geopend wordt als mensen je website bezoeken. Als je deze website afhebt kun je alle bestanden in de map starterspakket publiceren op dezelfde manier als we gedaan hebben met je eerste pagina. Klik op publiceren en zorg dat je alle gegevens uit het goed nieuws -mailtje bij de hand hebt. Vul ze in in de daarvoor bestemde vensters en klik op publiceren. Je website heeft nu een professioneel uiterlijk en bestaat uit drie pagina s. In de volgende stappen gaan we meer in detail. Klik hier om Stap 3 te downloaden 18