HTML5+CSS3网页设计与制作案例课堂 第2版PDF电子书下载

第Ⅰ篇 HTML5网页设计 3

第1章 新一代Web前端技术 3

1.1HTML的基本概念 4

1.1.1HTML的发展历程 4

1.1.2什么是HTML 4

1.1.3HTML5文件的基本结构 5

1.2HTML5的优势 5

1.2.1解决了跨浏览器的问题 5

1.2.2增加了多个新特性 5

1.2.3用户优先的原则 6

1.2.4化繁为简的优势 7

1.3HTML5网页的开发环境 7

1.3.1使用记事本手工编写HTML5 7

1.3.2使用Dreamweaver CC编写HTML文件 8

1.4使用浏览器查看HTML5文件 12

1.4.1查看页面效果 12

1.4.2查看源文件 13

1.5疑难解惑 14

第2章 HTML5网页的文档结构 15

2.1HTML5文件的基本结构 16

2.1.1HTML5页面的整体结构 16

2.1.2HTML5新增的结构标记 16

2.2HTML5基本标记详解 17

2.2.1文档类型说明 17

2.2.2HTML标记 17

2.2.3头标记 18

2.2.4网页的主体标记 20

2.2.5页面注释标记 21

2.3HTML5语法的变化 22

2.3.1标签不再区分大小写 22

2.3.2允许属性值不使用引号 22

2.3.3允许部分属性的属性值省略 23

2.4综合案例——符合W3C标准的HTML5网页 23

2.5跟我学上机——简单的HTML5网页 25

2.6疑难解惑 26

第3章 HTML5网页中的文本、超链接和图像 27

3.1在网页中添加文本 28

3.1.1普通文本的添加 28

3.1.2特殊字符文本的添加 28

3.1.3使用HTML5标记添加特殊文本 30

3.2文本排版 32

3.2.1换行标记 32

3.2.2段落标记 32

3.2.3标题标记 33

3.3文字列表 34

3.3.1建立无序列表 34

3.3.2建立有序列表 36

3.3.3建立不同类型的无序列表 36

3.3.4建立不同类型的有序列表 37

3.3.5建立嵌套列表 38

3.3.6自定义列表 39

3.4超链接标记 40

3.4.1设置文本和图片的超链接 40

3.4.2创建指向不同目标类型的超链接 40

3.4.3设置以新窗口显示超链接页面 42

3.4.4链接到同一页面的不同位置 43

3.5创建热点区域 44

3.6网页中的图片 45

3.6.1在网页中插入图像 45

3.6.2设置图像的宽度和高度 47

3.6.3设置图像的提示文字 48

3.6.4将图片设置为网页背景 49

3.6.5排列图像 50

3.7综合案例——图文并茂的房屋装饰装修网页 50

3.8跟我学上机——在线购物网站的产品展示效果 52

3.9疑难解惑 53

第4章 使用HTML5创建表格 55

4.1表格的基本结构 56

4.2创建表格 57

4.2.1创建普通表格 57

4.2.2创建一个带有标题的表格 58

4.3编辑表格 59

4.3.1定义表格的边框类型 59

4.3.2定义表格的表头 59

4.3.3设置表格背景 60

4.3.4设置单元格的背景 61

4.3.5合并单元格 62

4.3.6排列单元格中的内容 65

4.3.7设置单元格的行高与列宽 66

4.4完整的表格标记 67

4.5综合案例——制作计算机报价表 68

4.6跟我学上机——制作学生成绩表 70

4.7疑难解惑 74

第5章 使用HTML5创建表单 75

5.1表单概述 76

5.2表单基本元素的使用 76

5.2.1单行文本输入框 77

5.2.2多行文本输入框 77

5.2.3密码输入框 78

5.2.4单选按钮 78

5.2.5复选框 79

5.2.6列表框 80

5.2.7普通按钮 81

5.2.8提交按钮 81

5.2.9重置按钮 82

5.3表单高级元素的使用 83

