Het gebruik van frames
Les 5
Een complete framespagina - de masterpagina -
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 heleboel frames die overal naar toe verwijzen is niet alleen moeilijk 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 een goede, eenvoudige layout is een pagina met een titelframe bovenaan, een index links en het informatievenster rechts.
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 afbeelding vind je in de frames-map van deze cursus onder de naam framz1.jpg. Kopieer het bestand naar de map die je net hebt aangemaakt. Je kunt natuurlijk ook nog een keer de voorbeeldpagina openen, de afbeelding rechtsklikken en hem opslaan.Splits het venster nu horizontaal.
<HTML>
<HEAD>
<TITLE>Een oefenpagina</TITLE>
</HEAD><FRAMESET ROWS="79,*">
</FRAMESET></HTML>
Merk op dat we een framehoogte van 79 krijgen door 4 op te tellen bij de afbeeldingshoogte van 75. Tevens zie je dat we dat we een absolute maat gebruiken voor het frame en 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="79,*">
<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 inhoud.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="inhoud.html">
<FRAME SRC="home.html">
</FRAMESET>
</FRAMESET></HTML>
Aangezien we de inhoud 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="inhoud.html">
<FRAME SRC="home.html" NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET></HTML>
OK. We zijn nu voorlopig klaar met dit document.
Een complete framespagina - de bannerpagina -
We gaan nu de bannerpagina maken. Neem het volgende over en sla het bestand op als banner.html.<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>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="inhoud.html">
<FRAME SRC="home.html" NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET></HTML>
Een complete framespagina - de inhoudpagina -
Nu gaan we onze inhoudpagina maken. Typ het volgende over (of kopieer het) en sla het bestand op als inhoud.html.
<HTML>
<HEAD>
<TITLE>Een oefenpagina - Index</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>Plaats een titel met de <H3> tag (voor de uitleg over deze tags, zie: 'Aanvullende tags) 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, loop een rondje, maak een praatje of wat dan ook. Neem in elk geval even pauze. Doe ik ook. We spreken elkaar weer bij les 6.