Slik senterer du en sidelayout med CSS-marginer i Dreamweaver

Dreamweaver lar deg sentrere oppsettet ditt ved hjelp av CSS-marginer. Mange websidedesigner er sentrert på siden, slik at de ser ut til å flyte mellom sidene av nettleservinduet, uansett hvorvidt brede eller smale vinduet blir. Dette bidrar til å skape illusjonen at designet fyller siden, selv om nettleservinduet er mye bredere enn sidedesignet.

De fleste websidedesignene som er opprettet med CSS, oppnår denne effekten ved å lage en tagg som omgir alt sidens innhold og deretter bruke en stil på den taggen som inneholder en stilregel som sentrerer den taggen. Som du oppdager i de følgende trinnvise instruksjonene, er det ikke så opplagt å lage en stil som skal sitte på en tag, men det er enkelt å implementere.

Vanlig praksis er å bruke en ID-stil for taggen som sentrerer ditt design, og for å nevne #wrapper eller #container.

Hvis siden din ikke allerede er opprettet med en tagg rundt hele innholdet ditt, er det et tips for å legge til en. Klikk først og dra for å velge all tekst, bilder og annet innhold på siden. Velg deretter Sett inn → Oppsettobjekter → Div Tag. I dialogboksen Sett inn div-tagg må du kontrollere at alternativet Wrap around Selection er valgt fra rullegardinlisten Sett inn.

La resten av feltene være tomme og klikk OK for å legge til en tagg rundt hele innholdet på siden din, og du er klar for trinnene som følger.

For å sentrere en hel sidedesign, sørg for at en tag omgir alt innholdet på siden, og følg disse trinnene:

1. Klikk plustegnet i CSS Designer Selectors-panelet.

   Avhengig av hva som er på siden, legges et nytt stilnavn eller et tomt felt der du kan skrive inn et stilnavn, til Selectors-panelet.

2. Dobbeltklikk for å velge navnet Dreamweaver legger til panelet og endre det til navnet du vil ha for den nye stilen din, eller klikk for å velge det tomme feltet og skriv inn et navn.

   Hvis ikke noe navn er lagt til, skriv inn navnet du ønsker i det tomme feltet. Du kan navngi stilen alt du vil, men sørg for å skrive inn en periode før navnet hvis du oppretter en klassestil, eller et # tegn på en ID-stil.

3. Angi bredden, margenene og eventuelle andre formateringsinnstillinger du vil definere i Egenskaper-panelet.

   Bredden for containeretiketten er satt til 980 piksler. Her er kunsten å sentrere en tag som denne: Sett venstre og høyre margin til Auto. På den måten legger en nettleser automatisk til samme mengde margarom til hver side av taggen, og sentrerer den effektivt på siden.

   

4. Velg ID-en som omgir alt innholdet på siden.

   For å være sikker på at du har valgt riktig tag, klikker du for å plassere markøren hvor som helst i hoveddelen av siden, og deretter klikker du merket som er merket lengst til venstre i hurtig merketasten nederst på arbeidsområdet.

5. Med merket valgt, velg navnet på stilen du opprettet fra ID-rullegardinlisten i egenskapsinspektøren.

   Stilreglene du definerte når du opprettet stilen, blir automatisk brukt på taggen. I dette eksemplet er resultatet at størrelsen på taggen endres til 980 piksler bred og taggen og alt innholdet er sentrert på siden.

Ikke alle funksjonene fungerer når Dreamweaver er satt til Live visning. Selv om Live-visning er en fin måte å forhåndsvise hvordan sidedesignene dine vil se ut i de fleste moderne nettlesere, gjør bruk av Live View-funksjonen mange av Dreamweavers redigeringsverktøy ubrukelige. Hvis for eksempel egenskapsinspektøren vises nedtonet når du vil bruke den, må du kontrollere at Live-knappen er avmerket.