正版 HTML+CSS+JavaScript网页制作案例教程 黑马程序员 人民邮电

第 1章 网页那点事 1

1．1 网页概述 1

1．1．1 网页的组成 1

1．1．2 网页名词解释 2

1．1．3 Web标准 4

1．2 网页制作技术入门 5

1．2．1 HTML 5

1．2．2 CSS 6

1．2．3 JavaScript 6

1．2．4 网页的展示平台——浏览器 7

1．3 Dreamweaver工具的使用 9

1．3．1 认识Dreamweaver界面 10

1．3．2 Dreamweaver初始化设置 14

1．3．3 Dreamweaver基本操作 16

1．4 创建网页 17

1．5 动手实践 19

第 2章 从零开始构建HTML页面 20

2．1 【案例1】简单的网页 20

案例描述 20

知识引入 20

1． HTML文档基本格式 20

2． 标签的分类 21

3． 标签的关系 22

4． 页面格式化标签 23

案例实现 26

1． 分析效果图 26

2． 制作页面结构 26

3． 设置标题居中 27

2．2 【案例2】新闻页面 27

案例描述 27

知识引入 27

1． 标签的属性 27

2． HTML文档头部相关标签 28

3． 文本样式标签 29

4． 文本格式化标签 30

案例实现 30

1． 结构分析 30

2． 样式分析 31

3． 制作页面结构 31

4． 控制文本 31

2．3 【案例3】图文混排 32

案例描述 32

知识引入 32

1． 常见图像格式 32

2． 图像标签
33

3． 相对路径和绝对路径 36

4． 特殊字符标签 37

案例实现 37

1． 分析效果图 37

2． 制作页面结构 38

3． 控制图像 38

4． 控制文本 39

2．4 动手实践 40

第3章 使用CSS技术美化网页 41

3．1 【案例4】文字Logo 41

案例描述 41

知识引入 41

1． 认识CSS 41

2． CSS样式规则 42

3． 引入CSS样式表 43

4． CSS基础选择器 47

案例实现 49

1． 分析效果图 49

2． 制作页面结构 50

3． 定义CSS样式 50

3．2 【案例5】美食专题栏目 50

案例描述 50

知识引入 51

1． CSS字体样式属性 51

2． CSS文本外观属性 54

案例实现 61

1． 结构分析 61

2． 样式分析 61

3． 制作页面结构 62

4． 定义CSS样式 62

3．3 【案例6】搜索页面 63

案例描述 63

知识引入 64

1． CSS复合选择器 64

2． CSS层叠性和继承性 66

3． CSS优先级 67

案例实现 69

1． 结构分析 69

2． 样式分析 70

3． 制作页面结构 70

4． 定义CSS样式 70

3．4 动手实践 71

第4章 运用盒子模型划分网页模块 72

4．1 【案例7】音乐盒 72

案例描述 72

知识引入 72

1． 认识盒子模型 72

2． 标签 73

3． 边框属性 74

案例实现 80

1． 结构分析 80

2． 样式分析 80

3． 制作页面结构 80

4． 定义CSS样式 80

4．2 【案例8】用户中心 81

案例描述 81

知识引入 81

1． 内边距属性 81

2． 外边距属性 83

3． 盒子的宽与高 84

案例实现 85

1． 结构分析 85

2． 样式分析 85

3． 制作页面结构 85

4． 定义CSS样式 85

4．3 【案例9】咖啡店banner 86

案例描述 86

知识引入 87

1． 设置背景颜色 87

2． 设置背景图像 87

3． 设置背景图像平铺 88

4． 设置背景图像的位置 88

5． 设置背景图像固定 90

6． 综合设置元素的背景 90

案例实现 91

1． 结构分析 91

2． 样式分析 91

3． 制作页面结构 91

4． 定义CSS样式 91

4．4 【案例10】图标导航栏 92

案例描述 92

知识引入 92

1． 元素类型 92

2． 标签 94

3． 元素类型的转换 95

案例实现 96

1． 结构分析 96

2． 样式分析 96

3． 制作页面结构 96

4． 定义CSS样式 97

4．5 【案例11】创意画框 98

案例描述 98

知识引入 98

1． 颜色透明度 98

2． 图片边框 99

3． 阴影 100

4． 渐变 101

案例实现 106

1． 结构分析 106

2． 样式分析 106

3． 制作页面结构 106

4． 定义CSS样式 107

4．6 【案例12】拼图效果 108

案例描述 108

知识引入 108

1． 圆角 108

2． 多背景图像 111

案例实现 111

1． 结构分析 111

2． 样式分析 112

3． 制作页面结构 112

4． 定义CSS样式 112

4．7 动手实践 113

第5章 为网页添加列表和超链接 114

5．1 【案例13】精美电商悬浮框 114

案例描述 114

知识引入 114

1． 无序列表 114

2． 有序列表 115

案例实现 117

1． 结构分析 117

2． 样式分析 117

3． 制作页面结构 117

