Layers

Een layer in een zwevend object in de webpagina, dat alle gebruikelijke elementen kan bevatten.
Je kunt een layer op een willekeurige positie in je documentvenster plaatsen, zelfs over andere elementen heen.
Met layers kun je dynamiek aan je pagina toevoegen, aangezien layers zichtbaar en onzichtbaar gemaakt kunnen worden en gebruikt kunnen worden in combinatie met behaviours. Daarnaast bieden layers veel mogelijkheden voor layout van de pagina.
Het nadeel van layers is dat ze op je webpagina vaak op een iets andere plaats komen te staan dan je in dreamweaver aangeeft. Ook kan dit per browser nogal verschillen. Het is dan vaak een kwestie van schuiven en proberen en steeds testen in je browser(s).

Je kunt een layer op verschillende manieren maken:

Selecteer het Draw Layer-object in het Objectspalet en sleep een rechthoekig kader in het documentvenster. Dit kader is de nieuwe layer.
De tag voor de layer wordt in de html-code toegevoegd direct na de body-tag.
Als je een layer wilt maken in een al bestaande layer (nesten), dan moet je met het Draw Layer-object een kader slepen bovenop de bestaande layer met de ctrl- (windows) (in DW4 is dit de alt-toets) of de command- (mac) toets ingedrukt.
Sleep het Draw Layer-object vanuit het Objectspalet naar het documentvenster.
De layer èn de tag voor de layer worden gegenereerd op een vrije karakterpositie van de pagina.
Plaats de cursor op de plek waar je de layer wilt hebben en selecteer Insert-menu>Layer.
Op de plek van de cursor worden de layer èn de tag gegenereerd.

Als je de laatste twee manieren gebruikt, dan wordt er een layer gemaakt met de standaardinstellingen (zie: Edit>Preferences>Layers).

Je kunt de layer vervolgens aanpassen door hem te selecteren in het layers-panel, de <div>tag in de tag-selector te selecteren, of door te klikken in het vierkantje linksboven aan de layer en vervolgens de gewenste instellingen te maken in de properties-inspector.

Je kunt de layer verplaatsen door, na hem te selecteren, op de pijltoetsen te klikken (1 keer klikken = 1 pixel verplaatsen) of dit met met shift ingedrukt te doen (1 keer klikken = 5 pixels verplaatsen). Ook kun je hem verslepen met je muis in het handle-tje (vierkantje linksboven aan de layer). Als de layer dan steeds ongewild naar een bepaalde plaats toe trekt, kijk dan even of je 'Snap to Grid' (view>grid>snap to grid) aan hebt staan. Zo ja; deactiveer deze optie.

In de properties-inspector kun je voor de layers de gebruikelijke instellingen maken, zoals hoogte en breedte van de layer, achtergrondkleur of -image.
Daarnaast zijn er nog enkele specifieke properties voor layers:

Layer ID: Geef hier een unieke naam op voor elke layer.
tag (DIV, SPAN, LAYER, ILAYER): De verschillende tags die in de html-code kunnen worden gebruikt om de layer te genereren. De laatste twee, LAYER en ILAYER, zijn bedoeld voor Netscape-layers. Deze zul je niet vaak gebruiken.
In DW wordt de <DIV>tag standaard gebruikt. Je kunt dit veranderen in de Preferences.
L en T: Hier kun je in pixels de locatie van de layer opgeven, waarbij L staat voor left (de afstand tussen de linkerzijde van de layer en de linkerkant van het documentvenster) en T voor top (afstand vanaf de bovenkant van het doc.venster).
Je kunt hier ook negatieve waarden opgeven.
Z-ind: Bepaalt de positie van de layer in de stapelvolgorde, waarbij layers met een hogere z-index bovenop layers met een lagere z-index komen.
Vis (visibility): Bepaalt of de layer zichtbaar of onzichtbaar is.
De optie Inherit geldt voor geneste layers; neemt de visibility over van de 'parent'.
Overflow: Hier geef je aan wat er moet gebeuren als de inhoud van de layer groter is dan de gedefinieerde hoogte en breedte van de layer:
- visible; maakt de layer groter zodat alles past.
- hidden; zogt dat alles wat buiten de gedefinieerde layer valt wordt 'afgeknipt.'
- scroll; voegt rechts en links scrollbars in, of de inhoud nou wel of niet in de layer past.
- auto; laat een scrollbar verschijnen als de inhoud van de layer niet binnen de gedefinieerde afmetingen past.
Deze laatste twee opties werken niet in Netscape voor versie 7 (in oudere Netscape geen scroll).
Clip: Hier geef je het gedeelte van de layer aan dat zichtbaar is. De waarden (L en T) die je hier op kunt geven zijn gerelateerd aan de linkerbovenhoek van de layer.

