2。4。1 Notepad++开发工具 10

  2。4。2 bootstrap前端框架 10

  2。4。3 Google Chrome 11

  2。4。4 Mozilla Firefox 11

第三章 网站可行性研究与需求分析 13

3。1 可行性研究 13

  3。1。1 经济可行性分析 13

  3。1。2 技术可行性分析 13

  3。1。3 社会可行性分析 13

3。2 需求分析 14

  3。2。1 网站功能模型与数据流图 14

  3。2。2 网站功能需求分析 15

3。2。3 网站数据模型与实体联系图 16

第四章 系统设计与实现 18

4。1 系统设计原则 18

4。2 响应式web设计流程 19

4。3 系统模块设计 22

4。3。1 首页模块 22

  4。3。2 课程模块 24

4。3。3 实战模块 24

4。3。4 计划模块 27

4。3。5 反馈模块 28

第五章 网站测试 30

5。1 测试平台与工具 30

5。2 测试方法 30

5。3。测试步骤 30

5。4 测试结果 31

结论 32

致谢 33

参考文献 34

第一章绪论

历经长达8年的艰辛努力，万维网联盟于2014年10月29日宣布，终于制定完成了HTML5标准规范，并已公开发布。它让跨平台的响应式网站不是一种趋势，而将成为一种潮流。

1。1研究背景和意义

在科学技术迅速发展的背景下，课程网站教育正逐渐的变成一种新兴的教育模式，并在我国迅速的发展起来。课程网站教育的技术基础主要是计算机多媒体技术和网络技术，其中最为突出的特点就是将这两项技术进行有效的结合。这种教育模式让千千万万的不在校园的人能够拥有同等的学习机会，这种教育模式已经在我国的现代教育中逐渐地扮演起重要的角色[1]。通过利用这种教育模式受教育者可以不在需要教室，坐在家里的电脑前他们就可以进行丰富多彩的学习。但是，大多数传统的课程网站教育平台都是以互联网开发为基础，用户只能通过个人电脑进行登陆使用，这样就带来了一个很大的问题，用户不能随时随地学习。鉴于大多数传统的Web课程网站是以PC 端的桌面浏览器为对象设计开发的，它们主要具备以下几个特点：

（1）在页面布局方面：Web 页面常常运用三栏式布局或者是两栏式布局来适应PC 端的屏幕分辨率和尺寸；

（2）在交互设计方面：用户通常都是通过操作键盘和鼠标和Web界面进行交互。

随着人们对无线网络的运用越来越广泛，一种可移动的响应式课程网站也就出现了，学习者能够根据自己的需要在不同时间不同地点通过使用pc端和移动智能终端进行学习，正是突破了时间和地域的限制这一点使它成为了当前远程教育重要的发展方向。但是基于传统web课程网站的以上两个特点，传统的web课程网站在尺寸、分辨率以及交互方式等方面和移动智能终端有明显的差异。因此，在移动智能终端上使用先前专门针对PC 端而设计的传统Web课程网站明显是不可能的，这主要体现在传统web课程网站以下四个方面的特性：