Maak je eigen homepage met FrontPage (deel 1)

Met FrontPage gebruiken we dus een op het oog gewone tekstverwerker, maar… op de achtergrond wordt de html code voor je ingevuld, zodat jij er verder geen moeite voor hoeft te doen, hetgeen niet wil zeggen dat het niet wenselijk is om te weten wat die codering betekent, want dat komt goed van pas als je later wat meer ingewikkelde toepassingen wil gebruiken.

Met de kennis van html en een eenvoudige tekstverwerker als kladblok zou je al een Internet pagina kunnen maken, maar waarom zouden we dat op die manier doen als er fraaie bewerkingsprogramma’s als FrontPage beschikbaar zijn. Nee hoor, wij gaan lekker makkelijk werken. Maar het een sluit het ander niet uit en zo af en toe eens een kijkje naar de html codering kan dus zeker geen kwaad.

Als je FrontPage opstart dan krijg je een lege pagina in beeld, type er maar eens een zinnetje op, bijvoorbeeld: Dit is de homepage van …… waarbij je op de plaats van de puntjes je naam in kan vullen. Sla deze eerste pagina op met de naam index.html

De meeste servers zullen die naam direct als eerste pagina herkennen als deze online wordt geplaatst, waarover later meer.

Met deze simpele handeling is je eerste pagina klaar, nou ja klaar, dat is wel wat te veel gezegd maar, als je met Internet Explorer de pagina opstart (Rolmenu Bestand, Voorbeeld in browser) zie je al een echte Internet pagina met de zojuist getypte tekst er op. Nog niet erg mooi hè, maar daar kunnen we wat aan veranderen. Sluit Internet Explorer af en ga terug naar FrontPage. Kies uit het rolmenu Bestand de optie Eigenschappen en klik op Achtergrond.

Er verschijnt een venster met een tweetal mogelijkheden om de achtergrond aan te passen. Je zou een plaatje in kunnen voegen met de optie Opmaak, Achtergrondfiguur, maar je kan ook Kleuren voor Achtergrond en Tekst gebruiken.

Laten we eerst de kleuren maar eens veranderen. Klik op het vakje naast Achtergrond en kies de kleur die jij mooi vindt, doe hetzelfde met de tekst. Klik op OK om de instellingen te bevestigen. De achtergrond en tekst zullen verschijnen in de door jou gekozen kleuren en het ziet er waarschijnlijk nu al een heel stuk beter uit.

Verder heb je, net als bij een reguliere tekstverwerker, de beschikking over een aantal opmaakattributen, zo kun je het lettertype veranderen, de grootte aanpassen, de teksten centreren, links en rechts uitlijnen en kiezen voor vette, schuine en onderstreepte tekst.

Bij de keuze van een lettertype moet je wel rekening houden met het feit dat dit type ook voor moet komen op het systeem van degene die jouw pagina wil bekijken. Als dit niet het geval is zal een alternatief lettertype worden gebruikt, hetgeen het gewenste effect verloren doet gaan. Om dit te voorkomen zal je die keuze dus moeten beperken tot de standaard geïnstalleerde lettertypen.

Plaatjes als achtergrond is ook wel leuk, maar gebruik in dat geval bij voorkeur zogenaamde ’tiles’, dat zijn plaatjes die aan alle zijden op elkaar aansluiten, waardoor de achtergrond één geheel wordt. Je kunt ze in overvloed vinden op het Internet. Start je zoekpagina en gebruik als zoekwoord backgrounds of tiled backgrounds.

Heb je een achtergrond gemaakt? Type dan je verhaaltje zoals jij dat in gedachten had, gebruik de opmaakattributen voor de tekst en sla de pagina op. Als je de pagina nu nog eens bekijkt met Internet Explorer (welke ik voor het gemak voortaan browser zal noemen) dan zie je de pagina zoals je bezoekers die straks zullen gaan zien.

