摘 要

随着现在技术的发展和人们对工作生活需求的提高,互联网行业以其自身开放、共享、平等的特点,在各个行业都得到了充分发展和使用。在中国传统教育行业中存在着许多问题,比如发达地区和偏远地区所拥有的教育资源分布不均,线下教育受时间地点影响较大等,这些目前还没有得到解决。本文设计并实现了了一种基于HTML5的在线英语教育系统。具体完成了下列工作：
(1) 对系统进行了需求分析和功能设计 
(2) 详细描述了系统实现中的结构布局，头部制作，二级页面制作等具体实现部分
(3) 对系统进行了初步测试
HTML5是新一代的标记语言标准,跟之前的语言相比增强了浏览器Web网页的表现性能,在浏览器上实现客户端功能成为可能。另一方面增加了本地存储和数据库的应用,减少浏览器对插件的需求,如Adobe Flash。HTML5有许多丰富的标准库,本文应用相关技术实现了适合时代需求的新型在线教育系统。 

关键词：WEB；HTML5；英语教育

Abstract

With the improvement of current technology and the demand for work and life, the Internet industry with its own open, sharing, equality features in the various sectors have been fully developed and used.There are many problems in Chinese traditional education sectors, such as education resources have uneven distribution in the developed and remote areas ,or education is influenced by the time and place of the next line and so on, which has not yet been resolved.This article is designed and implemented an online English education system for HTML5-based. Specific done the following:

1. The system needs analysis and functional design.
2. A detailed description of the structure and layout of the system implementation, the head of production, the production of concrete realization of secondary pages and other parts.
3. Preliminary testing of the system

HTML5 is a new markup language standard, compared with the previous language to enhance the performance properties of the browser Web page, to achieve client functionality in your browser possible.While increasing local storage and database applications, reducing the need for browser plug-ins, such as Adobe Flash.HTML5 has many rich standard library, this paper-related technology to achieve a new online system for education needs of the times.

Key Words：html5;web；englishi education;

目 录

1. 绪论 1

1.1 研究背景、目的及意义 1

1.2 国内外研究现状 1

1.2.1 HTML5现状 1

1.2.2 网络教育系统研究状况 2

2. 基于HTML5的英语教育系统分析与设计 3

2.1 HTML5技术介绍 3

2.1.1 HTML5内容 3

2.2 需求分析 5

2.2.1 学生需求 6

2.2.2 老师需求 6

2.3 功能设计 6

2.3.1用户登录模块 6

2.3.2 学生信息管理模块 7

2.3.3 学习资料管理模块 7

3. 基于HTML5的英语教育系统实现 9

3.1 结构布局 9

3.1.1 DIV定义 9

3.1.2全局 CSS定义 9

3.2 头部制作 10

3.3 Banner制作 11

3.4 内容部分制作 12

3.4 二级页面制作 15

4. 系统测试 18

5. 总结与展望 20

参考文献 21

致 谢 22

1. 绪论

1.1 研究背景、目的及意义

随着社会信息化的发展，与网站开发相关的各项技术越来越受到广大IT从业人员的重视。各种英语教育资源通过网络跨越了空间距离的限制，使学校的英语教育成为可以超出校园向更广泛的地区辐射的开放式教育。学校可以充分发挥自己的学科优势和教育资源优势，把最优秀的教师、最好的教学成果通过网络传播到四面八方。网络技术应用于远程教育，其显著特征是：任何人、任何时间、任何地点、从任何章节开始、学习任何课程。网络教育便捷、灵活的“五个任何”，在学习模式上最直接体现了主动学习的特点，充分满足了现代教育和终身教育的需求。网络教育中，运用计算机网络所特有的信息数据库管理技术和双向交互功能，一方面，系统对每个网络学员的个性资料、学习过程和阶段情况等可以实现完整的系统跟踪记录，另一方面，教学和学习服务系统可根据系统记录的个人资料，针对不同学员提出个性化学习建议。网络教育为个性化教学提供了现实有效的实现途径。计算机网络的教学管理平台具有自动管理和远程互动处理功能，被应用于网络教育的教学管理中。网络教育中，可以不局限地区，不局限时间等优点，这样更好的让受教者节省时间和不必要的费用，更好的让自己来合理的安排学习时间。HTML5技术的到来以及近年3G网络的快速发展，让我们摆脱了单调乏味的Wap页面，取而代之的是手机像电脑一样访问酷炫移动Web页面，这大大增强了网站在移动Web方面的用户体验。^[1]

