Cursus HTML - deel 7: frames

Trefwoorden: HTML, website, cursus, frames, frameset

1. Wat zijn frames?


1.1. Een korte uitleg

Frames worden gebruikt om de hoofdstructuur in een webpagina aan te brengen. De hoofdgedachte is eigenlijk het verdelen van het browservenster in meerdere vensters. In elk verkregen venster kan een andere pagina geopend worden. Zo kan je bv. jouw menu in het linkse venster laten openen en je pagina's met inhoud rechts. De venster staan ook met elkaar in verbinding, zo kan je een link in één venster plaatsen, maar de pagina, waarnaar de link verwijst, laten openen in een ander venster.

1.2. Voordelen en nadelen

Nu denk je misschien: "Oh, heel gemakkelijk, die frames, nu hoef ik niet op elke pagina de code van mijn menu, footer, header, ... te plaatsen. " Dat is inderdaad waar, maar het is meteen ook het enige voordeel die er aan frames zijn voor mij.
De nadelen aan frames kan je nalezen in dit artikel en ik soms er nog enkele voor je op:

  • Zoekrobots hebben vaak problemen met frames. Zij leggen meestal een link naar de pagina waarop iets gevonden wordt en niet naar de frameset waarin die pagina zich bevindt. Met als gevolg dat de bezoeker een gewone pagina te zien krijgt, zonder menu, omdat het menu zich in de frameset bevindt en die is niet bekend voor de browser. De bezoeker kan dus op geen enkele manier door je site navigeren en je zal dus hoogstwaarschijnlijk een bezoeker verliezen.
  • Een pagina met frames afdrukken zal ook heel moeilijk gaan, omdat de computer moeite heeft met alles positioneren.
  • Links naar pagina's met frames zijn meestal ook niet correct, omdat verwezen wordt naar de pagina met de frameset.

Voor de meesten wegen de nadelen op tegen de voordelen. Frames worden dus niet meer gebruikt bij professionele sites.

2. De basis van frames


Als je een site met frames wil maken, moet je maar op één pagina vastleggen hoe je structuur eruit ziet. Dit is dan de hoofdpagina en wordt gewoonlijk "index.html" of "default.html" genoemd. Je maakt dan gewoon apart een pagina met je menu, een homepagina, ... en die pagina's open je dan in het gewenste frame. Nu gaan we even kijken hoe je frames aanmaakt in HTML.

2.1. Frames aanmaken

Frames maak je aan door aan de browser door te geven hoeveel kolommen en hoeveel rijen in je kolommen je frameset bevat. Dit geef je aan in de frameset-tag.

Als voorbeeld en om het op een gemakkelijke manier aan te leren gaan we hier even proberen om deze frameset in de browser na te maken:

http://www.multidesk.be/bijlage/cb6f92721b5e51eab73c3f31f3029893.jpg


Eerst en vooral moeten we de kolommen definiëren. In dit voorbeeld hebben we twee kolommen, één met het menu-frame en één met het header- en hoofd-frame. Om dit aan te geven in HTML gebruik je de frameset-tag met het attribuut cols. De frames zelf moet je aangeven met de frame-tag en het src-attribuut, die naar de pagina verwijst die geopend moet worden.
CODE
  1. <frameset cols="20% ,80%" >
  2.  
  3.         <frame src="menu.html" />
  4.         <frame src="pagina.html" />
  5.  
  6. </frameset>

Als je dit in de browser zou bekijken zal je twee vensters zien. Het linkse zal 20% van de breedte van je browser-venster zijn en het rechtse 80%.
Nu moeten we nog de twee rijen aanmaken in het rechtse frame. Hiervoor gaan we de laatste frame-tag vervangen door een nieuwe frameset.
CODE
  1. <frameset cols="20% ,80%" >
  2.         <frame src="menu.html" />
  3.  
  4.         <frameset rows="20%, 80%" >
  5.                 <frame src="header.html" />
  6.                 <frame src="home.html" />
  7.         </frameset>
  8.  
  9. </frameset>

Als je het goed gedaan hebt, moet je met bovenstaande code ongeveer iets zoals de afbeelding bekomen.

De beste manier om een frameset op te bouwen is dus eerst beginnen met de kolommen of rijen (het hangt er vanaf hoe het best past natuurlijk) en daarin dan de nodige onderverdelingen te maken.

Opgelet!:
Je code voor je frameset komt niet noch in de body noch in de head van je pagina te staan. Je plaats je frameset gewoon op de plaats waar de body normaal moet komen, dus onder je head, maar nog steeds binnen je html-tags natuurlijk. Hier zie je de grofstructuur van een pagina met een frameset:
CODE
  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>De titel van je pagina</title>
  6. </head>
  7.  
  8. <frameset>
  9. </frameset>
  10.  
  11. </html>


2.2. Een pagina openen in een frame

Om een pagina te openen in een frame moeten we eerst nog wat veranderen aan de structuur. Het attribuut name moet nog aan elke frame-tag toegevoegd worden. Dit dient om het doelframe in de link aan te geven.
Onze vorige frameset verandert dus in:
CODE
  1. <frameset cols="20% ,80%" >
  2.         <frame src="menu.html" name="menu" />
  3.  
  4.         <frameset rows="20%, 80%" >
  5.                 <frame src="header.html" name="header" />
  6.                 <frame src="home.html" name="hoofd" />
  7.         </frameset>
  8.  
  9. </frameset>


