HTML5炼成记——Web前端开发（HTML5+CSS3+JavaScript）12堂必修课（全彩印刷）

专治Web前端新手入门“水土不服”！12堂生动有趣的课程让HTML 5小白彻底爱上网页开发！

本书从问题出发，专业讲解，实用性超强；文字轻松，图解丰富，贴近实战；多方位互动，没有很长的代码；关键代码突出显示，让你更容易抓住重点； 

通过本书你能学到网页的框架制作、HTML 5的新增知识点、新型表单的制作方法、网页中的绘图方法、定位及拖放等；给网页添加样式的方法、动画的制作、网页的自适应、图片文字的各种流行样式的制作方法；为网页设计特效的方法、轮播图的制作方法原理、表单中的特效运用方法等一系列实用知识点；在介绍各个知识点时，采用了更为通俗易懂的描述方式，做到简洁而不空洞、详细而不烦琐，且都是在网页设计中经常使用的知识点；全书采用彩色印刷、简洁大方的排版方式，选用的实例也都非常精美；在保证学会的前提下，追求多方法操作，为了配合正文讲解，书中还总结了一些小知识板块，以帮助读者掌握更多的知识内容。

Chapter
01一起来学HTML 5

Warming
Up    HTML 5能做什么

Section
01         更强大的元素      

01 一起来画图

02 一个实用的表单

03 路痴的救星

04 让图片可以拖拽

Section
02         更精美的样式      

01 漂亮的文字

02 炫酷的图片

03 设置动画效果

04 自适应网页

Section
03         更炫酷的特效      

01
banner是怎样制作的

02 消息的提示框

Test 课后作业       

 

Chapter
02网页绘图如此有趣

Warming
Up    强大的canvas      

Section
01         潜心修行canvas 

01 圆形表盘

Try it 制作圆形表盘      

02 分针、时针和秒针

Try it 制作表针      

03 时间刻度线

Try it 制作时间刻度线 

04 看看几点了

Try it 计时开始      

Section
02         图像好看的样式 

01 让图片更加高级

Try it 修饰图片      

02 观看图片的局部

Try it 图片的局部显示 

03 给图片添加“蒙版”

Try it 微信聊天框效果 

04 图片的立体显示

Try it 图片的阴影效果 

Try it 文字、边框、图片的阴影效果 

Section
03         图形的各种效果 

01 螺旋形旋转

Try it 螺旋旋转图形      

02 两种渐变设置

Try it 图形的渐变设置 

03 当图形重叠时

Try it 组合图形的绘制 

Test 课后作业       

 

Chapter
03生成漂亮的表单

Warming
Up    怎样让表单变漂亮      

Section
01         一起制作表单      

01 改变传统登录方式

Try it 制作一个登录表单      

02 注册简洁大方型表单

Try it 制作简洁的注册型表单      

Section
02         多姿多彩的表单 

01 年月日的出现

Warming
Up    怎样让表单变漂亮      

Section
01         一起制作表单      

01 改变传统登录方式

Try it 制作一个登录表单      

02 注册简洁大方型表单

Try it 制作简洁的注册型表单      

Section
02         多姿多彩的表单 

01 年月日的出现

 

Chapter
04播放器的打开姿势

Warming
Up    网页播放器 

Section
01         看视频听音乐之前      

01 了解浏览器支持情况

02 测试浏览器

Try it 亲测浏览器是否支持 

Try it 嵌入插件作为备选解决不支持 

Section
02         享受视听盛宴      

01 沉浸在音乐的海洋

Try it 制作音乐播放器 

02 打开视频的正确方式

Try it 制作视频播放器 

03 了解播放器中的方法

Test 课后作业       

 

Chapter
05定位自己的位置

Warming
Up    一起学习定位知识      

Section
01         有导航不迷路      

01 学习经纬度知识

02 IP地址定位数据

03 GPS地理定位

Section
02         开始定位      

01 获取地理位置

Try it 获取当前的地理位置 

02 浏览器的支持情况

Try it 测试浏览器支持情况 

Section
03         找到自己      

01 保护用户的隐私

02 调用地图接口

Try it 调用谷歌地图      

03 显示你的位置

Try it 定位自己的位置 

Test 课后作业       

 

Chapter
06 实用的上传方式

 

Warming
Up    拖拽上传的应用 

Section
01         调整图片位置      

01 实现拖放的步骤

02 实现拖拽的方法

Section
02         拖放操作      

01 拖放应用

Try it 最简单的拖放操作      

02 拖放列表

Try it 制作拖放列表      

03 拖拽上传文件

Try it 附件的拖拽上传 

Section
03         离线知识      

01 支持离线行为

Try it 演示网页是否在线      

02 检测浏览器支持与否

Try it 检测浏览器是否支持 

