中文版Dreamweaver CC+Flash CC+Photoshop CC网页设计基础培训教程-(附光盘)

目 录

了解网页设计篇
第1章　了解网页设计　13
1.1　什么是网页设计　14
1.1.1　网页设计概述　14
1.1.2　网页设计中的术语　15
1.2　网页设计常用软件和技术　17
1.2.1　网页图像处理软件——Photoshop CC　17
1.2.2　网页动画制作软件——Flash CC　17
1.2.3　网页编辑制作软件——Dreamweaver CC　18
1.2.4　网页标记语言——HTML　18
1.2.5　网页特效脚本语言——JavaScript　19
1.3　“网页三剑客”的关系　19
1.4　网站建设的基本流程　20
1.4.1　前期网站策划　20
1.4.2　规划站点结构　20
1.4.3　收集网站相关素材　20
1.4.4　网页的版式与布局分析　20
1.4.5　确定网页的主色调　21
1.4.6　设计网站页面　21
1.4.7　切割和优化网页图像　22
1.4.8　制作网站HTML页面　22
1.4.9　开发动态网站功能模块　22
1.4.10　申请域名和服务器空间　22
1.4.11　测试并上传网站　22
1.4.12　网站的更新与维护　22

Photoshop　CC篇
第2章　Photoshop CC入门　23
2.1　“网页三剑客”之Photoshop　24
2.1.1　选择合适的网页图像处理软件　24
2.1.2　了解网页图像处理软件——Photoshop　24
2.2　认识Photoshop CC工作界面　25
2.3　文件的基本操作　25
2.3.1　课堂案例——新建一个网页常用尺寸的文档　26
2.3.2　新建文件　27
2.3.3　打开文件　29
2.3.4　保存文件　29
2.3.5　导入文件　29
2.3.6　置入文件　29
2.3.7　导出文件　30
2.3.8　关闭文件　30
2.4　图像编辑辅助操作　31
2.4.1　课堂案例——在Photoshop中查看网页图像　31
2.4.2　使用标尺和参考线　32
2.4.3　课堂案例—校正倾斜图像　33
2.4.4　使用“裁剪工具”　34
2.4.5　使用“裁切”命令　35
2.5　调整网页图像　35
2.5.1　课堂案例—修改网页图像大小　35
2.5.2　“图像大小”对话框　36
2.5.3　“画布大小”对话框　37
2.6　课堂练习——制作镜面投影效果　38
2.7　课后习题——裁剪网页图像　38
第3章　使用Photoshop CC处理网页文本　39
3.1　输入文本　40
3.1.1　课堂案例—输入广告文字　40
3.1.2　文字工具组　41
3.1.3　文字工具的“选项”栏　41
3.2　编辑文本　42
3.2.1　课堂案例—制作淘宝促销广告　42
3.2.2　“字符”面板　45
3.3　制作特殊文字效果　46
3.3.1　课堂案例—制作变形广告文字　46
3.3.2　创建变形文字　48
3.3.3　课堂案例——制作路径文字　49
3.3.4　路径文字　50
3.4　使用“图层”面板　50
3.4.1　课堂案例——制作游戏网站导航　50
3.4.2　“图层”面板　53
3.4.3　图层的基本操作　54
3.5　图层样式　55
3.5.1　课堂案例——使用图层样式制作网页广告文字　55
3.5.2　添加图层样式　57
3.6　课堂练习——制作网站导航菜单　58
3.7　课后习题——制作网页图文混排　58
第4章　修改网页图像的形状和颜色　59
4.1　创建与编辑选区　60
4.1.1　课堂案例——制作精美网站促销广告　60
4.1.2　选框工具组　63
4.1.3　课堂案例——去除图像不需要的内容　63
4.1.4　套索工具组　65
4.1.5　魔棒工具组　65
4.1.6　修改选区　65
4.2　修改图像　66
4.2.1　课堂案例——使用仿制图章工具复制图像　67
4.2.2　图章工具组　68
4.2.3　橡皮擦工具组　69
4.2.4　课堂案例——去除水印　69
4.2.5　修复工具组　71
4.3　调整网页图像的颜色　71
4.3.1　课堂案例——调整网页中的图像　72
4.3.2　自动调整命令　73
4.3.3　“亮度 对比度”命令　73
4.3.4　课堂案例——调整网站广告的色调　73
4.3.5　“色相 饱和度”命令　75
4.3.6　课堂案例——替换图像颜色　75
4.3.7　“替换颜色”命令　77
4.4　课堂练习——调整网站广告效果　77
4.5　课后习题——匹配网站广告颜色　78
第5章　绘制网页元素　79
5.1　基本绘图工具　80
5.1.1　课堂案例——设计网站广告图片　80
5.1.2　画笔工具　82
5.1.3　铅笔工具　83
5.2　矢量绘图工具　83
5.2.1　课堂案例——制作网站水晶质感按钮　83
5.2.2　矩形工具　87
5.2.3　椭圆工具　88
5.2.4　圆角矩形工具　88
5.2.5　多边形工具　88
5.2.6　直线工具　89
5.2.7　自定形状工具　89
5.3　钢笔工具　89
5.3.1　课堂案例——设计教育网站Logo　90
5.3.2　钢笔工具　94
5.3.3　添加和删除锚点　95
5.3.4　课堂案例——设计网站广告页面　95
5.3.5　选择路径与锚点　101
5.3.6　调整路径　101
5.3.7　变换路径　102
5.4　课堂练习——设计网站实用图标　102
5.5　课后习题——设计企业网站页面　103
第6章　网页动画制作与切片输出　104
6.1　创建与编辑切片　105
6.1.1　课堂案例——为网页创建切片　105
6.1.2　创建切片　106
6.1.3　选择和移动切片　106
6.1.4　删除切片　107
6.2　图像优化与输出　107
6.2.1　课堂案例——创建切片并输出网页　107
6.2.2　优化图像　109
6.2.3　输出图像　109
6.3　创建Gif动画　110
6.3.1　课堂案例——创建网页Gif动画　110
6.3.2　认识“时间轴”面板　114
6.4　课堂练习——将图片输出为HTML网页　116
6.5　课后习题——制作Gif广告条　116
Flash　CC篇
第7章　Flash CC入门　117
7.1　“网页三剑客”之Flash　118
7.1.1　Flash动画基础　118
7.1.2　Flash动画的应用及发展背景　118
7.2　Flash CC工作界面　120
7.2.1　课堂案例——自定义Flash CC工作区　121
7.2.2　认识Flash CC工作界面　122
7.2.3　选择适合的工作区　123
7.3　新建Flash文件　124
7.3.1　课堂案例——通过Flash模板快速制作动画　124
7.3.2　“新建文档”对话框　126
7.3.3　“从模板新建”对话框　126
7.3.4　设置Flash文档属性　127
7.4　打开和保存Flash文件　128
7.4.1　课堂案例——打开Flash文件　128
7.4.2　保存Flash文件　129
7.4.3　另存为Flash文件　129
7.4.4　另存为Flash模板文件　130
7.4.5　关闭Flash文件　130
7.5　课堂练习——制作海底世界动画　130
7.6　课后习题——制作下雨动画　131
第8章　掌握Flash CC的绘图技法　132
8.1　使用基本绘图工具　133
8.1.1　课堂案例——绘制卡通表情　133
8.1.2　矩形工具和基本矩形工具　135
8.1.3　椭圆工具和基本椭圆工具　136
8.1.4　填充颜色和笔触颜色　137
8.1.5　课堂案例——绘制卡通向日葵　138
8.1.6　多角星形工具　142
8.1.7　线条工具　143
8.1.8　铅笔工具　143
8.1.9　刷子工具　143
8.1.10　橡皮擦工具　144
8.2　高级绘图工具　145
8.2.1　课堂案例——绘制可爱雪人　145
8.2.2　钢笔工具　148
8.2.3　调整锚点和锚点转换　148
8.2.4　添加和删除锚点　149
8.3　课堂练习——绘制可爱卡通猫　149
8.4　课后习题——绘制苹果　149
第9章　基础Flash动画制作　151
9.1　逐帧动画　152
9.1.1　课堂案例——制作人物舞蹈动画　152
9.1.2　逐帧动画的特点　154
9.1.3　帧、过渡帧、关键帧、空白关键帧　154
9.2　形状补间动画　155
9.2.1　课堂案例——制作太阳公公动画　155
9.2.2　形状补间动画的特点　157
9.2.3　认识“时间轴”面板　157
9.2.4　帧的编辑操作　158
9.3　补间动画　160
9.3.1　课堂案例——文字淡入淡出动画　160
9.3.2　补间动画的特点　164
9.3.3　什么是元件？　164
9.3.4　元件的类型　164
9.3.5　“动画预设”面板　164
9.4　传统补间动画　164
9.4.1　课堂案例——制作卡通角色入场动画　165
9.4.2　传统补间动画的特点　168
9.4.3　应用滤镜效果　169
9.5　课堂练习——制作圣诞老人飞入动画　169
9.6　课后习题——制作图像切换动画　170
第10章　高级Flash动画制作　171
10.1　引导线动画　172
10.1.1　课堂案例——制作汽车路径动画　172
10.1.2　引导线动画的特点　174
10.1.3　创建引导层和运动引导层　174
10.2　遮罩动画　175
10.2.1　课堂案例——多层次遮罩动画　175
10.2.2　遮罩动画的特点　177
10.3　3D动画　177
10.3.1　课堂案例——制作3D旋转动画　177
10.3.2　3D旋转工具　182
10.3.3　3D平移工具　182
10.4　为动画添加音乐　183
10.4.1　课堂案例——添加背景音乐　183
10.4.2　Flash中支持的音频格式　186
10.4.3　支持的音频类型　187
10.4.4　设置音频属性　187
10.5　为动画导入视频　188
10.5.1　课堂案例——制作网站视频广告　188
10.5.2　Flash中支持的视频格式　190
10.5.3　“导入视频”对话框　191
10.6　课堂练习——制作3D平移动画　191
10.7　课后习题——制作图像切换遮罩动画　192
第11章　广告文字动画和按钮动画　193
11.1　广告文字动画　194
11.1.1　课堂案例——制作广告文字动画　194
11.1.2　文本类型　196
11.1.3　设置文本属性　197
11.1.4　移动和选择文本　197
11.1.5　课堂案例——制作闪烁文字动画　198
11.1.6　为文本设置超链接　200
11.1.7　分离文本　200
11.2　按钮动画　200
11.2.1　课堂案例——制作按钮菜单动画　201
11.2.2　元件的中心点和注册点　203
11.2.3　编辑元件　204
11.2.4　课堂案例——制作游戏按钮动画　205
11.2.5　认识“库”面板　208
11.2.6　管理库项目　209
11.3　课堂练习——制作发光文字动画　210
11.4　课后习题——制作翻转按钮动画　210
Dreamweaver　CC篇
第12章　Dreamweaver CC入门　211
12.1　“网页三剑客”之Dreamweaver　212
12.1.1　了解网页制作软件——Dreamweaver　212
12.1.2　Dreamweaver在网页制作方面的优势　212
12.2　认识Dreamweaver CC工作界面　212
12.3　网页文件的基础操作　213
12.3.1　课堂案例——制作**个HTML页面　214
12.3.2　新建网页　215
12.3.3　打开网页　216
12.3.4　预览网页　216
12.3.5　保存和关闭网页　217
12.4　创建站点　218
12.4.1　课堂案例——创建站点并设置远程服务器　218
12.4.2　切换站点　220
12.4.3　“管理站点”对话框　220
12.5　课堂练习——创建本地静态站点　221
12.6　课后习题——在代码视图中创建HTML页面　222
第13章　在网页中插入基础网页元素　223
13.1　设置网页整体属性　224
13.1.1　课堂案例——控制欢迎页面整体外观　224
13.1.2　设置外观（CSS）　226
13.1.3　设置外观（HTML）　226
13.1.4　设置连接（CSS）　227
13.1.5　设置标题（CSS）　227
13.1.6　设置标题和编码　227
13.1.7　设置跟踪图像　228
13.2　在网页中添加文本　228
13.2.1　课堂案例——制作关于我们页面　229
13.2.2　在网页中输入文本的方法　230
13.2.3　设置文本属性　230
13.2.4　插入水平线　231
13.2.5　插入时间　232
13.2.6　插入特殊字符　232
13.3　在网页中创建项目列表和编号列表　232
13.3.1　课堂案例——制作新闻列表　233
13.3.2　设置项目列表和编号列表属性　235
13.4　在网页中插入图像　236
13.4.1　课堂案例——制作游戏介绍页面　236
13.4.2　网页图像格式　238
13.4.3　设置图像属性　238
13.4.4　“插入鼠标经过图像”对话框　240
13.5　课堂练习——制作图像页面　240
13.6　课后习题——制作文本网页　240
第14章　创建网页链接　242
14.1　创建普通超链接　243
14.1.1　课堂案例——创建文字和图像链接　243
14.1.2　相对路径　245
14.1.3　绝对路径　245
14.1.4　外部链接和内部链接　246
14.1.5　超链接打开方式　246
14.2　创建特殊超链接　246
14.2.1　课堂案例——创建空链接和下载链接　247
14.2.2　空链接　248
14.2.3　下载链接　248
14.2.4　课堂案例——创建E-mail链接　248
14.2.5　电子邮件链接　250
14.2.6　脚本链接　250
14.2.7　图像热点工具　250
14.3　课堂练习——创建脚本链接　250
14.4　课后习题——创建图像热点链接　251
第15章　在网页中运用多媒体元素　252
15.1　HTML5 Audio和HTML5 Video　253
15.1.1　课堂案例——为网页插入HTML5视频和音频　253
15.1.2　插入HTML5 Audio并设置属性　255
15.1.3　插入HTML5 Video并设置属性　256
15.2　在网页中插入Flash动画　256
15.2.1　课堂案例——制作Flash网页　257
15.2.2　设置Flash属性　258
15.3　在网页中插入FLV视频　259
15.3.1　课堂案例——制作FLV视频页面　259
15.3.2　“插入FLV视频”对话框　260
15.4　在网页中插入普通视频　261
15.4.1　课堂案例——在网页中插入视频　261
15.4.2　网页中常用视频格式　263
15.4.3　在网页中添加背景音乐　263
15.4.4　网页中支持的音频格式　263
15.5　课堂练习——为网页添加背景音乐　264
15.6　课后习题——制作Flash欢迎页　264
第16章　CSS样式与Div CSS布局　265
16.1　创建CSS样式　266
16.1.1　课堂案例——创建标签CSS样式和类CSS样式　266
16.1.2　什么是CSS样式　268
16.1.3　CSS样式的基本写法　269
16.1.4　CSS样式的优越性　269
16.1.5　课堂案例——创建ID CSS样式和复合CSS样式　269
16.1.6　全新的“CSS设计器”面板　272
16.1.7　编辑CSS样式　273
16.2　丰富的CSS样式设置　273
16.2.1　课堂案例——制作图像展示页面　274
16.2.2　布局样式详解　275
16.2.3　课堂案例——制作网页文本介绍　276
16.2.4　文本样式详解　277
16.2.5　课堂案例——为网页中的图像添加边框效果　278
16.2.6　边框样式详解　280
16.2.7　课堂案例——设置网页背景图像　280
16.2.8　背景样式详解　282
16.2.9　课堂案例——美化新闻列表　283
16.2.10　其他样式详解　284
16.3　CSS样式的特殊应用　284
16.3.1　课堂案例——制作游戏网站新闻　284
16.3.2　CSS类选区　286
16.3.3　课堂案例——在网页中实现特殊字体效果　286
16.3.4　Web字体　288
16.3.5　Adobe Edge Web Fonts　288
16.4　Div CSS布局　289
16.4.1　课堂案例——CSS盒模型　289
16.4.2　了解CSS盒模型　291
16.4.3　CSS盒模型要点　291
16.5　课堂练习——创建网页中超链接CSS样式　292
16.6　课后习题——网页布局中的空白边叠加　292
第17章　制作网页表单　293
17.1　在网页中应用常用表单元素　294
17.1.1　课堂案例——制作用户登录页面　294
17.1.2　常用表单元素　298
17.1.3　文本域属性设置　299
17.1.4　图像按钮属性设置　300
17.1.5　课堂案例——制作网站投票　301
17.1.6　单选按钮属性设置　303
17.1.7　复选框属性设置　303
17.1.8　课堂案例——制作搜索栏　303
17.1.9　选择域属性设置　306
17.1.10　按钮、重置按钮和提交按钮　306
17.2　在网页中运用HTML5表单元素　307
17.2.1　课堂案例——制作网站留言表单页面　307
17.2.2　HTML5表单元素　309
17.2.3　电子邮件　310
17.2.4　Url　311
17.2.5　Tel　311
17.3　课堂练习——制作登录窗口　312
17.4　课后习题——制作用户注册页面　312
第18章　为网页添加特效　313
18.1　为网页添加行为　314
18.1.1　课堂案例——为网页添加弹出信息　314
18.1.2　什么是事件　315
18.1.3　什么是动作　316
18.1.4　课堂案例——为网页添加弹出广告　316
18.1.5　“打开浏览器窗口”对话框　317
18.2　为网页添加文本行为　317
18.2.1　课堂案例——为网页添加状态栏文本　317
18.2.2　设置容器的文本　318
18.2.3　设置文本域文字　319
18.2.4　设置框架文本　319
18.3　为网页添加jQuery效果　319
18.3.1　课堂案例——实现网页元素的动态隐藏　320
18.3.2　了解jQuery效果　321
18.4　课堂练习——检查网页表单　322
18.5　课后习题——改变网页元素的属性　322
网站案例篇
第19章　制作社区类网站　324
19.1　设计社区类网站首页面　325
19.2　制作网站Flash动画　329
19.3　制作社区网站页面　336