頁面結構從上到下依次是
header 主要包括導航，登錄，Logo, Banner
body 網站主要內容，並且還可以分為左右兩欄，左中右三欄。
footer 導航，版權
header,footer將顯示在所有頁面，一般很少改動。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="banner"></div>
<div id="nav"></div>
</div>
<div id="page1">
<div class="left_nav"></div>
<div class="right"></div>
</div>
<div id="page2">
</div>
<div id="page3">
</div>
<div id="footer">
<div id="footer_nav"></div>
<div id="copyright"></div>
</div>
</body>
</html>
page1 打開首頁看到的第一屏頁面，page2，page3需要按翻頁鍵
不要將 page1，page2，page3 放到一個DIV中
<table> <tr> <td>Home</td> <td>News</td> <td>About</td> <td>Contact</td> </tr> </table>
<div id="nav"> <ul> <li><a href="#"> Home </a></li> <li><a href="#"> News </a></li> <li><a href="#"> Person </a></li> <li><a href="#"> Group </a></li> <li><a href="#"> Network </a></li> </ul> </div>
<div id="left"> <div class="box"> <h2>title</h2> <a href="#"> link </a> <a href="#"> link </a> <a href="#"> link </a> </div> <div class="box"> <h2>title</h2> <a href="#"> link </a> <a href="#"> link </a> <a href="#"> link </a> </div> </div>
網站經常用一些方塊規劃版面。
一種是矩形方框
另一種是有標題，標題下方是矩形方框
現在流行的是標題欄有多個選項卡，標題下方是矩形方框，當選擇不同標題時，矩形方框中的內容隨之改變。
傳統方法如下：
例 15.3. 例子
table block example
<table> <tr> <td> 內容 </td> </tr> </table>
div+css block example
<div class="simple_box"> 內容 </table>
例 15.4. 例子
table title block example
<table> <tr> <td>Top 10</td> </tr> <tr> <td> <table> <tr> <td>No.1</td> </tr> <tr> <td>No.2</td> </tr> <tr> <td>No.3</td> </tr> <tr> <td>No.n</td> </tr> </table> </td> </tr> </table>
div+css title block example
<div class="title_block"> <h2> Title <h2> <div> Content </div> </div>
使用dl標記實現
<dl class="title_block"> <dt>Title<dt> <dd> Content </dd> </dl>