网页制作课程设计案例精编

Internet席卷全球，网页制作技术如日中天。网络的普及所带来的是前所未有的交流方式。无论是学术、商业，还是游戏、娱乐，都与网页息息相关。以至于现在上至电脑精英，下至电脑初学者，都对网页的制作有浓厚的兴趣。网页的制作，已经随着电脑技术的普及而逐渐成为一门必修课程。

而我们所要运用的最强大的网页制作工具便是Macromedia Dreamweaver MX这一专业的HTML编辑器，它将被用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论你喜欢直接编写HTML代码的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都会为你提供帮助良多的工具，丰富你的Web创作体验。利用Dreamweaver中的可视化编辑功能，你可以快速地创建页面而无需编写任何代码。不过，如果你更喜欢用手工直接编码，Dreamweaver还包括许多与编码相关的工具和功能。借助Dreamweaver，你还可以使用服务器语言，例如ASP、ASP.NET、ColdFusion标记语言（CFML、JSP和PHP）生成支持动态数据库的Web应用程序。

除了Dreamweaver，还有并称三剑客的Fireworks和Flash两个软件的大力支持。本书全面介绍以上3个软件在网页制作中的综合运用技术。

本书有以下特点：

 图注丰富，便于理解

本书以大量的图注增加了信息的表达，让你一目了然。同时减少了读者对照图文的时间，大大提高学习效率。

 实例入手，针对性强

作者在把握内容的基础上，精挑细选了15个实例，抛弃了传统教程中大段大段的说明，只要跟着作者的步法，掌握这些实例的制作技巧，你会发现网页制作易如反掌。

 内容全面，重点突出

本书以简练的语言介绍软件的功能，让你轻松掌握网页制作所有的精髓。

本书的写作过程中，得到了中国水利水电出版社计算机编辑室的大力支持。本书由梁奕缤主编，郭晓光、徐春卉、武海燕副主编，参与本书编写的还有黄卓、李鑫、杜波、郝思嘉、叶鑫、朱力思、权亮、龚嘉栋、王婧、卢福子、林广毅、黄浩、童剑等。

同时，欢迎广大读者和作者联系，电子信箱是bsbwindy@hotmail.com。也欢迎大家对本书的不足提出意见和建议。

最后，祝所有对网页制作知识渴望的朋友能获得真知，早日成功。

编者

2005年10月

