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

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

中圖分類號：TP393.092

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

1 DIV+CSS技術概述

1.1 DIV與CSS簡介

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

1.2 CSS技術的特點

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

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

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

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

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

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

3 結束語

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

參考文獻：

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

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

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

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

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