网页设计与制作项目案例教程（Dreamweaver CS6）

本书在编写过程中站在读者角度思考在网页设计与制作学习过程中会遇到的问题，然后一步步解决这些问题，从而引导读者逐步掌握相关的知识和方法。

本书编者共总结提炼出十一个项目，然后以案例贯穿其中，让读者在设计、制作网页的过程中既学习到知识，又能掌握技能，累积经验。

本书为巩固读者对知识的掌握，并拓宽视野、提升技能，在各项目内容后均配备课后思考练习题，拓展训练题。

本书是基于Dreamweaver CS6平台来编写的。Dreamweaver CS6是继Dreamweaver CS5之后推出的完美的网站及网络应用程序制作软件，新版本趋向于易用快捷，使用了自适应网格版面创建页面，在发布前可使用多屏幕预览审阅设计，大大提高了用户的工作效率，而改善的FTP性能可更高效地传输大型文件。“实时视图”和“多屏幕预览”面板可呈现HTML5 代码，用户能更方便地检查自己的工作。

本书在编写过程中以学习者为本，站在学习者的角度去思考在网页设计与制作学习过程中会遇到的问题，然后通过相应知识的学习来一步步解决这些问题，从而引导学习者逐步掌握网页设计与制作相关的知识与网页设计与制作的方法。通过认真分析总结提炼这些问题形成一个个项目，然后以案例贯穿于项目，让学习者在制作网页的过程中学习知识，既学到了知识，又掌握了技能，累积了经验。

学习网页设计与制作就像建房子，第一步就是要夯实基础，掌握网页设计与制作的基础知识，然后把站点结构搭建起来，再在站点中创建网页，搭建网页框架结构，添加网页元素，美化网页，最后测试并发布网站。本书的内容就围绕这些层层展开，步步递进，主要内容为：项目一基础知识，项目二工具的学习与建站，项目三美化利器CSS，项目四各种网页元素的添加方法，项目五表格布局网页，项目六DIV+CSS布局网页，项目七框架网页，项目八行为与表单，项目九模板网页，项目十测试与发布、维护与推广，项目十一综合案例。最后的综合案例完全按照网站制作流程进行设计与制作。

为了巩固对知识的掌握，拓宽视野，提升技能，本书还配备了课后思考练习题，拓展训练实战题。

本书面向初学者，是理想的网页设计与制作首选教材。也可以作为有一定基础学习者的参考书与职业培训教材。

本书由杨丽芳、刘琳担任主编，由牟向宇、杨秀杰、苏云凤、王秀丽担任副主编。刘明、任航璎参与了本书的编写工作。全书统稿、定稿由杨丽芳负责完成。本书的顺利出版，还要感谢重庆电子工程职业学院计算机学院的领导和老师给予的大力支持和帮助。

由于编者水平有限，加之时间仓促，书中错误之处难免，敬请读者批评指正。

编 者

2014年5月

