基于HTML5的视频教程网站设计与开发

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

图4-15修改课程信息（3）下架课程，直接点击删除，数据库里就会没有相关的课程信息，前端页面也会下架该课程。图4-16删除课程信息4.4数据库设计4.4.1E-R图图4-17课程表、用户表、评论表的E-R图4.4.2数据库表结构根据网站的开发需求，设计相关的表结构表4-1用户表字段名称类型是否空值注释uidint否主键idusernamevarchar否用户名passwordvarchar否用户密码表4-2课程表字段名称类型是否空值注释classidint否主键idclassstypevarchar否课程类型classtitlevarchar否课程标题classlevelvarchar否课程等级classurlvarchar否课程链接imgurlvarchar否课程封面表4-3课程评论表字段名称类型是否空值注释pubidint否主键idcommentvarchar否评论内容4.5本章小结本章从前端模块到后台模块，再到数据库设计三大方面对该视频课程网站进行了详细的设计介绍并用图片加以描述。主要是课程展示模块，视频播放模块以及后台管理界面，突出了网站使用的便捷性和实用性。第五章项目实现5.1前端核心功能（1）首页焦点轮播图：构造slide，showindeximg两个函数，分别是控制图片自动轮播和手动控制左右箭头播放图片，Jquery的eq()遍历方法用于改变图片右下角提示矩形的样式，图片的渐入渐出通过fadeIn()，fadeOut()来实现。function

slide()