丛书序
前言
案例一 Hello Macromedia，我的欢迎网页 1
1.1 实现功能及思路简析 1
1.2 设计过程 1
1.2.1 网页基本属性设置 1
1.2.2 背景颜色的设置及颜色的选取 2
1.2.3 文本的输入和网页的完成 3
1.2.4 检查和预览 4
1.3 配色方案 5
1.3.1 网页颜色原理和象征意义 5
1.3.2 网页颜色的使用风格 6
1.3.3 设计用色10例 6
1.4 小结 10
1.5 课后作业 10
案例二 与影同行，我的电影发布站 11
2.1 实现功能及思路简析 11
2.2 设计过程 11
2.2.1 单页面的建立 11
2.2.2 页内的锚接 13
2.2.3 页面间的链接 14
2.2.4 指向Internet站点的链接 16
2.2.5 创建电子邮件链接 16
2.2.6 链接的管理 17
2.2.7 站点的建立 17
2.2.8 链接的检查 20
2.2.9 使用“报告”测试站点 22
2.3 小结 22
2.4 课后作业 23
案例三 五彩缤纷，我的世界地图 24
3.1 实现功能及思路简析 24
3.2 设计过程 24
3.2.1 基本要素的插入 24
3.2.2 修改文字的属性 25
3.2.3 修改图像的属性 26
3.2.4 利用CSS进行样式修改 28
3.2.5 建立链接网页 29
3.2.6 热点链接的建立 30
3.2.7 返回按钮的建立 31
3.3 小结 32
3.4 课后作业 33
3.5 附表 33
案例四 秀出个性，我的网络简历 34
4.1 实现功能及思路简析 34
4.2 设计过程 34
4.2.1 新建文档，创建表格 34
4.2.2 选择表格元素 35
4.2.3 表格基本属性的修改 37
4.2.4 编辑表格 40
4.2.5 在表格中插入内容 41
4.3 利用表格美化网页 43
4.3.1 一个像素宽的分隔线 43
4.3.2 利用cellspacing属性制作细线表格 44
4.3.3 利用cellpadding属性制作等间距细线表格 45
4.3.4 利用表格做空格 47
4.4 表格中常见问题及应变处理方法 48
4.4.1 表格的变形问题 48
4.4.2 表格布满页面的问题 49
4.4.3 任意大小的表格 49
4.4.4 被撑大的表格 49
4.5 小结 49
4.6 课后作业 49
案例五 凭票入内，我的注册系统 51
5.1 实现功能及思路简析 51
5.2 设计过程 51
5.2.1 创建表单 51
5.2.2 添加文本框 53
5.2.3 插入列表或菜单 54
5.2.4 插入单选按钮和复选框 55
5.2.5 添加按钮 56
5.2.6 跳转菜单 57
5.2.7 在表单中插入表格 57
5.2.8 检查表单 58
5.2.9 完成网页并预览 58
5.3 检验表单 59
5.3.1 配置表单 60
5.3.2 打开行为界面 60
5.3.3 添加行为 61
5.3.4 预览效果 63
5.3.5 即时检查 64
5.4 小结 64
5.5 课后作业 65
案例六 多面英姿，我的框架系统 66
6.1 实现功能及思路简析 66
6.2 设计过程 66
6.2.1 创建框架 66
6.2.2 框架结构的修改 68
6.2.3 框架的属性 72
6.2.4 在框架中编辑网页 72
6.2.5 对框架设计的思考 75
6.3 小结 76
6.4 课后作业 76
案例七 腾云驾雾，我的动感网页 77
7.1 实现功能及思路简析 77
7.2 设计过程 77
7.2.1 基本网页的制作 77
7.2.2 层的建立 78
7.2.3 利用Timelines设置简单层动画 80
7.2.4 利用关键帧完成动画 83
7.2.5 利用Flash制作GIF动画元素 84
7.2.6 在层中插入GIF动画 88
7.2.7 对层动画进行调整 88
7.3 小结 90
7.4 课后作业 90
案例八 千里传情，我的电子贺卡 92
8.1 实现功能及思路简析 92
8.2 设计过程 92
8.2.1 建立网站 92
8.2.2 首页的布局规划 95
8.2.3 首页内容的处理 97
8.2.4 发送卡片子页的布局 99
8.2.5 完成网站之间的链接 101
8.3 小结 103
8.4 课后作业 104
案例九 流光溢彩，我的电影收藏夹 105
9.1 实现功能及思路简析 105
9.2 设计过程 105
9.2.1 站点的建立 105
9.2.2 相册的建立 106
9.2.3 子页的制作 109
9.2.4 主页面的完善 110
9.2.5 预览效果 111
9.3 小结 112
9.4 课后作业 112
案例十 横岭侧峰，我的网页布局 113
10.1 实现功能及思路简析 113
10.2 利用表格进行排版设计过程 113
10.2.1 制作图像元素 113
10.2.2 插入表格并设置标题图像 114
10.2.3 内容区的布局 117
10.2.4 设置网页过渡效果 120
10.3 利用层面进行排版设计过程 121
10.3.1 插入层面 121
10.3.2 层中插入内容 122
10.4 转换网页和检查网页 125
10.4.1 转换网页 125
10.4.2 检查网页 127
10.4.3 建立选择浏览器的网页 128
10.5 实现HTML自动排版的法则 129
10.5.1 不使用绝对位置 130
10.5.2 对话框应当匹配最大可用宽度和高度 130
10.5.3 每个控件都应位于分离的表格单元中 131
10.5.4 允许文本换行 131
10.5.5 把复选框、单选按钮与它们的标签分离 132
10.5.6 为今后的扩展预留足够的空间，避免固定宽度的项目 132
10.5.7 按钮、列表框和组群框大小的确定方法 132
10.5.8 高度的设置 133
10.5.9 不使用左对齐和右对齐 134
10.5.10 避免将本地化工作人员需要改变的CSS值内联在网页中 134
10.6 布局理念 134
10.6.1 网页布局类型 134
10.6.2 关于第一屏 135
10.6.3 有关导航栏的位置 135
10.6.4 什么样的布局是最好的 135
10.7 小结 135
10.8 课后作业 136
案例十一 镜花水月，我的模板网页 137
11.1 实现功能及思路简析 137
11.2 利用模板建立网页 137
11.2.1 插入模板 137
11.2.2 网页的加工 139
11.3 制作模板 139
11.3.1 设置模板布局 140
11.3.2 插入可编辑区域 142
11.3.3 插入可选区域 144
11.3.4 创建重复区 145
11.3.5 嵌套表格 147
11.4 小结 147
11.5 课后作业 148
案例十二 两面三刀，我的翻滚按钮 149
12.1 实现功能及思路简析 149
12.2 设计过程 149
12.2.1 建立平台 149
12.2.2 切片并设置图层内容 151
12.2.3 设置按钮的行为 153
12.2.4 插入元素按钮 156
12.2.5 在Dreamweaver中插入交互图 157
12.3 小结 159
12.4 课后作业 159
案例十三 多才多艺，我的多样图层 160
13.1 实现功能及思路简析 160
13.2 设计过程 160
13.2.1 制作对象的辅助说明 160
13.2.2 拖动图层的应用 163
13.2.3 制作静止浮动效果 165
13.2.4 活动菜单的制作 166
13.3 小结 170
13.4 课后作业 170
案例十四 个性天下，我的游戏网站 171
14.1 实现功能及思路简析 171
14.2 网页框架和内容设计 171
14.2.1 网站主题的制定 171
14.2.2 网站标题的制定 172
14.2.3 网站框架的建立 172
14.2.4 规划站点 172
14.2.5 素材的准备 173
14.2.6 定位网站CI形象 173
14.2.7 确定网站的栏目 175
14.2.8 确定网站的链接结构 175
14.2.9 设计网站的整体风格 176
14.3 片头Flash的制作 176
14.3.1 背景的制作 176
14.3.2 logo和标题的制作 179
14.3.3 动画的制作 179
14.4 模板的建立 183
14.4.1 标题栏制作 183
14.4.2 导航按钮的制作 186
14.4.3 可编辑区的设定 189
14.5 层叠样式 190
14.6 各个栏目网页的制作 192
14.6.1 建立News页 192
14.6.2 desktop页的制作 194
14.6.3 music音乐和video视频的播放和下载 200
14.6.4 设置状态行上的文本 201
14.6.5 添加信息交互功能 203
14.7 检查网站 205
14.8 小结 206
14.9 课后作业 206
案例十五 “钱”途无量，我的商业网站 207
15.1 实现功能及思路简析 207
15.2 设计理念概述 207
15.2.1 构思阶段 207
15.2.2 整体规划 208
15.2.3 设计过程 209
15.2.4 色彩方案 210
15.2.5 页面各要素 212
15.3 精品赏析 214
15.3.1 韩国商业网站设计分析 214
15.3.2 ericsson.com 219
15.3.3 FSX.CO.UK 221
15.3.4 sonystyle.com 221
15.3.5 millennium point 221
15.3.6 hp.com 223
15.4 如何让更多的人知道自己的网站 224
15.5 小结 226

