網(wǎng)頁(yè)設(shè)計(jì)中的DIV+CSS布局技術(shù)運(yùn)用研究

【摘要】文章中以DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用為重點(diǎn)，對(duì)其具體的運(yùn)用方法進(jìn)行了探討，從而得出DIV+CSS布局技術(shù)對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的重要推動(dòng)意義。

【關(guān)鍵詞】網(wǎng)頁(yè)設(shè)計(jì)；DIV+CSS布局技術(shù)；圖層；運(yùn)用

一般情況下，網(wǎng)頁(yè)設(shè)計(jì)主要是以Table形式為主，其主要原因在于Table在布局設(shè)計(jì)上具有一定的簡(jiǎn)便性、操作簡(jiǎn)便、速度快的特點(diǎn)。網(wǎng)頁(yè)設(shè)計(jì)人員可以利用圖像編輯器對(duì)圖片進(jìn)行剪切等操作，在編輯器中形成最終成像。但是Table的源代碼較為復(fù)雜，且頁(yè)面經(jīng)常和Table混雜在一起，導(dǎo)致信息的查詢十分困難[1]。DIV+CSS布局技術(shù)應(yīng)用很好的解決了這一問題，不僅提升了網(wǎng)頁(yè)的瀏覽速度，同時(shí)也將傳統(tǒng)網(wǎng)頁(yè)格式進(jìn)行了優(yōu)化，實(shí)現(xiàn)了CSS共享。文章中主要針對(duì)DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用進(jìn)行了思考。

1 DIV+CSS布局技術(shù)

1.1 DIV技術(shù)

所謂DIV+CSS布局技術(shù)，也就是在XHTML網(wǎng)站中得以應(yīng)用的布局技術(shù)，這一技術(shù)脫離了傳統(tǒng)的Table技術(shù)，通過DIV+CSS的形式完成各個(gè)網(wǎng)頁(yè)中的定位。其中DIV元素主要是為HTML文檔提供結(jié)構(gòu)與背景的元素，DIV元素能夠?qū)⑽臋n分割成幾個(gè)不同意義的模塊，而DIV中的起始標(biāo)簽與結(jié)束標(biāo)簽之間所涵蓋的所有內(nèi)容，都是組成該模塊的主要元素，這些元素屬性是受DIV標(biāo)簽屬性影響進(jìn)行控制的。

1.2 CSS

CSS為層疊樣式表，主要作用于網(wǎng)頁(yè)樣式的控制，也是分離樣式信息和網(wǎng)頁(yè)內(nèi)容的標(biāo)記性語(yǔ)言，通過CSS的運(yùn)用，能夠?qū)㈨?yè)面布局進(jìn)行很好的控制，并實(shí)現(xiàn)結(jié)構(gòu)和格式分離，從而通過相關(guān)技術(shù)的運(yùn)用制作下載速度更加快捷、體積更小的網(wǎng)頁(yè)。

1.2.1 CSS語(yǔ)法

CSS的基本語(yǔ)法為 Selector{Property： value；}，Selector為選擇符，Property是該命令的基本屬性，value是具體數(shù)值[2]。Property和value之間需要以冒號(hào)分隔開，如果出現(xiàn)多個(gè)定義的現(xiàn)象，需要用分號(hào)進(jìn)行分隔，例如下列CSS語(yǔ)法：

2 DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用

DIV+CSS布局技術(shù)在網(wǎng)頁(yè)布局中加以運(yùn)用，首先要?jiǎng)澐只緟^(qū)塊，一般是將網(wǎng)頁(yè)劃分為幾個(gè)模塊，并分別設(shè)置各個(gè)模塊中的具體內(nèi)容，例如頁(yè)面頭部、頁(yè)面主要內(nèi)容、頁(yè)腳等；其次需要利用ul/li元素顯示網(wǎng)頁(yè)信息列表，ul/li元素可以完成網(wǎng)頁(yè)結(jié)構(gòu)化列表的劃分，并且主要運(yùn)用于網(wǎng)頁(yè)導(dǎo)航菜單設(shè)置、主要新聞標(biāo)題列表與信息等元素[3]；最后，進(jìn)行動(dòng)態(tài)鏈接設(shè)計(jì)。動(dòng)態(tài)鏈接在網(wǎng)頁(yè)設(shè)計(jì)中的一個(gè)重點(diǎn)內(nèi)容，通常鏈接主要分為以下幾種不同的狀態(tài)，即a：link、a：visited、a：hover、a：active，這幾種狀態(tài)分別表示的是默認(rèn)狀態(tài)、訪問過狀態(tài)、鼠標(biāo)經(jīng)過狀態(tài)以及激活狀態(tài)。對(duì)其進(jìn)行定義時(shí)，若要全部定義，那么定義的順序?qū)⒉荒茈S意更改，也就是以link、visited、hover、active的順序進(jìn)行定義。

