現業界大部分還是以傳統table作為網頁佈局的主流，也就是在一個大大的table裡面，填上內容、選單等網頁資料。事實上，這不僅增加程式碼的複雜度，讓程式人員困擾之外，也讓網站的效能大大降低！又，設計人員若需要維護修改，也會相當麻煩。
使用DIV佈局，可以使程式碼簡單化，讓程式人員輕易套用各種功能。
內容內容內容內容內容內容內容內容
如上面的前台顯示為例，若使用table呈現，程式碼為：
<table border="1" cellpadding="0" cellspacing="0" width="300">
<tbody>
<tr><td>內容內容內容內容內容內容內容內容</td></tr>
</tbody>
</table>相同樣子，若改以Div呈現，程式碼為：
<div style="width:300px;">
內容內容內容內容內容內容內容內容
</div>
光是這樣簡單的前台顯示，就有如此大的差別，何況一個結構複雜的網站，一大堆table結構更是令人昏頭轉向。所以利用CSS，配合Div佈局網頁，將是一個重要的課題！
該如何使用CSS+Div製作網頁佈局呢？
Div若不加任何style，會依照html程式碼的順序排列，也就是說寫在越前面的Div，就會在越上面顯示。若像下方這樣的html：
<div>
內容內容內容內容內容內容內容內容
</div>
<div>
內容內容內容內容內容內容內容內容
</div>
<div>
內容內容內容內容內容內容內容內容
</div>
前台顯示出來的就會是像這樣子：
內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容
但是一般網站結構，大概分為上方形象區、左側子選單、右側主內容、以及下方版權宣告，如下方顯示：
TOP上方形象選單區
LEFT左側子選單區
RIGHT右側主內容區
FOOTER下方版權宣告區
要製作如此的網站結構，其實相當簡單！
html程式碼部份，只要像下面這樣寫：
<div id="mainwrap">
<div id="top" >TOP上方形象選單區</div>
<div id="left" >LEFT左側子選單區</div>
<div id="right" >RIGHT右側主內容區</div>
<div id="footer" >FOOTER下方版權宣告區</div>
</div>
沒錯！html部份就是這樣簡單！當然這樣還沒完成，我們必須增加樣式給每個Div，讓他們能照我們的想法，排進每個位置去！
增加一個CSS檔案，將路徑指到這個html，在CSS樣式裡面增加下面的語法
#mainwrap{
margin: 0pt auto;
padding: 5px;
width: 400px;
font-size: 15px;
font-weight: bold;
border:1px solid #ccc;
}
#top{
padding: 5px;
background-color: rgb(0, 204, 204);
text-align: center;
color: rgb(0, 51, 102);
}
#left{
padding: 5px;
background-color: rgb(255, 204, 51);
width: 90px;
height: 100px;
float: left;
color: rgb(255, 102, 0);
}
#right{
padding: 5px;
background-color: rgb(243, 238, 218);
width: 290px;
height: 150px;
float: left;
color: rgb(204, 153, 102);
}
#footer{
padding: 5px;
clear: both;
background-color: rgb(204, 51, 0);
text-align: center;
color: rgb(255, 255, 255);
}
我們使用float:left的語法，讓左右兩塊Div能夠並行，而不會垂直排列，再者，我們在footer部份增加clear:both的語法，將上述float:left語法的效果清除，讓footer得以依照left以及right兩塊Div的長度作正確的定位！
現在可以看看你的前台顯示，是不是一個簡單的網頁架構就已經完成了呢！
這樣的作法，由於html與樣式是拆開的2個檔案，當設計人員必須針對部份樣式修改的時候，程式人員完全不會感到困擾，因為設計人員只要針對CSS檔案作修正，html則是完全不會改動，效率是不是增加許多呢！再者，這樣的html簡潔、有效，還能增加搜尋引擎最佳化！
left下方空白的部份，我們可以依照需求，在mainwrap增加與left相同的背景顏色屬性，這樣網站看起來就更完整了！
發表文章