Voor Netscape is een apart soort layers ontwikkeld, dat gebruik maakt van <layer>- en <ilayer>tags. Deze werken echter alleen in Netscape. Standaard worden in DW de <div>- en <span>layers gebruikt (standaard=<div>)
Als je in Netscape het browservenster vergroot of verkleint, dan wordt de positionering van de layer verstoord. Een reload van de pagina zorgt dan weer voor de juiste positionering van de layers.
Gebruik de Add/Remove Netscape Resize Fix (commands>add/remove netscape resize fix) om automatisch een reload uit te laten voeren als het formaat van het browservenster wordt gewijzigd (Let op: de Netscape Resize Fix werkt niet in Netscape op de Mac, wanneer het commando gebruikt wordt in een frame van een frameset!!). Je kunt de resize fix ook automatisch laten genereren door dit in te stellen in de preferences.
Verder wordt de positionering van tekst in layers verstoord als je in Netscape het browservenster verkleint. De layer wordt hoger en smaller gemaakt (ondanks vast opgegeven hoogt en breedte) en de tekst loopt over meerdere regels. Reloaden van de pagina helpt hier niet.
Oplossing: Plaats de tekst in de layer in een tabel met vaste hoogte en breedte en met border, cellspace en cellpad op 0.
Een CSS-layer laat nooit een scrollbar zien in oudere versies van Netscape (vanaf ns7 wel), ookal stel je het Overflow-attribuut van de layer op scroll of auto.

Er zijn verschillende behaviours die je kunt gebruiken om layers te manipuleren:

Show-Hide Layers; in het pop-up venster dat verschijnt kun je aangeven welke layers er getoond dan wel verborgen moeten worden.
Als event hierbij kun je b.v. denken aan een onMouseOver of onClick voor een button.
Drag Layer:
Deze action geeft de gebruiker de mogelijkheid in de browser een layer te verplaatsen.
Je kunt hierbij een aantal parameters aangeven, bv hoe de layer verplaatst kan worden (alleen horizontaal, alleen verticaal), je kunt een zgn. drop target aangeven en een snap-marge (het aantal pixels dat de layer van het drop target af mag zijn om naar het target te 'snappen').
Het is ook mogelijk om een javascript te laten uitvoeren na of bij het verplaatsen van de layer; deze instellingen maak je in de advanced-tab van het parametersvenster van de DragLayer action.
Je kunt de DragLayer action het best aan de body van je document hangen. Het script van de action moet namelijk geladen zijn vóórdat de gebruiker de layer probeert te verplaatsen.
Je kunt deze actie niet gebruiken met onMouseDown of onClick events.
Set text > Set text ofLayer:
Hiermee kun je de tekst in een layer veranderen. Typ in het dialoogvenster de tekst en evt. html-code in die getoond moet worden bij het activeren van deze action.
Op de nevenstaande knop 'Set text' zijn twee setText-actions gedefinieerd, met als events onMouseOver en onMouseOut.

Drag
Layer!

Voor het layouten van een layer staan je dezelfde middelen ter beschikking als in de rest van je document.
Voor een nauwkeurige layout kun je, als gewoonlijk, het beste gebruik maken van tabellen. Let hierbij op de verhouding tussen de afmetingen van de tabel en de afmetingen van de layer (in combinatie met het overflow-attribuut). Als je een achtergrondkleur hebt gegeven aan de layer, kun je de tabel het beste ook deze achtergrondkleur geven, tenzij je daar natuurlijk juist mee wilt spelen.

Verder bevat DW een aantal commando's voor plaatsing en uitlijning van elementen, te vinden onder Modify>Align (in DW4). Om een aantal elementen ten opzichte van elkaar te lijnen, selecteer je eerst deze elementen (bij layers kun je dat gemakkelijk doen in het layers-panel, door met de shift-knop ingedrukt verschillende layers te selecteren) en kiest vervolgens het gewenste commando. Het laatst geselecteerde element geldt hierbij als referentie.
Op dezelfde manier kun je gebruik maken van de commando's 'Make Same Width' en 'Make Same Height'.

Ook de commando's 'convert layers to tables' en 'convert tables to layers' kunnen van toepassing zijn bij het layouten. Deze optie geldt alleen voor de gehele pagina, niet voor afzonderlijke layers of tabellen.
Let op layers die elkaar overlappen als je naar een tabel omzet!
In het layers-panel vind je, bovenin, de optie 'Prevent Overlaps'. Vink deze optie aan als je layers aanmaakt die je naar een tabel wilt omzetten. De optie 'Prevent Overlaps' vervalt overigens als je layers op een bepaalde manier aanmaakt of bewerkt (als je aanmaakt via insert>layer en als je waarden intoetst in de properties-inspector of aanpassingen doet in de html-code).