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

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

摘 要

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

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

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

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

1 需求分析

1.1 系統(tǒng)需求

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

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

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

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

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

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

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

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

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

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

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

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

（1）管理員：評(píng)論 1：N；

（2）用戶：評(píng)論 1：N；

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

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

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

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

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

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

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

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

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

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

4.2 討論區(qū)評(píng)論模塊設(shè)計(jì)

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

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

該功能需要登錄。用戶登錄之后可以看到自己的學(xué)習(xí)進(jìn)程，修改自己的用戶個(gè)人信息，記錄自己的問題以及學(xué)習(xí)成果；也可以看到自己對(duì)學(xué)習(xí)過程的評(píng)價(jià)以及問題反饋，如果用戶不想登錄了，也可以在個(gè)人用戶信息頁面退出賬號(hào)登錄，管理員登錄以后，可以查看用戶的個(gè)人信息以及對(duì)所有的評(píng)論進(jìn)行增刪改查操作。

5 結(jié)論

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

參考文獻(xiàn)

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

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

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

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

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

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

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