基于HTML5的视频教程网站设计与开发.docx
《基于HTML5的视频教程网站设计与开发.docx》由会员分享，可在线阅读，更多相关《基于HTML5的视频教程网站设计与开发.docx（40页珍藏版）》请在冰豆网上搜索。
基于HTML5的视频教程网站设计与开发
摘要
在线学习随着网络信息技术的飞快发展，已经改变了原先的授课方式，逐渐成为当今教育框架中一个重要的分支。
各种类型的教程网站应运而生，提供了丰富且优秀的课程资源，使得学生能够及时的获取到所需的学习信息。
本次开发的目的是实现一个页面简洁大气，课程内容丰富，后台管理便捷，用户体验良好的视频教程在线学习网站。
前端采用HTML5、CSS3与Javascript，实现一个美观，轻松，交互性强，符合用户使用习惯的页面，后台采用PHP、Javascript与Ajax来实现一个易于后台人员管理操作以及数据动态传输的平台,整体集美观与实用为一体。
网站教程类别详细，基本涵盖所有主流软件的学习，同时倡导用户分享，提供大量免费视频教程并且推荐许多优秀的素材网站。
相对于现如今涵盖面广，内容繁杂的学习网站，其针对性，实用性更强，专注于软件技能的提升，使得想提高技能或者有共同兴趣爱好的人可以随时随地，自由地学习，对促进自身发展，提高其社会竞争力具有极大的现实意义。
关键词：
视频教程网站；HTML5；动态传输；交互性
Abstract
Withtherapiddevelopmentofnetworkinformationtechnology,onlinelearninghaschangedtheoriginalwayofteaching,andgraduallybecomeanimportantbranchoftoday'seducationframework.VarioustypesoftutorialwebsiteshaveemergedastheTimesrequire,providingrichandexcellentcourseresourcestoenablestudentstoobtaintherequiredlearninginformationaboutatimelymanner.Thegoalofthisdevelopmentistoachieveasimplepageatmosphere,richcoursecontent,backgroundmanagementisconvenient,userexperiencegoodvideotutorialwebsite.
ThefrontendusesHTML5,CSS3andJavascript,toachieveabeautiful,easy,interactive,user-friendlypage,thebackgroundusesPHP,JavascriptandAjaxtoachieveaneasybackgroundmanagementanddynamictransferofdataplatform,thewholesetaestheticandpracticalasone.Thesiteoffersawiderangeoftutorials,coveringvirtuallyallmajorsoftwarelearning,whilepromotingsharing,offeringalargenumberoffreevideotutorials,andrecommendinganumberofexcellentmaterialsites.It'smoretargetedandpracticalthantoday'scomprehensivelearningsite,whichfocusesonimprovingsoftwareskillssothatpeoplewhowanttoimprovetheirskillsorhaveaninterestinitcanlearnfreely,anytime,anywhere,topromotetheirowndevelopment,improvesocialcompetitivenesshasgreatpracticalsignificance.
Keywords：
Videotutorialwebsite;HTML5;Dynamictransmission;Interactivity
第一章绪论
1.1开发背景及意义
随着信息技术的发展完善，多种类型的视频教程网站不断被开发和运用，追求更加方便快捷的学习方式成为了一种发展趋势。
在知识技能的学习从纸质到电子的发展中，教程网站的出现极大的丰富了人们的学习方式，同时也更方便了人们的学习。
经过了多年的发展，教程网站变的更加的丰富和完善，并且不断补充各个领域的知识技能，使得用户得到更多的学习。
目前，教程网站以视频教学的方式为主，人们选择视频类教程网站进行学习，可以自我安排时间，不被约束，而且更加的直观，易懂，易操作，易管理，学习效率和积极性也随着提高，还能帮助人们减轻的学习压力和工作负担。
在教程网站发展迅猛的今天，进行一个该类型的网站的设计和开发是一个学习也是一个挑战。
视频教程网站的出现，对于不同身份，有不同的学习需求的人来说有着不同的意义，作为一个学生，能够在课余空闲时间从教程网站上扩展课程内容，丰富知识面；站在职业者的角度，教程网站能够提升自己的技能，更好的应用到工作当中。
有的教程网站是聚集同一类型的学习内容，有的是各个方面都涉及，不同学习需求的人可以根据自身喜好去选择不同的网站。
所以，丰富和方便的学习方式是教程网站得以迅猛发展的重大原因。
1.2课题研究的现状
视频教程网站是网络技术进步的产物，也是未来学习方式的趋向。
1996年，美国民众举行了一场“网络日”的志愿行动，目的是为了推动学校联网，也就是推动网上教育，到现在为止，学校的网上教育几乎已经覆盖了整个国家，甚至国外的人也可以进行搜索观看，学习。
我们国家的网络教育始于1998年，这也是我们国家网上教育，网上学习，不管是学校课程还是自学网站的开端，现如今，也是普及全国，内容遍及每个学习阶段，每种不同行业，每个不同的技术。
无论那个国家，都把教育放在第一重要位置，这是发展的基础。
从纸质到网络的飞跃发展，从固定时间实地上课到随时随地远程学习，从单一的课程学习到如今的全面发展，这是教育的进步，也是人类的进步，这也是教程网站诞生且得以快速，持续发展的重要原因。
社会正在快速发展和提高对人才的要求，所以大部分的人会在空余时间在教程网站上进行协作学习，补充学习，以保证跟社会的发展同步。
视频教程网站的应运而生，也开发了一些关于网站的新技术，同时这些技术也解决和完善了网站的功能。
各种优秀教程网站的开发，成功地满足了很多人的学习需求，去学习和建设该类网站具有很大的意义，也是一种学习反馈的方式。
1.3论文架构
本课题主要是探究视频教程网站的开发，本次网站开发的内容选择的是关于各类软件的学习教程。
论文经过分析构思，主要描述了该网站的开发原理，网站的设计与实现以及网站功能测试等，论文从7个章节去进行描述,具体结构如下:
第一部分：
绪论，阐述了本课题在当代互联网媒介下的开发意义、如今网络学习的发展以及该教程网站的总体介绍;
第二部分：
介绍了该网站的开发环境和使用的各类开发工具；
第三部分：
功能模块和非功能模块的需求以及分析
第四部分：
教程网站的界面设计以及后台、数据库设计；
第五部分：
网站前端到后台的功能的实现；
第六部分：
网站测试并进行结果分析。
第七部分：
对本次设计制作做出总结性论述。
第二章开发环境及相关技术
2.1开发环境
2.1.1软件环境
表2-1软件详细表
序号
名称
版本
备注
1
Apache
2.2.17
网页服务器环境
2
Mysql
5.5.8
数据库
3
PHP
5.3.5
后台开发环境
4
Dreamweaver
CS6
编译器
5
Photoshop
2020
界面设计、图片美化
2.2相关技术
2.1.2硬件环境
表2-2硬件详细表
序号
名称
配置
1
ASUS
4G内存+256G硬盘，2.3GHzIntel（R）i5
2
CPU
Inteli5-6200U可加速至2.8GHz
2.2.1前端架构
HTML是一种基于超文本标记的技术语言，HTML5通过内部和外部数据的直接连接，有效的解决了设备之间的兼容性问题，具有更好的处理效率，例如丰富的搜索引擎代码，表单处理更加人性化和便捷化[1]，HTML5适用于所有主流浏览器和服务器，同时其具备众多新功能、新标签，减少外部依赖，相对于HTML更加简洁，使用更加方便流畅。
CSS3是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言[2]，除了对页面进行静态的修饰，还可以对页面增加一些动画效果，丰富页面的呈现，而且CSS3除了修改某个样式之外，它还可以影响多个网页的构造和形式，即能满足页面的效果，又减少代码量，增强工作效益。
Javascript具备多种用途，常用于网站开发，移动APP开发等，适用于多种平台。
进行Javascript代码的编写，动态效果可以得到完美的实现，进行数据的验证，相应服务器事件等。
Jquery属于Javascript框架，其简洁，兼容度高，并且自身有特殊语法的。
他做到了以少换多的开发目的，也就是说用尽可能少的代码来完成更多的效果。
可用于添加有趣的动画、处理事件、利用Ajax对数据进行传输等,利于开发工作者对页面的设计和制作,呈现最佳效果。
2.2.2后端技术
PHP是一种动态脚本语言，在服务器上执行，轻便快捷，操作性强，执行速度快，可应用于各类服务器，操作系统，浏览器，可以连接数据库，发送数据，页面的内容的动态呈现。
“异步”可以说是Ajax的代名词，顾名思义，它能够通过后台传输数据，而不需要更新整个页面，实现局部内容的更新，减少数据信息的传递，加快加载速度，其不需要任何插件的支持，更轻便，更友好。
Ajax通过Jquery进行封装，减少参数，使对象结构更清晰，代码更简单易懂。
Xampp是Apache、Mysql、PHP、PERL的集合,具备丰富的功能，统一配置Apache服务器以及PHP环境，添加Mysql，比独立安装更加便捷，也有利于后续后台管理的操作。
SQL是服务于数据库，其交互性、便捷性强，使信息管理系统能够顺利应对各种复杂的信息分析处理环境，提高系统工作效率[1]。
借助SQL语言可以达到在大量数据中进行查询，增加，修改，删除等，实现各种需求。
2.3本章小结
网站开发，涉及到页面设计、前端的制作、样式的美化、后台系统的开发、数据库的搭建，是一个将多方面整合于一体的工程，需要软件硬件的配合，技术的支撑，可根据网站具体的开发需求，寻找最适合应用于其中的开发语言，尽可能减少代码的负荷，做一个简洁又易于维护的网站。
第三章需求与分析
3.1项目概况
Learning视频教程网站，主要是搜集各类软件学习的视频教程，面向学习软件技能的用户，其有PS、SAI、AE等多种主流软件。
该网站主要倡导的是“学习你感兴趣的，喜欢的事情”，将兴趣爱好和学习连接起来，而且也倡导共享的学习方式，即把你自己的知识或者学习资源分享给大家，共同学习，一起成长，所以该网站里大部分教程是供所有人免费观看、学习的。
而且也有一个专门的页面去跟用户分享一些学习、下载素材的网站。
该网站主要有“首页热门视频”“按软件分类的开放教程”“系统的特训教程”“资源分享”“视频播放页面”“用户管理页面”“教程管理页面”“评论管理页面”等常用的前端及后台模块。
图3-1网站总体架构
3.2网站业务需求分析
3.2.1网站角色的分析
基于互联网的视频教程网站开辟了一个新的学习模式，利用强大的网络收集优秀的教程视频，再上传到平台上分享和传播，这对于学生以及广大在职人员具有重要意义，本视频教程网站主要面向的是所有想要学习软件的人，大致可分为未注册用户、已注册用户、后台管理人员，各种角色有相应的权限，即操作的范围不同。
（1）未注册用户：
可浏览前端所有页面，观看学习所有免费的开放教程，并对其点赞和收藏，因为未注册登录，所以暂不可购买付费课程以及评论课程。
图3-2未注册人员用例图
（2）已注册用户：
有账号的用户在进行登录之后，既可以观看开放教程之外还可以购买付费的特训教程，分享视频，评论视频。
图3-3已注册人员用例图
（3）
后台管理人员：
定期发布教程、下架教程、修改教程信息、管理用户信息、用户留言，作为后台的管理人员，确保网站用户信息不泄露，网站信息合法合规，维护网站的正常运行。
图3-4管理人员用例图
3.2.2用户体验分析
用户体验即用户的使用感受，如今网络平台的普及，用户体验更是提升了检验的标准，所以用户体验的分析是开发设计前必不可少的一环。
用户体验大致分为以下几点
（1）视觉体验：
传递给用户视觉上的感触。
首先要分析该视频教程网站的用户群体，根据群体审美习惯去确定网站风格，网站的整体调性，包括网站的logo，网站的标语等，再根据信息主次去进行页面的布局。
其次页面的色彩，动画也不宜过于复杂，课程网站以引导学习为主，所以该网站用蓝色作为其品牌颜色，给用户营造一种快乐的学习氛围
（2）交互体验：
强调操作上的便捷和清晰。
该网站要明确分类导航以及各个课程模块，让用户一目了然去寻找到对应的学习入口，减少在搜索上的时间。
同时要简化规范登录注册的流程，明确用户名和密码的格式，防止来回验证，消磨用户的耐心。
其次按钮设置要突出，引导用户去点击观看、分享、点赞等
（3）情感体验：
所谓情感体验，体现在用户观看的感受上，需要引起用户的注意力。
首先我们导航栏，各级菜单等要清晰分类，并用丰富的内容去吸引用户，这些课程内容也要定时更新，避免用户的流失。
字体的大小，文字的排版，背景颜色等要舒适，易于阅读且符合整体的规划和网站的风格，体现网站的友好性。
3.2.3设计流程分析
一个设计师的工作不是单一的画图，其工作流程有一套完整的规范，如下图所示，首先，在设计该网站之前，我们要对现市场同类型的主流网站进行调研，并对所有数据进行分析归纳，浏览大部分网站的设计风格，避免与其风格相撞，再具体对可行性进行探讨，确定设计的规划，制定设计的目标。
之后进行设计，先将设计的线稿图画出来，再统一对其修改细节部分，下一步填充色彩，文字，图片等。
整
体效果出来之后还要进行下一轮评审，体验，反复修改直到最终定稿切图。
图3-5设计流程
3.3系统各模块的分析
3.3.1用户管理模块
用户信息管理系统模块即注册登录模块，用户可注册该网站账号，并用其账号登录，登录之后可购买付费课程，评论课程等，用户填写的内容则会传入后台,导入数据库,
后台管理人员可进行调整,但必须遵守规定，不可外泄用户的信息。
表3-1用户管理模块用例表
用例名称
用户管理
用例参与者
系统管理人员
前置条件
管理人员进入网站后台
后置条件
显示用户信息
基本操作流程
1.系统管理人员进入网站后台
2.点击用户管理页面，显示用户编号、账号、密码以及可进行的操作
3.点击添加、删除、修改则可对用户信息进行相应的操作
3.3.2教程管理模块
该模块用户可在前端页面观看学习，点赞或收藏视频，并在留言区分享自己的学习感受，后台管理人员会定期搜集这些学习资源，及时更新，发布教程已供用户浏览，除此之外，管理人员还可在后台管理页面对教程标题，级别，封面，链接进
行修改，删除。
表3-2教程管理模块用例表
用例名称
教程管理
用例参与者
系统管理人员
前置条件
管理人员进入网站后台
后置条件
显示教程信息
基本操作流程
1.系统管理人员成功进入网站后台
2.点击教程管理页面，显示教程编号、标题、级别、封面图片地址、视频链接以及可进行的操作
3.点击添加、删除、修改则可对教程信息进行相应的操作
3.3.3评论管理模块
评论模块，已登录的用户可在教程下面专设的留言板块进行评论,可以分享自己的学习收获或者提出意见建议等，管理人员可在后台评论管理页面对所有评论进行增删改。
表3-3评论管理模块用例表
用例名称
评论管理
用例参与者
系统管理人员
前置条件
管理人员进入网站后台
后置条件
显示评论信息
基本操作流程
1.系统管理人员成功进入网站后台
2.点击评论管理页面，显示评论编号、评论内容以及可进行的操作
3.点击添加、删除、修改则可对评论内容进行相应的操作
3.4非功能需求的分析
3.4.1技术的可行性
技术的可行性主要在于软，硬件的支持，如今硬件的支持不再是问题，其可靠性，安全性，包括容量大小等方面都足以满足该网站的开发应用。
前端采用Dreamweaver开发工具，可对代码进行编辑，修改，以及浏览之外，还能对不同类型的文件分开管理，统一展示，而且站点的配置操作很清晰简单，管理也井井有序，不会造成混乱，最重要的是，其是一款带提示的编译器，输入关键词即可获取对应代码，提高开发效率。
后台是用xampp作为网页服务器环境，满足开发需要的服务器，数据库，PHP运行环境，简单快捷，适合开发中小型网站。
3.4.2操作的可行性
互联网技术日益强大，多媒体教学也成为了一种发展趋势，不管是学校，机构或者个人都可以采用这种方式去教学或者去学习，所以，视频教程网站的发展是极具发展潜力的，加上如今各类智能产品占据市场，手机，电脑成为了大家生活中的必备物品，人们可以随时随地拿起这些设备去观看，学习充电。
该网站有丰富的学习内容且大部分是免费提供给用户去观看的，而且网站规划清晰明了，设计大气简洁，具有足够的吸引力。
3.5本章小结
本章是站在用户角度从网站的业务需求去分析，再去叙述网站的功能需求，最后总结了网站的可行性。
系统功能是基于用户的需求，用户需求同时也是开发的主要根据，所以一个网站的开发是需要进行全面系统调研，从用户出发，以技术为基础，统筹全局，完成目标。
第四章项目设计
4.1整体架构设计
基于系统各方面的分析，坚持高内聚，低耦合[1]。
将该视频教程网站前后台分离开发，最后再将其链接起来。
整体架构如下图所示，为了能够实现更多的需求，提高浏览量，前端模块主要分为首页、开放课程、特训班、资源导航、网站介绍、购买课程、视频播放、登录注册页面。
不同页面主题不同，涉及内容不同，设计规划不同。
首页分为导航栏，主图，主题课程三大块；开放教程、特训班、资源导航的结构类似，以导航栏和对应课程信息和资源信息为主；网站介绍分为四大块，分别是关于我们，联系我们，企业合作以及树人公益；购买课程页面主要为价格部分和教程内容部分；视频播放页面将分为四个部分，每一部分对应不同内容。
后台模块是管理人员操作的地方，页面要求简洁，操作标志要清晰，分为用户信息管理，课程信息管理，评论管理三个页面，与大部分后台管理页面类似，都是以菜单，信息
内容及操作构成，课程信息管理页面为左右结构，信息管理页面和评论管理页面则为上下结构。
图4-1视频教程网站架构
4.2前端模块
4.2.1网站形象设计
（1）网站标志：
该视频教程网站希望传递一种当下，进行时的观念，也就是趁现在，学你感兴趣的，做你想做的，所以直接取英文单词Learning进行设计作为网站标志。
（2）网站主色调：
网站主色调是网站形象的代表，主色调的确定要和网站内容贴合。
视频教程网站是用前沿的互联网技术去进行网络授课，而且该教程网站是以软件学习为主，专业性强。
所以网站以中性调的蓝色为主色调，既不失专业性又不过于严肃。
（3）网站的宣传标语：
网站的宣传标语也是网站的主旨，该教程视频网站希望爱好和学习结合起来，学习自己感兴趣的事物，可以以此来丰富自己的技能，所以网站的标语是“学习你感兴趣的”，简单但又突出重点，以英文的形式表达并放置于底部，希望大家能开心学习，获取成长。
4.2.2登录模块
（1）注册登录界面是网站必不可少的模块，是用户第一体验到网站的功能，网站收集用户填写的信息，可对其赋予相应的权限。
因为该模块的功能比较简单，所以设计要简约，在颜色和距离比例上掌控细致，让整个界面变得更加流畅，舒适。
图4-2登录界面
（2）在注册之后会自动转到登录页面，用户可由此登录首页，首页上半部分是主图的轮播，轮播图有利于聚焦用户的视线，展示网站的特点，提高浏览量，下半部分是一些热门课程的介绍，这是展示网站信息的模块，课程有难度级别的区分，用户可直接点击观看或者收藏。
图4-3首页界面
4.2.3免费教程及资源展示模块
（1）该网站的定位是视频教程网站，所以教程展示模块是本网站最主要，也是显示率最高的一个模块，为了聚焦吸引用户，增加浏览量，展示教程信息，在不同页面需要展示教程的模块都做了一些改动。
首先是首页部分用了相对紧凑的布局，同时增加了阴影和放大的动态效果，如下图所示，每个主题教程由两行，8个小方块组成，采用的是上图下文的模式，分别是教程封面，教程标题，课程级别和收藏图标，字体大小不一，突出重点，行间距适中，视觉感受舒服。
图4-4首页课程
（2）开放教程部分：
其结构与首页部分是相同的，但其作用与首页不同，这里的教程展示模块目的性更强，完全就是为了对教程进行一个更加全面细致的分类和介绍，所以是与菜单栏结合，菜单栏以软件划分，点击不同软件展示不同的课程。
图4-5开放课程
（3）资源模块：
是一个可以链接到其他学习网站和素材网站的资源分享页面，分为音乐、图片、视频、色彩、软件、图标六个版块，信息区域也是以图文结合的方式展示，图片是对应网站的标志，文字部分由网站的名称和简短介绍组成。
图4-6资源导航
4.2.4付费教程模块
（1）购买课程部分：
因为该视频网站大部分课程是供用户免费观看的，所以付费课程相对较少，为了突出这一部分课程，采用了与其他两部分不一样的布局，用了左图右文的形式，且版块尺寸更大。
图4-7付费课程
（2）付费教程详情模块：
将信息以竖直排列的方式呈现在网页中，既可以购买全套课程，也可以只单独购买自己需要的那部分，页面布局饱满，但又不至于拥挤，清晰突出了信息的主次，以不同颜色去强调信息的重要程度，引导用户购买。
图4-8付费课程详情
4.2.5视频播放模块
（1）视频展示模块第一部分为视频播放窗口，第二部分为作者介绍，第三部分是留言板，第四部分为相关教程推荐。
每一部分既有联系但又相互独立，这种布局方式是参考了很多主流视频网站之后的结果，符合用户的使用习惯，能够让用户了解教程信息并表达观点。
图4-9视频播放
4.3后台模块
4.3.1用户信息和评论管理
（1）界面设计如图所示，左上角是页面标题，右上角两个按钮是链接到其他两个管理页面，主体是信息的展示和操作区域。
页面布局简洁，便于后台人员管理
图4-10用户管理
图4-11评论管理
（2）点击添加和修改会跳转到布局相同的页面，修改的则会在输入框里显示之前的信息，直接进行修改提交即可，添加则要把信息填写完整才可提交，否则会有弹窗提示，如若不想进行操作，即点击返回，退回到信息展示页面。
图4-12修改用户信息
（3）删除信息，操作框里的删除按钮被点击之后可对选中的信息进行删除,之后会有弹窗的提示
图4-13删除用户信息
4.3.2教程信息管理
（1）界面设计如图所示，是各类教程的管理页面，左边菜单是本网站目前有对应教程的软件名称，按照软件
升级会员 