《HTML+CSS+JavaScript 网页设计实战》是2017.09.01清华大学出版社出版的图书,图书作者是刘玉红、蒲娟。
基本介绍
- 书名:HTML+CSS+JavaScript 网页设计实战
- 作者:刘玉红、蒲娟
- ISBN:9787302480556
- 定价:78元
- 出版社:清华大学出版社
- 出版时间:2017.09.01
内容简介
本书针对零基础的读者,用实例引导读者深入学习,採取“HTML基础知识→HTML5高级技术→用CSS美化网页→网页布局和JavaScript→综合案例实战”的模式,深入浅出地讲解网页製作的各项技术及实战技能。本书第1篇主要讲解HTML入门知识、网页文档结构、网页中的文本和图像、建立超连结、创建表格和表单等内容;第2篇主要讲解HTML5快速入门、HTML5中的多媒体、使用HTML5绘製图形等内容;第3篇主要讲解CSS概述与基本语法、美化网页字型与段落、美化网页图片、美化网页背景与框线、美化表格和表单样式、美化超连结和滑鼠指针、控制网页导航选单的样式等内容;第4篇主要讲解CSS+DIV盒子的浮动与定位、网页布局剖析与製作、JavaScript和jQuery、经典的网页动态特效案例等;
目录
目录
第1篇 HTML基础知识
第1章 HTML入门知识
1.1 网页与网站 4
1.1.1 什幺是网页与网站 4
1.1.2 网页基本构成元素 5
1.2 HTML的基本概念 6
1.2.1 什幺是HTML 6
1.2.2 HTML的发展历程 6
1.2.3 HTML页面的整体结构 7
1.3 使用浏览器查看源档案 8
1.4 大神解惑 9
1.5 跟我练练手 9
第2章 网页文档结构
2.1 HTML档案基本结构 12
2.2 HTML5基本标记详解 12
2.2.1 文档类型说明 12
2.2.2 HTML标记 13
2.2.3 头标记 13
2.2.4 网页的主体标记body 15
2.2.5 页面注释标记 16
2.3 HTML5语法的变化 16
2.3.1 标记不再区分大小写 17
2.3.2 允许属性值不使用引号 17
2.3.3 允许部分属性值的属性省略 17
2.4 网页档案的编写方法 18
2.4.1 使用记事本手工编写网页 18
2.4.2 使用DreamweaverCC编写HTML档案 19
2.5 符合W3C标準的HTML5网页 20
2.6 大神解惑 21
2.7 跟我练练手 22
第3章 网页中的文本和图像
3.1 在网页中添加文本 24
3.1.1 普通文本的添加 24
3.1.2 特殊字元文本的添加 24
3.1.3 特殊文本的添加 26
3.2 文本排版 27
3.2.1 换行标记 27
3.2.2 段落标记 28
3.2.3 标题标记 28
3.3 文字列表 29
3.3.1 建立无序列表 29
3.3.2 建立有序列表 30
3.3.3 建立不同类型的无序列表 30
3.3.4 建立不同类型的有序列表 31
3.3.5 建立嵌套列表 31
3.3.6 自定义列表 32
3.4 网页中的图像 32
3.4.1 插入图像 32
3.4.2 设定图像的宽度和高度 34
3.4.3 设定图像的提示文字 35
3.4.4 将图片设定为网页背景 36
3.4.5 排列图像 36
3.5 图文并茂房屋装饰装修网页 37
3.6 线上购物网站产品展示效果 38
3.7 大神解惑 39
3.8 跟我练练手 40
第4章 建立超连结
4.1 网页超连结的概念 42
4.1.1 什幺是网页超连结 42
4.1.2 超连结中的URL 42
4.1.3 超连结的URL类型 43
4.2 建立网页超连结 43
4.2.1 创建超文本连结 43
4.2.2 创建图片连结 44
4.2.3 创建下载连结 46
4.2.4 使用相对路径和绝对路径 46
4.2.5 设定以新视窗显示超连结页面 47
4.2.6 设定电子邮件连结 48
4.3 浮动框架 49
4.4 精确定位热点区域 50
4.5 使用锚连结製作电子书阅读网页 54
4.6 大神解惑 56
4.7 跟我练练手 56
第5章 创建表格和表单
5.1 表格的基本结构 58
5.2 创建表格 59
5.2.1 创建普通表格 59
5.2.2 创建带有标题的表格 60
5.2.3 定义表格的框线类型 60
5.2.4 定义表格的表头 61
5.2.5 设定表格背景 61
5.2.6 设定单元格背景 62
5.2.7 合併单元格 63
5.2.8 排列单元格中的内容 66
5.2.9 设定表格的行高与列宽 66
5.3 创建完整的表格 67
5.4 认识表单 68
5.5 表单基本元素的使用 69
5.5.1 单行文本输入框 69
5.5.2 多行文本输入框 70
5.5.3 密码域 70
5.5.4 单选按钮 71
5.5.5 複选框 72
5.5.6 下拉选择框 73
5.5.7 普通按钮 73
5.5.8 提交按钮 74
5.5.9 重置按钮 75
5.6 表单高级元素的使用 75
5.6.1 url属性的套用 76
5.6.2 email属性的套用 76
5.6.3 date和time属性的套用 76
5.6.4 number属性的套用 77
5.6.5 range属性的套用 78
5.6.6 required属性的套用 79
5.7 创建用户反馈表单 79
5.8 製作商品报价单 81
5.9 大神解惑 83
5.10 跟我练练手 84
第2篇 HTML5高级技术
第6章 HTML5快速入门
6.1 各大浏览器与HTML5的兼容性 88
6.2 检测浏览器是否支持HTML标记 88
6.3 语法变化和标记 89
6.3.1 HTML5的语法变化 89
6.3.2 HTML5中的标记方法 89
6.3.3 版本兼容性 90
6.4 新增的元素和废除的元素 91
6.4.1 新增的结构元素 92
6.4.2 新增的input元素类型 94
6.4.3 新增的其他元素 94
6.4.4 废除的元素 96
6.5 新增的属性和废除的属性 97
6.5.1 新增的属性 97
6.5.2 废除的属性 101
6.6 新增全局属性 103
6.6.1 contentEditable属性 103
6.6.2 designMode属性 103
6.6.3 hidden属性 104
6.6.4 spellcheck属性 104
6.6.5 tabIndex属性 104
6.7 大神解惑 106
6.8 跟我练练手 106
第7章 HTML5中的多媒体
7.1 网页音频标记 108
7.1.1 audio标记概述 108
7.1.2 audio标记的属性 108
7.1.3 音频解码器 109
7.1.4 浏览器对audio标记的支持情况 109
7.2 网页视频标记 109
7.2.1 video标记概述 109
7.2.2 video标记属性 110
7.2.3 视频解码器 110
7.2.4 浏览器对video标记的支持情况 111
7.3 添加网页音频档案 111
7.3.1 设定背景音乐 111
7.3.2 设定音乐循环播放 112
7.4 添加网页视频档案 112
7.4.1 为网页添加视频档案 112
7.4.2 设定自动运行 113
7.4.3 设定视频档案的循环播放 114
7.4.4 设定视频视窗的高度与宽度 114
7.5 添加网页滚动文字 115
7.5.1 滚动文字标记 115
7.5.2 滚动方向属性 116
7.5.3 滚动方式属性 117
7.5.4 滚动速度属性 117
7.5.5 滚动延迟属性 118
7.5.6 滚动循环属性 119
7.5.7 滚动範围属性 119
7.5.8 滚动背景颜色属性 120
7.5.9 滚动空间属性 121
7.6 大神解惑 122
7.7 跟我练练手 122
第8章 使用HTML5绘製图形
8.1 什幺是canvas 124
8.2 绘製基本形状 125
8.2.1 绘製矩形 125
8.2.2 绘製圆形 126
8.2.3 使用moveTo与lineTo绘製直线 127
8.2.4 使用bezierCurveTo绘製贝塞尔曲线 128
8.3 绘製渐变图形 130
8.3.1 绘製线性渐变 130
8.3.2 绘製径向渐变 132
8.4 绘製变形图形 133
8.4.1 变换原点坐标 133
8.4.2 图形缩放 134
8.4.3 旋转图形 135
8.5 绘製其他样式的图形 136
8.5.1 图形组合 136
8.5.2 绘製带阴影的图形 138
8.5.3 绘製文字 139
8.6 使用图像 141
8.6.1 绘製图像 141
8.6.2 图像平铺 142
8.6.3 图像裁剪 143
8.6.4 像素处理 145
8.7 图形的保存与恢复 147
8.7.1 保存与恢复图形状态 147
8.7.2 保存档案 148
8.8 绘製火柴棒人物 149
8.9 绘製商标 151
8.10 大神解惑 153
8.11 跟我练练手 154
第3篇 用CSS美化网页
第9章 CSS概述与基本语法
9.1 CSS概述 158
9.1.1 CSS功能 158
9.1.2 浏览器与CSS的兼容性 158
9.1.3 CSS基础语法 159
9.1.4 CSS常用单位 159
9.2 编辑和浏览CSS 164
9.2.1 手工编写CSS 164
9.2.2 用Dreamweaver编写CSS 165
9.3 在HTML中使用CSS的方法 167
9.3.1 行内样式 167
9.3.2 内嵌样式 168
9.3.3 连结样式 169
9.3.4 导入样式 170
9.3.5 优先权问题 171
9.4 CSS的常用选择器 172
9.4.1 标记选择器 173
9.4.2 类选择器 173
9.4.3 ID选择器 174
9.4.4 全局选择器 175
9.4.5 组合选择器 175
9.4.6 继承选择器 176
9.4.7 伪类选择器 177
9.5 选择器声明 178
9.5.1 集体声明 178
9.5.2 多重嵌套声明 179
9.6 製作炫彩网站Logo 179
9.7 製作学生信息统计表 182
9.8 大神解惑 183
9.9 跟我练练手 184
第10章 美化网页字型与段落
10.1 美化网页文字 186
10.1.1 设定文字的字型 186
10.1.2 设定文字的字号 187
10.1.3 设定字型风格 188
10.1.4 设定加粗字型 189
10.1.5 将小写字母转换为大写字母 190
10.1.6 设定字型的複合属性 191
10.1.7 设定字型颜色 192
10.2 设定文本的高级样式 193
10.2.1 设定文本阴影效果 193
10.2.2 设定文本溢出效果 194
10.2.3 设定文本的控制换行 195
10.2.4 保持字型尺寸不变 196
10.3 美化网页中的段落 197
10.3.1 设定单词之间的间隔 197
10.3.2 设定字元之间的间隔 198
10.3.3 设定文字的修饰效果 199
10.3.4 设定垂直对齐方式 200
10.3.5 转换文本的大小写 202
10.3.6 设定文本的水平对齐方式 203
10.3.7 设定文本的缩进效果 205
10.3.8 设定文本的行高 205
10.3.9 文本的空白处理 206
10.3.10 文本的反排 208
10.4 设定网页标题 209
10.5 製作新闻页面 211
10.6 大神解惑 212
10.7 跟我练练手 212
第11章 美化网页图片
11.1 图片缩放 214
11.1.1 通过描述标记width和height缩放图片 214
11.1.2 使用CSS中的max-width和
max-height缩放图片 214
11.1.3 使用CSS中的width和height缩放图片 215
11.2 设定图片的对齐方式 216
11.2.1 设定图片横向对齐 216
11.2.2 设定图片纵向对齐 217
11.3 图文混排 219
11.3.1 设定文字环绕效果 219
11.3.2 设定图片与文字的间距 220
11.4 製作学校宣传单 221
11.5 製作简单图文混排网页 223
11.6 大神解惑 225
11.7 跟我练练手 225
第12章 美化网页背景与框线
12.1 使用CSS美化背景 228
12.1.1 设定背景颜色 228
12.1.2 设定背景图片 229
12.1.3 背景图片重複 230
12.1.4 背景图片随文档滚动 231
12.1.5 背景图片位置 233
12.1.6 背景图片大小 234
12.1.7 背景显示区域 235
12.1.8 背景图像裁剪区域 237
12.1.9 背景複合属性 237
12.2 使用CSS美化框线 238
12.2.1 设定框线样式 238
12.2.2 设定框线颜色 239
12.2.3 设定框线线宽 240
12.2.4 设定框线複合属性 242
12.3 设定框线圆角效果 242
12.3.1 设定圆角框线 243
12.3.2 指定两个圆角半径 243
12.3.3 绘製四个不同的圆角框线 244
12.3.4 绘製不同种类的框线 245
12.4 製作简单公司主页 246
12.5 製作简单生活资讯主页 250
12.6 大神解惑 251
12.7 跟我练练手 252
第13章 美化表格和表单样式
13.1 美化表格样式 254
13.1.1 设定表格框线样式 254
13.1.2 设定表格框线宽度 255
13.1.3 设定表格背景颜色 256
13.2 美化表单样式 257
13.2.1 美化表单中的元素 257
13.2.2 美化提交按钮 259
13.2.3 美化下拉列表框 260
13.3 製作用户登录页面 262
13.4 製作用户注册页面 264
13.5 大神解惑 266
13.6 跟我练练手 266
第14章 美化超连结和滑鼠指针
14.1 美化超连结 268
14.1.1 改变超连结基本样式 268
14.1.2 设定带有提示信息的超连结 269
14.1.3 设定超连结的背景图 270
14.1.4 设定超连结的按钮效果 271
14.2 美化滑鼠特效 272
14.2.1 控制滑鼠箭头 272
14.2.2 设定滑鼠变幻式超连结 273
14.2.3 设定网页页面滚动条 274
14.3 图片版本超连结 276
14.4 滑鼠特效实例 278
14.5 製作一个简单的导航栏 280
14.6 大神解惑 281
14.7 跟我练练手 282
第15章 控制网页导航选单的样式
15.1 使用CSS美化项目列表 284
15.1.1 美化无序列表 284
15.1.2 美化有序列表 285
15.1.3 美化自定义列表 286
15.1.4 製作图片列表 287
15.1.5 缩进图片列表 288
15.1.6 列表複合属性 289
15.2 使用CSS製作网页选单 290
15.2.1 製作无序列表的选单 290
15.2.2 製作水平样式选单 292
15.3 模拟SOSO导航栏 294
15.4 将段落转变成列表 297
15.5 大神解惑 299
15.6 跟我练练手 300
第4篇 网页布局和JavaScript
第16章 CSS+DIV盒子的浮动与定位
16.1 定义DIV 304
16.1.1 什幺是DIV 304
16.1.2 创建DIV 304
16.2 盒子的定位 305
16.2.1 静态定位 305
16.2.2 相对定位 306
16.2.3 绝对定位 307
16.2.4 固定定位 308
16.2.5 盒子的浮动 308
16.3 其他CSS布局定位方式 310
16.3.1 溢出(overflow)定位 310
16.3.2 隐藏(visibility)定位 311
16.3.3 z-index空间定位 313
16.4 多列布局 314
16.4.1 设定列宽度 314
16.4.2 设定列数 316
16.4.3 设定列间距 317
16.4.4 设定列框线样式 318
16.5 定位网页布局样式 320
16.6 大神解惑 323
16.7 跟我练练手 324
第17章 网页布局剖析与製作
17.1 固定宽度网页剖析与布局 326
17.1.1 网页单列布局模式 326
17.1.2 网页1-2-1型布局模式 328
17.1.3 网页1-3-1型布局模式 330
17.2 自动缩放网页1-2-1型布局模式 333
17.2.1 1-2-1等比例变宽布局 333
17.2.2 1-2-1单列变宽布局 334
17.3 自动缩放网页1-3-1型布局模式 335
17.3.1 1-3-1三列宽度等比例布局 335
17.3.2 1-3-1单侧列宽度固定的变宽布局 335
17.3.3 1-3-1中间列宽度固定的变宽布局 337
17.3.4 1-3-1双侧列宽度固定的变宽布局 339
17.3.5 1-3-1中列和左侧列宽度固定的
变宽布局 342
17.4 分列布局背景色的使用 344
17.4.1 设定固定宽度布局的列背景色 344
17.4.2 设定特殊宽度变化布局的列背景色 346
17.4.3 设定单列宽度变化布局的列背景色 347
17.4.4 设定多列等比例宽度变化布局的
列背景 349
17.5 大神解惑 352
17.6 跟我练练手 352
第18章 JavaScript和jQuery
18.1 认识JavaScript 354
18.1.1 什幺是JavaScript 354
18.1.2 在HTML网页头中嵌入
JavaScript代码 354
18.2 JavaScript对象与函式 355
18.2.1 认识对象 356
18.2.2 认识函式 356
18.3 JavaScript事件 358
18.3.1 事件与事件处理概述 358
18.3.2 JavaScript的常用事件 359
18.4 认识jQuery 360
18.4.1 jQuery能做什幺 361
18.4.2 jQuery的配置 361
18.5 jQuery选择器 362
18.5.1 jQuery的工厂函式 362
18.5.2 常见选择器 363
18.6 大神解惑 364
18.7 跟我练练手 365
第19章 经典的网页动态特效案例
19.1 文字特效 368
19.1.1 打字效果的文字 368
19.1.2 文字升降特效 370
19.1.3 跑马灯效果 372
19.2 图片特效 373
19.2.1 闪烁图片 373
19.2.2 左右移动的图片 375
19.3 网页选单特效 378
19.3.1 向上滚动选单 378
19.3.2 树形选单 379
19.4 滑鼠特效 384
19.4.1 滑鼠的图片跟蹤 384
19.4.2 滑鼠的文字跟蹤 385
19.5 时间特效 387
19.5.1 时钟特效 387
19.5.2 製作简单日曆表 392
19.6 页面特效 395
19.6.1 网页自动滚屏 395
19.6.2 颜色选择器 398
19.7 大神解惑 401
19.8 跟我练练手 402
第5篇 综合案例实战
第20章 製作企业门户类网页
20.1 构思布局 406
20.1.1 设计分析 406
20.1.2 排版架构 407
20.2 模组分割 408
20.2.1 Logo与导航选单 408
20.2.2 左侧文本介绍 410
20.2.3 右侧导航连结 411
20.2.4 版权资讯 413
20.3 整体调整 414
第21章 製作线上购物类网页
21.1 整体布局 416
21.1.1 设计分析 416
21.1.2 排版架构 417
21.2 模组分割 417
21.2.1 Logo与导航区 417
21.2.2 Banner与资讯区 419
21.2.3 产品类别区域 420
21.2.4 页脚区域 421
第22章 製作移动设备类网页
22.1 网站设计分析 424
22.2 网站结构分析 424
22.3 网站主页面的製作 425
22.4 网站成品预览 427