响应式微课程网站的设计

文静++王秀丽++杜柯柯

摘 要

本网站运用了JavaWeb和JS技术，完成了一个基于响应式的微课程网站的开发，用户可以在该网站观看视频资料、学习相关多媒体课程知识，还可以在讨论区进行留言提问，该网站还实现了PC端和移动端的兼容显示，提高了学习效率、节省了学习时间，用户可以在移动端随时随地学习，满足了不同用户的不同需求。

【关键词】响应式 微课程 设计 HTML5 JS

教育教学改革的发展离不开互联网新生技术的支持，由于HTML5新标准的推进，基于响应式的微课程网站发展日益蓬勃，微课程接合互联网特性以知识点为单位，以时间灵活、目标明确而闻名，而HTML5新技术的应用使网站建设向响应式方向发展，使微课程的学习者不受时间和地点限制按需进行学习，提高学习效率。

本网站前端开发语言为HTML5，JS，JQUERY，JAVA等；后台所使用的开发工具主要是MyEclipse；前台页面所使用的工具主要DreamWeaver；还用到PS和FLASF等辅助工具；本网站选择MYSQL数据库。

1 需求分析

1.1 系统需求

本网站的用户主要分为两类：用户和管理员。

（1）用户需求：普通用户登陆该网站主要的操作有：讨论区评论、浏览信息、个人信息修改。

（2）管理员需求：对网站的用户、评论等信息进行管理。

本网站面向整个互联网的学习者，但主要为相应的课堂学习者提供相应的课件、视频等课程材料，普通用户可以利用该网站快速学习自己感兴趣的知识，课堂学习者可以利用该网站强化学习内容的同时获得额外的课程补充内容。

2 数据库设计

2.1 数据字典

本系统总共构建了用户角色表、用户信息表、讨论区信息表。

（1）用户角色表主要用来存储用户的身份类别，属性：用户身份编号、用户身份，其中用户身份编号为主键。

（2）用户信息表主要用来存储用户的详细信息，属性：用户编号、用户身份编号、账号、用户名、密码、性别、年龄、联系方式、邮箱，其中用户编号为主键，是此表的唯一标识，用户身份编号为外键。

（3）评论表主要用来存放会员留言内容，属性：评论编号、用户名、评论时间、评论内容，评论编号为主键。

2.2 数据库实体关系

ER图中的实体关系：

（1）管理员：评论 1：N；

（2）用户：评论 1：N；

（3）管理员：用户 1：N。

3 响应式框架布局设计

3.1 响应式设计原理

响应式网页设计最初是由 Ethan Marcotte提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案，Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。

3.2 响应式设计在系统中的应用

这个网站中响应式的实现主要使用bootstrap架构来实现，Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、Javascript的。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机；它为开发人员创建接口提供了一个简洁统一的解决方案；它包含了功能强大的内置组件，易于定制。

网站界面主要使用HTML5和JS动效来进行界面的设计，使用媒体查询语言@media screen and （max-width：） 和bootstrap来实现网页端和移动端的自适应响应布局设计。

4 系统功能实现

4.1 登录注册模块设计

为了使得网站的一些信息和功能能让用户更方便的使用，就必须有一个用户登陆功能。作为一个基本的身份验证，应具有以如下功能：先接受新用户的注册后实现用户的登陆。登录界面包含账号和密码信息，运用bootstrap架构中的form表单标签。

4.2 讨论区评论模块设计

用户可以在讨论区中提出自已的疑问或者学习中遇到的问题，等待其他人的解答，该功能也需要用户登录；登录之后才可以评价留言；用户可以选择问题来发表议论，也可以回复别人的评论。

4.3 个人信息修改模块设计

该功能需要登录。用户登录之后可以看到自己的学习进程，修改自己的用户个人信息，记录自己的问题以及学习成果；也可以看到自己对学习过程的评价以及问题反馈，如果用户不想登录了，也可以在个人用户信息页面退出账号登录，管理员登录以后，可以查看用户的个人信息以及对所有的评论进行增删改查操作。

5 结论

响应式网站的实现满足了不同用户的不同需求，使网站具有较强的适应能力，对新的设备有更好的适应能力。响应式网站设计虽然在设计规划阶段有些耗时费力，但降低了后期的开发和维护成本。从用户角度来看，该系统移植性好，用户可以在手机、电脑、平板等不同设备上进行信息浏览和学习，实现高效操作。从开发者的角度来看，该系统的实现省去了为不同设备开发两个或两个以上的网站，节省了时间，并且对新的设备兼容性良好。当然在有些情况下响应式网页设计还不是一个完美的解决方案，这时就需要通过开发不同的网站或者APP去解决。

参考文献

[1]梁乐明，梁锦明.从资源建设到应用：微课程的现状与趋势[J].电化教育，2013.

[2]梁乐明，曹俏俏.张宝辉.微课程设计模式研究[J]. 开放教育研究，2013.

[3]黄建军，郭邵青.论微课程的设计与开发[J].现代教育技术，2013.

[4]余剑波，王陆.微课程设计的点链圈（PLE）模型研究[J].远程教育杂志，2013.

[5]倪彦佩，王彤.基于WEB的交互式统计分析系统实现[J].山西电子技术，2010（02）：66-67.

[6]李欢 WEB2.0时代交互式网页界面的审美设计研究[J].科技创新导报，2009（17）：13-02.

[7]王莉.基于WEB的交互式计算机网络课程教学系统的设计与实现[J].电脑开发与应用，2010，23（04）：15-17.