將DIV+CSS應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)中，也可以將該布局技術(shù)作為網(wǎng)頁(yè)設(shè)計(jì)的基準(zhǔn)，輔以相應(yīng)的設(shè)計(jì)手段，實(shí)現(xiàn)網(wǎng)頁(yè)的設(shè)計(jì)。在設(shè)計(jì)的過程中，一般體現(xiàn)為以下幾點(diǎn)內(nèi)容：① 改變傳統(tǒng)的網(wǎng)頁(yè)制作思路。以往進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，要先對(duì)網(wǎng)頁(yè)的外觀進(jìn)行全面的考慮，協(xié)調(diào)色彩搭配的合理性與美觀性，而運(yùn)用DIV+CSS布局技術(shù)之后，則是要實(shí)現(xiàn)對(duì)頁(yè)面內(nèi)容語(yǔ)義以及結(jié)構(gòu)進(jìn)行考慮。所以，在DIV+CSS布局技術(shù)的運(yùn)用過程中，設(shè)計(jì)人員要將傳統(tǒng)的設(shè)計(jì)觀念轉(zhuǎn)變。② 轉(zhuǎn)變?cè)O(shè)計(jì)重點(diǎn)。運(yùn)用DIV+CSS布局技術(shù)，會(huì)降低Table所發(fā)揮的功能作用，將作為基礎(chǔ)元素應(yīng)用于網(wǎng)頁(yè)的設(shè)計(jì)，也就是作為顯示組織數(shù)據(jù)用，無法再作為網(wǎng)頁(yè)布局主要工具發(fā)揮作用。所以，設(shè)計(jì)人員在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的過程中，需要轉(zhuǎn)變?cè)O(shè)計(jì)重點(diǎn)，將目光放在DIV+CSS布局技術(shù)中。盡管CSS一直以來都是網(wǎng)頁(yè)設(shè)計(jì)中的重要內(nèi)容，然而其主要作用只是加強(qiáng)網(wǎng)頁(yè)特殊效果，在轉(zhuǎn)變?cè)O(shè)計(jì)重點(diǎn)之后，CSS元素可以應(yīng)用于網(wǎng)頁(yè)的布局設(shè)計(jì)，這也為加深設(shè)計(jì)人員對(duì)DIV+CSS布局技術(shù)的理解發(fā)揮了重要作用。另外，XHTML語(yǔ)言也是網(wǎng)頁(yè)設(shè)計(jì)中的重點(diǎn)內(nèi)容，在運(yùn)用DIV+CSS布局技術(shù)之后，網(wǎng)頁(yè)布局的代碼需要手工編寫，所以，設(shè)計(jì)人員也要能夠熟練的運(yùn)用XHTML語(yǔ)言。

結(jié)束語(yǔ)：

DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中加以運(yùn)用，不僅能夠突破傳統(tǒng)設(shè)計(jì)中存在的局限性，同時(shí)也可以優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)格式，在原有的基礎(chǔ)上將網(wǎng)頁(yè)內(nèi)容與排版進(jìn)行優(yōu)化。文章中從網(wǎng)頁(yè)設(shè)計(jì)的幾個(gè)階段，對(duì) DIV+CSS布局技術(shù)在其中的運(yùn)用進(jìn)行了闡述，希望能夠?yàn)榻窈缶W(wǎng)頁(yè)設(shè)計(jì)帶來更大的優(yōu)勢(shì)。

參考文獻(xiàn)：

[1]鄭寧寧. 淺析DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)技術(shù)[J]. 山東省農(nóng)業(yè)管理干部學(xué)院學(xué)報(bào)，2008，06：169-170.

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

[3]李雙遠(yuǎn)，李阿輝. DIV+CSS技術(shù)在網(wǎng)頁(yè)布局中的應(yīng)用實(shí)現(xiàn)[J]. 吉林化工學(xué)院學(xué)報(bào)，2014，03：90-93.

作者簡(jiǎn)介：

郭亞東（1973-），女，漢，北京，講師，碩士，從事計(jì)算機(jī)信息管理，數(shù)據(jù)分析，軟件開發(fā)與設(shè)計(jì)的研究。