規劃網站
首先需要規劃網站，本教學將以下圖為例建立網站。
圖1
其基本佈局請見下圖：
圖2
主要由五個部分構成：
1. Main Navigation 導航條，具有按鈕特效。
Width: 760px Height: 50px
2. Header 網站頭部圖標，包含網站的logo和站名。
Width: 760px Height: 150px
3. Content 網站的主要內容。
Width: 480px Height: Changes depending on content
4. Sidebar 邊框，一些附加資訊。
Width: 280px Height: Changes depending on
5. Footer 網站底欄，包含版權資訊等。
Width: 760px Height: 66px
1.建立html模板及文件目錄等
程式碼如下：
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
圖3
2.創建網站的大框：
建立一個寬760px的盒子，它將包含網站的所有元素。
在html檔案的
圖4
現在為了讓盒子居中，寫入margin: auto;，使css檔為：
#page-container {
width: 760px;
margin: auto;
background: red;
}
現在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由於瀏覽器的預設的填充和邊界造成的。消除這個空隙，就需要在css檔中寫入：
html, body {
margin: 0;
padding: 0;
}
將網站分為五個div
1.將"第一步"提到的五個部分都放入盒子中，在html檔案中寫入：
表現如下：
圖5
2.為了將五個部分區分開來，我們將這五個部分用不同的背景顏色標示出來，在css檔案寫入：
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
表現如下：
圖6
網頁佈局與div浮動等
1.浮動：首先讓邊框浮動到主要內容的右邊。用css控制浮動。
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
表現如下：
圖7
2.往主要內容的盒子中寫入一些文字。在html檔案中寫入：
圖8
但是你可以看到主要內容的盒子佔據了整個page-container的寬度，我們需要將#content的右邊界設為280px。以使其不和邊框發生衝突。
css程式碼如下：
#content {
margin-right: 280px;
background: green;
}
同時往邊框裡寫入一些文字。在html檔案中寫入：
表現如下：
圖9
這也不是我們想要的，網站的底框跑到邊框的下邊去了。這是由於我們將邊框向右浮動，由於是浮動，所以可以理解為它位於整個盒子之上的另一層。因此，底框和內容盒子對齊了。
因此我們往css中寫入：
#footer {
clear: both;
background: orange;
height: 66px;
}
表現如下：
圖10
網頁主要框架之外的附加結構的佈局與表現除網頁主要框架之外的附加結構的表現(Layout),包括以下內容：
1. 主導航條；
2. 標題(heading),包括網站名稱及內容標題；
3. 內容；
4. 頁尾資訊,包括版權,認證,副導航條(可選)。
加入這些結構時，為了不破壞原有框架，我們需要在css檔"body"標籤(TAG)下加入：
.hidden {
display: none;
}
".hidden"即我們加入的類別(class),這個類別可以使頁面上任意屬於hidden類別的元素(element)不顯示。這些會在稍後使用，現在請暫時忘記它。
現在我們加入標題(heading)：
先回到HTML的程式碼，
接下來是導航條：
控制導航條表現的css程式碼相對比較複雜，我們將在第九步或是第十步中詳細介紹。現在html檔案加入導航程式碼：