1. 基于.NET Core框架的分布式系统架构设计 [汤佳 著]
2. Web用户界面设计与制作 [主编 赵娟]
3. ASP.NET（C#）网站开发（第二版） [主编 张志明 王辉]
4. Web开发实战 [主编　肖睿　陈永]
5. Bootstrap与jQuery UI框架设计 [主编 肖睿 吴振宇]
6. 网页设计与制作 [主编 杨毅]
7. 网页制作实战 [主编 肖睿 罗保山]
8. 网页设计与制作 [主编 陈建国 项炜]
9. 16课学会网页程序设计—— HTML5+CSS3+JavaScript+jQuery+ [施威铭研究室 著]
10. HTML5+CSS3前端技术——UI设计师与开发人员合作秘籍 [北京课工场教育科技有限公司Q]
11. Web程序设计实践教程 [主编 侯萍 郭俊荣]
12. 网页设计与制作 [孙娜 蒲秋梅 南洋 编著]
13. 玩转Axure RP——Axure RP 7.0高保真网页、APP原型设计 [谢星星 编著]
14. ASP.NET Web程序设计 [吴琴霞 栗青生 康晶 编著]
15. CSS+DIV页面布局技术 [主编 朱翠苗]
16. Web开发与安全防范 [主编 武春岭]
17. 网页设计实训教程 [主编 张春英 李英文 钟大伟]
18. ASP.NET（C#）网站开发 [主编 张志明 王辉]
19. 网页设计实用技术 [主 编 陈建国 李勤]
20. JSP设计与开发 [秦毅 王可]
21. ASP.NET项目开发教程 [邹承俊 任 华]
22. 动态网页设计与制作实用教程（第三版） [程伟渊 倪燃]
23. ASP程序设计（第二版） [叶潮流 杜奕智]
24. 网页设计与制作实用技术（第二版） [齐建玲 杨艳杰]
25. 网页前端技术 [主 编 王敏杰 任云晖]
26. 多媒体网页设计教程 [主编 朱国华 齐晖 李枫]
27. 网站建设与网页制作 [姚翠友 杨艳红 编著]
28. 网页设计与制作（第二版）实训指导 [任正云 赖玲 严永松 王娅纷]
29. 网页设计与制作（第二版） [任正云 赖玲 严永松 编著]
30. 网页设计与制作 [主编 陈彦许 陈维华]