Stap 16 – frames

In sommige gevallen is het handig om met frames te werken. Dit is tevens een van de meest complexe onderdelen van HTML. 
Een homepage bestaande uit frames wordt opgebouwd uit meerdere HTML files. De eerste HTML file, dat aangeroepen wordt in de browser, zal alleen een zogehete FRAMESET bevatten. 

Voorbeeld: 
<HTML>
<HEAD><TITLE>Frames</TITLE></HEAD>

<FRAMESET ROWS=”50, *”>
<FRAME SRC=”bovenste-frame.html”>
<FRAME SRC=”onderste-frame.html”>
</FRAMESET>

</HTML> 

Dit is een FRAMESET, waarmee het beeld in twee delen gesplitst wordt en gevuld met twee andere HTML files. We gaan meteen verder met een wat moeilijker voorbeeld om de werking van frames uit te leggen. 

Type/kopieer het volgende over en sla het op onder frameset.html 

<HTML>
<HEAD><TITLE>Frames</TITLE></HEAD>

<FRAMESET ROWS=”50, *”>
<FRAME SRC=”bovenste-frame.html”>
<FRAMESET COLS=”140, *”>
<FRAME SRC=”linker-frame.html”>
<FRAME SRC=”rechter-frame.html”>
</FRAMESET>
</FRAMESET>

</HTML> 

Met bovenstaande codering vorm je drie frames. Een frame boven, een linker frame en een groot frame rechts. 

Met 

<FRAMESET ROWS=”50, *”> 

open ik een FRAME bestaande uit twee bestanden. Met ROWS geef ik aan dat ik het beeldscherm horizontaal wil verdelen in twee helften (letterlijk verdeel ik het scherm in twee rijen). De bovenste moet 50 pixels hoog zijn en het sterretje (*) betekent dat de rest van het scherm voor het tweede gedeelte gebruikt mag worden. 
Het bovenste frame (die van 50 pixels hoog) vul ik met een andere HTML file: 

<FRAME SRC=”bovenste-frame.html”> 

Je mag nooit de HTML file opgeven waar de frameset in staat, in dit geval dus frameset.html. Wanneer je dit wel zult doen, zal er een loop ontstaan waar de browser niet uit zal komen en de kans is groot dat deze zal vastlopen. Wel is het mogelijk een tweede frameset te openen, die weer andere HTML files oproept dan de huidige. 

Het onderste (tweede) frame wil ik verdelen in twee kolommen (COLS). Dat zijn dus twee gedeeltes ditmaal in de lengte van het scherm: 

<FRAMESET COLS=”140, *”> 

De eerste kolom van 140 pixels, wil ik vullen met de HTML file “linker-frame.html”: 

<FRAME SRC=”linker-frame.html”> 

en vervolgens wil ik de grote frame, bestaande uit de resterende hoeveelheid pixels van het beeldscherm, gebruiken voor een andere HTML file: 

<FRAME SRC=”rechter-frame.html”> 

Daarna sluit ik beide FRAMESETS af: 

</FRAMESET>
</FRAMESET>
 

Stap 16a – Frames (vervolg): 
Een FRAMESET staat nooit in een BODY-tag. Voor het aanmaken van een FRAMESET mag je de hele BODY-tag achter wegen laten. 

Dus om bovenstaande pagina goed te doen werken heb je in totaal 4 HTML documenten nodig: 

1. frameset.html 
2. bovenste-frame.html 
3. linker-frame.html 
4. rechter-frame.html 

Met frameset.html zou je de pagina in de browser moeten aanroepen. HTML files 2 tot en met 4 kun je willekeurig vullen. De opzet van deze frames zou je bijvoorbeeld kunnen gebruiken om in bovenste-frame.html alleen een welkomst tekst aan te roepen (uiteindelijk heb je maar een ruimte van 50 pixels hoogte). Linker-frame.html zou je kunnen gebruiken om buttons te plaatsen en rechter-frame.html voor de hoofdtekst. 

Als je bovenstaande inderdaad zou uitwerken en bekijken in een browser, dan zul je merken dat de frames borders bevatten. Er zijn allerlei waarden die je kunt toevoegen: 

<HTML>
<HEAD><TITLE>Frames</TITLE></HEAD>

<FRAMESET ROWS=”50, *” BORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 FRAMEBORDER=0>
<FRAME SRC=”bovenste-frame.html” NAME=”boven” NORESIZE SCROLLING=NO>
<FRAMESET COLS=”140, *” BORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 FRAMEBORDER=0>
<FRAME SRC=”linker-frame.html” NAME=”links” NORESIZE SCROLLING=NO>
<FRAME SRC=”rechter-frame.html” NAME=”rechts” NORESIZE SCROLLING=AUTO>
</FRAMESET>
</FRAMESET>

</HTML> 

Met de toevoegingen BORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 FRAMEBORDER=0 aan de FRAMESETS zijn alle borders uitgezet en eventuele extra witruimtes ook. Hierdoor wordt de FRAMESET onzichtbaar en zal het het beeld van de rest van het uiterlijk niet verstoren. 

Met de toevoegingen NAME=”rechts” NORESIZE SCROLLING=AUTO aan de FRAME-tag ken je waarden toe die specifiek voor dat frame gelden. Elk frame hoort een naam te krijgen. Dit is belangrijk, zodat je in de HTML files die opgeroepen worden kan spelen met frames (zie stap 16b). Met NORESIZE geef ik aan dat de bezoeker geen invloed mag hebben op de maat van de frame. Zou je dit niet toevoegen dan kan iemand de rand van een frame verslepen naar een ander formaat. Met SCROLLING=AUTO activeer je, indien nodig (bijvoorbeeld met veel tekst), een scrollbar aan de rechterkant van de frame. Door dit op NO te zetten laat je dit nooit toe. Voeg je dit helemaal niet toe, dan staat de SCROLLING altijd op AUTO. 

Stap 16b – linken vanuit frames: 
Stel dat je met bovenstaande frameset inderdaad het idee hebt uitgewerkt om linker-frame.html te gebruiken voor buttons en rechter-frame.html voor de hoofdtekst. Dan wil je waarschijnlijk ook dat, wanneer er op een button in de linkerframe wordt geklikt aan de rechterkant de nieuwe tekst verschijnt. De links achter de buttons moeten dan van een TARGET voorzien zijn: Een bestemming. 

Voorbeeld: 
<A HREF=”index.html” TARGET=”rechts”>Home 

Als bovenstaande link opgenomen zou zijn in het linkerframe (linker-frame.html), dan zou de file index.html zichtbaar worden in de frame die “rechts” heet. Geef je aan een link binnen een FRAMESET geen TARGET, dan zal de file zichtbaar worden in de frame waar de link zich ook al bevond (dus het linkerframe).

Naar stap 17

Bookmark the permalink.

Comments are closed