Informaticasite van het Sondervick College te Veldhoven                 © L.J.M van Haperen (bron : R.J. van der Beek)
 

Hoofdstuk 6: Frames

Frames delen een Internet-pagina op in verschillende stukken.
Als je frames wilt maken, moet je als eerste een bestand aanmaken die de verschillende frames/gedeelten benoemt en waarin staat waar elk frame komt en welke pagina er bij het starten in getoond moet worden.
Dit 'frame-bestand' bevat dus de informatie die de browser nodig heeft om frames te kunnen maken.

  6.1 Frameset

Voor het maken van het eerste bestand dat de frames benoemt, heb je de tags <FRAMESET> en </FRAMESET> nodig.
Let op: deze tags vervangen de <BODY>-tags.
Je kunt je Internet-pagina opdelen in rijen (rows) of in kolommen (cols).
Wil je de pagina opdelen in rijen, dan ziet de code er als volgt uit: <FRAMESET rows="....">

Verder is het element frame noodzakelijk.
Met dit element, dat geen eindtag heeft, geef je aan welke pagina bij het starten getoond moet worden.

Hieronder vind je het eerste bestand dat de frames benoemt.
Hier is gekozen voor drie frames: een rij (rows) en twee kolommen (cols).
Uiteindelijk moeten er dan vier documenten worden aangemaakt.
Te weten: een bestand dat de frames benoemt en drie bestanden die de inhoud van de drie vensters bevatten.

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET rows="20%,80%">
<FRAME src="boven.htm" name="boven"> <FRAMESET cols="20%,80%">
<FRAME src="kolom1.htm" name="links" >
<FRAME src="kolom2.htm" name="rechts"
</FRAMESET>
</FRAMESET> </HTML>

Sla dit op onder de naam frame.htm


Je ziet dat de pagina is opgesplitst in een rij en twee kolommen.
In dit geval is er tweemaal gekozen voor de verdeling 20 procent/80 procent, maar dat is niet noodzakelijk.
Wil je meer frames, dan voeg je voor ieder extra venster het element frame toe. Het bovenstaande document sla je op in een bestand dat we bijvoorbeeld frame.htm noemen.

  6.2 De pagina's

Als je frame.htm in Internet Explorer oproept, dan zie je wel de drie vensters waarin het hoofdvenster is verdeeld, maar verder zie je nog niets want daarvoor moeten we eerst nog de drie documenten "boven.htm" en "kolom1.htm" en "kolom2.htm" maken.

We gaan eerst aan de slag met boven.htm:

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<BODY>
<H1>Dit venster zit boven</H1>
</BODY<
</HTML>

Sla dit op onder de naam boven.htm

We gaan verder met: kolom1.htm:

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<BODY>
<H1>Dit zit links</H1>
</BODY>
</HTML>

Sla dit op onder de naam kolom1.htm

Nu gaan we aan de slag met het derde frame, kolom2.htm

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<BODY>
<H1>Dit is het rechter venster</H1>
</BODY<
</HTML>

Sla dit op onder de naam kolom2.htm

  6.3 Target

Stel je voor dat je ook nog een bestand hebt gemaakt dat vervolg.htm heet.

En dat document ziet er zo uit:

<HTML>
<HEAD>
<TITLE>Vervolg</TITLE>
</HEAD>
<BODY>
<H2>Dit is de vervolgpagina</H2>
</BODY<
</HTML>

Sla dit op onder de naam vervolg.htm
Nu wil je in de linkerkolom (het navigatievenster, bestand kolom1.htm) een link maken die verwijst naar vervolg.htm.
Na het klikken op die link, moet vervolg.htm verschijnen in de rechterkolom.
Als je alleen die link aanmaakt verschijnt na een klik daarop vervolg.htm niet automatisch in de rechter kolom.
Als je niets bijzonders doet verschijnt de nieuwe pagina altijd in hetzelfde venster als waarin de link staat.
Als je wilt dat het in een ander venster verschijnt moet je het attribuut target gebruiken, met daarachter de naam van het venster waarin het moet verschijnen.
In ons geval: target="rechts"
Eerst gaan we dus een link aanmaken in het bestand kolom1.htm :

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<BODY>
<H1>Dit zit links</H1>
Ga naar <a href="vervolg.htm" target="rechts"> <H3>De vervolg-pagina</H3></a>
</BODY<
</HTML>

