|
Je kan natuurlijk ook een complexere framestructuur maken met een combinatie van horizontale en verticale frames.
In het tweede voorbeeld gaan we drie frames maken. Om hiervoor te zorgen moet
je eerst twee frames definiëren. Dit gaat op precies dezelfde wijze als in het
eerste voorbeeld. Je maakt een bestand en noemt dat index.html. Dit bestand
bevat de volgende inhoud.
<html>
<head>
<title>Frames</title>
</head>
<frameset rows="20%, 80%">
<frame name ="top" src="top.html">
<frame name ="index2" src="index2.html">
</frameset>
</html>
Het bestand top.html kun je alvast maken en daarin de tekst zetten: 'Dit is
de bovenste balk van mijn homepage'. Vervolgens is het bestand index2.html aan
de beurt. In dit bestand moeten we opnieuw twee frames definiëren, waardoor het
eindresultaat op drie komt.
De eenvoudigste manier om dit te doen is de eerder
genoemde code te kopiëren. Je vervangt daarna de woordjes rows door
cols, top door navigatie en index2 door
main. Je hebt nu het volgende staan in je index2.html.
<html>
<head>
<title>Frames</title>
</head>
<framset cols="20%, 80%">
<frame name ="navigatie" src="navigatie.html">
<frame name ="main" src="main.html">
</frameset>
</html>
Je zal nu de volgende structuur krijgen :

Om het voorbeeld compleet te maken moet je nu vier bestanden maken. Het
eerste bestand heet navigatie.html en bevat de link <a href="rechts.html"
target="main">Als je hier op klikt, zal er in het rechter venster iets
veranderen.</a>
Het tweede bestand heet rechts.html en bevat de tekst
'Dit verschijnt in het rechter venster'. Het derde bestand heet main.html en
bevat de link <a href ="links.html" target="navigatie">Als je hier op
klikt, zal er in het linkervenster iets veranderen.</a>.
Het laatste
bestand krijgt de naam links.html en bevat de tekst 'Dit verschijnt in het
linker venster'. Wanneer je nu het bestand index.html opvraagt krijg je de hele site te zien en kan je op de links klikken en elinks en rechts nieuwe pagina's laten verschijnen.
Noframes
Als laatste gaan we er nog voor zorgen dat apparaten die geen frames
ondersteunen, toch nog iets te zien krijgen.
Voeg net vóór </frameset> deze code toe:
<noframes>
<body>
Je browser ondersteunt geen frames. Hier zet je dan een tekst waarover je
website gaat en eventueel een aantal links naar de belangrijkste pagina's van je
site. Je kunt hier eventueel ook een link plaatsen naar een versie van de site
zonder frames.
</body>
</noframes>
Zwevende frames
Een heel bijzonder geval van framegebruik, is het zwevende frame. Dit soort
frame kun je eender waar gebruiken, bijvoorbeeld in een tabelcel.
In het frame
kun je dan een pagina openen die je vooraf kiest. Een zwevend frame maken is
heel wat makkelijker dan wat we hierboven geleerd hebben. Je gebruikt hiervoor
de tag <iframe>. Een voorbeeld van een code vind je hieronder:
<iframe src="extra.html" name="extra" height="400" width="500"
scrolling="auto">
Als je browser geen iframes ondersteunt, zie je dit bericht
</iframe>
Het iframe kan je overal oproepen in je pagina waar je maar wil.
Ziezo, je hebt de volledige cursus nu doorgenomen! Proficiat! Als je - na
veel oefenen - HTML goed
onder de knie hebt, kun je beginnen met
CSS te leren om je website op
te maken. Wil je je kennis nog eens testen? Dan kun je op de bekende website
W3schools
terecht voor een leuke HTML quiz!
Of ga op WMS veerder met het volgende deel van de cursus : Geluid en video
in HTML .
Toevoegen van multimedia zoals geluid, video en flashanimaties.
|