摘 要：作為一種重要的網(wǎng)頁布局方法技術(shù)，DIV+CSS技術(shù)對于改善網(wǎng)頁的傳輸速率及網(wǎng)頁表現(xiàn)效果具有重要的作用。本文首先對DIV+CSS技術(shù)進(jìn)行概述，然后具體分析了網(wǎng)頁設(shè)計中DIV+CSS技術(shù)應(yīng)用的優(yōu)勢與缺陷，以期為相關(guān)技術(shù)與研究人員提供參考。

關(guān)鍵詞：網(wǎng)頁設(shè)計；DIV+CSS技術(shù)；應(yīng)用；優(yōu)勢；缺陷

中圖分類號：TP393.092

原有的網(wǎng)頁布局設(shè)計通常采用表格嵌套內(nèi)容的方式來完成，此種方式雖在一定程度具有較高的可理解性且通過代碼完成，但其也同時存在較多的弊端。而DIV+CSS網(wǎng)頁布局技術(shù)，能夠依據(jù)網(wǎng)頁設(shè)計標(biāo)準(zhǔn)對不同對象進(jìn)行定位，對采用的CSS創(chuàng)建網(wǎng)站樣式與DIV定義網(wǎng)站結(jié)構(gòu)對于促進(jìn)網(wǎng)頁的維護(hù)與更新、提高網(wǎng)頁傳輸速率具有重要的推動作用。因此，加強(qiáng)有關(guān)網(wǎng)頁設(shè)計中DIV+CSS技術(shù)應(yīng)用的有關(guān)研究，對于改善網(wǎng)頁設(shè)計的質(zhì)量具有重要的現(xiàn)實意義。

1 DIV+CSS技術(shù)概述

1.1 DIV與CSS簡介

（1）DIV技術(shù)。DIV元素主要是為HTML文檔內(nèi)容提供背景結(jié)構(gòu)的因素，其能夠把文檔拆分為具有不同意義的多個模塊或區(qū)域，模塊內(nèi)容則由DIV的結(jié)束標(biāo)簽與開始標(biāo)簽構(gòu)成，而其所包含元素的性質(zhì)則由DIV標(biāo)簽的屬性來決定；（2）CSS技術(shù)。CSS技術(shù)是一種網(wǎng)頁制作的新技術(shù)，其又稱為層疊樣式表，主要用于調(diào)整網(wǎng)頁形式且能分離網(wǎng)頁內(nèi)容與樣式信息的一類標(biāo)記性語言。采用CSS技術(shù)能夠有效分離結(jié)構(gòu)與格式，并提高頁面布局的效果，進(jìn)而生成下載速度快、體積小巧的網(wǎng)頁。[1]

1.2 CSS技術(shù)的特點

傳統(tǒng)的網(wǎng)頁缺乏動態(tài)效果，且在網(wǎng)頁排版布局中存在較多局限，即使是充分利用HTML語言也要經(jīng)過重復(fù)測試采用完善信息排版的過程。而采用CSS技術(shù)具有以下特點：（1）有效改善頁面布局，采用CSS技術(shù)能夠從整體上把握HTML語言，且能通過屏幕對圖像位置進(jìn)行有效定位；（2）能夠提高圖片、文字等內(nèi)容結(jié)構(gòu)控制的靈活性，促進(jìn)網(wǎng)頁元素的精確定位；（3）CSS樣本表無需執(zhí)行程序、圖像、流格式、插件等過程和內(nèi)容，其只是簡單地文本，同HTML指令具有一致的速度性；（4）用戶主要感興趣的是網(wǎng)頁的內(nèi)容結(jié)構(gòu)，若使用戶能夠更有效的獲取這些信息，就必須使用格式控制來進(jìn)行，采用CSS技術(shù)便能夠更充分控制頁面布局，利用其獨立的CSS代碼就能控制全面控制頁面外觀。

2 網(wǎng)頁設(shè)計中DIV+CSS技術(shù)應(yīng)用的優(yōu)勢與缺陷

2.1 網(wǎng)頁設(shè)計中DIV+CSS技術(shù)應(yīng)用的優(yōu)勢

