基于響應(yīng)式WEB設(shè)計(jì)在線(xiàn)學(xué)習(xí)資源系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

席先杰

(臺(tái)州職業(yè)技術(shù)學(xué)院，浙江 臺(tái)州 318000)

基于響應(yīng)式WEB設(shè)計(jì)在線(xiàn)學(xué)習(xí)資源系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

席先杰

(臺(tái)州職業(yè)技術(shù)學(xué)院，浙江 臺(tái)州 318000)

隨著信息技術(shù)和通信技術(shù)的發(fā)展，人們?cè)诰€(xiàn)學(xué)習(xí)模式和方式也越來(lái)越多樣化，既要基于傳統(tǒng)PC的在線(xiàn)學(xué)習(xí)模式，更需要基于移動(dòng)手機(jī)端的學(xué)習(xí)模式。提出在線(xiàn)學(xué)習(xí)系統(tǒng)響應(yīng)式WEB設(shè)計(jì)，從而實(shí)現(xiàn)針對(duì)學(xué)習(xí)者訪問(wèn)學(xué)習(xí)資源的設(shè)備類(lèi)型，呈現(xiàn)不同的學(xué)習(xí)界面，提高學(xué)習(xí)效率與效果。

在線(xiàn)學(xué)習(xí)；課程學(xué)習(xí)；學(xué)習(xí)資源；響應(yīng)式；響應(yīng)式WEB設(shè)計(jì)

一、引言

CNNIC第38次調(diào)查報(bào)告顯示，截至2016年6月，較2015年底增加3 656萬(wàn)人，我國(guó)手機(jī)網(wǎng)民規(guī)模達(dá)6.56億。網(wǎng)民中使用手機(jī)上網(wǎng)的比例由2015年底的90.1%提升至92.5%，手機(jī)在上網(wǎng)設(shè)備中占據(jù)主導(dǎo)地位。因而針對(duì)手機(jī)的使用情況，學(xué)習(xí)資源系統(tǒng)適應(yīng)手機(jī)移動(dòng)學(xué)習(xí)模式勢(shì)在必行。綜觀大部分學(xué)校自建的精品課程在線(xiàn)學(xué)習(xí)資源，還是普遍在使用固定寬度的建設(shè)模式，以臺(tái)州職業(yè)技術(shù)學(xué)院為例，隨機(jī)選取10門(mén)課程支持移動(dòng)學(xué)習(xí)情況進(jìn)行檢索，發(fā)現(xiàn)都停留在PC端學(xué)習(xí)模式，學(xué)習(xí)資源系統(tǒng)存在如下的不足。

1.學(xué)習(xí)頁(yè)面大小不能與學(xué)習(xí)終端屏幕窗口大小相匹配

當(dāng)前學(xué)習(xí)資源系統(tǒng)都是以PC為訪問(wèn)設(shè)備對(duì)象，而PC機(jī)的屏幕分辨率都在1024×768以上，在進(jìn)行學(xué)習(xí)資源系統(tǒng)設(shè)計(jì)頁(yè)面時(shí)寬度大小一般設(shè)定在1000像素左右，頁(yè)面按鈕、圖片、banner條等其他元素都是基于這個(gè)寬度進(jìn)行設(shè)計(jì)的。但如果是移動(dòng)學(xué)習(xí)的移動(dòng)終端的屏幕而言，屏幕分辨率一般比PC屏幕較小，分辨率大多處于320×480、480×800、540×960、720×1280之間。如果基于PC的頁(yè)面在移動(dòng)終端來(lái)呈現(xiàn)，那么頁(yè)面大小必然會(huì)被截取，內(nèi)容不能完整顯示。當(dāng)然，用戶(hù)如果要瀏覽全部頁(yè)面，必須通過(guò)移動(dòng)和縮放來(lái)顯示被截取的內(nèi)容，因而影響用戶(hù)的使用效果和滿(mǎn)意度。

2.學(xué)習(xí)頁(yè)面上學(xué)習(xí)內(nèi)容布局不能針對(duì)終端進(jìn)行自適應(yīng)調(diào)整

