编辑推荐语

1. “十三五”规划教材； 2.黑马程序员系列教材改版； 3.本书配套丰富的教学资源，包括PPT、教学视频、教学设计、教学大纲、源代码等。 此次改版，在原书的基础上 新了部分案例，增加了HTML5和CSS3新属性的讲解和应用，增加了网页视听技术的应用，主要包括音频、视频的嵌入和动画效果。

内容提要

本书从初学者的角度出发，以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JavaScript进行网页制作的一般技巧。 本书分为8个项目，结合HTML、CSS和JavaScript的基础知识及应用，提供了7种不同类型的网页设计案例。其中，项目1介绍了HTML、CSS和JavaScript的基础知识，包括Web基本概念、HTML简介、CSS简介、JavaScript简介、Dreamweaver工具的使用等；项目2～项目8为7个完整的网页设计项目，涉及“博客”“网店”“家居”“教育”“婚恋”“视频”“美食”多个方向，有助于读者掌握不同网站的设计风格和制作技巧。本书以项目为导向，通过项目将相关知识点串联起来，学完项目内容就能基本掌握如何制作一个完整的项目页面，从而极大地激发读者的学习兴趣。 本书附有源代码、习题、教学课件等资源，并且为了帮助初学者 好地学习，编者还提供了在线答疑，希望可以帮助 多的读者。 本书既可作为高等院校本、专科相关专业的网页设计与制作课程的教材，也可作为网页平面设计的培训教材，还可作为网页制作、美工设计、网站开发、网页编程等行业从业人员的参考读物。

作者简介

黑马程序员，传智播客成立于2006年，它是由中国Java培训先行者张孝祥老师发起，联合 的中文IT社区CSDN、中关村软件园共同创办的一家专业教育机构。办学至今，我们一直坚守着“为千万人少走弯路而著书，为中华软件之崛起而讲课”的办学理念，坚持培养 软件应用工程师的宏伟目标，在累计培养的十万余名学员中，其中90%的学员均已在北、上、广等一线城市高薪就业，特别是“黑马程序员”的平均就业薪资已达到8K以上。为了迎合软件市场的需求，我们陆续开设了Java、网页平面、PHP、.Net、iOS、C/C++、Android等9个专业方向的课程，并且未来将逐渐开设其他专业方向的课程。随着传智播客的日益壮大，除了北京总部，我们在上海、广州、武汉、成都、深圳等地也创立了直营分支机构，传智播客俨然已成为了 专业口碑的IT教育机构。

目录

项目1　网页制作基础知识 1
【任务1-1】认识网页　1
需求分析　1
知识储备　1
1.　网页的构成　1
2.　网页的相关名词　2
3.　Web标准　3
【任务1-2】网页制作入门技术　5
需求分析　5
知识储备　5
1.　HTML简介　5
2.　CSS简介　6
3.　JavaScript简介　6
4.　常见浏览器介绍　7
【任务1-3】Dreamweaver的使用　9
需求分析　9
知识储备　9
1.　Dreamweaver界面介绍　9
2.　Dreamweaver的初始化设置　13
3.　Dreamweaver文档的基本操作　14
4.　创建网页　16
【项目总结】　17
【课后练习】　17
项目2　“博客”页面制作　19
【项目描述】　19
【任务2-1】认识HTML　20
需求分析　20
知识储备　20
1.　HTML文档基本格式　20
2.　HTML标签　21
3.　HTML标签的属性　22
4.　HTML标签的关系　22
5.　HTML文档头部相关标签　23
【任务2-2】HTML文本控制标签　24
需求分析　24
知识储备　24
1.　页面格式化标签　24
2.　文本样式标签　26
3.　文本格式化标签　27
4.　特殊字符　28
知识拓展　29

标签　29

【任务2-3】HTML图像应用　30

需求分析　30

知识储备　30

1.　常用图像格式　30

2.　图像标签　31

3.　相对路径和 路径　33

知识拓展　34

切图　34

【任务2-4】页面建设准备工作　35

网站素材整理　35

1.　建立网站站点　35

2.　“博客”页面切图　36

页面结构分析　36

页面布局　37

【任务2-5】制作“头部”模块　38

效果分析　38

模块制作　38

【任务2-6】制作“博主简介”模块　39

效果分析　39

模块制作　39

【任务2-7】制作“旅行随笔”模块　40

效果分析　40

模块制作　41

【任务2-8】制作“驴友评论”模块　42

效果分析　42

