cursus 3: het gebruik van FRAMES

Les 2


Plaatjes in frames


We gaan eerst even terug naar onze simpele framepagina.

<frameset cols="50%,50%">
  <frame src="kim.html">
  <frame src="lisa.html">
</frameset>

We gaan een plaatje in een frame zetten. Het plaatje vind je hiernaast. Het heet 'world.gif'. Kopieer dit bestandje maar even naar de map waar je je framepagina's opslaat.

<frameset cols="50%,50%">
  <frame src="world.gif">
  <frame src="lisa.html">
</frameset>

We gaan eens proberen of we het plaatje netjes in een venstertje kunnen passen. Het plaatje is 146 pixels breed en 162 pixels hoog. Daar kom je achter als je met je rechter muisknop op het plaatje klikt en uit het snelmenu de optie 'Eigenschappen' kiest.
Om te beginnen verklein je het linker frame tot 146 pixels breed. Omdat we een absolute maat opgeven maken we het andere frame variabel.

<frameset cols="146,*">
  <frame src="world.gif">
  <frame src="lisa.html">
</frameset>
Vervolgens splitsen we het linker venster in horizontaal in twee delen. Het bovenste deel wordt 162 pixels hoog en het onderste deel neemt de rest voor z'n rekening. In het bovenste deel komt ons plaatje en het onderste deel geven we aan Kim.

<frameset cols="146,*">
  <frameset rows="162,*">
    <frame src="world.gif">
    <frame src="kim.html">
  </frameset>
  <frame src="lisa.html">
</frameset>

Zoals je ziet hebben we nu een klein probleempje: Er staan een paar schuifbalken in beeld en het plaatje past niet echt!


Schuifbalken en marges


De schuifbalken die je ziet kunnen we manipuleren door de optie scrolling= te laten volgen door yes, no of auto.
- yes betekent dat het venster schuifbalken krijgt ook al is de inhoud van het venster veel kleiner dan het venster.
- no betekent dat er geen schuifbalken worden getoond, ook niet als de inhoud tien keer groter is dan het venster. De browser toont zoveel als in het venster past.
- auto is de standaard waarde. Als de schuifbalken nodig zijn verschijnen ze, anders blijven ze netjes uit de weg.
In ons voorbeeld laten we de schuifbalken verdwijnen:

<frameset cols="146,*">
  <frameset rows="162,*">
    <frame src="world.gif" scrolling="no">
    <frame src="kim.html">
  </frameset>
  <frame src="lisa.html">
</frameset>

Ons probleem is nog steeds niet opgelost. Het plaatje past nog steeds niet in het frame zoals we dat graag zouden willen zien.
Met de opties marginwidth en marginheight kun je de breedte van de marges regelen. Met marginwidth regel je de breedte van de linker- en de rechtermarge, met marginheight de boven- en ondermarge.
De browser geeft automatisch een beetje witruimte rond de inhoud van het venster. Normaal gesproken is dit nodig om esthetische redenen maar het kan ook wel eens slecht uitkomen.
We gaan nu alle marges op 0 zetten.

<frameset cols="146,*">
  <frameset rows="162,*">
    <frame src="world.gif" scrolling="no"
     marginwidth="0" marginheight="0">
    <frame src="kim.html">
  </frameset>
  <frame src="lisa.html">
</frameset>

We komen in de buurt maar we zijn nog niet waar we zijn willen. Hoe zit het nu precies met die marges. Wel, er is een vaste (dus niet te veranderen) marge aan elke zijde van 1 pixel breed. Daarbij komt aan elke kant de variabele marge. Als we de variabele marges aan elke kant op 0 zetten, dan is de werkelijke marge aan elke kant dus 1 + 0 = 1.
Hoe groot moet het frame dan zijn? De tekening is 146 bij 162 pixels. Daar komt aan elke kant 1 pixel bij, dus het frame moet 148 bij 164 pixels worden. Laten we het eens proberen.

<frameset cols="148,*">
  <frameset rows="164,*">
    <frame src="world.gif" scrolling="no"
     marginwidth="0" marginheight="0">
    <frame src="kim.html">
  </frameset>
  <frame src="lisa.html">
</frameset>

Nu wordt het plaatje goed in het frame geplaatst.


Frameranden


We zullen nu wat minder belangrijke effecten gaan bespreken. Ze zullen niet allemaal in elke browser werken. Als een bepaalde browser een effect niet begrijpt wordt deze gewoon genegeerd.
Om te beginnen kunnen we de dikte van de kaders regelen.

<frameset cols="148,*" border="20">
  <frameset rows="164,*">
    <frame src="world.gif" scrolling="no"
     marginwidth="0" marginheight="0">
    <frame src="kim.html">
  </frameset>
  <frame src="lisa.html">
</frameset>

We kunnen de kleuren van de kaders aanpassen.

<frameset cols="148,*" border="20" bordercolor="#FFOOOO">
  <frameset rows="164,*">
    <frame src="world.gif"scrolling="no"
     marginwidth="0" marginheight="0">
    <frame src="kim.html">
  </frameset>
  <frame src="lisa.html">
</frameset>

We kunnen voor elke afzonderlijke <frameset> de kaders uitschakelen met de optie frameborder.

<frameset cols="148,*" border="20" bordercolor="#FFOOOO">
  <frameset rows="164,*" frameborder="no" >
    <frame src="world.gif" scrolling="no"
     marginwidth="0" marginheight="0">
    <frame src="kim.html">
  </frameset>
  <frame src="lisa.html">
