|
In dit hoofdstuk leggen we je uit hoe je een frameset kan maken waarbinnen de verschillende pagina's opgeroepen kunnen worden.
Frameset
De hoofdtags voor het maken van frames zijn <frameset> en
</frameset>. Let op: deze tags vervangen de <body> en
</body> tags. De opzet voor de framesetpagina komt er dan zo uit te zien:
<html>
<head>
<title>Frames</title>
</head>
<frameset>
</frameset>
</html>
Dit begin slaan we op als index.html, het wordt de eerste pagina van onze
website.
index.html ( of index.php ...) is de eerste pagina waarnaar je browser op zoek gaat als hij op een domein aankomt ( tenzij het domein expliciet naar een bepaalde pagina geforward staat). Zorg er voor dat er altijd een index.html pagina op je server aanwezig is, of je bezoekers kunnen niet eens beginnen met surfen op je site.
Voordat je verder kunt, moet je bepalen hoeveel navigatievensters je
wilt hebben en hoe ze eruit komen te zien.
We geven in dit deel twee voorbeelden. In het eerste voorbeeld maken we een
homepage die is onderverdeeld in twee frames, in het tweede voorbeeld worden
drie frames gebruikt.
Frames definiëren
In het eerste voorbeeld delen we het navigatiescherm op in twee horizontale
vlakken. Om dat te kunnen doen moet het attribuut rows="X" worden
gebruikt in de <frameset>-tag.
Op de plaats van de 'X' geven we de
grootte van de twee vlakken aan. In ons voorbeeld gaan we uit van twee gelijke
vlakken. De HTML-code ziet er dan zo uit:
<frameset rows="50%, 50%">
De getallen achter rows= kunnen worden uitgedrukt in pixels of
in procenten. Gebruik je procenten dan plaats je een procentteken achter het
getal, wil je pixels dan komt er niets achter het getal te staan.
Wil je een
navigatievenster in meer dan twee vlakken verdelen, dan plaats je gewoon meer
getallen achter het attribuut. Je moet er hierbij wel rekening mee houden dat
het totaal bij een optelling in procenten van de getallen moet uitkomen op 100.
Een aantal voorbeelden.
De HTML-code <framset rows="20%, 80%"> zorgt er voor dat het
venster verdeeld wordt in twee horizontale vlakken, waarbij het ene vlak vier keer zo groot
is als het andere.
De HTML-code <frameset rows="30%, 20%, 50%"> verdeelt het
scherm in drie horizontale vlakken.
De HTML-code <frameset rows="20%, 20%, 20%, 20%, 20%"> doet dat
in vijf vlakken.
Tot nu toe zijn we er vanuit gegaan dat het navigatiescherm in horizontale
vlakken wordt verdeeld. Wil je verticale vlakken, dan vul je cols
in de plaats van rows in. Voor dit attribuut gelden precies
dezelfde regels als voor rows. Wijzig in index.html rows
in cols.
In ons voorbeeld : <frameset cols="20%, 80%"> We krijgen nu twee verticale vlakken waarvan het rechtse vlak vier keer groter is dan het linkse.
Frames benoemen
Nu we weten hoe we frames kunnen definiëren is het tijd om ze te benoemen, om
ze ook te kunnen zien. In het voorbeeld gingen we uit van twee frames.
Dit
betekent dat we twee nieuwe HTML-bestanden moeten maken, om in ieder frame iets
te zien te krijgen. Het is handig om de bestanden in de directory op te slaan
waar ook het bestand index.html staat. Wij gaan er in de voorbeelden vanuit dat
dit het geval is.
Het eerste bestand slaan we op als navigatie.html, het tweede als
inhoud.html.
In de body van deze bestanden zetten we biijvoorbeeld wat tekst, respectievelijk 'navigatie' en 'hier
komt inhoud'. Nu dit gedaan is, gaan we verder met het bewerken van
index.html.
We geven de zojuist gemaakte bestanden aan met <frame src="navigatie.html">
en <frame src="inhoud.html">. Deze tags dienen als link voor de te
tonen pagina's.
<html>
<head>
<title>Frames</title>
</head>
<frameset cols="50%, 50%">
<frame src="navigatie.html">
<frame src="inhoud.html">
</frameset>
</html>
Als je index.html nu opent in een browser, is je browservenster verdeeld in 2
verticale vlakken:
Uiteraard kun je voor de bestanden navigatie.html en inhoud.html ieder ander
willekeurig HTML-bestand nemen, als de naam en de plaats van het bestand maar
worden vermeld in de <frame src ="">.
Wil je verwijzen naar
bestanden elders op het web, dan kun je bij dit attribuut de URL naar dat
bestand opnemen. Als je bijvoorbeeld <frame src="http://www.webmasterstart.net/forum/">
opgeeft, verschijnt in één van je vensters het forum van deze site.
Lees verder over frames in het hoofdstuk targets gebruiken in frames.
|
Ontwerp je site 