基于Web標(biāo)準(zhǔn)下的DIV+CSS網(wǎng)頁(yè)布局技術(shù)的應(yīng)用研究

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

關(guān)鍵詞：網(wǎng)頁(yè)布局；Web標(biāo)準(zhǔn)；DIV+CSS；優(yōu)勢(shì)；應(yīng)用

中圖分類號(hào)：TP393.092

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

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

1 Web標(biāo)準(zhǔn)及DIV+CSS簡(jiǎn)介

1.1 Web標(biāo)準(zhǔn)

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

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

1.2 DIV+CSS簡(jiǎn)介

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

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

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

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

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

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

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

（1）遵循Web標(biāo)準(zhǔn)化設(shè)計(jì)，表現(xiàn)形式和內(nèi)容的分離。

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

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

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

3 DIV+CSS技術(shù)進(jìn)行網(wǎng)頁(yè)布局應(yīng)用

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

最終效果圖如圖1所示。

3.1 劃分基本塊

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

3.2 CSS樣式設(shè)置

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

3.3 列表樣式的控制和超鏈接的設(shè)置

4 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

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