Frames

In dit onderdeel komen aan de orde Introductie, Elementen, Opbouw frames, Voorbeelden frames, Frames niet ondersteund, Document openen in frame, Meerdere frames tegelijk vervangen, Frameranden, Frames en JavaScript, Inline frames, Uitlijnen inline frames en Document openen in inline frame.

Introductie

Met behulp van framing kan een venster onderverdeeld worden in meerdere frames of sub-vensters. In elk frame kan een document geopend worden. De frames werken onafhankelijk van elkaar, een document in het ene frame kan vooral een statische weergave hebben (bijvoorbeeld een titelbalk of een inhoudsopgave), terwijl in een ander frame door opeenvolgende documenten heen gelopen wordt. Vanuit elk document kunnen hyperlinks nieuwe documenten openen in hetzelfde of in een ander frame.

Frames worden gemaakt met de elementen FRAMESET en FRAME.
Het FRAMESET element verdeelt een venster in subvensters, in horizontale richting met het COLS attribuut, in verticale richting met het ROWS attribuut. Meestal bevat een FRAMESET element alleen het COLS of alleen het ROWS attribuut, maar het is ook mogelijk beide attributen tegelijk te gebruiken.
Het FRAME element definieert een frame. Met het SRC attribuut wordt bepaald welk document in het frame geopend moet worden. De FRAME elementen worden geplaatst binnen het FRAMESET element. In plaats van een FRAME element kan ook een nieuw (genest) FRAMESET element opgenomen, dat op zijn beurt weer een aantal FRAME elementen bevat.
Aan een frame wordt met het NAME attribuut van het FRAME element een naam gegeven. Door in een hyperlink het TARGET attribuut te gebruiken met de naam van een frame, wordt het betreffende document in het frame met die naam geopend.
Standaard worden de randen tussen de frames in de meeste browsers in 3-D uitgevoerd. Met het FRAMEBORDER attribuut kan aangegeven worden dat de randen niet in 3-D randen, maar vlak moeten worden weergegeven.
Het NOFRAMES element wordt gebruikt om inhoud op te nemen, welke alleen moet worden weergegeven indien de browser geen frames ondersteunt, of indien het gebruik van frames is uitgeschakeld.

Een bijzondere vorm van frames zijn inline frames (ook wel floating of zwevende frames). Inline frames kun je opnemen in een normaal document. Je moet daarbij denken aan een venster in je document, waar je doorheen kijkt naar een ander document. In het document in dat venster (of eigenlijk frame) kun je net als bij normale frames klikken op een hyperlink, welke vervolgens geopend wordt. Dat openen kan in het frame waarin je geklikt hebt, maar ook in een ander (al dan niet inline) frame.
Een inline frame wordt gemaakt met het IFRAME element.

Elementen

Voor het maken van documenten met (inline) frames zijn de volgende elementen beschikbaar:

De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Microsoft Internet Explorer, Mozilla, Netscape Navigator en Opera.

Opbouw frames

Het gebruiken van frames is niet bijzonder ingewikkeld, mits je maar systematisch te werk gaat.
Als eerste bedenk je op welke wijze je het venster wilt indelen. Daarna gaat het erom stapsgewijs vanuit een leeg venster de gewenste indeling op te bouwen. Je doet dat door in eerste instantie het gehele venster en daarna steeds één frame te vervangen door een frameset met daarin het gewenste aantal nieuwe frames.
We zullen we dat nu doen voor de hieronder afgebeelde indeling. Omdat het vooral om het principe gaat, worden geen waarden opgenomen voor het ROWS of het COLS attribuut van het FRAMESET element. Bovendien wordt het SRC attribuut van het FRAME element vervangen door een aanduiding van elk frame (bijvoorbeeld A1, B11 of B3).

De eerste stap is het verdelen van het gehele venster ofwel verticaal in rijen, ofwel horizontaal in kolommen. In dit geval moet het venster in twee kolommen verdeeld worden. Dat leidt tot de volgende opbouw:

<FRAMESET COLS=" , ">   <FRAME A>   <FRAME B> </FRAMESET>

De tweede stap is het vervangen van FRAME A door een frameset met twee rijen:

<FRAMESET COLS=" , ">   <FRAMESET ROWS=" , ">     <FRAME A1>     <FRAME A2>   </FRAMESET>   <FRAME B> </FRAMESET>

