規劃網站
首先需要規劃網站，本教學將以下圖為例建立網站。
圖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模板及文件目錄等
程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>
將其保存為index.html,並創建資料夾css，images，網站結構如下：
圖3
2.創建網站的大框：
建立一個寬760px的盒子，它將包含網站的所有元素。
在html檔案的<body>和</body>之間寫入<div id="page-container">
Hello world.
</div>
建立css文件，命名為master.css,保存在/css/資料夾下。寫入：
#page-container {
width: 760px;
background: red;
}
控制html的id為page-container的盒子的寬為760px，背景為紅色,表現如下。
圖4
現在為了讓盒子居中，寫入margin: auto;，使css檔為：
#page-container {
width: 760px;
margin: auto;
background: red;
}
現在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由於瀏覽器的預設的填充和邊界造成的。消除這個空隙，就需要在css檔中寫入：
html, body {
margin: 0;
padding: 0;
}
將網站分為五個div
1.將"第一步"提到的五個部分都放入盒子中，在html檔案中寫入：
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
表現如下：
圖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檔案中寫入：
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
表現如下：
圖8
但是你可以看到主要內容的盒子佔據了整個page-container的寬度，我們需要將#content的右邊界設為280px。以使其不和邊框發生衝突。
css程式碼如下：
#content {
margin-right: 280px;
background: green;
}
同時往邊框裡寫入一些文字。在html檔案中寫入：
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
表現如下：
圖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的程式碼，<h1>到<h6>是我們常用的html標題程式碼。例如我們一般用<h1>網站名稱</h1>，<h2>網站副標題</h2>,<h3>內容主標題</h3>等。我們加入html檔的Header層(Div)：
<div id="header">
<h1>Enlighten Designs</h1>
</div>
刷新頁面，你就可以看到巨大的標題，和標題周圍的空白，這是因為<h1>>標籤的預設大小和邊距(margin)造成的，先要消除這些空白,需要加入：
h1 {
margin: 0;
padding: 0;
}
接下來是導航條：
控制導航條表現的css程式碼相對比較複雜，我們將在第九步或是第十步中詳細介紹。現在html檔案加入導航程式碼：
<div id="main-nav">
<ul>
<li id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > About</a></li>
<li id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Services</a></li>
<li id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portfolio</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Contact Us</a></li>
</ul>
</div>
(註：原教程使用了dl和dt，jorux在這使用了更常用的ul和li標籤)
目前導航條的表現比較糟糕，但是要在以後的教程中介紹其特殊表現，故需要暫時隱藏導航條,於是加入：
<div id="main-nav">
<dl class="hidden">
<dt id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > About</a></dt>
<dt id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Services</a></dt>
<dt id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portfolio</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Contact Us</a></dt>
</dl>
</div>