</frameset>

Vaste afmetingen


We kunnen de lezer ervan weerhouden dat hij/zij de afmetingen van de frames aanpast. Tenzij je hier een goede reden voor hebt zul je deze optie nooit gebruiken.

<frameset cols="148,*" border="20" bordercolor="#FFOOOO">
  <frameset rows="164,*" frameborder="no" >
    <frame src="world.gif" scrolling="no"
     marginwidth="0" marginheight="0">
    <frame src="kim.html"noresize>
  </frameset>
  <frame src="lisa.html" noresize>
</frameset>

Links tussen frames


Ok. Nu we iets geleerd hebben over frames gaan we terug naar ons simpele voorbeeldje en gaan we een paar links leggen tussen frames. Pas daarvoor je masterpagina als volgt aan:

<frameset cols="33%,67%">
  <frame src="lisa.html">
  <frame src="kim.html">
</frameset>

Wat we gaan doen is een link maken van lisa.html naar laura.html. Open dus lisa.html met Kladblok en voeg het volgende toe...

<html>
<head>
<title>Mijn Frames Pagina</title>
</head>
<body>
Lisa<br>
<br>
Breng een bezoekje aan mijn vriendin Laura

</body>
</html>

Voeg nu de link toe en sla het document op.

<html>
<head>
<title>Mijn Frames Pagina</title>
</head>
<body>
Lisa<br>
<br>
Breng een bezoekje aan mijn vriendin <a href="laura.html"> Laura</a>
</body>
</html>

Probeer maar uit.


Een pagina openen in een ander frame


Als je op de link klikt zul je zien dat Laura's pagina in het venster van Lisa wordt geladen. Ik weet het... je zult niet erg onder de indruk zijn. Wat je wilt doen is op een link in het venster van Lisa klikken, die dan in het venster van Kim geladen wordt. Dat kan, al is het wel iets meer werk.
Je moet eerst met de name-optie het <frame> in je master een naam geven. Dat gaan we nu eerst even doen.

<frameset cols="33%,67%">
  <frame src="lisa.html">
  <frame src="kim.html" name="JAPIE">
</frameset>

Laat ik hier even wat bij opmerken. Dat tweede frame is niet echt van Kim. Het is gewoon het tweede frame en kim.html is het eerste dat er in geladen moet worden.
Als we een lege <frame>-tag hadden dan zou het frame...nou ja... leeg zijn.
De naam van een frame moet beginnen met een alpha-numeriek teken (dat wil zeggen een letter). Alle andere framenamen worden genegeerd. Een paar uitzonderingen zijn enkele voorgedefinieerde namen die beginnen met een "underscore" _ . Hier komen we straks op terug.
Nu moeten we nog een kleinigheidje veranderen in de link in lisa.html. Open dus dit bestand nogmaals en voeg een target-optie toe.

<html>
<head>
<title>Mijn Frames Pagina</title>
</head>
<body>
Lisa<br>
<br>
Breng een bezoekje aan mijn vriendin <a href="laura.html" target="JAPIE">Laura</a>
</body>
</html>

Deze optie zorgt ervoor dat de link wordt geopend in het venster met de naam JAPIE.

Deze manier van linken werkt perfect als je de pagina's van je eigen site bij elkaar wilt linken. Maar wat doe je als je een link wilt leggen naar een pagina van buiten je eigen site? Laten we nog een link aanbrengen in de pagina van Lisa.

<html>
<head>
<title>Mijn Frames Pagina</title>
</head>
<body>
Alice<br>
<br>
Breng een bezoekje aan mijn vriendin <a href="laura.html" target="JAPIE">Laura</a><br>
<br>
En natuurlijk moet je ook even naar <a href="http://www.huygenwaard.nl" target="JAPIE">Huygenwaard</a>

</body>
</html>

Links in een frame of in een nieuw venster


Zoals je ziet wordt, als je op Huygenwaard klikt, de website van Huygenwaard in het venster geladen.
Hoe kun je nu een link op een volledig scherm laten verschijnen? Simpel, verander de optie target="JAPIE" in target="_top".

<html>
<head>
<title>Mijn Frames Pagina</title>
</head>
<body>
Alice<br>
<br>
Breng een bezoekje aan mijn vriendin <a href="laura.html" target="JAPIE">Laura</a><br>
<br>
En natuurlijk moet je ook even naar <a href="http://www.huygenwaard.nl" target="_top">Huygenwaard</a>
</body>
</html>

_top is een van de vier zogenaamde 'magic targets'. De andere magic targets zijn _self, _blank en _parent. Dit zijn de enige targets die met iets anders dan een alpha-numeriek teken kunnen beginnen. Elke target die met een 'underscore' _ begint en die niet één van de vier 'magic targets' is, wordt genegeerd. Voor wat wij hier doen is eigenlijk alleen _top van belang.
Voor alle zekerheid zet ik de verschillen tussen de vier magic targets toch maar even op een rij:
- target="_top" opent de pagina in het hele browservenster.
- target="_blank" opent een nieuw (tweede of derde of ...) browservenster en toont de pagina daarin.
- target="_self" opent de pagina in het frame waarin de link staat. Dit heeft dus eigenlijk hetzelfde effect als helemaal niets opgeven.
- target="_parent" opent de pagina in een frame van de vorige frameset die geopend was.

Als je een naam opgeeft die niet bestaat, wordt een nieuw venster van de browser geopend en wordt de link daarin geopend.


einde les 2

naar les 3