Inleiding
Frames, we kennen ze waarschijnlijk allemaal wel. Vele site’s gebruiken
het,soms zul je het alleen niet zien. In dit artikel zal mijn best doen om
jullie proberen alles over dit onderwerp vertellen.
Wat zijn frames
eigenlijk?!
Tja, je zou het kunnen vergelijken met een raamwerk, allemaal kleine ruitjes
die bij elkaar een raam vormen.
Vertaald in ‘webmastertaal’ : 1 pagina met daarin meerdere pagina’s
opgenomen. Het mooie is dat je die ‘kleine ruitjes’, ook wel frames genoemd
allemaal los van elkaar kan besturen en dat is soms best handig om te
navigeren binnen een site en helemaal voor een webmaster, want die heeft
zijn site in kleine stukjes verdeeld en kan zo simpel bijvoorbeeld een logo
veranderen…
Ondersteunt mijn browser
frames?!
Ja, bijna alle moderne browsers ondersteunen frames. Enkele (lynx en
Internet Explorer 2 en lager bijvoorbeeld) ondersteunen dit helaas niet.
Bij
sommige kun de frameweergave uit of aan zetten…
Hoe maak ik frames?!
Om makkelijk frames te maken kan je best gewoon kladblok openen. Als aller
eerste moet je goed weten dat om alle frames op één pagina te laten zien, je
een soort ‘’regelpagina’’ moet maken waarin staat welke pagina’s erin moeten
komen,hoe hoog en breed ze moeten zijn,of ze randen moeten hebben,enz,enz.
Deze "regelpagina" noem je gewoon voor de handighe id index.html. Voor "de
regelpagina" zijn een paar regels:
- Hij heeft geen <body> </body>
- Je kunt dus ook niet de attributen van de <body> </body> gebruiken
Opbouw framepagina
Begin de pagina gewoon zoals gewoonlijk:
| Code: |
<html>
<head>
<title>Jouw pagina titel</title>
</head> |
Zo,dat hebben we dus al.
Volgende stap wordt niet zoals in een normaal html-bestand met de
<body></body>. Nee,nu komt daar de hoofdtag van de regelpagina:
| Code: |
| <frameset> </frameset> |
Dus we hebben nu:
| Code: |
<html>
<head>
<title>Jouw pagina titel</title>
</head>
<frameset>HIER KOMT ALLES WAT EN HOE HET WEERGEGEVEN MOET WORDEN...
</frameset> |
Onder de tag <frameset> </frameset> komt de tag:
| Code: |
| <noframes> </noframes> |
Wat dit precies is?! Tussen deze tag zet je een bericht voor de mensen
waarvan hun browser dit niet ondersteunt...
Bijvoorbeeld:
| Code: |
| <noframes>Op deze pagina worden frames gebruikt, maar
uw browser ondersteunt geen frames.</noframes> |
Zoals je net gelezen hebt ondersteunen bijna alle browsers frames dus dit is
eigelijk een beetje ouderwets en dus dit is niet noodzakelijk.
Verder sluiten we de pagina normaal af dus we hebben nu:
| Code: |
<html>
<head>
<title>Jouw pagina titel</title>
</head>
<frameset>
HIER KOMT ALLES WAT EN HOE HET WEERGEGEVEN MOET WORDEN...
</frameset>
<noframes>
Op deze pagina worden frames gebruikt, maar uw browser ondersteunt geen
frames.
</noframes>
</html> |
Tja,nu hebben we eigelijk al de basis voor "een regelpagina". Maar laten we
snel verder gaan en begin met het gedeelde wat tussen <frameset></frameset>
moet.
We gaan eerst de tag <frameset></frameset> eens uitbreiden. Je hebt namelijk
twee manieren om de frames weer te geven. In rijen (ROWS, horizontaal) en in
kolommen (COLS, verticaal ).
Deze kun je dus afwisselen op één pagina of je
gebruikt alleen maar rijen…
| Code: |
ROWS COLS
+---------------+ +-----+-----+-----+
| Frame 1 | | | | |
+---------------+ |Frame|Frame|Frame|
| Frame 2 | | 1 | 2 | 3 |
+---------------+ | | | |
| Frame 3 | | | | |
+---------------+ +-----+-----+-----+
|
Wat we ook gaan toevoegen is hoeveel pixels of procent een pagina moet
worden weergeven.
Bijvoorbeeld,je wilt 3 kolommen en de eerste wil je 50 procent ,de tweede 30
procent en de derde de rest.Dan komt je "regelpagina" er zo uit de zien:
| Code: |
<html>
<head>
<title>Jouw pagina titel</title>
</head>
<frameset cols="50%,30%,*">
HIER KOMT DE REST DE STAAN
</frameset>
<noframes>
Op deze pagina worden frames gebruikt, maar uw browser ondersteunt geen
frames.
</noframes>
</html> |
Je zult,als je goed gekeken hebt naar de bovenstaande code, je afvragen waar
* nou voorstaat! Nou zo’n sterretje
staat voor "overige" of voor "alles wat overblijft". Dit is best handig want
dan hoef je dus niet alles te gaan uitrekenen.
Nu hebben we aangegeven hoe de afmetingen van de frames moeten zijn. De
volgende stap is dat we gaan vertellen welke pagina’s moeten worden
opgenomen in de framepagina…
Die code, die aangeeft welke pagina’s (in dit geval 3 ) er moeten komen te
staan is:
| Code: |
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html"> |
Die pagina’s staan in dit voorbeeld dus in de zelfde map.Je kan ook gewoon
een andere site in je framepagina laten:
| Code: |
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="http://www.jessegruiters.nl"> |
Voor de duidelijkheid, de code die we nu al hebben is:
| Code: |
<html>
<head>
<title>Jouw pagina titel</title>
</head>
<frameset cols="50%,30%,*">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
<noframes>
</html> |
Nou, selecteer de bovenste code maar is en kopieer het maar is op in
kladblok als index.html. Dan zul je,en ik heb getest, een je eigen
framepagina zien. Naast het feit dat er,als het goed is, staat ‘Deze pagina
kan kan niet worden weergeven’ of zoiets zie je ook dat alle frames nog vrij
te bewegen zijn,dat er lelijke randen zijn,enz,enz. Kijk,dat er nog geen
pagina’s aangemaakt zijn is niet moeilijk maak gewoon 3 pagina’s aan met de
inhoud:
| Code: |
<html>
<head>
<title>Jouw titel hier….</title>
</head>
<body>
DIT IS EEN FRAMEPAGINA….
</body>
</html> |
Sla deze pagina drie keer op (pagina1.html, pagina2.html, pagina3.html) en
er staan nu niet meer: "Deze pagina kan niet worden weergegeven".
Zo,dat hebben we nu ook klaar…
De Attributen van
<frame>
| Code: |
| <frame src="pagina1.html" name="pagina1" > |
name :Geef je frame een naam…
(als je nu in je <head> van pagina 2
| Code: |
| <base target="pagina1"> |
zet zullen alle links van pagina 2 openen in
pagina 1).
| Code: |
| <frame src="pagina1.html" Frameborder=’no/yes’> |
Frameborder: Geef je frame een rand of niet…
| Code: |
| <frame src="pagina1.html" Framespacing="aantalpixels" > |
Framespacing: Geeft een extra witruimte tussen je frames…
| Code: |
| <frame src="pagina1.html" Marginwidth="aantalpixels" > |
Marginwidth of marginheight: Geef extra ruimte binnen het frame van de rand
van het frame tot de tekst of het plaatje…
| Code: |
| <frame src="pagina1.html" Noresize > |
Noresize: De gene die het bekijkt heeft niet de mogelijkheid om het frame
breder of smaller te maken…
| Code: |
| <frame src="pagina1.html" Scrolling="yes/no/auto" > |
Scrolling:
Yes: Altijd een schuifbalk in het
frame
No: Geen schuifbalk in het frame
Auto:Alleen een schuifbalk indien
nodig…
Help!Ik zie nog gewoon
een border,spacing….
Tja,bij sommige browser zul je dit zien. Dit is natuurlijk ook op te lossen:
Verander je frameset:
| Code: |
| <FRAMESET COLS="50%,30%,*" BORDER=0 SPACING=0
FRAMEBORDER=0 FRAMESPACING=0> |
En bij <frame> voegen we toe:
| Code: |
| <FRAME SRC="pagina1.html" NAME="pagina2" BORDER=0
SPACING=0 FRAMEBORDER=0 FRAMESPACING=0 MARGINWIDTH=0 MARGINHEIGHT=0 > |
Zo, nu is je "regelpagina" helemaal vrij van de ongewenste attributen…
<base target="…">
Laten we hier nog even dieper op in gaan: Deze tag zorgt er dus voor dat je
alle links op de pagina waarin je deze in de <head> hebt gezet naar de …
gaat.
Erg handig.Toch?! Maar als je je site nou in een nieuw venster wilt openen?!
Oftewel, je hebt meerdere mogelijkheden met deze tag:
| Code: |
| <base target="_blank"> |
_blank : opent in nieuw venster
| Code: |
| <base target="_parent"> |
_parent : het huidige frame wordt vervangen door de nieuwe link
| Code: |
| <base target="_top"> |
_top : heel het frame wordt wegevaagd en de link wordt dus frameloos
weergegeven…
Als je heel veel verschilende mogelijkheden wilt gebruiken dan kan je ook
achter elke link zetten waar hij naar toe moet:
| Code: |
| <a href="http://www.jessegruiters.nl/" target="_top">Jessegruiters.nl</a> |
Tips
#Let op de ‘’… ‘’,vergeet deze niet…
#Maak altijd gebruik van de basis en ga daarna uitbreiden naar jouw smaak
#Je kan natuurlijk ROWS en COLS door elkaar gebruiken
# Besef dat niet iedereen het gebruik van frames waardeert
#Maak niet tè veel frames
#Maak gebruik van <!—….--> om het overzichtelijk te maken
# Vraag jezelf af of je wel frames moet gebruiken…
#Denk eraan dat mensen niet allemaal de zelfde resolutie hebben…
Artikel door JG
|