HTML5+CSS3网页设计与制作实用教程（第3版）

　　本书使用*新网页制作工具Dreamweaver CC、*新Web 技术标准HTML5 和CSS3 设计与制作网页。本书将教学内容划分为8 个教学单元，理论知识分为“站点创建－超链接应用－表格应用－表单应用－网页布局－模板应用－网页特效－网站整合”这8 个部分，选取购物网站作为网页设计载体，将训练任务分为“制作商品简介页面－制作帮助信息页面－制作购物车页面－制作注册登录页面－制作商品筛选页面－制作商品推荐页面－制作商品详情页面－制作购物网站首页”8 类。每个教学单元设置了两个教学层次（渐进训练和探索训练），“渐进训练”部分循序渐进地练习电脑版网页的制作，“探索训练”部分主要训练触屏版网页的制作。全书围绕25 个真实的网页设计制作任务展开，采用“任务驱动、案例教学、理论实践一体化”的教学方法，全方位促进读者网页设计技能的提升，以满足职业岗位的需求。本书可以作为院校各专业“网页设计与制作”课程的教材，也可以作为网页设计与制作的培训用书及技术参考书。

　　陈承欢　三级教授　高级工程师　软件设计师　湖南省省级专业带头人，国家精品课程与精品共享课程《网页设计与制作》主持人，国家资源库课程《计算机维护与维修》和《网页样式设计与应用》主持人，湖南省教育科学重点研究课题主持人，湖南省教学改革项目主持人。多年来致力于总结教学规律、探索教学模式、创新教学方法、开发特色教材。主持开发高职特色教材20多本，其中“十一五”国家级规划教材4本，“十二五”国家级规划教材11本。成功地实现了以真实项目或任务为载体重构教学内容、面向教学全过程设置教学环节、“教、学、做、评”一体设计，在教学实施中取得了良好的教学效果。

