1、為何使用表格排版是不明智的？
　　 表格之所以存在于 HTML 中，只是為了一個(gè)目的：顯示表格狀的數(shù)據(jù)。然而此后的 border="0" 使得設(shè)計(jì)師可以將圖片和文本放在這無(wú)形的網(wǎng)格中。迄今為止，表格仍然主導(dǎo)著視覺豐富的網(wǎng)站的設(shè)計(jì)方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能更強(qiáng)大的網(wǎng)站設(shè)計(jì)方法。

2、概覽：這對(duì)我有什么用處？

　　我們將告訴你這樣一種工作方式，它會(huì)：

　　使你的頁(yè)面載入得更快 
　　 降低你的流量費(fèi)用 
　　 讓你在修改設(shè)計(jì)時(shí)更有效率而代價(jià)更低 
　　 幫助你的整個(gè)站點(diǎn)保持視覺的一致性 
　　 讓你的站點(diǎn)可以更好地被搜索引擎找到 
　　 使你的站點(diǎn)對(duì)瀏覽者和瀏覽器更具親和力 
　　 在世界上越來越多人采用 Web 標(biāo)準(zhǔn)時(shí)，它還能 提高你的職場(chǎng)競(jìng)爭(zhēng)實(shí)力 (事實(shí)上也就是降低失業(yè)的風(fēng)險(xiǎn))。

3、表格帶來的問題

　　把格式數(shù)據(jù)混入你的內(nèi)容中。 
　　 這使得文件的大小無(wú)謂地變大，而用戶訪問每個(gè) 頁(yè)面時(shí)都必須下載一次這樣的格式信息。 
　　 帶寬并非免費(fèi)。 
　　 這使得重新設(shè)計(jì)現(xiàn)有的站點(diǎn)和內(nèi)容極為消耗勞力 (且昂貴)。 
　　 這還使我們保持整個(gè)站點(diǎn)的視覺的一致性極難，花費(fèi)也極高。 
　　 基于表格的頁(yè)面還大大降低了它對(duì)殘疾人和用手機(jī)或 PDA 瀏覽者的親和力。

4、過渡性的設(shè)計(jì)

　　使用 margin 和 padding 來代替多余的表格單元和間隔 GIF。

　　使用 link 和 @import 來載入樣式。前者用于早期瀏覽器，后者給現(xiàn)在的瀏覽器。

　　<link href="basic.css" rel="stylesheet" type="text/css">

　　<style type="text/css" media="screen"><!--
　　 @import url(modern.css) screen;
　　 --></style>

5、結(jié)構(gòu)化標(biāo)記：所寫即所想，所想即所寫

　　即便書寫 CSS 很簡(jiǎn)單，使用 CSS 來排版卻真的需要一種和我們以往有些不同的思維方式。

　　我們排版時(shí)考慮的不是“這個(gè)東西放在這兒，那個(gè)東西放在那兒”，而是頁(yè)面中信息的類別和信息的結(jié)構(gòu)。

　　我們用 <h1> 標(biāo)記來標(biāo)示最重要的頭條；次一級(jí)的條目則用 <h2> 來標(biāo)記，以此類推；而段落則放在 <p> 標(biāo)記中。

　　這就是我們稱之為“結(jié)構(gòu)標(biāo)記”或“語(yǔ)義標(biāo)記”的東西。

　　你的內(nèi)容將不放在表格和表格元素中，取代它們的是 div 元素。還要給你的 div 元素安排一個(gè) id 或 class，不過這是為了描述它們的內(nèi)容或功能，而非它們的外觀。

　　當(dāng)你把某個(gè)對(duì)象設(shè)為斜體時(shí)，大概要么就是想強(qiáng)調(diào)它，要么是想 引用某個(gè)書中標(biāo)題吧？ 如果是前者，應(yīng)該用 <em>；如果是后者，其實(shí)得用 <cite>。

　　如果某個(gè)對(duì)象被標(biāo)記為粗體，事實(shí)上它應(yīng)該被標(biāo)記的是， <strong>。

　　如果你希望在某處添加一個(gè)換行，這大概是開始了一個(gè)新的開頭。如果不是開頭，會(huì)不會(huì)是某種在你的站點(diǎn)中出現(xiàn)過的class (類型)？在上面兩種情況下，你都應(yīng)該用 CSS 替換 <br>。

　　.foo {display:block}

　　考慮你需要導(dǎo)航的內(nèi)容是一些無(wú)序的鏈接這種情況：

　　用 <ul> 標(biāo)簽來編輯它們。

　　link1 
　　 link2 
　　 link3 
　　 link4 
　　 link5 
　　 水平導(dǎo)航條
　　 我們可以用 CSS 來控制這個(gè)列表顯示在網(wǎng)頁(yè)上的外觀。

　　通過使用 display:inline 我們可以創(chuàng)建水平導(dǎo)航條。

　　link1 
　　 link2 
　　 link3 
　　 link4 
　　 link5 
　　 這是上面這個(gè)導(dǎo)航條用到的代碼：

　　#nav1{
　　 margin-top: 1em;
　　 margin-bottom: 0.5em;
　　 }

