張俊蘭，何婧媛，葉 倩

（延安大學(xué) 計(jì)算機(jī)學(xué)院，陜西 延安 716000）

DIV+CSS技術(shù)在誠欣電子商城系統(tǒng)中的應(yīng)用研究

張俊蘭，何婧媛，葉 倩

（延安大學(xué) 計(jì)算機(jī)學(xué)院，陜西 延安 716000）

以DIV+CSS技術(shù)在誠欣電子商城系統(tǒng)中的應(yīng)用為切入點(diǎn)對(duì)DIV+CSS技術(shù)進(jìn)行深入的探討。首先對(duì)DIV+CSS網(wǎng)頁重構(gòu)技術(shù)進(jìn)行了討論；然后對(duì)DIV和CSS技術(shù)在誠欣電子商城系統(tǒng)的頁面設(shè)計(jì)中的應(yīng)用進(jìn)行了分析與討論，同時(shí)給出了具體的實(shí)現(xiàn)代碼；最后在DIV+CSS技術(shù)在誠欣電子商城系統(tǒng)中的應(yīng)用的基礎(chǔ)上對(duì)DIV+CSS技術(shù)進(jìn)行了解析，并總結(jié)出了DIV+CSS布局網(wǎng)站的優(yōu)點(diǎn)和缺陷。

DIV+CSS網(wǎng)頁重構(gòu)；WEB標(biāo)準(zhǔn)；DIV+CSS布局；表現(xiàn)與行為

Internet的誕生和發(fā)展，改變了人們的生活方式，改變了企業(yè)的生產(chǎn)管理和經(jīng)營方式，帶來商業(yè)模式的創(chuàng)新，推動(dòng)了信息經(jīng)濟(jì)的發(fā)展。電子商務(wù)成為21世紀(jì)的主要經(jīng)濟(jì)增長方式，這種方式正在以難以置信的速度滲透到人們的日常生活，給人們的生產(chǎn)、生活帶來了極大地便利。隨著WEB2.0標(biāo)準(zhǔn)化[1]設(shè)計(jì)理念的普及，國內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用DIV+CSS制作方法，從實(shí)際應(yīng)用情況來看，此種方法絕對(duì)好于表格制作頁面的方法?；赪EB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)的核心在于如何使用眾多WEB標(biāo)準(zhǔn)中的各項(xiàng)技術(shù)來達(dá)到表現(xiàn)與內(nèi)容的分離，即網(wǎng)站的結(jié)構(gòu)、表現(xiàn)和行為三者的分離。只有真正實(shí)現(xiàn)了結(jié)構(gòu)分離的網(wǎng)頁設(shè)計(jì)，才能真正意義上符合WEB標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)。此次設(shè)計(jì)主要是對(duì)WEB標(biāo)準(zhǔn)的理論的一次實(shí)踐與運(yùn)用，也就是網(wǎng)站設(shè)計(jì)過程中靈活使用WEB標(biāo)準(zhǔn)對(duì)WEB內(nèi)容進(jìn)行結(jié)構(gòu)、表現(xiàn)與行為的分離——即表現(xiàn)和內(nèi)容分離的，用最科學(xué)、最合理的結(jié)構(gòu)來構(gòu)建網(wǎng)站。所以最終采取DIV+CSS技術(shù)布局[2]的方式實(shí)現(xiàn)設(shè)計(jì)效果。從整個(gè)設(shè)計(jì)與實(shí)現(xiàn)的工程中，我們可以窺見DIV+CSS對(duì)頁面布局的優(yōu)勢，這種優(yōu)勢是由DIV+CSS本身所具有的功能決定的。

1 DIV+CSS網(wǎng)頁重構(gòu)技術(shù)

DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)[3]（或稱”WEB標(biāo)準(zhǔn)”）中常用術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。

CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn)HTML或XML等文件式樣的計(jì)算機(jī)語言。XHTML語言就是一種可以將HTML語言標(biāo)準(zhǔn)化，用XHTML語言重寫后的HTML頁面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。CSS優(yōu)于HTML的好處關(guān)鍵就在于其與腳本語言（如Javascript）[4-6]及 XML 技術(shù)的融合，即 CSS+Javascript+XML。 自從CSS出現(xiàn)之后，HTML終于擺脫了雜亂無章的惡夢，開始將頁面內(nèi)容與樣式分離。

DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。DIV是HTML（超文本語言）中的一個(gè)元素，DIV+CSS是一種網(wǎng)頁的布局方法，這一種網(wǎng)頁布局方法有別于傳統(tǒng)的table布局，真正地達(dá)到了W3C內(nèi)容與表現(xiàn)相分離。DIV是標(biāo)簽CSS是層疊樣式表。

DIV+CSS高級(jí)布局已逐漸流行，但面對(duì)所謂DIV+CSS布局的叫法讓人更為擔(dān)心，不要讓DIV成為Table的替代品，多層嵌套的DIV會(huì)嚴(yán)重影響代碼的可閱讀性，因此要學(xué)會(huì)活用HTML為我們提供的標(biāo)簽。DIV更適用于大體框架的定位，例如我們要定義一塊頭部的區(qū)域，一般會(huì)定義一個(gè)DIV。當(dāng)然，可以用class來定義，但一般來講如不是在同一頁面會(huì)重復(fù)的元素，用id能更好的區(qū)別開來。定義代碼如下：

定義了最上面的導(dǎo)航（ul部分），它沒有使用DIV來做頂部的框架，但卻很好的說明了這些代碼的用途。因?yàn)樗钣昧薍TML提供的標(biāo)簽，以及樣式名稱的定義。

最常用的布局標(biāo)簽有：

1）h1：這個(gè)標(biāo)簽顯示的字體是很＂大＂的，它所能表達(dá)的意思就如同它原先的作用一樣明顯（大標(biāo)題）。

2）ul：這個(gè)標(biāo)簽很多情況是用來定義導(dǎo)航部分的，當(dāng)然也可以用ol來代替，但導(dǎo)航連接沒有什么順序之分，所以還是用ul來的比較確切（去掉CSS后效果更明顯）。

3）b：這個(gè)是一個(gè)已經(jīng)不再推薦使用的標(biāo)簽，但在布局上卻能帶來不少方便（因?yàn)槎蹋?，有些時(shí)候（比如細(xì)小地方的布局定義）是不錯(cuò)的選擇。

4）h2：h2使用最多的地方不是布局上，而是副標(biāo)題，但有些地方需要定義欄目樣式的話，用這個(gè)標(biāo)簽比較合適，欄目內(nèi)容就使用p。

2 DIV+CSS技術(shù)在軟件系統(tǒng)中的應(yīng)用

2.1 前臺(tái)頁面設(shè)計(jì)中的應(yīng)用

誠欣電子商城系統(tǒng)的前臺(tái)分為商品查詢、商品展臺(tái)、購物車、會(huì)員管理、收銀臺(tái)、訂單管理及商城公告等7個(gè)部分，其中各個(gè)部分及其包括的具體功能模塊[5]如圖1所示。

圖1 誠欣電子商城系統(tǒng)前臺(tái)軟件結(jié)構(gòu)圖Fig.1 Front software structure of Cheng Xin Electronic Mall System

誠欣電子商城系統(tǒng)的前臺(tái)頁面設(shè)計(jì)可分為網(wǎng)站導(dǎo)航欄、顯示商品種類名稱、顯示商品區(qū)域、主要操作區(qū)、版權(quán)信息5個(gè)部分。其中，網(wǎng)站導(dǎo)航欄存在網(wǎng)站的一些前臺(tái)功能的鏈接，包括商品銷售排行、新品上架、特價(jià)商品等一些內(nèi)容。顯示商品種類名稱包括一些大類別名稱，當(dāng)用戶單擊任意一個(gè)類別的信息時(shí)會(huì)直接查詢這個(gè)類別下的商品的信息。顯示商品區(qū)域用來顯示用戶查詢的一些商品信息。主要操作區(qū)包括4方面內(nèi)容：1）用戶登錄信息，當(dāng)用戶第一次登錄網(wǎng)站時(shí)需要輸入用戶名和密碼，成為這個(gè)網(wǎng)站的會(huì)員的入口；2）商場公告，用來顯示商場的一些信息以供用戶了解本商場的情況；3）商品排行的一些信息，在這里用戶可以清楚的看到該商場的商品排行情況；4）網(wǎng)站的友情鏈接信息，用戶可以方便的從該網(wǎng)站進(jìn)入到其他網(wǎng)站而不必退出本系統(tǒng)再進(jìn)入到其他網(wǎng)站。版權(quán)信息顯示網(wǎng)站的一些版權(quán)信息。網(wǎng)站導(dǎo)航欄、顯示商品種類名稱、主要操作區(qū)、版權(quán)信息并不是存在于一個(gè)頁面當(dāng)中，其他功能模塊也需要包括這些部分。所以這幾個(gè)部分可單獨(dú)存放于一個(gè)文件夾。

