DIV+CSS技術在延安大學網上考試系統中的應用研究

劉 翼， 王 耀， 張俊蘭

（1.延安大學 網絡中心，陜西 西安 716000；2.延安大學 計算機學院，陜西 延安 716000）

在剛學習網頁制作時，總是首先考慮怎么設計，考慮那些圖片、字體、顏色以及布局方案；然后用Photoshop或者Fireworks畫出來，切割成小圖；最后再通過編輯HTML將所有設計還原表現在頁面上。外觀并不是最重要的，一個結構良好的HTML頁面可以以任何外觀表現出來，通過CSS的不同定義，顯示在任何地方，任何網絡設備上。下面主要論述DIV+CSS技術[1]在網頁布局中的應用。

1 DIV+CSS技術概述

1.1 DIV+CSS技術

把瀏覽的界面比作一張紙的話，那表格就是直接在這張紙畫上了固定的線（當然這條線就設置為不可見），然后規劃出每個地方的需要面積，放上相應的元素，即成了網頁。但這樣的網頁一旦用表格“畫好”基本是不可以改的了。或者說改起來相當麻煩。

而div（Division）則像一個個獨立的容器[2]，好似程序里的SUB函數。可以靈活的調用。通過CSS可以控制某個容器的外部形態、顏色、背景、字體、大小和出現的位置等等，一個網頁就由若干個這樣的容器組成，每個容器都可以通過CSS控制，再加上CSS中的class及一些常用基本參數的使用。使得改變一個CSS就可改變整個網站。

CSS是Cascading Style Sheets（層疊樣式表）的簡稱。CSS語言是一種標記語言，它不需要編譯，可以直接由瀏覽器執行（屬于瀏覽器解釋型語言），在標準網頁設計中CSS負責網頁內容（XHTML）的表現。同時CSS文件也可以說是一個文本文件，它包含了一些CSS標記，CSS文件必須使用css為文件名后綴。可以通過簡單的更改CSS文件，改變網頁的整體表現形式，可以減少我們的工作量，所以它是每一個網頁設計人員的必修課。CSS是由W3C的CSS工作組產生和維護的。

1.2 DIV+CSS技術布局的優勢

1.2.1 TABLE布局

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

1.2.2 DIV布局

DIV既簡單，又整潔，又時尚，它和 CSS珠聯璧合，琴瑟和諧，它們構成最完美的Box模型，它們象現實中的箱子，你把東西放進去，然后，很自由地對它們進行排列，厭煩了一種布局，沒關系，簡單地改動一下CSS定義，一種全新的布局便誕生了。

采用DIV+CSS進行網頁重構[4]相對與傳統的TABLE網頁布局而具有以下3個顯著優勢：

1）表現和內容相分離

將設計部分剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息，這樣的頁面對搜索引擎更加友好。

2）提高頁面瀏覽速度

對于同一個頁面視覺效果，采用DIV+CSS重構的頁面容量要比TABLE編碼的頁面文件容量小得多，前者一般只有后者的1/2大小，瀏覽器就不用去編譯大量冗長的標簽。

3）易于維護和改版

只要簡單的修改幾個CSS文件就可以重新設計整個網站的頁面，方便程度是TABLE望塵莫及的。例如，要做下邊這樣一個網頁，如圖1所示。

圖1 網頁布局圖Fig.1 Page layout

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

圖2 修改后的頁面布局Fig.2 Modified page layout

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

2 DIV+CSS技術在網上考試系統中的應用

2.1 延安大學網上考試系統的概述

延安大學網上考試系統[5－6]是針對延安大學考試管理工作而開發的一個管理軟件，根據用戶的要求，實現了院系管理員管理、班級管理、授課教師管理、學生基本信息管理、試題管理及考試信息管理等幾個方面的功能。

用戶分為超級管理員、院系管理員、授課教師、班主任和學生，根據權限不同可以對系統中的數據進行相應的操作。延安大學網上考試系統力求提供用戶一個方便快捷的途徑去管理與考試相關的數據。

2.2 DIV+CSS技術在網上考試系統中的布局

因為網上考試主要以效率優先，所以我們在設計的時候摒棄了大圖片和花花稍稍的點綴，圖3是網上考試系統的模版結構圖。

圖3 網上考試系統的模版結構圖Fig.3 Template structure diagram of online examination system

1）BODY部分實現代碼

延安大學網上考試系統首頁的BODY部分代碼為：

在結構中用content來控制頁面的整體位置[7]，用head（頂端部分）、left（左邊菜單部分）、nr（右邊內容部分）和 copyright（版權部分）把content分成4個部分，和圖3結構相同。

2）CSS部分實現代碼

延安大學網上考試系統首頁的CSS部分代碼為：

在這段代碼中，已經對BODY部分中所有的元素進行了CSS樣式的設定。最后得到的效果如圖4所示。

圖4 網上考試系統布局樣圖Fig.4 Online examination system layout drawing

3 結束語

以上對DIV+CSS技術的探討與應用，做為一個WEB開發者一定不會拒絕這么強大的一樣工具。DIV+CSS技術不是萬能的，但是只要加上開發者的奇思妙想就可以把單調、復雜的頁面做的樣式豐富且容易維護。

這里我們要聲明的是DIV+CSS技術不是完全可以取代TABLE技術，而應該依照遇到的情況而定，多幾十個TR和TD在現在的網絡傳輸速度面前是不會有很大影響的。

[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動態網站開發基礎教程 ［M］.北京：清華大學出版社，2006.

[5]（美）Martin L.Shoemaker著.UML實戰教程 面向.NET開發人員[M].北京：清華大學出版社，2003.

[6]郝平，王萬良.數據庫開發與應用[M].北京:科學出版社，2005.

[7]劉斌.張軍編著.ASP.NET+SQL Server動態網站開發案例精選[M].北京：清華大學出版社，2004.