基于Jquery課程網(wǎng)站的設(shè)計(jì)

梅元昭

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

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

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

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

1? ? 軟件涉及的理論

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

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

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

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

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

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

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

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

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

Jquery庫(kù)是一個(gè)JavaScript文件，只需把對(duì)網(wǎng)頁(yè)HTML的