基于Ｗｅｂ標(biāo)準(zhǔn)構(gòu)建網(wǎng)絡(luò)課程的應(yīng)用與思考

徐華平

摘 要：信息技術(shù)和電子科技日新月異，網(wǎng)絡(luò)課程所處的軟硬件環(huán)境也正發(fā)生深刻的變化，這給基于傳統(tǒng)HTML語言標(biāo)準(zhǔn)的網(wǎng)絡(luò)課程提出了挑戰(zhàn)。將Web標(biāo)準(zhǔn)引入網(wǎng)絡(luò)課程的建設(shè)中來， 通過對Web 標(biāo)準(zhǔn)的定義和內(nèi)涵的分析，較為深入地闡述了符合Web標(biāo)準(zhǔn)的網(wǎng)絡(luò)課程構(gòu)建方法及實踐意義，以期為構(gòu)建高適用性、代碼簡潔、用戶友好的網(wǎng)絡(luò)課程提供參考與指導(dǎo)。

關(guān)鍵詞：Web標(biāo)準(zhǔn) 網(wǎng)絡(luò)課程 網(wǎng)站重構(gòu)

中圖分類號：G420文獻(xiàn)標(biāo)識碼：A 文章編號：1673-8454（2009）05-0059-04

隨著信息技術(shù)和電子科技的發(fā)展，新的網(wǎng)頁瀏覽器軟件與顯示設(shè)備不斷出現(xiàn)。在IE6.0下能夠正常顯示的課程內(nèi)容在其他版本的IE或諸如火狐、遨游等瀏覽器下卻不能正確顯示；網(wǎng)絡(luò)課程的顯示設(shè)備由原來的15、17英寸的CRT（Cathode Ray Tube，陰極射線管）顯示器到現(xiàn)在各種尺寸與分辨率的液晶顯示器，隨著移動學(xué)習(xí)時代的到來，手機、PDA也成為網(wǎng)絡(luò)課程的表現(xiàn)終端，現(xiàn)有的基于HTML（超文本標(biāo)記語言）語言規(guī)范的網(wǎng)絡(luò)課程不能適應(yīng)這種變化。

為改變上述現(xiàn)狀，需要建立一套普遍認(rèn)同的標(biāo)準(zhǔn)。在W3C的推動下Web標(biāo)準(zhǔn)得以建立和推行，基于Web標(biāo)準(zhǔn)構(gòu)建網(wǎng)站正逐漸成為網(wǎng)站設(shè)計開發(fā)的主流方向，本文重點討論將Web標(biāo)準(zhǔn)應(yīng)用于網(wǎng)絡(luò)課程的重構(gòu)與建立的一般方法。

一、Web標(biāo)準(zhǔn)的組成及內(nèi)涵

Web標(biāo)準(zhǔn)即網(wǎng)站標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior），對應(yīng)的Web標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML（可擴(kuò)展超文本標(biāo)識語言）和XML；表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS；行為標(biāo)準(zhǔn)主要包括對象模型，如W3C DOM、JavaScript等。

1.結(jié)構(gòu)化標(biāo)準(zhǔn)語言

（１）ＸＭＬ

XML是Extensible Markup Languagｅ（可擴(kuò)展標(biāo)識語言）的簡寫。XML最初設(shè)計的目的是彌補HTML的不足，以強大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，因其跨平臺的特性普遍用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。

（２）ＸＨＴＭＬ

XML數(shù)據(jù)轉(zhuǎn)換能力強大，完全可以替代HTML，但對成千上萬已有的基于HTML語言設(shè)計的網(wǎng)站，直接采用XML還為時過早。在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對其進(jìn)行擴(kuò)展，形成了XHTML。因此，建立XHTML的目的就是實現(xiàn)HTML向XML的過渡。

（３）表現(xiàn)標(biāo)準(zhǔn)語言

CSS是Cascading Style Sheeｔｓ（層疊樣式表單）的縮寫。W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語言。純CSS布局與結(jié)構(gòu)式XHTML相結(jié)合能幫助設(shè)計師分離外觀與結(jié)構(gòu)，使站點的訪問及維護(hù)更加容易。

2.行為標(biāo)準(zhǔn)

（１）ＤＯＭ

DOM是Document Object Model(文檔對象模型)的縮寫。根據(jù)W3C DOM規(guī)范，DOM是一種與瀏覽器、平臺、語言無關(guān)的接口，使得用戶可以訪問頁面其他的標(biāo)準(zhǔn)組件。DOM解決了Netscape的JavaScript和Microsoft的Jscript之間的沖突，給予Web設(shè)計師和開發(fā)者一個標(biāo)準(zhǔn)的方法，使其能夠訪問站點中的數(shù)據(jù)、腳本和表現(xiàn)層對象。

