第7章Div+CSS布局網頁

CSS+Div是網站標準中常用的術語之一，CSS和Div的結構被越來越多的人采用，很多人都摒棄了表格而使用CSS來布局頁面，它的好處很多，可以使結構更加簡潔，定位更加靈活，CSS布局的最終目的是搭建完善的頁面架構。通常在XHTML網站設計標準中，不再使用表格定位技術，而是采用CSS+Div的方式實現各種定位。7.1CSS+Div的定義Div元素體現了網頁技術的一種延伸，是一種新的發展方向，有了Div元素，就可以在網頁中實現下拉菜單、圖片、文本的各種效果；CSS是用于創建網頁表現（樣式/美化）的樣式表的統稱，要通過CSS來設置Div標簽樣式，我們將這二者的聯合使用稱為CSS+Div。7.1CSS+Div的定義XHTML是目前國際上倡導的網站標準設計語言，因為XHTML具有網站設計語言的基本特點，這種CSS+Div模式的網站設計具有一定的優勢。首先，CSS的優勢表現在簡潔的代碼。對于一個大型網站來說，可以節省大量帶寬。而且眾所周知，搜索引擎喜歡簡潔的代碼，因此使用CSS+Div的Web標準制作的網站具有更易被搜索引擎搜索的優勢。其次，CSS+Div使得網站改版相對簡單，很多問題只需要改變CSS而不需要改動程序就可以解決，從而降低了網站改版的成本。7.1.1CSS+Div的優勢7.1CSS+Div的定義7.1.2CSS+Div的問題盡管CSS+Div具有一定的優勢，不過現階段CSS+Div網站建設存在的問題也比較明顯。7.2表格布局與CSS布局的區別很多人也許會覺得，有時候使用HTML一樣可以實現頁面樣式的設置，那為什么還要使用CSS呢？接下來，從兩個網頁的效果分析一下使用CSS的必要性。7.3盒子模式什么是CSS盒子模式呢？為什么叫它是盒子？首先說說在網頁設計中常聽到的屬性名：內容（Content）、填充（Padding）、邊框（Border）、邊（Margin）。CSS盒子模式具備這些屬性，如圖7-5所示。7.4可視化布局塊

在“設計”視圖中，可以使CSS布局塊可視化。CSS布局塊是一個HTML頁面元素，可以將它定位在頁面上的任意位置。具體而言，CSS布局塊是不帶“display:inline；”的Div標簽，或者是包括“display:block;”、“position:absolute;”或“position:relative；”CSS聲明的任何其他頁面元素。下面是幾個在Dreamweaver中被視為CSS布局塊的元素的示例。7.5CSS網頁布局如果想要制作出既美觀、使用起來又方便的網站，那么把網站布局設計好是十分必要的。設計的布局是指把文本、圖像、符號等各種構成要素在指定的空間內進行合理的安排配置的工作。在網頁設計中布局的概念也是差不多的，網頁設計的布局就是把進入網頁的各種構成要素（文字、圖像、圖表、表單等）在網頁瀏覽器中有效地排列起來。網站的文字或圖像等網頁的構成要素配置是否協調，將決定頁面給人的感覺及其實用性。網站的布局不是盲目地在網頁里羅列各種構成要素。如何才能實現網頁構成的目的，使網站看起來既美觀又實用，這才是每一個設計網頁布局的人應該首先考慮到的問題。如果網頁布局不合理，則會在向用戶傳達網頁內容的時候發生困難，也不會讓人對其產生興趣。因此，為了能夠設計出既美觀、新穎，又使用方便的網頁，有必要多多參考優秀的布局方法。在仔細研究那些優秀的布局方式的同時，對如何在有限的空間里把頁面中豐富多彩的內容更加有機地結合起來，如何營造出一種良好的視覺效果這些問題進行認真思考。7.5.1網站布局設計原則7.5CSS網頁布局概述7.5.2CSS網頁布局分類1．一列固定寬度2.一列自適應3.一列固定寬度居中4．二列固定寬度5.二列寬度自適應6.右欄寬度自適應7.二列固定寬度居中8.三列浮動中間列寬度自適應9.高度自適應7.6知識與技能梳理

盡管CSS+Div具有一定的優勢，不過現階段CSS+Div網站建設存在的問題也比較明顯，CSS+Div能否優化搜索引擎取決于網頁設計的專業水平而不是CSS+Div本身。CSS+Div網頁設計并不能保證網頁對