网页设计与制作案例教程（HTML5+CSS3）

图书标准信息

• 作者 徐洪亮
• 出版社 电子工业出版社
• 出版时间 2018-10
• 版次 1
• ISBN 9787121349560
• 定价 48.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸

【内容简介】

全书共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.1  HTML语言的概念 / 24

2.2.2  HTML文档的基本结构 / 24

2.3  基础项目2：制作“我的空间”网页 / 27

2.4  知识库：HTML标签分类及常见HTML标签 / 29

2.4.1  HTML标签分类 / 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.1  CSS语言的概念 / 45

3.2.2  CSS语言的基本结构和注释 / 45

3.2.3  CSS书写顺序及规范 / 46

3.3  基础项目2：制作“电影资讯”网页 / 48

3.4  知识库：CSS样式表的引入及选择器的使用 / 53

3.4.1  CSS样式表的引入 / 53

3.4.2  CSS选择器的使用 / 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.3  CSS网页元素的长度单位 / 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.2  CSS常用图像样式 / 93

5.2.3  图像映射 / 96

5.3  基础项目2：制作“少年中国说”网页 / 98

5.4  知识库：CSS背景样式 / 102

5.4.1  背景颜色样式 / 102

5.4.2  背景图像样式 / 102

5.4.3  CSS雪碧图 / 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.1  HTML列表 / 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.3  box-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.1  float属性 / 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.1  CSS定位属性 / 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