4． 定义CSS样式 118

5．2 【案例14】二维码名片 119

案例描述 119

知识引入 119

1． 定义列表 119

2． 定义列表实现图文混排 120

3． 列表嵌套的应用 121

案例实现 122

1． 结构分析 122

2． 样式分析 122

3． 制作页面结构 123

4． 定义CSS样式 123

5．3 【案例15】电商团购悬浮框 124

案例描述 124

知识引入 125

1． list-style-type属性 125

2． list-style-image属性 126

3． list-style-position属性 127

4． list-style属性 127

5． 背景图像定义列表项目符号 128

案例实现 129

1． 结构分析 129

2． 样式分析 129

3． 制作页面结构 129

4． 定义CSS样式 130

5．4 【案例16】唱吧导航栏 131

案例描述 131

知识引入 131

1． 创建超链接 131

2． 锚点链接 133

3． 链接伪类控制超链接 134

案例实现 136

1． 结构分析 136

2． 样式分析 136

3． 制作页面结构 136

4． 定义CSS样式 138

5．5 动手实践 139

第6章 为网页添加表格和表单 141

6．1 【案例17】简历表 141

案例描述 141

知识引入 141

1． 创建表格 141

2．



标签的属性 1433． 标签的属性 1474． 标签的属性 148

5． 标签及其属性 150

6． 表格的结构 151

7． CSS控制表格样式 152

案例实现 156

1． 结构分析 156

2． 样式分析 157

3． 制作页面结构 157

4． 定义CSS样式 158

6．2 【案例18】用户登录界面 159

案例描述 159

知识引入 159

1． 认识表单 159

2． 创建表单 159

案例实现 161

1． 结构分析 161

2． 样式分析 161

3． 制作页面结构 161

4． 定义CSS样式 162

6．3 【案例19】趣味选择题 163

案例描述 163

知识引入 164

input控件 164

案例实现 167

1． 结构分析 167

2． 样式分析 167

3． 制作页面结构 167

4． 定义CSS样式 168

6．4 【案例20】空间日志 169

案例描述 169

知识引入 170

1． textarea控件 170

2． select控件 171

案例实现 174

1． 结构分析 174

2． 样式分析 175

3． 制作页面结构 175

4． 定义CSS样式 175

6．5 【案例21】员工档案 177

案例描述 177

知识引入 178

CSS控制表单样式 178

案例实现 180

1． 结构分析 180

2． 样式分析 180

3． 制作页面结构 181

4． 定义CSS样式 181

6．6 动手实践 183

第7章 运用浮动和定位布局 184

7．1 【案例22】世界杯梦幻阵容 184

案例描述 184

知识引入 185

认识浮动 185

案例实现 187

1． 结构分析 187

2． 样式分析 187

3． 制作页面结构 187

4． 定义CSS样式 189

7．2 【案例23】商品专栏 189

案例描述 189

知识引入 190

清除浮动 190

案例实现 194

1． 结构分析 194

2． 样式分析 194

3． 制作页面结构 194

4． 定义CSS样式 195

7．3 【案例24】移动端电商界面 196

案例描述 196

知识引入 196

overflow属性 196

案例实现 199

1． 结构分析 199

2． 样式分析 199

3． 制作页面结构 199

4． 定义CSS样式 200

7．4 【案例25】违停查询 201

案例描述 201

知识引入 201

1． 认识定位属性 201

2． 定位类型 202

3． z-index层叠等级属性 206

案例实现 206

1． 结构分析 206

2． 样式分析 206

3． 制作页面结构 207

4． 定义CSS样式 207

7．5 【案例26】网页布局 209

案例描述 209

知识引入 210

1． 认识布局 210

2． 单列布局 211

3． 两列布局 213

4． 三列布局 214

5． 网页模块命名规范 217

案例实现 218

1． 结构分析 218

2． 样式分析 218

3． 制作页面结构 218

4． 定义CSS样式 219

7．6 动手实践 220

第8章 全新的网页视听技术 221

8．1 【案例27】电影播放界面 221

案例描述 221

知识引入 222

1． 音频和视频嵌入技术概述 222

2． 嵌入视频 223

3． 嵌入音频 225

4． 浏览器对音频、视频文件的

兼容性 225

5． 控制视频宽和高 226

案例实现 228

1． 结构分析 228

2． 样式分析 228

3． 制作页面结构 229

4． 定义CSS样式 229

8．2 【案例28】导航栏悬浮特效 231

案例描述 231

知识引入 231

1． transition-property属性 231

2． transition-duration属性 232

3． transition-timing-function属性 233

4． transition-delay属性 234

5． transition属性 234

案例实现 234

1． 结构分析 234

2． 样式分析 235

3． 制作页面结构 235

4． 定义CSS样式 235

8．3 【案例29】翻牌动画 236

案例描述 236

知识引入 237

1． 2D变形 237

2． 3D变形 242

案例实现 245

1． 结构分析 245

2． 样式分析 245

3． 制作页面结构 246

