Globale linker
Dreamweaver
- Intro
- Site-management
- FTP
- Arbeids-området
- Tekst
- Bilder
- Tabeller
- Celler
- Kommentarer
- Invisibles
- Pageproperties
- HTML styles
- Rollovers
- Library items
- Frames
- Layers
- Timeline
- Stylesheets 1
- Stylesheets 2
- Stylesheets 3
<layers>
Et Layer er en container eller beholder som kan inneholder de fleste HTML-elementer. Skal du gjøre sidene dynamiske, får du en høyere grad av kontroll og fleksibilitet ved å bruke layers. Layers ble laget for å gi web-designere den samme grad av kontroll og fleksibilitet som man har innen tradisjonell print.
Layers kan du plassere oppå hverandre, du kan gjemme layers og vise de fram igjen, eller de kan flytte seg i en slags animasjon over skjermen, ved hjelp av Timelines. Du kan for eksempel ha et layer som inneholder bakgrunnsfarge, mens et overliggende ett inneholder tekst. Alt dette kan gjøres med bruk av layers i Dreamweaver, uten å måtte kunne hverken HTML- eller JacaScriptkoding.
En ulempe med layers er at de ikke er så godt støttet i eldre browsere. Kun IE4/NS4 og høyere støtter Layers, men ikke alltid like konsekvent som man skulle ønske. Netscape lagde taggen LAYER, men den støtter ikke IE. Windows lagde taggen ILAYER, men den støtter ikke NS. Så det har blitt vanlig å bruke DIV-taggen, med CSS, for å simulere noe begge browsere støtter.
<div id="Layer1" style="position:absolute; left:320px; top:300px; width:348px; height:278px; z-index:1"> Innhold </div>
Innholdet i layeret plasseres mellom div-taggene.
For at alle skal kunne se sidene dine er det kanskje best å lage en versjon med layers og en versjon med tabeller. Dette kan gjøres i DW ved å konvertere layerne til tabeller. Se ellers den ypperlige hjelpefilen i Dreamweaver for ytterligere informasjon. Sjekk også hva Dreamweaver Exchange kan tilby av extensions.
Layers setter man inn i en side ved hjelp av «Draw Layer» knappen i verktøypaletten. Klikk på knappen, flytt musepekeren ut i arbeidsområdet og trekk opp en firkant.
Vil du flytte på layeret, markerer du det slik at det ser ut som det ved siden av, og bruker piltastene eller tar tak i den lille boksen på toppen av layeret med musepekeren.
Et layer kan inneholde hva som helst, html-kode, tekst, bilder, tabeller, layers, ja alt du kan tenke deg (ikke sjokolade,da).
Layere kan brukes til å plassere design-elementer med pixelpresisjon på siden.
Det er tre viktige paletter når det gjelder layere; layers paletten, Timeline Paletten og Properties Inspector'en.
 |
 |
|
 |
  |
|
I Layers Paletten organiserer du layerne dine. Ved å klikke på et layers navn og flytte det oppover eller nedover i hierarkiet, bestemmer du Z-index'en til layerne. (tenk deg en kort stokk, det øverste kortet har z-index 52, det nest øverste har z-index 51, osv til det nederste som har z-index 1.)
Klikker du i visibility-feltet bestemmer du om layeret skal være synlig (øye som ser) eller ikke (øye som er lukket).
Merk av i Prevent Overlaps hvis du senere skal konvertere layerne til tabeller. (Modify > Convert > Layers to Tables).
 |
 |
 |
 |
 |
||
 |
 |
 |
 |
|||
 |
 |
 |
 |
 |
||
 |
 |
 |
 |
 |
 |
|
I Properties Inspectoren setter du attributtene til layeret du har markert. I Tag-feltet bestemmer du hvilken tag du skal bruke for layeret, og som jeg har sagt tidligere - bruk DIV.
I Overflow-feltet bestemmer du hva som skal skje med layeret om du har mer innhold enn layeret kan vise. Med «visible» utvider layeret seg og viser alt innholdet, med «hidden» beholder layeret sin størrelse og innholdet blir kuttet. Med «scroll» får du scrollbarer i layeret, og med «auto» får du scrollbar hvis det er nødvendig.
Du kan også bruke Layers til å lage hele designet ditt. Trekk ut Layere etterhvert som du trenger å plassere nytt innhold. Når du har plassert alt på siden ved hjelp av Layers, kan disse konverteres til tabeller. Dette gjør du ved å velge Modify > Convert > Layers to Tables.
I «Table Layout» lønner det seg å velge «Smallest, Collapse Empty Cells Less than» og sette en pixelverdi. Denne pixelverdien angir hvor langt det skal være mellom layerne før mellomrommet skal behandles som en egen celle. Velger du «Most Accurate», vil du høyst sannsynlig få en hel haug med tomme celler, hvis du ikke har vært extremt nøyaktig når du lagde alle layerne
I Clip-feltene bestemmer du hvilken del av layeret som skal være synlig. Du kan altså vise kun en del av hva layeret faktisk inneholder. L=left, R=right, T=top og B=bottom. Verdiene du skriver inn her definerer avstanden fra layerets kant.
L bestemmer avstanden i pixler fra den venstre kanten av layeret til venstre kant av beskjæringen.
R bestemmer avstanden i pixler fra den venstre kanten av layeret til høyre kant av beskjæringen.
T bestemmer avstanden i pixler fra toppkanten av layeret til toppkanten av beskjæringen.
B bestemmer avstanden i pixler fra toppkanten av layeret til bunnkanten av beskjæringen.
Vær oppmerksom på at Netscape ikke gjenkjenner noen av Overflow og Clipping koordinatene når du bruker DIV-taggen. Husk alltid å sjekke siden du lager i så mange browsertyper som mulig.
Nå skal det også sies at det er ikke lenger så mange som bruker noe annet enn Internet Explorer versjon 5 eller bedre så om vi lenger skal ta hensyn til andre nettlesere er jeg ikke helt sikker på. Sjekk Browser-stastics fra W3 Schools.
Se denne tutorialen for hvordan du kan bruke clipping for å få rollovere i et imagemap.
Gå til neste side hvor vi ser på «animering» av layere med Timeline.
