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

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

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

一般情況下，網(wǎng)頁設(shè)計主要是以Table形式為主，其主要原因在于Table在布局設(shè)計上具有一定的簡便性、操作簡便、速度快的特點。網(wǎng)頁設(shè)計人員可以利用圖像編輯器對圖片進(jìn)行剪切等操作，在編輯器中形成最終成像。但是Table的源代碼較為復(fù)雜，且頁面經(jīng)常和Table混雜在一起，導(dǎo)致信息的查詢十分困難[1]。DIV+CSS布局技術(shù)應(yīng)用很好的解決了這一問題，不僅提升了網(wǎng)頁的瀏覽速度，同時也將傳統(tǒng)網(wǎng)頁格式進(jìn)行了優(yōu)化，實現(xiàn)了CSS共享。文章中主要針對DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計中的運用進(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的形式完成各個網(wǎng)頁中的定位。其中DIV元素主要是為HTML文檔提供結(jié)構(gòu)與背景的元素，DIV元素能夠?qū)⑽臋n分割成幾個不同意義的模塊，而DIV中的起始標(biāo)簽與結(jié)束標(biāo)簽之間所涵蓋的所有內(nèi)容，都是組成該模塊的主要元素，這些元素屬性是受DIV標(biāo)簽屬性影響進(jìn)行控制的。

1.2 CSS

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

1.2.1 CSS語法

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

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

DIV+CSS布局技術(shù)在網(wǎng)頁布局中加以運用，首先要劃分基本區(qū)塊，一般是將網(wǎng)頁劃分為幾個模塊，并分別設(shè)置各個模塊中的具體內(nèi)容，例如頁面頭部、頁面主要內(nèi)容、頁腳等；其次需要利用ul/li元素顯示網(wǎng)頁信息列表，ul/li元素可以完成網(wǎng)頁結(jié)構(gòu)化列表的劃分，并且主要運用于網(wǎng)頁導(dǎo)航菜單設(shè)置、主要新聞標(biāo)題列表與信息等元素[3]；最后，進(jìn)行動態(tài)鏈接設(shè)計。動態(tài)鏈接在網(wǎng)頁設(shè)計中的一個重點內(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)。對其進(jìn)行定義時，若要全部定義，那么定義的順序?qū)⒉荒茈S意更改，也就是以link、visited、hover、active的順序進(jìn)行定義。

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

結(jié)束語：

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

參考文獻(xiàn)：

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

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

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

作者簡介：

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