|
|
Les 8: Frames
Je hebt nu al een aardige site opgebouwt. Maar zoals je waarschijnlijk al gemerkt hebt, heb je al snel last van ruimtegebrek, of verkeerd geplaatste teksten of plaatjes. Daarom is het vaak makkelijker om met frames te werken. Deze pagina is ook opgebouwd uit frames. Zoals je ziet verschuift het menu hiernaast niet als je naar beneden gaat. Frames zijn dus eigenlijk kleine pagina's in een pagina.
We beginnen met een overzichtje. Allereerst moet je weten dat als je frames gebruikt dat je dan geen body tag gebruikt. Verder begin je altijd met <frameset> en </frameset> en voor de mensen die een hele oude browser hebben gebruiken we nog een stukje <noframe> en </noframe>. Hieronder zie je een overzichtje.
<html>
<head>
<title>Site met frames</title>
</head
<frameset>
Hier komen de tags voor het opbouwen van de frames.
</frameset>
<noframes>
<body>
Hier gebruik je wel een body tag omdat de pagina geen frames gebruikt ( als gebruikers een oude browser hebben die geen frames ondersteunt gaat de browser hier automatisch naartoe, zoniet dan wordt het overgeslagen).
</body>
</noframes>
</html>
Wat je nu gemaakt hebt is de hoofdopzet. Dit gebruik je altijd. Nu gaan we de pagina opsplitsen in stukjes. Dit kun je op verschillende manieren doen. Je kunt het stukje een aantal procent van de pagina geven of een aantal pixels. Een aantal pixels is vooral handig als je plaatjes in een frame wilt zetten. Ik zal procenten gebruiken, omdat die een stuk makkelijker werken.
De <frameset> en </frameset> geeft dus aan dat daartussen frames komen. Hiertussen komen alle tags te staan. Klik hier om te zien wat we gaan maken. Hou dit scherm erbij, dat maakt het een stuk makkelijker.
Je zou zeggen dat de pagina is verdeeld in drie vakken, maar dat is fout. De pagina is namelijk verdeeld in twee vakken en een van die vakken is ook weer verdeeld in twee vakken. Je moet altijd aan het begin beginnen dus gaan we eerst dat vak aan de bovenkant maken.
Tik tussen <frameset> en </frameset>, <frameset rows="20%,*">. Maar wat betekent het? Frameset betekent dat je een frame gaat maken, rows betekent dat je in rijen gaat werken ( horizontaal dus) en 20%,* betekent dat je het scherm opsplitst in een stuk dat 20% van je beeld beslaat en een de rest ( het sterretje).
Vervolgens gaan we de frames inhoud geven. Geef een enter en tik in <frame scr="top.html">. Dit betekent dat je in het eerste stuk wat je tegenkomt ( dat stuk van 20% dus) top.html wordt geplaatst. Vervolgens geef je weer een enter en tik je in <frameset cols="20%,*">. Je herkent alles al behalve die cols. Cols betekent dat je in kolommen gaat werken ( verticaal dus). Ook hierachter geef je weer een enter en tik je in <frame scr="left.html">, daarna en een enter en tik in <frame scr="inhoud.html">. Het ziet er nu zo uit:
<html>
<head>
<title>Site met frames</title>
</head
<frameset>
<frameset rows="20%,*">
<frame scr="top.html">
<frameset cols="20%,*">
<frame scr="left.html">
<frame scr="inhoud.html">
</frameset>
</frameset>
</frameset>
<noframes>
<body>
Noframes verhaaltje
</body>
</noframes>
</html>
Wat je nu hebt is wat je in het scherm ziet wat je al geopend hebt. In plaats van top.html, left.html en inhoud.html kun je natuurlijk zelf namen verzinnen.
Nu gaan we de frames een beetje opmaken. We gaan eerst een beetje klooien in de eerste <frameset> tag die het geheel opent.
Allereerst gaan we de border verkleinen en weghalen. De border is de rand van het frame ( kijk maar in het schermpje). Geef tussen <frameset en > een spatie en tik in border="1" . Je zult zien dat de border is verkleint. Je kunt het getal zo groot of zo klein maken als je zelf wilt. Als je de border helemaal wilt weghalen kun je dat doen door in plaats van 1, no te zetten, dat nee betekent. Geen border laten zien dus.
Als je je border nou wel wilt laten staan kun je het ook een kleurtje geven. Geef weer een spatie en tik in: bordercolor="#000099" . De border is nu blauw, maar je kunt het ook een andere kleur geven.
Vervolgens gaan we de framespacing veranderen. Geef weer een spatie en tik in: framespacing="2" . Dit betekent dat de pagina niet direct op de rand wordt gezet, maar iets daar vandaan. Dit kun je ook veranderen in een ander cijfer of 0 of no dat natuurlijk weer nee betekent.
Daarin zijn we klaar. Nu gaan we de frames zelf editten. Ik neem als voorbeeld left.html. Geef tussen <frame scr="left.html" en > een spatie en tik in: name="left" . Dit betekent dat je dit frame de naam left geeft. Dat is handig voor het laten openen van andere pagina's in een frame, maar daar kom ik later nog op terug.
Geef nu weer een spatie en tik in: marginwidth="5" marginheight="5" . Dit betekent hetzelfde als framespacing. Je wilt de site niet direct tegen de rand zetten maar iets daaraf. Met deze code is dat dus per deel van de site te editten.
Geef weer een spatie en tik in: scrolling="auto" . Dit betekent dat als de pagina groter is dan het frame groot is er een scrollbalk komt, waarmee je naar beneden kunt scrollen. Je kunt auto veranderen in no ( nee, nooit een scroolbalk, ook niet als de pagina groter wordt.) of yes ( altijd een scrollbalk, ook al is de pagina kleiner).
Geef weer een spatie en tik in: noresize . Dit betekent dat de pagina door de gebruiker niet kan worden verandert. Dit kun je wel doen als je een border hebt en je hebt geen noresize in je tags staan. Probeer het maar eens uit in het schermp dat je al geopend hebt. Je zult zien hoe irritant het is.
Daarmee zijn we klaar. Nu gaan we het noframes gedeelte invullen.
Noframes wordt alleen gebruikt als een gebruiker een zeer oude browser heeft en hij/zij geen frames kan zien. Dit komt bijna niet meer voor, maar voor alle zekerheid kun je het er toch inzetten. Meestal staat er een standaard verhaaltje in als "Uw browser ondersteunt geen frames. Installeer een nieuwere versie om deze site te kunnen zien". Je kunt er ook nog een link in zetten naar een site zonder frames.
Tot slot nog het beloofde stukje over pagina's openen in een frame. Op deze pagina gebeurt dat ook. Je klikt in het menu op een link en in het andere frame komt dan de pagina te staan. De tag is vrij simpel. Tik in <a href="home.html" target="inhoud">ga naar home</a>. Je vertelt de computer door een target aan te geven waar de pagina geopend moet worden. In dit geval is dat in het frame inhoud. De computer weet welk frame inhoud is doordat jij een frame de naam inhoud hebt gegeven ( name="inhoud").
Je bent hier klaar. Je kunt nu verder naar Les 9: Formulieren.
|