4． 定义CSS样式 246

8．4 【案例30】宝石旋转 247

案例描述 247

知识引入 247

1． @keyframes规则 247

2． animation-name属性 248

3． animation-duration属性 248

4． animation-timing-function属性 249

5． animation-delay属性 250

6． animation-iteration-count属性 250

7． animation-direction属性 250

8． animation属性 251

案例实现 251

1． 结构分析 251

2． 样式分析 251

3． 制作页面结构 252

4． 定义CSS样式 252

8．5 动手实践 254

第9章 简单的JavaScript 255

9．1 【案例31】身份验证 255

案例描述 255

知识引入 256

1． 认识JavaScript 256

2． JavaScript的语法规则 258

3． 关键字 258

4． JavaScript的引入方式 259

5． alert()方法 260

6． prompt()方法 260

案例实现 261

1． 案例分析 261

2． 案例实现 261

9．2 【案例32】商城下拉菜单 261

案例描述 261

知识引入 262

1． DOM简介 262

2． 对象 262

3． 访问节点 263

4． 设置节点样式 263

5． 变量 264

6． 函数 265

7． 事件和事件调用 267

8． 常用的JavaScript事件 268

案例实现 269

1． 结构分析 269

2． 样式分析 269

3． JavaScript效果分析 269

4． 制作页面结构 269

5． 定义CSS样式 270

6． 添加JavaScript特效 271

9．3 【案例33】限时秒杀 271

案例描述 271

知识引入 271

1． 数据类型 271

2． 运算符 273

3． 运算符优先级 277

4． 条件语句 279

5． BOM简介 283

6． Date对象 287

7． 数据类型转换 288

案例实现 289

1． 结构分析 289

2． 样式分析 289

3． JavaScript效果分析 289

4． 制作页面结构 289

5． 定义CSS样式 290

6． 添加JavaScript效果 291

9．4 【案例34】Tab栏切换效果 292

案例描述 292

知识引入 292

1． 循环控制语句 292

2． 跳转语句 295

3． 数组 296

案例实现 297

1． 结构分析 297

2． 样式分析 298

3． JavaScript效果分析 298

4． 制作页面结构 298

5． 定义CSS样式 299

6． 添加JavaScript效果 300

9．5 动手实践 301

第 10章 实战开发—好趣艺术

设计部落首页面 302

10．1 准备工作 303

1． 建立站点 303

2． 站点初始化设置 303

3． 切片 304

4． 效果图分析 306

5． 页面布局 307

6． 定义公共样式 308

10．2 首页面详细制作 308

1． 制作头部和导航 308

2． banner和通知公告 308

3． 主体内容区域 308

4． 底部版权区域 309

10．3 动手实践 309

黑马程序员，传智播客旗下高端IT教育品牌，它是由中国Java培训先行者张孝祥老师发起，联合***大的中文IT社区CSDN、中关村软件园共同创办的一家专业教育机构。办学至今，我们一直坚守着“为千万人少走弯路而著书，为中华软件之崛起而讲课”的办学理念，坚持培养优秀软件应用工程师的宏伟目标，在累计培养的十万余名学员中，其中90%的学员均已在北、上、广等一线城市高薪就业。

1.黑马程序员经典教材改版。
2.本书在保留了原有风格的基础上，内容做了大量更新，包括增加了HTML5部分基础标签和CSS3新属性的讲解和应用，增加了网页视听技术的应用，调整了JavaScript部分知识点的顺序，更换了大量案例，符合**的教学需要。
3.本书附有教学视频、源代码、习题、教学PPT等资源。

本书站在初学者的角度，以实用的案例、通俗易懂的语言详细介绍使用HTML、CSS和JavaScript进行网页制作的技巧。
本书共10章，结合HTML、CSS和JavaScript的基础知识及应用，提供了34个精选案例和1个综合实训项目。其中，第1~3章讲解了HTML和CSS的基础知识，包括Web基本概念、HTML和CSS简介、Dreamweaver工具的使用、HTML文本和图像标签、CSS选择器、CSS样式、CSS的继承性和优先等级。第4~8章分别讲解了盒子模型、列表和超链接、表格和表单、元素的浮动和定位、网页视听技术等。第9章讲解了JavaScript编程基础与事件处理。第10章为综合实训项目——好趣艺术，带领读者开发一个包含结构、样式和行为的网站首页面。
本书附有源代码、习题、教学课件等资源，还提供了在线答疑，用以帮助读者更好地学习本书。
本书既可作为高等教育本、专科院校相关专业的网页设计教材，也可供网页制作爱好者学习参考。

1.黑马程序员经典教材改版。 2.本书在保留了原有风格的基础上，内容做了大量更新，包括增加了HTML5部分基础标签和CSS3新属性的讲解和应用，增加了网页视听技术的应用，调整了JavaScript部分知识点的顺序，更换了大量案例，符合近期新的教学需要。 3.本书附有教学视频、源代码、习题、教学PPT等资源。