初探ＣＳＳ＋ＤＩＶ網(wǎng)頁布局
2009-07-02 08:36:00王林祺
新媒體研究 2009年10期
王林祺
[摘要]主要從網(wǎng)頁布局的標準，從傳統(tǒng)表格布局的缺陷，到CSS布局的優(yōu)點，以及CSS布局常見布局方式的分析進行論述。
[關(guān)鍵詞]CSS DIV 布局 WEB標準
中圖分類號：TP3文獻標識碼：A文章編號：1671－7597（2009）0520045－01
基于WEB標準的網(wǎng)站設(shè)計的核心在于如何使用眾多WEB便準中的各項技術(shù)來達到表現(xiàn)與內(nèi)容的分離，即網(wǎng)站的結(jié)構(gòu)、表現(xiàn)和行為三者的分離。只有真正實現(xiàn)了結(jié)構(gòu)分離的網(wǎng)頁設(shè)計，才能真正意義上的符合WEB標準的網(wǎng)頁設(shè)計。
一、傳統(tǒng)表格布局的缺陷
傳統(tǒng)表格布局方式實際上是利用表格元素具有無邊框的特性。由于表格元素中可以顯示表格的邊框為0，即不顯示邊框，因此可以在網(wǎng)頁中的各個元素按版式劃分放入表格的各個單元格中，從而實現(xiàn)復雜的排版組合。
表格布局的代碼最常見的是在HTML標簽中間加入大量的設(shè)計代碼，如width=100%，border=0等，表格布局的混合代碼就這樣編寫的。大量的樣式設(shè)計代碼混雜在表格和單元格中，使得可讀性大大降低，維護成本也相對提高。盡管使用DW等網(wǎng)頁制作工具進行可視化操作，但不可能幫助縮減代碼或刪除重復的代碼。
復雜的表格設(shè)計使得設(shè)計極為不易，修改更為復雜，最后生成的網(wǎng)頁代碼除了表格本身的代碼，還有許多沒有任何意義的圖像占位符及其他元素，文件量龐大，最終導致瀏覽器下載及解析速度變慢。
二、CSS布局
使用CSS布局可以從根本上解決表格布局帶來的問題。CSS布局的重點不在表格元素的設(shè)計上，而是采用另外一元素DIV。DIV可以理解為層或者是塊。DIV是一種比表格簡單的元素，從語法上只有
這樣簡單的定義。DIV的功能僅僅是將一段信息標記出來用于后期樣式的定義。通過使用DIV，可以將網(wǎng)頁中的各個元素劃分到各個DIV中，成為網(wǎng)頁中的結(jié)構(gòu)主體，而樣式表現(xiàn)由CSS完成。DIV在使用時不再需要像表格一樣通過單元格來組織版式，通過CSS強大的樣式定義功能可以比表格更簡單更自由地來控制頁面版式和樣式。
三、CSS入門的幾個誤區(qū)
（一）不要用傳統(tǒng)的表格思維來嵌套DIV。CSS布局就是將原來用table的地方用DIV來替代，原來是表格嵌套，現(xiàn)在是DIV嵌套。這種觀點是錯誤的。
使用WEB標準的目的是分離內(nèi)容和表現(xiàn)。使用CSS布局，內(nèi)容僅僅是一次羅列下來，只有結(jié)構(gòu)，沒有任何的樣式。通過CSS樣式定義每一塊中的內(nèi)容，才表現(xiàn)出來。這樣制作的頁面才是內(nèi)容和表現(xiàn)分離，也就是說，當去掉CSS文件后，剩下的就只有內(nèi)容。這樣才能在手機、PDA上閱讀，才能隨時修改CSS實現(xiàn)改版。
（二）不必為每塊內(nèi)容都建立ID。我們知道內(nèi)容都是有結(jié)構(gòu)的，理解表現(xiàn)和結(jié)構(gòu)相分離，相同的結(jié)構(gòu)的內(nèi)容我們可以用同一個樣式來定義，比如相當級別的標題、正文和圖片。對于多次引用的樣式可以用Class來定義而不需要每個都用ID；另外也不是說一定要用
，也可以使用
來代替，同樣是塊級元素，一樣具有盒模型的7個參數(shù)，
僅僅方便浮動。
四、CSS網(wǎng)頁布局分類
1．一列固定寬度。一列布局是所有布局的基礎(chǔ)，也是最簡單的布局形式，即一種固定寬度的布局樣式。DIV在默認狀態(tài)下，寬度將占據(jù)整行的空間，因此當設(shè)置了寬度屬性后，DIV寬度將變?yōu)樵O(shè)置的寬度。
2．一列自適應。自適應布局是網(wǎng)頁設(shè)計中常見的布局形式。自適應的布局能夠根據(jù)瀏覽器窗口的大小，自動改變其寬度或高度值，是一種非常靈活的布局形式。良好的自適應布局網(wǎng)站對不同分辨率的顯示器都能提供最好的顯示效果。實際上DIV在默認狀態(tài)下展區(qū)整行的空間，便是寬度100%的自適應布局的表現(xiàn)形式。一列自適應布局只需要將寬度由固定值改為百分比的形式即可完成。
CSS的大部分數(shù)值作為參數(shù)的樣式屬性都提供百分比值。Width（寬度）屬性也不例外。如將寬度設(shè)置為80%，則DIV的寬度就變?yōu)闉g覽器寬度的80%，當瀏覽器窗口的大小調(diào)整時，其寬度還將維持在瀏覽器當前寬度比例的80%。
3．一列固定寬度居中。頁面整體居中是網(wǎng)頁設(shè)計中常見的形式，在傳統(tǒng)表格布局中，我們可以使用表格的 align屬性來實現(xiàn)。DIV本身也支持該屬性，但在CSS布局中為了實現(xiàn)表格與內(nèi)容分離，因此在設(shè)置居中屬性時，通過margin屬性來控制對象的上下左右四個方向的外邊距。Margin屬性中可以直接使用數(shù)據(jù)，也支持“auto”，即自動判斷邊距。如果將左右邊距設(shè)置為auto，瀏覽器就會將DIV左右邊距設(shè)置為相同，從而實現(xiàn)居中效果。
4．兩列固定寬度。我們知道DIV用于對某一個區(qū)域的標識，兩列的布局需要采用兩個DIV。兩列固定寬度的實現(xiàn)需要新的屬性float。該屬性用來控制對象浮動布局方式。
Float是CSS布局非常強大的布局功能。也是理解CSS布局的關(guān)鍵問題所在。在CSS中，包括DIV在內(nèi)的任何元素都可以以浮動的方式進行顯示。
浮動是一種非常先進的布局方式，它能夠改變頁面中對象的前后流動順序，這樣可以使內(nèi)容的排版變得簡單而且具有良好的伸縮性。
Float屬性有三個值，none表示對象不浮動。使用left時，表示右側(cè)對象將流到當前對象左側(cè)。使用right時，表示左側(cè)對象將移動到當前對象的右側(cè)。
要實現(xiàn)兩列的布局的話，定義左欄和右欄中的float屬性都為“l(fā)eft”。這樣右欄的內(nèi)容將流入到左欄的右邊，并根據(jù)左欄的寬度，自動流入并貼至左欄，而貼近的程度則由左欄的右邊距和右欄的左邊距來控制，不需要一欄對象本身的寬度值。
浮動式布局使得頁面的大部分內(nèi)容都可以由瀏覽器來自動調(diào)試之間的關(guān)系，使我們能夠?qū)Ｗ⒂跇邮皆O(shè)計而非其相互之間的浮動關(guān)系，我們只需要簡單地設(shè)置浮動方向便可以完成對象的布局分布。
5．三列浮動中間列寬度自適應。如果要求左欄和右欄固定寬度，中間欄需要在左欄和右欄中間，并根據(jù)左右欄的寬度自動調(diào)整間距。需要實現(xiàn)這樣的布局，就需要使用position屬性來定位。
將左欄的position設(shè)置為absolute，并將top和left設(shè)置為0px。將右欄的position設(shè)置為absolute，并將top和right設(shè)置為0px。將中間欄設(shè)置margin屬性中l(wèi)eft和right設(shè)置104px（該參數(shù)根據(jù)左右欄的寬度設(shè)置，只要略大于左右欄寬度即可），用于實現(xiàn)兩邊自適應寬度。
五、結(jié)語
使用CSS+DIV布局，真正實現(xiàn)了結(jié)構(gòu)、表現(xiàn)和行為的分離。提高了網(wǎng)頁開發(fā)的效率和頁面下載的速度，提高了網(wǎng)站維護和修改的效率。
參考文獻：
[1]謝君英，CSS與Dreamweaver CS3完美網(wǎng)頁設(shè)計，北京：人民郵電出版社，2009.1.
[2]王海濤，CSS權(quán)威教程（第3版），北京：清華大學出版社，2008.9.
