基于HTML5的网络教学系统的设计与实现

张永超

摘要：该设计采用HTML5、ASP.NET、SQL Server 2012等技术开发了一个网络教学系统，主要实现了用户管理，教学资源的查询、浏览、上传、下载，在线测试、作业提交、互动答疑等主要功能，基本上可以满足网络教学的一般需求。

关键词：教学网站；HTML5；ASP.NET

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）26-0051-02

为了贯彻《教育部关于推进教师教育信息化建设的意见》中提出的教育要信息化、现代化的精神：“要全面推进现代信息技术和教育技术在教师教育中的普及和应用，要探索并构建信息环境下教师教育的有效模式”。多年来，我院结合学校的实际情况在探索教学新模式，提高教师信息化素质方面做了大量积极的尝试，并把网络教学平台建设作为教学信息化的一个重要组成部分。日常教学中通常会遇到以下问题：传统单一的课堂教学方式缺乏互动性往往容易使学生产生厌学情绪；课外面对网上庞杂浩瀚的知识不知道怎么学，甚至大量时间浪费在游戏娱乐中；课外任课教师缺乏和学生的交流和沟通等，因此，针对以上问题开发一个功能比较完善的网络教学平台显得尤为重要，网络教学作为课堂教学的有益补充和延伸，通过共享教学资源、在线答疑交流、收集评价和反馈信息、了解教学效果，及时改进教学方法，从而提高学校的信息化教学水平。

1 HTML5新特性简介

1） HTML5作为最新的HTML标准，引入了全新的语义化的结构元素标签，使页面具有逻辑性结构、容易维护，并且对数据挖掘服务更友好，解决了大量使用Div布局混乱的问题。新增的结构元素，不仅大大提高了网页代码的可读性，而且对搜索引擎而言，将更好识别和组织索引内容，加快搜索的速度和准确度。

2） HTML5 提供了一种通过 audio和video 元素来分别处理音频和视频的统一标准方法。之前网页上的音频和视频的播放需要浏览器安装不同的插件去实现。

3） HTML5通过Canvas元素配合脚本语言直接在浏览器上绘制显示图像和动画从而替代了Flash等插件。

4） HTML5通过创建cache manifest文件，实现web 应用的离线访问，不仅提高了资源加载速度，而且减少了服务器的负载。

2 系统总体设计

通过可行性分析，本系统采用B/S结构，前台界面主要使用HTML5+CSS3+JavaScript 来设计，后台管理系统主要使用ASP.NET+ SQL Server 2012数据库来实现。从学校实际情况出发，尽量采用现有的软硬件环境，要符合国内流行的网络教学系统的设计模式，以达到充分利用现有资源，提高系统开发水平和应用效果的目的。网络教学系统旨在为学校师生提供一个在线学习和交流的环境，根据系统的功能设计，划分出以下几大模块：1）用户管理模块；2）课程管理模块；3）资源管理模块；4）作业提交模块；5）作业管理模块；6）在线测试模块；7）互动答疑模块等。系统具体功能模块划分如图1所示：

3 数据库设计

本系统主要涉及学生信息、教师信息、管理员信息、课件视频等资源信息、作业信息、考试信息，留言信息等，从系统需求、信息量大小、安全性等方面综合考虑，决定采用SQL Server 2012作为本系统的数据库。系统的数据库中主要包含：1）用户类型表：主要用于存储登录用户的类型，主要字段有类型ID、类型名称，用户权限等，其中类型ID为主键；2）用户信息表：主要用于保存用户注册时的信息，主要字段有用户ID、用户名、Email、密码、电话号码、专业等，其中用户ID为主键；3）资源类型表：主要用于存储资源的类型，主要字段有类型ID、类型名称其中类型ID为主键；4）资源信息表：主要用于存储不同类型教学资源的基本信息，主要字段包括：资源ID、资源名称、资源类别、资源分组、上传的用户等。其中资源ID为主键；5）作业发布信息表：主要用于保存教师所发布作业的信息；6）作业提交信息表：主要用于保存学生上交的作业内容；7）考试题目信息表：主要用来保存在线测试中的考试题目信息；8）答疑信息表：主要用于保存学生的留言信息及教师的回复信息。

4 主要功能模块设计

