基于响应式WEB设计在线学习资源系统设计与实现

席先杰

(台州职业技术学院，浙江 台州 318000)

基于响应式WEB设计在线学习资源系统设计与实现

席先杰

(台州职业技术学院，浙江 台州 318000)

随着信息技术和通信技术的发展，人们在线学习模式和方式也越来越多样化，既要基于传统PC的在线学习模式，更需要基于移动手机端的学习模式。提出在线学习系统响应式WEB设计，从而实现针对学习者访问学习资源的设备类型，呈现不同的学习界面，提高学习效率与效果。

在线学习；课程学习；学习资源；响应式；响应式WEB设计

一、引言

CNNIC第38次调查报告显示，截至2016年6月，较2015年底增加3 656万人，我国手机网民规模达6.56亿。网民中使用手机上网的比例由2015年底的90.1%提升至92.5%，手机在上网设备中占据主导地位。因而针对手机的使用情况，学习资源系统适应手机移动学习模式势在必行。综观大部分学校自建的精品课程在线学习资源，还是普遍在使用固定宽度的建设模式，以台州职业技术学院为例，随机选取10门课程支持移动学习情况进行检索，发现都停留在PC端学习模式，学习资源系统存在如下的不足。

1.学习页面大小不能与学习终端屏幕窗口大小相匹配

当前学习资源系统都是以PC为访问设备对象，而PC机的屏幕分辨率都在1024×768以上，在进行学习资源系统设计页面时宽度大小一般设定在1000像素左右，页面按钮、图片、banner条等其他元素都是基于这个宽度进行设计的。但如果是移动学习的移动终端的屏幕而言，屏幕分辨率一般比PC屏幕较小，分辨率大多处于320×480、480×800、540×960、720×1280之间。如果基于PC的页面在移动终端来呈现，那么页面大小必然会被截取，内容不能完整显示。当然，用户如果要浏览全部页面，必须通过移动和缩放来显示被截取的内容，因而影响用户的使用效果和满意度。

2.学习页面上学习内容布局不能针对终端进行自适应调整

传统的学习页面学习内容是基于表格的布局形式，基于表格内容相对来讲是固定，如果基于表格的布局设计页面由移动终端来访问时，由于移动设备终端屏幕分辨率、尺寸类别纷繁复杂、大小各异，从屏幕方向来讲又分横向、竖向或横竖兼容。因此，要求针对学习者所访问设备的学习资源在布局上要相对灵活，能够针对访问者屏幕进行自适应调整。如果不能进行自适应调整，提供给学习者眼前内容就会出现混乱的页面布局，因而降低学习资源的质量。且传统基于PC方式的Web学习资源系统页面布局结构相对稳定，符合基于PC端用户的认知心理，但却不适合基于移动终端用户的学习。

因为教学资源库系统的建设要在正确的教学理论的指导下，不仅要考虑课程资源的特点，同时与学生的实际能力与水平相切合，另外也应适应新的技术与方法及教学模式。所开发的教学资源库系统不仅能够有效地帮助学生进行自主学习，而且也能帮助教师轻松地进行教学组织与教学实施，从而有效提高教学效率。基于响应式布局平台系统正好可以弥补或者解决目前资源库建设存在的若干问题。因而在此提出基于响应式web设计的课程学习资源系统的建设。

二、响应式WEB设计及其特点

1.响应式WEB设计

“响应式”(RWD, Responsive Web Design Web)[1]设计是由Ethan Marcotte在2010年提出的，旨在通过调整网页设计，使得页面能够根据用户行为和设备环境自动进行调整和适应[2]。具体是指根据用户终端所访问服务器的设备的类型或者窗口(window)大小提供适应终端设备且最佳视角效果的界面。或者更为精确的说，响应式Web设计是一种新的网站设计技术，可以使响应式Web设计的网站能适应于任何访问设备，可以是Android智能手机、平板电脑、TV、PC显示器、iPhone，包括屏幕可以是横向、纵向的屏幕。

2.响应式WEB设计的特点

(1)友好的用户访问

基于响应式Web设计的学习资源系统可以向学习者提供友好的Web界面，因为基于响应式Web设计的页面可以适应几乎所有设备的屏幕。当前电子和通信技术的发展日新月异，几乎每10天左右就会有一款智能手机推出。如果学习资源系统是采用的响应式Web设计，就可以让学习者与学习资源系统一直保持联系，而这正是开发响应式学习资源系统的最佳目的。

(2)移动频段(Mobile Segment)数据统计

基于响应式WEB设计学习资源系统的学习资源在使用过程中，在响应式系统的帮助下，学习资源系统的后台可以获得学习资源系统流量的全景图。学习资源系统的建设方只需要做的是创建一个移动频段(流量统计)，就可获得与学习资源系统流量相关的所有必要信息。流量的状态在分析学习资源系统性能及采取必要措施提升效率与效能方面有着十分重要的作用。

(3)方便快乐分享

基于响应式WEB设计学习资源系统的建设者，仅通过简单方便的URL地址进行社交链接分享和友情链接，可以为创建更好的学习资源系统作出积极贡献。

(4)减少开发和维护成本

如果在线学习资源一个是基于PC端，再开发一个单独基于移动端的学习资源系统，势必会增加相应的开发费用和维护费。如果基于响应式WEB设计学习资源系统就相当拥有了两套学习资源系统。且基于响应式WEB设计的学习资源系统，维护的成本也会很小，因为基于响应式WEB设计只有一个布局设计，且可工作在所有类型的设备上，从而可以明显地减少开发和维护的工作量[3]。

三、响应式WEB设计

1.总体流程

基于响应式WEB设计学习资源总体流程如下图所示。首先用户通过终端设备访问网络学习资源，当服务器判断其终端设备类型，依据设备类型选取与之配套的定义样式，然后对学习资源所定义的样式进行呈现，使基于同一布局的内容在不同的终端设备上呈现出与终端设备相对应的显示效果。

2.详细设计

实现响应式WEB设计学习资源系统主要考虑的两部分，HTML和 CSS,HTML网页设计的基本内容文字、图像、视频与音频，CSS控制web内容的显示大小位置，WEB设计也大力提倡内容与效果的分离。具体内容代码如下[4]：

具体页面采用传统的header、content和footer的结构布局。最上方为课程名称、logo 和导航菜单，下方为当前栏目的学习内容。当屏幕显示页面分辨率大于960时，采用的页面布局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;}

当屏幕显示页面分辨率小于960但大于600时，采用如下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%;}}

当屏幕分辨率小于横向分辨率600时：

@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;}}

从而依据不同的分辨率实现不同的效果。

采用响应式WEB设计的学习资源系统，可以自动适应访问终端屏幕分辨率，因而提供友好的学习界面，提高学习者的兴趣，从而提高学习效果与成果，也可利用基于响应式布局设计对原学习资源进行改造，提高原学习系统的利用率，基于响应式WEB设计将在学习资源或其他WEB建设上有着广阔的前景。

[1]关兆一，唐棣.基于网页样式改造的移动学习资源开发研究[J].中国教育信息化,2014(21)：39.

[2]廖黎莉，邵亦秋，郭翠珍.基于响应式Web设计的CMS页面生成机制的实现研究[J].电脑编程技巧与维护，2015(22)：5.

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

[4]Ben frain.响应式web设计[M].王永强，译.北京：人民邮电出版社，2013.

〔责任编辑：李海波〕

10.3969/j.issn.1008-6714.2017.01.044

2016-10-13

全国信息技术研究“十二五”规划课题“基于移动学习的学习系统设计与应用研究”(146231986)

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

TP393.09

1008-6714(2017)01-0094-02