接下來開始要真正設計布局了。和傳統的方法一樣，你首先要在腦海里有大致的輪廓構想，然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素，因為web標準更關注結構和內容，實際上它與網頁的美觀沒有根本沖突，你想怎麼設計就怎麼設計，用傳統表格方法實現的布局，用DIV也可以實現。技術有一個成熟的過程，把DIV看成和TABLE一樣的工具，如何運用就看你的想象力了。注︰在實際應用過程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取舍在于你的價值判斷。好，不羅嗦了，我們開始︰

1.確定布局

　　w3cn的最初設計草圖如下︰

　　用表格的設計方法的話，一般都是上中下三行布局。用DIV的話，我考慮使用三列來布局,成為這樣。

2.定義body樣式

　　先定義整個頁面的body的樣式,代碼如下︰

body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋體','新宋體',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }