We hebben nu zo'n beetje alle veel gebruikte mogelijkheden van de frames besproken.
We gaan nu bij wijze van oefening een complete framespagina van het begin af aan opbouwen.
Niets bijzonders, gewoon zoiets als dit.Voor we beginnen wil ik nog even opmerken dat we het vooral simpel moeten houden! Een site met een hele zooi frames die overal naar toe verwijzen is niet alleen lastig om op te bouwen maar nog veel lastiger om te lezen. Nu dit gezegd is gaan we verder!
Eerst moeten we voor onszelf uitmaken hoe het resultaat eruit moet komen te zien. Ik denk dat we een goede, eenvoudige layout als we een titelframe bovenaan, een index links en het informatievenster rechts zetten.
Laten we eerst de master maken.<HTML>
<HEAD>
<TITLE>Een oefenpagina</TITLE>
</HEAD><FRAMESET>
</FRAMESET></HTML>
Maak een nieuwe map aan en sla dit document op als index.html. De afbeelding die we gaan gebruiken is in het titelvenster is de "Mijn Frames Pagina" afbeelding. Deze staat in de framz-map onder de naam framz1.jpg. Kopieer het bestand naar de map die je net hebt aangemaakt. (On-line lezers slaan het op vanuit het voorbeeld dat op je scherm verschijnt als je op de link in de eerste alinea klikt).
Splits het venster nu horizontaal.
<HTML>
<HEAD>
<TITLE>Een oefenpagina</TITLE>
</HEAD><FRAMESET ROWS="83,*">
</FRAMESET></HTML>
Merk op dat we een framehoogte van 83 krijgen door 8 op te tellen bij de afbeeldingshoogte van 75. Tevens zie je dat we, omdat we een absolute maat gebruiken voor het frame, de rest variabel maken.
Nu geven we op dat banner.html in het bovenste frame komt (we gaan dat document over een paar minuten maken). Verder plaatsen we nog een setje <FRAMESET> tags omdat we het onderste gedeelte verder gaan splitsen.
<HTML>
<HEAD>
<TITLE>Een oefenpagina</TITLE>
</HEAD><FRAMESET ROWS="83,*">
<FRAME SRC="banner.html">
<FRAMESET>
</FRAMESET>
</FRAMESET></HTML>
Je kunt het nu bekijken maar aangezien het document nog niet compleet is zul je een paar foutmeldingen krijgen.
We gaan het onderste venster in twee delen splitsen. We geven ook op dat het linker venster het bestand directry.html zal bevatten en het rechter venster het bestand home.html. Nogmaals, we hebben deze documenten nog niet gemaakt, dus je zult nog een foutmelding of drie krijgen.
<HTML>
<HEAD>
<TITLE>Een oefenpagina</TITLE>
</HEAD><FRAMESET ROWS="83,*">
<FRAME SRC="banner.html">
<FRAMESET COLS="20%,80%">
<FRAME SRC="directry.html">
<FRAME SRC="home.html">
</FRAMESET>
</FRAMESET></HTML>
Aangezien we de index links hebben staan en de pagina's rechts geladen moeten worden, geven we het rechter frame een naam. Het is het enige frame waar documenten in geladen worden dus we hoeven alleen dit frame een naam te geven.
<HTML>
<HEAD>
<TITLE>Een oefenpagina</TITLE>
</HEAD><FRAMESET ROWS="83,*">
<FRAME SRC="banner.html">
<FRAMESET COLS="20%,80%">
<FRAME SRC="directry.html">
<FRAME SRC="home.html" NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET></HTML>
OK. We zijn nu voorlopig klaar met dit document.
We gaan nu banner.html maken. Begin met het volgende en sla het op.
<HTML>
<HEAD>
<TITLE>Oefen pagina - Titel</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
</BODY>
</HTML>Je ziet dat we een blauwe achtergrond hebben gedefinieerd.
Zet het plaatje er in en <CENTER> het.
<HTML>
<HEAD>
<TITLE>Een oefenpagina - Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
<CENTER><IMG SRC="framz1.jpg" WIDTH=500 HEIGHT=75></CENTER>
</BODY>
</HTML>
Ik heb eens zitten nadenken, jawel, als je naar de bron van mijn documenten kijkt om jezelf te helpen jouw documenten op te bouwen, zul je misschien een paar dingen tegenkomen die fout lijken of tegenspreken wat ik in de lessen schrijf. Dat heb ik gedaan omdat mijn pagina's een paar stappen moeten doorlopen zodat de voorbeelden goed op het scherm komen tijdens de lessen. Duidelijk? Zo niet, kijk dan gewoon niet naar de bron van mijn pagina's, tenzij je jezelf in verwarring wilt brengen.
Welnu... zoals je ziet lopen we hier tegen hetzelfde probleem aan als een paar lessen geleden. Aangezien het probleem hetzelfde is, is de oplossing ook hetzelfde. Open dus je Master pagina, schakel de schuifbalken uit en maak de marges minimaal.
<HTML>
<HEAD>
<TITLE>Een oefenpagina</TITLE>
</HEAD><FRAMESET ROWS="83,*">
<FRAME SRC="banner.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAMESET COLS="20%,80%">
<FRAME SRC="directry.html">
<FRAME SRC="home.html" NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET></HTML>
Nu gaan we onze indexpagina maken. Begin met het volgende en sla het op als directry.html.
Let op! Gebruik niet als bestandsnaam index.html want die bestaat al en je zult de eerste overschrijven.<HTML>
<HEAD>
<TITLE>Een oefenpagina - Index</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
Plaats een titel met de <H3> tag en zet de linkteksten er in. De links zelf komen er over een paar minuten in.
<HTML>
<HEAD>
<TITLE>Een oefenpagina - Index</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF"><H3>Index</H3>
Home<P>
Ga hierheen<BR>
of daarheen<P>of bezoek<BR>
Yahoo<BR>
Netscape</BODY>
</HTML>
Nu voegen we de referenties naar de links toe.
<HTML>
<HEAD>
<TITLE>Een oefenpagina - Index</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF"><H3>Index</H3>
<A HREF="home.html">Home</A><P>
<A HREF="hier.html">Ga hierheen</A><BR>
<A HREF="daar.html">of daarheen</A><P>of bezoek<BR>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://home.netscape.com/">Netscape</A></BODY>
</HTML>
Was dat leuk of niet. Welnu, voor we verder gaan: strek je benen, zet koffie, pak een pilsje, laat de hond uit of wat dan ook. Neem in elk geval even pauze. Doe ik ook. We spreken elkaar weer bij les 6.
Introductie Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Les 7 Index