本书全面贯彻《国家职业教育改革实施方案》中强调的“三教”改革精神，注重产学研深度融合。编者与行业领先企业合作，共同进行课程开发，在书中融入新规范、新工艺与新技术，从职业教育实际出发，在内容设置上紧密对接电子商务网站建设岗位工作流程，依托真实项目，由浅入深，融“教、析、学、做、评、创”为一体，以“强化职业技能、引导创新能力”为目标，按照“课前自学”“课中任务”“课后提升”等学习过程进行编排。编者精心设计了“走进网页设计”“CSS 基础”“CSS 实现网页美化”“综合案例”四个项目，每个项目根据知识点设置了若干任务，以项目任务为主导，引导学生逐步进入任务描述、任务实施环节，最终达到完全掌握网页设计与制作相关知识和技能的目标。本书配有微课、动画等数字化教学资源，可有效攻破教学重难点。使用本书时，还可借助本书配有的网络教学平台实现全程智能教学管理，适时采集数据，依据平台记录，实现个性化学习和差异化指导。本书适合作为本科院校、职业院校电子商务专业相关课程的教材，也可供Web 前端设计人员或网页设计初学者学习和参考。

在当今互联网时代，随着电子商务的蓬勃发展，网页设计越来越受到企业与个人的重视。制作一个能够符合搜索引擎优化原理的网站，是很多企业与机构的需求。目前，网页制作的方法不再使用传统的表格布局技术，而是采用CSS+div 的方式实现各种内容的布局。div 是HTML 语言中的一个常用元素，而CSS+div 是网页布局的一种方法，这种布局方法区别于传统的Table 布局方法，可达到内容与代码相分离的效果。使用CSS+div 方法设计的网站是符合W3C 标准的，可以更方便搜索引擎的索引。 目前，网页设计与制作能力的培养，已成为以满足社会经济发展对高素质技术技能型人才需要为目标的高职电子商务类专业教育教学的基础性任务。 本书知识点思维导图如图1 所示。 图1 全书知识点思维导图 本书具有以下特色。 （1）体例新颖。本书包含“走进网页设计”、“CSS 基础”、“CSS 实现网页美化”与“综合案例”四个项目，每个项目根据知识点分解为若干任务，每个任务分“课前自学”“课中任务”“课后提升”等学习过程，“课中任务”通过“任务导入”引导学生逐步进入“任务描述”、“任务实施”与“任务评价”等环节，并设置“知识加油站”与“学以致用”栏目，逐一攻破知识重难点问题，最终达到完全掌握网页设计与制作相关知识和技能的目标。 （2）产学研融合。本书是“基于Moodle 的高职学院电子商务专业共享型教学资源库的建设与应用研究”与“基于MOOC 理念的高职电子商务专业混合式教学模式研究”研究课题的成果之一。研究课题根据高职学生职业能力培养要求和传统教学存在的问题，探索基于职业能力培养的课程改革思路，以职业活动为主线，以学生为主体，以项目为载体，通过工学结合、学以致用进行教学改革。通过分析典型工作任务和职业能力，构建了基于工作过程的“电子商务网页设计与制作”课程，从教学理念、教学模式、教学内容、教学方法、考核方式等方面进行了课程改革。此外，本书严格遵循Web 标准，结合网页设计岗位对技能的要求，并在进行大量社会调研的基础上，与多位一线网页设计教师一起开发和完善整本书内容。 （3）互动性强。本书设置“学以致用”与“自学自测”板块，可以发散学习者思维，增强教与学讨论氛围，及时检测并巩固学习者知识与技能，有效提高学习效果。 （4）案例主导。本书每个任务都设置一个案例，详细介绍了案例的操作过程与方法，使学习者通过案例演练真正达到一学即会、举一反三的学习效果。 （5）资源丰富。本书对应的“网页设计与制作”课程为湖南省精品在线开放课程，课程网站上配有与教材配套的课程标准、课件、教案、知识点微课、案例操作视频、作业、试题、案例素材、操作步骤等全套数字化资源。课程网站界面如图2 所示。 图2 课程网站界面 本书的参考学时为60 学时，其中实践环节为32 学时。为了方便教与学，这里提供各项目任务的参考学时分配，详见表1。 表1 学时分配表 项 目 名 称 任 务 名 称 学时分配/ 学时 理论 实践 小计 项目一 走进网页设计 任务一 网页设计初接触 1 1 2 任务二 Dreamweaver CS6 的使用 1 1 2 任务三 HTML 基础 4 4 8 项目二 CSS 基础 任务一 CSS 初了解 2 2 4 任务二 CSS 盒子模型 2 2 4 任务三 CSS 的浮动与定位 3 3 6 项目三 CSS 实现网页美化 任务一 CSS 设置网页背景与文本 4 4 8 任务二 CSS 设置网页链接与菜单 4 4 8 任务三 CSS 设置网页表格与表单 4 4 8 项目四 综合案例 任务 飞鹰网络科技企业网站制作 3 7 10 学时小计28 32 60 学时总计60 本书由湖南商务职业技术学院与长沙市爱巴森网络科技有限公司联合开发。全书整体设计、初稿撰写与统稿、项目一与项目二的任务一由湖南商务职业技术学院袁鑫完成，项目二的任务二、任务三与项目四由湖南商务职业技术学院杨蓉完成，项目三由湖南商务职业技术学院李娜完成，CSS+div 常见网页布局方式知识点由湖南商务职业技术学院皮卫撰写。各项目任务案例的前期需求调研与分析由长沙市爱巴森网络科技有限公司饶小华负责。 在撰写本书过程中，编者参考了很多专家学者的研究成果，同时得到了电子工业出版社编辑的大力支持和热情帮助。在此，谨向各位致以最真挚的谢意。 由于编者水平有限，书中难免有不足之处，敬请广大读者批评指正。 编 者