{

index++;

if

(index

==

L)

index

=

0;

$('#ulsli').css('background','#CCC').eq(index).css('background','#666');

$('#img-box

img').fadeOut();

$('#img-box

img').eq(index).fadeIn();

}

function

showindeximg(index)

{

$("#img-box

img").hide().eq(index).show();

$("#uls

li").css("background",

'#CCC').eq(index).css("background",'#666');}

具体实现，首先获取图片存放的位置，具体采用的是Jquery的链式操作，当鼠标悬停在图片上是触发第一个事件，即图片的不会再自动轮播，显示左右箭头；移出鼠标，触发第二个事件，图片又重新进行自动轮播。var

T,

L;

var

index

=

0

L

=

$('#uls

li').length;

T

=

setInterval(slide,

3000);

$('#box').hover(function()

{

clearInterval(T);

$('#front,#later').css('display',

'block');

},

function(){

T

=

setInterval(slide,

3000);

$('#front,#later').css('display',

'none');});

点击左右箭头切换图片，首先判断图片的序号，当操作已退回到第一张图片时，依次从最后一张继续退；如果切换到最后一张图片则从第一张开始重新播放$('#front').click(function()

{

clearInterval(T);

var

len

=

$('#uls

li').length

-

1;

var

imgshowindex

=

$("#img-box

img:visible").index();

if

(imgshowindex

<=

0)

{

index

=

L;

}

else

{

index

=

--imgshowindex;

}

showindeximg(index);

});

$('#later').click(function()

{

clearInterval(time);

var

imgshowindex

=

$("#img-box

img:visible").index();

index

=

++imgshowindex;

if

(index

==

L)

index

=

0;

showindeximg(index);

});

点击列表切换课程以及动态显示课程将所有选项放在<li>标签里，获取课程的类型，点击导航里的课程，下面就显示相对应课程。定义一个简单的动画，实现列表的移动，再根据移动距离去判断显示那个箭头。var

move

=

$('.classify').width()-130;

var

moveline

=

0;

$('.classify

ul

li').each(function(){

moveline

+=$(this).outerWidth();

})

var

i

=0;

$('.next').click(function(){

$('.classify

ul').animate({

"margin-left":-move+'px'

},500)

i++;

if((move+130)*i+(move+130)>=moveline){

$('.front').show();

$('.lafter').hide();

}

})

$('.front').click(function(){

$('.classify

ul').animate({

"margin-left":0+'px'

},500)

$(this).hide();$('.next').show();

})

})

利用Ajax动态加载数据，显示课程信息，请求数据使用的是Get的方式，url:链接请求数据库的PHP页面，data:向后台传输数据，datatype:加载json格式的数据，如果成功则执行回调函数，在该函数里首先创建了一个空字符串用来存创建的HTML，在id名为groupcont里面的ul添加html,循环后台传过来的数据，赋值给对应的位置。function

showcontent(classstype)

{

$.ajax({

type:

"GET",

url:

'../php/list.php',

data:

{

classstype:

classstype

},

datatype:

"json",

success:

function(data)

{

var

html='';

for

(var

i

=

0;

i

<

data.length;

i++)

{

html

+=

"<li><a

href=\"".concat(data[i].classurl,

"\"><div

class=\"cont_main\"><div

id=\"cont-main5\"><img

src=\"").concat(data[i].imgurl,

"\"

/></div><div

id=\"cont-main1\"><div

id=\"cont-main2\"><p>").concat(data[i].classtitle,

"</p></div><div

id=\"cont-main3\"><p>").concat(data[i].classlevel,

"</p></div><div

id=\"cont-main4\">

<img

src=\"../images/shoucang.png\"

/></div></div></div></a></li>");

}

$("#group

.box

ul").html(html);

}

});

多页显示课程：付费课程部分需要两个页面才能完整的将所有课程显示出来，所以采用了Js点击事件实现翻页效果，将第二个页面先隐藏，在页面最下方显示页码，并给他们添加点击事件。<div

id="dianji">

<ul>

<li

><type="radio"

name="sex"

id="button1"

onclick="show1()"><a

href="#">

1</a></li>

<li><type="radio"

name="sex"

id="button1"

onclick="show2()"

><a

href="#">2</a></li>

</ul>

</div>

function

show1(){

document.getElementById("mid").style.display="block";

document.getElementById("mids").style.display="none";

};

function

show2()

{

document.getElementById("mids").style.display="block";

document.getElementById("mid").style.display="none";

}

评论模块：一共有三部分：输入框、发表按钮、评论区，应用from表单获取相关数据，点击按钮触发事件，动态创建表格，并将内容插入。<form

name="pubForm"

method="post"

action="../php/pub.php"

onSubmit="return

InputCheck(this)">

<table>

<tr>

<td>

<input

id="comment"

name="comment"

type="text"

placeholder="一起讨论吧！>

<input

name="submit"

type="submit"

class="fabiao"

value="发表">

</td>

</tr>

</table>

</form>

$.ajax({

type:

"GET",

url:

'../php/list2.php',

data:

{

comment:

$("#comment").val()

},

datatype:

"json",

success:

function(data)

{

$(".box1").html("");

$.each(data,

function(index,

value)

{

var

pubid

=

value.pubid;

var

tr

=

$("<tr>").appendTo(".box1");

$("<td>").appendTo(tr).text(ment);

});

（5）登录注册模块：登录注册是需要提交数据的，所以将其写在一个<form></form>标签里，用JS实现登录注册的限制条件，当用户名密码未填，或者两次密码填写有差异，都会有弹窗提示。function

InputCheck(RegForm)

{

if

(RegForm.username.value

==

"")

{

alert("用户名不可为空!");

RegForm.username.focus();

return

(false);

}

if

(RegForm.password.value

==

"")

{

alert("必须设定登录密码!");

RegForm.password.focus();

return

(false);

}

if

(RegForm.repass.value

!=

RegForm.password.value)

{

alert("两次密码不一致!");

RegForm.repass.focus();

return

(false);

}

}

5.2后台管理模块（1）教程管理模块：先创建一个可以查询数据库的php文件。<?php

require

'conn.php';

$classstype=$_GET['classstype'];

$sql

=

"SELECT

*

FROM

`openlist`

WHERE

`classstype`='$classstype'";

$query=mysqli_query($conn,$sql);

if

($query

&&

mysqli_num_rows($query))

{

while

($row

=

mysqli_fetch_assoc($query))

{

$data[]=$row;

}

}else

if(mysqli_num_rows($query)==0){

$data='{content:"blank"}';

echo

$data;

return;

}

?>

获取课程类型:点击课程栏,就会出现对应课程信息,且对应的标题会随着改变，用的是attr()方法来获取元素的属性，siblings()方法来区分当前点击部分和其他部分的样式。function

choosenewstype()

{

$(".text-content-list

tr").each(function()

{

$(this).click(function()

{

var

type

=

$(this).children("td").attr("name");

var

text

=

$(this).children().text();

$(this).css("background",

"#CCC").siblings().css("background",

"#666");

$(".class-title

h2

span").text(text);

showcontent(type);

});

});

}

动态显示数据库信息：获取之前定义好的html，再动态将数据一条一条以表格的形式往里面添加。function

showcontent(classstype)

{

$.ajax({

type:

"GET",

url:

'../php/list.php',

data:

{

classstype:

classstype

},

datatype:

"json",

success:

function(data)

{

$("#class-content").html("");

$.each(data,

function(index,

value)

{

var

classid

=

value.classid;

var

tr

=

$("<tr>").appendTo("#class-content");

$("<td>").appendTo(tr).text(value.classtitle);

$("<td>").appendTo(tr).text(value.classstype);

$("<td>").appendTo(tr).text(value.classlevel);

$("<td>").appendTo(tr).text(value.classurl);

$("<td>").appendTo(tr).text(value.imgurl);},

},

)},

};

添加课程：显示添加页面，隐藏原先页面，先判断信息是否为空，不为空才可以往对应位置添加内容。$("#submit").click(function()

{

if

($("#classtitle").val()

==

""

||

$("#classlevel").val()

==

""

||

$("#classurl").val()

==

""||

$("#imgurl").val()

==

"")

{

alert("请完善课程信息！");

}

else

{

if

(code

==

1)

{

$.ajax({

url:

'../php/add.php',

type:

"POST",

datatype:

"json",

data:

{

classstype:

$(".hide2").val(),

classtitle:

$("#classtitle").val(),

classlevel:

$("#classlevel").val(),

classurl:

$("#classurl").val(),

imgurl:

$("#imgurl").val(),

},

success:

function(data)

{

alert("添加成功");

$(".class-update").hide();

$(".class-content-list").show();

}

返回页面代码如下：$("#back").click(function()

{

$(".class-update").hide();

$(".class-content-list").show();

$("#back").css("display","none");

});

删除课程:点击按钮，内容将从页面和数据库删除。<?php

require

'conn.php';

$classid=$_POST["classid"];

if

($classid=="")

{

die("没有找到此课程");

}else

{

$classstype=$_POST["classstype"];

$sql="DELETE

FROM

openlist

WHERE

classid='$classid'";

mysqli_query($conn,$sql);

}?>

$("<a>").appendTo(button).text("删除").addClass("delete").click(function()

{

$.ajax({

type:

"POST",

url:

'../php/delete.php',

data:

{

classid:

classid,

},

success:

function(data)

{

alert("删除成功");

}});

修改课程：点击修改按钮，在修改框里进行修改，因为内容获取到修改框里，所以需要和查询结合起来，最后将修改的内容提交到页面上并传入数据库<?php

require

'conn.php';

$classid=$_POST['classid'];

$classtitle=$_POST['classtitle'];

$classlevel=$_POST['classlevel'];

$classurl=$_POST['classurl'];

$imgurl=$_POST['imgurl'];

if

($classid=="")

{

die("没有此课程");

}else{

$sql="UPDATE

openlist

SET

classid='$classid',classtitle='$classtitle',classlevel='$classlevel',classurl='$classurl',imgurl='$imgurl'

WHERE

classid='$classid'";

mysqli_query($conn,$sql);

}

?>

$.ajax({

type:

"POST",

url:

'../php/modify.php',

data:

{

classid:

$("#classid").val(),

classtitle:

$("#classtitle").val(),

classlevel:

$("#classlevel").val(),

classurl:

$("#classurl").val(),

imgurl:

$("#imgurl").val(),},

success:

function(data)

{

alert('修改成功');

$(".class-update").hide();

$(".class-content-list").show();}

});

登录注册模块：网站需要判断从前台获取的用户信息，网站要求用户账号是必填且在3-15个字符之间，如果不符合该表达式，则会有弹窗提醒。在提交信息之后，会跟数据库已有数据进行检测；同样的，用户登录时，也会对其输入的信息进行分析检测，判断用户名和密码是否正确,正确就直接转到首页。if(!preg_match('/^[\w\x80-\xff]{3,15}$/',

$username)){

?>

<script

type="text/javascript">

alert("用户名不符合规定");

window.location.href="../html/reg.html";

</script>

<?php

exit;

}

if(strlen($password)

<

6){

?>

<script

type="text/javascript">

alert("密码长度不符合规定");

window.location.href="../html/reg.html";

</script>

<?php

exit;

}

添加用户代码如下：$("#submit").click(function()

{

if

($("#username").val()

==

""

||

$("#password").val()

==

"")

{

alert("请完善用户信息！");

}

else

{

if

(code

==

1)

{

$.ajax({

url:

'../php/add1.php',

type:

"POST",

datatype:

"json",

data:

{

username:

$("#username").val(),

password:

$("#password").val(),},

success:

function(data)

{

alert("添加成功");

$(".user-update").hide();

$(".user-content-list").show();

}});

修改用户信息代码如下：$.ajax({

type:

"POST",

url:

'../php/modify1.php',

data:

{

uid:

$("#uid").val(),

username:

$("#username").val(),

password:

$("#password").val(),

},

success:

function(data)

{

alert('修改成功');

$(".user-update").hide();

$(".user-content-list").show();

}

});

删除用户信息代码如下：$("<a>").appendTo(button).text("删除").addClass("delete").click(function()

{

$.ajax({

type:

"POST",

url:

'../php/delete1.php',

data:

{

uid:

uid,

},

success:

function(data)

{

alert("删除成功");},)};};

（3）评论管理：后台需要检测用户发表内容是否为空，如果不为空才能成功显示在后台，并传入数据库。添加评论$("#submit").click(function()

{

if

($("#comment").val()

==

"")

{

alert("请完善评论信息！");

}

else

{

if

(code

==

1)

{

$.ajax({

url:

'../php/add2.php',

type:

"POST",

datatype:

"json",

data:

{

comment:

$("#comment").val(),

},

success:

function(data)

{

alert("添加成功");

$(".pub-update").hide();

$(".pub-content-list").show();

}

});

删除评论代码如下：$("<a>").appendTo(button).text("删除").addClass("delete").click(function()

{

$.ajax({

type:

"POST",

url:

'../php/delete2.php',

data:

{

pubid:

pubid,},

success:

function(data)

{

console.log(data);

alert("删除成功");}

});

修改评论代码如下：$.ajax({

type:

"POST",

url:

'../php/modify2.php',

data:

{

pubid:

$("#pubid").val(),

comment:

$("#comment").val(),},

success:

function(data)

{

alert('修改成功');

$(".pub-update").hide();

$(".pub-content-list").show();

}

});

5.4本章小结本章是对前端和后台主要的功能模块进行介绍，其对页面贡献率最多的是HTML，CSS3，事件处理依赖于Javascript和Jquery，后台数据传输及管理用的是Ajax及PHP,因为后台三大模块的操作相同，所以采用的是同样的方式去处理数据，降低了开发难度。第六章项目测试6.1测试的目标对网站进行测试，包括所有代码的测试，页面呈现完整度的测试，数据传输正确性测试，各个连接是否正常跳转等方面，主要目标是为了完善整个项目，确保页面可以适用于所有浏览器，所有功能都能呈现，所有数据传输都不会遗漏，然后再进一步审查网站总体是否达到预期标准，是否是满足用户的需求。6.2测试结果分析6.2.1界面测试界面测试主要是对网站的统一性和完整性进行测试，基于该网站是视频教程网站，从视觉效果和交互体验上去判断，界面效果简洁又有内容，符合网站定位，信息描述正确，布局设置合理，基本符合设计开发的需求和用户体验。表6-1界面测试用例表用例描述1、页面风格是否和设计规划一致2、字体大小，颜色是否和网站匹配3、图文是否完整明确4、超链接跳转是否正确5、导航是否清晰明了6、各个控件布局是否合理预期结果符合设计要求和用户使用实际结果达到预期结果6.2.2功能测试针对网站的功能部分进行测试，主要包括登录注册,用户信息,留言,教程的管理模块，在后台管理界面可对用户信息，用户评论，课程的标题，封面，链接，级别进行编辑，删除，和添加，鉴于后台部分测试差异不大,所以仅给出教程管理的测试用例,对于网站功能的测试有助于我们在测试察觉问题,改善问题,确保用户的正常使用。表6-2注册模块测试用例表注册模块编号测试条件预期结果实际结果1用户名：程成晨密码：236790确认密码：236790成功登录到首页操作成功2用户名：空密码：236790确认密码：236790提示“用户名不可为空”操作成功3用户名：程成晨密码：空确认密码：空提示“必须设定登录密码”操作成功4用户名：AA密码：236790确认密码：236790提示“用户名不符合规定”操作成功5用户名：程成晨密码：456确认密码：123提示“密码长度不符合规定”操作成功6用户名：程成晨密码：236790确认密码：456提示“两次密码不一致”操作成功表6-3登录模块测试用例表登录模块编号测试条件预期结果实际结果1用户名：程成晨密码：236790成功登录到首页操作成功2用户名：空密码：236790提示“请输入用户名”操作成功3用户名：程成晨密码：空提示“请输入密码”操作成功4用户名：张天天密码：234567提示“用户名或密码错误”操作成功表6-4教程管理测试用例表教程管理编号测试条件预期结果实际结果1后台登录注册进入教程管理界面操作成功2点击修改，进入编辑页修改信息之后提交提示“修改成功”操作成功3点击修改，进入编辑页面，信息填写不完整，点击提交提示“请完善教程信息”操作成功4点击删除提示“删除成功”操作成功5点击添加，进入编辑页面，填写信息，点击提交提示“添加成功”操作成功6点击添加，进入编辑页面，填写信息不齐全，点击提交提示“请完善课程信息”操作成功7点击添加，进入编辑页面，点击返回返回教程管理页面操作成功6.3本章小结本次测试是基于需求，同样是从用户出发再到网站的功能测试，去分析网站最终的呈现效果和功能的使用情况，在此过程中发现了一些细小的问题可以及时的更改，保证网站的质量，经过对界面和功能的一番测试，最终的测试结果符合预期设计的要求。第七章结论7.1总结网站基于用户的需求去进行设计和开发，前端主要有各类课程展示、资源分享、付费课程详情、视频播放、登录注册、评论等模块，满足用户的使用需求；后台包括用户信息管理、评论管理、课程管理三大部分，后台管理人员可灵活操作。通过毕业设计和毕业论文，学习到了很多新的知识同时也遇到很多挑战，对这个阶段的总结如下：（1）制定正确目标，规划好时间。开始制作之前，每天总会有多的想法，这样其实并不会更加丰富整个网站的内容，因为新想法替换旧想法，反而会拖延网站制作的进展，导致整个项目的时间一直在延后。（2）设计好页面，准备好素材。要按照正规的流程走，根据需求将页面相关的东西确定并设计出来，以便于后期的开发，因为是个人项目，所有东西都得自己搜集，所以应该明确各部分的工作，将设计部分先制作出来，开发的时候就可以直接应用，思路才不会混乱（3）注意编码格式：良好的编码习惯是一个程序员必备的条件，其中包括命名，缩进，注释等，这样在检查或者错误修改的时候能更清晰，整个程序看起来更简洁，更专业此次毕业设计是将在校园课堂学到的东西和自己课外拓展的知识结合起来并应用于其中，给我带来挑战的同时也巩固了我的技术。7.2展望课程视频网站制作到现在，前端页面能够完整的展示了，后台管理基本的功能模块也可以实现，但还是有很多不足的地方，例如个人中心，学习记录等，希望自己以后能更加深入的学习，补充不足。网站开发无论在现在还是将来，都会是一个热门的行业，也将会被更广泛的应用，所以今后要熟悉各类开发工具，相关编程语言，争取获得更大的进步。参考文献[SEQ参考文献\*ARABIC1]黄远洋.基于HTML5和CSS3的响应式Web的设计与实现[D].华北电力大学,2018[SEQ参考文献\*ARABIC2]罗正蓉,范灵.应用HTML和CSS制作网页[j].2016,26(26),10[SEQ参考文献\*ARABIC3]李晓红.《Photoshop平面设计》精品课网站设计与实现[D].河北科技大学,2013[SEQ参考文献\*ARABIC4]黄卓洲.浅谈SQL数据库优化技术在信息管理系统中的应用[J].中国新通信,2020,22(02):104.[SEQ参考文献\*ARABIC5]杨栋.基于PHP的振动与波动力学课程网站的开发[D].大连理工大学,2012[SEQ参考文献\*ARABIC6]于连民.精品课程网站开发平台的设计与实现[D].聊城大学,2014[SEQ参考文献\*ARABIC7]张聪聪.基于响应式Web设计中用户界面的分析与探究[D].中南民族大学,2015[SEQ参考文献\*ARABIC8]林瀛瀛.响应式设计技术在视频网站开发中的应用[D].东华大学,2014[SEQ参考文献\*ARABIC9]殷杰.网络课程内容管理系统的设计与实现[D].河南大学,2013[SEQ参考文献\*ARABIC10]黄欢.基于工作过程的《HTML5开发技术》课程开发与实施[D].广东技术师范学院,2018[SEQ参考文献\*ARABIC11]刘亚刚,张启英.基于数据库设计在网站开发中的应用[J].电子技术与软件工程,2018(22):154[SEQ参考文献\*ARABIC12]邵新茹.HTML5动态新闻的传播效果研究[D].大连理工大学,2019[SEQ参考文献\*ARABIC13]PavelHorovčák.WebServicesasnewphenomenoninthePHPenvironment[J].ActaMontanisticaSlovaca,2006,11(2)[SEQ参考文献\*ARABIC14]DediIskandarInan1,RatnaJuita2.AnalysisandDesignComplexandLargeDataBaseusingMySQLWorkbench.InternationalJournalofComputerScience&InformationTechnology(IJCSIT),Vol3,No5,Oct2011[SEQ参考文献\*ARABIC15]李强.以PHP+MySQL为基础的网站开发研究[J].网络安全技术与应用,2014(05):22-23[SEQ参考文献\*ARABIC16]金晓雪.计算机软件技术基础课程网站建设[D].大连海事大学,2012[SEQ参考文献\*ARABIC17]秦磊.基于Web标准化的在线视频网站设计与实现[D].吉林大学,2014致谢毕业设计告一段落，也将要真正地踏入社会，加入工作者的行列，非常感谢吴志达老师，悉心的教育指导，让我顺利的完成毕业设计和毕业论文。也非常感谢我的学校对我四年的栽培，给予我非常美好的大学时光。

ExcelXP的八则快速输入技巧如果我们在用ExcelXP处理庞大的数据信息时，不注意讲究技巧和方法的话，很可能会花费很大的精力。因此如何巧用ExcelXP，来快速输入信息就成为各个ExcelXP用户非常关心的话题，笔者向大家介绍几则这方面的小技巧。1、快速输入大量含小数点的数字如果我们需要在ExcelXP工作表中输入大量的带有小数位的数字时，按照普通的输入方法，我们可能按照数字原样大小直接输入，例如现在要在单元格中输入0.05这个数字时，我们会把“0.05”原样输入到表格中。不过如果需要输入若干个带有小数点的数字时，我们再按照上面的方法输入的话，每次输入数字时都需要重复输入小数点，这样工作量会变大，输入效率会降低。其实，我们可以使用ExcelXP中的小数点自动定位功能，让所有数字的小数点自动定位，从而快速提高输入速度。在使用小数点自动定位功能时，我们可以先在ExcelXP的编辑界面中，用鼠标依次单击“工具”/“选项”/“编辑”标签，在弹出的对话框中选中“自动设置小数点”复选框，然后在“位数”微调编辑框中键入需要显示在小数点右面的位数就可以了。以后我们再输入带有小数点的数字时，直接输入数字，而小数点将在回车键后自动进行定位。例如，我们要在某单元格中键入0.06的话，可以在上面的设置中，让“位数”选项为2，然后直接在指定单元格中输入6，回车以后，该单元格的数字自动变为“0.06”，怎么样简单吧？2、快速录入文本文件中的内容现在您手边假如有一些以纯文本格式储存的文件，如果此时您需要将这些数据制作成ExcelXP的工作表，那该怎么办呢？重新输入一遍，大概只有头脑有毛病的人才会这样做；将菜单上的数据一个个复制/粘贴到工作表中，也需花很多时间。没关系！您只要在ExcelXP中巧妙使用其中的文本文件导入功能，就可以大大减轻需要重新输入或者需要不断复制、粘贴的巨大工作量了。使用该功能时，您只要在ExcelXP编辑区中，依次用鼠标单击菜单栏中的“数据/获取外部数据/导入文本文件”命令，然后在导入文本会话窗口选择要导入的文本文件，再按下“导入”钮以后，程序会弹出一个文本导入向导对话框，您只要按照向导的提示进行操作，就可以把以文本格式的数据转换成工作表的格式了。3、快速输入大量相同数据如果你希望在不同的单元格中输入大量相同的数据信息，那么你不必逐个单元格一个一个地输入，那样需要花费好长时间，而且还比较容易出错。你可以通过下面的操作方法在多个相邻或不相邻的单元格中快速填充同一个数据，具体方法为：首先同时选中需要填充数据的单元格。若某些单元格不相邻，可在按住Ctrl键的同时，点击鼠标左键，逐个选中；其次输入要填充的某个数据。按住Ctrl键的同时，按回车键，则刚才选中的所有单元格同时填入该数据。4、快速进行中英文输入法切换一张工作表常常会既包含有数字信息，又包含有文字信息，要录入这样一种工作表就需要我们不断地在中英文之间反复切换输入法，非常麻烦，为了方便操作，我们可以用以下方法实现自动切换：首先用鼠标选中需要输入中文的单元格区域，然后在输入法菜单中选择一个合适的中文输入法；接着打开“有效数据”对话框，选中“IME模式”标签，在“模式”框中选择打开，单击“确定”按钮；然后再选中输入数字的单元格区域，在“有效数据”对话框中，单击“IME模式”选项卡，在“模式”框中选择关闭（英文模式）；最后单击“确定”按钮，这样用鼠标分别在刚才设定的两列中选中单元格，五笔和英文输入方式就可以相互切换了。5、快速删除工作表中空行删除ExcelXP工作表中的空行，一般的方法是需要将空行都找出来，然后逐行删除，但这样做操作量非常大，很不方便。那么如何才能减轻删除工作表中空行的工作量呢？您可以使用下面的操作方法来进行删除：首先打开要删除空行的工作表，在打开的工作表中用鼠标单击菜单栏中的“插入”菜单项，并从下拉菜单中选择“列”，从而插入一新的列Ｘ，在Ｘ列中顺序填入整数；然后根据其他任何一列将表中的行排序，使所有空行都集中到表的底部。删去所有空行中Ｘ列的数据，以Ｘ列重新排序，然后删去Ｘ列。按照这样的删除方法，无论工作表中包含多少空行，您就可以很快地删除了。6、快速对不同单元格中字号进行调整在使用ExcelXP编辑文件时，常常需要将某一列的宽度固定，但由于该列各单元格中的字符数目不等，致使有的单元格中的内容不能完全显示在屏幕上，为了让这些单元格中的数据都显示在屏幕上，就不得不对这些单元格重新定义较小的字号。如果依次对这些单元格中的字号调整的话，工作量将会变得很大。其实，您可以采用下面的方法来减轻字号调整的工作量：首先新建或打开一个工作簿，并选中需要ExcelXP根据单元格的