2.1.1 管理員登錄后臺(tái)的超鏈接的樣式

作為該系統(tǒng)的管理員是要經(jīng)常進(jìn)入后臺(tái)對(duì)系統(tǒng)進(jìn)行更新與維護(hù)等問題的處理，所以我們有必要也必須提供管理員進(jìn)入后臺(tái)的鏈接，這是一個(gè)良好的系統(tǒng)所必須擁有的設(shè)計(jì)。下面給出管理員登錄后臺(tái)的超鏈接代碼。

2.1.2 設(shè)置管理員登錄頁面的text樣式

管理員是可以方便的進(jìn)入系統(tǒng)的，他有區(qū)別于其他人的登錄方式。該方式的實(shí)現(xiàn)用到了CSS樣式技術(shù)，下面給出管理員登錄頁面的代碼：

2.1.3 全局的超鏈接

一個(gè)完整又良好的系統(tǒng)能夠使用戶方便的進(jìn)入該系統(tǒng)的任何一個(gè)頁面，所以就需要進(jìn)行頁面的超鏈接。有了超鏈接就可以快速的從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面，該方法的實(shí)現(xiàn)用到了CSS樣式技術(shù)，實(shí)現(xiàn)該方法的代碼如下。

2.2 會(huì)員注冊和修改中的應(yīng)用

2.2.1 會(huì)員注冊

會(huì)員注冊頁面是一個(gè)最基本的頁面，它是用戶進(jìn)入該系統(tǒng)的前提條件，只有成為了該系統(tǒng)的用戶才可以進(jìn)入該系統(tǒng)。在誠欣電子商城系統(tǒng)的注冊頁面中需要用戶填寫會(huì)員名稱、會(huì)員密碼、密碼確認(rèn)、真實(shí)姓名、年齡、職業(yè)、地址、找回密碼問題和答案這些內(nèi)容，系統(tǒng)通過驗(yàn)證之后才可以成為該系統(tǒng)的會(huì)員。在這個(gè)頁面的設(shè)計(jì)中用到了DIV技術(shù)，該技術(shù)的應(yīng)用使得頁面的設(shè)計(jì)更加合理化、人性化。

2.2.2 會(huì)員修改

會(huì)員修改頁面是為了方便用戶對(duì)自己的會(huì)員信息進(jìn)行修改的一個(gè)頁面，該頁面的設(shè)計(jì)用到了DIV技術(shù)，這使得頁面的效果更佳。在用戶進(jìn)行會(huì)員修改時(shí)，需要填寫本頁面的所有問題，只有這樣才能成功的修改會(huì)員信息。

2.3 CSS中的塊模型

在CSS的定義[7]中，有的html標(biāo)簽被瀏覽器當(dāng)成一個(gè)塊來顯示，比如 div、table、p、ul等等，我們稱之為塊元素；有的html標(biāo)簽被瀏覽器顯示在文本行之類，如a、span、font等等，我們稱之為行內(nèi)元素。

每 一 個(gè) 塊 元 素 都 可 以 分 為 context、padding、boder和margin幾個(gè)部分，我們常說的寬和高，指的只是context的寬和高，padding代表內(nèi)容和邊框之間的填充，margin代表邊框之外的空白，如圖2所示。

圖2 CSS塊模型圖Fig.2 CSS block model diagram

這幾個(gè)部分都是可以通過CSS進(jìn)行指定的，當(dāng)然，CSS還可以控制背景，因此，我們可以通過CSS來靈活控制頁面的外觀，例如：

2.4 CSS中的文檔流模型

所有的塊元素在html文檔中是按照它們出現(xiàn)在文檔中的先后順序排列的（當(dāng)然，嵌套不在此列），每一個(gè)塊都會(huì)另起一行，如圖3所示。

圖3 CSS中的文檔流模型圖Fig.3 Document flow model diagram in CCS

它們對(duì)應(yīng)的html如下：

為了定義它們的寬度、高度還有邊框，定義如下的CSS：

3 使用DIV+CSS布局網(wǎng)站的優(yōu)點(diǎn)和缺陷

