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.
 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) |
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.
|
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.
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!
top
Zo, ik hoop dat dit een interessante en vooral nuttige tutorial was!
|
(4) 