项目一 夯实基础―网页设计与制作基础 1
1.1 任务1：了解网页相关基础知识 1
1.1.1 网站与网页概述 1
1.1.2 网页的版块结构 3
1.1.3 网页的基本构成要素 5
1.1.4 网页设计与制作软件 6
1.2 任务2：了解网站建设的基本流程 6
1.2.1 需求分析 7
1.2.2 网站规划设计 7
1.2.3 搜集资料 13
1.2.4 网页制作 13
1.2.5 测试发布与管理维护 14
1.3 任务3：学习HTML标记语言 14
1.3.1 HTML概念 14
1.3.2 HTML的结构与语法 15
1.3.3 HTML常用标签 16
1.3.4 HTML与XHTML 21
1.4 任务4：HTML网页简单实例—
相约春天 22
1.4.1 案例效果展示与分析 22
1.4.2 网页制作 23
1.4.3 保存网页 26
1.4.4 预览网页 26
1.4.5 编辑网页 26
思考练习 26
项目二 安营扎寨―在Dreamweaver中创建与
管理站点 28
2.1 任务1：认识Dreamweaver CS6 28
2.1.1 Dreamweaver CS6概述 28
2.1.2 Dreamweaver CS6工作界面 29
2.1.3 Dreamweaver CS6基本操作 32
2.2 任务2：创建与管理站点—驴行天下 34
2.2.1 规划站点结构 34
2.2.2 创建本地站点 34
2.2.3 创建网页文件与文件夹 36
2.2.4 管理站点 38
2.3 任务3：使用Dreamweaver创建一个
简单网页—My Zone 39
2.3.1 案例效果展示与分析 40
2.3.2 创建站点 40
2.3.3 添加内容 40
2.3.4 美化网页 44
思考练习 47
项目三 美化利器―CSS样式 49
3.1 任务1：认识CSS样式表 49
3.1.1 CSS概述 49
3.1.2 CSS基本语法 50
3.1.3 CSS选择器类型 51
3.2 任务2：在HTML中使用CSS 54
3.2.1 CSS在HTML中的位置 54
3.2.2 CSS的继承性 57
3.2.3 CSS的优先级 57
3.3 任务3：在Dreamweaver中创建
编辑CSS 58
3.3.1 创建CSS样式 58
3.3.2 编辑CSS样式 62
3.4 任务4：使用CSS美化网页—
教务管理系统页面 63
3.4.1 效果分析 64
3.4.2 美化网页 64
思考练习 68
项目四 基本功练习―添加网页基本元素 71
4.1 任务1：制作文本网页—“古典音乐”
之基本简介 71
4.1.1 案例效果展示与分析 71
4.1.2 添加网页内容 72
4.1.3 美化网页 77
4.2 任务2：制作图文混排网页—
“古典音乐”之历史起源 80
4.2.1 案例效果展示与分析 81
4.2.2 添加网页内容 81
4.2.3 美化网页 83
4.3 任务3：制作多媒体网页—
“古典音乐”之乐器音色 84
4.3.1 案例效果展示与分析 85
4.3.2 制作网页 85
4.4 任务4：整合网页—添加超链接 91
4.4.1 文本与图像超链接 91
4.4.2 电子邮件超链接 93
4.4.3 锚记超链接 94
4.4.4 热点超链接 95
思考练习 96
项目五 井然有序―应用表格 98
5.1 任务1：认识表格—制作岗位竞聘表 98
5.1.1 案例效果展示与分析 98
5.1.2 创建表格 99
5.1.3 调整表格 100
5.1.4 输入内容 103
5.1.5 设置表格与单元格的属性 103
5.1.6 嵌套表格 105
5.2 任务2：制作表格布局网页—
Dreamweaver学习园地 106
5.2.1 案例效果展示与分析 106
5.2.2 创建布局表格 106
5.2.3 添加网页内容 107
5.2.4 美化网页 110
思考练习 116
项目六 更上一层楼―DIV+CSS布局网页 118
6.1 任务1：认识盒模型 118
6.1.1 盒模型概述 118
6.1.2 元素类型 120
6.2 任务2：认识DIV标签 121
6.2.1 插入DIV标签 121
6.2.2 设置DIV属性 122
6.3 任务3：制作DIV+CSS布局网页—
茶业公司首页 128
6.3.1 案例效果展示与分析 128
6.3.2 搭建框架 129
6.3.3 添加内容 130
6.3.4 CSS美化网页 133
思考练习 137
项目七 统筹兼顾―框架网页 140
7.1 任务1：认识和创建框架 140
7.1.1 认识框架和框架集 140
7.1.2 创建与保存框架 142
7.1.3 框架基本操作 145
7.2 任务2：制作框架网页——婚礼策划
公司网页 148
7.2.1 案例效果展示与分析 148
7.2.2 制作框架集网页 149
7.2.3 制作框架网页 151
7.2.4 创建框架中的链接 160
7.3 任务3：制作iframe框架网页 162
7.3.1 案例效果展示与分析 162
7.3.2 制作iframe网页 163
思考练习 169
项目八 静里有动―行为与表单 171
8.1 任务1：认识行为 171
8.1.1 行为相关概念 171
8.1.2 “行为”面板 173
8.2 任务2：应用行为 173
8.2.1 应用弹出信息行为 173
8.2.2 打开浏览器窗口行为 174
8.2.3 改变属性行为 176
8.2.4 显示隐藏行为 178
8.2.5 设置文本行为 180
8.3 任务3：认识表单 181
8.3.1 表单域 182
8.3.2 表单对象 183
8.4 任务4：表单使用—制作新用户
注册页面 184
8.4.1 案例效果展示与分析 184
8.4.2 搭建框架 185
8.4.3 添加内容 185
8.4.4 美化网页 191
思考练习 193
项目九 一模多用―模板与库 195
9.1 任务1：认识模板 195
9.1.1 模板概述 195
9.1.2 创建模板 196
9.2 任务2：使用模板制作网站—
“星语星愿”网站制作 197
9.2.1 案例效果展示与分析 198
9.2.2 创建模板 198
9.2.3 制作模板 200
9.2.4 定义可编辑区域 204
9.2.5 制作基于此模板的页面—首页 204
9.2.6 制作基于此模板的页面—
处女座二级页面 207
9.3 任务3：操作模板 208
9.3.1 编辑模板 208
9.3.2 文档脱离模板 209
9.4 任务4：库的应用—运动文字 209
9.4.1 创建库项目 210
9.4.2 使用库项目 211
思考练习 212
项目十 整装待发―测试与发布、维护与推广 214
10.1 任务1：测试与发布网站 214
10.1.1 测试网站 214
10.1.2 发布网站 217
10.2 任务2：维护网站 221
10.2.1 同步本地与远程站点 221
10.2.2 取出与存回文件 222
10.2.3 遮盖 224
10.3 任务3：网站的优化推广 225
10.3.1 注册搜索引擎 225
10.3.2 SEO搜索引擎优化 225
10.3.3 其他推广策略 228
思考练习 229
项目十一 综合案例―在线鲜花网站首页制作 230
11.1 任务1：网站建设规划 230
11.1.1 需求分析 230
11.1.2 确定网站风格 230
11.1.3 规划网站结构 231
11.2 任务2：前期制作准备 232
11.2.1 搜集素材 232
11.2.2 制作Banner动画 232
11.2.3 绘制伪界面 232
11.2.4 拆分图纸获取素材 233
11.3 任务3：案例效果分析 237
11.4 任务4：制作网页 238
11.4.1 创建站点 238
11.4.2 搭建框架 239
11.4.3 网页细化 240
思考练习 249
参考文献 250

