Dreamweaver网页设计立体化教程(微课版)(Dreamweaver 2020)

项目一 网页设计基础 1

任务一　规划“佳美馨装饰”网站结构　2

一、任务描述　2

（一）任务背景　2

（二）任务目标　2

二、相关知识　2

（一）网站、网页、主页的概念　2

（二）网页设计常用术语　3

（三）网页的构成元素　4

（四）常用网页制作软件　5

（五）HTML　6

（六）HTML5　8

（七）JavaScript　9

（八）网站开发流程　9

（九）网页设计内容　11

（十）网页设计原则　11

三、任务实施　12

任务二　创建“佳美馨装饰”站点　12

一、任务描述　12

（一）任务背景　12

（二）任务目标　13

二、相关知识　13

（一）认识Dreamweaver　2020 的操作界面　13

（二）创建和管理站点　16

（三）管理站点中的文件和文件夹　18

三、任务实施　19

（一）创建站点　19

（二）编辑站点　19

（三）管理站点文件和文件夹　20

实训一　规划“中国皮影”网站的结构　22

实训二　创建“中国皮影”站点　23

课后练习　23

技巧提升　24



项目二　添加文本与表格　27

任务一　制作“佳美馨装饰简介”网页　28

一、任务描述　28

（一）任务背景　28

（二）任务目标　28

二、相关知识　28

（一）新建、保存与打开网页文件　28

（二）设置网页属性　30

（三）设置网页关键字和描述　33

（四）输入文本　33

（五）设置文本格式　34

（六）插入列表　35

（七）插入特殊字符　35

（八）插入日期　35

（九）插入水平线　35

三、任务实施　36

（一）新建网页并设置网页属性　36

（二）输入文本并设置格式　37

（三）插入特殊字符、日期和水平线　39

任务二　制作“佳美馨装饰——会员列表”网页　40

一、任务描述　41

（一）任务背景　41

（二）任务目标　41

二、相关知识　41

（一）插入表格　41

（二）选择表格　42

（三）在单元格中输入内容　44

（四）设置表格属性　44

（五）设置单元格属性　45

（六）合并和拆分单元格　45

（七）添加和删除行或列　46

三、任务实施　47

（一）插入表格并设置单元格属性　47

（二）输入表格内容　48

（三）导入表格数据并设置表格属性　49

实训一　制作“中国皮影——皮影戏”网页　50

实训二　制作“中国皮影——皮影起源传说”网页　51

课后练习　52

技巧提升　53



项目三　插入图像和多媒体元素　55

任务一　制作“佳美馨装饰——成功案例”栏目网页　56

一、任务描述　57

（一）任务背景　57

（二）任务目标　57

二、相关知识　58

（一）网页图像基础知识　58

（二）插入图像　58

（三）设置图像属性　59

（四）创建鼠标经过图像　61

（五）创建图像轮播　62

三、任务实施　63

（一）插入案例图像　63

（二）使用鼠标经过图像制作按钮　63

（三）插入案例轮播图　65

任务二　制作“佳美馨装饰——中式田园风格”内容网页　66

一、任务描述　66

（一）任务背景　66

（二）任务目标　66

二、相关知识　67

（一）插入视频　67

（二）插入音频　68

（三）插入动画　68

三、任务实施　69

（一）设置背景音乐　69

（二）插入并设置视频　69

（三）插入并设置动画　70

实训一　制作“中国皮影——皮影鉴赏”网页　71

实训二　制作“中国皮影——皮影的表演”网页　72

课后练习　73

技巧提升　75



项目四　创建超链接　77

任务一　创建“佳美馨装饰——网站地图”网页中的超链接　78

一、任务描述　78

（一）任务背景　78

（二）任务目标　78

二、相关知识　79

（一）认识超链接　79

（二）创建文本、图像超链接　81

三、任务实施　83

（一）创建文本超链接　83

（二）创建图像超链接　84

（三）创建图像热点超链接　84

（四）浏览超链接效果　85

任务二　创建“佳美馨装饰——联系我们”网页中的超链接　85

一、任务描述　86

（一）任务背景　86

（二）任务目标　87

二、相关知识　87

（一）认识锚点超链接　87

（二）认识文件下载超链接　88

（三）认识电子邮件超链接　88

（四）认识空链接　89

（五）认识脚本链接　89

三、任务实施　89

（一）创建锚点超链接　89

（二）创建文件下载超链接和电子邮件超链接　90

（三）创建脚本链接和空链接　91

实训一　制作“中国皮影——网站地图”网页　91

实训二　制作“中国皮影——皮影的制作流程”网页　93

课后练习　94

技巧提升　96



项目五　布局网页　99

任务一　使用div CSS 盒子模型布局“佳美馨装饰——公司荣誉”网页　100

一、任务描述　100

（一）任务背景　100

（二）任务目标　100

二、相关知识　100

（一）认识CSS　样式　101

（二）“CSS　设计器”面板　102

（三）CSS　样式的属性　103

（四）应用CSS　样式　107

（五）认识div CSS　盒子模型　107

