BOUWSTEEN 12 Het gebruik van frames 12.1 Frames als structuur voor je website Naast gebruik van inline frames kan je de structuur van je website helemaal via frames opzetten i.p.v. via tabellen. Bij tabellen gebruik je verschillende cellen die elk eigen stukjes informatie weergeven. Bij frames gebruik je verschillende webpagina's die je binnen een framesstructuur als één geheel in de browser weergeeft. Bekijk onderstaand voorbeeld. Op zich kan je hier tabellen gebruiken, maar toch werd hier een beroep op frames gedaan. Dat kan je afleiden uit de verticale schuifbalk in het centrale gedeelte van de site, al kan het hier ook om een tabellenstructuur met één inline frame gaan. 12.1.1 Framespages, framesets en frames De framespage is de pagina die je effectief in je browser opent. Deze pagina bevat geen inhoud (tekst, illustraties ), maar de indeling en verdeling van je scherm in zones. De framespage bevat een of meer framesets. Een frameset is een verzameling van frames en eventuele onderliggende framesets en bevat informatie over de grootte en de weergave van die frames. Een frame is de kleinste entiteit die verwijst naar een webpagina die standaard in het frame geopend wordt. Door een framespage te openen, open je uiteindelijk verschillende pagina's tegelijk die elk in hun eigen stukje van het scherm hun frame weergegeven worden. De structuur van onze voorbeeldpagina kan er als volgt uitzien: Het gebruik van frames 1
De hoofdframeset (3 kolommen) bevat een frame links en rechts en een nieuwe, geneste frameset in het midden.. De geneste frameset (5 rijen) bevat vier frames en in het midden nog een geneste frameset (2 kolommen) die twee frames bevat. 12.1.2 Een framespage maken Vanuit het niets een framespage maken Dreamweaver biedt keuze uit een aantal voorgedefinieerde framesets die je als basis kan gebruiken. Je bereikt het aanbod: via File > New, categorie Framesets via de uitschuifknop Frames (werkbalk Insert, tabblad Layout) via het menu Insert > HTML > Frames. Je kunt er uit meer dan tien voorgedefinieerde mogelijkheden kiezen: 2 Webdesign met Dreamweaver
Om bij het hoger aangehaald voorbeeld te blijven kies je best gewoon Fixed Left of Fixed Right om te starten. Een belangrijke hulp is het panel Frames dat je via Window > Frames of Shift+F2 activeert. Hierin zie je de twee frames in hun frameset. De buitenste zwarte rand is de hoofd-frameset. Daarbinnen zie je links een eerste frame (leftframe) met daarnaast een tweede frame (mainframe). In de frames heeft Dreamweaver telkens een nog niet opgeslagen voorlopig lege pagina geplaatst. Bekijk nu de HTML-code van de framespage in code-view. Opgelet! Klik met de muis vooraf op de rand van de buitenste frame, want anders krijg je wellicht niet de code van de framespage te zien, maar van één van de lege pagina's waarin de cursor staat. Je merkt meteen dat de hoofdtag van een framespage een <frameset>-tag is en geen <body>-tag. Dat is logisch want de framespage bevat enkel de structuur en geen inhoud. De inhoud die in de frames weergegeven wordt, komt uit andere webpagina's. Vereenvoudigd we lieten enkele attributen bij de HTML-tags weg ziet de code er zo uit: <frameset cols="80,*"> <frame src="file:///untitled-1" name="leftframe"> <frame src="file:///untitled-2" name="mainframe"> </frameset> De frameset deelt de ruimte in twee kolommen in, die respectievelijk 80 px en * breed zijn (cols="80,*"). Die 80 px is een vaste waarde (die je natuurlijk kan aanpassen door een ander getal in te typen) en het *-teken vertegenwoordigt de overige ruimte, afhankelijk van de gebruikte resolutie. Je kunt met frames inderdaad handig resolutieproblemen opvangen. Zie 12.5 verder in dit hoofdstuk. Binnen de frameset zijn twee frames voorzien, voor elke kolom één. Het eerste, linkse frame zal 80 px breed weergegeven worden. Het twee, rechtse frame neemt de rest van de beschikbare ruimte in. Bij de <frame>-tag zie je alvast twee belangrijke attributen: het src-attribuut waarmee je aangeeft welke pagina bij de start in het frame moet weergegeven worden. Dreamweaver heeft voorlopig al een lege pagina voorzien. Het gebruik van frames 3
Het name-attribuut dat aan elk frame een naam geeft. Dit attribuut gebruiken we verder bij hyperlinks. In de loop van dit hoofdstuk komen daar nog andere attributen bij. Verder zie je ook nog de <noframes>-tags met daarin wel <body>tags. Hierin kan je inhoud opnemen die weergegeven wordt door browsers die geen frames ondersteunen. Maar aangezien alle courante browsers frames ondersteunen, gaan we daar niet verder op in en laten we de <noframes>-tags leeg. <noframes><body> </body></noframes> Modify > Frameset Je kunt een (lege) pagina ook via Modify > Frameset in telkens twee gelijke frames opsplitsen, zowel horizontaal als verticaal. Het document waaruit je vertrekt al dan niet leeg wordt in het opgegeven frame geplaatst: bv. bij Split Frame Left komt het document in het linkerframe. Rond een bestaande pagina een framespage maken Je kunt ook vanuit een bestaande webpagina vertrekken om een framespage te maken. Dat kan op 2 manieren. Vanuit de keuzelijst Frames Stap 1: open de webpagina Stap 2: kies uit de keuzelijst Frames (werkbalk Insert, tabblad Layout) de gewenste framesstructuur. De framespage wordt aangemaakt en de webpagina wordt in het centrale frame geplaatst (blauw aangegeven in het pictogram). Deze werkwijze is bijzonder handig als je vooraf al over een webpagina beschikt om in het centrale frame weer te geven. Door het slepen van de Framesborder Stap 1: open de webpagina Stap 2: activeer de frameborders in Design-view via View > Visual Aids > Frame Borders. Rond de pagina verschijnt een dubbele rand. Sleep de rand naar binnen om je venster in frames op te splitsen. Hieronder zie je het resultaat na het slepen van links en van boven. 4 Webdesign met Dreamweaver
Vanuit de hoekpunten kan je met de vierpuntige pijl zelfs tegelijk horizontaal en verticaal in frames opsplitsen. 12.1.3 Aandacht bij het opslaan Vergeet niet je resultaat op te slaan. Ook dat vergt de nodige aandacht. Je moet immers niet één, maar in het uitgewerkte voorbeeld uit 12.2.1 zelfs negen webpagina's opslaan: de framespage en acht pagina's die in de frames gebruikt worden. Met de werkwijzes uit 12.2.2 moet je de pagina in het centrale frame niet meer opslaan, tenzij je de inhoud ervan zou gewijzigd hebben. Kies best File > Save All en zorg ervoor dat je in de design-view staat. Normaal geef je eerst de naam van de framespage op en daarna één voor één de namen van nieuwe, voorlopig lege pagina's die je bij de start in de verschillende frames wil weergeven. Volg de - afbakeningen op je scherm om te weten welke pagina je telkens opslaat. De voorlopige Untitled-namen van pagina's zijn nu door opgegeven namen vervangen. Soms kan je niet zo goed zien welke pagina je precies aan het opslaan bent. Geef gewoon een algemene naam in (paga, pagb ) die je achteraf dan nog kan aanpassen. Vóór het opslaan kan je in de lege frames met File > Open in Frame eventueel al bestaande pagina's openen. Nu moet je enkel nog de naam van je framespage opgeven bij het opslaan. 12.2 De framespage aanpassen Vertrekkend vanuit één van de hoger opgesomde standaardmogelijkheden kan je natuurlijk nog je framespage aan je wensen aanpassen: aantal frames, grootte van de frames, omranding, schuifbalken zijn instellingen die je nog op verschillende manieren kunt opgeven en wijzigen. 12.2.1 Framesets en frames selecteren Bij het werken met frames visualiseert het panel Frames de structuur van je framespage. Je selecteert vanuit het panel Frames als volgt: klik in een frame om dat frame te selecteren klik op de rand van een frameset om die frameset te selecteren. In Design-view kan je in je werkvenster met Alt+klik een frame selecteren. Je selectie wordt meteen visueel in het Frames-panel weergegeven. Door op de rand tussen de frames te klikken, selecteer je framesets. Het gebruik van frames 5
Ook de Tag selector in combinatie met het Frames-panel is handig om een frameset te selecteren. Hiernaast zie je drie geneste framesets. Door op de tag te klikken wordt de betrokken frameset in het Frames-panel gevisualiseerd. Tenslotte kan je ook de Code-view met het Frames-panel combineren. Afhankelijk van de cursorpositie in de Code-view visualiseert het Frames-panel waar je je bevindt. 12.2.2 Frames en framesets toevoegen en verwijderen Frames en framesets toevoegen Vaak zal je nog frames of framesets moeten toevoegen aan je basis framesstructuur. Dat kan op verschillende manieren: met Modify > Frameset > Split Frame splits je een frame horizontaal of verticaal in twee frames. Handig, maar soms krijg je complexe code. Als je bv. in een frameset van twee rijen het onderste frame horizontaal splitst, dan krijg je geen frameset van 3 rijen (hieronder rechts), maar twee framesets van twee rijen, de tweede frameset genest in de eerste frameset (hieronder midden) en dat is heel onhandig! <frameset rows="220,220"> <frame 1 src=" "> <frame 2 src=" "> </frameset> <frameset rows="220,220"> <frame 1 src=" "> <frameset rows="110,110"> <frame 2 src=" "> <frame 3 src=" "> </frameset> </frameset> <frameset rows="220,110,110"> <frame 1 src=" "> <frame 2 src=" "> <frame 3 src=" "> </frameset> sleep met de muis op de randen van je frames terwijl je de Alt-toets indrukt om extra frames toe te voegen. voeg in de Code-view op de gewenste plaats een <frame>-tag toe. Kopieer eventueel een <frame>-tag en pas de attributen aan. In het attribuut cols of rows van de betrokken frameset moet je natuurlijk ook nog de breedte (bij cols) of de hoogte (bij rows) van het nieuwe frame toevoegen. Frames en framesets verwijderen Om een frame te verwijderen sleep je de rand van het frame in Design-view tegen een aanpalend frame weg. Automatisch verdwijnt eventueel de frameset als die niet meer nodig is. Je kunt een frame in de Code-view verwijderen door de betrokken <frame>-tag te verwijderen. Vergeet niet ook nog in het cols of rows attribuut van de frameset waartoe het frame behoort de breedte (cols) of hoogte (rows) van het verwijderde frame weg te halen! 12.2.3 Formaat, omranding en schuifbalken in frames Aan een frameset en aan frames zijn eigenschappen gekoppeld die je als attributen aan de <frameset>- en <frame>-tag kan toevoegen. Gelukkig helpt de Property inspector je. Selecteer een frameset of frame om de bijhorende eigenschappen zichtbaar te maken. 6 Webdesign met Dreamweaver
Bij de eigenschappen van de frameset kan je eventueel de frameset omranden (Borders, Border color, Border width). De omrandingskleur wordt niet in alle browsers netjes weergegeven. Wil je een frameset omranden, gebruik dan beter CSS. Je krijgt ook een visuele weergave van de frames uit de frameset en je kunt die frames één voor één in de Property inspector selecteren en de hoogte of de breedte instellen in pixels, in procent of relatief. Geef je bv. voor 3 kolommen respectievelijk 3, 2 en 1 relatief op, dan neemt de eerste kolom de helft van de ruimte in, de tweede kolom één/derde en de derde kolom één/zesde. Enkel het cijfer 1, geeft vaak aan dat de rij of kolom alle resterende ruimte mag innemen. De grootte van de frames kan je ook aanpassen door de framesrand te slepen of door de getallen bij de rows en cols attributen van de <frameset>-tag in de code-view aan te passen. HTML <frameset> begrenst een frameset in een framespage ROWS aantal en hoogte van de rijen COLS aantal en breedte van de kolommen FRAMESPACING (verouderd). Zie BORDER. FRAMEBORDER omranding (yes/no/default) BORDER dikte van de rand BORDERCOLOR kleur van de rand Ook bij een frame kan je een aantal eigenschappen instellen via o.a. de Property inspector. Enkele mogelijkheden op een rijtje: in het SRC-vak wordt de pagina die standaard in het frame weergegeven wordt, opgegeven. ook op frame-niveau kan je omranding instellen. Die instellingen hebben voorrang op die op frameset-niveau. Kies je bij Borders voor Default dan neem je de instellingen van de frameset over. Ook hier geldt: gebruik liever CSS voor omranding, want niet alle browsers springen goed met die omranding van frames om. de scroll-keuzelijst bepaalt of het frame van een schuifbalk voorzien is. Er zijn 4 opties: No: geen schuifbalk. Yes: zeker schuifbalk, ook al is scrollen niet nodig Auto: automatisch schuifbalk als scrollen nodig is Default: schuifbalken worden door de browser ingesteld. als noresize niet actief is, kan de bezoeker van je site de grenzen van het frame verslepen en het frame meer of minder ruimte laten innemen op het scherm. Het gebruik van frames 7
je kunt vanuit je frame ook regelen dat de inhoud die in dat frame weergegeven wordt niet tegen de rand van het frame plakt. Met Margin width regel je de vrije ruimte links en rechts en met Margin height stel je de ruimte boven en onder in. De vrije ruimte is echter geen vrije ruimte aan de binnenkant van het frame, maar vrije ruimte in de pagina die in het frame weergegeven wordt. tenslotte is ook de Frame name in bepaalde frames heel belangrijk. Zie 12.4 Hyperlinks en frames: targets hierna. HTML <frame> voorziet een frame in een frameset SRC NAME NORESIZE pagina die in het frame wordt getoond naam van het frame (voor targetting) indien vermeld, kan de bezoeker de framerand in de browser niet slepen FRAMEBORDER rand rond frame: yes/no/default BORDERCOLOR kleur van de rand MARGINWIDTH witruimte links/rechts in inhoud frame MARGINHEIGHT witruimte boven/onder in inhoud frame 12.3 Hyperlinks en frames: targets In de meeste framespages is een frame voorzien met een menu voor navigatie, meestal links en/of bovenaan, zoals in de illustratie hieronder. Bij het klikken in het menu moet de bijhorende pagina in het centrale frame geopend worden. Als je in een frame op een link klikt, wordt de bijhorende pagina normaal in datzelfde frame geopend. Dat zou betekenen dat bij het klikken op bv. de link Nestlé Group in het voorbeeld hierboven, de bijhorende pagina in dat linkerframe geopend wordt en in de plaats van het menu komt. Daarom moet je bij gebruik van frames binnen de <a>-tag niet enkel vertellen welke pagina je wil openen (href-attribuut), maar ook waar die pagina moet geopend worden, in welk frame. Vooraf moet je daarom je frames waarin links geopend worden een naam geven: de Frame name. Bij het maken van je framespage geeft Dreamweaver normaal elke frame al een naam: mainframe, top- Frame die je natuurlijk via de Property inspector kan aanpassen. 8 Webdesign met Dreamweaver
Bij het leggen van een link vanuit een frame, geef je naast de link ook een target op: de naam van het frame waarin de pagina moet geopend worden. In de Property inspector is naast het Link-vak dan ook altijd een Target-vak beschikbaar waarin je een target kan selecteren of intypen. Aan de <a>-tag wordt het target-attribuut toegevoegd. Targets zijn hoofdlettergevoelig. <a href="groep.htm" target="mainframe">nestlé Group</a> Normaal moet je dus bij elke link een target opgeven. De kans is heel groot dat dit bij elke menukeuze dezelfde target is, namelijk die van het centrale frame. Via Insert > HTML > Head Tags > Base kan je in de Target-lijst een standaard-target voor een pagina kiezen. In de HEAD-sectie van de pagina wordt een <base>-tag toegevoegd die dan de standaard-target bevat. Je moet echter nog manueel ingrijpen in de code-view en het HREF-attribuut verwijderen om een goede werking te verzekeren. <base href="" target="mainframe"> Je hoeft nu bij je links vanuit dat frame geen target meer op te geven, want de pagina's worden automatisch in het opgegeven standaardframe geopend. Natuurlijk kan je nog een target opgeven als je van de standaard target wil afwijken. Speciale targets Vaak komen ook links naar andere sites voor en dan is het natuurlijk niet de bedoeling dat die links in een frame van je eigen site geopend worden. Daar zijn ze immers niet voor gemaakt. Enkele oplossingen: _blank _parent _self _top opent de link in een nieuw browservenster. Sluit het browservenster na bezoek. De site waarvan je vertrok is nu weer in het ander browservenster beschikbaar. opent de link in de parent frameset en bij afwezigheid ervan in het volledige browservenster opent de link in het frame waarin de link gelegd wordt (standaard) opent de link in het volledige browservenster. Klik in je browser op de knop Vorige om terug te keren naar je uitgangspunt. De Go To URL behavior De Go To URL behavior hebben we als voorbeeld in 11.2 gebruikt en ook al toegepast in een oefening. Wanneer gebruik je deze behavior om een link te leggen, als dat ook met de <a>-tag in HTML kan? Eerst en vooral kan je met Go To URL een andere event dan het klikken gebruiken, bv. onmouseover, om een pagina te openen. Het gebruik van frames 9
Daarbovenop heel interessant als je met frames werkt, is de mogelijkheid om met één klik verschillende pagina's elk in een ander frame te openen. Je kunt immers per frame een (andere) URL opgeven die geopend wordt als de event zich voordoet. Frames waaraan een URL gekoppeld is, herken je in de lijst Open in aan de asterisk (*). 12.4 Frames en resolutie Je kunt handig met frames omspringen om je website zowel op 1024 x 768 als op 800 x 600 pixels netjes weer te geven. Voorzie links, rechts, boven en onder een frame waarvan je de breedte (links/rechts) en de hoogte (boven/onder) relatief instelt: *. Een voorbeeld. In die vier frames die de eigenlijke site omranden, kan je vier keer dezelfde lege pagina als bron gebruiken. Eventueel kan je die pagina een achtergrondkleur meegeven als je een gekleurde boord wil. Binnen die 'flexibele' boord waarvan de breedte door de gebruikte resolutie bepaald wordt, komt dan de eigenlijke site, in ons voorbeeld een banner boven en een menu links. In de eigenlijke site werk je dan met vaste afmetingen die binnen 800 x 600 resolutie perfect passen: hier 780 x 460. Verticaal moet je rekening houden met de verloren ruimte in de browser door titelbalk, menubalk, werkbalken Voor de uitwerking van dit voorbeeld gebruik je drie framesets: Frameset 1: drie kolommen: cols="*,780,*" Frameset 2 in de middenste kolom: 4 rijen: rows="*,60,400,*" Frameset 3 in de derde rij: 2 kolommen: cols="130,*" Bekijk je de site in 1024 x 768 resolutie, dan wordt die door een ruime bufferboord omgeven (zie hieronder links). In 800 x 600 resolutie is die bufferboord nagenoeg helemaal verdwenen. De eigenlijke site krijg je wel nog volledig te zien. 10 Webdesign met Dreamweaver
Resolutie 1024x768 met bufferruimte Resolutie 800x600 Opteer je voor een witte bufferruimte, dan baken je de eigenlijke site best met een boord af. Gebruik hiervoor eventueel een CSS-class. Het gebruik van frames 11