HTML5网页设计经典课堂

为啥要学设计？
随着社会的发展，人们对美好事物的追求与渴望，已达到了一个新的高度。这一点充分体现在了审美意识上，毫不夸张地讲，我们身边的美无处不在，大到园林建筑，小到平面海报，抑或是小门店也都要装饰一番以突显出自己的特色。这一切都是“设计”的结果，可以说生活中的很多元素都被有意识或无意识地设计过。俗话说：学设计饿不死，学设计高工资！那些有经验的设计师，月薪过万不是梦。正是因为这一点，很多人都投身于设计行业。

问：学设计可以从事哪类工作？求职难吗？
答：广为人知的设计行业包括：室内设计、广告设计、UI设计、珠宝设计、服装设计、环艺设计、影视动画设计……所以你还在问求职难吗！

问：如何选择学习软件？
答：根据设计类型和就业方向，学习相关软件。比如，平面设计类软件大同小异，重在设计体验。室内外设计软件各有侧重，贵在实际应用。各类软件之间也要配合使用，就像设计师要用Photoshop对建筑效果图做后期处理，为了让设计作品呈现更好的效果，有时会把视频编辑软件与平面软件相互配合。

问：没有美术基础的人也可以学设计吗？
答：可以。设计类的专业有很多，并不是所有的设计专业都需要有美术的功底，如工业设计、展示设计等。俗话说“艺术来源于生活”，学设计不但可以提高自身审美能力，还能有效地指引人们制作出更精美的作品，提升自己的生活品质。

问：设计该从何学起？
答：自学设计可以先从软件入手：位图、矢量图和排版。学会了软件可以胜任90%的设计工作，只是缺乏“经验”。设计是软件技术 审美 创意，其中软件学习比较容易上手，而审美品位的提升则需要多欣赏优秀作品，只要不断学习，突破自我，优秀的设计技术就能被轻松掌握！

系列图书课程安排
本系列图书既注重单个软件的实操应用，又看重多个软件的协同办公，以“理论知识 实际应用 案例展示”为创作思路，向读者全面阐述了各软件在设计领域中的强大功能。在讲解过程中，结合各领域的实际应用，对相关的行业知识进行了深度剖析，以辅助读者完成各种类型的设计工作。正所谓要“授人以渔”，读者不仅可以掌握这些设计软件的使用方法，还能利用它独立完成作品的创作。本系列图书包含以下作品：

√ 《3ds Max建模技法经典课堂》
√ 《3ds Max Vray效果图表现技法经典课堂》
√ 《SketchUp草图大师建筑 ? 景观 ? 园林设计经典课堂》
√ 《AutoCAD 3ds Max Vray室内效果图表现技法经典课堂》
√ 《AutoCAD SketchUp Vray建筑室内外效果表现技法经典课堂》
√ 《Adobe Photoshop CC图像处理经典课堂》
√ 《Adobe Illustrator CC平面设计经典课堂》
√ 《Adobe InDesign CC版式设计经典课堂》
√ 《Adobe Photoshop Illustrator平面设计经典课堂》
√ 《Adobe Photoshop CorelDRAW平面设计经典课堂》
√ 《Adobe Premiere Pro CC 视频编辑经典课堂》
√ 《Adobe After Effects CC 影视特效制作经典课堂》
√ 《HTML5 CSS3网页设计与布局经典课堂》
√ 《HTML5 CSS3 JavaScript网页设计经典课堂》

适用读者群体
室内效果图制作人员；
室内装修、装饰设计人员；
装饰装潢培训班学员；
大中专院校及高等院校相关专业师生；
AutoCAD/3ds Max设计爱好者。

作者团队
本书由尚展垒、张冲编写。其中郑州轻工业大学的尚展垒老师编写了第1～6章，中原工学院的张冲老师编写了第7～12章，同时，感谢清华大学出版社的所有编审人员为本书的出版所付出的辛勤劳动，感谢郑州轻工业大学教务处的大力支持。本书在编写过程中力求严谨细致，但由于水平与精力有限，书中难免出现疏漏和不妥之处，希望各位读者朋友们多多包涵，并批评指正，万分感谢！

