DIV+CSS技術(shù)在延安大學(xué)網(wǎng)上考試系統(tǒng)中的應(yīng)用研究

劉 翼， 王 耀， 張俊蘭

（1.延安大學(xué) 網(wǎng)絡(luò)中心，陜西 西安 716000；2.延安大學(xué) 計(jì)算機(jī)學(xué)院，陜西 延安 716000）

在剛學(xué)習(xí)網(wǎng)頁(yè)制作時(shí)，總是首先考慮怎么設(shè)計(jì)，考慮那些圖片、字體、顏色以及布局方案；然后用Photoshop或者Fireworks畫(huà)出來(lái)，切割成小圖；最后再通過(guò)編輯HTML將所有設(shè)計(jì)還原表現(xiàn)在頁(yè)面上。外觀并不是最重要的，一個(gè)結(jié)構(gòu)良好的HTML頁(yè)面可以以任何外觀表現(xiàn)出來(lái)，通過(guò)CSS的不同定義，顯示在任何地方，任何網(wǎng)絡(luò)設(shè)備上。下面主要論述DIV+CSS技術(shù)[1]在網(wǎng)頁(yè)布局中的應(yīng)用。

1 DIV+CSS技術(shù)概述

1.1 DIV+CSS技術(shù)

把瀏覽的界面比作一張紙的話，那表格就是直接在這張紙畫(huà)上了固定的線（當(dāng)然這條線就設(shè)置為不可見(jiàn)），然后規(guī)劃出每個(gè)地方的需要面積，放上相應(yīng)的元素，即成了網(wǎng)頁(yè)。但這樣的網(wǎng)頁(yè)一旦用表格“畫(huà)好”基本是不可以改的了。或者說(shuō)改起來(lái)相當(dāng)麻煩。