使用CSS布局可以從根本上解決表格布局帶來的問題。CSS布局的重點(diǎn)不在表格元素的設(shè)計(jì)上，而是采用另外一種元素DIV。DIV可以理解為層或者塊。DIV是一種比表格簡單的元素，從語法上只有這樣簡單的定義。DIV的功能僅僅是將一段信息標(biāo)記出來用于后期樣式的定義。通過使用DIV，可以將網(wǎng)頁中的各個(gè)元素劃分到各個(gè)DIV中，成為網(wǎng)頁中的結(jié)構(gòu)主體，而樣式表現(xiàn)由CSS完成。DIV在使用時(shí)不再需要像表格一樣通過單元格來組織板式，通過CSS強(qiáng)大的樣式定義功能可以比表格更簡單更自由地來控制頁面版式和樣式。DIV+CSS[8]的優(yōu)勢主要體現(xiàn)在以下方面。

1）符合W3C標(biāo)準(zhǔn) 微軟等公司均為W3C支持者。這一點(diǎn)是最重要的，因?yàn)檫@保證您的網(wǎng)站不會(huì)因?yàn)閷砭W(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。

2）支持瀏覽器的向后兼容 也就是無論未來的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網(wǎng)站都能很好的兼容。

3）搜索引擎更加友好 相對(duì)與傳統(tǒng)的table，采用DIV+CSS技術(shù)的網(wǎng)頁，對(duì)于搜索引擎的收錄更加友好。

4）樣式的調(diào)整更加方便 內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便。 現(xiàn)在YAHOO、MSN等國際門戶網(wǎng)站，網(wǎng)易、新浪等國內(nèi)門戶網(wǎng)站，以及主流的WEB2.0網(wǎng)站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。

5）CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼 對(duì)于一個(gè)大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。

6）表現(xiàn)和結(jié)構(gòu)分離 在團(tuán)隊(duì)開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。

7）降低流量費(fèi)用 頁面體積變小，瀏覽速度變快，這就使得對(duì)于某些控制主機(jī)流量的網(wǎng)站來說是最大的優(yōu)勢了。

8）保持視覺的一致性 DIV+CSS最重要的優(yōu)勢之一：保持視覺的一致性；以往表格嵌套的制作方法，會(huì)使得頁面與頁面或者區(qū)域與區(qū)域之間的顯示效果會(huì)有偏差。而使用DIV+CSS的制作方法，將所有頁面或所有區(qū)域統(tǒng)一用CSS文件控制，就避免了不同頁面或不同區(qū)域體現(xiàn)出的效果偏差。

9）對(duì)瀏覽者和瀏覽器更具親和力 眾所周知網(wǎng)站做出來是給瀏覽者使用的，對(duì)瀏覽者和瀏覽器更具親和力，DIV+CSS在這方面更具優(yōu)勢。由于CSS富含豐富的樣式，使頁面更加靈活性，它可以根據(jù)不同的瀏覽器，而達(dá)到顯示效果的統(tǒng)一和不變形。

在看重CSS網(wǎng)頁布局的意義與優(yōu)點(diǎn)時(shí)，也不能輕視CSS網(wǎng)頁布局的副作用。

1）DIV+CSS盡管不是高不可及，但至少要比表格定位復(fù)雜的多，即使對(duì)于網(wǎng)站設(shè)計(jì)高手也很容易出現(xiàn)問題，更不要說初學(xué)者了。

2）CSS網(wǎng)站制作的設(shè)計(jì)元素通常放在1個(gè)外部文件中或幾個(gè)文件，有可能相當(dāng)復(fù)雜，甚至比較龐大，如果CSS文件調(diào)用出現(xiàn)異常，那么整個(gè)網(wǎng)站將變得慘不忍睹。

3）雖然說DIV+CSS解決了大部分瀏覽器兼容問題，但是也有在部分瀏覽器中使用出現(xiàn)異常，比如火狐瀏覽器，在IE中顯示正常的頁面，到了火狐瀏覽器中可能會(huì)面目全非。當(dāng)然這應(yīng)該是瀏覽器的問題，但是可以說在目前來看，DIV+CSS還沒有實(shí)現(xiàn)所有瀏覽器的統(tǒng)一兼容。

4）DIV+CSS對(duì)搜索引擎優(yōu)化與否，取決于網(wǎng)頁設(shè)計(jì)的專業(yè)水平，而不是DIV+CSS本身。DIV+CSS網(wǎng)頁設(shè)計(jì)并不能保證網(wǎng)頁對(duì)搜索引擎的優(yōu)化，甚至不能保證一定比HTML網(wǎng)站有更簡潔的代碼設(shè)計(jì)，何況搜索引擎對(duì)于網(wǎng)頁的收錄和排序顯然不是以是否采用表格和CSS定位來衡量，這就是為什么很多傳統(tǒng)表格布局制作的網(wǎng)站在搜索結(jié)果中的排序靠前，而很多使用CSS及web標(biāo)準(zhǔn)制作的網(wǎng)頁排名依然靠后的原因。因?yàn)閷?duì)于搜索引擎而言，網(wǎng)站結(jié)構(gòu)、內(nèi)容、相關(guān)網(wǎng)站鏈接等因素始終是網(wǎng)站優(yōu)化最重要的指標(biāo)。

