编者认真调研网页设计与制作工作的最新需求，对本书的教学内容、教学过程、教学案例、教学 方法进行系统设计和整体优化，努力满足教学需求和帮助教师提升教学效率。本书使用网页制作工具 Dreamweaver 并基于 Web 技术标准 HTML5 和 CSS3 设计与制作网页。 本书将教学内容划分为 8 个模块，理论知识分为创建站点、超链接应用、表格应用、表单应用、网页布局、模板应用、特效制作、网站整合 8 个部分，选取购物网站“易购网”作为网页设计示例，将训练任务分为制作商品简介网页、制作帮助信息网页、制作购物车网页、制作注册和登录网页、制 作商品筛选网页、制作商品推荐网页、制作商品详情网页、制作购物网站首页 8 类。每个模块设置了两个教学层次：渐进训练和探索训练。渐进训练可以帮助读者循序渐进地学习和掌握电脑版网页的制 作方法，探索训练主要帮助读者学习和掌握触屏版网页的制作方法。本书围绕 25 个真实的网页设计与制作任务展开，采用“行动导向、任务驱动、案例教学、理论实践一体化”的教学方法，全方位促进读者网页设计技能水平的提升，以满足职业岗位的需求。 本书可以作为普通高等院校、高等或中等职业院校和高等专科院校相关专业网页设计与制作的教材，也可以作为网页设计与制作的培训用书及技术交流用书。

1."十三五"职业教育国家规划教材改版 2.配套PPT课件、代码源文件等教学资源，并增加了微课视频讲解知识点及操作，供读者参考学习 3.项目任务式结构，带领读者完成网页网站制作

陈承欢，三级教授，高级工程师，软件设计师，湖南省省级专业带头人，湖南省青年骨干教师，武汉大学软件工程专业，湖南铁道职业技术学院教务处处长。2008年，曾赴澳大利亚坎培门理工学院培训交流，2015年，曾赴加拿大圣力嘉学院培训交流，2019年，曾赴英国、德国学习交流。主持开发职业教育特色教材50多本，其中国家级“十一五”规划教材4本，国家级“十二五”规划教材10本，国家级“十三五”规划教材7本。国家精品课程与国家精品共享课程配套教材1本，国家职业教育资源库配套教材3本。主持《网页设计与制作》国家精品课程，主持《网页设计与制作》国家精品共享课程，主持《计算机维护与维修》《实用工具软件应用》《网页样式设计》3门国家资源库课程。国家级教学成果奖二等奖1项，湖南省职业教育教学成果奖特等奖1项、三等奖1项，湖南省教育教学改革发展优秀成果奖参等奖1项。

模块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