劉 翼， 王 耀， 張俊蘭

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

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

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

1.1 DIV+CSS技術(shù)

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

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

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

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

1.2.1 TABLE布局

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

1.2.2 DIV布局

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

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

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

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

2）提高頁面瀏覽速度

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

3）易于維護和改版

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

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

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

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

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

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

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

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

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

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

因為網(wǎng)上考試主要以效率優(yōu)先，所以我們在設(shè)計的時候摒棄了大圖片和花花稍稍的點綴，圖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部分實現(xiàn)代碼

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

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

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

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

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

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

3 結(jié)束語

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

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

[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動態(tài)網(wǎng)站開發(fā)基礎(chǔ)教程 ［M］.北京：清華大學出版社，2006.

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

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

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