張巖

[摘 要]Web標(biāo)準(zhǔn)在國(guó)內(nèi)的逐漸普及，網(wǎng)站隨著時(shí)代不斷重構(gòu)，應(yīng)深入細(xì)致地分析DIV+CSS在動(dòng)態(tài)的網(wǎng)站設(shè)計(jì)中的簡(jiǎn)潔、適用性的技術(shù)優(yōu)勢(shì)，探討動(dòng)態(tài)ASP網(wǎng)站設(shè)計(jì)中使用DIV+CSS的注意事項(xiàng)。

[關(guān)鍵詞]DIV CSS ASP 網(wǎng)站設(shè)計(jì)

[中圖分類(lèi)號(hào)] TP393[文獻(xiàn)標(biāo)識(shí)碼] A[文章編號(hào)] 2095—3437（2012）09—0060—02

一、幾組重要概念

（一）動(dòng)態(tài)服務(wù)器主頁(yè)ASP

ASP是用來(lái)寫(xiě)動(dòng)態(tài)網(wǎng)頁(yè)的一種語(yǔ)言。創(chuàng)建動(dòng)態(tài)web頁(yè)，需要?jiǎng)討B(tài)服務(wù)器主頁(yè)（Active Server Page）的縮寫(xiě)為ASP。同時(shí)，web生成應(yīng)用程序，也離不開(kāi)ASP頁(yè)的HTML標(biāo)記，少不了文本與腳本命令文件的參與。動(dòng)態(tài)服務(wù)器主頁(yè)，任務(wù)的執(zhí)行需要調(diào)用ActiveX組件連接到數(shù)據(jù)庫(kù)來(lái)實(shí)現(xiàn)，利用ASP為web頁(yè)添加交互板塊。

（二）DIV+CSS布局

DIV+CSS是一種網(wǎng)頁(yè)的布局方法。我們經(jīng)常會(huì)在看到“web標(biāo)準(zhǔn)”，其實(shí)這是一種術(shù)語(yǔ)，即DIV+CSS網(wǎng)站標(biāo)準(zhǔn)，是一種與傳統(tǒng)的HTML網(wǎng)頁(yè)設(shè)計(jì)不同的網(wǎng)頁(yè)的布局方法。在這一傳統(tǒng)語(yǔ)言中，網(wǎng)頁(yè)的布局方法依靠table布局，進(jìn)行表格定位。采用DIV+CSS架構(gòu)的網(wǎng)頁(yè)布局，優(yōu)勢(shì)在于能夠達(dá)到W3C內(nèi)容與表現(xiàn)相分離?？梢员Ｕ暇W(wǎng)站頁(yè)面的加載速度，使得搜索引擎更加優(yōu)化。

二、DIV+CSS布局優(yōu)點(diǎn)

（一）DIV+CSS布局使頁(yè)面快速載入

DIV+CSS定位方式，將頁(yè)面分成好多區(qū)域，在頁(yè)面的加載中，會(huì)逐層進(jìn)行，不用讀取大表格和小的表格，無(wú)形中加快了加載的速度。

（二）使得流量費(fèi)大大減少

DIV+CSS定位方式，縮小了頁(yè)面體積，但使得網(wǎng)頁(yè)的瀏覽速度加快。大大方便了那些控制主機(jī)流量的網(wǎng)站。DIV+CSS的精簡(jiǎn)代碼是table無(wú)法相比的，DIV+CSS實(shí)現(xiàn)了樣式和布局完全分離，減少前臺(tái)垃圾代碼。

（三）提高修改設(shè)效率

頁(yè)面的修改，使用DIV+CSS制作方法，變得更加容易、省時(shí)。頁(yè)面修改時(shí)，由于存在區(qū)域的內(nèi)容標(biāo)記，非常容易地就能在CSS里找到相應(yīng)的ID，頁(yè)面其他部分的布局樣式，依然完整不會(huì)被破壞。

（四）視覺(jué)始終保持一致性

頁(yè)面之間，或區(qū)域之間的顯示效果，由于傳統(tǒng)上采用了表格嵌套的制作方法，會(huì)有偏差。而DIV+CSS制作方法，改變了傳統(tǒng)方法上的缺陷，在視覺(jué)上保持了的頁(yè)面的一致性。用CSS文件控制所有的頁(yè)面與區(qū)域，并實(shí)現(xiàn)統(tǒng)一。這種方法使得頁(yè)面的不同區(qū)域、不同頁(yè)面效果偏差降低到最小。

（五）更好地被搜索引擎收錄

對(duì)瀏覽者和瀏覽器有親和力的網(wǎng)站，瀏覽量就高，這一特性在DIV+CSS中就有顯示。在CSS文件中，寫(xiě)進(jìn)大量的HTML代碼，使得正文部分在網(wǎng)頁(yè)中非常的突出明顯，大大提高了網(wǎng)頁(yè)被搜索引擎收錄的幾率。CSS中的樣式多樣，根據(jù)不同的瀏覽器靈活地選擇頁(yè)面，使顯示效果不斷統(tǒng)一固定。DIV+CSS更加有利于SEO的優(yōu)化，使用DIV+CSS的構(gòu)建的網(wǎng)站也深受搜索引擎的喜歡。

三、DIV+CSS存在的問(wèn)題

DIV+CSS存在的優(yōu)勢(shì)很多，但是到目前來(lái)看用CSS+DIV進(jìn)行動(dòng)態(tài)網(wǎng)站建，還是存在一些問(wèn)題的。

