cursus 3: het gebruik van FRAMES

Les 3


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.
Eerst moeten we voor onszelf uitmaken hoe het resultaat eruit moet komen te zien. Ik denk dat een goede layout is een pagina met een titelframe bovenaan, een inhoudsframe links en het informatieframe 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, framz1.jpg, staat hiernaast. Kopieer de afbeelding naar de map die je net hebt aangemaakt.
Splits het venster nu horizontaal.

<html>
<head>
<title>Een oefenpagina</title>
</head>
<frameset rows="77,*">
</frameset>
</html>

Merk op dat we een framehoogte van 77 krijgen door 2 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="77,*">
  <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="77,*">
 <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="77,*">
  <frame src="banner.html">
   <frameset cols="20%,80%">
   <frame src="inhoud.html">
   <frame src="home.html" name="pagina">
  </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 centreer het.

 <html>
<head>
<title>Een oefenpagina - Banner</title>
</head>
<body BGcolor="#0000FF">
<center><img src="framz1.jpg"></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 Masterpagina, schakel de schuifbalken uit en maak de marges minimaal.

<html>
<head>
<title>Een oefenpagina</title>
</head>
 <frameset rows="77,*">
  <frame src="banner.html" scrolling="no" marginwidth="0" marginheight="0">
   <frameset cols="20%,80%">
    <frame src="inhoud.html">
    <frame src="home.html" name="pagina">
   </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 - Inhoud</title>
</head>
<body>
</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 - Inhoud</title>
</head>
<body>
 <h3>Inhoud</h3>

 Home<br>
<br>
 Ga hierheen<br>
 of daarheen<br><br>
<br>
 of bezoek<br>
 Yahoo<br>
 Netscape
</body>
</html>

Nu voegen we de referenties naar de links toe.

<html>
<head>
<title>Een oefenpagina - Inhoud</title>
</head>
<body>
 <h3>Inhoud</h3>

 <a href="home.html">Home</a><P>

 <a href="hier.html">Ga hierheen</a><br>
 <a href="daar.html">of daarheen</a><br>
<br>
 of bezoek<br>
 <a href="http://www.yahoo.com/">Yahoo</a><br>
 <a href="http://home.netscape.com/">Netscape</a><br>
</body>
</html>

De links werken natuurlijk nog niet omdat we de pagina's waar ze naar verwijzen nog niet bestaan!


Een complete framespagina - de rest -


Neem het volgende over en sla het op als home.html.

<html>
<head>
<title>Een oefenpagina - Home</title>
</head>
<body>
<h1 align=center>Je bent nu thuis.</h1>
Welkom op mijn homepage! Deze pagina zou er gelikt uit moeten zien en als het goed is eenvoudig in gebruik zijn omdat mijn leraar Sjeng mij de juiste manier geleerd heeft om een pagina met frames op te bouwen!<br>
<br>
<center>Een aangenaam verblijf toegewenst!</center>
</body>
</html>

Neem het volgende over en sla het op als hier.html.

<html>
<head>
<title>Een oefenpagina - Hier</title>
</head>
<body>
<h1 align=center>Hier</h1>
Ik wil even een voorstel doen. Iedereen kent die leuke pijltjes op kaarten waarbij staat: je staat nu hier! Zou het niet handig zijn als er ook bordjes waren waarop staat: je zou hier moeten zijn! Dat zou het leven een stuk aangenamer maken. Of niet soms?
</body>
</html>

Neem als laatste het volgende over en sla het op als daar.html.

<html>
<head>
<title>Een oefenpagina - Daar</title>
</head>
<>
<h1 align=center>Je bent nu daar</h1>
Welkom. Je bent nu daar. Daar gebeurt het allemaal. Daar vind je meer leuke dingen dan je kunt bevatten. Heb je wel eens iemand leuke dingen zien bevatten? Ik niet.
</body>
</html>

We zijn een klein detail vergeten. Als je dat al gemerkt hebt toen we de inhoudpagina maakten (inhoud.html)...goed zo! Open dus inhoud.html en voeg de o zo noodzakelijke target-opties toe.

<html>
<head>
<title>Een oefenpagina - Inhoud</title>
</head>
<body>
<h3>Inhoud</h3>

<a href="home.html" target="pagina">Home</a><br>
<br>
<a href="hier.html" target="pagina">Ga hierheen</a><br>
<a href="daar.html" target="pagina">of daarheen</a><br>
<br>
of bezoek<br>
<a href="http://www.yahoo.com/" target="_top">Yahoo</a><br>
<a href="http://home.netscape.com/" target="_top">Netscape</a>
</body>
</html>

Probeer het nu maar eens uit.

Niet slecht, hè?


En nu verder?


Na deze drie cursussen weet je voldoende om een mooie website te maken. Ik wil je nog wel even wijzen op het tag-overzicht. Dit is een overzicht van alle tags die je in deze cursussen bent tegengekomen.
Maar er valt nog veel meer te leren over het maken van websites. Als ik je een volgende stap mag aanraden, dan is dat om je eens te verdiepen in Cascading Style Sheets (CCS). CCS geeft je de mogelijkheid om de opmaak van een heleboel pagina's tegelijk aan te passen.
Daarna zou je eens kunnen kijken naar een scripttaal die wat 'intelligentie' aan je pagina's zou kunnen toevoegen. Je kunt daarbij bijvoorbeeld kiezen voor JavaScript of PHP.
Ook op HTML-gebied zijn er nieuwe ontwikkelinge: XHTML, XML, enzovoort.
Kortom: uitgeleerd ben je nooit!!!!!


einde les 4
naar het tag-overzicht

naar de LINKS