网页设计与制作案例教程(HTML5+CSS3)(第2版)

基 础 篇
第1章 网页基础 / 1
1．1 基础项目1：制作“念奴娇??赤壁怀古”网页 / 1
1．2 知识库：网页基础知识 / 5
1．2．1 网站开发流程 / 5
1．2．2 网页常用术语 / 8
1．2．3 网页文件命名规范 / 10
1．3 基础项目2：制作“苏轼介绍”网页 / 11
1．4 知识库：Dreamweaver 2021的工作界面和使用技巧 / 14
1．4．1 启动Dreamweaver 2021 / 14
1．4．2 认识Dreamweaver 2021工作界面 / 17
1．4．3 更改Dreamweaver 2021默认界面和布局 / 21
1．4．4 使用Dreamweaver 2021的几个小技巧 / 22
1．5 提高项目：制作“青春颂歌”网页 / 23
1．6 拓展项目：制作“速度滑冰”网页 / 24
知识检测1 / 24
第2章 HTML语言基础 / 26
2．1 基础项目1：制作“走向远方”网页 / 26
2．2 知识库：HTML语言的概念和基本结构 / 27
2．2．1 HTML语言的概念 / 27
2．2．2 HTML文档的基本结构 / 28
2．3 基础项目2：制作“我的空间”网页 / 30
2．4 知识库：HTML标签的分类及常见的HTML标签 / 32
2．4．1 HTML标签的分类 / 32
2．4．2 常见的HTML标签 / 34
2．5 提高项目：制作“垃圾分类 人人有责”网页 / 43
2．6 拓展项目：制作“菜鸟加油”网页 / 44
知识检测2 / 44
第3章 CSS样式基础 / 45
3．1 基础项目1：制作“古诗词欣赏”网页 / 45
3．2 知识库：CSS语言的概念和基本结构 / 50
3．2．1 CSS语言的概念 / 50
3．2．2 CSS语言的基本结构和注释 / 50
3．2．3 CSS书写顺序及规范 / 51
3．3 基础项目2：制作“服务奥运，精彩人生”网页 / 54
3．4 知识库：CSS样式表的引入及选择器的使用 / 58
3．4．1 CSS样式表的引入 / 58
3．4．2 CSS选择器的使用 / 61
3．5 提高项目：制作“女排精神”网页 / 68
3．6 拓展项目：制作“琴棋书画”网页 / 69
知识检测3 / 70
技 能 篇
第4章 使用CSS设置文字样式 / 71
4．1 基础项目1：制作“古人书房佳联赏析”网页 / 71
4．2 知识库：CSS文字样式 / 75
4．2．1 文字样式常用属性 / 75
4．2．2 网页安全色 / 80
4．2．3 CSS网页元素的长度单位 / 80
4．3 基础项目2：制作“中国名花”网页 / 82
4．4 知识库：CSS段落样式与元素特性 / 87
4．4．1 段落样式常用属性 / 87
4．4．2 关于＜span＞标签 / 92
4．4．3 清除行内块元素默认空白间隙技巧 / 92
4．5 提高项目：制作“诗词鉴赏”网页 / 94
4．6 拓展项目：制作“古典园林”网页 / 96
知识检测4 / 97
第5章 使用CSS设置图像样式 / 98
5．1 基础项目1：制作“茶文化”网页 / 98
5．2 知识库：CSS图像样式 / 102
5．2．1 网页图像格式 / 102
5．2．2 常用CSS图像样式 / 103
5．2．3 图像映射 / 107
5．3 基础项目2：制作“少年中国说”网页 / 109
5．4 知识库：CSS背景样式 / 113
5．4．1 背景颜色样式 / 113
5．4．2 背景图像样式 / 114
5．4．3 CSS雪碧图 / 116
5．5 提高项目：制作“低碳生活 从我做起”网页 / 119
5．6 拓展项目：制作“春节民俗”网页 / 120
知识检测5 / 121
第6章 使用CSS设置列表样式 / 122
6．1 基础项目1：制作“特色北京”横向导航栏 / 122
6．2 基础项目2：制作“特色北京”纵向导航栏 / 125
6．3 基础项目3：制作“八大菜系”下拉菜单式导航栏 / 127
6．4 基础项目4：制作“青少年文明公约”网页 / 132
6．5 基础项目5：制作“2020年感动中国十大人物”网页 / 136
6．6 知识库：CSS常用列表样式 / 141
6．6．1 HTML列表 / 141
6．6．2 常用CSS列表样式 / 143
6．7 提高项目：制作“悦读图书榜”网页 / 144
6．8 拓展项目：制作“环保在行动”网页 / 145
知识检测6 / 145
第7章 使用CSS设置表格样式 / 147
7．1 基础项目1：制作“神舟系列飞船发射情况表”网页 / 147
7．2 知识库：表格的HTML标签和常用样式 / 150
7．2．1 表格的HTML标签 / 150
7．2．2 表格的常用CSS样式 / 151
7．3 基础项目2：制作“青铜之美”网页 / 153
7．4 知识库：单元格的合并与拆分 / 158
7．5 提高项目：制作“中国二十四节气―春天篇”网页 / 159
7．6 拓展项目：制作“中国十大名胜古迹”网页 / 160
知识检测7 / 161
第8章 使用CSS设置表单样式 / 162
8．1 基础项目1：制作“邮箱注册”网页 / 162
8．2 知识库：常用表单元素类型及结构 / 178
8．2．1 表单标签 / 178
8．2．2 常用表单元素 / 179
8．2．3 表单按钮 / 182
8．3 基础项目2：制作“速递网――在线下单”网页 / 184
8．4 知识库：域集和组 / 192
8．4．1 域集 / 192
8．4．2 组 / 193
8．5 提高项目：制作“商家入驻”网页 / 194
8．6 拓展项目：制作“快乐数独”网页 / 197
知识检测8 / 197
布 局 篇
第9章 盒子模型 / 199
9．1 基础项目：根据布局图创建简单的盒子模型页面 / 199
9．2 知识库：盒子模型的理解与应用 / 201
9．2．1 盒子模型的概念 / 201
9．2．2 盒子模型的计算 / 202
9．2．3 box-sizing属性 / 203
9．2．4 伪元素 / 204
9．2．5 实际开发中遇到的和盒子模型相关的问题及应用 / 207
9．3 提高项目：创建三列布局的盒子模型 / 210
9．4 拓展项目：制作“专业宣传”网页 / 211
知识检测9 / 212
第10章 CSS标准流布局 / 213
10．1 基础项目：制作“谷穗儿机构”网页 / 213
10．1．1 对页面进行整体布局 / 214
10．1．2 制作页头部分 / 215
10．1．3 制作内容部分 / 217
10．1．4 制作页脚部分 / 222
10．2 知识库：标准流布局的概念及注意事项 / 223
10．2．1 标准流布局的概念 / 223
10．2．2 标准流布局中的注意事项 / 223
10．3 提高项目：制作“UI设计学院――博客”网页 / 225
10．4 拓展项目：制作“简历工厂”网页 / 227
知识检测10 / 228
第11章 CSS浮动布局 / 229
11．1 基础项目：制作“UI设计院”网站首页 / 229
11．1．1 对页面进行整体布局 / 230
11．1．2 制作页头和今日特讯部分 / 232
11．1．3 制作学员活动部分 / 235
11．1．4 制作新闻中心、热门活动和就业信息板块 / 239
11．1．5 制作页脚部分 / 247
11．2 知识库：浮动布局的原理及应用技巧 / 248
11．2．1 float属性 / 248
11．2．2 浮动布局的原理 / 249
11．2．3 浮动布局技巧 / 251
11．2．4 消除浮动布局带来的不良影响 / 253
11．3 提高项目：制作“学校网站新闻列表”网页 / 256
11．4 拓展项目：制作“咔嚓摄影网”网页 / 259
知识检测11 / 260
第12章 CSS定位布局 / 261
12．1 基础项目：制作“精品购物网”首页 / 261
12．1．1 对页面进行整体布局 / 262
12．1．2 制作主体内容区 / 265
12．1．3 制作侧边导航栏 / 272
12．2 知识库：定位的原理及应用技巧 / 274
12．2．1 CSS定位属性 / 274
12．2．2 相对定位 / 275
12．2．3 绝对定位 / 277
12．2．4 元素的堆叠顺序、溢出和剪裁 / 278
12．3 提高项目：制作“会当凌绝顶―小说投稿”网页 / 281
12．4 拓展项目：制作“创意照片墙”网页 / 285
知识检测12 / 286
应 用 篇
第13章 综合应用1――制作新大陆集团网站 / 288
13．1 制作网站首页 / 288
13．1．1 对网页进行整体布局 / 289
13．1．2 制作页头部分 / 291
13．1．3 制作banner部分 / 296
13．1．4 制作主体内容部分 / 300
13．1．5 制作页脚部分 / 317
13．2 制作网站一级链接页“合作与商机”页面 / 318
13．2．1 对网页进行整体布局 / 319
13．2．2 制作banner部分 / 321
13．2．3 制作主体内容部分 / 321
13．3 制作网站二级链接页―“软件公司”页面 / 328
13．3．1 对网页进行整体布局 / 329
13．3．2 制作主体内容右侧部分 / 331
第14章 综合应用2――制作麦宠物网站 / 334
14．1 制作网站首页 / 334
14．1．1 对网页进行整体布局 / 335
14．1．2 制作页头部分 / 337
14．1．3 制作banner部分 / 343
14．1．4 制作“本期星宠”板块 / 347
14．1．5 制作“萌宠每日推荐”板块 / 351
14．1．6 制作“更多萌宠推荐”板块 / 361
14．1．7 制作广告条板块 / 366
14．1．8 制作页脚板块 / 366
14．1．9 制作右侧固定导航栏板块 / 369
14．2 制作网站一级链接页“星宠趣事”页面 / 370
14．2．1 对网页进行整体布局 / 372
14．2．2 制作星宠banner板块 / 374
14．2．3 制作分类选项卡 / 375
14．2．4 制作“热门推荐”板块 / 376
14．2．5 制作“汪星人”、“喵星人”、“其他”三个板块的结构和样式 / 381
14．3 制作网站二级链接页“星宠趣事详情”页面 / 385
14．3．1 对网页进行整体布局 / 386
14．3．2 制作“趣事详情”板块 / 388
14．3．3 制作“Rexie的更多分享”板块 / 392
14．3．4 制作“右侧商品广告栏”板块 / 394