HTML les 13 – Frames in je website
Frames, door sommige websitebouwers verguist, door anderen verheerlijkt. De een zweert erbij, de ander moet
er niets van weten. Toch hebben frames een aantal voordelen. Je kunt met frames bepaalde belangrijke aspecten
een vaste plek geven. Bijvoorbeeld je navigatie, of je
logo. Het w3c heeft daarom het onderdeel frames een eigen declaratie gegeven, zo bieden wij hier een les aan over
frames. (We kunnen niet achterblijven namelijk)
Het allereerste begin
Het heeft wel wat van elkaar weg, tabellen en frames. Met beide vormen kun je bepaalde onderdelen een vaste plek
geven. Toch kun je frames niet verwarren met tabellen. Als je je internet opent dan heb je vanzelf al een frame te
pakken. Meerdere frames naast elkaar zijn meerdere pagina’s op een scherm. Hoe maak je nu zo’n frame. Ten eerste is van
het grootste belang dat je de tag <body> niet opneemt in je pagina waarin de frames worden gemaakt.
In plaats van die body-tag gebruik je <frameset>. Aan het einde van het document komt er </frameset> te staan.
Binnen de frameset gebruik je alleen nog de tags <frame /> en <noframes>. Waarover later meer.
Twee voorbeelden
We gaan maar eens aan het werk aan de hand van twee voorbeelden. Deze geven in principe alle bouwstenen die
nodig zijn voor het werken met frames. Het eerste is een website met drie horizontale rijen. Bovenaan komt het
logo, in het midden de tekst en onderaan de bronvermelding en emailadressen enz.
Het tweede voorbeeld is een verticale indeling, waarbij we twee rijen gebruiken. Links komt de navigatie en
rechts de tekst. Hier is links een smalle strook.
De beide sites zouden er als volgt uitzien. (Overigens is het best handig als je van tevoren een tekeningetje maakt
waarin je voor jezelf laat zien wat je wilt)
Frame 1, drie horizontale balken
Het eerste frame bestaat uit drie horizontale balken. Het bovenste deel is voor het logo, het middelste voor
de tekst en onderaan gebruiken we voor wat algemene tekst. Aangezien het frameset de werkelijke frames indeeld beginnen
we hiermee. Net als bij tabellen moeten we werken met ‘rows’ en ‘cols’. Rows is van toepassing voor ons eerste frame. Deze
zet namelijk frames onder elkaar. Je krijgt dan:
<html>
<head>
<title>Frames voorbeeld 1</title>
</head>
<frameset rows=””>
</frameset>
</html>
Aangezien we drie frames hebben, moeten we voor drie frames bepalen hoe groot (hoog) elk frame wordt.
Dat kan op drie manieren, met een absoluut getal, hierbij bepaal je de hoogte in een exact aantal
pixels. Ten tweede met een percentage. Hierbij bepaal je dat er een percentage van het venster wordt
gevuld door dat frame. Ten derde een asteriks (*). De ruimte die overblijft wordt hiermeen opgevuld.
Als je bijvoorbeeld het bovenste venster 100 pixels groot maakt, het onderste venster moet 20% beslaan, dan houdt
het middelste venster, bij een venstergrootte van 800 pixels, ongeveer 540 pixels over. De code voor dit voorbeeld
is als volgt:
<html>
<head>
<title>Frames voorbeeld 1</title>
</head>
<frameset rows=”100,*,20%”>
</frameset>
</html>
Zoals je ziet komen de drie getallen achter elkaar, gescheiden door een komma. Zet je er meer getallen achter, dan krijg je
meer frames.
Nu moeten we nog ieder frame gaan specificeren. Dat gaat voor ieder frame afzonderlijk met de tag <frame />
Hierin kun je het volgende bepalen.
De bron, met het attribuut src bepaal je waar het frame zijn pagina vandaan haalt. Dat is meestal een .html document.
Maar het kan ook een plaatje of een filmpje zijn.
De naam, met het attribuut ‘name’ bepaal je voor ieder frame een unieke naam. Dat is handig voor het laten verschijnen
van een nieuw document vanuit een ander frame. Komen we nog op terug.
Heb je dit gedaan, dan verschijnt het volgende:
<html>
<head>
<title>Frames voorbeeld 1</title>
</head>
<frameset rows=”100,*,20%”>
<frame src=”logo.htm” name=”framelogo” />
<frame src=”pagina1.htm” name=”frametekst” />
<frame src=”onderschrift.htm” name=”frameonder” />
</frameset>
</html>
Tot zover het eerste deel. Binnenkort gaan we verder en dan kijken we naar het tweede voorbeeld, waarbij we aan
de linkerkant een navigatie gedeelte maken, die de pagina’s aan de rechterkant laat verschijnen.
