Hur man centrerar en sidlayout med CSS-marginaler i Dreamweaver

Dreamweaver låter dig centrera din layout med hjälp av CSS-marginaler. Många webbsidesdesigner är centrerade på sidan så att de verkar sväva mellan sidorna av webbläsarfönstret oavsett hur brett eller smalt fönstret blir. Detta bidrar till att skapa illusionen av att designen fyller sidan, även om webbläsarfönstret är mycket bredare än sidans design.

De flesta webbsidesdesigner skapade med CSS uppnår denna effekt genom att skapa en

taggen som omger allt sidinnehåll och sedan tillämpa en stil på det

tagg som innehåller en stilregel som centrerar det

märka. Som du upptäcker i följande steg-för-steg-instruktioner, skapa en stil för att centrera en

taggen är inte så självklar som du kan föreställa dig men är lätt att implementera.

Vanlig praxis är att använda en ID-stil för

tagg som centrerar din design, och för att döpa den till #wrapper eller #container.

Om din sida inte redan är konfigurerad med en

tagga runt allt ditt innehåll, här är ett tips för att lägga till ett. Klicka och dra först för att markera all text, bilder och annat innehåll på sidan. Välj sedan Infoga → Layoutobjekt → Div-tagg. Se till att alternativet Wrap around Selection är valt i rullgardinsmenyn Infoga i dialogrutan Infoga Div-tagg.

Lämna resten av fälten tomma och klicka på OK för att lägga till en

tagga runt allt innehåll på din sida och du är redo för stegen som följer.

För att centrera en hel siddesign, se till att en

taggen omger allt innehåll på sidan och följ dessa steg:

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 på väljarpanelen.

Dubbelklicka för att välja namnet som Dreamweaver lade till i panelen och ändra det till det namn 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 önskar i det tomma fältet. Du kan namnge stilen vad du vill, men se till att ange en punkt före namnet om du skapar en klassstil, eller ett #-tecken för en ID-stil.

På panelen Egenskaper anger du bredd, marginaler och eventuella andra formateringsinställningar som du vill definiera.

Bredden för behållaren

taggen är inställd på 980 pixlar. Här är tricket för att centrera en

tagg så här: Ställ in vänster och höger marginal på Auto. På så sätt lägger en webbläsare automatiskt till lika mycket marginalutrymme på varje sida av

och effektivt centrera den på sidan.

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

För att vara säker på att du har valt rätt

klickar du för att placera markören var som helst i huvuddelen av sidan och klickar sedan på

taggen listad längst till vänster i Quick Tag Selector längst ner på arbetsytan.

Med

taggen vald, välj namnet på stilen du skapade från rullgardinsmenyn ID i egenskapsinspektören.

Stilreglerna du definierade när du skapade stilen tillämpas automatiskt på

märka. I det här exemplet är resultatet att storleken på

taggen ändras till 980 pixlar bred och

taggen och allt dess innehåll centreras på sidan.

Alla funktioner fungerar inte när Dreamweaver är inställt på Live view. Även om Live View är ett utmärkt sätt att förhandsgranska hur din siddesign kommer att se 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 fastighetsinspektören visas nedtonad när du vill använda den, se till att knappen Live är avmarkerad.