（六）利用div CSS　盒子模型布局网页　108

三、任务实施　109

（一）创建并应用标签CSS　样式　109

（二）创建并应用ID　CSS 样式　110

（三）创建并应用类CSS　样式　111

（四）创建并应用后代CSS　样式　114

任务二　使用响应式布局制作“佳美馨装饰”首页　115

一、任务描述　115

（一）任务背景　115

（二）任务目标　116

二、相关知识　116

（一）认识响应式布局　116

（二）设置视口　116

（三）添加媒体查询　116

三、任务实施　118

（一）设置视口并添加媒体查询　118

（二）添加CSS　样式并预览效果　119

实训一　制作“中国皮影——皮影的地方特色”网页　120

实训二　制作“中国皮影”首页　122

课后练习　123

技巧提升　125



项目六　使用模板和库 127三居室装修案例” 网页　128

一、任务描述　128

（一）任务背景　128

（二）任务目标　129

二、相关知识　129

（一）认识模板　129

（二）创建模板　129

（三）编辑模板　130

（四）应用模板　131

三、任务实施　132

（一）创建“案例展示”模板　132

（二）从模板创建“原木简约风三居室装修案例”网页　134

任务二　在“装修方案精选”网页中使用库　135

一、任务描述　136

（一）任务背景　136

（二）任务目标　136

二、相关知识　136

（一）认识“资源”面板　137

（二）创建库项目　137

（三）编辑库项目　138

（四）插入库项目　138

三、任务实施　138

（一）创建“装修方案”库项目　138

（二）在网页中添加库项目　139西皮影”网页　140

实训二　使用库项目制作“中国皮影——皮影文创产品”网页　141

课后练习　143

技巧提升　144



项目七　使用表单和行为　145

任务一　在“佳美馨装饰——会员登录”网页中使用表单　146

一、任务描述　146

（一）任务背景　146

（二）任务目标　146

二、相关知识　147

（一）认识表单和表单元素　147

（二）插入表单并设置表单属性　147

（三）插入表单元素　148

三、任务实施　153

（一）创建表单并设置属性　153

（二）插入表单元素并设置属性　154

任务二　在“佳美馨装饰——会员登录”网页中使用行为　156

一、任务描述　157

（一）任务背景　157

（二）任务目标　157

二、相关知识　157

（一）认识行为　157

（二）认识“行为”面板　158

（三）添加行为　158

（四）修改行为　158

（五）删除行为　159

三、任务实施　159

（一）添加“检查表单”行为　159

（二）添加“弹出信息”行为　159

实训一　在“中国皮影——问卷调查”网页中使用表单　160

实训二　在“中国皮影——皮影图集”网页中使用行为　162

课后练习　164

技巧提升　166



项目八　制作移动端网页　167

任务一　制作移动端“装修案例”网页　168

一、任务描述　168

（一）任务背景　168

（二）任务目标　168

二、相关知识　168

（一）认识jQuery　Mobile　169

（二）创建jQuery　Mobile 网页效果　169

（三）使用jQuery　Mobile 组件　170

三、任务实施　174

（一）添加jQuery　Mobile 页面　174

（二）为页面添加内容　175

任务二　创建PHP页面　176

一、任务描述　177

（一）任务背景　177

（二）任务目标　177

二、相关知识　177

（一）安装PHP服务器　177

（二）编辑PHP页面　177

（三）浏览PHP页面　178

三、任务实施　178

（一）启动PHP服务器　178

（二）制作并浏览PHP页面　179

实训一　制作移动端“中国皮影”网页　179

实训二　制作移动端“问卷调查”和“调查结果”网页　181

课后练习　183

技巧提升　184



项目九　测试与发布网站　185

任务一　测试“佳美馨装饰”网站　186

一、任务描述　186

（一）任务背景　186

（二）任务目标　186

二、相关知识　186

（一）实时预览网页　187

（二）使用设备仿真功能预览网页在移动设备中的显示效果　187

三、任务实施　188

（一）实时预览“装修方案精选”网页　188

（二）预览“装修案例”网页在移动设备中的显示效果　189

任务二　发布“佳美馨装饰”网站　190

一、任务描述　190

（一）任务背景　190

（二）任务目标　190

二、相关知识　190

（一）认识域名　190

（二）认识网站空间　191

（三）发布网站　191

三、任务实施　192

（一）注册域名　192

（二）购买网站空间　194

（三）发布站点　196

实训　测试与发布“中国皮影”网站　198

课后练习　199

技巧提升　200



项目十　综合案例——“非遗文化”网站建设　201

任务一　前期规划　202

（一）分析网站的用户需求　202

（二）定位网站风格　202

（三）规划网站草图　202

（四）收集网站素材　202

（五）设计网页效果图　202

任务二　创建网站站点　202

任务三　制作网页模板　203

任务四　制作网站页面　208

（一）制作主页　208

（二）制作订购页面　211

实训一　制作珠宝公司“产品中心”网页　212

实训二　制作“微观多肉世界”网站　214

课后练习　215

技巧提升　217