De derde stap is het vervangen van FRAME B door een frameset, nu met drie rijen:

<FRAMESET COLS=" , ">   <FRAMESET ROWS=" , ">     <FRAME A1>     <FRAME A2>   </FRAMESET>   <FRAMESET ROWS=" , , ">     <FRAME B1>     <FRAME B2>     <FRAME B3>   </FRAMESET> </FRAMESET>

Tenslotte wordt FRAME B1 vervangen door een frameset met twee kolommen.

<FRAMESET COLS=" , ">   <FRAMESET ROWS=" , ">     <FRAME A1>     <FRAME A2>   </FRAMESET>   <FRAMESET ROWS=" , , ">     <FRAMESET COLS=" , ">       <FRAME B11>       <FRAME B12>     </FRAMESET>     <FRAME B2>     <FRAME B3>   </FRAMESET> </FRAMESET>

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.htm">
  <FRAME SRC="onder.htm">
</FRAMESET>
</HTML>

Indien de browser frames ondersteunt, kun je het resultaat bekijken 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.htm">
  <FRAME SRC="rechts.htm">
</FRAMESET>
</HTML>

Indien de browser frames ondersteunt, kun je het resultaat bekijken 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.

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.htm" NORESIZE>
  <FRAME SRC="rechts.htm">
</FRAMESET>
</HTML>

Bekijk het resultaat in een nieuw venster.

In het volgende voorbeeld van een document met geneste framesets (een frameset binnen een frameset) zijn de rijen en kolommen op verschillende manieren gedefinieerd. Het eerste frameset verdeeld het venster horizontaal in drie frames, waarbij het eerste frame 150 pixels hoog is, het onderste frame 90 pixels, en het middelste frame de rest van de beschikbare hoogte. Het middelste frame wordt vervolgens verticaal in drie frames verdeel, waarbij het linker frame 50% van de beschikbare breedte krijgt, het rechter frame 125 pixels en het middelste frame weer de rest.

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

Indien de browser frames ondersteunt, kun je het resultaat bekijken in een nieuw venster.

Door de attributen MARGINWIDTH en MARGINHEIGHT aan het FRAME element toe te voegen, 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. In de onderste twee frames gaat het om het SCROLLING attribuut.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="*,60">
<FRAMESET COLS="*,*,*">
<FRAME SRC="links.htm">
<FRAME SRC="midden.htm" MARGINWIDTH="1" MARGINHEIGHT="1">
<FRAME SRC="rechts.htm" MARGINWIDTH="30" MARGINHEIGHT="30">
</FRAMESET>
<FRAME SRC="onder.htm">
</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", aan het middelste frame is het SCROLLING attribuut niet toegevoegd.

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

Bekijk het resultaat in een nieuw venster.

Frames niet ondersteund

Als bovenstaande voorbeelden worden geopend in een browser die geen frames ondersteunt, dan krijgt de gebruiker een leeg venster te zien. Om dat te voorkomen, moet je het NOFRAMES element opnemen. Je plaatst het vlak voor de beëindiging van het buitenste frameset. Binnen het NOFRAMES element neem je het BODY element op en daar binnen de inhoud die je wilt weergeven. De kleur van de tekst, de hyperlinks en de achtergrond van de inhoud van het NOFRAMES element kun je bepalen, door aan het BODY element de benodigde attributen toe te voegen (TEXT, LINK, VLINK, ALINK, BGCOLOR en BACKGROUND).
De door het NOFRAMES element ingesloten inhoud wordt niet weergegeven door een browser die frames ondersteunt en is dus alleen in andere browsers zichtbaar.

In het volgende voorbeeld is binnen het NOFRAMES element een korte boodschap aan de gebruiker opgenomen.

<FRAMESET>
..
<NOFRAMES>
<BODY>
<P>Om deze pagina te kunnen bekijken, moet je over een browser beschikken die frames ondersteunt, bijvoorbeeld Microsoft Internet Explorer of Netscape Navigator.</P>
</BODY>
</NOFRAMES>
</FRAMESET>

