HTML>Frames

» Voordat we met frames gaan beginnen, moet ik erbij zeggen dat frames gebruiken nadelen heeft. Alleen als je perse een site wilt hebben met een apart navigatie menu, moet je frames gebruiken. Dit is omdat niemand goed je pagina kan bookmarken (favorieten opslaan). Ook gaat het opnemen in zoekmachines moeilijk. Ik heb er zelf een manier op gevonden om dit probleem uit de weg te gaan, maar daarover meer. Laten we maar meteen beginnen.
TMMK

ps. Kijk, voordat u de les doet, onderaan de pagina!

Eerste frames pagina's

Frames worden veelal gebruikt om een menu, en een inhoudspagina (de inhoud van de link) te weergeven. We moeten daarvoor eerst een paar nieuwe tags gaan leren. De eerste is <frameset>. In deze tag zetten we hoe het scherm verdeelt moet worden. Ook een nieuwe tag is <frame>. In deze tag zetten we alle eigenschappen die het frame moet bevatten. Andere frames krijgen dus niet de eigenschappen die je hier definiëert. We beginnen eerst met een simpele frames pagina.

<html>
 <head>
 </head>
 <frameset cols="20%,80%">
  <frame src="linkerframepagina.html">
  <frame src="rechterframepagina.html">
 </frameset>
</html>
Nu krijgen we een frames pagina met links een frame die een breedte heeft van 20% van de totale beeldschermbreedte. Rechts krijgen we nu een pagina met een breedte van 80%. Bij de frame tag, word er met het scr="url.html" attribuut bepaald welke pagina in het frame moet komen.

<noframes>

Nu is er een groot probleem met frames. Niet elke browser ondersteund frames. Dit probleem word steeds kleiner, doordat mensen gaan updaten naar versies die wel frames ondersteunen, maar het probleem is er nog wel even. Daarom is er een tag die het de pagina omschrijft als er geen frames zijn. Deze tag heet de <noscript> tag. Deze dient op de volgende manier te worden geplaatst:
<html>
 <head>
 </head>
 <frameset cols="20%,80%">
  <frame src="linkerframepagina.html">
  <frame src="rechterframepagina.html">
 <noframes>
  <body>
  Body inhoud.
  </body>
 </noframes>
 </frameset>
</html>

Tussen de aangegeven body tags, kan gewoon de pagina inhoud worden geplaatst. Om te zorgen dat bezoekers die geen frames ondersteunen je site toch kunnen zien, kun je hier download-links plaatsen naar pagina's waar browsers te download zijn.

<a target="">

Frames zijn voornamelijk uitgevonden voor menu's. Wij gaan dus nu 4 pagina's maken. Een menu, en 2 pagina's die in het rechterframe komen. En natuurlijk de frameset. Eerst de code voor de frameset:
<html>
 <head>
 </head>
 <frameset cols="20%,*">
  <frame src="menu.html">
  <frame src="rechts1.html" name="main">
 </frameset>
</html>
Dit kopiëer je even, en sla je op als index.html. Nu gaan we naar menu.html:
<html>
 <head>
 </head>
 <body>
<a href="rechts1.html" target="main">rechts1</a><br>
<a href="rechts2.html" target="main">rechts2</a>
 </body>
</html>
Deze code slaan we op als menu.html, en plaatsen het in dezelfde map als waar je index.html heb geplaatst. Ne maken we rechts1.html:
<html>
 <head>
 </head>
 <body>
 Je bent nu op rechts1.html!!!
 </body>
</html>
Nu gaan we rechts2.html maken:
<html>
 <head>
 </head>
 <body>
 Je bent nu op rechts2.html!!!
 </body>
</html>
Nu slaan we dit bestand op bij de rest, als rechts2.html. Nu open je index.html, en je zal dit krijgen: Klik hier (nieuw scherm)

Attributen

Nu wil je misschien dingen gaan aanpassen in je frames. Er zijn ook nog veel meer attributen. Die komen nu. De omschrijving + mogelijkheden staan er ook bij aangegeven:

<frameset>
border="waarde" De waarde geeft de dikte van alle frame borders aan in pixels. Aangezien niet elke browser dit attribuut ondersteund, kun je het beste achter het border attribuut, het frameborder attribuut gebruiken. Hierdoor laten bijna alle browsers de border redelijk goed zien.
bordercolor="kleur" Met het bordercolor attribuut, kun je de kleur van alle frame borders instellen. Je kunt de kleur in woorden neerzetten, maar ook in #codes.
cols="waarde(n)" Met dit attribuut kun je de breedte en het aantal cols (verticale rijen) definiëeren. Als je 2 frames naast elkaar wilt, vul je 2 waardes in gescheiden door komma's. Voorbeeld (voor een pagina met een frame links van 200 pixels en een frame rechts van 600): cols="200, 600"
Aangezien niet iedereen een beeldschermresolutie heeft van 800x600, kun je ook de breedte definiëeren met procenten. Dan wordt het bovenstaande voorbeeld dus: cols="25%, 75%"
Aangezien de 75% niet anders kan zijn dan 75%, kun je ipv 75%, ook een asterisk (*) neerzetten. Dan wordt het voorbeeld dus: cols="25%,*"
rows="waarde(n) Dit attribuut werkt ongeveer hetzelfde als het cols attribuut, alleen gaat het met dit attribuut om de horizontale frames. Dus als je 2 frames bovenelkaar wilt hebben, (boven een menu bijvoorbeeld) kun je het rows attribuut gebruiken. Voorbeeld: rows="30,*"
Ook bij dit attribuut kun je procenten, en asterisken gebruiken.
framespacing="waarde" Met het framespacing attribuut, kun je het aantal pixels definiëeren tussen de frames. Zorg wel dat je de borders (frameborder en border) attributen hebt, zodat het optimaal kan werken.


<frame>
bordercolor="kleur" Met dit attribuut definiëer je de kleur van de border van het frame. Deze kleur kan in woorden, maar ook in #codes worden gedefiniëerd.
frameborder="waarde" Met dit attribuut kun je de dikte van de border van het frame definiëeren.
border="waarde" Zie "frameborder"
src="url.html" Met dit attribuut definiëer je welke pagina in het frame komt. Je kunt een complete url opgeven, maar ook alleen het path ernaartoe.
noresize Door dit attribuut toe te voegen, kan het frame niet van grootte veranderd worden. Dit attribuut heeft geen inhoud. Een voorbeeld: <frame src="menu.html" noresize>
name="naam" Met dit attribuut definiëer je de naam van het frame. Net als in het voorbeeld, kun je dan bijvoorbeeld een menu maken. Je link moet dan het target attribuut bevatten, en de inhoud van het target attribuut, moet dan de naam hebben van het frame waarin de pagina geopend moet worden.
scrolling="waarde" Als je niet wilt dat er schuifbalken in een van de frames komen, kun je dat weghalen door het scrolling attribuut toe te voegen, met een waarde van "no". Andere mogelijke waarden zijn "yes", voor altijd, zelfs als er niks te schuiven is, en "auto" zodat de browser zelf kijkt of het nodig is. Handig is dit, zodat je altijd goede weergave hebt, in verschillende resoluties.
marginwidth="waarde" Met dit attribuut kun je definiëeren, hoe groot de afstand moet zijn tussen de inhoud van de pagina, en de rand van het frame. De waarde kan in pixels zijn, maar ook in procenten.
marginheight="waarde" Met het marginheight attribuut, definiëer je hoe groot de afstand tussen de inhoud van de pagina, en de rand van het frame moet zijn. Dit kan in pixels en in procenten.

Cols en Rows combineren

Nu kun je wel cols en rows maken, maar je kunt het nog niet allebei tegelijk doen. Dat gaan we nu leren. Je moet het heel simpel zien. Even een voorbeeld:
<html>
 <head>
 </head>
 <frameset rows="20%,*">
  <frame src="paginaboven.html>
 
 <frameset cols="30%,*">
  <frame src="paginalinksonder.html">
  <frame src="paginarechtsonder.html">
 </frameset>
 
 </frameset>
</html>
Nu krijgen we een pagina met boven een row, en dan daaronder nog een row. In die row staan 2 cols. Als je goed de ze code heb bestudeert, kun je door naar een andere variatie, 2 cols boven en 2 onder:
<html>
 <head>
 </head>
 <frameset rows="20%,*">
  <frame src="paginalinksboven.html>
  <frame src="paginarechtsboven> 
 <frameset cols="30%,*">
  <frame src="paginalinksonder.html">
  <frame src="paginarechtsonder.html">
 </frameset>
 
 </frameset>
