HTML5网页前端设计实战

本书是《HTML5网页前端设计》一书的配套实战项目教程，也可单独为具有一定Web前端基础的读者使用。本书的电子资源包括全套例题源代码可供读者下载。全书共包含10章，每章均配套两个实例项目。全部内容可分为以下4个部分：第一部分是基础知识篇，包括第1、2章的内容。其中，第1章是HTML+CSS基础项目，介绍导航菜单与商务风格表格的设计与实现；第2章是JavaScript基础项目，介绍电子时钟与电子日历的设计与实现。第二部分是重点篇，包括第3～8章的内容。这6章分别介绍基于HTML5拖放API、表单API、画布API、媒体API、地理定位API以及Web存储API的项目案例。其中较有特色的综合项目有手绘时钟、拼图游戏、网页日志本、音乐播放器、在线教学视频等。第三部分是提高篇，包括第9章的内容。第9章是CSS3基础项目，主要讲解使用CSS3制作火焰和霓虹文字特效以及使用CSS3动画制作响应式放大菜单。第四部分是综合篇，包括第10章的内容。第10章提供了两个完整的项目实例，包括贪吃蛇游戏的开发和企业文化用品展示网站的设计与实现。这两个项目实例综合应用了全书所学的知识，让读者所学即所用。本书可作为高校计算机相关专业HTML5 课程的实践教材，也可作为学习HTML5开发的自学教材或培训教材。

第1章HTML+CSS基础项目1
1.1导航栏菜单的设计与实现1
1.1.1界面设计1
1.1.2鼠标事件4
1.1.3完整代码展示5
1.2商务风格表格的设计与实现6
1.2.1创建表格6
1.2.2样式设计7
1.2.3完整代码展示11
第2章JavaScript基础项目13
2.1电子时钟的设计与实现13
2.1.1界面设计13
2.1.2时钟动态效果的实现16
2.1.3完整代码展示18
2.2电子日历的设计与实现19
2.2.1界面设计19
2.2.2显示状态栏中的年份和月份22
2.2.3显示当前月份的所有日期23
2.2.4按钮控件功能的实现26
2.2.5完整代码展示27
第3章HTML5拖放API项目31
3.1仿回收站效果的设计与实现31
3.1.1界面设计31
3.1.2文件拖曳与回收功能的实现34
3.1.3完整代码展示37
3.2图片相框展示的设计与实现39
3.2.1界面设计39
3.2.2相框自动生成功能的实现41
3.2.3完整代码展示46
第4章HTML5表单API项目49
4.1用户注册页面的设计与实现49
4.1.1界面设计50
4.1.2表单设计51
4.1.3提示与验证功能的实现54
4.1.4完整代码展示58
4.2问卷调查页面的设计与实现60
4.2.1界面设计61
4.2.2表单设计62
4.2.3验证功能的实现69
4.2.4完整代码展示73
第5章HTML5画布API项目79
5.1手绘时钟的设计与实现79
5.1.1界面设计79
5.1.2实时更新效果87
5.1.3完整代码展示88
5.2拼图游戏的设计与实现91
5.2.1界面设计91
5.2.2实现游戏逻辑95
5.2.3游戏成功与重新开始102
5.2.4完整代码展示105
第6章HTML5媒体API项目111
6.1音乐播放器的设计与实现111
6.1.1界面设计111
6.1.2媒体文件的载入115
6.1.3控件功能的实现115
6.1.4完整代码展示119
6.2在线教学视频的设计与实现122
6.2.1界面设计122
6.2.2视频文件的载入与播放127
6.2.3视频时间跳转的实现128
6.2.4完整代码展示130
第7章HTML5地理定位API项目133
7.1运动数据记录页面的设计与实现133
7.1.1界面设计134
7.1.2实时监控地理定位135
7.1.3开始与结束按钮的切换136
7.1.4计算与显示距离138
7.1.5完整代码展示140
7.2运动轨迹绘制页面的设计与实现144
7.2.1界面设计144
7.2.2开始与结束按钮的切换146
7.2.3绘制地图与运动轨迹146
7.2.4计时功能的实现151
7.2.5完整代码展示153
第8章HTML5Web存储API项目157
8.1基于Web存储技术的网页主题设置157
8.1.1界面设计157
8.1.2重置网页主题颜色的实现160
8.1.3加载网页主题颜色的实现162
8.1.4完整代码展示163
8.2基于Web存储技术的网页日志本165
8.2.1界面设计165
8.2.2读取日志功能的实现168
8.2.3保存日志功能的实现169
8.2.4删除日志功能的实现170
8.2.5完整代码展示171
第9章CSS3基础项目175
9.1使用CSS3文本阴影制作特殊字体效果175
9.1.1整体设计175
9.1.2火焰文字效果的实现177
9.1.3霓虹文字效果的实现178
9.1.4完整代码展示179
9.2使用CSS3动画制作响应式放大菜单180
9.2.1整体设计180
9.2.2动画效果的实现182
9.2.3完整代码展示183
第10章综合应用设计实例185
10.1基于HTML5的贪吃蛇游戏的设计与实现185
10.1.1贪吃蛇游戏简介185
10.1.2界面布局设计185
10.1.3数据模型设计190
10.1.4游戏的逻辑实现192
10.1.5完整代码展示203
10.2实战项目——企业文化用品展示网页的开发207
10.2.1项目简介207
10.2.2整体布局设计208
10.2.3页眉和页脚的实现210
10.2.4主体内容的实现212
10.2.5完整代码展示225