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

2017年第1期 林区教学 No．12017 of GenemlNo．238 总第238期 TeachingForestry Region doi：10．3969“．issn．1008-6714．2017．01．044 基于响应式wEB设计在线学习资源系统设计与实现 席先杰 (台州职业技术学院，浙江台州318000) 摘要：随着信息技术和通信技术的发展，人们在线学习模式和方式也越来越多样化，既要基于传统Pc的在 线学习模式，更需要基于移动手机端的学习模式。提出在线学习系统响应式wEB设计，从而实现针对学习者访问 学习资源的设备类型，呈现不同的学习界面，提高学习效率与效果。 关键词：在线学习；课程学习；学习资源；响应式；响应式wEB设计 中图分类号：11P393．09文献标志码：A 文章编号：1008_6714(2017)01旬094旬2 习资源在布局上要相对灵活，能够针对访问者屏幕进行自 一、引言 适应调整。如果不能进行自适应调整，提供给学习者眼前 cNNIc第38次调查报告显示，截至2016年6月，较 内容就会出现混乱的页面布局，因而降低学习资源的质 2015年底增加3656万人，我国手机网民规模达6．56亿。 量。且传统基于Pc方式的web学习资源系统页面布局 网民中使用手机上网的比例由2015年底的90．1％提升至 结构相对稳定，符合基于Pc端用户的认知心理，但却不适 92．5％，手机在上网设备中占据主导地位。因而针对手机 合基于移动终端用户的学习。 的使用情况，学习资源系统适应手机移动学习模式势在必 因为教学资源库系统的建设要在正确的教学理论的 行。综观大部分学校自建的精品课程在线学习资源，还是 指导下，不仅要考虑课程资源的特点，同时与学生的实际 普遍在使用固定宽度的建设模式，以台州职业技术学院为 能力与水平相切合，另外也应适应新的技术与方法及教学 例，随机选取10门课程支持移动学习情况进行检索，发现 模式。所开发的教学资源库系统不仅能够有效地帮助学 都停留在Pc端学习模式，学习资源系统存在如下的不足。 生进行自主学习，而且也能帮助教师轻松地进行教学组织 1．学习页面大小不能与学习终端屏幕窗口大小相匹配 与教学实施，从而有效提高教学效率。基于响应式布局平 当前学习资源系统都是以Pc为访问设备对象，而Pc台系统正好可以弥补或者解决目前资源库建设存在的若 机的屏幕分辨率都在1024×768以上，在进行学习资源系 干问题。因而在此提出基于响应式web设计的课程学习 统设计页面时宽度大小一般设定在1000像素左右，页面 资源系统的建设。 按钮、图片、banner条等其他元素都是基于这个宽度进行 设计的。但如果是移动学习的移动终端的屏幕而言，屏幕 二、响应式wEB设计及其特点 分辨率一般比Pc屏幕较小，分辨率大多处于320×480、 1．响应式wEB设计 480×800、540×960、720×1280之间。如果基于PC的页 Web “响应式”(RwD，ResponsiveDesignWe