login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > HTML


Gegevens:
Geschreven door:
Abbas
Moeilijkheidsgraad:
Gemakkelijk
Hits:
16270
Punten:
Aantal punten:
 (4)
Aantal stemmen:
2
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (12)
 



Tutorial:

Frames

1. Inleiding
2. Attributen Frameset
3. Attributen Frames
4. Voorbeeld
5. Target


1. Inleiding

Frames (letterlijk 'kaders') worden gebruikt om een webpagina te verdelen in verschillende vensters. Dit is handig waneer je bijvoorbeeld een website maakt waarbij je links een navigatiemenu hebt en rechts de pagina's die getoond zullen worden. Enkele voordelen: je kan je lay-out beter specifieren of je kan pagina's van een andere website invoegen in je website. Maar er zijn ook enkele nadelen aan werken met frames, nl: zoekmachines hebben dikwijls problemen om pagina's met frames te indexeren of JavaScript gebruiken wordt bij werken met frames veel ingewikkelder.

pijl top
2. Attributen Frameset

Om frames te gebruiken begin je met deze tag: <frameset>. Dit om een set van frames te beginnen.
Deze tag heeft verschillende attributen:

cols:    Verdeelt het scherm in verschillende kolommen.
cols="20%, 50%, *"
Het scherm wordt in drie kolommen verdeeld, de eerste kolom neemt 20% van de totale breedte in, de tweede 50% en de derde kolom neemt de overblijvende breedte in.

rows:    Dit verdeelt je scherm in rijen. Dit werkt net hetzelfde als bij de kolommen.

frameborder:   Hiermee kies je of je wel een rand wild of niet rond de frames.
frameborder="yes", er wordt een rand getoond,
frameborder="no", er wordt geen rand getoond.

border:    Stel de breedte van de rand in, in pixels. (="x")

bordercolor:    Hiermee stel je de kleur van de randen in. (="#RRGGBB)


pijl top
3. Attributen Frames

Na <frameset> komt de tag: <frame>, elke frame die je maakt is een aparte <frame> tag.
Ook hier zijn enkele verschillende attributen:

src:    De naam van de pagina die in dit frame moet komen. (="menu.htm")

name:    De naam van dit frame, deze heb je nodig om de inhoud vanuit een andere frame te veranderen.

scrolling:    Hiermee kies je of de scrollbalk moet weergegeven worden of niet.
="no", nooit weergeven
="yes", altijd weergeven
="auto", weergeven indien nodig.

noresize:    Zorgt ervoor dat de bezoeker de grootte van de frame niet kan veranderen.

marginheight:    De afstand tussen de inhoud en de rand van de frame aan de boven en onderzijde, in pixels. (="x")

marginwidth:    Hetzelfde als bij 'marginheight' alleen geldt dit voor de linker en rechterzijde.


pijl top
4. Voorbeeld


Wat we nu hebben gezien was vooral de eigenschappen / attributen van frames. Om dit een beetje te verduidelijken zien we een voorbeeld:

<html>
<head>
<title>Voorbeeld Frameset</title>
<frameset cols="20%, 80%" rows="*" frameborder="yes">
<frame src="menu.htm" name="menu" scrolling="no" noresize marginheight="50" marginwidth="10">
<frame src="start.htm" name="start" scrolling="auto" noresize marginheight="20" marginwidth="20">
</frameset>
</head>
</html>

Dit is een pagina met een frameset die de pagina in twee kolommen verdeelt.
De eerste frame toont de pagina 'menu.htm', er wordt nooit een scrollbar getoond en de inhoud staat op 50pixels van de boven en onderrand en in de breedte op 10pixels.
De tweede frame heeft de pagina 'start.htm', er wordt een scrollbar getoond wanneer nodig en de inhoud staat op 20pixels van de rand en in de breedte ook op 20pixels.


pijl top


5. Target


Als je nu aan de linkse kant op je site een menu wil, moet de pagina 'menu.htm' bestaan. Hierin moeten hyperlinks staan om naar een pagina te verwijzen die in het rechtergedeelte van de site moet komen te staan. Tussen de <body> tags van de pagina 'menu.htm' zet je de hyperlinks:

<a href="start.htm" target="pagina">start</a><br />
<a href="inhoud.htm" target="pagina">inhoud</a>

De eerste link laat de startpagina verschijnen in de frame met naam "pagina".
De tweede link laat de inhoud van de website zien in dezelfde frame. Het veranderen van de pagina's gebeurt zonder dat er iets met het menu gebeurt.

Bekijk hier een compleet voorbeeld!

pijl top

Zo, ik hoop dat dit een interessante en vooral nuttige tutorial was!



« Vorige tutorial : W3C Validatie

© 2002-2023 Sitemasters.be - Regels - Laadtijd: 0.011s