響應(yīng)式微課程網(wǎng)站的設(shè)計

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

摘 要

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

【關(guān)鍵詞】響應(yīng)式 微課程 設(shè)計 HTML5 JS

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

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

1 需求分析

1.1 系統(tǒng)需求

本網(wǎng)站的用戶主要分為兩類：用戶和管理員。

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

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

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

2 數(shù)據(jù)庫設(shè)計

2.1 數(shù)據(jù)字典

本系統(tǒng)總共構(gòu)建了用戶角色表、用戶信息表、討論區(qū)信息表。

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

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

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

2.2 數(shù)據(jù)庫實體關(guān)系

ER圖中的實體關(guān)系：

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

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

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

3 響應(yīng)式框架布局設(shè)計

3.1 響應(yīng)式設(shè)計原理

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

3.2 響應(yīng)式設(shè)計在系統(tǒng)中的應(yīng)用

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

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

4 系統(tǒng)功能實現(xiàn)

4.1 登錄注冊模塊設(shè)計

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

4.2 討論區(qū)評論模塊設(shè)計

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

4.3 個人信息修改模塊設(shè)計

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

5 結(jié)論

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

參考文獻

[1]梁樂明，梁錦明.從資源建設(shè)到應(yīng)用：微課程的現(xiàn)狀與趨勢[J].電化教育，2013.

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

[3]黃建軍，郭邵青.論微課程的設(shè)計與開發(fā)[J].現(xiàn)代教育技術(shù)，2013.

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

[5]倪彥佩，王彤.基于WEB的交互式統(tǒng)計分析系統(tǒng)實現(xiàn)[J].山西電子技術(shù)，2010（02）：66-67.

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

[7]王莉.基于WEB的交互式計算機網(wǎng)絡(luò)課程教學系統(tǒng)的設(shè)計與實現(xiàn)[J].電腦開發(fā)與應(yīng)用，2010，23（04）：15-17.