基于HTML5的网络课堂前端设计
第1章 绪论
1.1 系统开发背景
随着科学技术的越来越发达，互联网也慢慢的渗透到人们生活的方方面面，无论一个什么样的产品或者公司都需要有自己的特色设计来宣传或者介绍自己。网站的设计和一个很好的使用性能可以很好的提高自己产品或公司的点击访问量，从而达到宣传的效果。让自己的网站既符合现在人的审美视觉，也能提供给用户很好的体验，那么网站的前端设计就显得特别重要。在各种应用不断的趋于更加网络化的时代，为将东西做的更好更美观，一种新的技术标准也随之产生，那就是HTML5。HTML5不仅用来表示web内容，更是将Web带入一个成熟的应用平台，视频、音频、动画、图像以及同电脑的交互都被标准化。也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的客户端，并可以在移动终端、PC或者其他有网络的地方轻松使用。
关于网站的使用相信大家多多少少都有自己的体验，它已经渗透到人们的生活中，不论是移动客户端还是PC都随处可见它的身影。网络课堂也顺应时代发展潮流，运用网络来提供随时随地都可以学习的方便性，高效快捷又能提升自己。
1.2 网络课堂开发的目的和意义
在当前的互联网时代中，网络技术、多媒体技术、互联网技术都得到了飞速发展，带给我们的是更快的网络传输速度、更好的多媒体播放效果、更智能化的IT管理系统。互联网思维的出现改变了传统企业的工作模式，推动线下的业务逐渐向线上转移。在教育机构中也发生着这样的变化，将传统的线下课堂式教育逐步向网络课堂教学进行转移，改变教育模式为线上、线下结合的方式，这样不仅可以降低企业的人力成本、教室租赁成本，还能拓展企业的业务和新学员的来源渠道，提升企业的业务水平，提高企业的经营效益。
当前互联网技术中最炙手可热的前端开发技术就是HTML5，通过HTML5与javaScript相结合使用将底层的大多数逻辑处理转移到客户端，服务器端口只提供少量逻辑处理和数据接口。网络课堂这个网站使用javaScript、html、css实现前端的展示和逻辑调用，开发架构MVC与HTML5的配合使用，进一步实现了模块化的功能开发，提升了开发效率的同时也提高了网站的工作效率。
该网络课堂重点在于前端，网页的设计和管理都比较合理和易于后期的优化维护。它提供了用户登录注册功能，注册成功可以观看视频，对老师讲课内容进行评论，对老师提出问题，以及收藏、转发老师课程。作为讲课老师，可以增加自己的课堂，对课程进行一定的描述，并可以修改相应内容，同时可以为学生解答问题，批改学生试卷，采纳学生意见等。此网站个性安全，管理得当。
1.3 可行性分析
1
洛阳师范学院2016届本科生毕业设计
该设计采用sublime Text软件作为开发工具。此软件使用时可以选择语言类型，有记忆功能，若是使用过的变量、对象、或者属性、方法还在此软件内打开时，当再次使用相同的变量、对象、或者属性、方法时，此工具使用它的记忆功能将之前用过的变量、对象、或者属性、方法、事件以联想的方式显示出来，方便直接使用。利用该软件既可以做网页，也可以写php脚本语言操作后台，在windows系统上方便易操作。
该网页属于小型的个人设计，无需投入开发经费，使用一些公用软件开发，前期的UI由专业人员设计，后期有本人借鉴他人的图片和框架，经处理后使用。
2
基于HTML5的网络课堂前端设计
第2章 网络课堂前端需求分析
2.1 用户功能需求分析
设计数据库系统时，首先充分了解用户各个方面的需求，包括现有的以及将来可能增加的，通过查询资料及在网上实施其他相关功能，该网页设计了以下角色及其功能：
用户：如果是一个未注册的账户，必须先注册，注册成功后登录。登录后可以查看不同老师的相关课程，可以对老师进行提问，对课程进行评价、转发分享，也可以给老师点赞，收藏老师的课程。
老师：如果是一个未曾在此网站开过课的老师，首先注册相关信息，然后添加个人课程，并且可以对自己的课程有相应的描述，修改描述内容。对学生提问给予相应的解答，对学生提出的建议可以选择性的采纳，对学生提交的试卷进行批改。对课程订单以及学生对课程的转发、收藏、评论进行查看以及设置为已查看或者全部删除。
2.2 前端的性能要求
1.实用性
该网页实用性强，只要注册了的账号，就可以管理本人的东西，更像属于本人的一个平台
2.安全性
该网页安全性高，账号由自己管理，如果他人不知道你的密码将无法对本人的相关信息及功能进行操作。
3.便捷性
该网页界面友好,操作方便，能够达到所见即所得的效果,方便用户的使用
2.3 业务流程分析
依据系统的需求分析，得到系统的流程图如图2-1所示：
3
洛阳师范学院2016届本科生毕业设计
图2-1 系统流程图
4