03 Web
Workers的简单应用

Test 课后作业       

 

Chapter
07开启样式的大门

Warming
Up    让网页多姿多彩 

Section
01         给样式作修饰      

01 选择元素进行样式设置

Try it 需要重点标注的句子 

02 设置一类元素的样式

Try it 给所有元素设置相同样式 

Try it 使用什么方法能制作出相同的效

03 属性也可以设置样式

Try it 设置其中一张图片的属性 

Section
02         选择性地修饰      

01 新版本与旧版本的比较

02 让设计更高级

Try it 单击链接发生颜色变化      

Try it 设置多彩的输入框      

Try it 单击时按钮颜色发生变化 

03 结构性伪类的用法

Try it 变化的字体颜色 

04 伪类选择器

Try it 给第一句诗添加背景颜色 

Try it 设置首字母的大小写 

Try it 运用其他方法做出图片效果      

Test 课后作业       

 

Chapter
08网页中的“动画片”

Warming
Up    怎样让元素动起来      

Section
01         过渡知识      

01 与用户的互动

Try it 让元素不再呆板 

02 变化出更多样式

Try it 多种变化效果      

03 模拟DOCK的缩放特效

Try it 制作一个有导航的电脑桌面      

Section
02         实现动画      

01 动起来的关键

Try it 一起荡秋千 

02 制作旋转的圈圈

Try it 制作loading图标

Try it 制作loading进度条    

03 使用放大镜查看

Try it 使用放大镜查看图片 

Test 课后作业       

 

Chapter
09让浏览更轻松

Warming
Up    三站合一      

Section
01         自适应效果 

01 多媒体查询能做什么

02 窗口大小控制颜色

Try it 网页背景随浏览器大小改变而改变 

03 自适应导航栏

Try it 制作流行的网页导航栏      

Section
02         与用户的互动      

01 制作一张电子报纸

Try it 多列布局的用法 

02 Photoshop中的滤镜效果

Try it
ps一张美女图片  

03 修饰图片

Try it 修饰图片的轮廓 

04 开关按钮样式

Try it 用最简单的方法制作按钮 

Test 课后作业       

 

Chapter
10重要的网页元素

Warming
Up    变花样的文字和边框 

Section
01         文字让网页更突出      

01 文字的阴影效果

Try it 让文字显得立体 

Try it 用阴影增加前景色与背景色的对比

02 更多的文字效果

Try it 制作更多文字效果      

03 文本溢出的设置

Try it 制作文本的溢出效果 

04 英文单词的换行

Try it 长单词的换行      

Try it 拆分单词      

Section
02         颜色让网页更好看      

01 多变的颜色

Try it 制作颜色渐变      

Try it 制作一颗闪闪的星星 

02 色彩的模式

Try it 制作一个HsL颜色模式表  

03 扩展的色彩模式

Try it 制作颜色的不透明度 

Section
03 动作让网页更高级     

01 图片的3D旋转

Try it 制作图片的3D旋转   

02 高级图标

Try it 制作扁平化的图标      

Test 课后作业       

 

Chapter11特效是用什么做的

Warming
Up    Javascript怎样嵌入     

Section
01         流行的网页样式 

01
JavaScript的作用

02
JavaScript的特点

03
JavaScript的应用

Try it 单击按钮出现文字      

Section
02         炫酷特效的前提 

01 掌握一些类型

02 了解一些语句

Try it 单击按钮出现问候语 

Try it 用时间点来设置问候语      

Try it 让代码循环计算5次  

Try it 一直循环代码

03 应用哪些事件

04 事件的句柄

05 怎样处理事件

Test 课后作业       

 

Chapter12炫酷效果应用方向

Warming
Up    怎样制作滚动banner 

Section
01         这个函数不一样 

01 函数定义

Try it 单击按钮显示“你好”      

Try it 单击按钮出现欢迎词 

Try it 制作一个计算器 

02 函数参数

Try it 给参数设置默认值      

Try it 设置查找值的函数      

03 函数调用

Section
02         表单中的应用

01 按钮对象

Try it 设置表单的按钮对象 

02 复选框对象

Try it 可以全选的复选框      

03 列表框对象

Try it 设置列表框对象 

04 增加列表框

Try it 与用户的互动效果      

05 表单中的时间

Try it 调用时间      

Section
03 网页中的应用     

01 轮播图效果

Try it 制作一个网页的轮播图      

02 字体闪烁效果

Try it 制作文字的闪烁效果 

03 鼠标滑过效果

Try it 制作鼠标滑过图片的震动效果 

Section
04         网页中的特效      

01 显示网页停留时间

Try it 显示所在网页停留的时间 

02 制作定时关闭窗口

Try it 让窗口在设定好的时间自动关闭      

Test
课后作业