</html>
Nu kun je dus vrijuit gaan experimenteren. Als je er toch echt neit uitkomet, kun je je vraag stellen op het forum.

Inline Frames

Inline frames zijn frames die je gewoon op elke plaats in do <body> sectie van je HTML-code kunt plaatsen. Je kunt in dat soort Iframes bijvoorbeeld externe server-side scripts zetten. Ook kun je met behulp van Iframes een nieuws pagina maken. Zo hoef je niet je hele pagina te verversen, uploaden, etc. Alleen die ene pagina vernieuwen is al genoeg. Je moet hierbij wel onthouden dat iframes worden ondersteund vanaf MSIE 3.0 en vanaf Netscape 6.0! Een voorbeeld van een Iframe. Daarna volgen alle mogelijke attributen:
<iframe src="urlvandepagina.html" width="200" height="200"></iframe>
Nu krijg je een zwevende frame op je pagina. Alle mogelijke attributen zijn:

<iframe>
src="url.html" Met het src attribuut kun je aangeven welk bestand de browser in het iframe moet weergeven. Dit kunnen zeer veel extensies zijn! Het mogen dus ook *.asp, *.php, *.php3, *.phtml, *.pl, *.cgi en nog veel meer pagina-extensies zijn!
align="plaats" Met dit attribuut kun je het iframe uitlijnen. Mogelijke waarden zijn left, right en center.
frameborder="waarde" Met dit attribuut kun je de dikte van de border bepalen in pixels. Omdat niet elke browser deze functie onsteund, is het slim om én border="waarde én frameborder="waarde" op te nemen in je tag.
border="waarde" Met dit attribuut kun je de dikte van de border bepalen in pixels. Omdat niet elke browser deze functie onsteund, is het slim om én border="waarde én frameborder="waarde" op te nemen in je tag.
height="waarde" Met dit attribuut kun je de hoogte van je iframe bepalen. Je kunt dit doen in pixels, maar ook in procenten.
width="waarde" Met dit attribuut bepaal je de breedte van je iframe. Kan in pixels en procenten.
hspace="waarde" Met dit attribuut kun je bepalen hoe groot de horizontale afstand is tussen het iframe en de rest van de pagina.
vspace="waarde" Met dit attribuut bepaal je de verticale afstand tussen het iframe en de rest van de pagina.
scrolling="waarde" met het scrolling attribuut bepaal je of in de iframe gescrolld kan worden. Mogelijke waarden zijn yes, voor scrollen. No, zodat je niet kunt scrollen. En auto, zodat als de inhoud van het frame te groot is voor het iframe, dat er dan wel gescrolld kan worden, maar als dat neit het geval is, je niet kan scrollen.
name="naam" Met dit attribuut kun je de naam vastleggen van het frame. Zo kun je ook het frame verversen, door een link te maken, met een target="naam_van_het_iframe".
marginheight="waarde" Met dit attribuut kun je de afstand in pixels bepalen, tussen de inhoud van het iframe en de bovenkant en onderkant van het iframe.
marginwidth="waarde" Met dit attribuut kun je de afstand in pixels definiëeren, tussen de inhoud van het iframe , en de linkerkant en rechterkant.

Nu kun je al bijna alle mogelijkheden uitvoeren met frames. Waarom niet alle, zul je je misschien afvragen. Er zijn nog meer functies, maar die zijn alleen mogelijk met JavaScript. Aangezien dit een HTML cursus is, lijkt het mij beter daarover niet verder op in te gaan. Dit was het einde van de frames les!

Veel Leerplezier!



_ 
|(\/)(\/)|<

Vorige les//--Terug naar 't webhulpje--\\Volgende les


Voor vragen kan je terecht in het forum!!

Copyright © 't webhulpje, Nederland
Alle rechten voorbehouden. Niets van deze elektronische uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand, of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen, of op enige andere manier, zonder voorafgaande schriftelijke toestemming van de uitgever en/of de beheerder van deze website.