（1）與搜索引擎更友好。搜索引擎主要利用Spider程序?qū)?nèi)容站點進(jìn)行查找。Spider程序先從單個或多個簡單的頁面開始，待這些頁面完成掃描后在引入到其他頁面，然后再訪問Web頁面，重復(fù)進(jìn)行掃描直至無新頁面索引出現(xiàn)后才停止。采用原有的Table制作網(wǎng)頁時其代碼數(shù)量較多，而搜索引擎工作時需要將多余代碼清除，瀏覽文字相當(dāng)復(fù)雜；而采用DIV+CSS技術(shù)，其整體樣式都會儲存在CSS里，其正文中只存在與ID相關(guān)的布恩，這大幅度簡化了正文代碼與HTML代碼，使得正文更加明顯，搜索程序在較短的時間內(nèi)就能完成對頁面的掃描，其程序執(zhí)行效率得到有效改善，這對于提高收錄質(zhì)量具有重要作用。代碼簡化的網(wǎng)頁由于與搜索引擎的友好程度更好，其在搜索引擎中的評比也就會更靠前；[2]（2）更方便網(wǎng)頁的維護(hù)改版。當(dāng)采用Table對網(wǎng)頁進(jìn)行改版設(shè)計時，需要同時整合全部頁面的結(jié)構(gòu)代碼，所以其改版效率非常低。而采用CSS技術(shù)便能夠分離網(wǎng)頁中的樣式與展示內(nèi)容，即將網(wǎng)頁外觀信息從內(nèi)容中隔離進(jìn)行集中控制。當(dāng)需要對網(wǎng)頁外觀進(jìn)行改善時則指改變樣式中的設(shè)定部分，其他部分則無需進(jìn)行改變；其還能利用早期嵌套在網(wǎng)頁中的CSS設(shè)置獨立儲存在文本文件中，技術(shù)人員只需利用標(biāo)記區(qū)域內(nèi)容，從CSS內(nèi)查找對應(yīng)的ID便能對頁面進(jìn)行靈活修改，且不會對其他頁面布局樣式造成破壞；當(dāng)修改完CSS文件后，剩余的HTML文件可直接進(jìn)行套用，使技術(shù)人員無需對各個HTML文件進(jìn)行重復(fù)設(shè)定，這對于減少技術(shù)人員工作量、提高頁面維護(hù)改版的效率具有重要作用；（3）使頁面?zhèn)鬏斔俾矢?。部分網(wǎng)頁設(shè)計時為提高網(wǎng)頁整體外觀效果會使用較多的圖片，從而降低網(wǎng)頁的傳輸速率。采用CSS技術(shù)能夠靈活設(shè)定文字樣式，同時利用IE內(nèi)部的濾鏡插件，便很容易取代原有圖片具有的視覺效果。此種設(shè)計方式還能減小頁面占用體積，提高下載速率。相比較傳統(tǒng)的表格嵌套方式，DIV+CSS技術(shù)能夠?qū)㈨撁鎰澐殖啥鄠€區(qū)域，在頁面開啟時能夠逐層進(jìn)行加載，無需像表格嵌套間頁面儲存在一個較大的表格里，所以頁面的傳輸速率也就更快；（4）具有較高的視覺一致性。在采用Table進(jìn)行網(wǎng)頁制作時，對于不同區(qū)域及頁面之間的顯示效果保真程度不高，且通常網(wǎng)站建設(shè)由多人共同給完成，不同的技術(shù)人員會按照自身喜好進(jìn)行網(wǎng)頁設(shè)計，所以整體網(wǎng)頁設(shè)計出來的風(fēng)格杜洋，很難集中到同一個網(wǎng)站中。而采用DIV+CSS技術(shù)，能夠?qū)⒕W(wǎng)頁風(fēng)格進(jìn)行統(tǒng)一，并集中采用CSS文件對不同區(qū)域及頁面進(jìn)行控制，能夠有效避免各類頁面與區(qū)域之間的效果偏差；對于采用表格技術(shù)設(shè)計的網(wǎng)頁，當(dāng)改變操作系統(tǒng)及其分辨率時，頁面也會發(fā)生不同程度變形問題，而采用DIV+CSS技術(shù)，其對于不同的瀏覽器具有更強(qiáng)的適用性，CSS中包含的大量豐富樣式對于頁面處理更加靈活，且其能夠依據(jù)瀏覽器的不同采用同種程度的顯示效果并保證不出現(xiàn)變形。