5.3.1url属性的使用 83

5.3.2email属性的使用 83

5.3.3date属性和time属性的使用 84

5.3.4number属性的使用 85

5.3.5range属性的使用 86

5.3.6required属性的使用 86

5.4综合案例——创建用户反馈表单 87

5.5跟我学上机——制作用户注册表单 88

5.6疑难解惑 90

第6章 HTML5中的音频和视频 91

6.1audio标签 92

6.1.1audio标签概述 92

6.1.2audio标签的属性 93

6.1.3浏览器对audio标签的支持情况 93

6.2在网页中添加音频文件 94

6.2.1添加自动播放的音频文件 94

6.2.2添加带有控件的音频文件 94

6.2.3添加循环播放的音频文件 95

6.2.4添加预播放的音频文件 95

6.3video标签 96

6.3.1video标签概述 96

6.3.2video标签的属性 97

6.3.3浏览器对video标签的支持情况 98

6.4在网页中添加视频文件 98

6.4.1添加自动播放的视频文件 98

6.4.2添加带有控件的视频文件 99

6.4.3添加循环播放的视频文件 99

6.5综合案例——设置视频文件的高度与宽度 100

6.6跟我学上机——添加预播放的视频文件 101

6.7疑难解惑 101

第7章 使用HTML5绘制图形 103

7.1添加canvas的步骤 104

7.2绘制基本形状 104

7.2.1绘制矩形 105

7.2.2绘制圆形 105

7.2.3使用moveTo与lineTo绘制直线 107

7.2.4使用bezierCurveTo绘制贝塞尔曲线 108

7.3绘制渐变图形 109

7.3.1绘制线性渐变 109

7.3.2绘制径向渐变 111

7.4绘制变形图形 112

7.4.1绘制平移效果的图形 112

7.4.2绘制缩放效果的图形 113

7.4.3绘制旋转效果的图形 114

7.4.4绘制组合效果的图形 115

7.4.5绘制带阴影的图形 117

7.5使用图像 118

7.5.1绘制图像 118

7.5.2平铺图像 119

7.5.3裁剪图像 121

7.5.4图像的像素化处理 122

7.6绘制文字 124

7.7图形的保存与恢复 126

7.7.1保存与恢复状态 126

7.7.2保存文件 127

7.8综合案例——绘制火柴棒人物 128

7.9跟我学上机——绘制商标 132

7.10疑难解惑 134

第Ⅱ篇 CSS3美化网页 137

第8章 CSS3概述与基本语法 137

8.1CSS3概述 138

8.1.1CSS3的功能 138

8.1.2浏览器与CSS3 138

8.1.3CSS3的基础语法 139

8.1.4CSS3的常用单位 139

8.2编辑和浏览CSS3 144

8.2.1手工编写CSS3 144

8.2.2用Dreamweaver编写CSS 145

8.3在HTML5中使用CSS3的方法 147

8.3.1行内样式 147

8.3.2内嵌样式 148

8.3.3链接样式 149

8.3.4导入样式 150

8.3.5优先级问题 151

8.4CSS3的常用选择器 154

8.4.1标签选择器 154

8.4.2类选择器 155

8.4.3ID选择器 155

8.4.4全局选择器 156

8.4.5组合选择器 157

8.4.6继承选择器 158

8.4.7伪类选择器 159

8.5选择器声明 160

8.5.1集体声明 160

8.5.2多重嵌套声明 161

8.6综合案例——制作炫彩网站Logo 161

8.7跟我学上机——制作学生信息统计表 164

8.8疑难解惑 166

第9章 使用CSS3美化网页字体与段落 167

9.1美化网页文字 168

9.1.1设置文字的字体 168

9.1.2设置文字的字号 169

9.1.3设置字体风格 170

9.1.4设置加粗字体 171

9.1.5将小写字母转为大写字母 171

9.1.6设置字体的复合属性 172

9.1.7设置字体颜色 173

9.2设置文本的高级样式 174

