基于HTML5的在線學習系統的設計與實現

摘 要：在線課程學習網站的發展迅速，吸引了廣大用戶。基于HTML5的在線學習系統經過需求分析、設計、編程等過程實現，它將文字、圖片、音頻、視頻、課件、動畫等教學資源融合在一起，配合在線留言、論壇等互動學習活動讓在線學習功能更加豐富。豐富的知識內容的呈現形式和互動學習活動更加吸引學習者參與到在線學習中，享受學習的樂趣，提高學習效率。

關鍵詞：HTML5；在線學習；需求分析；在線測試

目前在線課程學習網站的發展也是非常的迅速，它的出現吸引大量用戶，滿足了用戶的移動學習要求。隨著流媒體技術的發展，通過多媒體技術將文字、圖片、音頻、視頻、課件、動畫等教學資源融合在一起讓學習內容表現更加生動，同時配合在線留言、論壇等互動學習活動讓在線學習功能更加豐富。[1]用戶不僅可以瀏覽文檔，觀看教學視頻、教學課件，還可以進行在線練習、在線考試。在線課程學習網站為廣大用戶們提供了十分便利的條件。

1 HTML5優勢

網站的建設大部分采用B/S 架構，壓力聚集在服務器端，這就需要平衡客戶端和服務器端的壓力。通過HTML5與JavaScript相結合使用將底層的大多數邏輯處理轉移到客戶端，服務器端只提供少量邏輯處理和數據接口，解決 B/S 架構服務器壓力問題。[2]

HTML5具有動畫特性、多媒體特性，可實現文字、圖片、表格、音頻、視頻、色彩的有機結合。HTML5新增的標簽能直接支持視頻、音頻等多媒體元素的在線呈現，可以替代部分Flash和Silverlight能夠實現的功能，并且具有更好的處理效率。[3]同時配合CSS3支持字體嵌入、版面排版以及動畫功能，讓HTML5在線課程的學習內容的表現形式變得更加豐富，能極大吸引學習者的注意，增強學習效果。同時HTML5還具有較好的學習交互、支持跨平臺學習、離線學習等特性。

2 系統需求分析

通過對教師、學生進行走訪，結合傳統課堂教學和網絡教學，形成系統需求分析。系統用戶有學生、教師、管理員和游客。一個學習網站，主要圍繞的就是這幾類用戶展開的，學生主要是進入網站進行學習，教師就負責上傳課件、文檔視頻資源，供學生查看，管理員就負責管理課程的信息以及教師的信息。

在線課程學習網站中，學生用戶可以進行登錄網站，進入網站后，學生可以根據自己的喜好去選擇文檔或者視頻方式進行學習，也可以將自己需要的文檔進行下載，這樣下次即便不進入網站也是不影響查看資料的。視頻資源是可以在線觀看的，只要連接了網絡，能夠上網就可以看視頻，邊看邊學。網站還為學生提供了一個在線測試的模塊，學生學習過后還能進行在線測試。教師在網站后臺上傳考試題目之后，學生在網站前臺頁面可以進行測試，點擊首頁的在線測試就可以。如果學習過程中出現自己不明白的問題或者自己覺得拿不定主意的問題，還可以通過留言板給老師留言。

教師用戶需要點擊網站首頁，輸入用戶名和密碼，點擊登錄，進入網站的后臺，可以上傳文檔課件以及視頻等教學資源，并可對其進行添加、刪除、修改等操作。教師的試題管理可以修改刪除已發布的試題。教師也可以根據留言板學生反映的情況，以及提出的改進建議更加完善一下資源信息。

管理員的登錄也是進入網站首頁之后，點擊一下網站底部的登錄后臺，輸入用戶名和密碼，就可以登錄后臺。登錄后臺之后，可以對課程信息進行操作，還有對教師隊伍的管理，簡單便捷。

游客打開網站后可以查看網站公告、論壇以及公共課程資源。

3 系統設計

在線學習系統的總體設計分為學生、教師、管理員和游客。

學生用戶主要實現的功能有：注冊、登錄、觀看視頻、查閱課件、文檔資源下載、在線測試、在線留言。自己遇到難解的問題，就在留言板給教師留言，或者自己覺得哪些地方需要完善，需要更加改進一下，都可以給教師留言，提一下自己的建議。

教師用戶主要實現的功能有：注冊、登錄后臺，教師用戶登錄后臺后就可以上傳發布課件，進行在線答疑，回答學生在留言板中提出的問題，還可以上傳發布教學視頻。

管理員主要需要實現的功能有：登錄后臺，管理員用賬號密碼登錄后臺后就可以管理課程信息、管理教師信息、管理用戶信息。

游客：面向互聯網上的所有用戶，擁有觀看公共課程、公告、論壇的權限。

4 系統實現

系統設計分為前臺和后臺，前臺是系統與用戶的交互界面，為用戶提供課程視頻、學習課件、資源下載、在線測試、在線留言等功能。用戶注冊后獲得相應的用戶權限，沒有注冊的用戶只能以游客的身份進行訪問，只能觀看公共課程部分。在登錄的過程中用戶選擇學生、教師和管理員這三個角色登錄，系統會在數據表中進行查詢驗證。

本系統主要利用HTML5配合CSS3來定制統一的頁面色彩風格，建立頁面字體，明確主體維度，定做頁面主體。通過HTML5提供的

5 總結

目前在線課程學習網站的發展迅速，吸引了廣大用戶。基于HTML5的在線學習系統經過需求分析、設計將其實現，它將文字、圖片、音頻、視頻、課件、動畫等教學資源融合在一起，讓學習內容表現更加生動，同時配合在線留言、論壇等互動學習活動讓在線學習功能更加豐富。豐富的知識內容的呈現形式和互動學習活動更加吸引學習者參與到在線學習中，享受學習的樂趣，提高學習效率。

參考文獻：

[1]郜繼紅.基于HTML5的移動學習平臺應用實現[J].現代鹽化工，2017，12（6）：103-104.

[2]彭巍.基于HTML5的網絡課程教學系統的設計與實現[D].吉林大學，2015.

[3]李麗平，薛玉倩.基于HTML5微課平臺的開發與實現[J].河北軟件職業技術學院學報，2017，19（3）：1-3.

[4]趙學銘，王剛.基于HTML5的交互式移動學習平臺研究[J].現代教育技術，2016，26（9）：106-112.

作者簡介：李兆翠（1980-），女，山東莒南人，碩士，副教授，主要研究方向為計算機軟件工程。