Sla dit weer op onder de naam kolom1.htm

Bij a href vul je dus de naam van het bestand in dat je wilt oproepen.
Denk erom dat je bij het toevoegen van links het element target moet gebruiken.
Daar geef je de naam van het venster waarin vervolg.htm moet verschijnen.
In dit geval moet vervolg.htm worden getoond in de rechterkolom.
De target is dus in dit geval rechts.

En dit is het eindresultaat:



  6.4 Meer over het attribuut target

Met het attribuut target bij een hyperlink kun je bepalen in welk venster de URL geopend moet worden.
Met <base target="rechts"> in de kop (tussen <head> en <head>) leg je vast in welk venster de pagina moet worden geopend als het attribuut target niet in de link is opgenomen.
  • target="_top"
    De pagina wordt geopend in het hele venster van de browser en het venster van de vorige URL verdwijnt. De pagina komt dus over de andere heen, de vorige pagina is verdwenen.
  • target="_self"
    De pagina wordt altijd geladen in het venster waarin de link staat, ook al is via base target een ander venster opgegeven.
  • target="_parent"
    De pagina wordt in het vorige venster (de parent) geopend. Als er geen vorig venster is, werkt _parent hetzelfde als _self.
  • target="_blank"
    De pagina wordt geopend in een nieuw venster van de browser. De vorige pagina verdwijnt niet, die blijft ook geopend in een venster onder het nieuwe. Deze wordt het meeste gebruikt want je eigen website verdwijnt dan niet uit beeld.
  • target="nieuw"
    Als de naam van de target niet eerder voorkwam, dus als het een nieuwe naam is, dan wordt de pagina in een nieuw venster geopend en werkt het net zoals _blank.

  6.5 Attributen bij Frame en Frameset

Attributen van de frameset-tag

  • BORDER="n"
    de breedte van de vensterrand
  • BORDERCOLOR="kleur"
    de kleur van de vensterrand
  • FRAMEBORDER="no" of "yes"
    geen of wel Vensterranden
  • FRAMESPACING="n"
    de ruimte tussen de vensters

Attributen van de frame-tag

  • NAME="naam"
    de naam van het venster
  • SCROLLING="no" of "yes" of "auto"
    er moeten geen, of wel of alleen als het nodig is scrollbalken verschijnen
  • NORESIZE
    het venster kan niet van grootte worden veranderd
  • MARGINHEIGHT="n"
    de afstand tussen de vensterrand en de inhoud van het venster, boven en onder
  • MARGINWIDTH="n"
    de afstand tussen de vensterrand en de inhoud van het venster, links en rechts

Oefening:
  • Maak een pagina die zoals hierboven bestaat uit drie gedeelten.
    Probeer net zoals in deze les een link te maken die verwijst naar de andere kolom.
    Zorg er voor dat alle documenten in dezelfde map staan.

  6.6 Een inline frame (iframe)

Als je frames wilt gebruiken moet je normaal eerst een document maken waarin je vastlegt hoe het venster eruit moet zien, waar de verschillende frames getoond moeten worden, en hoe die genoemd worden.
Maar het kan ook anders.
Je kunt in een gewoon html-document aangeven waar een bepaald frame moet verschijnen, en tegelijk aangeven wat er in getoond moet worden.
Dat doe je met de container tag <iframe>.
Zo'n frame noemen we een inline frame of een floating frame.
De attributen van het <iframe> komen overeen met die van een gewoon frame, zoals src, height, width, name, scrolling, enz.
Klik maar eens:

Het <iframe> is met de volgende code gedefinieerd:

<iframe name="testframe" align="middle" frameborder="1" width="220" height="220" scrolling="no" src=""></iframe>

En op de volgende manier wordt er voor gezorgd dat je uit twee plaatjes kunt kiezen die in het frame verschijnen:

Klik maar eens:<ul type=square>
<li><a href="world.gif" target="testframe">wereldbol</a>
<li><a href="tedlove.gif" target="testframe">beertje</a>
</ul>

Als je op wereldbol of beertje klikt dan verschijnt het plaatje daarvan in het <iframe>.

In plaats van met plaatjes kan het natuurlijk ook met html-bestanden.