Frames

Bijna alle nieuwe browsers (Netscape 2+ en IE3+) hebben de mogelijkheid om het venster te splitsen is sub-vensters, genaamd frames. Een frame is dus niet anders dan een klein venster binnen een grotere dat naar een bepaald (HTML-)document verwijst.

Frames instellen

Om te kunnen werken met frames, moet je een apart bestand maken, waarin u per frame verwijzingen maakt naar documenten die in die frames moeten worden weergegeven. De opbouw van zo'n bestand is als volgt:
<html>
<head>
<title>..........</title>
</head>
<frameset>
...
...
...
</frameset>
</html>
Met de code <FRAMESET> kun je het aantal en de grootte van de frames instellen. De code heeft de volgende opties:

Optie Omschrijving

ROWS="frame1, frame2,..." Hiermee geef je het aantal en de grootte van de horizontale frames op. Elke frame wordt gescheiden door een komma en voor de grootte van de frame kun je een waarde in pixels of procenten opgeven. Een * als waarde betekend dat het rest-gedeelte van het venster wordt genomen.

COLS="frame1, frame2,..." Zelfde als hierboven, maar nu voor veticale frames.

Binnen de codes <FRAMESET> en </FRAMESET> moet je in volgorde de verwijzingen naar de (HTML-)documenten toevoegen.
Dit doe je met de code:
<FRAME SRC="bestand.html">
Deze code heeft ook nog een aantal opties:

Optie Omschrijving

NAME= "framenaam" Hiermee kun je een frane een bepaald naam geven, waardoor u verwijzingen vanuit andere frames kunt laten verwijzen naar dit frame. Een framenaam moet beginnen met een letter en geen twee frames mogen dezelfde naam hebben.

MARGINWIDTH= "waarde" Stelt de margebreedte (in pixels) van het frame in.

MARGINHEIGHT= "waarde" Stelt de margehoogte (in pixels) van het frame in.

SCROLLING= "yes/no/auto" Bepaalt of er een schuifbalk in het frame moet komen te staan. Standaard=automatisch

NORESIZE Als je deze optie toevoegd kan de gebruiker de grootte van het frame niet veranderen.

In de komende voorbeeld wordt er gebruik gemaakt van drie extra documenten: doc1.html, doc2.html en doc3.html. Deze bestanden hebben de volgende inhoud:
<html>
<head>
<title>doc 1 (2 of 3)</title>
</head>
<body>
Dit is doc 1 (2 of 3)
</body>
</html>
Voorbeeld 1, het venster delen in twee horizontale frames:
<html>
<head>
<title>Frames - voorbeeld1</title>
</head>
<frameset rows=40%,60%>
   <frame src="doc1.html">
   <frame src="doc2.html">
</frameset>
</html>
Klik hier om voorbeeld 1 te bekijken.

In voorbeeld 2 wordt het te frame gesplitst in twee verticale frames:
<html>
<head>
<title>Frames - voorbeeld2</title>
</head>
<frameset rows=40%,60%>
   <frame src="doc1.html">
   
   <frameset cols="300,*">
      <frame src="doc2.html">
      <frame src="doc3.html">
   </frameset>
</frameset>
</html>
Klik hier om voorbeeld 2 te bekijken.

Optie	Omschrijving
ROWS="frame1, frame2,..."	Hiermee geef je het aantal en de grootte van de horizontale frames op. Elke frame wordt gescheiden door een komma en voor de grootte van de frame kun je een waarde in pixels of procenten opgeven. Een * als waarde betekend dat het rest-gedeelte van het venster wordt genomen.
COLS="frame1, frame2,..."	Zelfde als hierboven, maar nu voor veticale frames.

Optie	Omschrijving
NAME= "framenaam"	Hiermee kun je een frane een bepaald naam geven, waardoor u verwijzingen vanuit andere frames kunt laten verwijzen naar dit frame. Een framenaam moet beginnen met een letter en geen twee frames mogen dezelfde naam hebben.
MARGINWIDTH= "waarde"	Stelt de margebreedte (in pixels) van het frame in.
MARGINHEIGHT= "waarde"	Stelt de margehoogte (in pixels) van het frame in.
SCROLLING= "yes/no/auto"	Bepaalt of er een schuifbalk in het frame moet komen te staan. Standaard=automatisch
NORESIZE	Als je deze optie toevoegd kan de gebruiker de grootte van het frame niet veranderen.

Documenten aan frames toewijzen

Je zou niets aan frames hebben als je geen links naar diverse frames kan maken, waarin de documenten geopend moeten worden. Om dit te doen geven de frames een naam:
<frame src="bron.html" name="naam_van_frame">
En een link maak je dan als volgt:
<a href="doel.html" target="naam_van_frame">tekst van de link</a>
Als iemand op de link klikt wordt het document (doel.html) geopend in het frame met de naam "naam_van_frame".
U kan ook een standaard doel-frame instellen door in het begin van het document
<base target="naam_van_frame">
neer te zetten.

In het onderstaande voorbeeld wordt gebreuk gemaakt van doc2.html en doc3.html. Extra is frames_menu.html:
<html>
<head>
<title>Menu</title>
</head>
<body>
<base target="frame3">
<h3>Menu</h3>
<a href="doc2.html" target="frame2">Doc 2 in frame 2</a><br>
<a href="doc3.html" target="frame2">Doc 3 in frame 2</a><br>
<a href="doc2.html">Doc 2 in frame 3</a><br>
<a href="doc3.html">Doc 3 in frame 3</a><br>
</body>
</html>
De frame-pagina ziet er als volgt uit:
<html>
<head>
<title>Frames - voorbeeld3</title>
</head>
<frameset rows=40%,60%>
   <frame src="frames_menu.html" name="menu_frame">
   
   <frameset cols="300,*">
      <frame src="doc2.html" name="frame2">
      <frame src="doc3.html" name="frame3">
   </frameset>
</frameset>
</html>
Klik hier om voorbeeld 3 te bekijken.

Help, geen frames toegestaan

Er zijn ook nog steeds mensen die werken met een browser die geen frames ondersteunen, ook hier is een oplossing voor:
<html>
<head>
<title>Frames - voorbeeld4</title>
</head>
<frameset rows=40%,60%>
   <frame src="doc1.html" name="frame1">
   <frame src="doc2.html" name="frame2">
<noframe>
   <p><font color="green">
      Uw browser ondersteunt geen frames
   </font></p>
</noframe>
</frameset>
</html>
Als mensen deze pagina bekijken zonder frame-ondersteuning zien ze dit:

Uw browser ondersteund geen frame

Anderen zien gewoon de framepagina zoals in voorbeeld1.

Inhoud van 2 frames wijzigen met één link

Stel dat je de onderstaande frameset hebt en zowel de content van frame1 als frame2 wilt wijzigen met één link in het menu.:

menu frame1

frame2

Dit kan door de link als volgt te maken:
<a href="doc1.html" target="frame1" onClick="parent.frame2.location.href='doc2.html';">link tekst</a> 
   
Klik hier om het voorbeeld te bekijken.