Home Ontwerp je site HTML Horizontale en verticale frames samen gebruiken

Horizontale en verticale frames samen gebruiken

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 :


Website met 3 frames


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.


7 + 0 =
 

GOOGLE adsense