2.2 網(wǎng)頁設(shè)計中DIV+CSS技術(shù)應(yīng)用缺陷

（1）DIV+CSS技術(shù)對于搜索引擎的優(yōu)化效用有限。當(dāng)前網(wǎng)頁制作的主要方式仍是Table技術(shù)與DIV+CSS技術(shù)，而搜索引擎并不依據(jù)網(wǎng)頁是采用CSS還是彪哥來進(jìn)行排序與收錄的，這在一定程度上解釋了原有表格布局制作網(wǎng)站的搜索結(jié)果相對靠前、而采用DIV+CSS技術(shù)制作的網(wǎng)站相對靠后的原因。從搜索引擎優(yōu)化的角度分析，網(wǎng)站優(yōu)化水平的高低主要依賴于不同網(wǎng)站間的連接、網(wǎng)站內(nèi)容和網(wǎng)站結(jié)構(gòu)等因素；[3]（2）DIV+CSS技術(shù)仍未全面兼容所有瀏覽器。采用CSS技術(shù)制作網(wǎng)站時，通常會使用單個或多個外部文件進(jìn)行支持，文件內(nèi)部會包含網(wǎng)頁中所需的圖片、字體大小與字體顏色等信息。雖然DIV+CSS技術(shù)在很大程度上具有了較高的普適性，但在一些瀏覽器中仍會出現(xiàn)反常問題，如在搜狗瀏覽器中能夠正常顯示的頁面，轉(zhuǎn)換到IE瀏覽器時由于解碼的不同會造成不同的頁面效果，情況嚴(yán)重時頁面則無法顯示。雖然異常問題中包含瀏覽器的缺陷，但仍存在DIV+CSS技術(shù)未能全面兼容所有瀏覽器的問題。如由于CSS樣式文件信息相對復(fù)雜，部分網(wǎng)站進(jìn)行飲引用時需要調(diào)動大量的CSS文件，當(dāng)CSS樣式文件引用過程中出現(xiàn)失誤時，則整個網(wǎng)站的信息都會發(fā)生亂碼，相應(yīng)也就出現(xiàn)了頁面顯示問題；（3）DIV+CSS技術(shù)應(yīng)用較為復(fù)雜。相比較Table制作技術(shù)，DIV+CSS技術(shù)在應(yīng)用時定位仍相對復(fù)雜；且在樣式表文件編制時通常采用文本編輯其進(jìn)行編寫，而采用表格布局則通常在可視化環(huán)境中進(jìn)行，代碼編寫的過程則相對繁瑣。

3 結(jié)束語

DIV+CSS技術(shù)的應(yīng)用質(zhì)量將直接關(guān)系著網(wǎng)頁運(yùn)行的整體質(zhì)量與水平，因此，相關(guān)技術(shù)與設(shè)計人員應(yīng)當(dāng)加強(qiáng)有關(guān)DIV+CSS技術(shù)應(yīng)用的研究，總結(jié)DIV+CSS技術(shù)應(yīng)用優(yōu)勢、缺陷及處理要點，以逐步改善DIV+CSS技術(shù)應(yīng)用質(zhì)量。

參考文獻(xiàn)：

[1]李雁南.基于XHTML標(biāo)準(zhǔn)的DIV+CSS網(wǎng)頁布局技術(shù)淺析[J].科技風(fēng)，2011（14）：74-75.

[2]漆昊晟，歐陽群.DIV+CSS網(wǎng)頁布局技術(shù)初探[J].科技廣場，2011（10）：61-62.

[3]高英.DIV+CSS網(wǎng)頁設(shè)計布局技巧分析[J].電子商務(wù)，2011（35）：57-58.

作者簡介：李君芳（1978.01-），女，河南汝州人，講師，研究方向：計算機(jī)應(yīng)用技術(shù)；吳雪毅（1979-），男，河南鄧州人，講師，研究方向：計算機(jī)應(yīng)用技術(shù)。

作者單位：漯河職業(yè)技術(shù)學(xué)院，河南漯河 462000