单元 1 站点创建与制作商品简介页面 1
教学导航　1
渐进训练　2
任务　1-1 制作电脑版商品简介页面0101．html　2
【任务1-1-1】启动Dreamweaver　CC 与初识其工作界面　2
【任务1-1-2】认识浏览器的基本组成和网页的基本组成元素　8
【任务1-1-3】创建站点“易购网”　11
【任务1-1-4】管理本地站点　13
【任务1-1-5】管理网站中的文件和文件夹　15
【任务1-1-6】设置网页的首选项　16
【任务1-1-7】新建网页文档0101．html　与设置页面属性　18
【任务1-1-8】在网页中输入与编辑文本　24
【任务1-1-9】网页文档的基本操作　28
【任务1-1-10】在网页中插入与编辑图像　29
【任务1-1-11】使用【资源】面板管理网站中的资源　31
【任务1-1-12】设置页面0101．html　的头部内容　34
【任务1-1-13】定义CSS　代码美化网页的文本与图片　35
探索训练　39
任务　1-2 制作触屏版商品简介页面0102．html　39
析疑解惑　41
单元小结　51
单元习题　51
单元　2 超链接应用与制作帮助信息页面　53
教学导航　53
渐进训练　53
任务　2-1 设计与制作电脑版帮助信息页面0201．html　53
【任务2-1-1】规划与设计“易购网”的通用布局结构　54
【任务2-1-2】规划与设计“易购网”帮助页面的布局结构　57
【任务2-1-3】在网页中添加与编辑列表　59
【任务2-1-4】创建顶部导航栏和插入LOGO　图片　61
【任务2-1-5】创建底部横向友情链接导航栏　67
【任务2-1-6】创建左侧帮助导航栏与添加相应的帮助内容　69
【任务2-1-7】创建底部帮助导航栏　75
【任务2-1-8】创建多种形式的超级链接　78
探索训练　82
任务　2-2 制作触屏版帮助信息页面0202．html　82
析疑解惑　85
单元小结　86
单元习题　86
单元　3 表格应用与制作购物车页面　88
教学导航　88
渐进训练　88
任务　3-1 制作电脑版购物车页面0301．html　88
【任务3-1-1】在网页中插入与设置表格　89
【任务3-1-2】使用表格制作购物车页面　95
探索训练　99
任务　3-2 制作触屏版购物车页面0302．html　99
析疑解惑　104
单元小结　108
单元习题　108
单元　4 表单应用与制作注册登录页面　110
教学导航　110
渐进训练　110
任务　4-1 制作与美化电脑版用户注册网页0401．html　110
【任务4-1-1】创建电脑版用户注册网页　111
【任务4-1-2】美化电脑版用户注册网页　120
任务　4-2 制作与美化电脑版用户登录网页0402．html　126
【任务4-2-1】创建电脑版用户登录网页　126
【任务4-2-2】美化电脑版用户登录网页　128
探索训练　133
任务　4-3 制作触屏版用户注册网页0403．html　133
任务　4-4 制作触屏版用户登录网页0404．html　136
析疑解惑　140
单元小结　140
单元习题　141
单元　5 网页布局与制作商品筛选页面　142
教学导航　142
渐进训练　143
任务　5-1 设计与制作电脑版商品筛选页面0501．html　143
【任务5-1-1】规划与设计商品筛选页面的布局结构　143
【任务5-1-2】布局与美化商品筛选页面的左侧列表内容　146
【任务5-1-3】布局与美化商品筛选页面的右侧主体内容　151
探索训练　160
任务　5-2 制作触屏版促销商品页面0502．html　160
析疑解惑　165
单元小结　180
单元习题　181
单元　6 模板应用与制作商品推荐页面　182
教学导航　182
渐进训练　182
任务　6-1 设计与制作电脑版商品推荐页面0601．html　182
【任务6-1-1】规划与设计商品推荐页面的布局结构　183
【任务6-1-2】制作用于生成网页模板的网页0601．html　187
任务　6-2 制作基于模板的电脑版商品推荐页面0602．html　193
【任务6-2-1】基于网页0601．html　创建网页模板0602．dwt　193
【任务6-2-2】创建基本模板的网页0602．html　199
【任务6-2-3】在网页0602．html　中插入库项目和代码片段　203
探索训练　207
任务　6-3 设计与制作触屏版商品促销页面0603．html　207
任务　6-4 设计与制作触屏版商品促销页面0604．html　213
析疑解惑　214
单元小结　215
单元习题　215
单元　7 网页特效与制作商品详情页面　216
教学导航　216
渐进训练　217
任务　7-1 设计与制作电脑版商品详情页面0701．html　217
【任务7-1-1】规划与设计商品详情页面的布局结构　218
【任务7-1-2】在网页顶部显示当前日期和问候语　223
【任务7-1-3】网页中动态改变局部区域文本字体大小　227
【任务7-1-4】在网页中自动滚动图片　229
【任务7-1-5】在网页中实现选项卡功能　231
【任务7-1-6】在网页中实现商品图片轮换展示与放大功能　234
探索训练　241
任务　7-2 制作触屏版商品详情页面0702．html　241
析疑解惑　247
单元小结　251
单元习题　251
单元　8 网站整合与制作购物网站首页　253
教学导航　253
渐进训练　253
任务　8-1 熟悉网站开发流程和规范　253
任务　8-2 分析与规划购物网站　258
任务　8-3 设计与制作电脑版网站首页0801．html　261
【任务8-3-1】规划与设计电脑版网站首页的主体布局结构　262
【任务8-3-2】设计与实现电脑版网站首页的导航结构　267
【任务8-3-3】设计与实现电脑版网站首页的各个局部版块内容　278
【任务8-3-4】实现电脑版网站首页的特效功能　284
【任务8-3-5】设置“易购网”的超链接　290
任务　8-4 测试网站　290
任务　8-5 发布网站　295
任务　8-6 推广与维护网站　298
探索训练　302
任务　8-7 设计与制作触屏版网站首页0802．html　302
析疑解惑　310
单元小结　313
单元习题　313
附录　HTML5 的常用标签及其属性　315