1. 网页设计与制作 [主编 王潇 章明珠]
2. 网页设计与制作 [主编 李佼辉 聂树成]
3. 网页设计与制作 [主编 杨毅]
4. 网页设计与制作 [主编 陈建国 项炜]
5. 网页设计与制作 [孙娜 蒲秋梅 南洋 编著]
6. 网页设计与制作 [王铁桩 聂卫献]
7. 网页设计与开发实战教程 [李云程]
8. 网页设计与制作项目化教程 [周观民 梁雪梅]
9. 网页设计与制作（第二版） [马占欣]
10. 动态网页设计与制作实用教程（第三版） [程伟渊 倪燃]
11. 网页设计与制作实用技术（第二版） [齐建玲 杨艳杰]
12. 网页设计与制作（第二版）实训指导 [任正云 赖玲 严永松 王娅纷]
13. 网页设计与制作（第二版） [任正云 赖玲 严永松 编著]
14. 网页设计与制作 [主编 陈彦许 陈维华]
15. Dreamweaver网页设计与制作教程 [杨继 主编]
16. 网页设计与制作（第二版） [李京文]
17. 网页设计与制作 [主编 邬锦雯]
18. 网页设计与制作实用技术 [齐建玲 主编]
19. 网页设计与制作实用教程 [雷运发 主编]
20. 网页设计与制作实训教程 [白征 李云程 主编]
21. 网页设计与制作 [任正云 陆大修 编著]
22. 网页设计与制作 [马占欣 主编 周文刚 支建飞 副主]
23. 动态网页设计与制作实用教程（第二版） [程伟渊 主编]