项目一 网页设计基础 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