CSS 頁面版面是使用「串接樣式表」格式來組織網頁上的內容，而不是使用傳統 HTML 表格或頁框。CSS 版面的基本建置區塊是 div 標籤，這是 HTML 標籤，在多數情況下會用作文字、影像和其他頁面元素的容器。當您建立 CSS 版面時，會將 div 標籤放置在頁面上、新增此標籤的內容，然後將此標籤放在不同的位置。Div 標籤和表格儲存格 (受限於要在表格的欄和列之中) 不一樣，可以出現在網站的任何位置上。您可以採用絕對 (指定 x 和 y 座標) 或相對 (指定與目前位置相對的位置) 方式來放置 DIV 標籤。您也可以透過指定浮點、欄位間隔和邊界 (現今網站標準的慣用方法)，定位 Div 標籤。
繼續本節之前，您應該先熟悉基本 CSS 概念。
CSS 版面的基本建置區塊是 div 標籤，這是 HTML 標籤，在多數情況下會作用為文字、影像和其他頁面元素的容器。下列範例會顯示含有三個個別 div 標籤的 HTML 頁面：一個大型「容器」標籤、容器標籤內的兩個其他標籤：邊列標籤和主要內容標籤。
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</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> Main Content </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>H2 level heading </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>
在上述範例中，沒有任何「樣式」附加到 div 標籤中。由於未定義 CSS 規則，每個 div 標籤與其內容會位在頁面上的預設位置。不過，如果每個 div 標籤都有唯一的 ID (如上例所述)，您可以使用 ID 建立套用時會變更 div 標籤樣式和定位的 CSS 規則。
下列 CSS 規則 (文件檔頭或外部 CSS 檔案中) 會先建立樣式規則，或為頁面上的「容器」div 標籤建立樣式規則：
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
A. 文字靠左對齊 B. 白色背景 C. 黑色實線的 1 像素邊框
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#sidebar 規則的樣式為讓邊列 div 標籤的寬度為 200 個像素、灰色背景、上下欄位間隔為 15 個像素、右欄位間隔為 10 個像素，而左欄位間隔為 20 個像素 (設定間距的預設順序為上、右、下、左)。此外，規則會以 float: left (這個屬性會將邊列 div 標籤推到容器 div 標籤的左邊) 定位邊列。將規則套用到邊列 div 標籤的結果如下：
A. 寬度為 200 像素 B. 頂端和底部欄位間隔為 15 像素
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
#mainContent 規則的樣式為讓主要內容 div 的左邊界為 250 個像素，這表示會在容器 div 的左邊和主要內容 div 的左邊之間放置 250 個像素的空間。此外，規則也會在主要內容 div 的右邊、底部和左邊提供 20 個像素的空間。將規則套用到 mainContent div 的結果如下：
完整的程式碼如下所示：
A. 左邊欄位間隔為 20 像素 B. 右邊欄位間隔為 20 像素 C. 底部欄位間隔為 20 像素
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 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>Sidebar Content</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> Main Content </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>H2 level heading </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>
註解：
上述範例程式碼是程式碼的簡化版本，該程式碼會在您使用 Dreamweaver 隨附的預先指定版面建立新文件時，建立兩欄的固定左邊列版面。
在 Dreamweaver 中建立新頁面時，您可以建立已含有 CSS 版面的頁面。Dreamweaver 隨附 16 個可讓您選擇使用的不同 CSS 版面。此外，您可以建立自己的 CSS 版面並將這些版面新增到 configuration 資料夾，這些版面就會在「新增文件」對話方塊中顯示為版面選項。
-
如需此程序的詳細逐步解說，請參閱 David Powers 的文章：自動附加樣式表至新文件。
