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

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

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

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

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

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

1.1 DIV與CSS簡(jiǎn)介

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

1.2 CSS技術(shù)的特點(diǎn)

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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

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