DIV+CSS技術在誠欣電子商城系統中的應用研究

張俊蘭，何婧媛，葉 倩

（延安大學 計算機學院，陜西 延安 716000）

DIV+CSS技術在誠欣電子商城系統中的應用研究

張俊蘭，何婧媛，葉 倩

（延安大學 計算機學院，陜西 延安 716000）

以DIV+CSS技術在誠欣電子商城系統中的應用為切入點對DIV+CSS技術進行深入的探討。首先對DIV+CSS網頁重構技術進行了討論；然后對DIV和CSS技術在誠欣電子商城系統的頁面設計中的應用進行了分析與討論，同時給出了具體的實現代碼；最后在DIV+CSS技術在誠欣電子商城系統中的應用的基礎上對DIV+CSS技術進行了解析，并總結出了DIV+CSS布局網站的優點和缺陷。

DIV+CSS網頁重構；WEB標準；DIV+CSS布局；表現與行為

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

1 DIV+CSS網頁重構技術

DIV+CSS是網站標準[3]（或稱”WEB標準”）中常用術語之一，通常為了說明與HTML網頁設計語言的表格（table）定位方式的區別，因為XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。

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

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

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

定義了最上面的導航（ul部分），它沒有使用DIV來做頂部的框架，但卻很好的說明了這些代碼的用途。因為它活用了HTML提供的標簽，以及樣式名稱的定義。

最常用的布局標簽有：

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

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

3）b：這個是一個已經不再推薦使用的標簽，但在布局上卻能帶來不少方便（因為短），有些時候（比如細小地方的布局定義）是不錯的選擇。

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

2 DIV+CSS技術在軟件系統中的應用

2.1 前臺頁面設計中的應用

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

圖1 誠欣電子商城系統前臺軟件結構圖Fig.1 Front software structure of Cheng Xin Electronic Mall System

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

2.1.1 管理員登錄后臺的超鏈接的樣式

作為該系統的管理員是要經常進入后臺對系統進行更新與維護等問題的處理，所以我們有必要也必須提供管理員進入后臺的鏈接，這是一個良好的系統所必須擁有的設計。下面給出管理員登錄后臺的超鏈接代碼。

2.1.2 設置管理員登錄頁面的text樣式

管理員是可以方便的進入系統的，他有區別于其他人的登錄方式。該方式的實現用到了CSS樣式技術，下面給出管理員登錄頁面的代碼：

2.1.3 全局的超鏈接

一個完整又良好的系統能夠使用戶方便的進入該系統的任何一個頁面，所以就需要進行頁面的超鏈接。有了超鏈接就可以快速的從一個頁面跳轉到另一個頁面，該方法的實現用到了CSS樣式技術，實現該方法的代碼如下。

2.2 會員注冊和修改中的應用

2.2.1 會員注冊

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

2.2.2 會員修改

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

2.3 CSS中的塊模型

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

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

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

這幾個部分都是可以通過CSS進行指定的，當然，CSS還可以控制背景，因此，我們可以通過CSS來靈活控制頁面的外觀，例如：

2.4 CSS中的文檔流模型

所有的塊元素在html文檔中是按照它們出現在文檔中的先后順序排列的（當然，嵌套不在此列），每一個塊都會另起一行，如圖3所示。

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

它們對應的html如下：

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

3 使用DIV+CSS布局網站的優點和缺陷

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

1）符合W3C標準 微軟等公司均為W3C支持者。這一點是最重要的，因為這保證您的網站不會因為將來網絡應用的升級而被淘汰。

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

3）搜索引擎更加友好 相對與傳統的table，采用DIV+CSS技術的網頁，對于搜索引擎的收錄更加友好。

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

5）CSS的極大優勢表現在簡潔的代碼 對于一個大型網站來說，可以節省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。

6）表現和結構分離 在團隊開發中更容易分工合作而減少相互關聯性。

7）降低流量費用 頁面體積變小，瀏覽速度變快，這就使得對于某些控制主機流量的網站來說是最大的優勢了。

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

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

在看重CSS網頁布局的意義與優點時，也不能輕視CSS網頁布局的副作用。

1）DIV+CSS盡管不是高不可及，但至少要比表格定位復雜的多，即使對于網站設計高手也很容易出現問題，更不要說初學者了。

2）CSS網站制作的設計元素通常放在1個外部文件中或幾個文件，有可能相當復雜，甚至比較龐大，如果CSS文件調用出現異常，那么整個網站將變得慘不忍睹。

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

4）DIV+CSS對搜索引擎優化與否，取決于網頁設計的專業水平，而不是DIV+CSS本身。DIV+CSS網頁設計并不能保證網頁對搜索引擎的優化，甚至不能保證一定比HTML網站有更簡潔的代碼設計，何況搜索引擎對于網頁的收錄和排序顯然不是以是否采用表格和CSS定位來衡量，這就是為什么很多傳統表格布局制作的網站在搜索結果中的排序靠前，而很多使用CSS及web標準制作的網頁排名依然靠后的原因。因為對于搜索引擎而言，網站結構、內容、相關網站鏈接等因素始終是網站優化最重要的指標。

綜合以上討論的DIV+CSS優勢和略勢，我們認為不可盲目跟風，如何更有效、更合理的運用WEB2.0設計標準，這需要很長時間的學習和鍛煉。而如何將DIV+CSS運用的更好，這需要通過不斷的實踐和體檢，積累豐富的設計經驗，才能很好的掌握這門技術。

4 結束語

隨著各大主流瀏覽器對CSS2.0的功能的支持不斷完善，DIV+CSS布局最終會取代傳統TABLE布局。各種企事業單位或者個人對其所有網站進行改版成了趨勢，制作符合標準的網頁成了重中之重。使用DIV+CSS布局，真正實現了結構、表現和行為的分離。提高了網頁開發的效率和頁面下載的速度，提高了網站維護和修改的效率。以上對DIV+CSS技術的論述與探討，是我們應用DIV+CSS技術的體會與初探，對DIV+CSS技術應用研究優待于進一步探討。

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

[2]楊陽.DIV+CSS網站布局實錄[M].北京:科學出版社，2009.

[3]王海濤.CSS權威教程[M].北京:清華大學出版社，2008.

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

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

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

[7]謝君英.CSS與Dreamweaver CS3完美網頁設計[M].北京:人民郵電出版社，2009.

[8]李孟晃，陳思妤.PC與IPTV影音服務選單——數位匯流技術開發[J].現代電子技術，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稿件編號：201112043

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