cursus 3: het gebruik van FRAMES

Les 1


Intro


Dit is SjengHallo, 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'!


De voorbereidingen ...


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:

<html>
<head>
<title>Mijn Frames Pagina</title>
</head>
<body>

</body>
</html>

We geven elk document een eigen naam. Laten we eens meisjesnamen gebruiken.

<html>
<head>
<title>Mijn Frames Pagina</title>
</head>
<body>
Kim
</body>
</html>

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)

Opmerking:
Ik noem documenten altijd xxxx.html. Je mag ook de extentie xxxx.htm gebruiken. In de Windows-omgeving maakt het niet uit welke extentie je kiest. Maar op sommige servers mag de extentie van een bestand maar drie letters lang zijn. In dat geval moet je wel de extentie htm gebruiken. Veel FTP programma's bieden de mogelijkheid om de extentie te veranderen na het uploaden als dat nodig mocht zijn.

Maak nu een nieuw html document.

<html>
<head>
<title>Mijn Frames Pagina</title>
</head>
<body>
Lisa
</body>
</html>

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.


De master-pagina


We gaan de hoofd-frame-pagina of masterpagina maken. Begin met een standaard HTML-document:

<html>
<head>
<title>Mijn Frames Pagina- Master</title>
</head>
<body>

</body>
</html>

Verwijder de <body>-tags. De masterpagina gebruikt ze niet...

<html>
<head>
<title>Mijn Frames Pagina- Master</title>
</head>
</html>

...in plaats daarvan gebruiken we <frameset>-tags.

<html>
<head>
<title>Mijn Frames Pagina- Master</title>
</head>
<frameset>
</frameset>
</html>

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.

Opmerking
In veel gevallen zal een website met behulp van de masterpagina geopend worden. Een webserver (dat is de computer waar de HTML-pagina's op het Internet komen te staan) zoekt tussen de HTML-pagina's naar de pagina met de naam index.html of met de naam default.html en zal die pagina dan automatisch als startpagina van de website beschouwen. Het is dus een goede gewoonte om de startpagina van je website index.html te noemen.

De dochterpagina's


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:

<frameset cols="50%,50%">
</frameset>

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.

<frameset cols="50%,50%">
  <frame src="kim.html">
  <frame src="lisa.html">
</frameset>

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.


Meer dan twee kolommen


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:

<frameset cols="20%,20%,20%,20%,20%">
  <frame src="kim.html">
  <frame src="lisa.html">
  <frame src="sacha.html">
  <frame src="sharon.html">
  <frame src="laura.html">
</frameset>

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.

<frameset cols="5%,40%,30%,10%,15%">
  <frame src="kim.html">
  <frame src="lisa.html">
  <frame src="sacha.html">
  <frame src="sharon.html">
  <frame src="laura.html">
</frameset>

En nu rijen


Als we onze pagina splitsen in RIJEN in plaats van KOLOMMEN krijgen we iets heel anders.

<frameset rows="20%,30%,10%,15%,25%">
  <frame src="kim.html">
  <frame src="lisa.html">
  <frame src="sacha.html">
  <frame src="sharon.html">
  <frame src="laura.html">
</frameset>

Laten we terug gaan naar het begin, waar ons scherm verdeeld was in twee gelijke, verticale frames.

<frameset cols="50%,50%">
  <frame src="kim.html">
  <frame src="lisa.html">
</frameset>


Absolute of relatieve maten


We kunnen 50 pixels(een absolute maat) opgeven in plaats van 50% (een relatieve maat). We kunnen ook een sterretje (*) gebruiken in plaats van een getal. Het sterretje (*) betekent: wat er over is. Bijvoorbeeld:

<frameset cols="50,*">
  <frame src="kim.html">
  <frame src="lisa.html">
</frameset>

Opmerking
Eerst even iets heel belangrijks.. Laten we aannemen dat je twee kolommen maakt: één van 100 pixels breed, één van 700 pixels breed. Als je een schermresolutie van 800 x 600 gebruikt past dit precies en alles ziet er goed uit...voor jou.
Nu wordt je pagina gelezen door iemand die een 640 x 480 scherm heeft. Die brouwser kan die pagina nu geen 800 pixels breed maken. De pagina wordt nu zo verkleind, dat hij wel op het scherm past. De rekenaars onder jullie kunnen uitrekenen, dat de pagina maar op 80% van zijn ware grootte wordt afgebeeld. De kolom van 100 pixels breed is op dat scherm maar 80 pixels breed en dingen die bij jou precies in de kolom pasten, worden hier totaal verkeerd weergegeven!
Als je absolute afmetingen gebruikt (dus geen percentages) in je
<frameset>-tags, gebruik dan ALTIJD minimaal één * als variabel frame. Op die manier ziet het er voor iedereen goed uit en houden we wereldvrede op het Internet.

Aan dit veel voorkomende probleem bij het gebruik van frames wil ik iets meer aandacht schenken dan strikt noodzakelijk. Een populaire frame indeling is een smalle inhoudsopgave links en een groot informatievenster rechts. Zoiets als dit.
Wat is nu het probleem... Als je de vensters verdeeld met het gebruik van percentages, zoals
<frameset cols="15%,85%">, ziet voor jou alles er waarschijnlijk goed uit. Maar... bij iemand met een andere resolutie kan het er zo uitzien.

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.

<frameset cols="50,*,2*">
  <frame src="kim.html">
  <frame src="lisa.html">
  <frame src="sacha.html">
</frameset>

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 ...

<frameset cols=*,*,*,*>
</frameset>

... verdeelt je scherm in 4 gelijke kolommen!


Zowel kolommen als rijen


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.

<frameset cols="50,*,2*">
  <frame src="kim.html">
  <frame src="lisa.html">
  <frameset>
  </frameset>
</frameset>

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.

<frameset cols="50,*,2*">
  <frame src="kim.html">
  <frame src="lisa.html">
  <frameset rows="50%,50%">
  </frameset>
</frameset>

We zetten Sacha in de bovenste helft en Sharon in de onderste helft van de tweede frameset.

<frameset cols="50,*,2*">
  <frame src="kim.html">
  <frame src="lisa.html">
  <frameset rows="50%,50%">
    <frame src="sacha.html">
    <frame src="sharon.html">
  </frameset>
</frameset>
Dit is zo leuk dat we nog maar wat verder gaan! Laten we Lisa horizontaal in drie delen splitsen. Het bovenste window wordt 100 pixels hoog. De andere twee verdelen we gelijkmatig. We zetten Lisa in alle drie de frames. Hier zijn alle aanpassingen in één keer.

<frameset cols="50,*,2*">
  <frame src="kim.html">
  <frameset rows="100,*,*">
    <frame src="lisa.html">
    <frame src="lisa.html">
    <frame src="lisa.html">
  </frameset>
  <frameset rows="50%,50%">
    <frame src="sacha.html">
    <frame src="sharon.html">
  </frameset>
</frameset>

Opmerking
Het laatste voorbeeld van het opsplitsen van een pagina in frames was een beetje overdreven. Als je je pagina's echt zo opsplitst, zul je daar je lezers geen plezier mee doen!
Een goede vuistregel is dat je niet meer dan drie frames op één pagina zet.
Als je ook zonder kunt, des te beter.


einde les 1

naar les 2