（２）ＥＣＭＡＳｃｒｉｐｔ

ECMAScript是ECMA（European Computer Manu-facturers Association)制定的標(biāo)準(zhǔn)腳本語言，它在萬維網(wǎng)上應(yīng)用廣泛，往往被稱為JavaScript。

二、傳統(tǒng)網(wǎng)絡(luò)課程開發(fā)方法與Web標(biāo)準(zhǔn)構(gòu)建網(wǎng)絡(luò)課程的一般方法比較

Web標(biāo)準(zhǔn)構(gòu)建網(wǎng)絡(luò)課程的優(yōu)勢在于實現(xiàn)了內(nèi)容、表現(xiàn)與結(jié)構(gòu)的分離，這是在軟件開發(fā)架構(gòu)理論中提出來的。要理解內(nèi)容、表現(xiàn)與結(jié)構(gòu)分離需理解下列基本的概念。

1.內(nèi)容（Content）

內(nèi)容就是頁面實際要傳達(dá)的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意這里強調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身。

2.結(jié)構(gòu)(Structure)

如果內(nèi)容不加以組織與結(jié)構(gòu)化，雖然意義完整，但是混亂一團(tuán)，難以閱讀和理解，必須將它格式化。正如將論文分成標(biāo)題、作者、章、節(jié)、段落和列表等。

3.表現(xiàn)(Presentation)

雖然定義了結(jié)構(gòu)，但是內(nèi)容還是原來的樣式?jīng)]有改變，例如標(biāo)題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。所有這些用來改變內(nèi)容外觀的東西稱為表現(xiàn)。

4.行為(Behavior)

行為就是對內(nèi)容的交互及操作的效果。例如，使用JavaScript我們可以使內(nèi)容動起來，可以判斷表單提交，可以響應(yīng)用戶的操作。

5.傳統(tǒng)的HTML方法

傳統(tǒng)的HTML標(biāo)簽里既有控制結(jié)構(gòu)的標(biāo)簽，例如 ＜title＞、＜p＞，又有控制表現(xiàn)的標(biāo)簽，例如＜font＞、＜b＞，還有本意用于結(jié)構(gòu)后來被濫用于控制表現(xiàn)的標(biāo)簽，例如＜table＞等。結(jié)構(gòu)標(biāo)簽與表現(xiàn)標(biāo)簽混雜在一起，當(dāng)網(wǎng)絡(luò)課程只有少量的頁面時，結(jié)構(gòu)和表現(xiàn)混雜的弊端不明顯。如果有幾十甚至上百個頁面，問題就會突顯出來。

首先，由于內(nèi)容與表格緊密的嵌套、混雜在一起，結(jié)構(gòu)只是用表現(xiàn)來表現(xiàn)出來，而不是用標(biāo)簽。這種設(shè)計方法下，任何內(nèi)容的變化，結(jié)構(gòu)的變化都會影響整個頁面的表現(xiàn)，都需要逐一修改所有細(xì)節(jié)。

其次，數(shù)據(jù)的利用。當(dāng)網(wǎng)絡(luò)課程中有大量的內(nèi)容頁面，就意味著包含大量數(shù)據(jù)，這就存在數(shù)據(jù)查詢、處理和交換的問題。假如要求所有的頁面上都不需要顯示“評論”這一小節(jié)；假設(shè)要將頁面數(shù)據(jù)轉(zhuǎn)成Excel格式；假設(shè)要打印不要背景、導(dǎo)航、版權(quán)等不相干信息的干凈內(nèi)容的頁面。傳統(tǒng)的解決方法是：一頁一頁刪除“評論”小節(jié)；一頁一頁地拷貝粘貼到Excel；一頁一頁地制作“打印友好頁”。

6.Web標(biāo)準(zhǔn)方法目前推薦使用XHTML+CSS來制作網(wǎng)站，目標(biāo)是使結(jié)構(gòu)與表現(xiàn)徹底分離

在符合標(biāo)準(zhǔn)的網(wǎng)站構(gòu)建過程中，XHTML的標(biāo)簽只用來定義文檔的結(jié)構(gòu)，剝離所有設(shè)計表現(xiàn)的元素并把這些元素放到一個單獨的文件里，這個單獨的文件就是CSS。采用這種方法后，上面的第二個問題中的3個假設(shè)困難就迎刃而解?？梢岳脴邮奖韺⑺小霸u論”結(jié)構(gòu)不顯示（ＤＩＳＰＬＡＹ：ｎｏｎｅ）；可以根據(jù)頁面結(jié)構(gòu)標(biāo)簽將內(nèi)容自動導(dǎo)入到Excel；可以設(shè)計一個專門的打印樣式表，隱藏掉所有附加的信息，只打印干凈的內(nèi)容。

