基于HTML5的在线学习系统的设计与实现

　　摘 要: 在线课程学习网站的发展迅速，吸引了广大用户。基于 HTML5 的在线学习系统经过需求分析、设计、编程等过程实现，它将文字、图片、音频、视频、课件、动画等教学资源融合在一起，配合在线留言、论坛等互动学习活动让在线学习功能更加丰富。丰富的知识内容的呈现形式和互动学习活动更加吸引学习者参与到在线学习中，享受学习的乐趣，提高学习效率。

　　关键词: HTML5; 在线学习; 需求分析; 在线测试

　　目前在线课程学习网站的发展也是非常的迅速，它的出现吸引大量用户，满足了用户的移动学习要求。随着流媒体技术的发展，通过多媒体技术将文字、图片、音频、视频、课件、动画等教学资源融合在一起让学习内容表现更加生动，同时配合在线留言、论坛等互动学习活动让在线学习功能更加丰富。[1]用户不仅可以浏览文档，观看教学视频、教学课件，还可以进行在线练习、在线考试。在线课程学习网站为广大用户们提供了十分便利的条件。

　　1 HTML5 优势

　　网站的建设大部分采用 B/S 架构，压力聚集在服务器端，这就需要平衡客户端和服务器端的压力。通 过 HTML5 与 JavaScript 相结合使用将底层的大多数逻辑处理转移到客户端，服务器端只提供少量逻辑处理和数据接口，解决 B/S 架构服务器压力问题。[2]

　　HTML5 具有动画特性、多媒体特性，可实现文字、图片、表格、音频、视频、色彩的有机结合。HTML5 新增的标签能直接支持视频、音频等多媒体元素的在线呈现，可以替代部分 Flash 和 Silverlight 能够实现的功能，并且具有更好的处理效率。[3]同时配合 CSS3 支持字体嵌入、版面排版以及动画功能，让 HTML5 在线课程的学习内容的表现形式变得更加丰富，能极大吸引学习者的注意，增强学习效果。同时 HTML5 还具有较好的学习交互、支持跨平台学习、离线学习等特性。

　　2 系统需求分析

　　通过对教师、学生进行走访，结合传统课堂教学和网络教学，形成系统需求分析。系统用户有学生、教师、管理员和游客。一个学习网站，主要围绕的就是这几类用户展开的，学生主要是进入网站进行学习，教师就负责上传课件、文档视频资源，供学生查看，管理员就负责管理课程的信息以及教师的信息。

　　在线课程学习网站中，学生用户可以进行登录网站，进入网站后，学生可以根据自己的喜好去选择文档或者视频方式进行学习，也可以将自己需要的文档进行下载，这样下次即便不进入网站也是不影响查看资料的。视频资源是可以在线观看的，只要连接了网络，能够上网就可以看视频，边看边学。网站还为学生提供了一个在线测试的模块，学生学习过后还能进行在线测试。教师在网站后台上传考试题目之后，学生在网站前台页面可以进行测试，点击首页的在线测试就可以。如果学习过程中出现自己不明白的问题或者自己觉得拿不定主意的问题，还可以通过留言板给老师留言。

　　教师用户需要点击网站首页，输入用户名和密码，点击登录，进入网站的后台，可以上传文档课件以及视频等教学资源，并可对其进行添加、删除、修改等操作。教师的试题管理可以修改删除已发布的试题。教师也可以根据留言板学生反映的情况，以及提出的改进建议更加完善一下资源信息。

　　管理员的登录也是进入网站首页之后，点击一下网站底部的登录后台，输入用户名和密码，就可以登录后台。登录后台之后，可以对课程信息进行操作，还有对教师队伍的管理，简单便捷。

　　游客打开网站后可以查看网站公告、论坛以及公共课程资源。

　　3 系统设计

　　在线学习系统的总体设计分为学生、教师、管理员和游客。

　　学生用户主要实现的功能有:注册、登录、观看视频、查阅课件、文档资源下载、在线测试、在线留言。自己遇到难解的问题，就在留言板给教师留言，或者自己觉得哪些地方需要完善，需要更加改进一下，都可以给教师留言，提一下自己的建议。

　　教师用户主要实现的功能有:注册、登录后台，教师用户登录后台后就可以上传发布课件，进行在线答疑，回答学生在留言板中提出的问题，还可以上传发布教学视频。

　　管理员主要需要实现的功能有:登录后台，管理员用账号密码登录后台后就可以管理课程信息、管理教师信息、管理用户信息。

　　游客:面向互联网上的所有用户，拥有观看公共课程、公告、论坛的权限。

　　4 系统实现

　　系统设计分为前台和后台，前台是系统与用户的交互界面，为用户提供课程视频、学习课件、资源下载、在线测试、在线留言等功能。用户注册后获得相应的用户权限，没有注册的用户只能以游客的身份进行访问，只能观看公共课程部分。在登录的过程中用户选择学生、教师和管理员这三个角色登录，系统会在数据表中进行查询验证。

　　本系统主要利用 HTML5 配合 CSS3 来定制统一的页面色彩风格，建立页面字体，明确主体维度，定做页面主体。通过 HTML5 提供的和标签实现影音频播放功能。[4]可以根据视频课程样式建立自定义媒体播放模块，增加自定义控件。

　　5 总结

　　目前在线课程学习网站的发展迅速，吸引了广大用户。基于 HTML5 的在线学习系统经过需求分析、设计将其实现，它将文字、图片、音频、视频、课件、动画等教学资源融合在一起，让学习内容表现更加生动，同时配合在线留言、论坛等互动学习活动让在线学习功能更加丰富。丰富的知识内容的呈现形式和互动学习活动更加吸引学习者参与到在线学习中，享受学习的乐趣，提高学习效率。

　　参考文献:

　　[1]郜继红.基于 HTML5 的移动学习平台应用实现[J].现代盐化工，2017，12( 6) : 103-104.

　　[2]彭巍.基于 HTML5 的网络课程教学系统的设计与实现[D].吉林大学，2015.

　　[3]李丽平，薛玉倩.基于 HTML5 微课平台的开发与实现[J].河北软件职业技术学院学报，2017，19( 3) : 1-3.

　　[4]赵学铭，王刚.基于 HTML5 的交互式移动学习平台研究[J].现代教育技术，2016，26( 9) : 106-112.

　　项目基金: 山东协和学院实验室项目“基于 HTML5 的在线学习系统的设计与实现”( 编号: 2018SYKF43)

　　作者简介: 李兆翠( 1980-) ，女，山东莒南人，硕士，副教授，主要研究方向为计算机软件工程。

　　《基于HTML5的在线学习系统的设计与实现》来源：《科技风》2018年12期，作者：李兆翠。

《基于HTML5的在线学习系统的设计与实现》

上一篇：基于微信小程序的数据结构学习平台设计

下一篇：基于PLC的数控机床电气控制