模块制作　43

【任务2-9】制作“页脚”模块　44

效果分析　44

模块制作　44

【项目总结】　45

【课后练习】　45

项目3　“网上花店”专题页制作　47

【项目描述】　47

【任务3-1】CSS核心基础　48

需求分析　48

知识储备　48

1.　结构与表现分离　48

2.　CSS样式规则　49

3.　CSS样式表的引入　49

4.　CSS基础选择器　53

【任务3-2】CSS文本样式属性　55

需求分析　55

知识储备　55

1.　CSS字体样式属性　55

2.　CSS文本外观属性　58

知识拓展　62

使用CSS定义背景颜色　62

【任务3-3】CSS 特性　63

需求分析　63

知识储备　63

1.　CSS复合选择器　63

2.　CSS层叠性与继承性　65

3.　CSS优先级　66

【任务3-4】页面建设准备工作　68

网站素材整理　68

1.　建立网站站点　68

2.　“网上花店”专题页切图　68

页面结构分析　69

1.　HTML结构分析　69

2.　CSS样式分析　70

定义基础样式　70

1.　页面布局　70

2.　公共样式设置　70

【任务3-5】制作“标题”模块　70

效果分析　70

1.　结构分析　70

2.　样式分析　71

模块制作　71

1.　搭建结构　71

2.　控制样式　71

【任务3-6】制作“分类”模块　71

效果分析　71

1.　结构分析　71

2.　样式分析　72

模块制作　72

1.　搭建结构　72

2.　控制样式　72

【任务3-7】制作“热卖”模块　73

效果分析　73

1.　结构分析　73

2.　样式分析　74

模块制作　74

1.　搭建结构　74

2.　控制样式　74

【任务3-8】制作“页脚”模块　75

效果分析　75

1.　结构分析　75

2.　样式分析　75

模块制作　75

1.　搭建结构　75

2.　控制样式　75

【项目总结】　76

【课后练习】　76

项目4　“爱家居”企业网站首页制作　78

【项目描述】　78

【任务4-1】认识盒子模型　79

需求分析　79

知识储备　79

【任务4-2】盒子模型基础属性　80

需求分析　80

知识储备　80

1.　边框属性　80

2.　内边距属性　85

3.　外边距属性　86

4.　背景属性　88

5.　宽度属性和高度属性　91

【任务4-3】盒子模型新增属性　92

需求分析　92

知识储备　92

1.　颜色透明　92

2.　圆角　93

3.　阴影　95

4.　渐变　96

【任务4-4】元素的类型与转换　100

需求分析　100

知识储备　100

1.　元素的类型　100

2.　标签　101

3.　元素类型的转换　102

知识拓展　104

块元素垂直外边距的合并　104

【任务4-5】元素的浮动　106

需求分析　106

知识储备　106

1.　元素的浮动属性　106

2.　清除浮动　108

3.　overflow属性　112

【任务4-6】元素的定位　113

需求分析　113

知识储备　113

1.　元素的定位属性　113

2.　静态定位　114

3.　相对定位　114

4.　 定位　115

5.　固定定位　116

6.　z-index属性　116

【任务4-7】页面建设准备工作　117

网站素材的整理　117

1.　建立网站站点　117

2.　“爱家居”企业网站首页切图　117

页面结构分析　117

1.　HTML结构分析　117

2.　CSS样式分析　118

定义基础样式　118

1.　页面布局　118

2.　定义基础样式　119

【任务4-8】制作“导航及banner”

模块　119

效果分析　119

1.　结构分析　119

2.　样式分析　119

模块制作　120

1.　搭建结构　120

2.　控制样式　120

【任务4-9】制作“热门 ”模块　121

效果分析　121

1.　结构分析　121

2.　样式分析　121

模块制作　122

1.　搭建结构　122

2.　控制样式　122

【任务4-10】制作“夏日生活”模块　123

效果分析　123

1.　结构分析　123

2.　样式分析　124

模块制作　124

1.　搭建结构　124

2.　控制样式　124

【任务4-11】制作“版权信息”模块和

“悬浮框”模块　125

效果分析　125

1.　结构分析　125

2.　样式分析　125

模块制作　125

1.　搭建结构　125

2.　控制样式　125

【项目总结】　126

【课后练习】　126

项目5　“优课教育”网站首页制作　128

【项目描述】　128

【任务5-1】列表标签　129

需求分析　129

知识储备　129

1.　无序列表　129

2.　有序列表　130

