本书通过苏州英博特智能科技有限公司官网的设计与制作，为读者全面展示了网站设计与网页制作的基本知识，让没有网页制作基础的读者可以轻松地制作出自己心目中的网站。本书第一篇基本技能篇通过制作城市电子名片网页和爱国科学家钱学森先生的个人介绍页面，使读者快速掌握网页制作的基础知识，包括网页制作技术、常用开发工具、网站建设流程、HTML和CSS的基础知识。第二篇项目实战篇按照网站开发的一般流程，制作苏州英博特智能科技有限公司官网，包括网站前期策划、网站开发准备、首页页面制作、二三级页面制作、网站测试与发布、宣传推广与维护及项目总结七个任务，使读者在巩固网页制作技能的同时，进一步掌握HTML5和CSS3的新特性，实现更复杂的页面样式变化及一些交互效果，能够制作具有更好的交互性和用户体验的网页。第三篇岗位能力强化篇结合1+X职业技能证书Web前端开发（初级）的考核要求，以任务为驱动，针对HTML、CSS等重要知识单元，结合实际案例和应用环境进行分析和设计，使读者能够真正掌握这些知识单元在实际场景中的应用。本书配套资源包括书中所有任务案例素材及效果、电子课件，可登录华信教育资源网注册后免费下载。本书同时配有97段微课视频、电子活页、能力拓展和在线测试，可在书中二维码处扫码学习。本书是专门为高等职业教育计算机类、艺术设计类和电子商务类等专业编写的网站设计与网页制作课程的专业教材，也可作为考取1+X职业技能证书Web前端开发（初级）的培训材料。

