12. Frames
12.1. Inleiding
Iedere webgebruiker komt het dagelijks tegen; websites met frames. Er is een menubalk aan de linkerkant van het scherm en een menubalk boven aan het scherm. Als je op een menu optie klikt dan verandert de inhoud, terwijl de balken blijven staan. Hier wordt gebruik gemaakt van frames.
Frames kun je gebruiken om het venster van een webbrowser in aparte secties in te delen. Elke sectie bevat weer een afzonderlijke pagina. Met frames kun je aantrekkelijke layouts maken en je kunt het je gebruikers makkelijker maken om op je site te navigeren.
Een veel gebruikte vorm van frames is de indeling in 3 delen: een horizontale balk aan de bovenzijde van de browser, met bijvoorbeeld een bedrijfslogo en adresgegevens, daaronder links een kolom met navigatie-elementen en rechts een rechthoekig frame met daarin de content van de pagina.
Voor een webpagina die uit frames bestaat heb je altijd een bepaald aantal HTML pagina's nodig. Het totale aantal pagina's is altijd het aantal frames, plus 1 pagina. Dus als je de pagina opdeelt in 3 frames, zoals in bovenstaand voorbeeld heb je in totaal 4 HTML pagina's nodig. Die ene extra pagina noemt Dreamweaver de frameset. Dit document bevat informatie over onder andere de plaatsing en de grootte van de frames.
12.2. Frames in Dreamweaver
Je voegt frames toe aan een nieuw of bestaand document door gebruik te maken van je object paneel. Deze kun je vinden door in het object paneel te kiezen voor layout en op het pijltje naast het icoon 
te drukken.
Figuur 12.1: Overzicht van de mogelijke framessets.
Kies ervoor om de frame objecten te laten tonen door frames uit het dropdown menu te kiezen. Je ziet dan 13 ongedefinieerde framesets. Aanklikken van een gekozen indeling volstaat om je pagina als zodanig te verdelen in frames. Dezelfde opties vindt je terug in de menubalk, onder Insert » Frames.
Oefening 12.1. Frames invoegen.
- Open een nieuwe lege pagina.
- Open het Object palette. Als dit nog niet open is, open deze dan via window, frames.
- Druk in het object paneel op de pijl naast het Frame icoon.
- Kies de optie Left frame.
Wil je de frames aanpassen kies dan de menuoptie modify » frameset. Je hebt daar de keuze uit een viertal opties: Split frame left, right, up en down. Kies je een van deze opties dan zie je dat er links, rechts, boven of onder een leeg frame aan je pagina word toegevoegd met de plek waar je muis stond als uitgangspunt. Dreamweaver kiest zelf een indeling. Het is daarom goed hulp in te schakelen.
Kies de optie view » visual aids » frame borders. Je ziet nu duidelijk waar de framegrenzen zich bevinden en je kunt met de muis aanpassingen maken door op een framegrens te gaan staan. De muis aanwijzer verandert in een pijl met twee punten waarmee je de framegrenzen kunt verplaatsen.
Oefening 12.2. Frames aanpassen.
- Kies in de menubalk de optie modify en dan frameset uit de menubalk.
- Kies uit de opties Split frame left, right, up of down, de optie Split frame right.
- Laat de frameborders zien via in de menubalk voor de optie View te kiezen.
- Kies de optie Visual aids, Frame borders.
- De framegrenzen zijn nu duidelijk zichtbaar.
Als je voor de optie split frame up zou hebben gekozen dan zou je pagina nu uit twee horizontale rijen bestaan. Wil je nu de onderste rij opdelen in twee frames dan is het handig om het frame window erbij te pakken. Deze activeer je via Window » Frames. Met behulp van dit venster kun je frames selecteren door er met je muis op te klikken, of de gehele frameset door de buitenrand te klikken.
Oefening 12.3. Frames toevoegen.
- Open de pagina wereldmuziek.htm.
- Kies de optie Top Frame.
- Verwijder het navigatiemenu.
- Maak een nieuwe pagina aan.
- Geef deze de achtergrondkleur #663399.
- Voeg het library object navigatiemenu in.
- Sla de pagina op onder de naam navigatie.htm.
- Ga naar de pagina wereldmuziek.htm.
- Selecteer de Top frame en voeg in de Property Inspector achter src de pagina navigatie.htm toe.
- Sla de Top frame op, met de naam navigatie.htm.
- Selecteer de Frameset door in het Frame panel op de buitenrand van de frames te klikken. Voer achter Border with een 0 in. Nu lopen de frames in elkaar over, zonder dat er een rand tussen zit.
- Ook het Mainframe en de Frameset moeten worden opgeslagen
- Het Mainframe onder de naam wereldmuziek_mainframe.htm en de Frameset onder wereldmuziek.htm.
- Test de pagina in de browser.
In de Property Inspector kun je de eigenschappen van de verschillende frames zien. Hierin kun je handmatig dingen instellen. De volgende zaken zijn in te stellen wanneer je een enkel frame selecteert in het Frame Window:
Figuur 12.2: Property Inspector voor Frame eigenschappen.
| Tabel 12.1: Uitleg van de eigenschappen van de Property Inspector voor frames. | |
|---|---|
| Frame name | Zie 12.3 links en frames in dit hoofdstuk. |
| Src | Geef hier het pad op van het HTML bestand van het frame of de frameset. |
| Scroll | Hiermee kun je de scrollbars in een frame uitzetten. |
| No resize | Schakelt de mogelijkheid tot het vergroten of verkleinen van een framevenster door de gebruiker uit. |
| Borders | Stelt in of je de scheidingen tussen de frames zichtbaar of onzichtbaar wilt maken. |
| Border color | Stelt de kleur in van je border. |
| Margin width en Margin height | Stelt in hoeveel ruimte er tussen de frameborders en de inhoud van het frame zit. Standaard geeft Dreamweaver zowel aan de boven- als onderzijde enkele pixels ruimte. |
Selecteer je een frameset in het Frame Window dan staan de volgende instellingen tot je beschikking:
Figuur 12.3: Property Inspector voor eigenschappen van de Frameset.
| Tabel 12.1: Uitleg van de eigenschappen van de Property Inspector van de frameset. | |
|---|---|
| Borders | Stelt in of je de scheidingen tussen de frames zichtbaar of onzichtbaar wilt maken. |
| Border width | Geef hier de breedte op van je border, in pixels. |
| Border color | Stelt de kleur in van je border. |
| RowColSelection | Hierin kun je de hoogte en breedte van verschillende frames instellen. |
12.3. Links en frames
Als je in een frame een link aanmaakt naar een andere pagina heb je verschillende opties. Je kunt namelijk zelf bepalen waar die volgende pagina terecht komt.
Stel je hebt een klassieke indeling van een bovenbalk met daaronder links een navigatiebalk en een content frame rechts. In die navigatiebalk heb je een menu gecreëerd en daarin wil je de links actief maken. Je selecteert de tekst of het plaatje dat je klikbaar wilt maken en je maakt de link in het Property Inspector. In de property Inspector heb je de optie target. Dit kun je gebruiken om aan te geven in welk frame de pagina dient te verschijnen na het aanklikken van de link.
Hiervoor is het zaak je frames namen te geven. Waar je die namen kunt definiëren heb je in de voorgaande paragraaf kunnen lezen.
Let op: in Dreamweaver moet je in bijna alle gevallen je frames zelf een naam geven. Slechts wanneer je via het Objects Palet een Frameset hebt aangemaakt doet Dreamweaver dit automatisch voor je.
In dit voorbeeld is een logische naamgeving als volgt: bovenbalk, navigatie en content. Je bent vrij deze namen naar eigen voorkeur in te vullen.
Als je een pagina via een link in het linkerframe wil laten verschijnen in het rechterframe dan kies ik in de selection properties van die link uit het dropdownmenu 'target' voor 'content'.
Het dropdown menu 'target' toont alle framenamen die je gedefinieerd hebt in je frameset. Daarnaast staan er standaard nog vier bij: _blank, _parent, _self en _top.
| Tabel 12.3: Target namen die gekoppeld kunnen worden aan een link. | |
|---|---|
| _blank | Opent de link in een nieuw venster, de huidige browservenster verdwijnt in de achtergrond. |
| _parent | Je verlaat de huidige pagina, de link wordt geopend in je huidige browservenster. |
| _self | De link wordt geopend in het frame waarin de link is gedefinieerd. |
| _top | Komt op hetzelfde neer als parent. |
Oefening 12.3. Links en frames.
- Maak een nieuwe pagina aan.
- Open de pagina klassieke_muziek.htm en kopieer de hyperlinks die het navigatiemenu vormen.
- Plak het navigatiemenu in de nieuwe pagina.
- Voer de volgende opmaak in:
Category: Font
Size: 16
Text color: #000000
Background color: #CC9966
Category: Links
Link color: #330000
Visited links: #663333
Rollover links: #663300
Active links: #330000
Underline style: Always underline - Sla deze pagina op onder de naam top.htm.
- Open de pagina main.htm.
- Maak een nieuwe pagina aan.
- Kies de optie Top frame.
- Selecteer de Top frame en voeg in de Property Inspector achter src de pagina top.htm toe.
- Selecteer de hyperlink Home en voeg in de Property Inspector achter Link index2.htm en achter Target mainframe in.
- Selecteer het Main Frame en voeg de pagina main.htm toe.
- Selecteer de Frameset door in het Frame panel op de buitenrand van de frames te klikken. Voer achter Border width een 0 in. Nu lopen de frames in elkaar over.
- Sla de frameset op onder de naam framesetklassiekemuziek.htm.
- Test pagina in de browser.
Figuur 12.4: Onderstaande afbeelding bestaat uit een top frame en een mainframe.
Figuur 12.5: Als op de hyperlink Home wordt geklikt, wordt de index2.htm pagina geopend zoals hieronder.
Om duidelijk te maken hoe frames werken is er voor gekozen om de opmaak van de pagina’s van elkaar te laten verschillen.
12.3.1. Framehoogte en breedte handmatig aanpassen
Zoals opgemerkt kun je de hoogte en breedte van je frames instellen door met je muis de frameborders te verschuiven. In de Property Inspector van de Frameset kun je de getallen veranderen die staan voor de 'value' van je 'row' of 'column' 'units'. Je kun hier kiezen voor eenheden in pixels, procenten en een relatieve eenheid.
Gebruik je de eenheid in pixels dan kun je de eenheden vastzetten op een bepaald aantal pixels. Dit is handig als je de frames gebruikt om lay-outtechnische redenen. Je kunt er dan voor zorgen dat alles precies in een frame past. In de andere frames zoals een top of main frame kunnen de opties margin heigth en margin width ingesteld worden. Om te zorgen dat een plaatje van 60 pixels breed precies in je frame past plaats je de margins op nul en geef je als framebreedte 60 pixels op.
Framegroottes instellen in procenten geeft het voordeel dat ze meeschalen met het browservenster zelf. Vergroot de gebruiker zijn browservenster, dan blijven de verhoudingen van de frames intact.
De relatieve instelling gebruik je voor frames die mogen schalen. Hun afmetingen worden bepaald door de frames om hen heen.
12.3.2. Het saven van frames en framesets
Als je voor de eerste keer pagina’s die je frameset vormen wil bewaren kun je het beste kiezen voor de optie file » save all frames. Dreamweaver zal je voor ieder frame en je frameset apart vragen wat voor bestandsnaam je wilt opgeven. Om duidelijk te maken over welk frame Dreamweaver het op dat moment heeft zie je op de achtergrond een arcering verschijnen om het betreffende frame.
Je kunt de frames ook apart bewaren. Het frames palet kun je dan gebruiken door het te bewaren frame te selecteren waarna je file » save frame kunt kiezen uit de menubalk.
Heb je een frame al eens bewaard maar wil je het opnieuw saven maar onder een gewijzigde naam dan is dit geen probleem, kies file » save frame as….. Zorg er dan wel voor dat je de frameset ook opnieuw bewaart. Doe je dit niet dan zal Dreamweaver je daar bij het afsluiten van het document zelf om vragen.
12.4. No frames
Sommige internetbrowsers kunnen geen pagina’s afbeelden die frames bevatten. Veelal zijn dit oudere versies van browsers die inmiddels wel frames kunnen afbeelden, zoals Internet Explorer 2.0 en lynx. Daarom is in Dreamweaver de mogelijkheid ingebouwd om een pagina aan te geven die moet worden getoond als de browser geen frames kan tonen.
Je vindt deze optie onder menu Modify » Frames » Edit No Frames Content.
Browsers die geen frames kunnen tonen kennen over het algemeen een relatief klein marktaandeel en sterven langzaam uit.
Je zal zien dat je framesetpagina weer blanco wordt als je de edit no frames content modus inschakelt. Je kunt nu de pagina bewerken zoals je gewend bent, alleen zonder gebruik te maken van frames. Let er wel op dat browsers die deze pagina te zien krijgen in plaats van je frameset ook op andere gebieden beperkt zullen zijn. Vaak kennen ze geen tabellen en al helemaal geen layers. Je kunt je dus beperken tot het weergeven van de tekst, (plaatjes worden totaal genegeerd door text only browsers) en links.
Ben je klaar dan kun je terugschakelen naar je frameset door weer dezelfde menukeuze te kiezen: Modify » Frames » Edit No Frames content. Dreamweaver bewaart de code voor de no frames content in de frameset zelf.
12.5. Eindopdracht
- Open de pagina index.htm.
- Kopieer het navigatiemenu.
- Maak een nieuwe pagina aan.
- Plak het navigatiemenu in de nieuwe pagina.
- Geef deze pagina de achtergrondkleur #660000.
- Sla de pagina op onder de naam topindex.htm.
- Kopieer de rest van de pagina index.htm.
- Maak een nieuwe pagina aan.
- Plak de tekst in deze pagina.
- Maak voor de opmaak gebruik van de externe_styles_sheet die je gemaakt hebt in hoofdstuk 8.
- Sla de pagina op onder de naam mainindex.htm.
- Maak een nieuwe pagina aan en selecteer de Top frame.
- Selecteer de Top frame en voeg in de Property Inspector achter src de pagina topindex.htm toe.
- Selecteer de Main frame en voeg de pagina mainindex.htm toe.
- Selecteer de Frameset en geef deze de naam index.htm.
- Test de pagina in de browser.
Figuur 12.6: Voorbeeld van het eindresultaat van de eindopdracht.
Disclaimer: De gratis online cursussen zijn beschikbaar gesteld en ontwikkeld door het bedrijf Learnit. Deze cursus is gratis maar mag niet gebruikt worden voor commerciële doeleinden. Dit werk is auteursrechtelijk beschermd; het auteursrecht ervan berust bij Learnit.