傳統(tǒng)的學(xué)習(xí)頁(yè)面學(xué)習(xí)內(nèi)容是基于表格的布局形式，基于表格內(nèi)容相對(duì)來(lái)講是固定，如果基于表格的布局設(shè)計(jì)頁(yè)面由移動(dòng)終端來(lái)訪問(wèn)時(shí)，由于移動(dòng)設(shè)備終端屏幕分辨率、尺寸類(lèi)別紛繁復(fù)雜、大小各異，從屏幕方向來(lái)講又分橫向、豎向或橫豎兼容。因此，要求針對(duì)學(xué)習(xí)者所訪問(wèn)設(shè)備的學(xué)習(xí)資源在布局上要相對(duì)靈活，能夠針對(duì)訪問(wèn)者屏幕進(jìn)行自適應(yīng)調(diào)整。如果不能進(jìn)行自適應(yīng)調(diào)整，提供給學(xué)習(xí)者眼前內(nèi)容就會(huì)出現(xiàn)混亂的頁(yè)面布局，因而降低學(xué)習(xí)資源的質(zhì)量。且傳統(tǒng)基于PC方式的Web學(xué)習(xí)資源系統(tǒng)頁(yè)面布局結(jié)構(gòu)相對(duì)穩(wěn)定，符合基于PC端用戶(hù)的認(rèn)知心理，但卻不適合基于移動(dòng)終端用戶(hù)的學(xué)習(xí)。

因?yàn)榻虒W(xué)資源庫(kù)系統(tǒng)的建設(shè)要在正確的教學(xué)理論的指導(dǎo)下，不僅要考慮課程資源的特點(diǎn)，同時(shí)與學(xué)生的實(shí)際能力與水平相切合，另外也應(yīng)適應(yīng)新的技術(shù)與方法及教學(xué)模式。所開(kāi)發(fā)的教學(xué)資源庫(kù)系統(tǒng)不僅能夠有效地幫助學(xué)生進(jìn)行自主學(xué)習(xí)，而且也能幫助教師輕松地進(jìn)行教學(xué)組織與教學(xué)實(shí)施，從而有效提高教學(xué)效率。基于響應(yīng)式布局平臺(tái)系統(tǒng)正好可以彌補(bǔ)或者解決目前資源庫(kù)建設(shè)存在的若干問(wèn)題。因而在此提出基于響應(yīng)式web設(shè)計(jì)的課程學(xué)習(xí)資源系統(tǒng)的建設(shè)。

二、響應(yīng)式WEB設(shè)計(jì)及其特點(diǎn)

1.響應(yīng)式WEB設(shè)計(jì)

“響應(yīng)式”(RWD, Responsive Web Design Web)[1]設(shè)計(jì)是由Ethan Marcotte在2010年提出的，旨在通過(guò)調(diào)整網(wǎng)頁(yè)設(shè)計(jì)，使得頁(yè)面能夠根據(jù)用戶(hù)行為和設(shè)備環(huán)境自動(dòng)進(jìn)行調(diào)整和適應(yīng)[2]。具體是指根據(jù)用戶(hù)終端所訪問(wèn)服務(wù)器的設(shè)備的類(lèi)型或者窗口(window)大小提供適應(yīng)終端設(shè)備且最佳視角效果的界面?；蛘吒鼮榫_的說(shuō)，響應(yīng)式Web設(shè)計(jì)是一種新的網(wǎng)站設(shè)計(jì)技術(shù)，可以使響應(yīng)式Web設(shè)計(jì)的網(wǎng)站能適應(yīng)于任何訪問(wèn)設(shè)備，可以是Android智能手機(jī)、平板電腦、TV、PC顯示器、iPhone，包括屏幕可以是橫向、縱向的屏幕。

2.響應(yīng)式WEB設(shè)計(jì)的特點(diǎn)

(1)友好的用戶(hù)訪問(wèn)