（一）CSS+DIV定位復(fù)雜

在網(wǎng)頁(yè)的設(shè)計(jì)中，CSS+DIV需要以CSS為依托，但是這樣操作就使得網(wǎng)頁(yè)設(shè)計(jì)比起傳統(tǒng)的table表格布局定位復(fù)雜很多。就使得網(wǎng)站設(shè)計(jì)過(guò)程中，或多或少的問(wèn)題就容易出現(xiàn)。

（二）整個(gè)網(wǎng)站，受CSS文件影響較大

在動(dòng)態(tài)網(wǎng)站的設(shè)計(jì)中，在幾個(gè)外部文件中，都存放著CSS網(wǎng)站制作的設(shè)計(jì)元素。一旦 CSS文件出現(xiàn)問(wèn)題，整個(gè)網(wǎng)站的正常瀏覽將受到很大的影響。由于CSS文件之間關(guān)系復(fù)雜文件較大，就會(huì)出現(xiàn)調(diào)用CSS文件異常，嚴(yán)重的整個(gè)網(wǎng)站將處于癱瘓狀態(tài)。

（三）瀏覽器兼容性差

雖然CSS+DIV優(yōu)勢(shì)多，但瀏覽器的兼容性是不及于HTML4.0的網(wǎng)頁(yè)設(shè)計(jì)的，因?yàn)楦陌婧驣E4.0不存在瀏覽器兼容性問(wèn)題。而CSS+DIV設(shè)計(jì)的網(wǎng)站相反，只在IE瀏覽器中頁(yè)面能正常顯示，在FireFox（火狐瀏覽器）中卻被顯示的大相徑庭。

（四）網(wǎng)頁(yè)設(shè)計(jì)的專(zhuān)業(yè)水平，決定CSS+DIV引擎優(yōu)化

網(wǎng)頁(yè)設(shè)計(jì)的專(zhuān)業(yè)水平，是決定CSS+DIV對(duì)搜索引擎優(yōu)化程度。CSS+DIV網(wǎng)頁(yè)自身代碼設(shè)計(jì)，不比HTML網(wǎng)站簡(jiǎn)潔，不能對(duì)網(wǎng)頁(yè)搜索引擎進(jìn)行優(yōu)化。搜索引擎對(duì)于網(wǎng)頁(yè)的收錄和網(wǎng)站排序衡量標(biāo)準(zhǔn)，不考慮是CSS及web標(biāo)準(zhǔn)制作還是使用傳統(tǒng)表格布局。網(wǎng)站結(jié)構(gòu)、內(nèi)容、相關(guān)網(wǎng)站鏈接是搜索引擎、網(wǎng)站優(yōu)化的直接因素。

四、使用DIV+CSS設(shè)計(jì)ASP網(wǎng)站需要注意的環(huán)節(jié)

在使用DIV+CSS設(shè)計(jì)ASP網(wǎng)站中，需要檢查HTML元素的拼寫(xiě)，結(jié)束標(biāo)記是否寫(xiě)好，div嵌套關(guān)系，是否弄錯(cuò)。為防止錯(cuò)誤出現(xiàn)可以用dreamweaver網(wǎng)頁(yè)編輯工具的驗(yàn)證功能進(jìn)行檢查。同時(shí)檢查CSS拼寫(xiě)是否正確，尤其是結(jié)尾的“}”。CleanCSS需要充分利用起來(lái)，既能夠?yàn)镃SS“瘦身”，也可以檢查 CSS的拼寫(xiě)錯(cuò)誤。當(dāng)找準(zhǔn)影響整體布局的錯(cuò)誤位置后，可將div塊逐一刪除，直到恢復(fù)正常顯示為止，來(lái)確定錯(cuò)誤發(fā)生的準(zhǔn)確位置。使用float屬性布局容易出錯(cuò)，需要確定元素邊界，為元素添加border屬性顯示出錯(cuò)誤原因。顯示未指定width的float元素時(shí)，多數(shù)瀏覽器會(huì)有bug。因此，指定width屬性，使用em單位指定元素，是必不可少的。

另外，不要忘記寫(xiě)DTD，在對(duì)瀏覽器調(diào)整無(wú)效，顯示結(jié)果還是不一樣，需要檢查頁(yè)面開(kāi)頭是否寫(xiě)出了DTD：<！DOCTYPE HTML PUBLIC “—//W3C//DTD HTML 4.01 Transitional//EN”。

[參考文獻(xiàn)]

[1] 周鑫.淺談DIV+CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].科技信息，2011，（17）.

[2] 朱俊，汪舒銀.CSS在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].安徽水利水電職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2007，（1）.

[3] 黃雄平.基于Dreamweaver的DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)初步研究[J].電腦知識(shí)與技術(shù)，2010，（36）.

[4] 張志潔，李書(shū)明，趙玲.CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用探析[J].電腦知識(shí)與技術(shù)（學(xué)術(shù)交流），2007，（10）.

[5] 袁自海.CSS在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].電腦知識(shí)與技術(shù)；2008，（8）.

[6] 趙清華，林學(xué)華.基于DIV+CSS的網(wǎng)頁(yè)布局技術(shù)應(yīng)用研究[J].現(xiàn)代計(jì)算機(jī)（專(zhuān)業(yè)版），2010，（5）.

[責(zé)任編輯：戴禎杰]