We stellen ons nu even voor dat we een pagina voor het menu gemaakt hebben en op die pagina staat een link naar pagina 2 die geopend moet worden in het hoofdframe. Nu moeten we even terug in ons geheugen graven en terug gaan naar deel 5 van deze cursus die handelde over hyperlinks. Bij 3.3 hadden we het over het target-attribuut. Dit attribuut gaan we nu gebruiken om aan te geven in welk frame de pagina zich moet openen.
CODE
  1. <a href="pagina2.html" target="hoofd" >Pagina 2</a>

Op die manier kan je ervoor zorgen dat je links uit het venster menu, zich openen in het hoofdvenster, gebruik je dit niet, dan wordt de pagina geopend in hetzelfde venster als het menu.

De namen van je frames mag je vrij kiezen, maar er zijn enkele die speciaal zijn voorbehouden voor het openen van pagina's via het target-attribuut:

naamuitleg
_selfDe pagina van de link wordt geopend in het frame waar de link staat
_blankDe pagina van de link wordt geopend in een nieuw venster (goed om te linken naar externe websites)
_topDe pagina van de link wordt geopend over heel het venster, de frameset is dus achterwege gelaten
_parentDe pagina van de link wordt geopend in de browser, maar de frameset wordt vervangen door de frameset van de nieuwe pagina.


3. Geavanceerdere mogelijkheden met frames


3.1. Wat als de browser geen frames ondersteunt?

Misschien heb je je al afgevraagd: "Wat als de browser van de bezoeker geen frames ondersteunt?"; Wel dat is een goeie vraag, maar bijna onmogelijk. Het zijn de prehistorische browser die geen frames meer ondersteunen :), de meeste ondersteunen ze wel. HTML heeft wel een oplossing voor de browsers die geen frames ondersteunen, namelijk de noframes-tag. Hiertussen kan je een tekst plaatsen die wordt weergegeven als de browser van de bezoeker geen frames ondersteunt.
CODE
  1.  
  2. <frameset>
  3.  
  4. <noframes>
  5. Op deze site worden frames gebruikt en uw browser ondersteunt geen frames. Daarom kan de site niet weergegeven worden.
  6. </noframes>
  7.  
  8. </frameset>

De tekst tussen de noframes-tag zal verschijnen als de browser van de bezoeker geen frames ondersteunt, maar zoals gezegd komt dit echt heel zelden voor.

Opgelet!:
de noframes-tag bevindt zich in de frameset en niet er buiten.

3.2. Enkele attributen

3.2.1. de rand van je frames

De rand rond je frames kan je aanpassen door het attribuut frameborder op je frameset-tag of frame-tag toe te passen.
CODE
  1. <frameset cols="20% ,80%" frameborder="0" >
  2.         <frame src="menu.html" />
  3.  
  4.         <frameset rows="20%, 80%" >
  5.                 <frame src="header.html" />
  6.                 <frame src="home.html" />
  7.         </frameset>
  8.  
  9. </frameset>

Dit zorgt ervoor dat alle frames geen rand meer hebben

CODE
  1. <frameset cols="20% ,80%" >
  2.         <frame src="menu.html" frameborder="5" />
  3.  
  4.         <frameset rows="20%, 80%" >
  5.                 <frame src="header.html" />
  6.                 <frame src="home.html" />
  7.         </frameset>
  8.  
  9. </frameset>

Dit zorgt ervoor dat het frame met het menu een heel dikke rand heeft.

3.2.2. veranderen van de frames tegengaan

Waarschijnlijk heb je al gemerkt dat je in de browser de grootte van de frames kan aanpassen door gewoon de rand te verslepen.
HTML heeft een attribuut ter beschikking om dit tegen te gaan, namelijk noresize. Bij noresize hoort ook de waarde noresize, als je dit wilt gebruiken komt je frameset er dus zo uit te zien:
CODE
  1. <frameset cols="20%, 80%" noresize="noresize">
  2.         <frame src="menu.html" />
  3.  
  4.         <frameset rows="20%, 80%">
  5.                 <frame src="header.html" />
  6.                 <frame src="home.html" />
  7.         </frameset>
  8.  
  9. </frameset>

Dit zorgt ervoor dat de frames niet meer kunnen aangepast worden in breedte of lengte. Je kan noresize alweer toepassen op zowel de gehele frameset of één of meerdere frames.

4. Slot


Frames kunnen in het begin wat ingewikkeld zijn, zeker om ze op te stellen. Maar zoals altijd geldt, veel oefenen is de boodschap!
Na dit artikel lijken frames heel handig en in feite is dit zo. Helaas zijn er meer nadelen dan voordelen aan frames en van zodra je kunt is het beter om over te stappen op één van de alternatieven en dan het liefst nog DIV's in combinatie met CSS.

Hopelijk was het weer leerrijk, als er nog vragen zijn mogen die gerust gesteld worden in de forums ;).

Klik hier om deel 8 formulieren te lezen.Dit artikel werd geschreven door Simon op zaterdag 19 mei 2007 om 20:49 en werd sindsdien 11669 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.