　　#nav1 ul {
　　 background-color: silver;
　　 text-align: center;
　　 margin-left: 0;
　　 padding-left: 0;
　　 border-bottom: 1px solid gray
　　 }

　　#nav1 li {
　　 list-style-type: none;
　　 padding: 0.25em 1em;
　　 border-left: 1px solid white;
　　 display: inline
　　 }

　　#nav1 li:first-child {
　　 border: none;
　　 }

　　垂直導(dǎo)航條
　　 link1 
　　 link2 
　　 link3 
　　 link4 
　　 link5 
　　 這是垂直導(dǎo)航條的代碼：

　　#nav2 {
　　 background-color: silver;
　　 border: solid 1px gray;
　　 width: 8em
　　 }

　　#nav2 ul {
　　 list-style-type: none;
　　 margin: 0;
　　 padding: 0;
　　 border: none
　　 }

　　#nav2 li {
　　 margin: 0;
　　 padding: 0.25em 0.5em 0.25em 1em;
　　 border-top: 1px solid gray;
　　 width: 100%;
　　 display: block
　　 }

　　html>body #nav2 li {
　　 width: auto;
　　 }

　　#nav2 li:first-child {
　　 border: none
　　 }

6、從玩弄表格技巧到遵循 Web 標(biāo)準(zhǔn)：通盤考慮

　　如果你已經(jīng)把站點(diǎn)的內(nèi)容分好了類，那么是時(shí)候分析每個(gè)頁(yè)面，把它們按照邏輯關(guān)系進(jìn)行分解了。

　　主導(dǎo)航條 
　　 子導(dǎo)航條 
　　 頁(yè)眉與頁(yè)腳 
　　 內(nèi)容 
　　 相關(guān)信息 
　　 其他 
　　 注意分析由嵌套表格、空白分隔符和邊框元素組成的表格結(jié)構(gòu) (因?yàn)槲覀兿Ｍ阉鼈兲鎿Q為用 div 標(biāo)記組織的那種簡(jiǎn)單得多的表格結(jié)構(gòu))。

　　一旦你分析好頁(yè)面的結(jié)構(gòu)，就可以著手揭開表象，分析你現(xiàn)在的頁(yè)面代碼中可以轉(zhuǎn)換成結(jié)構(gòu)化標(biāo)記的那些地方。

　　作為一個(gè)完美主義者，消滅所有的 <font> 標(biāo)記和間隔 GIF 吧！ 
　　 同樣的，一并搞定 <b> 和 <br> 標(biāo)記。 
　　 去除表格中的那些外觀標(biāo)記 (bgcolor, background, 等等)。 
　　 把純粹用來表示外觀的那些 CSS 調(diào)用 (比如 <span class="header">) 改成結(jié)構(gòu)化的標(biāo)記。

7、把描述外觀的標(biāo)記改為描述結(jié)構(gòu)的標(biāo)記

　　你可以使用“查找加替換”(或者正則表達(dá)式)，不過最好的方法還是在瀏覽器里打開這個(gè)頁(yè)面，然后把文本復(fù)制粘貼到你的 HTML 編輯器里。

　　關(guān)鍵還是要用結(jié)構(gòu)化的方式來思考！僅僅把 <b> 標(biāo)記替換為 <strong> 是遠(yuǎn)遠(yuǎn)不夠的。

　　最重要的條目是哪個(gè)？用 <h1> 來標(biāo)記它。次要一點(diǎn)的就用 <h2>，依此類推。用 <p> 來標(biāo)記段落。把導(dǎo)航條標(biāo)記為無(wú)序列表。

　　選定一個(gè) DOCTYPE 來使用。(www.nfrencai.com推薦 XHTML tra nsitional，除非你是此道高手，否則別用 XHTML strict。)

8、把你的頁(yè)面合理分布在的 div 中

　　把你的主導(dǎo)航條放在一個(gè) id 屬性設(shè)為 mainnav 的 div 中，子導(dǎo)航條則放在一個(gè) id 或者 class 是 subnav 的 div 中。而頁(yè)腳類似這個(gè)形式：<div id="footer">，至于整個(gè)頁(yè)面，它被放在 <div id="content"> 里邊。

　　即便現(xiàn)在它還不怎么討人喜歡，但只要你開始給樣式表添加規(guī)則，它就會(huì)馬上變得可愛起來。

9、是開始自己編寫 CSS 的時(shí)候了

　　首先，給每個(gè) div 設(shè)置一個(gè)邊界。例如： div {border: 1px dotted gray; padding: .5em} 這可以幫助你完完整整地看到里邊的內(nèi)容，也不再需要卷動(dòng)屏幕了。

　　首先為以定義的元素編寫 CSS (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。)

　　盡量運(yùn)用上下文相關(guān)或者有遞歸下降結(jié)構(gòu)的選擇符。這可以使得你的標(biāo)記更清晰。例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 將能夠只能影響你的子導(dǎo)航欄的 div 中的列表項(xiàng)。

　　在盡可能多的瀏覽器下進(jìn)行測(cè)試，畢竟你可以讓朋友幫助你用它們自己的瀏覽器測(cè)試。


相關(guān)搜索：隨州網(wǎng)站建設(shè)

標(biāo)簽：