网页设计与制作（Photoshop+Dreamweaver+Flash）立体化教程

项目一　网页设计基础　1

任务一　购物网站赏析　2

一、任务目标　2

二、相关知识　2

(一)网站、网页、主页概念　2

(二)网页常用术语　2

(三)常用网页制作软件　4

(四)HTML标记语言　5

三、任务实施　7

任务二　规划“蓉锦大学”网站　7

一、任务目标　7

二、相关知识　8

(一)网页设计内容　8

(二)网页设计原则　8

三、任务实施　9

(一)前期策划与内容组织　9

(二)搜集和整理资料　10

(三)网页效果图设计　10

(四)网页中动画设计　11

(五)网站页面设计制作　11

(六)网站测试与发布　12

实训　规划“果蔬网”网站　12

常见疑难解析　13

拓展知识　13

课后练习　14

项目二　Dreamweaver CS5的基本操作　15

任务一　创建“果蔬网”站点　16

一、任务目标　16

二、相关知识　16

(一)认识Dreamweaver CS5的工作界面　16

(二)Dreamweaver CS5参数设置　20

(三)命名规则　20

三、任务实施　21

(一)创建站点　21

(二)编辑站点　21

(三)管理站点和站点文件夹　22

任务二　制作“学校简介”页面　24

一、任务目标　24

二、相关知识　24

三、任务实施　25

(一)新建与保存网页　25

(二)设置页面属性　26

(三)输入文本　27

(四)设置文本格式　29

(五)插入网页其他元素　32

实训一　创建“蓉锦大学”站点　33

实训二　编辑“招生就业概况”网页　34

常见疑难解析　34

拓展知识　35

课后练习　36

项目三　编辑网页元素　37

任务一　制作“蓉锦大学”首页页面　38

一、任务目标　38

二、相关知识　38

(一)音频文件格式　38

(二)　视频文件格式　38

三、任务实施　39

(一)插入与编辑图像　39

(二)优化图像　40

(三)设置鼠标经过图像　42

(四)添加背景音乐　43

(五)插入SWF动画　44

任务二　为“果蔬网”网页创建超链接　45

一、任务目标　45

二、相关知识　46

(一)超链接的组成　46

(二)　超链接的种类　46

三、任务实施　47

(一)插入文本超链接　47

(二)创建图像超链接　49

(三)创建热点图片超链接　50

(四)创建锚点超链接　51

(五)创建电子邮件超链接　53

(六)创建外部超链接　54

(七)创建空链接　55

(八)创建脚本链接　55

实训一　制作果蔬网首页　57

实训二　为果蔬网创建超链接　58

常见疑难解析　58

拓展知识　59

课后练习　60

项目四　布局网页页面　61

任务一　制作“果蔬网优惠区”页面　62

一、任务目标　62

二、相关知识　62

(一)认识“表格”属性面板　62

(二)认识“单元格”属性面板　63

三、任务实施　63

(一)创建表格　63

(二)调整表格结构　65

(三)设置单元格属性　66

(四)在表格中添加内容　67

任务二　使用框架布局“蓉锦大学首页”页面　70

一、任务目标　70

二、相关知识　70

(一)版式设计基本类型　71

(二)版式设计准则　71

(三)框架和框架集　72

三、任务实施　74

(一)创建框架与框架集　74

(二)保存框架集与框架　75

(三)制作框架网页　76

实训一　制作“蓉锦大学导航”页面　77

实训二　使用框架布局果蔬网　78

常见疑难解析　79

拓展知识　79

课后练习　80

项目五　使用CSS+DIV统一页面风格　81

任务一　制作“享受生活”页面　82

一、任务目标　82

二、相关知识　82

(一)认识CSS样式　82

(二)CSS样式的各种属性设置　84

三、任务实施　88

(一)创建并应用CSS样式　88

(二)编辑CSS样式　93

任务二　使用CSS+DIV制作蓉锦大学教务处网页　94

一、任务目标　94

二、相关知识　95

(一)认识CSS+Div盒子模式　95

(二)盒子模型的优势　95

三、任务实施　96

(一)插入Div标签　96

(二)插入AP　Div　97

(三)使用CSS+DIV控制整个页面风格　99

(四)使用Spry制作导航栏　102

实训一　制作“公司文化”页面　104

实训二　制作“招生就业”页面　104

常见疑难解析　105

拓展知识　106

课后练习　106

项目六　库、模板、表单、行为的应用　107

任务一　配置动态网页数据源　130

一、任务目标　130

二、相关知识　130

(一)认识动态网页　130

(二)动态网页的开发流程　130

(三)Web服务器　131

三、任务实施　131

(一)安装与配置IIS　131

(二)使用Access创建数据表　133

(三)创建与配置动态站点　134

(四)创建数据源　136

任务二　制作登录数据管理页面　137

一、任务目标　138

二、相关知识　138

三、任务实施　138

(一)创建记录集　138

(二)创建插入记录　139

(三)插入重复区域　140

(四)分页记录集　140

实训一　制作“加入购物车”页面　141

实训二　制作蓉锦大学“用户登录”动态页面　142

常见疑难解析　143

拓展知识　143

课后练习　144

项目七　实现动态网页效果　129

任务一　制作“蓉锦大学馆藏资源”页面　108

一、任务目标　108

二、相关知识　108

(一)了解库的概念　108

(二)“资源”面板　108

三、任务实施　109

(一)创建库文件　109

(二)应用库文件　110

任务二　制作“果蔬网联系我们”页面　111

一、任务目标　111

二、相关知识　111

三、任务实施　112

