DIV+CSS網頁布局方法探討

【摘 要】在網頁設計中DIV+CSS網頁布局方法被越來越多的應用到，論文通過具體的實例分析了DIV+CSS的布局的技術方法，綜述了在布局當中的常用方法，并且結合Table 布局方式，在此基礎上提出了網頁布局方法的探究。

【關鍵詞】DIV CSS 網頁布局 方法

1 引言

傳統網頁布局的方法主要包含框架和表格。當利用表格的方式進行布局的時候快捷方便，但出于對版式的要求，一般需要插入許多的表格， 甚至有時還要對表格進行多層嵌套，這不僅延長了頁面打開的時間， 而且降低了網頁中代碼的可讀性， 增加維護成本，DIV+CSS布局方式使網頁結構和外觀相分離， 不但極大地簡化了代碼，而且使站點加載的速度變得快捷、維護也更加方便，無疑對傳統布局的網頁方式造成了極大的沖擊。除此之外，DIV+ CSS布局方式的使用，使傳統的網頁布局的不足得到很好的彌補，當前國內多數比較著名的網站都利用此類方式方法進布局， 給用戶帶來了全新的體驗模式。

2 DIV與CSS的介紹

2.1 DIV

DIV即指區塊， DIV一般用于定義HTML網頁上的區塊，將網頁中不同的段落或不同的內容封裝進區塊的起始與結束標記當中， 經過屬性設置以控制其中元素的特性。

2.2 CSS

CSS意指層疊樣式表，CSS 可以把HTML文件內容與樣式的定義相分離，只需制定定義樣式的CSS文件，同時讓所有的HTML文件調用已經定義的樣式，當需要更改HTML文件中任何部分的風格時，只需要將CSS文件打開進行樣式的更改就可以了，即可使相同的HTML內容顯現出不同的形式，這樣使網站更新與維護變得更為簡易。

2.3 DIV+CSS 的優點

2.3.1 網站的更新與維護更簡易

因為CSS文件能夠被多個網頁鏈接或使用，當需要重新布局網站頁面時，只要依照區塊的內容標記到CSS樣式的文件里，尋找到相應的ID，并進行簡單的修改即可。不需要在每一個HTML文件中進行重復的設置，使修改頁面變得更加簡捷，極大地提高了網站更新與維護的效率，節約網站的運營成本。

2.3.2 內容與表現相分離

即CSS代碼和HTML代碼相分離，CSS可以把樣式的部分單獨的置于獨立的樣式文件中，而在HTML的文件中只放置網頁需要顯示的內容，而網頁的內容表現的形式則可以完全通過CSS文件來實現，消除了大量的冗余代碼，解決頁面表現和結構混合在一起的問題。

2.3.3 搜索引擎中搜索的簡便

當使用DIV + CSS 網頁布局設計時，結構得到優化、代碼的精簡度提高、網頁內容更容易被搜索引擎采集到。當網頁搜索時，搜索引擎程序不需要去訪問CSS文件，可以直接提取HTML文件中DIV內容，這樣在更短時間可以搜索整個頁面。當一個頁面中包含許多的標記表格來布局，遇到多層的表格嵌套時，整個頁面往往會直接跳過或直接放棄嵌套的內容。因而運用DIV+CSS技術，讓搜索引擎收錄網站變得更加方便，提升搜索引擎的索引效率。

2.3.4 網頁加載迅速

當代碼寫在了CSS 文件中時，讓頁面體積變小、代碼簡潔，而且相較于表格嵌套方式而言，DIV+CSS賦予頁面更多的獨立區域，當要打開頁面時，不會在整個頁面局限于一個大表格里，而是逐層加載，提升了頁面加載速率。

2.3.5 維持網站風格和視覺的一致性

所有區域由CSS文件控制，針對分辨率及操作系統發生更改時，網頁用表格技術設計出來時會有變形的現象出現，而使用DIV + CSS技術可以讓頁面變得更加靈敏，并且不同的瀏覽器可以達到一致的顯示效果。

2.3.6 瀏覽器兼容性強

DIV + CSS 布局兼容性更強，所有的瀏覽器幾乎都可以運行，符合WEB的標準規范和發展趨勢，并且兼容性強大，在新開發的瀏覽器中也可以很好的運行。

3 網頁布局的發展

3.1 早期使用的網頁布局方法

早期網頁布局一般采用如下四種方法所示，這些方式都是較為常用的布局方式，一般由其中一種， 或是幾種布局方式的結合使用：隨著許多新上網設備的涌現和網絡技術的迅速發展，使以往的網頁布局方式變得不能適應新要求。

3.2 新WEB標準

針對表現、行為和結構三個部分，W3C 設定了大部分的標準，采用了很多新標準的優點，具有更少的組件和代碼、帶寬要求低、網站更易于維護、降低成本等，主要如下三點：