本书配套教学资源请扫描以下二维码获取。
　　　　　　　　　　　
素材 课件

《HTML5网页设计经典课堂》以HTML 5为写作基础，以“理论知识＋实操案例”为创作导向，围绕Web前端展开讲解。书中的每个案例都给出了详细的实现代码，并对代码中的关键点和效果实现进行了描述。 《HTML5网页设计经典课堂》共12章，分别对HTML 5中文字和图片样式、列表的制作、网页表单的制作、多媒体设置、表格和链接的使用、新增元素的用法、新型表单的制作、地理位置的获取、在页面中绘图、离线储存和拖放进行了详细阐述。本书结构清晰，思路明确，内容丰富，语言简练，既有鲜明的基础性，也有很强的实用性。 《HTML5网页设计经典课堂》既可作为大中专院校及高等院校相关专业的教学用书，又可作为网页设计爱好者的学习用书。同时，也可作为社会各类网页设计及Web前端开发培训班的*教材。

尚展垒，副教授，任郑州轻工业学院计算中心主任，从教学工作多年，有丰富的实战经验。同时，还是全国高等院校计算机基础教育研究会理工专业委员会的教学研究委员会委员。曾参与编写过《HTML炼成记》一书。

第1章 HTML入门必学

1.1 认识HTML /2

1.2 HTML5的优势 /2

1.2.1 强大的交互性 /3

1.2.2 使用HTML5的优势 /4

1.3 HTML5语法 /6

1.3.1 文档类型声明 /6

1.3.2 字符编码 /7

1.3.3 省略引号 /7

1.4 HTML5元素分类 /8

1.4.1 结构性元素 /8

1.4.2 级块性元素 /8

1.4.3 行内语义性元素 /9

1.4.4 交互性元素 /9

1.5 HTML5中新增的元素 /9

1.5.1 section元素 /9

1.5.2 article元素 /10

1.5.3 aside元素 /10

1.5.4 header元素 /11

1.5.5 fhgroup元素 /11

1.5.6 footer元素 /12

1.5.7 nav元素 /12

1.5.8 figure元素 /13

1.5.9 video元素 /13

1.5.10 audio元素 /14

1.5.11 embed元素 /14

1.5.12 mark元素 /14

1.5.13 progress元素 /15

1.5.14 meter元素 /15

1.5.15 time元素 /15

1.5.16 wbr元素 /15

1.5.17 canvas元素 /16

1.5.18 command元素 /16

1.5.19 datalist元素 /16

1.5.20 details元素 /16

1.5.21 datagrid元素 /17

1.5.22 keygen元素 /17

1.5.23 output元素 /17

1.5.24 source元素 /17

1.5.25 menu元素 /18

1.6 课堂练习 /18

强化训练 /19

第2章 文字和图片样式

2.1 网页中的文字和段落 /22

2.1.1 标题文字标签 /22

2.1.2 标题文字的对齐方式 /23

2.1.3 设置文字字体 /24

2.1.4 设置段落换行 /25

2.1.5 设置字体颜色 /26

2.1.6 设置上标和下标 /27

2.1.7 设置删除线 /28

2.1.8 不换行标签用法 /29

2.1.9 加粗标签的用法 /30

2.1.10 倾斜标签的用法 /31

2.2 网页中的图片样式 /32

2.2.1 图像格式 /33

2.2.2 添加图片 /33

2.2.3 设置图像大小 /34

2.2.4 设置图像边框 /35

2.2.5 图像的水平间距 /36

2.2.6 图像的垂直间距 /37

2.2.7 图像的提示文字 /39

2.2.8 图像的替换文字 /40

2.2.9 图片相对于文字的对齐方式 /41

2.2.10 为图片添加超链接 /41

2.3 课堂练习 /42

强化训练 /44

第3章 HTML中列表的样式

3.1 使用无序列表 /48

3.1.1 ul标签 /48

3.1.2 type无序列表类型 /49

