Hallo, daar ben ik weer. Deze keer ga ik je in een paar eenvoudige lessen proberen duidelijk te maken hoe je je homepage kunt opsplitsen in frames. Een verstandig gebruik van frames kan je homepage een professioneel en overzichtelijk aanzien geven en het surfen vergemakkelijken. Je moet wel de nadruk leggen op VERSTANDIG. Klik hier voor een voorbeeld waar het gebruik van verstand ver te zoeken is.
Het splitsen van een pagina in frames is eigenlijk niet zo moeilijk. Het principe is als volgt: elke frame is een normaal, compleet HTML-document. Als je het venster in twee helften wilt splitsen, dan zet je één HTML-document in de ene helft en een ander HTML-document in de andere helft. Daarnaast heb je een derde HTML-document nodig: de 'masterpagina'. Deze masterpagina bevat de <frame>-tags waarin je aangeeft welk document in welk deel van het venster komt. Ook levert hij de titel voor de webpagina. Dat zijn dan ook meteen de enige twee functies van de master.
Er zijn maar twee belangrijke frame tags waar we mee te maken hebben: <frameset> and <frame>.
De makkelijkste manier om één en ander uit te leggen is gewoon beginnen met maken van een frameset. Ik kan je beloven dat je binnen de kortste tijd de mooiste frames kunt maken! Ik ga er wel van uit dat je al het één en ander van HTML afweet. Doe anders eerst de cursus 'HTML voor beginners'!
Laten we beginnen bij het begin. Voor deze cursus hebben we een aantal HTML-documenten nodig. Start Kladblok en type of kopieer-en-plak het volgende:
We geven elk document een eigen naam. Laten we eens meisjesnamen gebruiken.
Maak een nieuwe map en noem die Frames. Sla het document(je) op als kim.html.
(denk er nog even om: Opslaan als type: moet je op Alle bestanden zetten)
Maak nu een nieuw html document.
Sla dit ook in de map Frames op als lisa.html.
Maak nu nog vier pagina's met daarop de namen Sacha, Sharon, Laura en Alice. Sla deze pagina's respectievelijk op als Sacha.html, Sharon.html, Laura.html en Alice.html. Je moet nu een map hebben met zes complete HTML-documenten. De namen heb ik willekeurig gekozen. Als je liever de namen van je vriendjes wilt gebruiken, mij maakt het niet uit.
We gaan de hoofd-frame-pagina of masterpagina maken. Begin met een standaard HTML-document:
Verwijder de <body>-tags. De masterpagina gebruikt ze niet...
...in plaats daarvan gebruiken we <frameset>-tags.
Sla dit document op in de map Frames en geef het als naam index.html. Als je de master nu opent met je browser zal het scherm nog leeg blijven. Er staat geen tekst op deze pagina en die komt er op de masterpagina ook niet te staan!
Om de zaak een beetje overzichtelijk te houden stop ik met het typen van de <hrml>-, <head>- en <title>-tags. Onnodig te zeggen dat ze wel in je document moeten blijven staan.
Laten we de browser nu eens gaan vertellen dat we het scherm willen splitsen in twee kolommen die elk 50% van het scherm innemen. Typ in je masterpagina tussen frameset-tags het volgende:
Je hebt nu nog steeds een blanco scherm. We hebben nog één dingetje nodig om de zaak werkend te krijgen.
We moeten de browser vertellen welk HTML-document hij en welke helft van het scherm moet zetten.
Je bent nu de trotse ouder van een operationele frameset!
Nog één detail voor we verder gaan. Merk op dat <frameset> een zogenaamde containertag is en <frame> niet. Voor degenen die niet weten wat dat is: een container tag heeft een begintag en een eindtag.
De <frameset>-tag doet al het splitswerk voor je. Niet meer dan dat. Je kunt nog een paar opties opgeven over hoe hij dat moet doen, maar onthoud: als je je pagina wilt splitsen moet je de <frameset>-tag gebruiken.
Kunnen we de pagina ook in meer dan twee delen splitsen? Jazeker, maar zorg er wel voor dat je voor elk deel een HTML-document specificeert anders weet je browser niet meer wat hij moet doen.
Open je masterpagina (index.html) in je kladblok en pas hem als volgt aan:
Het zal duidelijk zijn dat je al je frames een ander formaat kunt geven. Zorg er alleen voor dat het totaal 100% is anders maakt je browser er zelf maar wat van.
Als we onze pagina splitsen in RIJEN in plaats van KOLOMMEN krijgen we iets heel anders.
Laten we terug gaan naar het begin, waar ons scherm verdeeld was in twee gelijke, verticale frames.
Hoe kan dat nou? Welnu, je hebt opgegeven dat het linker frame 15% breed moet zijn. 15% van wat? 15% van wat dan ook de schermresolutie van de lezer is. Dat betekent dat het linker frame er bij andere mensen anders uit kan zien. Hoe lossen we dat op? Gebruik gewoon een absolutie afmeting voor het linker frame en maak het rechter frame variabel: zoiets als <frameset cols="120,*">. Voila. Probleem opgelost.
Het lijkt mij een goed idee om die absolute afmeting iets groter te maken dan strikt noodzakelijk. Daarmee geef je de inhoud van het venster een beetje lucht. Bijvoorbeeld, als de inhoud van het venster 100 pixels breed is, maak het frame dan 120 of 125 pixels breed. Kwestie van smaak natuurlijk, maar volgens mij verhoogt het de leesbaarheid.
We kunnen meer dan één resterend frame hebben en een verhouding tussen die twee aangeven.
Vrij vertaald staat hier: Maak drie kolommen. Maak de eerste kolom 50 pixels breed. Verdeel de rest tussen kolom 2 en kolom 3, maar maak kolom 3 twee keer zo breed als kolom 2. Zet Kim in het eerste frame, Lisa in het tweede en Sacha in het derde frame.
Het is belangrijk dat alles in de juiste volgorde gebeurt. Het eerste <frame> wordt getoond volgens de eerste afmetings-optie in de <frameset>-tag (50 pixels voor Kim), het volgende <frame> volgens de tweede (* voor Lisa) en het laatste <frame> volgens de derde (2* voor Sacha). Dit zal wel heel vanzelfsprekend zijn maar het is zeer belangrijk en ik wil er alleen maar even je aandacht op vestigen.
Je kunt ook allemaal variabele frames gebruiken, bijvoorbeeld ...
... verdeelt je scherm in 4 gelijke kolommen!
Wat als we nu in het laatste voorbeeld de kolom Sacha horizontaal in twee willen splitsen? Weet je nog dat ik zei dat je al het splitswerk tussen de <frameset>-tags moet doen. Eerst vervangen we Sacha door een setje <frameset>-tags.
Nu hebben we de browser het volgende verteld: Maak 3 frames. Maak de eerste 50 pixels breed. De rest verdelen we in frame 2 en 3 waarbij frame 3 twee keer zo breed is als frame 2. Zet Kim in het eerste frame, Lisa in het tweede en het derde frame gaan we verder opsplitsen. Nu gaan we opgeven hoe we het derde frame gaan splitsen.
We gaan het derde frame het horizontaal in twee gelijke delen splitsen.
We zetten Sacha in de bovenste helft en Sharon in de onderste helft van de tweede frameset.