基于響應(yīng)式Web設(shè)計(jì)的學(xué)習(xí)資源系統(tǒng)可以向?qū)W習(xí)者提供友好的Web界面，因?yàn)榛陧憫?yīng)式Web設(shè)計(jì)的頁(yè)面可以適應(yīng)幾乎所有設(shè)備的屏幕。當(dāng)前電子和通信技術(shù)的發(fā)展日新月異，幾乎每10天左右就會(huì)有一款智能手機(jī)推出。如果學(xué)習(xí)資源系統(tǒng)是采用的響應(yīng)式Web設(shè)計(jì)，就可以讓學(xué)習(xí)者與學(xué)習(xí)資源系統(tǒng)一直保持聯(lián)系，而這正是開(kāi)發(fā)響應(yīng)式學(xué)習(xí)資源系統(tǒng)的最佳目的。

(2)移動(dòng)頻段(Mobile Segment)數(shù)據(jù)統(tǒng)計(jì)

基于響應(yīng)式WEB設(shè)計(jì)學(xué)習(xí)資源系統(tǒng)的學(xué)習(xí)資源在使用過(guò)程中，在響應(yīng)式系統(tǒng)的幫助下，學(xué)習(xí)資源系統(tǒng)的后臺(tái)可以獲得學(xué)習(xí)資源系統(tǒng)流量的全景圖。學(xué)習(xí)資源系統(tǒng)的建設(shè)方只需要做的是創(chuàng)建一個(gè)移動(dòng)頻段(流量統(tǒng)計(jì))，就可獲得與學(xué)習(xí)資源系統(tǒng)流量相關(guān)的所有必要信息。流量的狀態(tài)在分析學(xué)習(xí)資源系統(tǒng)性能及采取必要措施提升效率與效能方面有著十分重要的作用。

(3)方便快樂(lè)分享

基于響應(yīng)式WEB設(shè)計(jì)學(xué)習(xí)資源系統(tǒng)的建設(shè)者，僅通過(guò)簡(jiǎn)單方便的URL地址進(jìn)行社交鏈接分享和友情鏈接，可以為創(chuàng)建更好的學(xué)習(xí)資源系統(tǒng)作出積極貢獻(xiàn)。

(4)減少開(kāi)發(fā)和維護(hù)成本

如果在線(xiàn)學(xué)習(xí)資源一個(gè)是基于PC端，再開(kāi)發(fā)一個(gè)單獨(dú)基于移動(dòng)端的學(xué)習(xí)資源系統(tǒng)，勢(shì)必會(huì)增加相應(yīng)的開(kāi)發(fā)費(fèi)用和維護(hù)費(fèi)。如果基于響應(yīng)式WEB設(shè)計(jì)學(xué)習(xí)資源系統(tǒng)就相當(dāng)擁有了兩套學(xué)習(xí)資源系統(tǒng)。且基于響應(yīng)式WEB設(shè)計(jì)的學(xué)習(xí)資源系統(tǒng)，維護(hù)的成本也會(huì)很小，因?yàn)榛陧憫?yīng)式WEB設(shè)計(jì)只有一個(gè)布局設(shè)計(jì)，且可工作在所有類(lèi)型的設(shè)備上，從而可以明顯地減少開(kāi)發(fā)和維護(hù)的工作量[3]。

三、響應(yīng)式WEB設(shè)計(jì)

1.總體流程

基于響應(yīng)式WEB設(shè)計(jì)學(xué)習(xí)資源總體流程如下圖所示。首先用戶(hù)通過(guò)終端設(shè)備訪問(wèn)網(wǎng)絡(luò)學(xué)習(xí)資源，當(dāng)服務(wù)器判斷其終端設(shè)備類(lèi)型，依據(jù)設(shè)備類(lèi)型選取與之配套的定義樣式，然后對(duì)學(xué)習(xí)資源所定義的樣式進(jìn)行呈現(xiàn)，使基于同一布局的內(nèi)容在不同的終端設(shè)備上呈現(xiàn)出與終端設(shè)備相對(duì)應(yīng)的顯示效果。

2.詳細(xì)設(shè)計(jì)