De bezoeker met een browser die geen frames ondersteunt, krijgt alleen de tekst te zien die tussen de activering en beëindiging van het NOFRAMES element staat. Deze oplossing is niet zo aardig voor de bezoeker, omdat je hem of haar ofwel dwingt een andere browser te gaan gebruiken, ofwel de toegang tot jouw pagina's ontzegt. Beter is het te zorgen voor een goede noframes-versie. In het NOFRAMES element neem je dan een verwijzing naar de noframes-versie op. Bijkomend voordeel is dat je hiermee de kans vergroot dat je pagina's door de verschillende zoekmachines geïndexeerd worden. Veel zoekmachines volgen namelijk alleen hyperlinks in het noframes-gedeelte.

In het volgende voorbeeld bevat het linkerframe een overzicht met hyperlinks, waarmee je door de site kunt navigeren. Het rechterframe bevat de feitelijke inhoud van de site. In een browser die geen frames ondersteunt, kan de bezoeker in het noframes-gedeelte doorklikken en dan toch de inhoud van het rechter frame bekijken. Je moet er in zo'n geval natuurlijk wel voor zorgen dat de bezoeker ook in de noframes-versie voldoende navigatiemogelijkheden heeft.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET COLS="100,*">
<FRAME SRC="navigatie.htm">
<FRAME SRC="begin.htm">
<NOFRAMES>
<BODY>
<P>De browser ondersteunt geen frames, bekijk daarom de versie zonder <A HREF="begin.htm">frames<A></P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Bekijk in een nieuw venster wat de bezoeker ziet in een browser met frames ondersteuning en in een browser zonder frames ondersteuning.

Document openen in frame

Speciale aandacht verdient het gebruik van hyperlinks in documenten in frames. Standaard wordt een document geopend in het frame waarin de hyperlink staat. Vaak is dat echter niet gewenst en wil je het document juist in een ander frame openen. In andere gevallen wil je het document helemaal niet in een frame openen, maar juist in het volledige venster van de browser.
Het toevoegen van TARGET attribuut aan het element waarmee je de hyperlink maakt (bijvoorbeeld A of AREA) biedt in dit geval uitkomst. Wanneer je als waarde van het TARGET element de naam van een frame opneemt, dan wordt het document in dat frame geopend. De naam van het frame definieer je met behulp van het NAME attribuut van het FRAME element en moet beginnen met een hoofdletter of een kleine letter (A-Z of a-z). Volgens HTML 4.0 is de naam case-insensitive, dat wil zeggen dat geen onderscheid gemaakt wordt tussen hoofd- en kleine letters. In de praktijk maken alle belangrijke browsers dat onderscheid echter wel en moet je er dus voor zorgen dat je zowel in het TARGET attribuut van de hyperlink als in het NAME attribuut exact dezelfde naam gebruikt.

In het volgende voorbeeld is aan elk van de frames een naam gegeven met behulp van het NAME attribuut.

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="120,*">
<FRAME SRC="navigatie.htm" NAME="navigatieframe">
<FRAME SRC="begin.htm" NAME="hoofdframe">
</FRAMESET>
</HTML>

In het documenten in het linker frame zijn de URI's als volgt opgenomen:

<A HREF="vb-a.htm" TARGET="hoofdframe">voorbeeld a</A>

en

<A HREF="vb-b.htm" TARGET="navigatieframe">voorbeeld b</A>

Indien de browser frames ondersteunt, kun je het resultaat bekijken in een nieuw venster.

Naast een zelf bepaalde framenaam kun je in een TARGET attribuut ook gebruik maken van enkele voor-gedefinieerde namen: "_blank", "_parent", "_top" en "_self".

In het volgende voorbeeld wordt gebruik gemaakt van de voor-gedefinieerde framenaam "_blank". Het document wordt daardoor geopend in een nieuw browservenster. Hetzelfde gebeurt overigens als je gebruik maakt van een niet gedefinieerde framenaam.

<A HREF="vb-c.htm" TARGET="_blank">vensternaam _blank</A>

<A HREF="vb-c.htm" TARGET="zomaar_een_naam">niet gedefinieerde vensternaam</A>

Het resultaat zie je in een nieuw venster.

Als je de voor-gedefinieerde framenaam "_parent" gebruikt wordt een hyperlink geopend in de parent van het huidige frameset. Dat komt er op neer dat het huidige frameset vervangen wordt door het in de link genoemde bestand.

TARGET="_parent"

Bekijk in een nieuw venster hoe het werkt.

