Sådan centrerer du en sidelayout med CSS-margener i Dreamweaver

Dreamweaver giver dig mulighed for at centrere dit layout ved hjælp af CSS-margener. Mange webside designs er centreret på siden, så de synes at flyde mellem siderne i browservinduet, uanset hvor bredt eller smalt vinduet bliver. Dette hjælper med at skabe illusionen om, at designet fylder siden, selvom browservinduet er meget bredere end sidedesignet.

De fleste websidedesigner, der er oprettet med CSS, opnår denne effekt ved at oprette et tag, der omgiver alt sidens indhold og derefter anvende en stil på det tag, der indeholder en stilregel, der centrerer det pågældende tag. Som du opdager i de følgende trinvise instrukser, er det ikke så indlysende at oprette en stil til at centrere et tag, som du måske forestiller dig, men det er nemt at implementere.

Almindelig praksis er at bruge en ID-stil til det tag, der centrerer dit design, og for at nævne det #wrapper eller #container.

Hvis din side ikke allerede er oprettet med et tag omkring hele dit indhold, er det et tip til at tilføje en. Klik først og træk for at vælge al tekst, billeder og andet indhold på siden. Vælg derefter Indsæt → Layoutobjekter → Div Tag. Sørg for, at indstillingen Wrap around Selection er valgt fra rullelisten Indsæt, i dialogboksen Indsæt div Tag.

Lad resten af ​​felterne være tomme og klik på OK for at tilføje et tag rundt hele 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 et tag omgiver alt indholdet på siden og følg disse trin:

1. Klik på plustegnet i panelet CSS Designer Selectors.

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

2. Dobbeltklik for at vælge det navn, Dreamweaver tilføjede til panelet, og skift det til det ønskede navn til din nye stil eller klik på for at markere det tomme felt og indtaste et navn.

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

3. Angiv bredden, margenerne og eventuelle andre formateringsindstillinger, du vil definere, i panelet Egenskaber.

   Bredden til containeretiketten er indstillet til 980 pixel. Her er tricket at centrere et mærke som dette: Indstil venstre og højre margen til Auto. På den måde tilføjer en browser automatisk en lige stor margin plads til hver side af taggen, hvilket centrerer det effektivt på siden.

   

4. Vælg det id, der omgiver alt indhold på siden.

   For at sikre dig, at du har valgt det rigtige tag, skal du klikke for at placere markøren hvor som helst i hoveddelen af ​​siden og derefter klikke på det mærke, der er anført længst til venstre i Quick Tag Selector nederst i arbejdsområdet.

5. Med markeret markering skal du vælge navnet på den stil, du oprettede fra rullelisten ID i egenskabsinspektøren.

   De stilregler du definerede, når du oprettede stilen, anvendes automatisk til tagget. I dette eksempel er resultatet at størrelsen af ​​mærket ændres til 980 pixel bredt, og mærket og dets indhold er centreret på siden.

Ikke alle funktioner fungerer, når Dreamweaver er indstillet til Live visning. Selvom Live-visning er en fantastisk måde at forhåndsvise, hvordan dine sidedesigner vil se i de fleste moderne browsere, gør brugen af ​​Live View-funktionen mange af Dreamweaver's redigeringsværktøjer ubrugelige. Hvis f.eks. Ejendomsinspektøren vises dæmpet, når du vil bruge den, skal du sørge for, at knappen Live er fravælget.