實(shí)現(xiàn)響應(yīng)式WEB設(shè)計(jì)學(xué)習(xí)資源系統(tǒng)主要考慮的兩部分，HTML和 CSS,HTML網(wǎng)頁(yè)設(shè)計(jì)的基本內(nèi)容文字、圖像、視頻與音頻，CSS控制web內(nèi)容的顯示大小位置，WEB設(shè)計(jì)也大力提倡內(nèi)容與效果的分離。具體內(nèi)容代碼如下[4]：

具體頁(yè)面采用傳統(tǒng)的header、content和footer的結(jié)構(gòu)布局。最上方為課程名稱(chēng)、logo 和導(dǎo)航菜單，下方為當(dāng)前欄目的學(xué)習(xí)內(nèi)容。當(dāng)屏幕顯示頁(yè)面分辨率大于960時(shí)，采用的頁(yè)面布局CSS如下：

*{padding:0px; margin:auto;}

.head{background:#933;width:95%;height:100px;text-align:center; padding-top:5px}

.content{width:95%;}

.left{background-color:#36F;height:450px; float:left; width:30%;}

.main{background:#0FF;height:450px; float:left; width:50%;}

.right{background:#39F;height:450px;}

.foot{ background:#03F;height:100px; width:95%; text-align:center;}

當(dāng)屏幕顯示頁(yè)面分辨率小于960但大于600時(shí)，采用如下CSS代碼：

@media screen and (min-width: 600px) and (max-width: 960px){

.head{width:95%;}

.content{width:95%;}

.left{width:50%;float:left;}

.main{width:50%;float:left;}

.right{display:none;}

.foot{clear:both; width:95%;}}

當(dāng)屏幕分辨率小于橫向分辨率600時(shí)：

@media screen and (max-width:600px){

.head{width:95%; height:100px; text-align:center;}

.content{width:95%}

.left{clear:both;width:100%;height:100px;}

.main{clear:both;width:100%;height:100px;}

.right{clear:both;width:100%;height:100px;}

.foot{clear:both;width:95%;height:100px;}}

從而依據(jù)不同的分辨率實(shí)現(xiàn)不同的效果。

采用響應(yīng)式WEB設(shè)計(jì)的學(xué)習(xí)資源系統(tǒng)，可以自動(dòng)適應(yīng)訪問(wèn)終端屏幕分辨率，因而提供友好的學(xué)習(xí)界面，提高學(xué)習(xí)者的興趣，從而提高學(xué)習(xí)效果與成果，也可利用基于響應(yīng)式布局設(shè)計(jì)對(duì)原學(xué)習(xí)資源進(jìn)行改造，提高原學(xué)習(xí)系統(tǒng)的利用率，基于響應(yīng)式WEB設(shè)計(jì)將在學(xué)習(xí)資源或其他WEB建設(shè)上有著廣闊的前景。

[1]關(guān)兆一，唐棣.基于網(wǎng)頁(yè)樣式改造的移動(dòng)學(xué)習(xí)資源開(kāi)發(fā)研究[J].中國(guó)教育信息化,2014(21)：39.

[2]廖黎莉，邵亦秋，郭翠珍.基于響應(yīng)式Web設(shè)計(jì)的CMS頁(yè)面生成機(jī)制的實(shí)現(xiàn)研究[J].電腦編程技巧與維護(hù)，2015(22)：5.

[3]http://zhan.renren.com/web520?tagId=18599 & checked=true

[4]Ben frain.響應(yīng)式web設(shè)計(jì)[M].王永強(qiáng)，譯.北京：人民郵電出版社，2013.

〔責(zé)任編輯：李海波〕

10.3969/j.issn.1008-6714.2017.01.044

2016-10-13

全國(guó)信息技術(shù)研究“十二五”規(guī)劃課題“基于移動(dòng)學(xué)習(xí)的學(xué)習(xí)系統(tǒng)設(shè)計(jì)與應(yīng)用研究”(146231986)

席先杰(1972—)，男，湖南常德人。

TP393.09

1008-6714(2017)01-0094-02