9.2.1设置文本阴影效果 174

9.2.2设置文本的溢出效果 176

9.2.3设置文本的控制换行 177

9.2.4保持字体尺寸不变 177

9.3美化网页中的段落 178

9.3.1设置单词之间的间隔 179

9.3.2设置字符之间的间隔 179

9.3.3设置文字的修饰效果 180

9.3.4设置垂直对齐方式 181

9.3.5转换文本的大小写 183

9.3.6设置文本的水平对齐方式 183

9.3.7设置文本的缩进效果 185

9.3.8设置文本的行高 186

9.3.9文本的空白处理 187

9.3.10文本的反排 188

9.4综合案例——设置网页标题 189

9.5跟我学上机——制作新闻页面 191

9.6疑难解惑 192

第10章 使用CSS3美化网页图片 193

10.1图片缩放 194

10.1.1通过描述标记width和height缩放图片 194

10.1.2使用CSS3中的max-width和max-height缩放图片 194

10.1.3使用CSS3中的width和height缩放图片 195

10.2设置图片的对齐方式 196

10.2.1设置图片的横向对齐 196

10.2.2设置图片的纵向对齐 197

10.3图文混排 199

10.3.1设置文字环绕效果 199

10.3.2设置图片与文字的间距 201

10.4综合案例——制作学校宣传单 202

10.5跟我学上机——制作简单的图文混排网页 204

10.6疑难解惑 206

第11章 使用CSS3美化网页背景与边框 207

11.1使用CSS3美化背景 208

11.1.1设置背景颜色 208

11.1.2设置背景图片 209

11.1.3背景图片重复 210

11.1.4背景图片显示 212

11.1.5背景图片的位置 213

11.1.6背景图片的大小 215

11.1.7背景的显示区域 216

11.1.8背景图像的裁剪区域 217

11.1.9背景复合属性 218

11.2使用CSS3美化边框 219

11.2.1设置边框的样式 220

11.2.2设置边框的颜色 221

11.2.3设置边框的线宽 222

11.2.4设置边框的复合属性 224

11.3设置边框的圆角效果 225

11.3.1设置圆角边框 225

11.3.2指定两个圆角半径 226

11.3.3绘制四个不同角的圆角边框 227

11.3.4绘制不同种类的边框 229

11.4综合案例——制作简单的公司主页 231

11.5跟我学上机——制作简单的生活资讯主页 234

11.6疑难解惑 235

第12章 使用CSS3美化超级链接和鼠标 237

12.1使用CSS3来美化超链接 238

12.1.1改变超级链接的基本样式 238

12.1.2设置带有提示信息的超级链接 239

12.1.3设置超级链接的背景图 240

12.1.4设置超级链接的按钮效果 241

12.2使用CSS3美化鼠标特效 242

12.2.1使用CSS3控制鼠标箭头 242

12.2.2设置鼠标变幻式超链接 244

12.2.3设置网页页面滚动条 244

12.3综合案例1——图片版本的超级链接 246

12.4综合案例2——关于鼠标特效 248

12.5跟我学上机——制作一个简单的导航栏 250

12.6疑难解惑 252

第13章 使用CSS3美化表格和表单的样式 253

13.1美化表格的样式 254

13.1.1设置表格边框的样式 254

13.1.2设置表格边框的宽度 256

13.1.3设置表格边框的颜色 257

13.2美化表单样式 258

13.2.1美化表单中的元素 258

13.2.2美化提交按钮 261

13.2.3美化下拉菜单 262

13.3综合案例——制作用户登录页面 263

13.4跟我学上机——制作用户注册页面 265

13.5疑难解惑 268

第14章 使用CSS3美化网页菜单 269

14.1使用CSS3美化项目列表 270

14.1.1美化无序列表 270

14.1.2美化有序列表 271

14.1.3美化自定义列表 273

14.1.4制作图片列表 274

14.1.5缩进图片列表 276

14.1.6列表的复合属性 277