而div（Division）則像一個(gè)個(gè)獨(dú)立的容器[2]，好似程序里的SUB函數(shù)?？梢造`活的調(diào)用。通過(guò)CSS可以控制某個(gè)容器的外部形態(tài)、顏色、背景、字體、大小和出現(xiàn)的位置等等，一個(gè)網(wǎng)頁(yè)就由若干個(gè)這樣的容器組成，每個(gè)容器都可以通過(guò)CSS控制，再加上CSS中的class及一些常用基本參數(shù)的使用。使得改變一個(gè)CSS就可改變整個(gè)網(wǎng)站。

CSS是Cascading Style Sheets（層疊樣式表）的簡(jiǎn)稱。CSS語(yǔ)言是一種標(biāo)記語(yǔ)言，它不需要編譯，可以直接由瀏覽器執(zhí)行（屬于瀏覽器解釋型語(yǔ)言），在標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)中CSS負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容（XHTML）的表現(xiàn)。同時(shí)CSS文件也可以說(shuō)是一個(gè)文本文件，它包含了一些CSS標(biāo)記，CSS文件必須使用css為文件名后綴?？梢酝ㄟ^(guò)簡(jiǎn)單的更改CSS文件，改變網(wǎng)頁(yè)的整體表現(xiàn)形式，可以減少我們的工作量，所以它是每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員的必修課。CSS是由W3C的CSS工作組產(chǎn)生和維護(hù)的。

1.2 DIV+CSS技術(shù)布局的優(yōu)勢(shì)

1.2.1 TABLE布局

Table可以用來(lái)容納文字、格式文字、圖片、鏈接和表單，以及其他 Table。這種布局風(fēng)格在2000年代初，一直到中期仍然十分流行，尤其國(guó)內(nèi)，在大為美的潛意識(shí)下，人們把所有能塞到一個(gè)頁(yè)面的東西都塞進(jìn)了首頁(yè)。Table就像一個(gè)舊時(shí)代的管家，把所有東西雖不能井井有序，但至少是一樣不少地編排起來(lái)。然而這樣的Web終于到了讓人厭惡的地步，隨著搜索，RSS訂閱，以及以博客為代表的個(gè)性化 Web的出現(xiàn)，人們有更多渠道獲得信息，而不必去訪問(wèn)那幾個(gè)讓人厭惡的門(mén)戶的首頁(yè)，于是出現(xiàn)了一種清新的，輕量的 Web風(fēng)。使用更簡(jiǎn)單的布局，更明快的配色，大圖標(biāo)，大 Banner，以及更容易閱讀的大字體。同時(shí)，在這個(gè)時(shí)候，CSS已經(jīng)非常成熟，而 Firefox，Opera，Safari為代表的瀏覽器[3]，在遵守 W3C標(biāo)準(zhǔn)方面要遠(yuǎn)遠(yuǎn)好過(guò)IE，人們終于認(rèn)識(shí)到 CSS的威力。因?yàn)镃SS在布局上，其核心是一個(gè) Box模型，人們必須為CSS找一個(gè)可以依附的容器對(duì)象。

1.2.2 DIV布局

DIV既簡(jiǎn)單，又整潔，又時(shí)尚，它和 CSS珠聯(lián)璧合，琴瑟和諧，它們構(gòu)成最完美的Box模型，它們象現(xiàn)實(shí)中的箱子，你把東西放進(jìn)去，然后，很自由地對(duì)它們進(jìn)行排列，厭煩了一種布局，沒(méi)關(guān)系，簡(jiǎn)單地改動(dòng)一下CSS定義，一種全新的布局便誕生了。

采用DIV+CSS進(jìn)行網(wǎng)頁(yè)重構(gòu)[4]相對(duì)與傳統(tǒng)的TABLE網(wǎng)頁(yè)布局而具有以下3個(gè)顯著優(yōu)勢(shì)：

1）表現(xiàn)和內(nèi)容相分離

將設(shè)計(jì)部分剝離出來(lái)放在一個(gè)獨(dú)立樣式文件中，HTML文件中只存放文本信息，這樣的頁(yè)面對(duì)搜索引擎更加友好。

2）提高頁(yè)面瀏覽速度

對(duì)于同一個(gè)頁(yè)面視覺(jué)效果，采用DIV+CSS重構(gòu)的頁(yè)面容量要比TABLE編碼的頁(yè)面文件容量小得多，前者一般只有后者的1/2大小，瀏覽器就不用去編譯大量冗長(zhǎng)的標(biāo)簽。

3）易于維護(hù)和改版

只要簡(jiǎn)單的修改幾個(gè)CSS文件就可以重新設(shè)計(jì)整個(gè)網(wǎng)站的頁(yè)面，方便程度是TABLE望塵莫及的。例如，要做下邊這樣一個(gè)網(wǎng)頁(yè)，如圖1所示。

圖1 網(wǎng)頁(yè)布局圖Fig.1 Page layout

如果要用TABLE來(lái)實(shí)現(xiàn)，做法就是建一個(gè)三行兩列的表格，將“頭”、“版權(quán)”的同行內(nèi)兩單元格合并。這樣做法簡(jiǎn)單，但是要把所有的網(wǎng)頁(yè)元素都加到網(wǎng)頁(yè)中后，這個(gè)頁(yè)面的布局基本固定了。如果要將“菜單”的位置修改到“頭”的下方，如圖2所示，那么修改量將增加很多。

圖2 修改后的頁(yè)面布局Fig.2 Modified page layout

那么用DIV將怎么實(shí)現(xiàn)呢？很簡(jiǎn)單，只需將CSS文件中的“菜單”和“內(nèi)容”控制代碼修改一下就可以了，工作量不到用TABLE修改量的十分之一。

2 DIV+CSS技術(shù)在網(wǎng)上考試系統(tǒng)中的應(yīng)用

2.1 延安大學(xué)網(wǎng)上考試系統(tǒng)的概述

延安大學(xué)網(wǎng)上考試系統(tǒng)[5－6]是針對(duì)延安大學(xué)考試管理工作而開(kāi)發(fā)的一個(gè)管理軟件，根據(jù)用戶的要求，實(shí)現(xiàn)了院系管理員管理、班級(jí)管理、授課教師管理、學(xué)生基本信息管理、試題管理及考試信息管理等幾個(gè)方面的功能。

用戶分為超級(jí)管理員、院系管理員、授課教師、班主任和學(xué)生，根據(jù)權(quán)限不同可以對(duì)系統(tǒng)中的數(shù)據(jù)進(jìn)行相應(yīng)的操作。延安大學(xué)網(wǎng)上考試系統(tǒng)力求提供用戶一個(gè)方便快捷的途徑去管理與考試相關(guān)的數(shù)據(jù)。

2.2 DIV+CSS技術(shù)在網(wǎng)上考試系統(tǒng)中的布局

因?yàn)榫W(wǎng)上考試主要以效率優(yōu)先，所以我們?cè)谠O(shè)計(jì)的時(shí)候摒棄了大圖片和花花稍稍的點(diǎn)綴，圖3是網(wǎng)上考試系統(tǒng)的模版結(jié)構(gòu)圖。

圖3 網(wǎng)上考試系統(tǒng)的模版結(jié)構(gòu)圖Fig.3 Template structure diagram of online examination system

1）BODY部分實(shí)現(xiàn)代碼

延安大學(xué)網(wǎng)上考試系統(tǒng)首頁(yè)的BODY部分代碼為：

在結(jié)構(gòu)中用content來(lái)控制頁(yè)面的整體位置[7]，用head（頂端部分）、left（左邊菜單部分）、nr（右邊內(nèi)容部分）和 copyright（版權(quán)部分）把content分成4個(gè)部分，和圖3結(jié)構(gòu)相同。

2）CSS部分實(shí)現(xiàn)代碼

延安大學(xué)網(wǎng)上考試系統(tǒng)首頁(yè)的CSS部分代碼為：

在這段代碼中，已經(jīng)對(duì)BODY部分中所有的元素進(jìn)行了CSS樣式的設(shè)定。最后得到的效果如圖4所示。

圖4 網(wǎng)上考試系統(tǒng)布局樣圖Fig.4 Online examination system layout drawing

3 結(jié)束語(yǔ)

以上對(duì)DIV+CSS技術(shù)的探討與應(yīng)用，做為一個(gè)WEB開(kāi)發(fā)者一定不會(huì)拒絕這么強(qiáng)大的一樣工具。DIV+CSS技術(shù)不是萬(wàn)能的，但是只要加上開(kāi)發(fā)者的奇思妙想就可以把單調(diào)、復(fù)雜的頁(yè)面做的樣式豐富且容易維護(hù)。

這里我們要聲明的是DIV+CSS技術(shù)不是完全可以取代TABLE技術(shù)，而應(yīng)該依照遇到的情況而定，多幾十個(gè)TR和TD在現(xiàn)在的網(wǎng)絡(luò)傳輸速度面前是不會(huì)有很大影響的。

[1]Jesse Zhao.Div+CSS 布 局 大 全 [EB/OL].（2006）.http://JesseZhao.cnblogs.com.

[2]Beapt. 百 度 百 科 [EB/OL].（2009）.http://baike.baidu.com/view/15916.htm l?wtp=tt.

[3]FIF多媒體制作小組.Dreamweaver MX教程[EB/OL].（2006）.http://fifad.hlw.cn.

[4]郭興峰，陳建偉.ASP.NET動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)基礎(chǔ)教程 ［M］.北京：清華大學(xué)出版社，2006.

[5]（美）Martin L.Shoemaker著.UML實(shí)戰(zhàn)教程 面向.NET開(kāi)發(fā)人員[M].北京：清華大學(xué)出版社，2003.

[6]郝平，王萬(wàn)良.數(shù)據(jù)庫(kù)開(kāi)發(fā)與應(yīng)用[M].北京:科學(xué)出版社，2005.

[7]劉斌.張軍編著.ASP.NET+SQL Server動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)案例精選[M].北京：清華大學(xué)出版社，2004.