摘要:当下时代，信息技术高速发展，网络已经是人们不可缺少的生活元素，越来越多的行业都已经和网络接轨。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取方式，教育行业的网络化已经逐渐起步，有着良好的在线教育系统更能体现院校机构的风采。所以建立一个美观，专业，易于维护管理的在线教育网站已经势在必行。

本论文主要围绕以视频教学为媒介的在线教育系统为开发主题，主要使用网站建设的最基本技能，HTML+CSS+JavaScript。前端网站开发中，HTML是网站建设的骨架，明确了网站要表现什么元素，CSS来定义网站样式，控制每个元素的样式和变化形式，JavaScript则定义网站的行为，控制与用户的每一次交互结果，以及限制一些不正确操作。这些技能初入并不困难，但深入后才能看到每一次良好的反馈是需要付出很多的努力才能实现。

除此以外，构建一个完整的网站，还需要后端服务器建设，以及数据反馈。本文采用了JavaScript通过Ajax访问后端node.js搭建的服务器，反馈由后端获取的JSON数据，实现网站的完整加载及可访问性。

最后又实现了响应式布局及MVC模型的架构，使得网站兼容性及可维护性大大提升。同时也实现了用户登录，cookie读写，视频播放等网站常用功能，将这些整合在精心设计的网站UI中，效果良好，具有不错的应用价值

关键字：CSS；node.js；用户登录；JavaScript；交互设计；Ajax

目录

摘要

Abstract

1-绪论-1

1.1-选题背景及意义-1

1.1.1-建立本网站发挥的作用如下：-1

1.1.2-国内高校教育网站建设状况-2

1.2-研究内容和拟解决的问题-2

1.3-本章小结-3

2-前端开发工具及相关技术-4

2.1-前端开发环境-4

2.2-前端开发相关技术-4

2.2.1-JavaScript 简介-4

2.2.2-CSS简介-4

2.2.3-Node.js简介-5

2.3-本章小结-5

3-前端布局分析与设计-6

3.1-前端总体开发流程及设计-6

3.1.1-分层开发-6

3.1.2-代码编写-6

3.1.3-内部测试与后续优化-7

3.2-前端UI设计-8

3.2.1-模块分布-8

3.2.2-CSS元素-9

3.3-交互设计与UI-10

3.4-网站结构布局及设计-11

3.4.1-网站结构-11

3.4.2-版式编排布局合理性-12

4-具体实现代码及介绍-13

4.1-CSS在“在线课堂系统网站”中的应用实例-13

4.2-应用JavaScript设计网页-13

4.3-本章小结-15

5-Ajax和后端数据处理-17

5.1-Ajax异步加载-17

5.2-Node.js后端数据处理-18

6-总结-20

参考文献-21