三、網(wǎng)絡(luò)課程采用Web標(biāo)準(zhǔn)重構(gòu)與開發(fā)的應(yīng)用價值

1.對學(xué)習(xí)者

（１）文件下載與頁面顯示速度更快

基于Web標(biāo)準(zhǔn)構(gòu)建的網(wǎng)絡(luò)課程中用div取代table進(jìn)行布局，使瀏覽器無需將時間消耗在表格嵌套的處理上，也無需等待table標(biāo)簽關(guān)閉；所有布局和樣式由一個專門的CSS文件控制，使頁面文件更小并提高了下載的速度；在文檔的第一行就聲明DOCTYPE，瀏覽器檢測到DOCTYPE后就會轉(zhuǎn)換到標(biāo)準(zhǔn)模式，對HTML和CSS按照標(biāo)準(zhǔn)的方式解釋，不必再把時間用在彌補、解釋不規(guī)范的HTML上了。

（２）學(xué)習(xí)者的友好性增強

符合Web標(biāo)準(zhǔn)的網(wǎng)絡(luò)課程能被包括色弱、色盲等殘障學(xué)習(xí)者在內(nèi)的更多學(xué)習(xí)者訪問；學(xué)習(xí)者能夠通過樣式選擇定制自己的表現(xiàn)界面；頁面能夠提供適于打印的版本。

（３）網(wǎng)絡(luò)課程的設(shè)備友好性改善

符合Web標(biāo)準(zhǔn)的網(wǎng)絡(luò)課程可以被更多使用不同瀏覽器或瀏覽設(shè)備的人所訪問。

2.對網(wǎng)絡(luò)課程的制作者與維護(hù)者

（１）開發(fā)與維護(hù)的成本降低

更少的代碼和組件，容易維護(hù)；更加簡潔的代碼降低了對帶寬的要求；改版方便，不需要變動頁面內(nèi)容。

（２）提供打印版本而不需要復(fù)制內(nèi)容

一個用語義化標(biāo)記的文檔可以很好地適應(yīng)于打印和其他的顯示設(shè)備，這一切僅僅通過鏈接不同的CSS文件就可以完成；同樣可以僅僅通過編輯單獨的一個文件就能完成跨站點表現(xiàn)上的轉(zhuǎn)換。

四、如何將Web標(biāo)準(zhǔn)應(yīng)用于現(xiàn)有網(wǎng)絡(luò)課程

將Web標(biāo)準(zhǔn)應(yīng)用到現(xiàn)有網(wǎng)站，大體分為三步。第一步用XHTML+DIV代替HTML+TABLE，對現(xiàn)有網(wǎng)站進(jìn)行重構(gòu)。其中最主要的是head區(qū)域的設(shè)置，包括DOCTYPE和名字空間等；其次是用XHTML的代碼規(guī)范修改HTML文件。XHTML的代碼規(guī)范要求：所有的標(biāo)記都要包括結(jié)束標(biāo)記，所有標(biāo)簽元素和屬性名都要使用小寫，所有標(biāo)記要合理嵌，所有屬性必須使用引號以及所有屬性都要賦值等等。第二步是用CSS進(jìn)行表現(xiàn)層控制。Web標(biāo)準(zhǔn)的精華就在于結(jié)構(gòu)和表現(xiàn)的全面分離，如果去除調(diào)用CSS的語句，整個頁面預(yù)覽起來就僅僅是內(nèi)容的羅列，正是不同的CSS使頁面呈現(xiàn)出不同的風(fēng)格。第三步通過在線校驗來檢查頁面是否符合Web標(biāo)準(zhǔn)。XHTML的校驗網(wǎng)址為http://validator.w3.org/，CSS的校驗網(wǎng)址為http://jigsaw.w3.org/css-validator/。它們包括網(wǎng)址校驗和文件上傳校驗等方式，還可以提供修正錯誤的幫助信息。這是調(diào)試頁面所必須的步驟。

五、使用Web標(biāo)準(zhǔn)制作全新的網(wǎng)絡(luò)課程

1.制作符合Web標(biāo)準(zhǔn)的站點，首先是在文檔的頂端聲明符合自己需要的DOCTYPE。

XHTML 1.0 提供了三種DTD聲明可供選擇：

（１）過渡的（Ｔｒａｎｓｉｔｉｏｎａｌ）：要求非常寬松的ＤＴＤ，它允許你繼續(xù)使用ＨＴＭＬ４．０１的標(biāo)識（但是要符合ＸＨＴＭＬ的寫法）。完整代碼如下：

＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML1.0Transitional//EN"http://www.w3.org/TR/XHTML1/DTD/XHTML1-transitional.dtd"＞

（２）嚴(yán)格的（Ｓｔｒｉｃｔ）：要求嚴(yán)格的DTD，你不能使用任何表現(xiàn)層的標(biāo)識和屬性，例如＜br＞。完整代碼如下：

＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd"＞

（３）框架的（Ｆｒａｍｅｓｅｔ）：專門針對框架頁面設(shè)計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下：

＜!OCTYPEhtmlPUBLIC"-//W3C//DTDHTML1.0Frameset//EN""http://www.w3.org/TR/XHTML1/DTD/XHTML1-frameset.dtd"＞

2.指定名字空間和語言編碼

指定名字空間的代碼為：＜html xmlns="http://www.w3.org/1999/XHTML" lang="gb2312"＞；指定語言編碼的代碼為＜meta http-equiv="Content-Type" content="text/html；charset=gb2312" /＞

3.調(diào)用樣式表

在符合標(biāo)準(zhǔn)的站點中推薦調(diào)用外部樣式表的方法來使用樣式表，例如：＜link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /＞ ，即將樣式表寫在站點的css目錄下的style.css文件中。網(wǎng)絡(luò)課程的制作者和維護(hù)者通過這樣的方法，可以不修改頁面只修改css文件而改變頁面的樣式。如果所有頁面都調(diào)用同一個樣式表文件，那么改一個樣式表文件，可以改變所有文件的樣式。

4.標(biāo)簽規(guī)范

在頭部及文檔的＜head＞＜/head＞之間的其他元素基本上與HTML一致，但是在整個文檔中推薦遵循XHTML的語法規(guī)范。所有的標(biāo)記都必須有一個相應(yīng)的結(jié)束標(biāo)記；所有標(biāo)簽的元素和屬性的名字都必須使用小寫；所有的XML標(biāo)記都必須合理嵌套。

5.網(wǎng)站布局

在符合Web標(biāo)準(zhǔn)的站點構(gòu)建中不但用CSS來控制整個站點文字的風(fēng)格、樣式以及站點的整體外觀，而且用CSS布局取代了傳統(tǒng)的表格布局。CSS布局與傳統(tǒng)表格(table)布局最大的區(qū)別在于：原來的定位都是采用表格，通過表格的間距或者用無色透明的GIF圖片來控制布局版塊的間距；而現(xiàn)在則采用層(div)來定位，通過層的margin、ding、border等屬性來控制版塊的間距。

6.定義div

分析一個典型的定義div的例子： #Sample{MARGIN: 10px 10px 10px 10px。；PADDING:20px 10px 10px 20px； BORDER-TOP: #CCC 2px solid；BORDER-RIGHT: #CCC 2px solid；BORDER-BOTTOM: #CCC 2px solid；BORDER-LEFT: #CCC 2px solid； BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom；COLOR: #666；TEXT-ALIGN: center； LINE-HEIGHT: 150%；WIDTH:60%；}

六、基于Web標(biāo)準(zhǔn)構(gòu)建的網(wǎng)絡(luò)課程校驗項目一覽

七、結(jié)束語

筆者經(jīng)過一段時間的學(xué)習(xí)與摸索對現(xiàn)有的網(wǎng)絡(luò)課程進(jìn)行重構(gòu)和改寫，通過實踐深刻體會到標(biāo)準(zhǔn)化構(gòu)建網(wǎng)絡(luò)課程帶來以下好處：由于內(nèi)容、表現(xiàn)、結(jié)構(gòu)徹底分離，使得網(wǎng)絡(luò)課程建設(shè)人員的分工更加明確，同時各自工作成果的整合也更加高效、快捷。在經(jīng)過一段時間的學(xué)習(xí)和適應(yīng)期后，網(wǎng)絡(luò)課程的開發(fā)速度在原來的基礎(chǔ)上有所提高；由于網(wǎng)絡(luò)課程響應(yīng)速度、設(shè)備友好性、用戶友好性的提高給學(xué)習(xí)者帶來了更好的用戶體驗，使得網(wǎng)絡(luò)課程的使用效果得到提升。

參考文獻(xiàn)：

[1]Jeffrey Zeldman1 網(wǎng)站重構(gòu)[M].北京:電子工業(yè)出版社,2004.

[2]World Wide Web Consortium,http://www1.w3c1.org 2005.

[3]Nicolae Gorge Dragulanescu1 Website Quality Evaluations:Criteria and Tools[J].The International Information & Li2brary Review，2002(34): 247-254.

[4]Thomas A1 Powell Web Design：The Complete Reference[M].北京:機械工業(yè)出版社,2000:15-27.