HTML5+CSS3+JavaScript网页设计案例课堂（第2版）
生活百科 2023-01-26 08:56生活百科www.aizhengw.cn
HTML5+CSS3+JavaScript网页设计案例课堂（第2版）
基本介绍
- 书名HTML5+CSS3+JavaScript网页设计案例课堂（第2版）
- 作者刘春茂
- ISBN9787302486732
- 类别web前端
- 定价75元
- 出版社清华大学出版社
- 出版时间2018.01.01
- 印次2-1
出版信息
HTML5+CSS3+JavaScript网页设计案例课堂（第2版）
作者刘春茂
定价75元
印次2-1
ISBN9787302486732
出版日期2018.01.01
印刷日期2017.12.04
印次2-1
ISBN9787302486732
出版日期2018.01.01
印刷日期2017.12.04
内容简介
《HTML 5+CSS 3+JavaScript网页设计案例课堂(第2版)》以零基础讲解为宗旨，用实例引导读者深入学习，採取【HTML 5网页设计→CSS 3美化网页→JavaScript动态特效→综合案例实战】的讲解模式，深入浅出地讲解CSS+DIV的各项技术及实战技能。
目录
第I篇HTML5网页设计
第1章初识HTML5 3
1.1HTML5的基本概念 4
1.1.1HTML的发展历程 4
1.1.2什幺是HTML5 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使用DreamweaverCC编写
HTML档案 8
1.4使用浏览器查看HTML5档案 12
1.4.1查看页面效果 12
1.4.2查看源档案 13
1.5疑难解惑 13
第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头标记head 18
2.2.4网页的主体标记body 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换行标记<br> 32
3.2.2段落标记<p> 32
3.2.3标题标记<h1>~<h6> 33
3.3文字列表 34
3.3.1建立无序列表<ul> 34
3.3.2建立有序列表<ol> 36
3.3.3建立不同类型的无序列表 37
3.3.4建立不同类型的有序列表 38
3.3.5建立嵌套列表 38
3.3.6自定义列表 39
3.4网页中的图像<img> 40
3.4.1在网页中插入图像 40
3.4.2设定图像的宽度和高度 42
3.4.3设定图像的提示文字 43
3.4.4将图片设定为网页背景 44
3.4.5排列图像 45
3.5综合案例——图文并茂的房屋装饰装修
网页 45
3.6跟我学上机——线上购物网站的产品
展示效果 47
3.7疑难解惑 48
第4章用HTML5建立超连结 49
4.1URL的概念 50
4.1.1URL的格式 50
4.1.2URL的类型 50
4.2超连结标记<a> 51
4.2.1设定文本和图片的超连结 51
4.2.2创建指向不同目标类型的
超连结 52
4.2.3设定以新视窗显示超连结
页面 54
4.2.4连结到同一页面的不同位置 55
4.3创建热点区域 56
4.4创建浮动框架 58
4.5综合案例——用Dreamweaver精确
定位热点区域 59
4.6跟我学上机——创建热点区域 61
4.7疑难解惑 62
第5章用HTML5创建表格 63
5.1表格的基本结构 64
5.2创建表格 65
5.2.1创建普通表格 65
5.2.2创建一个带有标题的表格 66
5.3编辑表格 67
5.3.1定义表格的框线类型 67
5.3.2定义表格的表头 68
5.3.3设定表格背景 69
5.3.4设定单元格的背景 71
5.3.5合併单元格 72
5.3.6排列单元格中的内容 76
5.3.7设定单元格的行高与列宽 77
5.4完整的表格标记 78
5.5综合案例——製作计算机报价表 79
5.6跟我学上机——製作学生成绩表 82
5.7疑难解惑 85
第6章用HTML5创建表单 87
6.1表单概述 88
6.2表单基本元素的使用 88
6.2.1单行文本输入框 89
6.2.2多行文本输入框 89
6.2.3密码输入框 90
6.2.4单选按钮 91
6.2.5複选框 92
6.2.6列表框 92
6.2.7普通按钮 93
6.2.8提交按钮 94
6.2.9重置按钮 95
6.3表单高级元素的使用 96
6.3.1url属性的使用 96
6.3.2email属性的使用 97
6.3.3date和time属性的使用 97
6.3.4number属性的使用 98
6.3.5range属性的使用 99
6.3.6required属性的使用 100
6.4综合案例——创建用户反馈表单 101
6.5跟我学上机——製作用户注册表单 102
6.6疑难解惑 103
第7章用HTML5绘制图形 105
7.1添加canvas的步骤 106
7.2绘製基本形状 106
7.2.1绘製矩形 107
7.2.2绘製圆形 108
7.2.3使用moveTo与lineTo绘製
直线 108
7.2.4使用bezierCurveTo绘製贝塞尔
曲线 109
7.3绘製渐变图形 111
7.3.1绘製线性渐变 111
7.3.2绘製径向渐变 112
7.4绘製变形图形 114
7.4.1绘製平移效果的图形 114
7.4.2绘製缩放效果的图形 115
7.4.3绘製旋转效果的图形 116
7.4.4绘製组合图形 117
7.4.5绘製带阴影的图形 119
7.5使用图像 120
7.5.1绘制图像 120
7.5.2平铺图像 121
7.5.3裁剪图像 122
7.5.4图像的像素化处理 124
7.6绘製文字 126
7.7图形的保存与恢复 127
7.7.1保存与恢复状态 127
7.7.2保存图形 129
7.8综合案例——绘製火柴棒人物 130
7.9跟我学上机——绘製商标 132
7.10疑难解惑 134
第8章HTML5中的音频和视频 135
8.1audio标籤概述 136
8.1.1audio标籤概述 136
8.1.2audio标籤的属性 137
8.1.3浏览器对audio标籤的支持
情况 137
8.2在网页中添加音频档案 138
8.2.1添加自动播放的音频档案 138
8.2.2添加带有控制项的音频档案 138
8.2.3添加循环播放的音频档案 139
8.2.4添加预播放的音频档案 139
8.3video标籤概述 140
8.3.1video标籤概述 140
8.3.2video标籤的属性 141
8.3.3浏览器对video标籤的支持
情况 142
8.4在网页中添加视频档案 142
8.4.1添加自动播放的视频档案 142
8.4.2添加带有控制项的视频档案 143
8.4.3添加循环播放的视频档案 144
8.5综合案例——设定视频档案的高度
与宽度 144
8.6跟我学上机——添加预播放的视频
档案 145
8.5疑难解惑 146
第II篇CSS3美化网页
第9章CSS3概述与基本语法 149
9.1CSS3概述 150
9.1.1CSS3的功能 150
9.1.2浏览器与CSS3 150
9.1.3CSS3的基础语法 151
9.1.4CSS3的常用单位 151
9.2编辑和浏览CSS3 156
9.2.1手工编写CSS3 156
9.2.2用Dreamweaver编写CSS 157
9.3在HTML5中使用CSS3的方法 158
9.3.1行内样式 158
9.3.2内嵌样式 159
9.3.3连结样式 161
9.3.4导入样式 162
9.3.5优先权问题 163
9.4CSS3的常用选择器 165
9.4.1标籤选择器 165
9.4.2类选择器 166
9.4.3ID选择器 167
9.4.4全局选择器 168
9.4.5组合选择器 169
9.4.6继承选择器 170
9.4.7伪类选择器 171
9.5选择器声明 172
9.5.1集体声明 172
9.5.2多重嵌套声明 173
9.6综合案例——製作炫彩网站Logo 174
9.7跟我学上机——製作学生信息
统计表 176
9.8疑难解惑 178
第10章用CSS3美化网页字型
与段落 179
10.1美化网页文字 180
10.1.1设定文字的字型 180
10.1.2设定文字的字号 181
10.1.3设定字型风格 182
10.1.4设定加粗字型 183
10.1.5将小写字母转为大写字母 184
10.1.6设定字型的複合属性 185
10.1.7设定字型颜色 186
10.2设定文本的高级样式 187
10.2.1设定文本阴影效果 187
10.2.2设定文本的溢出效果 189
10.2.3设定文本的控制换行 190
10.2.4保持字型尺寸不变 191
10.3美化网页中的段落 192
10.3.1设定单词之间的间隔 192
10.3.2设定字元之间的间隔 193
10.3.3设定文字的修饰效果 194
10.3.4设定垂直对齐方式 195
10.3.5转换文本的大小写 196
10.3.6设定文本的水平对齐方式 197
10.3.7设定文本的缩进效果 199
10.3.8设定文本的行高 199
10.3.9文本的空白处理 200
10.3.10文本的反排 202
10.4综合案例——设定网页标题 203
10.5跟我学上机——製作新闻页面 204
10.6疑难解惑 206
第11章用CSS3美化网页图片 207
11.1图片缩放 208
11.1.1通过描述标记width和height
缩放图片 208
11.1.2用CSS3中的max-width和
max-height缩放图片 208
11.1.3用CSS3中的width和height
缩放图片 209
11.2设定图片的对齐方式 210
11.2.1设定图片的横向对齐 210
11.2.2设定图片的纵向对齐 211
11.3图文混排 213
11.3.1设定文字环绕效果 213
11.3.2设定图片与文字的间距 215
11.4综合案例——製作学校宣传单 216
11.5跟我学上机——製作简单的图文
混排网页 219
11.6疑难解惑 220
第12章用CSS3美化网页背景
与框线 221
12.1用CSS3美化背景 222
12.1.1设定背景颜色 222
12.1.2设定背景图片 223
12.1.3背景图片重複 224
12.1.4背景图片显示 226
12.1.5背景图片的位置 227
12.1.6背景图片的大小 229
12.1.7背景的显示区域 230
12.1.8背景图像的裁剪区域 231
12.1.9背景複合属性 232
12.2用CSS3美化框线 234
12.2.1设定框线的样式 234
12.2.2设定框线的颜色 235
12.2.3设定框线的线宽 237
12.2.4设定框线的複合属性 238
12.3设定框线的圆角效果 239
12.3.1设定圆角框线 239
12.3.2指定两个圆角半径 240
12.3.3绘製4个不同角的圆角
框线 241
12.3.4绘製不同种类的框线 243
12.4综合案例——製作简单的公司
主页 244
12.5跟我学上机——製作简单的生活资讯
主页 248
12.6疑难解惑 249
第13章用CSS3美化超级连结
和滑鼠 251
13.1用CSS3来美化超连结 252
13.1.1改变超级连结的基本样式 252
13.1.2设定带有提示信息的超级
连结 253
13.1.3设定超级连结的背景图 254
13.1.4设定超级连结的按钮效果 255
13.2用CSS3美化滑鼠特效 256
13.2.1用CSS3控制滑鼠箭头 256
13.2.2设定滑鼠变幻式超连结 258
13.2.3设定网页页面滚动条 259
13.3综合案例1——图片版本的超级
连结 261
13.4综合案例2——关于滑鼠特效 263
13.5跟我学上机——製作一个简单的
导航栏 265
13.6疑难解惑 268
第14章用CSS3美化表格和表单的
样式 269
14.1美化表格的样式 270
14.1.1设定表格框线的样式 270
14.1.2设定表格框线的宽度 272
14.1.3设定表格框线的颜色 273
14.2美化表单样式 274
14.2.1美化表单中的元素 275
14.2.2美化提交按钮 277
14.2.3美化下拉选单 278
14.3综合案例——製作用户登录页面 279
14.4跟我学上机——製作用户注册页面 281
14.5疑难解惑 284
第15章用CSS3美化网页选单 285
15.1用CSS3美化项目列表 286
15.1.1美化无序列表 286
15.1.2美化有序列表 287
15.1.3美化自定义列表 289
15.1.4製作图片列表 290
15.1.5缩进图片列表 292
15.1.6列表的複合属性 293
15.2用CSS3製作网页选单 294
15.2.1製作无须表格的选单 294
15.2.2製作水平和垂直选单 296
15.3综合案例——模拟soso导航栏 298
15.4跟我学上机——将段落转变成列表 301
15.5疑难解惑 303
第16章用滤镜美化网页元素 305
16.1滤镜概述 306
16.2设定基本滤镜效果 307
16.2.1高斯模糊(blur)滤镜 307
16.2.2明暗度(brightness)滤镜 308
16.2.3对比度(contrast)滤镜 309
16.2.4阴影(drop-shadow)滤镜 310
16.2.5灰度(grayscale)滤镜 311
16.2.6反相(invert)滤镜 312
16.2.7透明度(opacity)滤镜 313
16.2.8饱和度(saturate)滤镜 314
16.2.9深褐色(sepia)滤镜 315
16.3综合案例1——使用複合滤镜效果 316
16.4综合案例2——使用滤镜製作动画
效果 317
16.5跟我学上机——製作色相旋转
(hue-rotate)滤镜 319
16.6疑难解惑 320
第17章CSS3中的动画效果 321
17.1了解过渡效果 322
17.2添加过渡效果 322
17.3了解动画效果 324
17.4添加动画效果 325
17.5了解2D转换效果 327
17.6添加2D转换效果 327
17.6.1添加移动效果 327
17.6.2添加旋转效果 328
17.6.3添加缩放效果 329
17.6.4添加倾斜效果 331
17.7添加3D转换效果 332
17.8综合案例——添加综合过渡效果 334
17.9跟我学上机——添加综合变幻效果 335
17.10疑难解惑 336
第III篇JavaScript动态特效
第18章JavaScript编程基本知识 341
18.1认识JavaScript 342
18.1.1什幺是JavaScript 342
18.1.2JavaScript的特点 342
18.1.3JavaScript与Java的区别 343
18.1.4JavaScript的版本 344
18.2JavaScript基本语法的套用 345
18.2.1注释的套用 345
18.2.2语句的套用 347
18.2.3语句块的套用 347
18.3JavaScript的数据结构 348
18.3.1认识标识符 349
18.3.2认识关键字 349
18.3.3认识常量 349
18.3.4认识变数及其套用 350
18.4JavaScript数据类型的使用 352
18.4.1typeof运算符的使用 352
18.4.2undefined类型的使用 353
18.4.3null类型的使用 354
18.4.4Boolean类型的使用 354
18.4.5Number类型的使用 355
18.4.6String类型的使用 356
18.4.7Object类型的使用 357
18.5JavaScript运算符的使用 357
18.5.1算术运算符 358
18.5.2比较运算符 359
18.5.3位运算符 360
18.5.4逻辑运算符 361
18.5.5条件运算符 362
18.5.6赋值运算符 364
18.5.7运算符的优先权 365
18.6综合案例——一个简单的JavaScript
程式 366
18.7疑难解惑 367
第19章JavaScript的程式控制结构
与语句 369
19.1赋值语句 370
19.2条件判断语句 370
19.2.1if语句 370
19.2.2if-else语句 371
19.2.3if...elseif语句 372
19.2.4if语句的嵌套 373
19.2.5switch语句 374
19.3循环控制语句 376
19.3.1while语句 376
19.3.2do-while语句 377
19.3.3for语句 378
19.4跳转语句 379
19.4.1break语句 379
19.4.2continue语句 380
19.5综合案例——在页面中显示距离
2018年元旦的天数 381
19.6跟我学上机——製作一个简易
乘法表 383
19.7疑难解惑 384
第20章JavaScript中的函式 385
20.1函式的简介 386
20.2调用函式 386
20.2.1函式的简单调用 386
20.2.2在表达式中调用函式 387
20.2.3在事件回响中调用函式 388
20.2.4通过连结调用函式 389
20.3JavaScript中常用的函式 390
20.3.1嵌套函式 390
20.3.2递归函式 390
20.3.3内置函式 392
20.4综合案例——购物简易计算器 399
20.5跟我学上机——製作闪烁图片 401
20.6疑难解惑 402
第21章JavaScript对象编程 403
21.1文档对象模型(DOM) 404
21.1.1文档对象模型(DOM)介绍 404
21.1.2在DOM模型中获得对象 404
21.1.3事件驱动的套用 405
21.2视窗(window)对象 407
21.2.1创建视窗(window) 407
21.2.2创建对话框 409
21.2.3视窗的相关操作 411
21.3文档(document)对象 412
21.3.1文档属性的套用 412
21.3.2文档中图片的使用 414
21.3.3显示文档中的所有超连结 415
21.4表单对象 417
21.4.1创建form对象 417
21.4.2form对象属性与方法的
套用 417
21.4.3单选按钮与複选框的使用 419
21.4.4下拉选单的使用 420
21.5综合案例——表单注册与表单
验证 421
21.6跟我学上机——省市联动效果 425
21.7疑难解惑 428
第22章JavaScript的内置对象 429
22.1字元串对象 430
22.1.1创建字元串对象的方法 430
22.1.2字元串对象常用属性的
套用 430
22.1.3字元串对象常用方法的
套用 431
22.2数学对象 433
22.2.1创建Math对象的方法 433
22.2.2数学对象属性的套用 434
22.2.3数学对象方法的使用 435
22.3日期对象 437
22.3.1创建日期对象 437
22.3.2日期对象常用方法的套用 438
22.3.3日期间的运算 440
22.4数组对象 441
22.4.1创建数组对象 441
22.4.2数组对象属性的套用 442
22.4.3数组对象常用方法的套用 444
22.5综合案例——製作网页随机
验证码 448
22.6跟我学上机——动态显示当前
时间 450
22.7疑难解惑 452
第23章HTML5、CSS3和JavaScript
的综合套用 453
23.1JavaScript在HTML中的使用 454
23.1.1在HTML网页头中嵌入
JavaScript代码 454
23.1.2在HTML网页中嵌入
JavaScript代码 455
23.1.3在HTML网页的元素事件中
嵌入JavaScript代码 456
23.1.4在HTML中调用已经存在的
JavaScript档案 457
23.1.5通过JavaScript伪URL引入
JavaScript脚本代码 458
23.2JavaScript与CSS3的结合使用 459
23.2.1动态添加样式 459
23.2.2动态改变样式 460
23.2.3动态定位网页元素 462
23.2.4设定网页元素的显示
与隐藏 464
23.3HTML5、CSS3和JavaScript的搭配
套用 465
23.3.1设定左右移动的图片 465
23.3.2製作颜色选择器 468
23.3.3製作跑马灯效果 470
23.4综合案例——製作树形导航选单 472
23.5跟我学上机——製作滚动的选单 477
23.6疑难解惑 479
第IV篇综合案例实战
第24章製作企业门户类网页 483
24.1构思布局 484
24.1.1设计分析 484
24.1.2排版架构 484
24.2内容设计 485
24.2.1使用JavaScript技术实现Logo
与导航选单 485
24.2.2Banner区 486
24.2.3资讯区 487
24.2.4版权资讯 489
24.3设定连结 490
24.4疑难解惑 490
第25章製作线上购物类网页 491
25.1整体布局 492
25.1.1设计分析 492
25.1.2排版架构 492
25.2模组分割 493
25.2.1Logo与导航区 493
25.2.2Banner与资讯区 495
25.2.3产品类别区域 496
25.2.4页脚区域 498
25.3设定连结 498
25.4疑难解惑 498
第26章移动设备类型网站开发 499
26.1网站设计分析 500
26.2网站结构分析 500
26.3网站主页面的製作 501
26.4网站成品预览 503
26.5疑难解惑 508