前端开发工程师、前端设计师、前端架构师和用户体验设计师等新兴职业的出现，为网站前端设计和开发领域注入了新的生命和活力。随着用户对应用体验的要求越来越高，前端领域面临的挑战越来越大，问题也越来越突出。其中最突出的问题便是缺少复合型的前端开发人才。从知识体系上讲，复合型的前端开发人才需要掌握和了解的知识非常之多，甚至可以用“庞杂”二字来形容。这导致一名出色的前端开发人才需要很长的时间来成长，因此行业对此类人才的需求极其迫切，前端开发人才的从业前景较好。 本书以工作过程为导向，以企业网站的设计与制作为项目，将学生引入前端开发职业岗位，再通过完成能力拓展项目及小型商业网站的制作，使学生完成从需求分析、整体设计、项目创建、网页设计制作、网站调试、网站推广到文档书写的完整过程。本书重在岗位技能训练，与1+X职业技能证书Web前端开发（初级）挂钩，加入大量技能训练题目，学生学完本书后可直接考证，为初次就业打下基础。同时本书又将HTML5、CSS3等必要的专业知识传授给学生，为学生的后续学习和发展打好基础。 全书分为三个篇章。第一篇基本技能篇通过制作城市电子名片网页和爱国科学家钱学森先生的个人介绍页面，使读者快速掌握网页制作的基础知识，包括网页制作技术、常用开发工具、网站建设流程、HTML和CSS的基础知识。第二篇项目实战篇按照网站开发的一般流程，制作苏州英博特智能科技有限公司官网，包括网站前期策划、网站开发准备、首页页面制作、二三级页面制作、网站测试与发布、宣传推广与维护及项目总结七个任务，使读者在巩固网页制作技能的同时，进一步掌握HTML5和CSS3的新特性，实现更复杂的页面样式变化以及一些交互效果，能够制作具有更好的交互性和用户体验的网页。第三篇岗位能力强化篇结合1+X职业技能证书Web前端开发（初级）的考核要求，以任务为驱动，针对HTML、CSS等重要知识单元，结合实际案例和应用环境进行分析和设计，使读者能够真正掌握这些知识单元在实际场景中的应用。 每个篇章分为若干任务，每个任务按照如下思路安排学习内容：“能力要求”→“学习导览”→“任务概述”→“任务思考”→“任务实施”→“相关知识”→“课后习题”→“能力拓展”。其中“学习导览”是本任务的导学单，列出了项目实施过程和相关知识结构；“任务思考”通过提出完成任务会遇到的问题引导读者去思考；“能力拓展”是对本任务及前面内容的综合应用，该部分内容作为活页式内容，可以替换为其他案例。 本书部分素材融入思政教育元素。部分素材取自互联网知名网站，这些素材仅用于模仿学习，如有侵权，请与作者联系。 本书免费提供任务案例素材及效果、制作视频等资源。一些文档的书写规范也以电子活页的形式提供给读者参考。同时所有案例视频可在书中二维码处扫码学习。 本书第1版自2011年出版以来，受到全国广大读者（包括学生、教师和自学者）的广泛好评。本书适用于高职高专院校的教育教学，符合产业与技术发展的新趋势，内容、结构和体系新颖、有特色，在国内同类教材中具有一定的水平和质量。 本书第2版被荣幸地评为“‘十二五’职业教育国家规划教材”，第3版被荣幸地评为“‘十三五’职业教育国家规划教材”。第4版更加顺应行业需求，以培养复合型网站设计与网页制作人才为目的进行修订，综合了网页美工设计、网页标准布局，以及当下流行的HTML 5、CSS 3等新技术，以适应企业不断发展的需求。教材内容与课程思政相结合，融入活页式教材的元素，并与1+X职业技能证书紧密结合，与岗位技能要求相适应。 本书在第3版的基础上又做了进一步的修订和扩展，主要涵盖如下几个方面。 ? 对软件版本进行了更新； ? 加入了HTML5和CSS3的新特性； ? 项目素材融入思政教育元素； ? 添加了第一篇基本技能篇，便于读者快速掌握网页制作的基础知识； ? 添加了第三篇岗位能力强化篇，与1+X职业技能证书结合； ? 更换了项目案例，选用了智能制造企业真实的网站建设项目作为案例； ? 每个任务添加了“学习导览”、“任务思考”及“能力拓展”，“能力拓展”为活页式内容； ? 采用二维码的方式提供相关内容的微课视频（共97段）、电子活页、能力拓展、在线测试等参考资源；书中所有任务案例素材及效果、电子课件请登录华信教育资源网（http://www.hxedu.com.cn）注册后免费下载。 ? 配备丰富的教学资源，可参考精品课程网站。本课程的在线开放课程将在中国大学MOOC上线，届时读者可以到中国大学MOOC网站上搜索苏州工业职业技术学院的“Web前端技术基础”课程进行在线学习。 本书由苏州工业职业技术学院何福男、密海英、陈莉莉任主编，由苏州工业职业技术学院芮文艳、陈园园、杨小英任副主编，沈茜、盛永华、顾华强（企业编者）参与编写，由苏州英博特智能科技有限公司提供书中项目支持。企业专家、院校专家给予编写指导，共同完成了本书的结构、章节设计及编写。 由于作者水平有限，书中难免存在不足之处，敬请广大读者批评指正。 编 者