项目一 走进网页设计…………………………………………………………… 01 学习目标 ………………………………………………………………………………… 01 思维导图 ………………………………………………………………………………… 02 任务一 网页设计初接触 ……………………………………………………………………03 课前自学 ………………………………………………………………………………… 03 课中任务 ………………………………………………………………………………… 08 课后提升 ………………………………………………………………………………… 26 任务二 Dreamweaver CS6 的使用 ………………………………………………………29 课前自学 ………………………………………………………………………………… 29 课中任务 ………………………………………………………………………………… 32 课后提升 ………………………………………………………………………………… 41 任务三 HTML 基础 …………………………………………………………………………41 课前自学 ………………………………………………………………………………… 41 课中任务 ………………………………………………………………………………… 46 课后提升 ………………………………………………………………………………… 72 项目小结 ………………………………………………………………………………… 81 项目二 CSS 基础 ……………………………………………………………… 82 学习目标 ………………………………………………………………………………… 82 思维导图 ………………………………………………………………………………… 83 任务一 CSS 初了解 ………………………………………………………………………84 课前自学 ………………………………………………………………………………… 84 课中任务 ………………………………………………………………………………… 85 课后提升 ……………………………………………………………………………… 100 任务二 CSS 盒子模型 ………………………………………………………………… 103 课前自学 ……………………………………………………………………………… 103 课中任务 ……………………………………………………………………………… 105 课后提升 ……………………………………………………………………………… 118 任务三 CSS 的浮动与定位 …………………………………………………………… 121 课前自学 ……………………………………………………………………………… 121 课中任务 ……………………………………………………………………………… 125 课后提升 ……………………………………………………………………………… 138 项目小结 ……………………………………………………………………………… 147 项目三 CSS 实现网页美化 ………………………………………………… 148 学习目标 ……………………………………………………………………………… 148 思维导图 ……………………………………………………………………………… 149 任务一 CSS 设置网页背景与文本 …………………………………………………… 150 课前自学 ……………………………………………………………………………… 150 课中任务 ……………………………………………………………………………… 153 课后提升 ……………………………………………………………………………… 173 任务二 CSS 设置网页链接与菜单 …………………………………………………… 174 课前自学 ……………………………………………………………………………… 174 课中任务 ……………………………………………………………………………… 180 课后提升 ……………………………………………………………………………… 199 任务三 CSS 设置网页表格与表单 …………………………………………………… 201 课前自学 ……………………………………………………………………………… 201 课中任务 ……………………………………………………………………………… 203 课后提升 ……………………………………………………………………………… 224 项目小结 ……………………………………………………………………………… 231 项目四 综合案例……………………………………………………………… 232 学习目标 ……………………………………………………………………………… 232 思维导图 ……………………………………………………………………………… 233 任务 飞鹰网络科技企业网站制作 ……………………………………………………… 233 课前自学 ……………………………………………………………………………… 233 课中任务 ……………………………………………………………………………… 237 课后提升 ……………………………………………………………………………… 255 项目小结 ……………………………………………………………………………… 258 参考文献………………………………………………………………………… 259__