Tot nu toe heb je nog altijd maar een pagina, ofwel, één blaadje van je Internet boek en dat is wel wat weinig, vind je niet? Maar, daarin is snel verandering gebracht. We maken gewoon een tweede pagina.

Kies Bestand, Nieuw, Pagina, kies Normale pagina. Klik OK (je mag ook op het voor dat doel bestemde pictogram in de taakbalk klikken) Pas de pagina aan met de door jou gewenste kleuren en type ter indicatie even de tekst ’Pagina een’, de originele tekst die je voor de nieuwe pagina in gedachten hebt kun je later nog invullen.

Sla de pagina op met een korte, makkelijk herkenbare, naam en doe dit bij voorkeur zonder hoofdletters, sommige servers kunnen daar namelijk niet goed mee uit de voeten. De naam pagina1.html is voorlopig goed genoeg voor ons project.

Nu hebben we dus twee pagina’s en de index.html wordt als zodanig herkend als ze straks online komen maar, met de tweede pagina is dat niet het geval en die willen we toch ook graag zien. Dat kan door, net als bij een boek, de pagina(s) om te slaan, bij wijze van spreken dan, want via de monitor gaat dat echt niet lukken

Om het bladeren op een Internet pagina mogelijk te maken wordt een zogenaamde hyperlink gebruikt, een soort koppeling die een volgende pagina op kan roepen. Open het bestand index.html en type ergens op de pagina (bijvoorbeeld onderaan) de tekst ’Ga naar de eerste pagina’.

Markeer de zojuist getypte tekst (plaats de cursor kort voor de tekst, druk de linkse muistoets in en beweeg de cursor naar rechts totdat de tekst geheel gemarkeerd is en laat de muisknop los).

Kies uit het rolmenu Invoegen de optie Hyperlink en er verschijnt een venster Hyperlink bewerken. Selecteer pagina1.html en klik op OK. In de meeste gevallen zal de zojuist gemaakte hyperlink in een andere kleur worden weergegeven, vaak niet wat jij wilt, maar dat kun je aanpassen. Daarvoor kiezen we weer de Pagina eigenschappen (Kies uit het rolmenu Bestand de optie Eigenschappen).

Klik op de tab Achtergrond, net als we al eerder deden. Hier kun je de kleuren voor de hyperlink kiezen, maar pas op! Als je ze verandert dan geldt dat voor de hele pagina, alle overige hyperlinks zullen dus ook de nieuwe kleuren krijgen.

Zullen we de koppeling eens testen? Start index.html met de browser en klik op de zojuist gemaakte hyperlink en ziedaar, de tweede pagina wordt getoond. Nu nog terug, maar… hé dat gaat niet! Natuurlijk, het lukt wel met de pijltjes van de browser, maar dat is niet de bedoeling.

De oplossing is eenvoudig, open met FrontPage pagina1.html en type ’Terug naar de startpagina’, maak er een hyperlink van en selecteer in dit geval index.html. Met behulp van hyperlinks op beide pagina's kun je oneindig heen en weer bladeren.

Op deze manier kun je net zoveel pagina’s aan elkaar koppelen als je maar wilt. De keuze om naar een andere pagina te springen kunnen er natuurlijk meerdere zijn, van pagina 1 naar 2 en 3, van 3 naar 2 en 4 en ga zo maar door.

Voor we verder gaan wil ik je nog even aanraden om een paar nieuwe mappen te maken binnen de werkmap Mijn Webs. Nu zijn er nog niet veel onderdelen nodig, maar naarmate de pagina groter wordt krijg je er steeds meer. De computer en web server hebben daar geen enkele moeite mee, maar het maakt het voor jou op den duur wel lastig om bepaalde zaken terug te vinden.

Maak bijvoorbeeld een aparte map voor plaatjes, achtergronden, knoppen en muziek en kopieer daar dan alvast de bijbehorende onderdelen in, dat maakt het geheel, voor nu en later, een stuk overzichtelijker.