Sådan centreres et sidelayout med CSS-margener i Dreamweaver

Dreamweaver giver dig mulighed for at centrere dit layout ved hjælp af CSS-margener. Mange websidedesign er centreret på siden, så de ser ud til at svæve mellem siderne af browservinduet, uanset hvor bredt eller smalt vinduet bliver. Dette er med til at skabe illusionen om, at designet fylder siden, selvom browservinduet er meget bredere end sidens design.

De fleste websidedesigns, der er oprettet med CSS, opnår denne effekt ved at oprette en

tag, der omgiver alt sideindhold og derefter anvende en typografi på det

tag, der inkluderer en stilregel, der centrerer det

tag. Som du opdager i de følgende trin-for-trin instruktioner, skal du oprette en stil til at centrere en

tag er ikke så indlysende, som du måske forestiller dig, men er let at implementere.

Almindelig praksis er at bruge en ID-stil til

tag, der centrerer dit design, og for at navngive det #wrapper eller #container.

Hvis din side ikke allerede er konfigureret med en

tag omkring alt dit indhold, her er et tip til at tilføje et. Først klik og træk for at vælge al tekst, billeder og andet indhold på siden. Vælg derefter Indsæt → Layoutobjekter → Div Tag. I dialogboksen Insert Div Tag skal du sørge for, at Wrap around Selection-indstillingen er valgt på rullelisten Indsæt.

Lad resten af ​​felterne være tomme, og klik på OK for at tilføje en

tag rundt på alt indholdet på din side, og du er klar til de trin, der følger.

For at centrere et helt sidedesign skal du sørge for, at en

tag omgiver alt indholdet på siden, og følg disse trin:

Klik på plustegnet i panelet CSS Designer Selectors.

Afhængigt af, hvad der er på siden, tilføjes et nyt stilnavn eller et tomt felt, hvor du kan indtaste et stilnavn, til panelet Vælgere.

Dobbeltklik for at vælge det navn, som Dreamweaver føjede til panelet, og skift det til det navn, du ønsker til din nye stil, eller klik for at vælge det tomme felt og indtast et navn.

Hvis der ikke tilføjes noget navn, skal du indtaste det ønskede navn i det tomme felt. Du kan navngive stilen, hvad du vil, men sørg for at indtaste et punktum før navnet, hvis du opretter en klassestil eller et #-tegn for en ID-stil.

I panelet Egenskaber skal du angive bredden, margener og eventuelle andre formateringsindstillinger, du vil definere.

Bredden for containeren

tag er indstillet til 980 pixels. Her er tricket til at centrere en

tag som dette: Indstil venstre og højre margen til Auto. På den måde tilføjer en browser automatisk en lige stor mængde marginplads til hver side af

tag, der effektivt centrerer det på siden.

Vælg det ID, der omgiver alt indholdet på siden.

For at sikre dig, at du har valgt det rigtige

tag, klik for at placere din markør hvor som helst i hoveddelen af ​​siden, og klik derefter på

tag anført længst til venstre i Quick Tag Selector i bunden af ​​arbejdsområdet.

Med

markeret tag, skal du vælge navnet på den typografi, du har oprettet, fra rullelisten ID i ejendomsinspektøren.

De stilregler, du definerede, da du oprettede stilen, anvendes automatisk på

tag. I dette eksempel er resultatet, at størrelsen af

tag ændres til 980 pixels bred og

tag og alt dets indhold er centreret på siden.

Ikke alle funktioner fungerer, når Dreamweaver er indstillet til Live view. Selvom Live view er en fantastisk måde at få vist, hvordan dine sidedesign vil se ud i de fleste moderne webbrowsere, gør brugen af ​​Live view-funktionen mange af Dreamweavers redigeringsværktøjer ubrugelige. Hvis ejendomsinspektøren for eksempel vises nedtonet, når du vil bruge den, skal du sørge for, at knappen Live er fravalgt.