3.2 使用有序列表 /51

3.2.1 ol标签 /51

3.2.2 type有序列表类型 /52

3.2.3 start有序列表的起始值 /54

3.2.4 dl定义列表标签 /56

3.2.5 menu菜单列表 /60

3.2.6 color设置列表文字颜色 /61

3.3 列表的嵌套 /61

3.3.1 定义列表的嵌套 /62

3.3.2 无序列表和有序列表的嵌套 /63

3.3.3 有序列表之间的嵌套 /65

3.4 课堂练习 /66

强化训练 /68

第4章 制作网页中的表单

4.1 表单的基本标签 /72

4.1.1 <form>标签 /72

4.1.2 <input>标签 /73

4.1.3 <textarea>标签 /74

4.1.4 <select>标签 /75

4.2 表单的基本属性 /76

4.2.1 action属性 /76

4.2.2 name属性 /77

4.2.3 method属性 /78

4.2.4 enctype属性 /79

4.2.5 target属性 /79

4.3 插入表单对象 /80

4.3.1 文本域 /80

4.3.2 密码域 /81

4.3.3 普通按钮 /82

4.3.4 单选按钮 /84

4.3.5 复选框 /84

4.3.6 提交按钮 /85

4.3.7 重置按钮 /86

4.3.8 图像按钮 /87

4.3.9 隐藏域 /88

4.3.10 文件域 /90

4.3.11 菜单和列表 /90

4.4 课堂练习 /92

强化训练 /94

第5章 网页多媒体的设置

5.1 插入多媒体 /98

5.1.1 插入音频和视频 /98

5.1.2 插入flash动画 /99

5.2 设置滚动效果 /99

5.2.1 设置滚动速度 /100

5.2.2 设置滚动方向 /101

5.2.3 设置滚动延迟 /102

5.2.4 设置滚动方式 /103

5.2.5 设置滚动的背景颜色 /104

5.2.6 设置滚动范围 /105

5.2.7 设置空白空间 /106

5.3 设置背景音乐 /107

5.3.1 插入背景音乐 /107

5.3.2 设置循环播放次数 /109

5.4 课堂练习 /110

强化训练 /111

第6章 使用表格和链接

6.1 创建表格 /114

6.1.1 表格的构成 /114

6.1.2 表格的标题 /115

6.1.3 表格的表头 /116

6.2 设置表格属性 /118

6.2.1 表格的宽度 /118

6.2.2 表格的高度 /120

6.2.3 表格的对齐方式 /122

6.3 设置表格边框属性 /123

6.3.1 表格的边框 /123

6.3.2 内框的宽度 /125

6.3.3 文字与边框间距 /126

6.4 设置表格背景 /128

6.4.1 表格背景颜色 /128

6.4.2 行的背景颜色 /130

6.5 设置单元格样式 /131

6.5.1 设置单元格的大小 /131

6.5.2 设置单元格边框颜色 /133

6.5.3 设置单元格跨度 /134

6.6 超链接的路径 /136

6.6.1 *路径 /136

6.6.2 相对路径 /136

6.7 创建超链接 /137

6.7.1 超链接标签的属性 /137

6.7.2 内部链接 /137

6.7.3 锚点链接 /139

6.7.4 外部链接 /142

6.8 课堂练习 /145

强化训练 /147

第7章 HTML5新增元素的用法

7.1 HTML5新增主体结构元素 /150

7.1.1 article元素 /150

7.1.2 section元素 /151

7.1.3 nav元素 /152

7.1.4 aside元素 /154

7.1.5 pubdate元素 /155

7.2 HTML5新增非主体结构元素 /156

7.2.1 header元素 /156

7.2.2 hgroup元素 /157

7.2.3 footer元素 /158

7.2.4 address元素 /160

7.3 新增audio和video元素 /161

7.3.1 检测浏览器是否支持 /161

7.3.2 audio元素 /162

7.3.3 使用audio元素 /163

7.3.4 video元素 /164

7.3.5 使用video元素 /165

7.4 新增的属性 /167