Met de voor-gedefinieerde framenaam "_top" wordt een document geopend in het volledige venster van de browser.

TARGET="_top"

Indien je veel hyperlinks in een document hebt, dan kan het handig zijn gebruik te maken van het BASE element met daaraan toegevoegd het TARGET attribuut. Je geeft daarmee aan dat alle URI's in het document geopend moeten worden in een frame met de opgegeven naam. In de URI's zelf hoef je dan geen gebruik meer te maken van het TARGET attribuut. Voor uitzonderingen op de regel gebruik je in de URI wel het TARGET attribuut (het TARGET attribuut in de URI gaat boven het TARGET attribuut in het BASE element). Zie ook de beschrijving bij het onderdeel Hyperlinks.
In het volgende voorbeeld is in de documenten in het bovenste frame het BASE element opgenomen:

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
<BASE TARGET="onder">
</HEAD>
<BODY>
....
</BODY>
</HTML>

In een nieuw venster zie je hoe het werkt.

Wanneer het TARGET attribuut van het BASE element verwijst naar een ander frame en je wilt een document openen in het frame waarin de hyperlink staat, dan kun je als waarde van het TARGET element van bijvoorbeeld het A of AREA gebruik maken van de voor-gedefinieerde framenaam "_self".

Meerdere frames tegelijk vervangen

Soms wil je niet alleen de inhoud van één frame vervangen, maar van meerdere frames tegelijkertijd. Dat kan met HTML indien deze frames samen een frameset vormen, dat je als geheel kunt vervangen. Dat is in het volgende voorbeeld het geval met de frames links 1 en rechts 1. Deze frames kunnen dus in één keer vervangen worden door de frames links 2 en rechts 2.

Bekijk in een nieuw venster hoe het werkt.

Als je van plan bent een compleet frameset te vervangen, moet je daar bij de opzet van je site vanaf het begin rekening mee houden. Normaal zou het document waarin de frames uit het voorbeeld worden gedefinieerd, de volgende opbouw hebben:

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET ROWS="90,*">
<FRAME SRC="frameboven.htm" NAME="boven">
<FRAMESET COLS="120,*">
<FRAME SRC="framelinks.htm" NAME="links">
<FRAME SRC="framerechts.htm" NAME="rechts">
</FRAMESET>
</FRAMESET>
</HTML>

Om de onderste twee frames tegelijkertijd te kunnen vervangen, moet het tweede frameset opgenomen worden in een apart document. Het eerste document krijgt de volgende opbouw:

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET ROWS="90,*">
<FRAME SRC="frameboven.htm" NAME="boven">
<FRAME SRC="frameonder1.htm" NAME="onder">
</FRAMESET>
</HTML>

In het document frameonder1.htm wordt het frameset gedefinieerd, dat de onderste twee frames bevat:

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="framelinks1.htm" NAME="links">
<FRAME SRC="framerechts1.htm" NAME="rechts">
</FRAMESET>
</HTML>

Om de onderste twee frames in één keer te vervangen, kun je nu in willekeurig welk frame een hyperlink opnemen met de volgende opbouw:

<A HREF="frameonder2.htm" TARGET="onder">Vervang de frames</A>

Het document frameonder2.htm heeft dezelfde opbouw als het document frameonder1.htm, alleen verwijst het SRC attribuut van de FRAME elementen naar andere documenten.

In de praktijk zullen de te vervangen frames lang niet altijd niet samen één frameset vormen. Dat is bijvoorbeeld het geval in het volgende voorbeeld:

In HTML heb je dan slechts de mogelijkheid het complete venster te wijzigen en in het te openen document alle frames opnieuw te definiëren. Dus ook het frame wat helemaal niet vervangen hoeft te worden.

Als je vaker meerdere frames tegelijkertijd wilt vervangen, levert de beschreven methode behoorlijk wat werk en extra documenten op. Als alternatief wordt daarom vaak gebruik gemaakt van een oplossing met JavaScript. Daarmee kun je ook eenvoudig frames uit verschillende framesets tegelijk vervangen. Nadeel van het werken met JavaScript is wel, dat het gewenste effect niet bereikt wordt als de bezoeker het gebruik van JavaScript heeft uitgesloten.

Frameranden

