摘 要：傳統(tǒng)頁面布局的弊端逐漸顯露，新Web標準的重要性越來越被重視，本文主要討論DIV+CSS網(wǎng)頁布局技術，總結(jié)了其特點和優(yōu)勢，以Dreamweaver CS5為開發(fā)平臺，講解用該布局技術實現(xiàn)網(wǎng)頁設計的過程，給出相關方法和步驟。

關鍵詞：網(wǎng)頁布局；Web標準；DIV+CSS；優(yōu)勢；應用

中圖分類號：TP393.092

傳統(tǒng)的網(wǎng)頁布局設計方法大多采用表格布局及嵌套表格的方式來實現(xiàn)，其使用簡單靈活，定位圖片和文本非常方便，制作速度快，但數(shù)據(jù)的組織與顯示會產(chǎn)生更多的冗余代碼，表格嵌套使瀏覽器解析緩慢，網(wǎng)頁表現(xiàn)層與結(jié)構層混在一起，代碼維護、更新麻煩。

隨著Web標準化設計理念的普及，基于DIV+CSS的布局方式開始流行，目前小到個人網(wǎng)站大到門戶網(wǎng)站都逐漸采用DIV+CSS進行網(wǎng)頁的布局，它彌補了表格布局的一些不足，具有明顯優(yōu)勢，獲得業(yè)內(nèi)的廣泛認可和應用。

1 Web標準及DIV+CSS簡介

1.1 Web標準

Web標準不是指某一個標準，而是一系列標準的集合，由W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）和其他標準組織制定。其目的在于創(chuàng)建一個統(tǒng)一的用于Web表現(xiàn)層的技術標準，以便通過不同瀏覽器或終端設備向最終用戶展示信息內(nèi)容?？梢院唵蔚膶eb標準分成三大部分：結(jié)構（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。網(wǎng)頁設計要符合Web標準其實就是對網(wǎng)頁的結(jié)構、表現(xiàn)與行為進行分離，即表現(xiàn)與內(nèi)容分離。

采用新標準之后可以使網(wǎng)頁下載速度更快；內(nèi)容可以被更廣泛的設備（如屏幕閱讀器、手持設備或其它支持上網(wǎng)的新型設備）所訪問；更少的代碼和組件，網(wǎng)站易于維護；帶寬要求低，成本降低等等。

1.2 DIV+CSS簡介

DIV，中文理解為“層”的概念，是用來為HTML文檔中的塊內(nèi)容設置結(jié)構和背景的元素，它相當于一個容器，由起始標簽

之間的所有內(nèi)容構成，在它里面可以內(nèi)嵌表格、文本等HTML代碼。其所包含的元素特性由DIV標簽的屬性或者通過樣式表格式化這個塊來控制。

CSS，中文譯作“層疊樣式表”，是一種格式化網(wǎng)頁的標準方式，利用它可以控制大多數(shù)傳統(tǒng)的文本格式，精確地控制頁面的布局、顏色、背景和其他效果。通過CSS使用豐富靈活的樣式可設計出更美觀的網(wǎng)頁，且通過對代碼的簡單修改可實現(xiàn)對頁面的批量修改，使得網(wǎng)頁的設計和維護更有效率。

2 網(wǎng)頁中采用DIV+CSS的優(yōu)勢

利用DIV+CSS布局網(wǎng)頁是一種盒子模式的開發(fā)技術。它指定元素如何顯示以及在某種程度上如何相互交互。頁面上的每個元素都被瀏覽器看成是一個矩形的盒子，這個盒子由元素的內(nèi)容（content）、填充（padding）、邊框（border）和邊界（magin）組成。盒子本身有邊框，盒子里面的內(nèi)容到盒子邊框之間的距離為填充，而盒子邊框外和其它盒子之間的為邊界。

DIV盒子模型結(jié)構把各部分內(nèi)容劃分到不同的區(qū)域，然后用CSS來定義盒子的位置、大小、邊框、內(nèi)外邊距、排列方式等等。簡單地說，DIV用來搭建網(wǎng)站的結(jié)構（框架），CSS用來創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化）?？梢钥闯觯贒IV+CSS的布局方式中修改網(wǎng)頁的內(nèi)容不會改變樣式的表現(xiàn)，且修改CSS樣式表也不會影響到網(wǎng)頁的布局。

用這種方式布局的優(yōu)勢在于：

（1）遵循Web標準化設計，表現(xiàn)形式和內(nèi)容的分離。

（2）采用DIV+CSS技術的網(wǎng)頁，與搜索引擎的關系更加友好，提高搜索引擎對網(wǎng)頁的索引效率。

（3）代碼簡潔，提高頁面瀏覽速度，節(jié)省大量的帶寬。

（4）縮短改版時間，更有利于后期的維護和管理工作。

3 DIV+CSS技術進行網(wǎng)頁布局應用

利用DIV+CSS理念進行布局是先從整體上進行標記的分塊，然后對每個分塊進行CSS定位，添加相應樣式，最后在各個塊中添加內(nèi)容。下面以某企業(yè)網(wǎng)站的三欄布局頁面為例，簡要介紹其布局方法。

最終效果圖如圖1所示。

3.1 劃分基本塊

首先把網(wǎng)頁page劃分成三個基本大塊，top是網(wǎng)頁的頂部主要放置網(wǎng)站logo 和導航菜單menu，content部分放置頁面的主要內(nèi)容，又分為left側(cè)欄和main主體區(qū)域，bottom是網(wǎng)頁底部主要放置網(wǎng)頁版權信息。

3.2 CSS樣式設置

創(chuàng)建css文件，命名為css.css，將樣式表寫在獨立的文件中。根據(jù)網(wǎng)頁中塊的劃分情況，分別為不同的DIV進行CSS 樣式的設置。設置如下：

3.3 列表樣式的控制和超鏈接的設置

4 結(jié)束語

本文介紹了DIV+CSS布局技術的特點和優(yōu)勢，結(jié)合實例講述利用其進行網(wǎng)頁布局的方法和過程，并給出思路和核心代碼。DIV+CSS是未來網(wǎng)頁布局的主流趨勢，但是網(wǎng)頁設計人員也不能忽視該技術的一些不足，如編寫樣式表文件一般使用文本編輯器進行編寫，相比較表格布局在所見即所得的可視化環(huán)境下進行，這一過程往往比較枯燥；另該技術尚未兼容所有瀏覽器，在部分瀏覽器中仍然會有異常出現(xiàn)，由于CSS樣式文件往往信息復雜，有些網(wǎng)站引用到比較龐大的CSS文件時一旦文件調(diào)用出現(xiàn)異常，那個整個網(wǎng)站的信息將出現(xiàn)混亂，面目全非。想把DIV+CSS技術運用的更好，還需要更多的學習積累和實踐經(jīng)驗。

參考文獻：

[1]趙元媛.網(wǎng)頁設計中布局方式之比較[J].信息技術，2011.

[2]劉軍華，陶永進.DIV+CSS網(wǎng)頁布局技術中盒子模型的應用研究[J].長沙通信職業(yè)技術學院學報，2012（04）.

[3]高川程.淺談基于DIV+CSS的網(wǎng)頁布局技術應用研究[J].計算機光盤軟件與應用，2013.

作者簡介：沈亮亮（1980-），女，湖南湘鄉(xiāng)人，碩士，講師，研究方向：計算機技術應用。

作者單位：建東職業(yè)技術學院，江蘇常州 213022