10. Layers
10.1. Inleiding
Het is in Dreamweaver relatief eenvoudig om met tabellen de opmaak en de layout van webpagina's te maken. Toch kent het werken met tabellen zijn beperkingen, als het gaat om het opmaken van pagina's. Dat komt niet doordat HTML niet goed functioneert. Integendeel Tabellen zijn oorspronkelijk niet bedoeld om layout van webpagina's te maken, maar om gestructureerd gegevens weer te geven.
Layers zijn juist wel specifiek bedacht om de vormgeving van een webpagina te verbeteren. Met layers kun je heel specifiek aangeven waar afbeeldingen moeten komen, waar tekst moet staan en in welke volgorde. Maar om bij het begin te beginnen, wat zijn layers nu eigenlijk?
10.1.1. Container
Een layer is niets meer dan een container voor HTML code. Je kunt een layer zien als een mini webpagina, die je overal binnen een pagina kunt neerzetten. Maar layers kunnen meer.
- Layers kunnen over elkaar heen geplaatst worden, zodat er ‘diepte' ontstaat in de pagina.
- Layers kunnen “onzichtbaar” gemaakt worden. Dit is handig indien je de inhoud van een layer pas zichtbaar wilt maken nadat je bezoeker iets gedaan heeft (bijvoorbeeld geklikt heeft op een knop).
- Layers kunnen worden geanimeerd of versleept worden, zodat de inhoud over de pagina beweegt.
- Layers kunnen zoals eerder gezegd, absoluut gepositioneerd worden op de pagina.
In Dreamweaver kun je layers gewoonweg op de pagina tekenen.
Oefening 10.1. Tekenen van een layer
- Open een nieuwe lege pagina.
- Open het Object Pallet, en selecteer het layout gedeelte.
- Klik op de knop
Draw Layer, de muisaanwijzer verandert in tekenkruis. - Klik ergens op de pagina en teken een layer.
Figuur 10.1: Illustratie getekende layer
Je hoeft je niet echt zorgen te maken over hoe precies je dit doet. Je kunt de afmetingen en de plaats later nog gemakkelijk aanpassen.
Na het tekenen van de layer, kun je direct beginnen met het toevoegen van de inhoud. Ieder pagina element kan in de layer worden ingevoegd. De inhoud begint altijd precies links bovenaan de rand van de layer.
Oefening 10.2. Trucjes met layers
- Gebruik de layer die je net hebt aangemaakt.
- Voeg een tabel toe.
- Gebruik de Property Inspector om de tabel 1 rij bij 1 kolom te maken en de breedte op 100 % te zetten.
Figuur 10.2: Een tabel in een layer
10.1.2. Property Inspector
De waardes van de layer kun je opgeven in de Property Inspector. Op die manier ben er van verzekerd dat de layer er ook precies zo uitziet, als je wilt. De Property Inspector biedt je ook de mogelijkheid om foutjes die je gemaakt hebt bij het tekenen van de layer te verbeteren.
Figuur 10.3: De eigenschappen die ingesteld kunnen worden voor Layers in de Property Inspector
| Tabel 10.1: Uitleg van de termen in Property Inpector voor Layers. | |
|---|---|
| Nummer | Omschrijving |
| Naam layer ID | Naam van de layer. Belangrijk omdat je er later naar kunt gaan verwijzen. |
| L (verticale afstand) | De afstand van de linkerbovenhoek van de layer tot aan de bovenrand van de pagina. |
| T (horizontale afstand) | De afstand van de linkerbovenhoek van de layer tot aan de zijrand van de pagina. |
| W (breedte) | De breedte van de layer. |
| H (hoogte) | De hoogte van de layer. |
| Z-Index | De volgorde waarin de layers op elkaar liggen. Hoe lager het cijfer, hoe dieper de layer in de pagina ligt. Layers met een hogere waarde voor de z-index liggen over layers met een lagere waarde. |
| BG Image | Achtergrond plaatje. |
| BG Color | Achtergrondkleur. |
| Clipping | Hiermee kun je een gebied binnen de layer aangeven dat zichtbaar moet zijn. L (left), T (top), R (Right) en B (Bottom) worden gebruikt om de coördinaten aan te geven en de grote van het zichtbare vierkant. |
| Overflow | Hiermee geef je aan wat er moet gebeuren als de inhoud van de layer groter is als het opgegeven gebied. Visible: geeft aan dat de layer zo groot moet worden als de inhoud, zodat alles zichtbaar is. Hidden: zegt dat het te grote gedeelte onzichtbaar moet zijn. Scroll: geeft aan dat er scrollbalken moeten komen om naar de inhoud te scrollen. Auto: geeft aan dat er pas scrollbalken moeten komen als de inhoud buiten het aangegeven gebied valt. |
| VIS | Hiermee geef je aan of de layer zichtbaar is in de browser. Je kunt de layer later weer zichtbaar maken met behaviours. Zo kun je verassende effecten creëren. Inherit: geeft aan dat de layer de zichtbaarheid overerft van de moederlayer (waarin hij zich bevindt). Visible: geeft aan dat hij zichtbaar is. Invisible: geeft aan dat hij onzichtbaar is. Default: is de standaardwaarde zichtbaar. |
10.1.3. Z-index
De Z-index van een layer heeft te maken met het niveau waar de layer op ligt. Hierdoor wordt het mogelijk om de inhoud van de layers te laten overlappen. Een Layer met de Z-index van –1 ligt onder een layer met een Z-index van 3. Die ligt weer onder een Layer met een Z-index met de waarde 5. Zo is het dus mogelijk om objecten te laten overlappen.
10.1.4. Layers palette
In het layers palette kun je snel zien welke layers er op de pagina staan. De naam van de layer wordt er weergegeven en de layers worden automatisch gesorteerd op de waardes die de z-index heeft. Je kunt deze waardes gemakkelijk aanpassen. Verder biedt het layers palette je de mogelijkheid om de visibility (zichtbaarheid) van de afzonderlijke layers eenvoudig aan te passen.
Figuur 10.4: Layers Palet
Oefening 10.3. Het gebruik van het Layers palet
- Open het layers palette door in de menubalk de menuoptie Window, Layers te kiezen.
- Voeg een tweede layer toe onder de layer die je in oefening 10.1 aangemaakt hebt, zoals hieronder.
Figuur 10.5: Voorbeeld van twee layers
- Klik op de eerste layer om de z-index (volgorde) te wijzigen, geef layer 1 de waarde 1 en layer 2 de waarde 2.
- Door vóór de layer te klikken maak je de layer invisible (onzichtbaar). Er staat dan een gesloten oogje voor de naam van de layer. Door nogmaals te klikken maak je de layer visible (zichtbaar). Er staat dan een open oogje voor de naam van de layer. Met een laatste klik zet je de layer weer op de standaardwaarde.
- Door een enkele klik op de naam van de layer, kun je de naam wijzigen.
- Geef de eerste layer de naam: Navigatie en de tweede layer de naam: Body. Je kunt ervoor zorgen dat layers niet over elkaar heen geplaatst worden. Dit is vooral handig als je wilt voorkomen dat teksten over elkaar gaan lopen. Om dit te voorkomen moet je dan wel vierkantje prevent overlaps aan vinken.
10.2. Browser ondersteuning
Layers bieden veel meer mogelijkheden dan tabellen. Toch worden layers nog niet overal gebruikt. Dat komt doordat sommige browsers layers nog niet volledig ondersteunen. Daardoor wordt het uiterlijk onvoorspelbaar, en de kracht van layers ligt juist in de nauwkeurigheid. De nieuwste browsers ondersteunen het gebruik van layers heel goed.
Dreamweaver ondersteunt alle browsers die layers ondersteunen. Voor het gebruik van Netscape Layers is het zelfs mogelijk om speciale
De verschillende browsers zorgen altijd voor een verschillende interpretatie van de HTML code. Tot op heden is het gebruiken van layers een moeilijk punt geweest. Layers bieden erg veel voordelen, maar niet alle opties worden ondersteunt door alle browsers. Daar moet je dus extra op letten tijdens het maken van je pagina's.
Je kunt (tot op zekere hoogte) het design dat je hebt gemaakt in layers, laten converteren naar het design in tabellen. Dreamweaver heeft hiervoor een speciale optie. In het menu Modify > Convert > Layer to Table... vind je de optie. Er opent zich een venster met opties. Een nadeel van deze methode is dat de conversie niet altijd slaagt. Met name opties die niet door tabellen ondersteund worden, worden niet goed geconverteerd. Dit gebeurt vooral als layers over elkaar heen geplaatst zijn. Het is dus aan te raden om het vakje prevent overlaps aan te vinken in het Layers Palette, als je van plan bent om deze optie te gebruiken.
Hoe eenvoudig je het ontwerp voor je webpagina ook houdt, het is aan te bevelen om regelmatig het resultaat te testen in verschillende webbrowsers. Vooral oudere versies van Netscape kunnen een probleem vormen.
10.3. Behaviours voor layers
We hebben gezien dat je layers kunt verbergen (hidden) en zichtbaar (visible) kunt maken. Zo op het eerste gezicht lijkt dit misschien een nutteloze optie. Waarom zou je layers die je niet wilt zien, toch maken? Het antwoord is te vinden in DHTML behaviours.
Dreamweaver biedt namelijk de mogelijkheid om de gebruiker te laten beslissen welke layers zichtbaar zijn, en welke onzichtbaar. Je kunt daarmee bijvoorbeeld extra uitleg geven als de gebruiker met zijn muis over een link beweegt. Je laat dan de layer met de uitleg zien (visible) als de gebruiker zijn muis over (onMouseOver) een woord of plaatje beweegt. De situatie herstel je als hij zijn muis er weer vanaf haalt.
Maar Dreamweaver kan meer met behaviours. Behalve rollovers kun je complete layers verplaatsen en verslepen over het scherm. Of je kunt de inhoud van de layer veranderen.
Figuur 10.6: Het Behaviours paneel
Oefening 10.4. Behaviours voor Layers (rollover)
- Open het Layer en het Behaviours palet. Kies in de menubalk voor de menuoptie Window.
- Kies vervolgens Layer en herhaal deze twee stappen voor het Behaviours palet.
- Plaats in de Navigatie layer drie de de afbeelding djs-background.jpg in. Pas de breedte van de afbeelding zo aan dat er precies drie afbeeldingen naast elkaar passen.
- Open de pagina house.htm, selecteer daar de subkop techno en de bijbehorende alinea. Kopieer deze tekst en plak deze in de tweede layer, de Body layer.
- Maak in het layer palet de Body layer onzichtbaar.
- Selecteer het eerste plaatje in de Navigatie layer, en klik op het +-teken van het behaviourspanel.
- Een lijst van opties wordt getoond. Kies de optie Show-Hide layers. Hier kun je aangeven welke layers er zichtbaar moeten worden, en welke er eventueel onzichtbaar moeten worden. Selecteer de layer”Body” druk op Show en daarna op OK.
10.7: (on)zichtbaar maken van layers
- In het behaviours panel verschijnt een regel met de behaviour die je net hebt ingevoegd. Klik op het pijltje dat naast OnLoad staat. Kies uit de lijst OnMouseOver. Dit betekent dat de Body layer zichtbaar wordt als de gebruiker met zijn muis over het plaatje beweegt. Door te dubbelklikken op de tekst, kun je nog wijzigingen aanbrengen.
- Herhaal stap 4 tot en met 6, maar kies voor de tweede afbeelding in plaats van Show nu voor Hide. En voor de derde afbeelding Show en OnMouseOut uit de lijst.
- Preview in een browser en test de rollovers.
Oefening 10.5. Behaviours voor Layers (slepen).
- Maak een nieuwe pagina aan met 4 layers zoals hieronder.
- De gebruikte afbeeldingen zijn john_coltrane.jpg, josephine_baker.jpg en miles_davis.jpg te vinden in de map Cursus Dreamweaver, Images, Jazz.
Figuur 10.8: Voorbeeld pagina met layers
- Kopieer de subkop en de alinea van Klassieke jazz van de jazz.htm pagina.
- Selecteer de Body tag in de tagselector in de Dreamweaver statusbalk.
- Klik op de knop + in het Behaviours panel en kies Dray layer, het venster wordt geopend.
Figuur 10.9: Venster Drag Layer
- Selecteer Layer 2: afbeelding john_coltrane.jpg
- Selecteer Constrained in het vervolgkeuze menu Movement. Er verschijnenen vier vakken waarin de pixelwaarden van de coordinaten van een gebied kunnen worden ingevoerd.
- Up: 50
- Down: 400
- Left: 450
- Right: 50
- Klik op OK om de wijzigingen op te slaan
- Nu gaan we de doellocatie, de exacte locatie waar de afbeelding naar toe moet worden verplaatst vastleggen.
- Selecteer layer 2, sleep deze layer 1 in. Plaats layer 2 in de linkerbovenhoek zoals hieronder.
Figuur 10.10: Voorbeeld doellocatie afbeelding John Coltrane
- Selecteer de body tag, zodat alle Layers geselecteerd zijn.
- Dubbelklik op de drag layer in het Behaviours panel.
- Klik op de knop Get Current Position, de waarden left en Top worden automatisch ingesteld. Het vakje Snap if within wordt automatisch aangevinkt.
- Klik op OK.
- Selecteer Layer 2 en zet deze weer op zijn oorspronkelijke plaats.
- Geef de pagina de naam Layer2.htm.
- Bekijk de pagina in de Browser. Als het goed is kun je in de browser de afbeelding van John Coltrane verplaatsten.
Oefening 10.6. Tekst veranderen
- We gaan nu aan de andere twee layers, layer 3 en 4 Behaviours toevoegen.
- Open de jazz.htm pagina. Kopieer de tekst van de subkop Inleiding en de bijbehorende alinea.
- Selecteer het layer 3.
- Klik op het +-teken in het behaviourspanel. Kies Set text > set text of layer.
- Er opent zich een venster waarin je de layer, en de text kunt specificeren. Selecteer layer 3.
- Selecteer de layer “Layer 3”
- Ga met de cursor in het veld achter New HTML staan en druk op Ctrl + v. De tekst die je zonet gekopieerd hebt van de jazz.htm pagina wordt toegevoegd.
Figuur 10.11: Venster voor tekst toevoegen aan een layer
- Kies uit het lijstje met events, dan OnMouseOut.
- Test de pagina in een browser. Je ziet de tekst veranderen in de layer.
- Selecteer Layer 4.
- Klik op het +-teken in het behaviourspanel.
- Kies uit het dropdown menu de optie Swap Image.
Figuur 10.12: Venster voor maken van een Swap Image
- Selecteer de afbeelding 1billie.jpg uit de map Images, jazz.
- Druk op OK.
- Kies uit het lijstje met events, dan OnMouseOver.
- Test de pagina in de browser.
Tip: Je kunt ook HTML code gebruiken als tekst, en er dus een plaatje in zetten of het plaatje veranderen in een layer.
10.3.1. Belang van de browser
De behaviours zijn zeer geavanceerde opties en worden lang niet allemaal door iedere browser ondersteunt. Het is verstandig om te bepalen welke browsers je pagina's moeten kunnen bekijken. Zo kun je zorgen dat de pagina's in ieder geval in die browsers goed werken. Je geeft dan aan dat je alleen die behaviours wilt gebruiken.
Kies uit het behaviours panel het +-teken. Kies Show Events for > en kies de browsers die je wilt gaan bedienen. Een algemene keus is 4.0 versies van browsers en hoger. Je beperkt het aantal opties dan niet te erg, maar hebt nog voldoende keuze over.
We hebben gezien dat we layers kunnen gebruiken om plaatjes, tabellen, tekst en andere elementen zeer precies op de pagina te positioneren. Je kunt dus letterlijk elk onderdeel dat je binnen Dreamweaver kunt toevoegen aan je pagina, ook toevoegen aan een layer.
We kunnen layers gebruiken om de layout te maken van een pagina. We kunnen zelfs het layer ontwerp als basis gebruiken voor een tabellen ontwerp. Dat heeft als voordeel dat veel meer browsers tabellen kunnen gebruiken. Tabellen geven ons weliswaar iets minder vrijheid in het positioneren van elementen, maar het aantal browsers dat tabellen ondersteunt is vele malen groter. De kans dat een bezoeker je pagina's dus niet goed kan bekijken wordt dan kleiner.
Layers vormen soms nog een probleem. De nieuwste browsers, zoals Netscape 6, Opera 6 en Internet Explorer 5, zijn over het algemeen goed in het omgaan met layers, maar de wat oudere browsers (Netscape Communicator) geven soms nog wat problemen. Het is dus aan te raden na te gaan welke browsers er door jouw doelgroep het meeste gebruikt worden.
Met behulp van behaviours kunnen we interactieve animaties maken en andere spectaculaire features op de pagina's zetten. Dat schept een hoop mogelijkheden. Hoewel Flash veel meer mogelijkheden biedt voor het creëren van interactieve animaties, is er toch zeker zeer veel mogelijk.
10.4. Eindopdracht
- Maak een nieuwe pagina aan met drie layers, zoals in figuur 10.13.
Figuur 10.13: voorbeeldpagina klassieke muziek met 3 layers
Maak gebruik van de volgende gegevens: - Layer 1 krijgt de naam menu, Layer 2 titel en Layer 3 content.
- Voer in layer menu een tabel van 1 rij en 5 kolommen.
- Selecteer de tabel en geef in de Property Inspector aan, dat de tabel zonder rand moet worden weergegeven.
- Selecteer de map cursus Dreamweaver, images, klassieke muziek.
- Kies voor kolom 1 de afbeelding barok.gif, kolom 2 classicisme.gif, kolom 3 romantiek.gif en voor 4 20e_eeuw.gif en 5 moderne_muziek.gif.
- Ga naar de map webteksten en op het document klassieke muziek.
- Selecteer de tekst die over barok gaat.
- Ga terug naar Dreamweaver en selecteer de afbeelding barok.gif, kies in het paneel Behaviours voor Set text of layer.
- Kies in het dropdownmenu voor layer :”content” , ga in het vak voor HTML staan en toets de combinatie CRTL+v. Druk op OK.
- Voeg het element onmouseout toe aan deze Behaviour.
- Herhaal de stappen 3-9 voor de andere afbeeldingen.
- Selecteer layer Titel en voeg een Flash tekst in. (Insert, media, flash text).
- Typ de tekst “ Klassieke Muziek”, grootte 36, font: century gothic, achtergrondkleur: #660000 en rollover color: #66FFFF. Laat de tekst rechts uitlijnen.
- na uitvoeren van de opdracht zou de pagina ongeveer netzo uit moeten zien als in figuur 10.14.
- Bewaar de pagina onder de naam eindopdrachth10.htm.
Figuur 10.14: Voorbeeld 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.