綜合以上討論的DIV+CSS優(yōu)勢和略勢，我們認(rèn)為不可盲目跟風(fēng)，如何更有效、更合理的運(yùn)用WEB2.0設(shè)計(jì)標(biāo)準(zhǔn)，這需要很長時(shí)間的學(xué)習(xí)和鍛煉。而如何將DIV+CSS運(yùn)用的更好，這需要通過不斷的實(shí)踐和體檢，積累豐富的設(shè)計(jì)經(jīng)驗(yàn)，才能很好的掌握這門技術(shù)。

4 結(jié)束語

隨著各大主流瀏覽器對(duì)CSS2.0的功能的支持不斷完善，DIV+CSS布局最終會(huì)取代傳統(tǒng)TABLE布局。各種企事業(yè)單位或者個(gè)人對(duì)其所有網(wǎng)站進(jìn)行改版成了趨勢，制作符合標(biāo)準(zhǔn)的網(wǎng)頁成了重中之重。使用DIV+CSS布局，真正實(shí)現(xiàn)了結(jié)構(gòu)、表現(xiàn)和行為的分離。提高了網(wǎng)頁開發(fā)的效率和頁面下載的速度，提高了網(wǎng)站維護(hù)和修改的效率。以上對(duì)DIV+CSS技術(shù)的論述與探討，是我們應(yīng)用DIV+CSS技術(shù)的體會(huì)與初探，對(duì)DIV+CSS技術(shù)應(yīng)用研究優(yōu)待于進(jìn)一步探討。

[1]孫鑫.JAVA WEB開發(fā)詳解[M].西安:西安電子科技大學(xué)出版社，2008.

[2]楊陽.DIV+CSS網(wǎng)站布局實(shí)錄[M].北京:科學(xué)出版社，2009.

[3]王海濤.CSS權(quán)威教程[M].北京:清華大學(xué)出版社，2008.

[4]王國輝，王毅，李鐘蔚.JSP程序開發(fā)范例寶典[M].北京:人民郵電出版社，2007.

[5]張俊蘭，王文發(fā)，馬樂榮.軟件工程[M].西安:西安交通大學(xué)出版社，2009.

[6]劉曉華，張健，周慧貞.jsp應(yīng)用開發(fā)詳解[M].3版.北京:電子工業(yè)出版社，2008.

[7]謝君英.CSS與Dreamweaver CS3完美網(wǎng)頁設(shè)計(jì)[M].北京:人民郵電出版社，2009.

[8]李孟晃，陳思妤.PC與IPTV影音服務(wù)選單——數(shù)位匯流技術(shù)開發(fā)[J].現(xiàn)代電子技術(shù)，2010（6）：94-98.

LI Meng-huang，CHEN Si-yu.Menu system convergence of video service for PC and IPTV platforms[J].Modern Electronic Technique,2010（6）：94-98.

Application of DIV+CSS technology in Chengxin electronic mall system

ZHANG Jun-lan，HE Jing-yuan，YE Qian
（Department of Computer Science，Yan’an University，Yan’an716000，China）

DIV+CSS technology as the starting point to application of DIV+CSS technology in Chengxin electronic mall system is discussed.first reconstruction of DIV+CSS web technology is discussed，then application of Page design in Chengxin electronic mall system is analyzed.to DIV and CSS technology and gave a specific code.Finally it resolved to DIV+CSS technology on the based of application of DIV+CSS technology in Chengxin electronic mall system and summarized the advantages and shortcomings of DIV+CSS layout site.

DIV+CSS web reconstruction； WEB standards； DIV+CSS layout； performance and behavior

TP391

A

1674－6236（2012）05-0039-04

2011-12-08稿件編號(hào)：201112043

張俊蘭（1953—），女，陜西綏德人，教授。研究方向：圖形圖像處理、軟件工程、計(jì)算機(jī)應(yīng)用等。