[轉貼自]http://expert.lccnet.com.tw/home/space.php?uid=5159&do=thread&id=234

[CSS教學] 使用Div排版

日前看到網友對此部分提出一些問題，本人就以前的經驗來介紹與說明....

曾有人說推薦使用div排版的原因，是因為其技術比table排版較新，這不是主要因素....XD

div排版，早在四年前，國外的free webpage
template中常看見。當時，正好我在學習SEO和無障礙網頁，都有提到這部分的條件與規範，便花了不少時間在學習，以下由我來說明用div排版的優缺點與語法。

div排版的缺點與table排版的優點

由於table排版，所見即所得，對於初學者在排版方面較為輕鬆。而div排版，須學會css，對於網頁的結構也須事先想好，加上早期的瀏覽器(ex.IE6)對於CSS的支援度不是很高(現在的瀏覽器對於div排版較不會有問題)。

div排版的優點

render
times部分，div排版花的時間較短。
(當時我在為某網站SEO時，發現網頁的結構都是以table去規劃，甚至有三到四層的table。當下，我只針對第一層與第二層的table換成div，在測試網頁時，網頁開啟的速度明顯有差，大約有0.5秒...XD)
對SEO有利。
(其一，對search engines search
時，因tag不同而搜尋到內容與其定義有差；其二，網頁的原始碼減少，亦對SEO有利)
對網頁維護或更新方便。
(由於div排版是靠css，只要針對css作修改，就可以輕而易舉的更換樣式。forum、blog等的樣式可以隨時更換的技巧，就是可匯入自己喜歡的css樣式並記錄在cookie)
對無障礙網頁有利。
(無障礙網頁有規範此條件，由於程式在讀取網頁時，table的語法會影響程式的讀法，所以有規範之)

div排版的語法

~_~a....參考下面的範例，依我的經驗和習慣，只列出重要的設定，並稍作修改:
http://css.maxdesign.com.au/floatutorial/tutorial0901.htm

以下圖為範例:

1.規劃各欄位的內容，並設定好各div的id(ex.container、top、leftnav、rightnav、footer)
CSS
CODE
None

HTML
CODE
<div id="container">
<div
id="top">
<h1>Header</h1>
</div>
<div
id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut.
</p>
</div>
<div
id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat.
</p>
</div>
<div
id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut.
</p>
</div>
<div
id="footer">
Footer
</div>
</div>

2.決定內容的版面寬度
CSS CODE
#container
{
width: 90%;
}

3.設定左邊(leftnav)部分

CSS
CODE
#container
{
width:
90%;
}
#leftnav
{
float:
left;
width: 160px;
}

4.設定右邊(rightnav)部分
CSS
CODE
#container
{
width:
90%;
}
#leftnav
{
float: left;
width: 160px;
}
#rightnav
{
float: right;
width: 160px;
clear:
right;
}

5.設定下面(Footer)部分
CSS
CODE
#container
{
width:
90%;
}
#leftnav
{
float: left;
width:
160px;
}
#rightnav
{
float: right;
width: 160px;
clear:
right;
}
#footer
{
clear:
left;
}

6.其他的設定，例如文字、背景、padding、margin、....