Använda CSS för att utforma sidan

Om CSS-sidlayout

En CSS-sidlayout använder Cascading Style Sheets-formatet istället för vanliga HTML-tabeller eller -ramar för att ordna innehåll på en webbsida. Den grundläggande byggstenen i CSS-layouten är div-taggen, en HTML-tagg som i de flesta fall fungerar som en behållare för text, bilder och andra sidelement. När du skapar en CSS-layout placerar du div-taggar på sidan, lägger till innehåll i dem och placerar dem på olika ställen. Till skillnad från tabellceller, som är begränsade till att ligga någonstans i raderna eller kolumnerna i en tabell, kan div-taggar visas var som helst på en webbsida. Du kan positionera DIV-taggar absolut (genom att ange x- och y-koordinater) eller relativt (genom att ange placeringen i relation till den befintliga platsen). Du kan också placera div-taggar genom att ange flyttal, utfyllnad och marginaler – den metod som oftast används i dagens webbstandarder.

Om strukturen för CSS-sidlayouter

Innan du fortsätter med det här avsnittet bör du vara bekant med grundläggande CSS-koncept.

Det grundläggande byggblocket i CSS-layouten är div-taggen—en HTML-tagg som i de flesta fall fungerar som en behållare för text, bilder och andra sidelement.Följande exempel visar en HTML-sida som innehåller tre separata div-taggar: en stor "container"-tagg, och två andra taggar—en sidopanelstagg och en huvudinnehållstagg—inom container-taggen.

Följande är koden för alla tre div-taggarna i HTML:

<!--container div tag-->

<div id="container">

<!--sidebar div tag-->

<div id="sidebar">

<h3>Innehåll i sidopanel</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

      </div> 

<!--mainContent div tag-->

<div id="mainContent">

<h1> Huvudinnehåll </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>Rubrik på H2-nivå</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

    </div> 

</div>

I exemplet ovan finns det ingen "styling" kopplad till någon av div-taggarna. Utan definierade CSS-regler hamnar varje div-tagg och dess innehåll i en standardplats på sidan. Men om varje div-tagg har ett unikt id (som i exemplet ovan), kan du använda id:na för att skapa CSS-regler som, när de tillämpas, ändrar stilen och positioneringen av div-taggarna.

Följande CSS-regel, som kan finnas i huvuddelen av dokumentet eller i en extern CSS-fil, skapar stilregler för den första, eller "container" div-taggen på sidan:

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

#container-regeln formaterar container div-taggen så att den har en Bredd på 780 pixel, en vit Bakgrund, ingen marginal (från vänster sida av sidan), en solid, svart, 1-pixel kantlinje och text som är vänsterjusterad. Resultatet av att tillämpa regeln på container div-taggen är följande:

Nästa CSS-regel skapar formatregler för div-taggen för sidofältet:

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

#sidebar-regeln formaterar sidebar div-taggen så att den har en Bredd på 200 pixel, en grå Bakgrund, en främsta och bottom padding på 15 pixel, en höger padding på 10 pixel och en vänster padding på 20 pixel. (Standardordningen för utfyllnad är topp-höger-botten-vänster.) Dessutom positionerar regeln sidebar div-taggen med Flyttal: left—en egenskap som skjuter sidebar div-taggen till vänster sida av container div-taggen. Resultatet av att tillämpa regeln på sidebar div-taggen är följande:

Slutligen avslutar CSS-regeln för huvudcontainer div-taggen layouten:

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

#mainContent-regeln formaterar huvudinnehålls-diven med en vänstermarginal på 250 pixel, vilket innebär att den placerar 250 pixel utrymme mellan vänster sida av container div och vänster sida av huvudinnehålls-diven. Dessutom ger regeln 20 pixel avstånd på höger, nedre och vänstra sidor av huvudinnehålls-diven. Resultatet av att tillämpa regeln på div-elementet mainContent är följande:

Hela koden ser ut som följer:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Namnlöst dokument</title>

<style type="text/css">

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

kantlinje: 1px solid #000000;

text-align: left;

} 

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

} 

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

} 

</style>

</head>

<body>

<!--container div tag-->

<div id="container">

<!--sidebar div tag-->

<div id="sidebar">

<h3>Innehåll i sidopanel</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

      </div> 

<!--mainContent div tag-->

<div id="mainContent">

<h1> Huvudinnehåll </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>Rubrik på H2-nivå</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

    </div> 

</div> 

</body>

Skapa en sida med en CSS-layout

När du skapar en ny sida i Dreamweaver kan du skapa en som redan innehåller en CSS-layout. Dreamweaver innehåller fler än 16 olika CSS-layouter som du kan välja mellan. Dessutom kan du skapa egna CSS-layouter och lägga till dem i konfigurationsmappen så att de visas som layoutalternativ i dialogrutan Nytt dokument.

Skapa en sida med en CSS-layout

Lägg till anpassade CSS-layouter till listan med alternativ

Liknande innehåll

• Förstå CSS (Cascading Style Sheets)
• Skapa en tom sida
• Ange standarddokumenttypen och standardkodningen
• Länka till en extern CSS-formatmall