摘要本系统采用HTML5技术, 在弹性布局的基础上，结合媒体查询开发一套可以有效地兼容各移动终端，符合现代网络课程教学需求的课程网站，用来帮助网站管理者发布课程资源，为用户提供强大的移动学习功能，为有移动学习需求的客户提供有力服务。86618

本文根据当前对各终端（PC端，手机端等）学习的实际情况进行调研，充分分析了可以兼容多终端的课程网站开发的可行性以及系统的业务需求、功能需求。以此，将系统分解成各个分系统，根据各分系统需要展现的内容，采用boostrap前端框架进行设计。接着本文对课程网站各分系统包括首页模块、课程模块、实战模块、学习计划模块、反馈模块的设计和实现进行详细的说明，最后完成该系统的测试。通过对系统进行测试，系统存在的问题被发现，进一步被解决。最终，整个系统界面美观，功能完善。

毕业论文关键词：课程资源；HTML5；移动网站

Abstract This system uses HTML5 technology。based on the flexible layout, combined with the Media Query technology, a set of webs which can be effectively compatible with each mobile terminal can be developed, in line with the modern network curriculum teaching standard。The web can help web site managers release course resources, provide users with a powerful mobile learning capabilities, and provide strong service to customers who have mobile learning needs。

According to the current study of the actual situation of each terminal (pc terminal, mobile terminal, etc。), I fully analyze the feasibility of the development of the course website which can be compatible with multiple terminals, as well as the business requirements and functional requirements of the system。According to this, The system is pided into different subsystems,and the task is designed according to the function of each subsystem。I use bootstrap(a front frame) to develop and imply the system。 In this paper, the design and implementation of each module (including the front page module, course module, control module, learning plan module and feedback module) of the course website is described in detail。Finally, the system is tested。 By testing the system,the problems of system are found and solved。 In the end, the interface of the whole system is beautiful, and the function is perfect。

Keywords: course resources; HTML5; mobile web site

目  录

第一章 绪论 1

1。1 研究背景和意义 1

1。2 国内外研究现状 3

1。2。1 发展概况 3

  1。2。2 目前存在的问题 4

1。3 论文主要内容和结构 4

第二章 理论基础和相关技术 6

2。1 移动终端概念 6

2。2 相关技术介绍 6

  2。2。1 HTML5介绍 6

  2。2。2 CSS介绍 7

  2。2。3 JavaScript介绍 7

  2。2。4 jQuery介绍 8

2。3 响应式web的概念和关键技术 8

2。3。1 媒体查询 8

  2。3。2 弹性布局 9

  2。3。3栅格系统 9

2。4 开发工具与运行环境 10