（1）表現標準語言CSS；

（2）結構化標準語言XML和XHTML；

（3）行為標準主要包括對象模型。

4 DIV+ CSS 網頁布局應用實例

4.1 三欄式自適應寬度布局

使用

設置的CSS文件代碼如下：

#main { float：right； height：500px； border：1px solid； width：68%； }

#container {margin：0 auto； width：80%；}

#footer { border：1px solid； height：60px； }

#header { margin-bottom：10px； height：100px；border：1px solid；}

#sidebar { float：left； height：500px； width：30%；border：1px solid；}

#content { width： 100%； height：500px； margin-bottom：10px；}

其中，border 屬性為solid，表示實線邊框；container的margin 屬性為0 auto，即指上下邊距為0，auto指左右邊距自動實現居中顯示；width 為設置屬性百分比的形式，當瀏覽器的窗口發生變化時，頁面的寬度會自動適合窗口的寬度。main 的float 屬性為right，sidebar 的float 屬性為left，實現中間豎欄的顯現效果。

4.2 實例

4.2.1構架分析

如一個網站關于運動用品的主頁，經過對分析主頁架構，下面將其中的各元素按不同的功能的劃分成以下的模塊：

頂部的部分，header，包含banner 圖片區、menu和logo；內容的部分，pagebody，包含主體內容和左右邊欄；底部的部分，包含版權信息和作者的郵箱地址等。從Div 布局與頁面構架來看，可得網頁Div 結構如下所示：

| body{} /* HTML 主體標簽*/

∟’#header{} /* 頭部標簽*/

∟’#container（） /* 放置整個頁面的div 標簽*/

∟’ #banner 、#menu 、#logo/* banner、menu、 logo標簽*/

∟ ’#sidebar{} /* 左右邊欄的標簽*/

∟ ’#pagebody{} /* 主體標簽*/

∟ ’#foot{} /* 頁腳標簽*/

∟ ’#main{} /* 主體內容標簽*/

以上標簽的名稱命名盡量做到透明清晰，以便其他人員能夠迅速理解模塊的含義以及標簽定義。當需要時，子標簽還可以父標簽的名稱作前綴，例如在main 層詳細區分時，可以命名main_right 、main_left等。

4.2.2 拆分模塊

依照Web的標準，將頁面的內容和表現分離，主要定義Div 的CSS 樣式。為了使今后的閱讀更簡潔，可考慮添加相關注釋，新建一個style.css樣式文件，代碼如下所示：

body{font：12px Tahoma； text-align：center； margin：0px；background：#fff；} /* 基本信息*/

#header{ height：219px；margin：0 auto； width：800px；background：#1F86C0；}/* 頁面頭部*/

#container{width：100%}

#banner{ margin：0 auto； height：180px；bwidth：800px； ackground：#1F86C0；}/* 頁面banner*/

#menu{ height：39px；margin：0 auto； width：800px； background：#737172；}/* 導航*/

#sidebar{ float：left； height：400px； width：38%； backgound：#9C4121；}/* 左邊欄*/

#foot{margin：0 auto； width：800px；height：50px；background：#7FA7C1；}/* 頁面的底部*/

#main{ float：right；width：62%； height：400px；background：#00ffff；}/* 主要內容*/

#pagebody{ margin：0 auto； width：800px；background：#ccff00；}/* 頁面的主體*/

定義的CSS 樣式中， 元素邊界的屬性值是0，并取消了默認的邊界。定container 元素寬度是100%，通過高度、寬度和邊界屬性確定header 的位置，定義了header 元素中的橫向分欄，二者分別為menu元素和banner元素，同樣以高度、寬度和邊界屬性定義了主體pagebody 的位置，而且運用浮動定位的屬性，分別定義main 元素的位置和縱向分欄sidebar ，同樣利用高度、寬度以及邊界屬性的定義確定了footer 元素的顯示位置和大小。

5 結論

隨著舊的頁面布局的局限性逐漸暴露， 新Web標準的優越性逐漸為人們所重視。運用DIV+ CSS 的網頁設計的流程與方法， 真正做到了行為、表現和結構的分離， 提高頁面加載的速度與網頁開發的效率，對網站更新和維護的效率也有很大的提升。傳統的表格布局模式正在被基于DIV+ CSS 的網頁設計方式逐漸取代， DIV+ CSS 的網頁布局方式正成為WEB開發的方向。

【參考文獻】

[1]曾順.精通CSS+DIV網頁樣式與布局[M].北京：人民郵電出版社，2007.

[2]王儉敏等.CSS+DIV網頁樣式與布局案例指導[M].北京：電子工業出版社，2009，4.