Handleiding HTML - Frames

HTML		Frames

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Gerelateerde elementen: FRAME | FRAMESET | IFRAME | NOFRAMES

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, Netscape Navigator vanaf versie 3.0, Mozilla, Firefox 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 en Opera 7.0 en hoger.

In het volgende voorbeeld is te zien hoe de browser de verschillende mogelijkheden voor 3-D en vlakke frameranden weergeeft. 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.html" SCROLLING="no"> <FRAME FRAMEBORDER="0" SRC="midden.html"> <FRAME FRAMEBORDER="0" SRC="boven-onder.html" SCROLLING="no"> </FRAMESET> </HTML>

Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

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, Netscape Navigator, Mozilla, Firefox 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 en 7) weliswaar 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 5 op dezelfde breedte uit, Netscape Navigator 6 en 7, Mozilla en Firefox wijken daar echter weer aanzienlijk vanaf. Opera 6 ondersteunt het FRAMEBORDER attribuut van het FRAME element niet en geeft frameranden alleen nog vlak weer. In Opera 7 is de ondersteuning weer hersteld.

`FRAMEBORDER="1"`	IE		NN		MOZ FF	OP
`FRAMEBORDER="1"`	4	5 5.5 6	3 4	6 7	1	5	6	7
`- (standaard)`	6	6	8	6	6	6	2v	2
`BORDER="0"`	4	4	2v	0	0	4	0	0
`FRAMESPACING="0"`	4	4	8	6	6	6	2v	0
`BORDER="0" FRAMESPACING="0"`	4	4	2v	0	0	4	0	0
`BORDER="10"`	10	14	12	10	10	14	10v	10
`FRAMESPACING="10"`	14	14	8	6	6	6	2v	10
`BORDER="10" FRAMESPACING="10"`	14	14	12	10	10	14	10v	10
`BORDER="x"`	x	x+4	x+2 x+3	x	x	x+4	xv	x
`FRAMESPACING="x"`	x+4	x+4	8	6	6	6	2v	x
`BORDER="x" FRAMESPACING="x"`	x+4	x+4	x+2 x+3	x	x	x+4	xv	x
Opmerkingen bij de tabel: de framerand is in 3-D tenzij anders vermeld (v = vlak) 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) Opera 6 ondersteunt het FRAMEBORDER attribuut niet en geeft frameranden standaard vlak weer, in Opera 7 is de ondersteuning hersteld De attributen BORDER en FRAMESPACING maken geen deel uit van HTML 4

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. Wanneer je gebruik maakt van het BORDER attribuut of de combinatie van de attributen BORDER en FRAMESPACING, dan is de weergave in alle gangbare browsers hetzelfde.

`FRAMEBORDER="0"`	IE		NN		MOZ FF	OP
`FRAMEBORDER="0"`	4	5 5.5 6	3 4	6 7	1	5 6	7
`- (standaard)`	2	2	6	6	6	2	2
`BORDER="0"`	0	0	0	0	0	0	0
`FRAMESPACING="0"`	0	0	6	6	6	2	0
`BORDER="0" FRAMESPACING="0"`	0	0	0	0	0	0	0
`BORDER="10"`	6	10	10	10	10	10	10
`FRAMESPACING="10"`	10	10	6	6	6	2	10
`BORDER="10" FRAMESPACING="10"`	10	10	10	10	10	10	10
`BORDER="x"`	x-4	x	x x+1	x	x	x	x
`FRAMESPACING="x"`	x	x	6	6	6	2	x
`BORDER="x" FRAMESPACING="x"`	x	x	x x+1	x	x	x	x
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) De attributen BORDER en FRAMESPACING maken geen deel uit van HTML 4

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.html" MARGINWIDTH="1" MARGINHEIGHT="1">

Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

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 hoger grijs en bij Netscape Navigator 6.0 en hoger, Mozilla en Firefox 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, Mozilla, Firefox en 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.html" SCROLLING="no"> <FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="midden.html"> <FRAME FRAMEBORDER="1" BORDERCOLOR="red" SRC="boven-onder.html" SCROLLING="no"> </FRAMESET> </HTML>

Bekijk in een nieuw venster hoe de browser het voorbeeld 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 in een nieuw venster hoe de browser het voorbeeld weergeeft.

In Microsoft Internet Explorer 3 en hoger, Netscape Navigator 6 en hoger, Mozilla, Firefox 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="frame-vb.html" NORESIZE>

Bekijk in een nieuw venster hoe de browser het voorbeeld weergeeft.

Vervolg: Inline frames

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