14.2使用CSS3制作网页菜单 278

14.2.1制作无须表格的菜单 278

14.2.2制作水平和垂直菜单 280

14.3综合案例——模拟SOSO导航栏 282

14.4跟我学上机——将段落转变成列表 285

14.5疑难解惑 287

第15章 使用滤镜美化网页元素 289

15.1滤镜概述 290

15.2设置基本滤镜效果 291

15.2.1高斯模糊（blur）滤镜 291

15.2.2明暗度（brightness）滤镜 292

15.2.3对比度（contrast）滤镜 293

15.2.4阴影（drop-shadow）滤镜 294

15.2.5灰度（grayscale）滤镜 295

15.2.6反相（invert）滤镜 296

15.2.7透明度（opacity）滤镜 297

15.2.8饱和度（saturate）滤镜 298

15.2.9深褐色（sepia）滤镜 299

15.3综合案例1——使用复合滤镜效果 300

15.4综合案例2——使用滤镜制作动画效果 301

15.5跟我学上机——制作色相旋转（hue-rotate）滤镜 303

15.6疑难解惑 304

第Ⅲ篇 高级提升技能 307

第16章 CSS3中的动画效果 307

16.1了解过渡效果 308

16.2添加过渡效果 308

16.3了解动画效果 310

16.4添加动画效果 311

16.5了解2D转换效果 312

16.6添加2D转换效果 313

16.6.1添加移动效果 313

16.6.2添加旋转效果 314

16.6.3添加缩放效果 315

16.6.4添加倾斜效果 316

16.7添加3D转换效果 318

16.8综合案例——添加综合过渡效果 320

16.9跟我学上机——添加综合变幻效果 321

16.10疑难解惑 322

第17章 HTML5中的文件与拖放 323

17.1选择文件 324

17.1.1选择单个文件 324

17.1.2选择多个文件 324

17.2使用FileReader接口读取文件 325

17.2.1检测浏览器是否支持FileReader接口 325

17.2.2FileReader接口的方法 326

17.2.3使用readAsDataURL方法预览图片 326

17.2.4使用readAsText方法读取文本文件 328

17.3使用HTML5实现文件的拖放 329

17.3.1认识文件拖放的过程 330

17.3.2浏览器支持情况 330

17.3.3在网页中拖放图片 331

17.4综合案例——在网页中来回拖放图片 332

17.5跟我学上机——在网页中拖放文字 333

17.6疑难解惑 335

第18章 定位地理位置技术 337

18.1Geolocation API获取地理位置 338

18.1.1地理定位的原理 338

18.1.2获取定位信息的方法 338

18.1.3常用地理定位方法 338

18.1.4判断浏览器是否支持HTML5获取地理位置信息 339

18.1.5指定纬度和经度坐标 340

18.1.6获取当前位置的经度与纬度 341

18.1.7处理错误和拒绝 343

18.2目前浏览器对地理定位的支持情况 343

18.3综合案例——在网页中调用Google地图 344

18.4跟我学上机——持续获取用户移动后的位置 346

18.5疑难解惑 348

第19章 Web存储和通信技术 349

19.1认识Web存储 350

19.1.1本地存储和Cookies的区别 350

19.1.2Web存储方法 350

19.2使用HTML5 Web Storage API 350

19.2.1测试浏览器的支持情况 351

19.2.2使用sessionStorage方法创建对象 352

19.2.3使用localStorage方法创建对象 353

19.2.4Web Storage API的其他操作 355

19.2.5使用JSON对象存取数据 355

19.3在本地建立数据库 358

19.3.1本地数据库概述 358

19.3.2用executeSql来执行查询 358

19.3.3使用transaction方法处理事件 359

19.4目前浏览器对Web存储的支持情况 359

19.5跨文档消息传输 359

19.5.1跨文档消息传输的基本知识 359

19.5.2案例1——跨文档通信应用测试 360

19.6WebSocket API 362

19.6.1什么是WebSocket API 362

