響應式微課程網站的設計

文靜++王秀麗++杜柯柯

摘 要

本網站運用了JavaWeb和JS技術，完成了一個基于響應式的微課程網站的開發，用戶可以在該網站觀看視頻資料、學習相關多媒體課程知識，還可以在討論區進行留言提問，該網站還實現了PC端和移動端的兼容顯示，提高了學習效率、節省了學習時間，用戶可以在移動端隨時隨地學習，滿足了不同用戶的不同需求。

【關鍵詞】響應式 微課程 設計 HTML5 JS

教育教學改革的發展離不開互聯網新生技術的支持，由于HTML5新標準的推進，基于響應式的微課程網站發展日益蓬勃，微課程接合互聯網特性以知識點為單位，以時間靈活、目標明確而聞名，而HTML5新技術的應用使網站建設向響應式方向發展，使微課程的學習者不受時間和地點限制按需進行學習，提高學習效率。

本網站前端開發語言為HTML5，JS，JQUERY，JAVA等；后臺所使用的開發工具主要是MyEclipse；前臺頁面所使用的工具主要DreamWeaver；還用到PS和FLASF等輔助工具；本網站選擇MYSQL數據庫。

1 需求分析

1.1 系統需求

本網站的用戶主要分為兩類：用戶和管理員。

（1）用戶需求：普通用戶登陸該網站主要的操作有：討論區評論、瀏覽信息、個人信息修改。

（2）管理員需求：對網站的用戶、評論等信息進行管理。

本網站面向整個互聯網的學習者，但主要為相應的課堂學習者提供相應的課件、視頻等課程材料，普通用戶可以利用該網站快速學習自己感興趣的知識，課堂學習者可以利用該網站強化學習內容的同時獲得額外的課程補充內容。

2 數據庫設計

2.1 數據字典

本系統總共構建了用戶角色表、用戶信息表、討論區信息表。

（1）用戶角色表主要用來存儲用戶的身份類別，屬性：用戶身份編號、用戶身份，其中用戶身份編號為主鍵。

（2）用戶信息表主要用來存儲用戶的詳細信息，屬性：用戶編號、用戶身份編號、賬號、用戶名、密碼、性別、年齡、聯系方式、郵箱，其中用戶編號為主鍵，是此表的唯一標識，用戶身份編號為外鍵。

（3）評論表主要用來存放會員留言內容，屬性：評論編號、用戶名、評論時間、評論內容，評論編號為主鍵。

2.2 數據庫實體關系

ER圖中的實體關系：

（1）管理員：評論 1：N；

（2）用戶：評論 1：N；

（3）管理員：用戶 1：N。

3 響應式框架布局設計

3.1 響應式設計原理

響應式網頁設計最初是由 Ethan Marcotte提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案，Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是關于屏幕分辨率自適應以及自動縮放的圖片等等，它更像是一種對于設計的全新思維模式；我們應當向下兼容、移動優先。

3.2 響應式設計在系統中的應用

這個網站中響應式的實現主要使用bootstrap架構來實現，Bootstrap 是一個用于快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、Javascript的。Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機；它為開發人員創建接口提供了一個簡潔統一的解決方案；它包含了功能強大的內置組件，易于定制。

網站界面主要使用HTML5和JS動效來進行界面的設計，使用媒體查詢語言@media screen and （max-width：） 和bootstrap來實現網頁端和移動端的自適應響應布局設計。

4 系統功能實現

4.1 登錄注冊模塊設計

為了使得網站的一些信息和功能能讓用戶更方便的使用，就必須有一個用戶登陸功能。作為一個基本的身份驗證，應具有以如下功能：先接受新用戶的注冊后實現用戶的登陸。登錄界面包含賬號和密碼信息，運用bootstrap架構中的form表單標簽。

4.2 討論區評論模塊設計

用戶可以在討論區中提出自已的疑問或者學習中遇到的問題，等待其他人的解答，該功能也需要用戶登錄；登錄之后才可以評價留言；用戶可以選擇問題來發表議論，也可以回復別人的評論。

4.3 個人信息修改模塊設計

該功能需要登錄。用戶登錄之后可以看到自己的學習進程，修改自己的用戶個人信息，記錄自己的問題以及學習成果；也可以看到自己對學習過程的評價以及問題反饋，如果用戶不想登錄了，也可以在個人用戶信息頁面退出賬號登錄，管理員登錄以后，可以查看用戶的個人信息以及對所有的評論進行增刪改查操作。

5 結論

響應式網站的實現滿足了不同用戶的不同需求，使網站具有較強的適應能力，對新的設備有更好的適應能力。響應式網站設計雖然在設計規劃階段有些耗時費力，但降低了后期的開發和維護成本。從用戶角度來看，該系統移植性好，用戶可以在手機、電腦、平板等不同設備上進行信息瀏覽和學習，實現高效操作。從開發者的角度來看，該系統的實現省去了為不同設備開發兩個或兩個以上的網站，節省了時間，并且對新的設備兼容性良好。當然在有些情況下響應式網頁設計還不是一個完美的解決方案，這時就需要通過開發不同的網站或者APP去解決。

參考文獻

[1]梁樂明，梁錦明.從資源建設到應用：微課程的現狀與趨勢[J].電化教育，2013.

[2]梁樂明，曹俏俏.張寶輝.微課程設計模式研究[J]. 開放教育研究，2013.

[3]黃建軍，郭邵青.論微課程的設計與開發[J].現代教育技術，2013.

[4]余劍波，王陸.微課程設計的點鏈圈（PLE）模型研究[J].遠程教育雜志，2013.

[5]倪彥佩，王彤.基于WEB的交互式統計分析系統實現[J].山西電子技術，2010（02）：66-67.

[6]李歡 WEB2.0時代交互式網頁界面的審美設計研究[J].科技創新導報，2009（17）：13-02.

[7]王莉.基于WEB的交互式計算機網絡課程教學系統的設計與實現[J].電腦開發與應用，2010，23（04）：15-17.