3.　定义列表　131

4.　列表的嵌套应用　132

【任务5-2】使用CSS控制列表

项目符号　132

需求分析　132

知识储备　132

1.　list-style复合属性　132

2.　通过设置背景图像的方式定义列表

项目符号　133

【任务5-3】超链接标签　133

需求分析　133

知识储备　133

1.　创建超链接　133

2.　创建锚点链接　135

3.　通过链接伪类控制超链接　135

【任务5-4】页面建设准备工作　137

网站素材整理　137

1.　建立站点　137

2.　切图　137

页面结构分析　138

1.　HTML结构分析　138

2.　CSS样式分析　138

定义基础样式　139

1.　页面布局　139

2.　定义基础样式　139

【任务5-5】制作“导航”模块　139

效果分析　139

1.　结构分析　139

2.　样式分析　140

模块制作　140

1.　搭建结构　140

2.　控制样式　140

【任务5-6】制作“banner”模块和

“课程分类”模块　141

效果分析　141

1.　结构分析　141

2.　样式分析　141

模块制作　141

1.　搭建结构　141

2.　控制样式　142

【任务5-7】制作“精品展示”模块　143

效果分析　143

1.　结构分析　143

2.　样式分析　144

模块制作　144

1.　搭建结构　144

2.　控制样式　144

【任务5-8】制作“版权信息”模块　146

效果分析　146

1.　结构分析　146

2.　样式分析　146

模块制作　146

1.　搭建结构　146

2.　控制样式　146

【项目总结】　147

【课后练习】　147

项目6　“千年之恋”注册页面制作　149

【项目描述】　149

【任务6-1】认识表格相关标签　150

需求分析　150

知识储备　150

1.　创建表格　150

2.　标签的属性　151

3.　标签的属性　154

4.　标签的属性　155

5.　标签的属性　157

【任务6-2】使用CSS控制表格样式　157

需求分析　157

知识储备　158

1.　使用CSS控制表格边框　158

2.　使用CSS控制单元格边距　159

3.　使用CSS控制单元格的宽度

和高度　160

【任务6-3】表单概述　161

需求分析　161

知识储备　161

1.　初识表单　161

2.　创建表单　161

【任务6-4】基础表单控件　162

需求分析　162

知识储备　162

1.　input控件　162

2.　textarea控件　165

3.　select控件　166

【任务6-5】新增表单控件类型和属性　169

需求分析　169

知识储备　169

1.　新增input控件类型　169

2.　新增input控件属性　173

【任务6-6】使用CSS控制表单样式　179

需求分析　179

知识储备　179

【任务6-7】页面建设准备工作　181

网站素材整理　181

1.　建立站点　181

2.　切图　181

页面结构分析　182

1.　HTML结构分析　182

2.　CSS样式分析　183

定义基础样式　183

1.　页面布局　183

2.　定义基础样式　183

【任务6-8】制作“头部”和“导航”

模块　183

效果分析　183

1.　结构分析　183

2.　样式分析　184

模块制作　184

1.　搭建结构　184

2.　控制样式　184

【任务6-9】制作“banner”和“内容”

模块　185

效果分析　185

1.　结构分析　185

2.　样式分析　186

模块制作　186

1.　搭建结构　186

2.　控制样式　187

【任务6-10】制作“页脚”模块　189

效果分析　189

1.　结构分析　189

2.　样式分析　189

模块制作　190

1.　搭建结构　190

2.　控制样式　190

【项目总结】　190

【课后练习】　190

项目7　“视频8”首页制作　192

【项目描述】　192

【任务7-1】在网页中嵌入视频和音频　193

需求分析　193

知识储备　194

1.　视频、音频嵌入技术概述　194

2.　嵌入视频　195

3.　嵌入音频　197

4.　浏览器对视频和音频格式的

兼容性　197

5.　控制视频的宽度和高度　198

【任务7-2】在网页中添加过渡效果　200

需求分析　200

知识储备　200

1.　transition-property属性　200

2.　transition-duration属性　202

3.　transition-timing-function属性　202

4.　transition-delay属性　203

5.　transition属性　204

【任务7-3】在网页中添加变形效果　204

需求分析　204

知识储备　204

1.　2D变形　204

2.　3D变形　209

【任务7-4】在网页中添加动画效果　212

需求分析　212

知识储备　213

1.　@keyframes规则　213

2.　animation-name属性　213

3.　animation-duration属性　213

4.　animation-timing-function属性　214

