HTML/Basiscursus/Frames

Vaak bevat een website een gedeelte dat op iedere pagina terugkomt, zoals het menu. Eigenlijk zou het zeer handig zijn als u dat menu niet op iedere pagina zou hoeven te zetten. Dit kan door middel van frames. U maakt dan een HTML-pagina die uw menu bevat, bijvoorbeeld menu.html, en de pagina met de eigenlijke inhoud, bijvoorbeeld inhoud.html. Vervolgens maakt u een pagina met bijvoorbeeld de naam index.html, waarin u duidelijk maakt dat het menu aan de bovenkant moet worden gepositioneerd en de inhoud op de rest van de pagina. Feitelijk is index.html dan een raamwerk waaraan u verschillende pagina's hangt. Vervolgens doet een trucje waardoor, wanneer er op een link in het menu wordt geklikt, de werkelijke inhoud verandert.

Dit is een schets van de beschreven situatie. De pagina's menu.html en inhoud.html vallen als het ware in het raamwerk van index.html.

Raamwerk

Speciaal voor het raamwerk is de frameset-DTD ontwikkeld. in plaats van een body-tag maakt u gebruik van een frameset-tag, waarin u eventueel een noframes-element kunt plaatsen om alternatieve inhoud te geven voor user agents die geen frames ondersteunen.

U kunt in de frameset aangeven of u de pagina verdeelt in kolommen (door middel van het cols-attribuut) of in rijen (door middel van het rows-attribuut). Ook kunt u frameset-elementen nesten om zo meerdere malen (delen van) een pagina te verdelen. De daadwerkelijke verwijzingen naar de verschillende frame-pagina's plaatst u door middel van een frame-tag in de juiste frameset. Hieronder volgt een voorbeeld dat past bij de bovenstaande illustratie.

HTML-code: Een frameset-pagina

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>
  <title>Een simpel frameset-document</title>
</head>

<frameset cols="20%, 80%">
  <frame src="menu.html" name="menu">
  <frame src="inhoud.html" name="inhoud">
  <noframes>
    <p>Dit frameset-document bevat de volgende frames:</p>
    <ul>
      <li><a href="menu.html">Een menu</a></li>
      <li><a href="inhoud.html">De eigenlijke inhoud</a></li>
    </ul>
  </noframes>
</frameset>

</html>

Het name-attribuut bij ieder frame-element zal later erg handig blijken wanneer u naar bepaalde frames wilt linken.

Een frame

Het frame zelf verschilt niet van een normale pagina. Denk er echter aan dat de inhoud van het title-element van de frameset zal worden weergegeven wanneer er via de frameset naar het frame wordt gekeken.

Linken naar het goede frame

Wanneer u via een link in het menu de inhoud van een ander frame, in dit geval het inhoudsframe, wilt veranderen, dan zult u dat in de link bekend moeten maken. U zult een doelframe bekend moeten maken door middel van een target-attribuut op de link.

HTML-code: Link waarvan de inhoud wordt geopend in een bepaald frame

<a href="inhoudspagina2.html" target="inhoud">Blaat</a>

Iframes

Een schets bij de code van de situatie bij iframes. Op de pagina normalepagina.html is in een iframe de pagina iframe.html opgenomen.

Iframes zijn een variatie op het frames-principe. Nu maakt u geen aparte frameset-pagina om vervolgens de verschillende frames als losse stukken inhoud te behandelen, maar maakt u een normale pagina waarin u door middel van een iframe een andere pagina plaatst.

U maakt gebruik van de volgende code:

HTML-code: Een iframe plaatsen

<iframe src="iframe.html" name="Woei">
 <p>Deze tekst is bedoeld voor user agents die het gebruik van iframes niet ondersteunen. Hier zou dus alternatieve informatie moeten worden gegeven.</p>
</iframe>

Voor- en nadelen

De theorie achter frames is natuurlijk ontzettend handig, maar in de praktijk heeft deze techniek ook nadelen.

Voordelen

U heeft minder werk wanneer u bijvoorbeeld uw menu wilt aanpassen: u past dan één pagina aan, in plaats van het menu dat op iedere pagina staat.
Uw bezoekers hoeven kleinere bestanden te downloaden: men downloadt immers het menu maar eenmaal, in plaats van iedere keer weer opnieuw.

Nadelen

Mensen die vanuit zoekmachines naar uw site komen, missen vaak het menu (omdat ze niet naar de frameset-pagina gaan, maar direct naar de inhoudspagina). Zij kunnen dus niet door uw site navigeren.
De "vorige"-browserknop werkt in veel gevallen niet meer, omdat het surfen binnen een frameset niet als het bezoeken van aparte pagina's wordt gezien.
Een aantal zoekmachines ondersteunt geen frames: zij kunnen dus uw site niet goed doorzoeken en u komt laag in de zoekresultaten te staan.
"Alternatieve" browsers hebben het vaak moeilijk met frames en kunnen ze niet weergeven.
Het is moeilijk, zo niet onmogelijk om frames de juiste afmetingen te geven. U wilt er immers voor zorgen dat bijvoorbeeld een menu helemaal te zien is en dat het geen scrollbalken bevat, maar daarnaast moet het andere frame ook nog goed zichtbaar zijn op kleine beeldschermen (palmtops etcetera).

Het verdient dan ook de voorkeur om herhaald voorkomende elementen dynamisch te laten plaatsen door middel van PHP, ASP of een andere scripttaal. Zo bespaart u zich veel extra werk, terwijl u niet vastzit aan de nadelen van frames.

Meer informatie

De specificaties over frames (Engels)
Veelgestelde vragen over frames in de WDG FAQ (Nederlands)
Een artikel van Naar Voren over frames (Nederlands)
BlindSurfer over frames (Nederlands)