19.6.2WebSocket通信基础 362

19.6.3案例2——服务器端使用Web Socket API 364

19.6.4案例3——客户机端使用WebSocket API 367

19.7综合案例——制作简单Web留言本 367

19.8跟我学上机——编写简单的WebSocket服务器 370

19.9疑难解惑 374

第20章 处理线程和服务器发送事件 375

20.1Web Worker 376

20.1.1Web Worker概述 376

20.1.2线程中常用的变量、函数与类 376

20.1.3案例1——前台与后台线程进行数据的交互 377

20.2线程嵌套 379

20.2.1案例2——单线程嵌套 379

20.2.2案例3——多个子线程中的数据交互 381

20.3服务器发送事件概述 383

20.4服务器发送事件的实现过程 383

20.4.1检测浏览器是否支持Server-Sent Event 383

20.4.2使用EventSource对象 384

20.4.3编写服务器端代码 384

20.5综合案例——创建Web Worker计数器 385

20.6跟我学上机——服务器发送事件实战应用 386

20.7疑难解惑 388

第21章 CSS3定位与DIV布局核心技术 389

21.1了解块级元素和行内级元素 390

21.1.1块级元素和行内级元素的应用 390

21.1.2div标记和span标记的区别 392

21.2盒子模型 392

21.2.1盒子模型的概念 393

21.2.2定义网页的border区域 393

21.2.3定义网页的padding区域 394

21.2.4定义网页的margin区域 395

21.3CSS3新增的弹性盒模型 399

21.3.1定义盒子的布局取向（box-orient） 399

21.3.2定义盒子的布局顺序（box-direction） 400

21.3.3定义盒子布局的位置（box-ordinal-group） 402

21.3.4定义盒子的弹性空间（box-flex） 403

21.3.5管理盒子空间（box-pack和box-align） 405

21.3.6盒子空间的溢出管理（box-lines） 407

21.4综合案例——图文排版效果 408

21.5跟我学上机——淘宝导购菜单 411

21.6疑难解惑 414

第Ⅳ篇 综合案例实战 417

第22章 网页布局剖析与制作 417

22.1固定宽度网页剖析与布局 418

22.1.1网页单列布局模式 418

22.1.2网页1-2-1型布局模式 421

22.1.3网页1-3-1型布局模式 425

22.2自动缩放网页1-2-1型布局模式 428

22.2.1“1-2-1”等比例变宽布局 428

22.2.2“1-2-1”单列变宽布局 429

22.3自动缩放网页1-3-1型布局模式 430

22.3.1“1-3-1”三列宽度等比例布局 430

22.3.2“1-3-1”单侧列宽度固定的变宽布局 430

22.3.3“1-3-1”中间列宽度固定的变宽布局 434

22.3.4“1-3-1”双侧列宽度固定的变宽布局 437

22.4分列布局背景色的使用 440

22.4.1设置固定宽度布局的列背景色 440

22.4.2设置特殊宽度变化布局的列背景色 441

22.4.3设置单列宽度变化布局的列背景色 443

22.5综合案例——设置多列等比例宽度变化布局的列背景 445

22.6跟我学上机——“1-3-1”中列和左侧列宽度固定的变宽布局 447

22.7疑难解惑 450

第23章 设计企业门户类网页 451

23.1构思布局 452

23.1.1设计分析 452

23.1.2排版架构 452

23.2模块分割 453

23.2.1Logo与导航菜单 453

23.2.2左侧的文本介绍 455

23.2.3右侧的导航链接 457

23.2.4版权信息 458

23.3整体调整 459

23.4疑难解惑 460

第24章 设计在线购物类网页 461

24.1整体布局 462

24.1.1设计分析 462

24.1.2排版架构 462

24.2模块分割 463

24.2.1Logo与导航区 463

24.2.2Banner与资讯区 465

24.2.3产品类别区域 466

24.2.4页脚区域 468

24.3设置链接 468

24.4疑难解惑 468