7.4.1 表单相关属性 /167

7.4.2 其他相关属性 /168

7.5 课堂练习 /168

强化训练 /171

第8章 制作新型表单

8.1 认识HTML5 forms /174

8.1.1 HTML5 forms新特性 /174

8.1.2 新型表单的输入型控件 /175

8.2 表单新属性 /179

8.2.1 新增表单元素 /179

8.2.2 新增表单属性 /182

8.3 HTML5中forms的应用 /186

8.4 课堂练习 /189

强化训练 /191

第9章 地理位置请求

9.1 关于地理位置信息 /194

9.1.1 经度和纬度坐标 /194

9.1.2 IP地址定位数据 /194

9.1.3 GPS地理定位数据 /195

9.1.4 WiFi地理定位数据 /195

9.1.5 自定义地理定位 /195

9.2 各种浏览器对Geolocation的支持 /195

9.2.1 Geolocation API概述 /196

9.2.2 Geolocation的浏览器支持情况 /198

9.3 隐私处理 /199

9.3.1 应用隐私保护机制 /199

9.3.2 处理位置信息 /199

9.4 使用Geolocation API /199

9.4.1 检测浏览器是否支持 /200

9.4.2 位置请求 /201

9.5 在地图上显示你的位置 /203

9.6 课堂练习 /207

强化训练 /209

第10章 在页面中绘图

10.1 canvas入门 /212

10.1.1 canvas含义 /212

10.1.2 canvas坐标 /212

10.2 使用canvas /213

10.2.1 在页面中加入canvas /213

10.2.2 绘制矩形和五角形 /215

10.2.3 检测浏览器是否支持 /218

10.3 绘制曲线路径 /219

10.3.1 绘制路径的方法 /219

10.3.2 描边样式的使用 /222

10.3.3 填充和曲线的绘制方法 /224

10.4 绘制图像 /226

10.4.1 插入图片 /226

10.4.2 渐变颜色的使用 /228

10.4.3 变形图形的设置方法 /231

10.4.4 组合图形的绘制方法 /232

10.4.5 使用canvas绘制文字 /235

10.5 课堂练习 /236

强化训练 /240

第11章 离线储存和拖放

11.1?离线Web入门 /244

11.1.1 离线Web介绍 /244

11.1.2 离线Web应用的浏览器支持情况 /244

11.2 使用离线Web /245

11.2.1 支持离线行为 /245

11.2.2 manifest文件介绍 /246

11.2.3 applicationCache对象 /247

11.2.4 离线Web的具体应用 /249

11.3 Web workers知识 /251

11.3.1 Web workers概述 /251

11.3.2 Web workers的简单应用 /252

11.4 使用Web workers API /254

11.4.1 检测浏览器是否支持 /254

11.4.2 创建Web workers /255

11.4.3 多线程文件的加载与执行 /255

11.4.4 与Web workers通信 /256

11.5 拖放API /257

11.5.1 实现拖放API的过程 /257

11.5.2 dataTransfer对象的属性与方法 /258

11.6 拖放API的应用 /258

11.6.1 拖放应用 /259

11.6.2 拖放列表 /261

11.7 课堂练习 /264

强化训练 /267

第12章 综合实战

12.1 制作一个商业网站 /270

12.1.1 商业网站的功能 /270

12.1.2 界面设计分析 /271

12.2 头部和banner的制作 /271

12.2.1 头部内容的结构分析 /271

12.2.2 banner的制作 /272

12.3 页面主体的制作 /273

12.3.1 主体内容结构分析 /274

12.3.2 主体内容样式定义 /275

12.4 页面尾部的制作 /276

12.5 网站首页代码示例 /277

12.6 二级页面的制作 /282

参考文献 /287

《HTML5网页设计经典课堂》结构清晰，思路明确，内容丰富，语言简练，以HTML 5为写作基础，以“理论知识＋实操案例”为创作导向，围绕Web前端展开讲解。书中的每个案例都给出了详细的实现代码，并对代码中的关键点和效果实现进行了描述。