英语教育系统不仅能让人们获得相关的学习信息，还能有效的记录学员的个人信息以及学习进度。大多数网上教育系统都包含以下几个模块——学员登录，学习资料展示，学员信息存储等，因此，一个教育系统就像一道桥梁，它对加强学生与学生的联系，完善教育进度的服务，对潜在客户在未来建立联系上也发挥着重大作用。

1.2 国内外研究现状

1.2.1 HTML5现状

2014年10月28日，W3C的HTML工作组正式发布了HTML 5的正式推荐标准（W3C Recommendation），这一消息是W3C在美国圣克拉拉举行的W3C技术大会及顾问委员会会议（TPAC 2014）上宣布的。HTML 5在这一版本中增加了支持Web应用开发者的许多新特性，以及更符合开发者使用习惯的新元素，并重点关注定义清晰的、一致的准则，以确保Web应用和内容在不同用户代理（浏览器）中的互操作性。HTML 5是构建开放Web平台的核心。^[2]随着互联网的进步,传统的Web界面技术已经不能满足人们对交互特性的更高要求.Web标准是网页设计与开发的一个趋势,而HTML5是近十年来Web开发标准巨大的飞跃。^[3]作为WEB开发者，我们总能接触到新的技术及信息，HTML5和CSS3是万维网联盟提出的新标准，不过最近几年他们越来越受到大众的重视，利用HTML5可以更好的构建WEB应用。它相对于过去的老版本包含了许多新特性，力图打造更好的WEB开发平台。利用HTML5，开发者可以借助更丰富的描述性标签、更好的跨站点一击跨窗口通信到动画和完善的多媒体支持创造出更好的用户体验。在几年前，HTML5和CSS3在我们看来还十分新颖，但随着谷歌、火狐、IE等浏览器都在尽力完成HTML5和CSS3规范内容，所以这些技术在业务系统中逐渐被当今企业和组织所承认和采用。HTML5中新增的元素意欲弥合结构（由标记定义，呈现由样式定义）和内容（由Web页面的文本自身定义）之间的空缺。另外，HTML5还新增了用于传输多媒体内容的原生的开放标准，支持音频、视频、交互API、本地存储、地理定位API等。^[4] 虽然HTML5技术目前还只能在部分浏览器中得以实现，但随着网络技术的发展，会有更多的浏览器采用这个技术标准．针对目前Web应用的局限，提出了一种基于HTML5技术并辅之以JavaScript脚本语言，构造出可以离线应用的前端本地化存储解决方案，从而大大提高了Web应用程序的性能．^[5]如果说HTML是一部电影，那HTML5就是一次大转折。HTML本来是不会活过21世纪的。官方Web标准组织W3C早在1998年就已经对HTML撒手不管了。W3C把未来都寄托在XHTML这个更具现代特色的后续标准身上，XHTML被视为HTML的严肃整洁版。 但XHTML举步维艰，是一群被剥夺了话语权的人，让HTML起死回生并为本书将要探讨的功能奠定了基础。^[6]

1.2.2 网络教育系统研究状况

我国的网络教育始于1994年国家实施的教育科研网示范工程。网络教育在我国已经有了一定的发展规模，虽然发展趋势缓慢，但仍保持上升势态。国内提出的代表网络教育发展方向的网络教育模式是基于网络的教育模式，在网络学习的环境下，可以最大限度地发挥学习者的自主性、积极性，既可以进行个别化学习，又可以进行协作学习，这种教育模式比较注重学习者个人的需要。