Standaard worden frameranden in de meeste browsers weergegeven in 3-D. Met het FRAMEBORDER attribuut van het FRAME element kun je de weergave van de framerand beïnvloeden. Met de waarde "1" wordt tussen de frames de standaard 3-D rand geplaatst. De waarde "0" zorgt ervoor dat de 3-D rand niet wordt weergegeven. Omdat de ruimte tussen de frames door de meeste browsers daarbij niet geheel of soms helemaal niet wordt weggelaten, is het resultaat een "vlakke" rand.
Netscape Navigator 2 en Opera met versienummer lager dan 4 ondersteunen het FRAMEBORDER attribuut niet. In deze browsers wordt de framerand dus altijd in 3-D weergegeven. Opera 6 ondersteunt het FRAMEBORDER ook niet, maar geeft de frameranden altijd vlak weer.

De breedte van de framerand is afhankelijk van de browser. HTML 4.0 kent geen mogelijkheid de breedte te beïnvloeden, maar de browsermakers hebben hiervoor in de loop van de tijd toch enige attributen ontwikkeld.
Vrij algemeen ondersteund wordt het BORDER attribuut van het FRAMESET element: door Microsoft Internet Explorer vanaf versie 4, Mozilla, Netscape Navigator vanaf versie 3.0 en Opera.
Het FRAMESPACING van het FRAMESET element attribuut doet in hoofdlijnen hetzelfde als het BORDER attribuut, maar wordt alleen ondersteund door Internet Explorer 3 en hoger.

Wanneer je de breedte van de framerand wilt bepalen, dan is een gegeven waar je rekening mee moet houden, dat de diverse browsers de rand verschillend weergeven ook als je gebruik maakt van hetzelfde attribuut met dezelfde waarde. In de hierna opgenomen tabellen is dat te zien voor de verschillende versies voor Windows van Microsoft Internet Explorer, Mozilla, Netscape Navigator en Opera.

In de eerste tabel is aan elk FRAME element steeds het attribuut FRAMEBORDER="1" toegevoegd. De rand wordt daardoor in 3-D weergegeven.
Aan het FRAMESET element zijn achtereenvolgens geen attribuut (dat is dus de standaard weergave) en, met verschillende waarden, het BORDER attribuut, het FRAMESPACING attribuut en de combinatie van de attributen BORDER en FRAMESPACING toegevoegd.

In de tabel is te zien dat een uniforme weergave door de verschillende browser(versies) niet mogelijk is. Bij de standaardweergave begint in de nieuwste browsers (met uitzondering van Opera 6) weliswaar zo langzamerhand enige uniformiteit te komen, bij de overige mogelijkheden is dat allerminst het geval. Bij een combinatie van de attributen BORDER en FRAMESPACING komen Microsoft Internet Explorer en Opera versie 4 en 5 op dezelfde breedte uit, Mozilla en Netscape Navigator 6 wijken daar echter weer aanzienlijk vanaf. Opera 6 ondersteunt het FRAMEBORDER attribuut van het FRAME element niet meer en geeft frameranden alleen nog vlak weer.

Opmerkingen bij de tabel:

• de framerand is in 3-D tenzij anders vermeld (v = vlak)
• Opera 6 ondersteunt het FRAMEBORDER attribuut niet meer en geeft frameranden standaard vlak weer
• de breedte is in pixels
• in Netscape Navigator 3 en 4 is de breedte van de framerand de waarde van het BORDER attribuut, bij even getallen verhoogd met 2 en bij oneven getallen verhoogd met 3
• als het BORDER attribuut een waarde heeft lager dan 3 bij Netscape Navigator 3/4 en lager dan 5 bij Microsoft Internet Explorer, dan is de breedte anders dan volgens de formule bij de waarde x (zie het uitgebreide overzicht)

In de tweede tabel is aan elk FRAME element steeds het attribuut FRAMEBORDER="0" toegevoegd. De rand wordt daardoor in het algemeen vlak weergegeven. Uitzonderingen zijn Netscape Navigator 2 en Opera met versienummer lager dan 4, die het FRAMEBORDER attribuut niet kennen en de rand dus in 3-D weergeven.

Ook in dit geval zijn aan het FRAMESET element achtereenvolgens geen attribuut (dat is dus de standaard weergave) en, met verschillende waarden, het BORDER attribuut, het FRAMESPACING attribuut en de combinatie van de attributen BORDER en FRAMESPACING toegevoegd.

