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

全书共14章，分为基础篇、技能篇、布局篇和应用篇。基础篇主要内容包括：网页基础、HTML语言基础、CSS样式基础。技能篇中主要介绍使用CSS设置文字样式、图像样式、列表样式、表格样式以及表单样式。布局篇中详细讲解了使用CSS+DIV布局网页的三种基本方法：流布局、浮动布局和定位布局。很后，在应用篇中给出了两个具有很强实用性的综合网站案例。

徐洪亮是北京信息管理学校的骨干教师，有丰富的教学及教研经验。本书布局篇中详细讲解了使用CSS DIV布局网页的三种基本方法：流布局、浮动布局和定位布局。很后，在应用篇中给出了两个具有很强实用性的综合网站案例。

基础篇
第1章网页基础/1
1.1基础项目1：制作“我为自己代言”网页/1
1.2知识库：网页基础知识/5
1.2.1网站开发流程/5
1.2.2网页常用术语/7
1.2.3网页文件命名规范/9
1.3基础项目2：制作“陈欧介绍”网页/10
1.4知识库：Dreamweaver CC 2018的工作界面和使用技巧/13
1.4.1启动Dreamweaver CC 2018/13
1.4.3更改Dreamweaver CC 2018默认界面和布局/18
1.4.4使用Dreamweaver CC 2018的几个小技巧/20
1.5提高项目：制作“青春颂歌”网页/21
1.6拓展项目：制作“支付”网页/21
知识检测1/22
第2章HTML语言基础/23
2.1基础项目1：制作“走向远方”网页/23
2.2知识库：HTML语言的概念和基本结构/24
2.2.1HTML语言的概念/24
2.2.2HTML文档的基本结构/24
2.3基础项目2：制作“我的空间”网页/27
2.4知识库：HTML标签分类及常见HTML标签/29
2.4.1HTML标签分类/29
2.4.2常见HTML标签/30
2.5提高项目：制作“深海骑兵”网页/38
2.6拓展项目：制作“菜鸟加油”网页/39
知识检测2/39
第3章CSS样式基础/40
3.1基础项目1：制作“古诗词欣赏”网页/40
3.2知识库：CSS语言的概念和基本结构/45
3.2.1CSS语言的概念/45
3.2.2CSS语言的基本结构和注释/45
3.2.3CSS书写顺序及规范/46
3.3基础项目2：制作“电影资讯”网页/48
3.4知识库：CSS样式表的引入及选择器的使用/53
3.4.1CSS样式表的引入/53
3.4.2CSS选择器的使用/55
3.5提高项目：制作“美味生活”网页/62
3.6拓展项目：制作“马云创业语录”网页/63
知识检测3/64
技能篇
第4章使用CSS设置文字样式/65
4.1基础项目1：制作“古人书房佳联赏析”网页/65
4.2知识库：CSS文字样式/68
4.2.1文字样式常用属性/68
4.2.2网页安全色/72
4.2.3CSS网页元素的长度单位/73
4.3基础项目2：制作“创业人物”网页/74
4.4知识库：CSS段落样式与元素特性/79
4.4.1段落样式常用属性/79
4.4.2关于<span>标签/83
4.4.3清除行内块元素默认空白间隙技巧/83
4.5提高项目：制作“诗词鉴赏”网页/85
4.6拓展项目：制作“智能交通”网页/86
知识检测4/87
第5章使用CSS设置图像样式/88
5.1基础项目1：制作“李彦宏―众里寻他千百度”网页/88
5.2知识库：CSS图像样式/92
5.2.1网页图像格式/92
5.2.2CSS常用图像样式/93
5.2.3图像映射/96
5.3基础项目2：制作“少年中国说”网页/98
5.4知识库：CSS背景样式/102
5.4.1背景颜色样式/102
5.4.2背景图像样式/102
5.4.3CSS雪碧图/104
5.5提高项目：制作“低碳生活从我做起”网页/107
5.6拓展项目：制作“春节民俗”网页/108
知识检测5/108
第6章使用CSS设置列表样式/110
6.1基础项目1：制作简单横向导航栏/110
6.2基础项目2：制作简单纵向导航栏/114
6.3基础项目3：制作下拉菜单式导航栏/116
6.4基础项目4：制作热门旅游攻略列表/121
6.5基础项目5：制作热门歌手榜/125
6.6知识库：CSS常用列表样式/129
6.6.1HTML列表/130
6.6.2常用CSS列表样式/131
6.7提高项目：制作“童书畅销榜”网页/132
6.8拓展项目：制作“商品列表”网页/133
知识检测6/133
第7章使用CSS设置表格样式/135
7.1基础项目1：制作“通讯录”表格/135
7.2知识库：表格的HTML标签和常用样式/138
7.2.1表格的HTML标签/138
7.2.2表格的常用CSS样式/139
7.3基础项目2：制作“百度日历”网页/140
7.4知识库：单元格的合并与拆分/152
7.5提高项目：制作“NBA常规赛得分表”网页/153
7.6拓展项目：制作“热门景点排行榜”网页/154
知识检测7/154
第8章使用CSS设置表单样式/155
8.1基础项目1：制作“网易邮箱注册”网页/155
8.2知识库：常用表单元素类型及结构/170
8.2.1表单标签/170
8.2.2常用表单元素/171
8.2.3表单按钮/173
8.3基础项目2：制作“速递网在线下单”网页/175
8.4知识库：域集和组/183
8.4.1域集/183
8.4.2组/183
8.5提高项目：制作电商网站“商家入驻”网页/184
8.6拓展项目：制作“快乐数独”网页/186
知识检测8/187
第9章盒子模型/188
9.1基础项目：根据布局图创建简单的盒子模型页面/188
9.2知识库：盒子模型的理解与应用/190
9.2.1盒子模型的概念/190
9.2.2盒子模型的计算/191
9.2.3box-sizing属性介绍/192
9.2.4伪元素/193
9.2.5实际开发中遇到的和盒子模型相关的应用及小问题/196
9.3拓展项目：使用盒子模型创建网页布局/199
知识检测9/199
第10章CSS标准流布局/201
10.1基础项目：制作“谷穗儿机构”网页/201
10.1.1对页面进行整体布局/202
10.1.2制作页头部分/203
10.1.3制作内容部分/205
10.1.4制作页脚部分/209
10.2知识库：标准流的概念及注意事项/210
10.2.1什么是标准流布局/210
10.2.2标准流布局中垂直外边距的合并问题/210
10.3提高项目：制作“创优翼UI设计学院”网页/212
10.4拓展项目：制作“简历工厂”网页/213
知识检测10/214
第11章CSS浮动布局/215
11.1基础项目：制作“创优翼网站首页”/215
11.1.1对页面进行整体布局/216
11.1.2制作页头和今日特讯部分/218
11.1.3制作学员活动部分/221
11.1.4制作新闻中心、热门活动和就业信息板块/224
11.1.5制作页脚部分/233
11.2知识库：浮动布局的原理及应用技巧/233
11.2.1float属性/233
11.2.2浮动布局的原理/234
11.2.3浮动布局技巧/237
11.2.4消除浮动布局带来的不良影响/238
11.3提高项目：制作“学校网站新闻列表页”/241
11.4拓展项目：制作“咔嚓摄影网”主页/244
知识检测11/244
第12章CSS定位布局/246
12.1基础项目：制作“精品购物网”首页/246
12.1.1对页面进行整体布局/247
12.1.2制作主体内容区/250
12.1.3制作侧边导航栏/256
12.2知识库：定位的原理及应用技巧/259
12.2.1CSS定位属性/259
12.2.2相对定位/260
12.2.3绝对定位/261
12.2.4元素的堆叠顺序、溢出和剪裁/262
12.3提高项目：制作“会当凌绝顶―小说投稿”网页/265
12.4拓展项目：制作“创意照片墙”网页/269
知识检测12/270
第13章综合应用1——制作新大陆集团网站/271
13.1制作网站首页/271
13.1.1对网页进行整体布局/272
13.1.2制作页头部分/274
13.1.3制作banner部分/279
13.1.4制作主体内容部分/283
13.1.5制作页脚部分/300
13.1.6制作固定广告招聘模块/301
13.2制作网站一级链接页“合作与商机”页面/301
13.2.1对网页进行整体布局/301
13.2.2制作banner部分/303
13.2.3制作主体内容部分/304
13.3制作网站二级链接页“合作与商机―>软件公司”页面/311
13.3.1对网页进行整体布局/312
13.3.2制作主体内容右侧部分/313
第14章综合应用2——制作麦宠物网站/316
14.1制作网站首页/316
14.1.1对网页进行整体布局/317
14.1.2制作页头部分/319
14.1.3制作banner部分/326
14.1.4制作“本期星宠”板块/329
14.1.5制作“萌宠每日推荐”板块/334
14.1.6制作“更多萌宠推荐”板块/343
14.1.7制作广告条板块/347
14.1.8制作页脚板块/347
14.1.9制作右侧固定导航栏板块/350
14.2制作网站一级链接页“星宠趣事”页面/352
14.2.1对网页进行整体布局/352
14.2.2制作星宠banner板块/355
14.2.3制作分类选项卡/356
14.2.4制作“热门推荐”板块/357
14.2.5制作“汪星人”“喵星人”“其他”三个板块的结构和样式/361
14.3制作网站二级链接页“星宠趣事详情”页面/366
14.3.1对网页进行整体布局/367
14.3.2制作趣事详情板块/368
14.3.3制作Rexie的更多分享板块/372
14.3.4制作右侧商品广告栏板块/375