Maak je eigen homepage met FrontPage (deel 9)

Zulke pagina's zijn opgebouwd met frames. Dat zijn meerdere pagina’s die als een geheel worden getoond.

Vaak wordt gebruik gemaakt van twee frames. Bijvoorbeeld een voor de knoppen (snelkoppelingen) en een voor de verschillende pagina’s, of drie, dan is er ook nog een aparte frame voor de titel. Soms worden er nog meer frames gebruikt, dat is afhankelijk van wat de maker ons wil laten zien en daarom ook noodzakelijk.

Laten we maar eens een frames pagina gaan maken. Hierbij vergeten we even al het voorgaande en beginnen gewoon opnieuw!

Er zijn twee mogelijkheden, Beginpagina instellen… die zou je kunnen gebruiken als je al pagina’s had gemaakt voor een titel en knoppenbar, hetgeen in ons voorbeeld dus niet het geval is. Daarom kiezen we de tweede optie, Nieuwe pagina. Klik er maar op voor elk van de drie frames en er zal op de grijze gedeelten een blanco pagina verschijnen.

Klik met de rechtse muistoets op een frame en kies Eigenschappen voor frame… Hier kun je de instellingen voor dat frame aanpassen. Je vindt er onder andere ook een knop Framespagina… en als je daarop klikt kun je nog wat eigenschappen veranderen, bijvoorbeeld de randen van de frames verwijderen, zodat alles een geheel lijkt en meer.

Je kunt elk frame een eigen kleur geven, de afmetingen aanpassen naar willekeur, al dan niet een schuifbalk laten verschijnen en desgewenst de naam voor het frame veranderen (wacht daar nog maar even mee). Het is aan jou hoe je dat instelt en… hoe het er uit zal gaan zien.

Sla je werk maar op. Klik op Bestand en kies Opslaan als… en, nu even opgepast, want als je hier goed te werk gaat hoef je straks niets meer te veranderen, want FrontPage zal automatisch de namen en koppelingen aanpassen die jij aan de pagina’s geeft.

FrontPage gaat achtereenvolgens vier pagina’s voor je opslaan, die je zelf een naam kunt geven. Noem ze bijvoorbeeld:

1. index.html (Framespagina)

2. top.html (Titelpagina)

3. knoppen.html (Navigatie)

4. welkom.html (Inhoud)

Je kunt alle pagina’s afzonderlijk bewerken, net zoals je dat in voorgaande voorbeelden hebt gedaan en hoeft dus niet altijd de index.html op te starten voor dat doel.

Al met al hebben we alleen nog maar een aantal blanco pagina’s en dus wordt het tijd om daar eens wat aan te gaan doen

Open de pagina top.html en voeg daar een plaatje in, dat je natuurlijk vooraf al hebt gemaakt. Heb je dat niet, dan kun je ook volstaan met een tekst of… alsnog een leuke titelbanner maken. Sla de pagina op.

Voor we de knoppen pagina gaan bewerken moeten we eerst even een aantal nieuwe pagina’s maken om de navigatie te kunnen testen. Type er een stukje herkenbare tekst op, pagina 1, pagina 2 enz. en sla ze op met diezelfde naam, dus pagina1.html pagina2.html enz.

NB. Later kun je de pagina(s) hernoemen voor hergebruik, kies voor dat doel Beeld, Mappen. Klik met de rechtse muistoets op het te hernoemen bestand en kies Naam wijzigen, verander de naam en druk enter of geef een muisklik. FrontPage zal de koppelingen automatisch voor je aanpassen!

Klaar, open dan knoppen.html en type Welkom, maak van de tekst een snelkoppeling naar welkom.html. Type daaronder pagina 1 en maak daarvan een snelkoppeling naar pagina1.html. Doe datzelfde ook voor pagina 2. Sla de knoppen pagina op. Als je nu index.html opent en op Voorbeeld klikt dan kun je het effect bewonderen.

Normaal gesproken zullen de pagina’s allemaal in het grootste venster te zien zijn maar… mocht dit onverhoopt niet het geval zijn dan kun je snelkoppelingen wijzigen door het doelframe aan te geven. Klik met de rechtse muistoets op de hyperlink, kies Eigenschappen van hyperlink… Selecteer naast Doelframe Standaard van pagina (hoofd). Sla de pagina op. Deze optie is natuurlijk ook handig om bepaalde hyperlinks bewust in een nieuw venster te laten opstarten!

O ja, voor ik het vergeet, als je knoppen met aanwijseffect wil gebruiken dan gaat dat niet zomaar. Hyperlinks zullen de gevraagde pagina in de top van de pagina opstarten in plaats van het daarvoor bedoelde frame. Dit kun je verhelpen door (in html mode) base target=”hoofd” toe te voegen aan de eerste regel van het applet. Die moet er dan zo uitzien:

<applet code="fphover.class" codebase="./" width="120" height="24" base target="hoofd">

Tot slot nog even iets over de achtergronden van een pagina. Je weet wel hoe je die kunt gebruiken natuurlijk maar “hoe maak je nu dat ronde hoekje zoals op de clubpagina?”

Dat gaat als volgt. Maak, met je favoriete tekenprogramma, een plaatje met een ronde hoek en gebruik dat als achtergrond in de top.html. Maar voor je dat doet moet je die wel in tweeën verdelen, dit om te voorkomen dat de ronde hoek steeds herhaald wordt! Dat gaat makkelijk, plaats de cursor in het frame, kies uit het rolmenu Frames, Frames splitsen. Kies In kolommen splitsen en klik OK.

Om de hoek compleet te maken heb je nog twee plaatjes nodig, een om horizontaal en een om verticaal aan te vullen. Als ze klaar zijn zien de plaatjes er ongeveer zo uit.

Het plaatje met de ronde hoek komt in het frame linksboven, het plaatje rechts van de ronde hoek gebruik je voor het nieuwe frame rechtsboven en het plaatje eronder is voor knoppen.html.

Nu nog de afmetingen van de frames aanpassen zodat de achtergrondafbeeldingen daar precies inpassen en ziedaar, je hebt een pagina met een ronde hoek. Het is wel even passen en meten maar, de moeite waard. Verder is het aan jou om er iets moois van te maken.