5.　animation-delay属性　215

6.　animation-iteration-count属性　215

7.　animation-direction属性　215

8.　animation属性　216

【任务7-5】页面建设准备工作　216

网站素材整理　216

1.　建立站点　216

2.　切图　217

页面结构分析　217

1.　HTML结构分析　217

2.　CSS样式分析　218

定义基础样式　218

1.　页面布局　218

2.　定义基础样式　219

【任务7-6】制作“引导栏”模块　219

效果分析　219

1.　结构分析　219

2.　样式分析　220

模块制作　220

1.　搭建结构　220

2.　控制样式　220

【任务7-7】制作“导航”模块　221

效果分析　221

1.　结构分析　221

2.　样式分析　221

模块制作　221

1.　搭建结构　221

2.　控制样式　222

【任务7-8】制作“banner”模块　223

效果分析　223

1.　结构分析　223

2.　样式分析　223

模块制作　223

1.　搭建结构　223

2.　控制样式　223

【任务7-9】制作“内容”模块　225

效果分析　225

1.　结构分析　225

2.　样式分析　226

模块制作　226

1.　搭建结构　226

2.　控制样式　227

【任务7-10】制作“页脚”模块　229

效果分析　229

1.　结构分析　229

2.　样式分析　229

模块制作　230

1.　搭建结构　230

2.　控制样式　230

【项目总结】　231

【课后练习】　231

项目8　“甜蜜约会”首页制作　233

【项目描述】　233

【任务8-1】JavaScript基础知识　234

需求分析　234

知识储备　234

1.　JavaScript简介　234

2.　JavaScript引入方式　236

3.　JavaScript基本语法　237

4.　简单的JavaScript程序　238

【任务8-2】变量　239

需求分析　239

知识储备　239

1.　变量的声明　239

2.　变量的赋值　239

【任务8-3】数据类型和运算符　240

需求分析　240

知识储备　240

1.　数据类型　240

2.　运算符　241

【任务8-4】流程控制语句　245

需求分析　245

知识储备　245

1.　条件语句　245

2.　循环语句　250

3.　跳转语句　252

【任务8-5】函数　254

需求分析　254

知识储备　254

1.　函数的定义　254

2.　函数的调用　255

3.　函数中变量的作用域　255

【任务8-6】对象　256

需求分析　256

知识储备　256

1.　认识对象　256

2.　创建对象和删除对象属性　257

3.　内置对象　258

【任务8-7】数组　262

需求分析　262

知识储备　262

1.　初识数组　262

2.　创建数组　262

3.　数组的常用属性和方法　263

4.　二维数组　264

【任务8-8】BOM对象与DOM对象　265

需求分析　265

知识储备　265

1.　BOM对象　265

2.　DOM对象　271

【任务8-9】事件处理　276

需求分析　276

知识储备　276

1.　事件和事件调用　276

2.　常用的JavaScript事件　277

【任务8-10】页面建设准备工作　278

网站素材整理　278

1.　建立站点　278

2.　切图　278

页面结构分析　279

1.　HTML结构分析　279

2.　CSS样式分析　279

3.　JavaScript效果分析　279

定义基础样式　279

1.　页面布局　279

2.　定义基础样式　280

3.　引入JavaScript文件　280

【任务8-11】制作“头部及导航”模块　280

效果分析　280

1.　结构分析　280

2.　样式分析　281

模块制作　281

1.　搭建结构　281

2.　控制样式　281

【任务8-12】制作“banner”模块　282

效果分析　282

1.　结构分析　282

2.　样式分析　282

3.　JavaScript 分析　282

模块制作　283

1.　搭建结构　283

2.　控制样式　283

3.　添加JavaScript效果　284

【任务8-13】制作“简介”模块　285

效果分析　285

1.　结构分析　285

2.　样式分析　286

3.　JavaScript 分析　286

模块制作　286

1.　搭建结构　286

2.　控制样式　286

3.　添加JavaScript效果　288

【任务8-14】制作“ ”模块　288

效果分析　288

1.　结构分析　288

2.　样式分析　289

3.　JavaScript 分析　289

模块制作　289

1.　搭建结构　289

2.　控制样式　290

3.　添加JavaScript效果　291

【任务8-15】制作“页脚”模块　292

效果分析　292

1.　结构分析　292

2.　样式分析　292

模块制作　293

1.　搭建结构　293

2.　控制样式　293

【项目总结】　293

【课后练习】　293