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.
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.
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.
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.
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.
OK. We zijn nu voorlopig klaar met dit document.
We gaan nu de bannerpagina maken. Neem het volgende over en sla het bestand op als banner.html.
Je ziet dat we een blauwe achtergrond hebben gedefinieerd.
Zet het plaatje er in en centreer het.
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.
Nu gaan we onze inhoudpagina maken. Typ het volgende over (of kopieer het) en sla het bestand op als inhoud.html.
Plaats een titel met de <h3>-tag en zet de linkteksten er in.
De links zelf komen er over een paar minuten in.
Nu voegen we de referenties naar de links toe.
<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!
Neem het volgende over en sla het op als home.html.
Neem het volgende over en sla het op als hier.html.
Neem als laatste het volgende over en sla het op als daar.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.
Probeer het nu maar eens uit.
Niet slecht, hè?
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!!!!!