We gaan eerst even terug naar onze simpele framepagina.
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.
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.
Zoals je ziet hebben we nu een klein probleempje: Er staan een paar schuifbalken in beeld en het plaatje past niet echt!
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:
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.
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.
Nu wordt het plaatje goed in het frame geplaatst.
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.
We kunnen de kleuren van de kaders aanpassen.
We kunnen voor elke afzonderlijke <frameset> de kaders uitschakelen met de optie frameborder.
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.
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:
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...
Voeg nu de link toe en sla het document op.
Probeer maar uit.
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.
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.
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.
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".
_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.