In de tabel is te zien dat nu juist bij de standaardweergave geen sprake is van uniformiteit. Bij een combinatie van de attributen BORDER en FRAMESPACING begint de weergave daarentegen redelijk uniform te worden in browsers die het FRAMEBORDER attribuut ondersteunen.

Opmerkingen bij de tabel:

• de framerand is vlak tenzij anders vermeld (d = in 3-D)
• de breedte is in pixels
• in Netscape Navigator 3/4 is de breedte van de framerand de waarde van het BORDER attribuut, bij oneven getallen verhoogd met 1
• als het BORDER attribuut een waarde heeft lager dan 4 bij Microsoft Internet Explorer, dan is de breedte anders dan volgens de formule bij de waarde x (zie het uitgebreide overzicht)

In het volgende voorbeeld is de weergave te zien van de verschillende mogelijkheden voor 3-D en vlakke frameranden. Voor de mogelijkheid, waarbij het FRAMEBORDER attribuut van het FRAME element de waarde de "0" heeft en de attributen BORDER en FRAMESPACING van het FRAMESET van het FRAMESET element de waarde "10" hebben, is de opbouw als volgt:

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="25,*,25" BORDER="10" FRAMESPACING="10">
<FRAME FRAMEBORDER="0" SRC="boven-onder.htm" SCROLLING="no">
<FRAME FRAMEBORDER="0" SRC="midden.htm">
<FRAME FRAMEBORDER="0" SRC="boven-onder.htm" SCROLLING="no">
</FRAMESET>
</HTML>

Bekijk het voorbeeld in een nieuw venster.

Uit de laatste tabel blijkt dat je de waarde van zowel het BORDER als het FRAMESPACING attribuut op "0" moet stellen, om in de verschillende browsers (met uitzondering van Netscape Navigator 2) de frameranden geheel te laten wegvallen.

Bij frames waarvan de randen niet meer zichtbaar zijn, kan het soms handig zijn de inhoud van een frame zo dicht mogelijk in de linker bovenhoek te plaatsen. Je doet dat door aan het FRAME element de attributen MARGINWIDTH en het MARGINHEIGHT toe te voegen met de waarde "1".

<FRAME FRAMEBORDER="0" SRC="midden.htm" MARGINWIDTH="1" MARGINHEIGHT="1">

Bekijk het resultaat in een nieuw venster.

Bij de meeste browsers is de minimale afstand tot de bovenrand zo'n 3 à 4 pixels, in Netscape Navigator 6 echter 16 pixels.

De 3-D frameranden zijn standaard bij alle browsers grijs. De vlakke frameranden hebben bij Netscape Navigator 3 en 4 en bij Microsoft Internet Explorer 3 en 5 en hoger standaard de achtergrondkleur van de browser, zijn bij Internet Explorer 4 en Opera 4 en 5 grijs en bij Mozilla en Netscape Navigator 6 wit.
HTML 4.0 kent geen mogelijkheid om de kleur van de framerand te beïnvloeden, maar de browsermakers hebben hiervoor het BORDERCOLOR attribuut van het FRAME element ontwikkeld. De beïnvloedingsmogelijkheden zijn echter beperkt, omdat het attribuut in de meeste browsers alleen effect heeft op de kleur van de 3-D frameranden. Alleen bij Microsoft Internet Explorer 4 kun je ook de kleur van vlakke randen bepalen.
Het BORDERCOLOR attribuut wordt ondersteund door Netscape Navigator 3 en hoger en door Microsoft Internet Explorer 4 en hoger. Opera ondersteunt het BORDERCOLOR attribuut niet.

In het volgende voorbeeld is de weergave te zien van frameranden in kleur. Voor de mogelijkheid, waarbij het FRAMEBORDER attribuut van het FRAME element de waarde de "1" heeft en de attributen BORDER en FRAMESPACING van het FRAMESET element de waarde "10" hebben, is de opbouw als volgt:

<HTML>
<HEAD>
<TITLE>Voorbeeld frames</TITLE>
</HEAD>
<FRAMESET ROWS="25,*,25" BORDER="10" FRAMESPACING="10">
<FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="boven-onder.htm" SCROLLING="no">
<FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="midden.htm">
<FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="boven-onder.htm" SCROLLING="no">
</FRAMESET>
</HTML>

