基于Jquery課程網站的設計

梅元昭

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

關鍵詞：超文本標記語言;Jquery課程網站;JavaScript 對象簡譜;Ajax開發;文檔對象模型

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

本文通過使用超文本標記語言（Hyper Text Markup Language，HTML），Jquery和JSON等多項技術設計網頁結構，將上傳課程資料轉換成Flash的swf和flv兩種視頻文件格式，完成課程網站的建設，最終達到符合上述課程網站建設的要求。

1? ? 軟件涉及的理論

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

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

為了獲得更好的用戶體驗，在頁面內與服務器通信中，網站運用了Jquery中的Ajax技術，即異步請求頁面局部刷新技術，是基于標準化的并被廣泛支持的一項技術。Ajax可使用DOM進行動態顯示和交互，能減輕服務器與寬帶的負擔，不需要插件支持。

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

2? ? 網站結構設計

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

主頁和詳細頁的具體情況，可根據課程的特點和教師個人的需求來設置，這既能充分體現網站的個性多樣化，又能保證該類網站在結構上的穩定性，使開發人員大幅節省開發時間，提高開發工作效率，同樣，還可作為相應網站模板，便于后期開發網站時選擇[2]。

3? ? 網站實現

3.1? 網站主頁設計

Jquery庫是一個JavaScript文件，只需把對網頁HTML的