基于DIV+CSS設(shè)計ASP網(wǎng)站

張巖

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

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

[中圖分類號] TP393[文獻標識碼] A[文章編號] 2095—3437（2012）09—0060—02

一、幾組重要概念

（一）動態(tài)服務(wù)器主頁ASP

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

（二）DIV+CSS布局

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

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

（一）DIV+CSS布局使頁面快速載入

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

（二）使得流量費大大減少

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

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

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

（四）視覺始終保持一致性

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

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

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

三、DIV+CSS存在的問題

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

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

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

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

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

（三）瀏覽器兼容性差

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

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

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

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

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

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

[參考文獻]

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

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

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

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

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

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

[責任編輯：戴禎杰]