Bekijk hoe de browser de verschillende frameranden in een nieuw venster weergeeft.

In het vorige voorbeeld is voor alle frames dezelfde kleur voor de frameranden gedefinieerd. Dat had ook voor elk frame een andere kleur mogen zijn. Waar de frames aan elkaar grenzen moet de browser dan bepalen welke kleur gebruikt wordt. Elke browser hanteert daarvoor een eigen methode, die niet alleen afwijkt van de weergave van andere browsers, maar bovendien nogal eens onverwachte resultaten oplevert. Het gebruik van meerdere kleuren voor de frameranden is daarom niet echt aan te bevelen.

Bekijk een voorbeeld in een nieuw venster, waarin voor elk frame een eigen kleur is opgegeven.

In Microsoft Internet Explorer 3 en hoger, Mozilla, Netscape Navigator 6 en Opera 4 en hoger kunnen door een gebruiker niet alleen 3-D frameranden verplaatst worden, maar ook "vlakke" frameranden. Wanneer je niet wilt dat dit gebeurt, dan moet je het NORESIZE attribuut aan het FRAME element toevoegen:

<FRAME SRC="frame15a.htm" NORESIZE>

Bekijk in een nieuw venster of de browser dit ondersteunt.

Frames en JavaScript

JavaScript wordt veel gebruikt in combinatie met frames. Mogelijkheden zijn onder meer:

• het updaten van meerdere frames tegelijk met één muisklik
• het updaten van een frame bij openen van een document in een ander frame
• het openen van een document in het volledige venster in plaats van in een frame van iemand anders.

Hoewel JavaScript in principe buiten het bereik van deze handleiding valt, zijn in een apart document enkele voorbeelden opgenomen van de genoemde mogelijkheden.

Inline frames

In het volgende voorbeeld wordt met het IFRAME element een inline frame van 275 pixels breed en 105 pixels hoog gedefinieerd. Met behulp van het SRC attribuut wordt aangegeven welk document in het frame geopend moet worden.

<IFRAME SRC="ifram1a.htm" WIDTH="275" HEIGHT="105">Hier wordt door browsers die het IFRAME element ondersteunen een inline frame weergegeven.</IFRAME>

Het resultaat kun je zien als je een browser gebruikt, die het IFRAME element ondersteunt. Andere browsers herkennen het IFRAME element niet in de body van een document en geven alleen de tekst weer, welke geplaatst is tussen het begin en het eind van het IFRAME element.

Bekijk het voorbeeld in een nieuw venster.

Door het FRAMEBORDER attribuut op te nemen met de waarde "0" kun je de 3-D frameranden weg laten.

<IFRAME SRC="ifram2a.htm" WIDTH="275" HEIGHT="105" FRAMEBORDER="0">Hier wordt ... weergegeven.</IFRAME>

Bekijk het resultaat in een nieuw venster.

Wanneer je het document in het inline frame dezelfde achtergrondkleur geeft als het document waarin het frame geopend wordt, dan lopen beide documenten in elkaar over. Je kunt dit zien in een nieuw venster.

Indien je niet wilt dat de schuifbalk wordt weergegeven, kun je er voor kiezen deze weg te laten. Je gebruikt daarvoor het SCROLLING attribuut met de waarde "no". Je moet er natuurlijk wel voor zorgen dat alles wat je wilt laten zien binnen het frame past.

<IFRAME SRC="ifram4a.htm" WIDTH="275" HEIGHT="105" FRAMEBORDER="0" SCROLLING="no">Hier wordt ... weergegeven.</IFRAME>

Bekijk het resultaat in een nieuw venster.

Met behulp van de attributen MARGINHEIGHT en MARGINWIDTH kun je de afstand van de inhoud van het document in het inline frame tot de rand bepalen.

<IFRAME SRC="ifram5.htm" WIDTH="275" HEIGHT="105" FRAMEBORDER="1" MARGINHEIGHT="15" MARGINWIDTH="30">Hier wordt ... weergegeven.</IFRAME>

Bekijk het resultaat in een nieuw venster.

