Het gebruik van frames
Les 4
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="150,*" BORDER=20>
We kunnen de kleuren van de kaders aanpassen.
<FRAMESET ROWS="166,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="kim.html">
</FRAMESET>
<FRAME SRC="lisa.html">
</FRAMESET><FRAMESET COLS="150,*" BORDER=20 BORDERCOLOR="#FFOOOO">
We kunnen voor elke afzonderlijke <FRAMESET> de kaders uitschakelen met de optie FRAMEBORDER.
<FRAMESET ROWS="166,*">
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="kim.html">
</FRAMESET>
<FRAME SRC="lisa.html">
</FRAMESET><FRAMESET COLS="150,*" BORDER=20 BORDERCOLOR="#FFOOOO">
<FRAMESET ROWS="166,*" FRAMEBORDER=NO >
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="kim.html">
</FRAMESET>
<FRAME SRC="lisa.html">
</FRAMESET>
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="150,*" BORDER=20 BORDERCOLOR="#FFOOOO">
<FRAMESET ROWS="166,*" FRAMEBORDER=NO >
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME SRC="kim.html"NORESIZE>
</FRAMESET>
<FRAME SRC="lisa.html" NORESIZE>
</FRAMESET>
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%">
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...
<FRAME SRC="lisa.html">
<FRAME SRC="kim.html">
</FRAMESET><HTML>
<HEAD>
<TITLE>Mijn Frames Pagina</TITLE>
</HEAD>
<BODY>
Alice<P>
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>
Alice<P>
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>
Alice<P>
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<P>
Breng een bezoekje aan mijn vriendin <A HREF="laura.html" TARGET="JAPIE">Laura</A><P>
En natuurlijk moet je ook even naar <A HREF="http://www.stwillibrord.nl" TARGET="JAPIE" >St. Willibrordcollege</A><P>
</BODY>
</HTML>
Links in een frame of in een nieuw venster
Zoals je ziet wordt, als je op St. Willibrordcollege klikt, de website van het St. Willibrordcollege in het venster geladen.
Hoe kun je nu een link op een volledig scherm laten verschijnen? Simpel, verander de TARGET in _top.<HTML>
<HEAD>
<TITLE>Mijn Frames Pagina</TITLE>
</HEAD>
<BODY>
Alice<P>
Breng een bezoekje aan mijn vriendin <A HREF="laura.html" TARGET="JAPIE">Laura</A><P>
En natuurlijk moet je ook even naar <A HREF="http://www.stwillibrord.nl" TARGET="_top">St. Willibrordcollege;/A><P>
</BODY>
</HTML>Gebruik altijd deze methode om een link naar een pagina buiten je eigen site de specificeren. Je lezers zullen je dankbaar zijn!
_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.
Opmerking:Nu we het er toch over hebben, dat is wat TARGET="_blank" doet.... de link openen in een nieuw browser venster. TARGET="_self" opent de link in het frame waarin de link staat. Dit heeft dus eigenlijk hetzelfde effect als helemaal niets opgeven. TARGET="_parent" tenslotte opent de link met frames van de vorige <FRAMESET>.
Het is belangrijk dat je TARGET="_top" specificeerd en niet TARGET="_TOP". Normaal gesproken is HTML niet hoofdlettergevoelig maar dit is een uitzondering. Het gebruik van _TOP in plaats van _top opent vaak een nieuwe browser in plaats van het volledige scherm in de actieve browser.
Als je een naam opgeeft die niet bestaat, wordt een nieuw venster van de browser geopend en wordt de link daarin geopend.