Een website bouwen met HTML en CSS practicum 3
FRAMES GEBRUIKEN Met frames kan het venster van een browser zo worden ingedeeld, dat er meerdere webpagina's tegelijk getoond kunnen worden. In de afbeelding hieronder staat een webpagina met frames. We noemen zo'n pagina een frameset. De frameset moet worden vastgelegd in een apart HTML-bestand. In dit HTMLbestand komt te staan, hoe de frameset eruit ziet, en welke webpagina's in de frames moeten worden getoond De frameset hieronder bestaat uit 3 rijen, de 2e rij is gesplitst in 2 kolommen.
FRAMESET De frameset uit de afbeelding wordt op de volgende manier gedefinieerd:
titel
Bij het openen van de homepage van deze website verschijnen onafhankelijk van elkaar vier verschillende webpagina's in beeld, ieder in hun eigen frame. Ieder frame heeft een naam. Met deze naam kan je aangeven in welk frame een webpagina moet verschijnen. Een hyperlink ziet er binnen een frameset dus zo uit:
Open bestand
-1-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 3
VOORBEELD In dit voorbeeld komen aan de orde: · · ·
Het 'master frame bestand' waarmee aan de browser wordt kenbaar gemaakt, dat er meerdere webpagina's geladen moeten worden. Het attribuut 'target' waarmee aan de browser wordt kenbaar gemaakt in welk frame een webpagina geladen moet worden. Het 'inline frame' waarmee je op een willekeurige plek binnen een webpagina een andere webpagina kunt tonen.
Je kunt het voorbeeld samen met de bijbehorende sourcecode vinden op de cd-rom.
Het master frame bestand Wanneer je bij het ontwerpen van je website gebruik wilt maken van frames, dan moet het 'master frame bestand' als eerste geladen worden door de browser. Het 'master frame bestand' krijgt dus meestal de naam 'index.htm'. Het 'master frame bestand' is een gewoon html-bestand, waarbij de tag vervangen is door
-2-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 3
Met behulp van het frameset-element kun je het browservenster op allerlei verschillende manieren indelen. Zo'n indeling kan relatief zijn, doordat je gebruik maakt van procenten, of absoluut, doordat je gebruik maakt van pixels. Indeling in rijen Hieronder staat een voorbeeld van een indeling van het browservenster in 2 rijen. Het is een relatieve indeling, de bovenste rij is altijd 20% van het browservenster en de onderste rij altijd 80%. ....
-3-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 3 Indeling in kolommen Hieronder staat een voorbeeld van een indeling van het browservenster in 2 kolommen. Het is een absolute indeling, de linker kolom is altijd 200 pixels van het browservenster en de rechter kolom krijgt de rest van het venster. .... ....
Geneste framesets Hieronder staat een voorbeeld van een indeling van het browservenster in verschillende rijen en kolommen. De buitenste frameset beschrijft eerst de rijen en de binnenste frameset beschrijft vervolgens de kolommen. .... .... .... ....
-4-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 3 Attributen Wanneer je wilt voorkomen, dat de bezoeker van jouw website het formaat van de frames verandert, dan moet je in het element 'frameset' het attribuut noresize gebruiken. Wanneer je geen randen wilt zien om de frames, dan moet je in het element 'frame' het attribuut frameborder gebruiken.
Het target attribuut Zodra je gebruik maakt van frames, dan moet je bij een hyperlink altijd aangeven in welk frame een nieuwe webpagina geopend moet worden.
Door het attribuut 'target' te gebruiken in een hyperlink, kun je aangeven in welk frame een webpagina getoond moet worden: Open bestand
Je kunt ook in de hyperlink aangeven, dat de webpagina geopend moet worden in een nieuw venster, dat bovenop het oude venster komt te liggen: Open bestand
Of dat de webpagina geopend moet worden in hetzelfde frame, waarin de hyperlink zich bevindt: Open bestand
-5-
© Edu’Actief
Een website bouwen met HTML en CSS practicum 3 Het inline frame Een inline frame is een frame, dat je op een willekeurige plek in een webpagina kunt plaatsen. Je hebt er geen voor nodig.
Met een inline frame kun je in een gedeelte van een webpagina een andere webpagina tonen. Door gebruik te maken van een paar attributen kun je het inline frame precies op maat maken: <iframe src="bestand.htm" frameborder="1" marginwidth="5" marginheight="5" height="200" width="100">
src="bestand.htm" Met het attribuut 'src' geef je aan welk html-bestand er geopend moet worden in het inline frame. frameborder="1"
marginwidth="5" marginheight="5" height="200" width="100"
Met het attribuut 'frameborder' geef je aan hoe breed de rand om het inline frame moet worden.
Met het attribuut 'marginwidth' geef je de ruimte aan tussen de inhoud van het inline frame en de linker- en rechterrand van het inline frame.
Met het attribuut 'marginheight' geef je de ruimte aan tussen de inhoud van het inline frame en de boven- en onderrand van het inline frame. Met het attribuut 'height' geef je de hoogte aan van het inline frame. Met het attribuut 'width' geef je de breedte aan van het inline frame.
-6-
© Edu’Actief