Het gebruik van frames
Les 2

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 * gebruiken in plaats van een getal. Het * betekent: wat er over is.

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

Verhoudingen

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), de volgende volgens de tweede (* voor Lisa) en de laatste 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 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.

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

Een paar opmerkingen over frames

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.

Nu gaan we even hebben over die arme zielen die een browser gebruiken die niet geschikt is voor frames. Hoewel de meeste mensen die je homepage bezoeken de frames kunnen zien, is er nog altijd een hele kleine minderheid die het Internet proberen te verkennen met prehistorisch materiaal. Als je die mensen van dienst wilt zijn kun je een non-frames versie van je pagina maken en als volgt in je document opnemen...

<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="kim.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="sacha.html">
    <FRAME SRC="sharon.html">
  </FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Zet je non-frames versie hier neer. Als iemand een oude
browser gebruikt wordt al het bovenstaande genegeerd.
Browser die frames begrijpen negeren alles wat tussen
de <NOFRAMES> tags staat. Je kunt je misschien een
paar dingen afvragen.
Moet ik wel een hele non-frames versie schrijven? Misschien.
Hoeveel mensen zullen je pagina missen als je het niet doet? Weinig.
Moet ik me daar druk om maken? Nee.
Maak jij je er druk om? Nee.
Waarom staat het dan in deze cursus? Omdat het een mogelijkheid is
en ik wil dat je in elk geval weet dat hij bestaat.
</BODY>
</NOFRAMES>