HTML5+CSS3网页设计与制作实战(项目式)(第5版)(微课版)

模块1
创建站点与制作商品简介
网页 1
教学导航 1
渐进训练 2
【任务1-1】 制作电脑版商品简介
网页0101．html 2
【任务1-1-1】启动Dreamweaver与
初识其工作界面 2
【任务1-1-2】认识浏览器窗口的基本
组成和网页的基本组成
元素 6
【任务1-1-3】创建站点
“易购网” 9
【任务1-1-4】管理本地站点 10
【任务1-1-5】管理网站中的文件夹和
文件 13
【任务1-1-6】设置网页的首选项 14
【任务1-1-7】新建网页文档0101．html
与设置页面属性 16
【任务1-1-8】在网页中输入与编辑
文本 22
【任务1-1-9】网页文档的基本操作 24
【任务1-1-10】在网页中插入与编辑
图像 26
【任务1-1-11】使用“资源”面板管理
网站中的资源 28
【任务1-1-12】设置网页0101．html的
头部内容 30
【任务1-1-13】添加CSS代码美化网页
的文本与图片 32
探索训练 35
【任务1-2】 制作触屏版商品简介
网页0102．html 35
析疑解惑 37
模块小结 46
模块习题 46

模块2
超链接应用与制作帮助信息
网页 49
教学导航 49
渐进训练 49
【任务2-1】 设计与制作电脑版帮助
信息网页0201．html 49
【任务2-1-1】规划与设计“易购网”
的通用布局结构 50
【任务2-1-2】规划与设计“易购网”
帮助信息网页的布局
结构 53
【任务2-1-3】在网页中添加与编辑
列表 55
【任务2-1-4】创建顶部导航栏和
插入Logo 57
【任务2-1-5】创建底部横向友情链接
导航栏 62
【任务2-1-6】创建左侧帮助导航栏与
添加相应帮助内容 64
【任务2-1-7】创建底部帮助导航栏 70
【任务2-1-8】创建多种形式的
超链接 73
探索训练 76
【任务2-2】 制作触屏版帮助信息
网页0202．html 76
析疑解惑 79
模块小结 80
模块习题 80

模块3
表格应用与制作购物车
网页 82
教学导航 82
渐进训练 82
【任务3-1】 制作电脑版购物车
网页0301．html 82
【任务3-1-1】在网页中插入与设置
表格 83
【任务3-1-2】使用表格制作购物车
网页 88
探索训练 92
【任务3-2】 制作触屏版购物车
网页0302．html 92
析疑解惑 97
模块小结 101
模块习题 101

模块4
表单应用与制作注册和登录
网页 103
教学导航 103
渐进训练 103
【任务4-1】 制作与美化电脑版用户
注册网页0401．html 103
【任务4-1-1】创建电脑版用户注册
网页 104
【任务4-1-2】美化电脑版用户注册
网页 112
【任务4-2】 制作与美化电脑版用户
登录网页0402．html 118
【任务4-2-1】创建电脑版用户登录
网页 118
【任务4-2-2】美化电脑版用户登录
网页 119
探索训练 123
【任务4-3】 制作触屏版用户注册
网页0403．html 123
【任务4-4】 制作触屏版用户登录
网页0404．html 127
析疑解惑 130
模块小结 130
模块习题 130

模块5
网页布局与制作商品筛选
网页 132
教学导航 132
渐进训练 133
【任务5-1】 设计与制作电脑版商品
筛选网页0501．html 133
【任务5-1-1】规划与设计商品筛选
网页的布局结构 134
【任务5-1-2】布局与美化商品筛选
网页的左侧列表
内容 136
【任务5-1-3】布局与美化商品筛选
网页的右侧主体
内容 141
探索训练 149
【任务5-2】 制作触屏版促销商品
页面0502．html 149
析疑解惑 153
模块小结 166
模块习题 167
模块6
模板应用与制作商品推荐
网页 168
教学导航 168
渐进训练 168
【任务6-1】 设计与制作电脑版商品
推荐网页0601．html 168
【任务6-1-1】规划与设计商品推荐
网页的布局结构 169
【任务6-1-2】制作用于生成网页模板的
网页0601．html 173
【任务6-2】 制作基于模板的电脑版
商品推荐网页0602．html 178
【任务6-2-1】基于网页0601．html创建
网页模板0601．dwt 178
【任务6-2-2】创建基于模板的网页
0602．html 184
【任务6-2-3】在网页0602．html中插入
库项目和代码片断 188
探索训练 192
【任务6-3】 设计与制作触屏版商品
促销页面0603．html 192
【任务6-4】 制作基于模板的触屏版商品
促销页面0604．html 197
析疑解惑 198
模块小结 199
模块习题 199

模块7
特效制作与制作商品详情
网页 201
教学导航 201
渐进训练 201
【任务7-1】 设计与制作电脑版商品
详情网页0701．html 201
【任务7-1-1】规划与设计商品详情
网页的布局结构 202
【任务7-1-2】在网页顶部显示当前
日期和问候语 207
【任务7-1-3】网页中动态改变局部
区域文本字体大小 212
【任务7-1-4】在网页中自动滚动
图片 213
【任务7-1-5】在网页中实现选项卡
功能 215
【任务7-1-6】在网页中实现商品图片
轮换展示与放大
功能 218
探索训练 224
【任务7-2】 制作触屏版商品详情
网页0702．html 224
析疑解惑 230
模块小结 234
模块习题 234

模块8
网站整合与制作购物网站
首页 236
教学导航 236
渐进训练 236
【任务8-1】 熟悉网站开发流程和
规范 236
【任务8-2】 分析与规划购物网站 239
【任务8-3】 设计与制作电脑版网站
首页0801．html 243
【任务8-3-1】规划与设计电脑版网站
首页的主体布局
结构 244
【任务8-3-2】设计与实现电脑版网站
首页的导航结构 247
【任务8-3-3】设计与实现电脑版网站
首页的各个局部板块
内容 257
【任务8-3-4】实现电脑版网站首页的
特效功能 263
【任务8-3-5】设置“易购网”的
超链接 267
【任务8-4】 测试网站 267
【任务8-5】 发布网站 271
【任务8-6】 推广与维护网站 273
探索训练 277
【任务8-7】 设计与制作触屏版网站
首页0802．html 277
析疑解惑 285
模块小结 288








































模块习题 288

附录A
HTML5常用标签及其
属性 290

附录B
CSS属性 294

附录C
CSS选择器 295

参考文献 296