Wanneer je geen frameranden toepast, wil je de inhoud van het frame misschien zoveel mogelijk in lijn hebben met de inhoud van het document. Je kunt dat doen door de waarde van de attributen MARGINHEIGHT en het MARGINWIDTH zo klein mogelijk te kiezen. Hoewel deze waarde volgens HTML 4.0 minimaal "1" moet zijn, accepteren de verschillende browsers ook "0". Het resultaat kun je zien in een nieuw venster.

In een inline frame kan net als bij gewone frames elk gewenst document geopend worden. Het kan dus een gewoon document zijn met bijvoorbeeld tekst, afbeeldingen en hyperlinks, maar ook een document met gewone frames of weer nieuwe inline frames. In de volgende afbeelding wordt dit gedemonstreerd. Het document in het inline frame bevat 3 frames en het document in het bovenste frame bevat weer een inline frame. Klik op de afbeelding en bekijk de weergave in een nieuw venster.

Uitlijnen inline frames

Voor het verticaal uitlijnen van tekst naast een inline frame kun je gebruik maken van het ALIGN attribuut. Met één van de waarden "top", "middle" of "bottom", wordt de eerste regel op de aangegeven hoogte naast het inline frame geplaatst en komen eventuele volgende regels onder het inline frame te staan.

<P><IFRAME SRC="ifram8a.htm" WIDTH="275" HEIGHT="105" FRAMEBORDER="0" ALIGN="middle">Hier wordt ... weergegeven.</IFRAME> Met het attribuut ... verder.</P>

Bekijk het voorbeeld in een nieuw venster.

Wanneer je het ALIGN attribuut gebruikt met de waarden "left" of "right" wordt het inline frame links of recht in het venster geplaatst en loopt de tekst over de volle hoogte naast het inline frame door. Om er voor te zorgen dat een volgende alinea pas na het inline frame geplaatst wordt, kun je gebruik maken van het CLEAR attribuut in het BR element.

<P><IFRAME SRC="ifram9a.htm" WIDTH="275" HEIGHT="105" FRAMEBORDER="0" ALIGN="right">Hier wordt ... weergegeven.</IFRAME> Met de waarde ... uitgelijnd.<BR CLEAR="all"></P>

Bekijk het voorbeeld in een nieuw venster.

Wanneer je wat afstand wilt houden tussen het inline frame en aangrenzende tekst of andere objecten, dan kun je gebruik malen van een style sheets en daarin één of meer van de stijleigenschappen voor de margin opnemen. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd.

<P><IFRAME SRC="ifram10a.htm" WIDTH="275" HEIGHT="100" ALIGN="left" FRAMEBORDER="0" STYLE="margin-right: 20px;">Hier wordt ... weergegeven.</IFRAME> Met behulp van ... vrijgehouden.<BR CLEAR="all">
</P>

Je ziet het resultaat in een nieuw venster.

Het ALIGN attribuut kent geen waarde "center". Wanneer je het inline frame horizontaal wilt centreren, kun je het daarom het beste binnen een DIV element met het attribuut ALIGN="center" plaatsen:

<DIV ALIGN="center"><IFRAME ...>   </IFRAME></DIV>

Document openen in inline frame

Op vergelijkbare wijze als bij gewone frames, kunnen documenten geopend worden in inline frames. Daarvoor is het nodig dat aan de inline frames een naam gegeven wordt door middel van het NAME attribuut. In de hyperlinks wordt een inline frame, waarin een document geopend moet worden, aangegeven met behulp van het TARGET attribuut van bijvoorbeeld het A of het AREA element. In het volgende voorbeeld worden enkele mogelijkheden gedemonstreerd.

De inline frames in dit voorbeeld zijn als volgt opgebouwd:

<P><IFRAME SRC="ifram11a.htm" WIDTH="265" HEIGHT="120" FRAMEBORDER="0" NAME="links">Hier wordt ... weergegeven.</IFRAME> &nbsp;&nbsp; <IFRAME SRC="ifram11b.htm" WIDTH="265" HEIGHT="120" FRAMEBORDER="0" NAME="rechts"></IFRAME></P>

De opbouw van een URI is bijvoorbeeld:

<A HREF="ifram11d.htm" TARGET="rechts">rechter</A>

Bekijk het voorbeeld in een nieuw venster.

  Inhoud Handleiding HTML   Trefwoordenregister   Inhoud Frames

Laatste wijziging 23 juli 2002
Copyright © 1995-2002 Hans de Jong