梅元昭

摘? ?要：文章采用HTML和Jquery實現(xiàn)了單位的精品課程網(wǎng)站設(shè)計，在設(shè)計過程中歸納了課程網(wǎng)站的具體特點，通過網(wǎng)頁局部刷新輸出、JSON數(shù)據(jù)和多種數(shù)據(jù)資料格式間的轉(zhuǎn)換等技術(shù)的使用設(shè)計出具有動態(tài)感強、傳輸性能高、網(wǎng)頁樣式多樣化的網(wǎng)頁，最終解決了課程網(wǎng)站設(shè)計上的需求。

關(guān)鍵詞：超文本標(biāo)記語言;Jquery課程網(wǎng)站;JavaScript 對象簡譜;Ajax開發(fā);文檔對象模型

當(dāng)今社會隨著信息化和網(wǎng)絡(luò)的迅猛發(fā)展，學(xué)校發(fā)展要求教師進(jìn)行課程建設(shè)，尤其是精品課程網(wǎng)站的建設(shè)，需要將教師的課程申報、相應(yīng)的教學(xué)成果和教學(xué)設(shè)計思路等內(nèi)容在網(wǎng)絡(luò)中進(jìn)行展示。同時，需要將大量的各種類型教學(xué)資源（如圖片、PPT、視頻等文件）發(fā)布到網(wǎng)上，便于供師生交流學(xué)習(xí)，在實施過程中既要做到學(xué)習(xí)和交流的無障礙，又要能對教師課程資料實施一定保護(hù)，以避免不必要的泄漏損失。

本文通過使用超文本標(biāo)記語言（Hyper Text Markup Language，HTML），Jquery和JSON等多項技術(shù)設(shè)計網(wǎng)頁結(jié)構(gòu)，將上傳課程資料轉(zhuǎn)換成Flash的swf和flv兩種視頻文件格式，完成課程網(wǎng)站的建設(shè)，最終達(dá)到符合上述課程網(wǎng)站建設(shè)的要求。

1? ? 軟件涉及的理論

網(wǎng)站主要使用了HTML，層疊樣式表（Cascading Style Sheets，CSS）和Jquery來設(shè)計，HTML是一種用來制作超文本文檔的簡單標(biāo)記語言，是網(wǎng)絡(luò)的通用語言，允許網(wǎng)頁制作人建立文本與圖片、視頻等多媒體相結(jié)合的復(fù)雜頁面。通過HTML和CSS可以表現(xiàn)出豐富多彩的設(shè)計風(fēng)格，可以實現(xiàn)頁面之間的跳轉(zhuǎn)，它的優(yōu)勢在于與平臺無關(guān)，是靜態(tài)的網(wǎng)頁，占用服務(wù)器資源較小，便于搜索引擎收錄，不會受到黑客的攻擊，相對來講具有較高網(wǎng)絡(luò)安全等特點[1]。

Jquery是一個兼容多種瀏覽器的JavaScript框架，宗旨是寫更少的代碼，做更多的事情。它屬于輕量級的js庫，能兼容CSS3。Jquery快速、方便地幫助用戶處理HTML文檔和事件的交互，實現(xiàn)網(wǎng)頁的動畫效果。Jquery簡化了過去JavaScript編程任務(wù)，有簡單而易于理解的編程方式，盡可能地強化常用功能，消除冗余，而且有更加方便、快捷的選擇和操作DOM節(jié)點方法。Jquery的說明文檔很全，各種應(yīng)用詳細(xì)，同時，還有許多成熟的第三方插件可供選擇。

為了獲得更好的用戶體驗，在頁面內(nèi)與服務(wù)器通信中，網(wǎng)站運用了Jquery中的Ajax技術(shù)，即異步請求頁面局部刷新技術(shù)，是基于標(biāo)準(zhǔn)化的并被廣泛支持的一項技術(shù)。Ajax可使用DOM進(jìn)行動態(tài)顯示和交互，能減輕服務(wù)器與寬帶的負(fù)擔(dān)，不需要插件支持。

JSON是一種純文本的標(biāo)準(zhǔn)鍵值對的數(shù)據(jù)格式，相對于XML，JSON數(shù)據(jù)格式比較簡單，易于讀寫，易于解析，支持多種語言。JSON支持對象引用以及函數(shù)，在語法的層面上，JSON與其他格式的區(qū)別在于分隔數(shù)據(jù)的字符，其分隔符限于單引號、小括號、中括號、大括號、冒號和逗號。

2? ? 網(wǎng)站結(jié)構(gòu)設(shè)計

通過對課程網(wǎng)站的結(jié)構(gòu)分析，發(fā)現(xiàn)一般網(wǎng)站都由很多頁面構(gòu)成，但許多頁面在外觀有諸多共同之處，相異的只是數(shù)據(jù)顯示內(nèi)容和超鏈接生成的網(wǎng)頁。由此引發(fā)一個問題，即組成在課程網(wǎng)站的網(wǎng)頁中，首頁和詳細(xì)頁在結(jié)構(gòu)上存在較大差異的，將網(wǎng)站應(yīng)該被設(shè)計成兩個還是一個頁面？如果設(shè)計一個頁面構(gòu)成，網(wǎng)站雖被高度概括，但是由于涉及內(nèi)容太多，不利于設(shè)計和調(diào)試，給后期的代碼維護(hù)帶來困難。因此，采用主要由兩個網(wǎng)頁—主頁和詳細(xì)頁構(gòu)成網(wǎng)站的方案。

主頁和詳細(xì)頁的具體情況，可根據(jù)課程的特點和教師個人的需求來設(shè)置，這既能充分體現(xiàn)網(wǎng)站的個性多樣化，又能保證該類網(wǎng)站在結(jié)構(gòu)上的穩(wěn)定性，使開發(fā)人員大幅節(jié)省開發(fā)時間，提高開發(fā)工作效率，同樣，還可作為相應(yīng)網(wǎng)站模板，便于后期開發(fā)網(wǎng)站時選擇[2]。

3? ? 網(wǎng)站實現(xiàn)

3.1? 網(wǎng)站主頁設(shè)計

Jquery庫是一個JavaScript文件，只需把對網(wǎng)頁HTML的