Slik sentrerer du et sideoppsett med CSS-marginer i Dreamweaver

Dreamweaver lar deg sentrere oppsettet ved hjelp av CSS-marginer. Mange nettsidedesign er sentrert på siden slik at de ser ut til å flyte mellom sidene av nettleservinduet uansett hvor bredt eller smalt vinduet blir. Dette bidrar til å skape en illusjon om at designet fyller siden, selv om nettleservinduet er mye bredere enn sidedesignet.

De fleste nettsidedesign opprettet med CSS oppnår denne effekten ved å lage en

taggen som omgir alt sideinnholdet og deretter bruke en stil på det

tag som inkluderer en stilregel som sentrerer det

stikkord. Som du oppdager i de følgende trinnvise instruksjonene, lager du en stil for å sentrere en

taggen er ikke så åpenbar som du kanskje forestiller deg, men er enkel å implementere.

Vanlig praksis er å bruke en ID-stil for

tag som sentrerer designet ditt, og for å nevne det #wrapper eller #container.

Hvis siden din ikke allerede er konfigurert med en

tag rundt alt innholdet ditt, her er et tips for å legge til et. Klikk og dra først for å velge all tekst, bilder og annet innhold på siden. Velg deretter Sett inn → Layoutobjekter → Div Tag. I dialogboksen Insert Div Tag må du kontrollere at alternativet Wrap around Selection er valgt fra rullegardinlisten Sett inn.

La resten av feltene stå tomme og klikk OK for å legge til en

tag rundt alt innholdet på siden din, og du er klar for trinnene som følger.

For å sentrere en hel sidedesign, sørg for at en

taggen omgir alt innholdet på siden, og følg disse trinnene:

Klikk på plusstegnet 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 i Selectors-panelet.

Dobbeltklikk for å velge navnet som Dreamweaver la til panelet og endre det til navnet du ønsker for den nye stilen, eller klikk for å velge det tomme feltet og angi et navn.

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

I egenskapspanelet angir du bredden, margene og eventuelle andre formateringsinnstillinger du vil definere.

Bredden for beholderen

taggen er satt til 980 piksler. Her er trikset for å sentrere en

tag som dette: Sett venstre og høyre marg til Auto. På den måten legger en nettleser automatisk til like mye margplass på hver side av

-taggen, og sentrerer den effektivt på siden.

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

For å være sikker på at du har valgt riktig

-taggen, klikk for å plassere markøren hvor som helst i hoveddelen av siden, og klikk deretter på

tag oppført lengst til venstre i hurtigmerkevelgeren nederst på arbeidsområdet.

Med

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

Stilreglene du definerte da du opprettet stilen, brukes automatisk på

stikkord. 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 funksjoner fungerer når Dreamweaver er satt til Live view. Selv om Live view er en fin måte å forhåndsvise hvordan sidedesignene dine vil se ut i de fleste moderne nettlesere, gjør bruken av Live view-funksjonen mange av Dreamweavers redigeringsverktøy ubrukelige. Hvis for eksempel eiendomsinspektøren vises nedtonet når du vil bruke den, sørg for at Live-knappen er deaktivert.