第一篇 基本技能篇 任务1 网页体验—城市电子名片页面制作 1 1.1 任务概述 2 1.2 任务思考 3 1.3 任务实施 3 1.3.1 新建网页文件，添加内容 3 1.3.2 链接CSS样式表 3 1.3.3 添加JavaScript特效 4 1.4 相关知识 4 1.4.1 网页相关概念 4 1.4.2 网页制作技术 6 1.4.3 常用开发工具 6 1.4.4 网站建设流程 8 任务2 页面制作—人物介绍页面内容呈现 16 2.1 任务概述 17 2.2 任务思考 17 2.3 任务实施 17 2.3.1 新建网页文件 17 2.3.2 人物介绍文本格式化 18 2.3.3 添加人物图片 19 2.4 相关知识 20 2.4.1 HTML基础 20 2.4.2 HTML标题元素 22 2.4.3 HTML注释元素 23 2.4.4 HTML段落元素 23 2.4.5 HTML格式化元素 25 2.4.6 HTML图片元素 29 任务3 样式设计—人物介绍页面美化 32 3.1 任务概述 33 3.2 任务思考 33 3.3 任务实施 33 3.3.1 链接外部样式表 33 3.3.2 设计样式 34 3.4 相关知识 35 3.4.1 CSS简介 35 3.4.2 CSS语法 36 3.4.3 CSS选择器 37 3.4.4 CSS字体属性 39 3.4.5 CSS文本属性 42 3.4.6 CSS背景属性 44 任务4 图文混排—人物介绍页面布局 50 4.1 任务概述 51 4.2 任务思考 51 4.3 任务实施 51 4.3.1 添加HTML元素 51 4.3.2 图文混排布局 52 4.4 相关知识 53 4.4.1 元素分类 53 4.4.2 CSS盒模型 54 4.4.3 CSS布局模型 62 4.4.4 清除浮动 71 本篇小结 72 第二篇 项目实战篇 任务1 “英博特智能科技”企业网站前期策划 73 1.1 项目立项 74 1.1.1 分析“英博特智能科技”企业网站需求说明书 75 1.1.2 组建项目团队 76 1.2 撰写网站策划书 76 1.2.1 分析确定网站逻辑结构图 78 1.2.2 设计网站界面原型 78 1.2.3 撰写企业网站策划书 82 任务2 “英博特智能科技”企业网站开发准备 85 2.1 设计网站logo 85 2.2 加工图像素材 90 2.3 设计网站首页效果图 93 2.3.1 设置页面大小 95 2.3.2 规划首页内容，设计版式 96 2.3.3 确定配色方案 98 2.3.4 制作网站首页效果图 99 2.4 裁切网站首页效果图 100 2.4.1 创建首页切片 102 2.4.2 编辑首页切片 104 2.4.3 命名首页切片 105 2.4.4 导出首页切片 105 任务3 “英博特智能科技”企业网站首页页面制作 108 3.1 首页整体布局 108 3.1.1 新建项目 110 3.1.2 搭建页面主体结构 110 3.1.3 编写主体结构样式 111 3.2 页头制作 113 3.2.1 页头二列布局 114 3.2.2 logo制作 115 3.2.3 横向导航制作 116 3.2.4 下拉菜单制作 116 3.3 横幅广告制作 128 3.3.1 插入图像 130 3.3.2 样式设计 130 3.3.3 图片放大特效 131 3.4 公司优势制作 134 3.4.1 搭建公司优势模块结构 135 3.4.2 实现三列布局 135 3.4.3 设置图像和文本样式 136 3.5 关于我们制作 137 3.5.1 搭建关于我们模块结构 138 3.5.2 实现二列布局 139 3.5.3 设置文本内容样式 139 3.5.4 轮播图制作 140 3.6 服务范围制作 144 3.6.1 搭建服务范围模块结构 145 3.6.2 实现列表项内部的两列布局 146 3.6.3 实现服务范围弹性布局 147 3.6.4 设置文本内容样式 147 3.7 产品展示制作 148 3.7.1 搭建产品展示模块结构 150 3.7.2 实现三列布局 151 3.7.3 设置文本内容样式 151 3.7.4 设置CSS3过渡效果 151 3.8 案例展示制作 155 3.8.1 搭建案例展示模块结构 156 3.8.2 实现三列布局 157 3.8.3 设置文本内容样式 157 3.8.4 设置CSS3转换效果 158 3.9 新闻中心制作 162 3.9.1 搭建新闻中心模块结构 164 3.9.2 图片特效制作 165 3.9.3 新闻列表制作 166 3.10 合作伙伴制作 168 3.10.1 搭建合作伙伴模块结构 169 3.10.2 设置图片内容样式 170 3.11 页尾制作 172 3.11.1 搭建页尾模块结构 173 3.11.2 分享内容制作 174 3.11.3 联系我们制作 175 3.11.4 版权内容制作 176 3.12 客户服务制作 177 3.12.1 搭建客户服务模块结构 178 3.12.2 图片内容制作 179 3.12.3 弹出菜单制作 179 任务4 “英博特智能科技”企业网站二三级页面制作 183 4.1 产品案例页面制作 183 4.1.1 搭建页面结构 185 4.1.2 竖向导航制作 188 4.1.3 产品案例图文混排制作 190 4.2 产品详细信息页面制作 202 4.2.1 搭建页面结构 205 4.2.2 图文内容设计 205 4.2.3 数据表格设计 206 4.2.4 编写相关样式 208 4.3 应用场景详细信息页面制作 216 4.3.1 搭建页面结构 217 4.3.2 插入音视频 218 4.4 留言页面制作 221 4.4.1 搭建页面结构 223 4.4.2 插入表单元素 223 4.4.3 编写表单样式 224 任务5 “英博特智能科技”企业网站测试与发布 233 5.1 网站测试 233 5.1.1 整体界面测试 234 5.1.2 超链接测试 234 5.1.3 图形测试 234 5.1.4 内容测试 234 5.1.5 浏览器兼容性测试 235 5.1.6 打印机测试 236 5.1.7 显示代码合法性检查 236 5.2 网站发布 252 5.2.1 安装本地服务器 253 5.2.2 在IIS中发布和访问网站 255 5.2.3 申请域名 257 5.2.4 申请虚拟主机 261 5.2.5 使用FTP管理文件 262 任务6 “英博特智能科技”企业网站宣传推广与维护 267 6.1 网站宣传推广 267 6.1.1 搜索引擎推广 269 6.1.2 电子邮件推广 270 6.1.3 网络广告推广 271 6.1.4 分类信息推广 271 6.1.5 微信推广 272 6.1.6 搜索引擎优化工具 272 6.2 网站维护 278 6.2.1 网站日常维护 279 6.2.2 网站内容维护 280 6.2.3 网站安全维护 280 6.2.4 网站基础维护 280 6.2.5 网站服务与回馈 280 任务7 “英博特智能科技”企业网站项目总结 283 7.1 文档的书写与整理 283 7.1.1 撰写网站说明书 284 7.1.2 整理文档 285 7.2 网站展示、交流与评价 285 7.2.1 讨论交流 286 7.2.2 小组自评、互评 286 本篇小结 287 第三篇 岗位能力强化篇 任务1 HTML制作静态网页 288 3.1.1 任务概述 289 3.1.2 任务分析 290 3.1.3 任务实施 291 任务2 HTML实现静态页面内容的呈现 292 3.2.1 任务概述 293 3.2.2 任务分析 294 3.2.3 任务实施 294 任务3 CSS实现网页整体布局 295 3.3.1 任务概述 296 3.3.2 任务分析 296 3.3.3 任务实施 296 任务4 CSS设计页面样式 297 3.4.1 任务概述 298 3.4.2 任务分析 298 3.4.3 任务实施 299 任务5 CSS3实现页面动态交互效果 300 3.5.1 任务概述 301 3.5.2 任务分析 301 3.5.3 任务实施 301 任务6 HTML5制作移动端静态网页 302 3.6.1 任务概述 302 3.6.2 任务分析 303 3.6.3 任务实施 304 任务7 HTML5优化移动端静态网页结构 305 3.7.1 任务概述 306 3.7.2 任务分析 306 3.7.3 任务实施 307 任务8 CSS3新特性制作移动端网页加载动画 308 3.8.1 任务概述 309 3.8.2 任务分析 309 3.8.3 任务实施 310 任务9 CSS3新特性美化移动端页面样式 311 3.9.1 任务概述 311 3.9.2 任务分析 312 3.9.3 任务实施 313 任务10 CSS3自定义资源美化移动端页面元素 314 3.10.1 任务概述 315 3.10.2 任务分析 315 3.10.3 任务实施 316 本篇小结 316