本书是一本从零开始学习的Web前端开发教材，无需额外的基础。本书以项目驱动为宗旨，详细介绍了HTML5、CSS3与JavaScript的基础知识与使用技巧。本书包含例题228个，均在浏览器中调试通过。本书提供相关资源下载，包括例题源代码、课后习题答案、教学PPT与教学大纲。本书配套项目案例教材《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章 HTML5 Web存储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
【前言】
本书是《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章提供了两个完整的项目实例，包括贪吃蛇游戏的开发和企业文化用品展示网页的设计与实现。这两个项目实例综合应用了全书所学的知识，让读者所学即所用。 本书有以下几个特点。 1．知识全面，循序渐进 本书首先循序渐进地介绍了一些基于HTML、CSS和JavaScript的基础项目，帮助读者打好基本功；然后正式进入HTML5新增API的相关项目介绍，让读者有针对性地逐步巩固常用HTML5新增API的用法；接着在提高篇补充了CSS3相关技术为页面增加特效；后提供了两个完整项目实例，让读者进一步提高自己对于知识的综合应用能力。 2．项目驱动，实用性强 全书将主教材各章节的知识点融入综合项目案例中，帮助读者更好地理解所学知识。在本书的后一章还包含了游戏开发以及企业网站开发的真实商业案例，具有较高的实用价值，也适合培养读者的动手能力。 3．步骤详细，易于理解 本书思路清晰、知识点循序渐进展开，每章的项目案例均分步骤讲解，读者可以看到从界面设计开始到样式美化以及特效完成的整个变化过程。读者跟着每章的综合案例独立完成开发过程即可基本达到前端开发的要求。 本书全部例题均在浏览器中调试通过，由于很多HTML5和CSS3的代码需要较高版本的浏览器才能提供更好的体验效果，建议读者使用但不限于Internet Explorer 10.0、Chrome 17.0、Firefox 10.0、Safari 5.0或Opera 11.1以上版本的浏览器。 后感谢家人和朋友给予的关心和大力支持，本书能够完成与你们的鼓励是分不 开的。 愿本书能够对读者学习Web前端新技术有所帮助，并真诚地欢迎读者批评指正，希望能与读者朋友们共同学习成长，在浩瀚的技术之海不断前行。 作 者 2017年3月
【书摘与插画】
