Hur man centrerar en sidlayout med CSS-marginaler i Dreamweaver

Dreamweaver låter dig centrera din layout med CSS-marginaler. Många webbdesigner är centrerade på sidan så att de verkar flyta mellan sidorna i webbläsarfönstret, oavsett hur bred eller smal fönstret blir. Detta hjälper till att skapa illusionen att designen fyller sidan, även om webbläsarfönstret är mycket bredare än siddesignen.

De flesta webbdesigner skapade med CSS uppnår denna effekt genom att skapa en tagg som omger allt sidinnehåll och sedan tillämpa en stil på den taggen som innehåller en stilregel som centrerar den taggen. Som du upptäcker i de här steg-för-steg-instruktionerna är det inte lika uppenbart att skapa en stil för att centrera en etikett som du kan tänka dig men det är lätt att implementera.

Vanlig praxis är att använda en ID-stil för taggen som centrerar din design och för att namnge den #wrapper eller #container.

Om din sida inte redan är upprättad med en tagg runt hela ditt innehåll, här är ett tips för att lägga till en. Klicka först och dra för att välja all text, bilder och annat innehåll på sidan. Välj sedan Infoga → Layoutobjekt → Div Tag. Se till att alternativet Wrap around Selection är valt i rullgardinsmenyn Infoga.

Lämna resten av fälten tomma och klicka på OK för att lägga till en tagg runt hela innehållet på din sida och du är redo för de steg som följer.

För att centrera en hel siddesign, se till att en tagg omger allt innehåll på sidan och följ dessa steg:

1. Klicka på plustecknet i panelen CSS Designer Selectors.

   Beroende på vad som finns på sidan, läggs ett nytt stilnamn eller ett tomt fält där du kan ange ett stilnamn till panelen Selectors.

2. Dubbelklicka för att välja det namn Dreamweaver lägger till i panelen och ändra det till namnet du vill ha för din nya stil, eller klicka för att markera det tomma fältet och ange ett namn.

   Om inget namn läggs till anger du det namn du vill ha i det tomma fältet. Du kan namnge stilen du vill, men se till att du anger en period före namnet om du skapar en klassstil eller ett # tecken på en ID-stil.

3. Ange bredd, marginaler och andra formateringsinställningar som du vill definiera i fönstret Egenskaper.

   Bredden för behållarkoden är inställd på 980 pixlar. Här är tricket att centrera en tagg så här: Ange vänster och höger marginal till Auto. På så sätt lägger en webbläsare automatiskt en lika mycket marginalutrymme till vardera sidan av taggen och centrerar den effektivt på sidan.

   

4. Välj det ID som omger allt innehåll på sidan.

   För att du har valt rätt tagg, klicka för att placera markören någonstans i huvuddelen av sidan och klicka sedan på taggen längst längst till vänster i snabbmarkeringsväljaren längst ner i arbetsytan.

5. Med taggen vald väljer du namnet på den stil du skapade från listrutan ID i egenskapsinspektören.

   Stilen reglerar du definierad när du skapade stilen appliceras automatiskt på taggen. I det här exemplet är resultatet att storleken på taggen ändras till 980 pixlar bred och taggen och dess innehåll är centrerade på sidan.

Inte alla funktioner fungerar när Dreamweaver är inställd på Live-visning. Även om Live-visning är ett bra sätt att förhandsgranska hur dina sidmönster ser ut i de flesta moderna webbläsare gör användningen av Live View-funktionen många av Dreamweavers redigeringsverktyg oanvändbara. Om till exempel egenskapsinspektionen dyker ned när du vill använda den, kontrollera att Live-knappen är avmarkerad.