HTML Frames


Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie frames | Opbouw frames | Voorbeelden frames | Browser ondersteunt geen frames | Document openen in frame | Meerdere frames tegelijk vervangen | Frameranden | Inline frames | Uitlijnen inline frame | Document openen in inline frame | Transparante inline frames

Gerelateerde elementen: FRAME | FRAMESET | IFRAME | NOFRAMES


Voorbeelden frames

Wanneer je het venster van de browser horizontaal wilt verdelen in twee frames, dan moet je aan het FRAMESET element het ROWS attribuut toevoegen. Binnen het FRAMESET element plaats je voor elk frame een FRAME element. Met het SRC attribuut geef je aan welk HTML-document in dat frame geopend moet worden.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="30%,70%">
  <FRAME SRC="boven.html">
  <FRAME SRC="onder.html">
</FRAMESET>
</HTML>

Bekijk het resultaat in een nieuw venster.

Wanneer je het venster verticaal wilt verdelen in twee frames, dan voeg je in plaats van het ROWS attribuut het COLS attribuut aan het FRAMESET element toe.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
  <FRAME SRC="links.html">
  <FRAME SRC="rechts.html">
</FRAMESET>
</HTML>

Bekijk het resultaat in een nieuw venster.

Wanneer je een indeling wilt met zowel rijen als kolommen, dan werk je meestal met geneste framesets. Dat wil zeggen dat je een frameset opneemt binnen een ander frameset. In het volgende voorbeeld verdeelt het eerste frameset het venster horizontaal in drie frames. Het bovenste frame is 90 pixels hoog, het onderste frame 150 pixels en het middelste frame krijgt de rest van de beschikbare hoogte. Het middelste frame is vervolgens verticaal verdeeld in drie frames, waarbij het linker frame 50% van de beschikbare breedte heeft, het rechter frame 125 pixels breed is en het middelste frame de resterende breedte krijgt.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="90,*,150">
  <FRAME SRC="boven.html">
  <FRAMESET COLS="50%,*,125">
    <FRAME SRC="links.html">
    <FRAME SRC="midden.html">
    <FRAME SRC="rechts.html">
  </FRAMESET>
  <FRAME SRC="onder.html">
</FRAMESET>
</HTML>

Bekijk het resultaat in een nieuw venster.

Wanneer je een symmetrische indeling van de frames wilt, dan kun je ook met één frameset werken en de attributen ROWS en COLS voor het FRAMESET element combineren.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%" COLS="25%,75%">
  <FRAME SRC="linksboven.html">
  <FRAME SRC="rechtsboven.html">
  <FRAME SRC="linksonder.html">
  <FRAME SRC="rechtsonder.html">
</FRAMESET>
</HTML>

Bekijk het resultaat in een nieuw venster.

Wanneer je de attributen ROWS en COLS niet opneemt voor het FRAMESET element, dan wordt voor elk de beginwaarde 100% aangehouden. Het resultaat hiervan is, dat het frame dan het hele venster vult. Voor deze constructie wordt wel gekozen als het gewenst is dat het adres van het document in het frame niet zichtbaar is in de adresbalk van de browser.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET>
  <FRAME SRC="volledig.html">
</FRAMESET>
</HTML>

Bekijk het resultaat in een nieuw venster.


In de voorgaande voorbeelden is geen gebruik gemaakt van het NORESIZE attribuut. De rand tussen de frames kan daardoor, zoals in de volgende afbeelding te zien is, met de muis verplaatst worden.

Voorbeeld NORESIZE

Door het NORESIZE attribuut aan het eerste FRAME element toe te voegen, kan dit niet meer.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="30%,70%">
  <FRAME SRC="links.html" NORESIZE>
  <FRAME SRC="rechts.html">
</FRAMESET>
</HTML>

Bekijk het resultaat in een nieuw venster.


Door de attributen MARGINWIDTH en MARGINHEIGHT aan het FRAME element toe te voegen, kun je aangeven hoe groot de afstand moet zijn tussen de inhoud van een frame en de linker- en rechterrand, respectievelijk de boven- en onderrand van het frame.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="*,60">
<FRAMESET COLS="*,*,*">
<FRAME SRC="links.html">
<FRAME SRC="midden.html" MARGINWIDTH="1" MARGINHEIGHT="1">
<FRAME SRC="rechts.html" MARGINWIDTH="30" MARGINHEIGHT="30">
</FRAMESET>
<FRAME SRC="onder.html">
</FRAMESET>
</HTML>

Bekijk het resultaat in een nieuw venster.

Door het SCROLLING attribuut aan het FRAME element toe te voegen, kun je bepalen of wel of geen schuifbalk moet worden weergegeven. In het volgende voorbeeld wordt in de bovenste twee frames hetzelfde document geopend. Aan het bovenste frame is het SCROLLING attribuut toegevoegd met de waarde "no", waardoor er geen schuifbalk wordt weergegeven. Aan het middelste frame is het SCROLLING attribuut niet toegevoegd en de schuifbalk wordt weergegeven, omdat deze nodig is om de volledige inhoud van het document te laten zien. Voor het onderste frame is SCROLLING="yes" opgenomen. Een browser die deze waarde ondersteunt, geeft in dit frame de schuifbalk weer ook al is deze niet nodig.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="60,60,*">
<FRAME SRC="boven.html" SCROLLING="no">
<FRAME SRC="boven.html">
<FRAME SRC="onder.html" SCROLLING="yes">
</FRAMESET>
</HTML>

Bekijk het resultaat in een nieuw venster.


Vervolg: Browser ondersteunt geen frames



Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 12 maart 2006