善用 DIV 做版面配置

以往 用table 編排網頁的方式, 容易產生複雜的原始碼, 適當的善用div 將會乾淨許多, 也減輕(版面 & 程式) 設計者的負擔, 舉例:

<table>
<tbody><tr>
<td>第一列</td>
</tr>
<tr>
<td>第二列</td>
</tr>
</tbody>
</table>

用div呈現會變成

<div>第一列</div>
<div>第二列</div>

所以在版面配置時, div 是個好幫手, 但在列表式的資料編排, 我還是會採用 Table, 部分設計師想盡辦法不使用 Table, 我並不贊成, 何苦呢 ? 將 Table 用在列表式的資料上, 簡單又方便, 通常只要掌握大方面 Table-less Css Layout , 就是一張漂亮的網頁。

如何用 div 做版面配置? 首先要會用 CSS, 需要學很久嗎? 不用, 請打開Dreamweaver CS4 , "新增空白網頁" 可以選擇各式各樣的版面, 三欄、二欄任你挑, 再依照說明文字的解釋去修改你要的寬度就可以。

在body之前會有一串文字如下方,
<!--[if IE]><br /><style type="text/css"><br />/* 在這個條件註解中，放置所有 IE 版本的 CSS 修正 */<br />............<br /></style><br /><![endif]-->

這是為了網頁在各家瀏覽器上可以呈現相同的結果, 因為標題(<h1>,</h1><h2>,<hn...>
)與<p>的使用各家瀏覽器預設內外距的差異, 造成頁面呈現的不統一, 建議做內外距的歸零動作即可, 如下:
h1, h2, h3, p {padding:0;
margin:0
}

最後提供以下版型配置的網站, 有了這些資源, 相信用 DIV 做版面配置, 已經不是惱人的事。

• http://layouts.ironmyers.com/
• http://blog.html.it/layoutgala/