(一)创建模板　112

(二)创建可编辑区域　112

(三)应用与管理模板　114

任务三　制作会员注册页面　115

一、任务目标　115

二、相关知识　116

(一)认识表单属性面板　116

(二)行为的基础知识　116

三、任务实施　118

(一)创建表单　118

(二)使用行为检查表单　123

(三)为网页添加弹出信息　124

(四)为网页添加打开浏览器窗口效果　124

实训一　完善蓉锦大学首页的登录版块　125

实训二　制作“蓉锦大学合作交流”页面　126

常见疑难解析　127

拓展知识　127

课后练习　128

项目八　Photoshop CS5的基本操作　145

任务一　制作“蓉锦大学首页”背景效果图　146

一、任务目标　146

二、相关知识　146

(一)网页中的图片格式　146

(二)位图、矢量图、分辨率　147

(三)认识Photoshop CS5的工作界面　148

三、任务实施　150

(一)新建图像文件　150

(二)创建参考线　151

(三)创建并填充选区　152

(四)描边选区　153

(五)复制并裁剪图像　154

(六)保存图像文件　155

任务二　制作“七月”首页背景　155

一、任务目标　155

二、相关知识　156

三、任务实施　156

(一)使用渐变工具填充颜色　156

(二)多种抠图方法抠取图像　158

(三)使用画笔工具　160

实训一　制作“登录”界面　162

实训二　制作网页悬浮广告效果图　164

常见疑难解析　164

拓展知识　165

课后练习　166

项目九　使用Photoshop　CS5处理图像　167

任务一　调整“果蔬网——时令果蔬”页面图片　168

一、任务目标　168

二、相关知识　168

(一)图像的色彩模式　168

(二)网页色彩搭配技巧　169

(三)网页色彩搭配注意事项　171

三、任务实施　172

(一)使用“色阶”调整图片　172

(二)使用“曲线”调整图片　173

(三)使用“色相/饱和度”调整图片　174

任务二　制作“蓉锦大学Logo”　176

一、任务目标　176

二、相关知识　176

(一)认识路径　176

(二)认识“路径”面板　177

三、任务实施　177

(一)使用形状工具绘制并编辑路径　177

(二)添加文字　179

任务三　制作“果蔬网”网页按钮　180

一、任务目标　180

二、相关知识　181

(一)图层的作用和类型　181

(二)认识“图层”面板　182

三、任务实施　183

(一)新建并分组图层　183

(二)添加图层样式　183

(三)设置图层混合模式　184

(四)使用滤镜制作质感效果　187

任务四　切片“果蔬网”局部效果图　188

一、任务目标　188

二、相关知识　188

三、任务实施　188

(一)创建切片　188

(二)保存切片　189

实训一　美化蓉锦大学网页图片　190

实训二　制作果蔬网网页标志区　191

常见疑难解析　191

拓展知识　192

课后练习　192

项目十　使用Flash CS5制作动画　193

任务一　制作“果蔬网banner”动画　194

一、任务目标　194

二、相关知识　194

(一)认识Flash CS5工作界面　194

(二)认识时间轴中的图层　196

(三)认识时间轴中的帧　197

三、任务实施　198

(一)新建Flash文件　198

(二)导入图像　198

(三)创建图层和插入关键帧　199

(四)保存Flash文件　203

任务二　制作“蓉锦大学首页”百叶窗动画　203

一、任务目标　203

二、相关知识　204

三、任务实施　205

(一)创建元件　205

(二)绘制并编辑形状　206

(三)编辑元件　207

(四)测试动画　210

(五)发布动画　210

任务三　制作“果蔬网”图片轮显动画　211

一、任务目标　211

二、相关知识　211

(一)变量　212

(二)数据类型　212

(三)ActionScript语句的基本语法　212

三、任务实施　213

(一)制作图片轮显背景　213

(二)添加轮显动作　214

实训一　制作飞机动画效果　215

实训二　制作百叶窗动画　216

常见疑难解析　217

拓展知识　217

课后练习　218

项目十一　微观多肉世界网站建设　219

任务一　前期规划　220

(一)分析网站需求　220

(二)定位网站风格　220

(三)规划草图　220

(四)收集素材　220

任务二　使用Photoshop CS5设计网页界面效果图　221

(一)设计页面效果图　221

(二)切片效果图并导出　233

任务三　使用Flash CS5制作图片轮显动画　234

(一)制作元件　234

(二)添加动作并测试动画　235

任务四　使用Dreamweaver CS5进行页面编辑　236

(一)制作主页　236

(二)制作其他页面　243

常见疑难解析　245

拓展知识　246

课后练习　246

本书主要讲解网页设计的基本流程、Dreamweaver CS5的基本操作，编辑页面元素，布局网页页面，使用CSS+DIV统一页面风格，使用库、模板、行为和表单，制作动态网页效果，Photoshop CS5的基本操作，使用Photoshop CS5处理图像，使用Flash CS5制作动画等知识。本书最后还安排了一个综合案例，进一步提高学生对知识的应用能力。
　　本书采用项目式、分任务讲解，每个任务主要由任务目标、相关知识和任务实施3个部分组成，然后再进行强化实训。每章最后还总结了常见疑难解析，并安排了相应的练习和实践。本书着重于对学生实际应用能力的培养，将职业场景引入课堂教学，因此可以让学生提前进入工作的角色。
　　本书适合作为职业院校网页设计专业以及计算机应用等相关专业的教材，也可作为各类社会培训学校相关专业的教材，同时还可供网页设计者、网页美工人员自学使用。