Stap 2 Je template invullen

HET STARTERSPAKKET VAN ALPHAMEGA

STAP 2 – JE TEMPLATE INVULLEN

...............................................................................................................................................................

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

Stap 2 Je template invullen

Recommend Documents