4.1 用户管理模块

根据操作权限的不同，把用户分为学生、教师和管理员三种不同的类型，不同的用户具有不同的权限，登录后进入不同的操作界面。学生用户能浏览下载教学资源、修改个人信息、参加测试、提交作业等。教师用户可以上传教学资源、发布作业、管理测试、进行答疑等。管理员具有最高的权限，可以进行全部操作，包括添加修改删除用户信息，分配权限等操作。

4.2 课程管理模块

课程管理主要是对课程的基本信息进行管理，管理员或者任课教师可以添加新的课程，修改已有课程信息。为了方便用户查找所需要的资源，系统对网站的课程进行了分类。其中包括公共基础课，专业课，选修课，实验课。按照不同的类别对课程进行分组分类来快速定位到自己所需学习的课程。

4.3 资源管理模块

资源管理主要实现在后台为系统添加资源信息以及删除和修改资源的功能。教学资源主要包括课程介绍、教師介绍、教学大纲，教学课件，视频录像，参考资料，历年试题等。本地资源上传是为了方便用户之间共享资源，资源上传模块可以在网站使用的过程中不断积累丰富网站的内容。资源下载可以帮助用户下载所需要的资源文件。方便用户本地浏览学习。当用户需要查找某个特定的资源时，可以通过在搜索模块中的搜索框里输入关键词快速检索对应的资源文件。注意在上传视频文件时使用 HTML5中

4.4 作业提交和管理模块

作业管理模块主要实现教师发布新的作业任务，已发布作业的查询、修改和删除，对学生已提交作业的下载查看和批改打分。学生通过作业提交模块查看老师发布的作业任务，完成后上传提交作业，在我的作业的查询页面中可以查看自己上交过的作业信息，包括作业的得分和老师的反馈意见等。

4.5 在线测试模块

在线测试模块主要实现相关课程的在线考试功能。任课教师可以通过后台添加、修改、删除课程测试题目，并对数据库中的学生和试题信息进行维护。学生通过学号姓名等登录后进入测试页面开始答题，按照系统设定时间开始倒计时，让学生随时知道考试剩余时间，测试到达结束时间时系统自动交卷并阅卷，学生可以在成绩页面查询测试成绩，教师可以在后台查看学生详细答题情况，并导出系统自动生成的测试成绩单和成绩分析表格等。

4.6 互动答疑模块

互动答疑模块主要通过课程留言板和在线聊天等使教师和学生进行交流，了解教学的效果，及时改进教学方法。平时因为教学任务繁重课堂时间有限，任课教师缺少和学生的沟通，所以教师可以在课程留言板上统一解答学生遇到的典型的问题，学生可以通过该模块交流课程学习经验心得，上传分享自己拥有的学习资料。通过在线聊天室实现多人在线实时交流。该模块既是学生互相交流学习的一个平台，也是任课教师了解跟踪学生学习情况的一个窗口。

5 结论

该网络教学平台基于最新的HTML5标准，将信息技术和教育教學有机结合，实现了优秀教学资源的存储与共享、教学效果评价与教学信息反馈、在线测试答疑等基本功能，使教学真正跨越时间、空间的约束，既为教师提供了一个真正开放式的、以资源为中心的教学环境，又为学生营造了一个自主学习、主动创新的学习氛围，使传统的课堂教学可以逐步向课外拓展，通过网络教学平台的建设和应用，势必促进教学水平的提高。但网络教学平台的建设是一项长期的工作，随着信息技术在教育领域的不断应用和发展以及学校自身的改革和建设我们还需进一步的研究和探讨……

参考文献：

[1] Jon Galloway，Brad Wilson.ASP.NET MVC 5高级编程[M].5版.北京：清华大学出版社，2015.

[2] 潘雪峰，张宇晴，毛敏，等.在线教育产业发展现状及产品设计研究[J].科技和产业，2013（8）.

[3] 张海藩.软件工程导论[M].北京：清华大学出版社，2006.

[4] 萨师煊，王珊.数据库系统概论[M].北京：高等教育出版社，2006.

[5] 《教育部关于启动高等学校教学质量与教学改革工程精品课程建设工作的通知》（教高[2003]1号）[Z].

[通联编辑：唐一东]