本书使用HTML5+CSS3技术，采用校企合作、校校合作方式编写，注重培养学生的Web前端开发能力。全书分为8个项目。项目1～项目5是成长项目，案例中既有HTML+CSS的基础技能，更着重介绍HTML5的新标签、CSS3的新属性，包括浮动、定位、文本、背景、边框、表单、多列布局、动画、音视频等内容。这5个项目是Web前端的必要技能，也是必修内容，满足大多数院校的课程教学需要。在内容设计上，将知识点融入项目开发的各个子任务中，让学生边学、边操作、边提高，其中项目5是采用响应式布局的仿真项目。Web前端开发是教育部首批“1+X”职业技能等级证书之一，为使学生在提高操作技能的同时掌握必要的理论知识，本书附有职业技能客观测试题目。项目6～项目8是选修或拓展内容，供教师和学生按需选择；其中项目6是实战项目，由真实项目的开发者带着读者一起开发一个企业官网；项目7是提升项目，是一个移动端推广项目；项目8是拓展的游戏开发项目，使用canvas技术制作飞机大战游戏。

随着互联网技术和移动互联技术的飞速发展，市场上对Web前端开发人才的需求量很大，目前大多数高校都开设了Web前端开发课程，本书的编写能解决相关专业的教学需求。由于Web前端开发工程师的薪资高、前景好，所以这门技术也对社会人士有较大的学习驱动力。HTML5和CSS3是Web前端开发的最新技术，可以实现多方面的跨界（如PC端/移动端、Android/iOS）。Web前端的应用领域包含传统互联应用、移动开发和云计算等，市场需求强烈。 本书是浙江省普通高校“十三五”新形态教材，摒弃了按知识点由浅到深地叙述的形式，与企业技术人员沟通后确定教材编写思路，在设计开发项目的同时，注重知识、技能的总结和提升，以项目开发核心技术为中心点布局知识单元。本书更注重工作任务的完整性，每个项目都是独立且完整的，并结合开发实际需求，密切联系行业实际，使学生能学以致用。 本书采用各具特色的项目，面向不同的应用场景，由企业技术人员把关书中项目与行业技术的贴合度。全书分为8个项目。前5个项目介绍Web前端开发的必要技能，是必修内容，满足大多数院校的课程教学需要（参考学时56学时）；在内容设计上，将知识点融入项目开发的各个子任务中，让学生边学、边操作、边提高。考虑到有些高校有课证融合的需求，为使学生在提高操作技能的同时，掌握必要的理论知识，教材在子任务后附有职业技能客观测试题目。后3个项目是实战和专项提高项目，是选修或拓展内容，供教师和学生按需选择。 随着互联网技术和移动互联技术的飞速发展，市场上对Web前端开发人才的需求量很大，目前大多数高校都开设了Web前端开发课程，本书的编写能解决相关专业的教学需求。由于Web前端开发工程师的薪资高、前景好，所以这门技术也对社会人士有较大的学习驱动力。HTML5和CSS3是Web前端开发的最新技术，可以实现多方面的跨界（如PC端/移动端、Android/iOS）。Web前端的应用领域包含传统互联应用、移动开发和云计算等，市场需求强烈。 本书是浙江省普通高校“十三五”新形态教材，摒弃了按知识点由浅到深地叙述的形式，与企业技术人员沟通后确定教材编写思路，在设计开发项目的同时，注重知识、技能的总结和提升，以项目开发核心技术为中心点布局知识单元。本书更注重工作任务的完整性，每个项目都是独立且完整的，并结合开发实际需求，密切联系行业实际，使学生能学以致用。 本书采用各具特色的项目，面向不同的应用场景，由企业技术人员把关书中项目与行业技术的贴合度。全书分为8个项目。前5个项目介绍Web前端开发的必要技能，是必修内容，满足绝大多数院校的课程教学需要（参考学时56学时）；在内容设计上，将知识点融入项目开发的各个子任务中，让学生边学、边操作、边提高。考虑到有些高校有课证融合的需求，为使学生在提高操作技能的同时，掌握必要的理论知识，教材在子任务后附有职业技能客观测试题目。后3个项目是实战和专项提高项目，是选修或拓展内容，供教师和学生按需选择。 本书具有如下特色： 1．新技术 本书围绕Web前端开发的最新技术——HTML5+CSS3技术编写，与行业岗位技能需求吻合。 2．新思路 本书为项目化教材，由具有丰富一线教学经验的教师和具有产品开发经验的企业一线技术人员共同编写，注重培养学生的Web前端开发能力。 3．新资源 本书除提供教学大纲、教学课件、习题参考答案、案例源代码、书中项目所需的全部素材等教学资源外，还提供全书完整的微课资源，并以二维码的形式嵌入到纸质教材中，方便有需要的读者利用移动端辅助学习。具体资源如下。 （1）面向学生的数字资源 ① 微课视频：制作精良的微课视频，涵盖书中所有重点知识，详细讲解每个项目案例的制作过程及技术关键点，在教材对应处添加二维码，并供学生按需使用。 ② 素材库：提供教材案例配套的全部图片、文字、音频、视频等素材。 ③ 教材全部习题答案。 ④ 教材配套的只读教学课件（PPT）。 ⑤ 在线开放课程：建设与教材内容统一的在线开放课程，并开放使用。在浙江省高等学校在线开放课程共享平台（https://www.zjooc.cn/）搜索关键词“Web前端开发”即可获取课程网址，可上网加入学习。 （2）面向教师的数字资源 除上述数字资源外，专为教师提供如下资源： ① 课程教学大纲。 ② 课程授课计划。 ③ 与教材配套的课件（PPT）可编辑教学。 ④ 教材全部案例源代码。 4．新教法 在中国大学MOOC平台（https://www.icourse163.org/spoc/spoc/university/THC#/C）和浙江省在线开放课程平台都建设了在线开放课程（http://www.zjooc.cn/course /2c9180827333622a01734c2fdd512398），教师可以利用在线开放课程平台，定时发布主题讨论、课件、微课视频、阶段性作业、测验、考试、拓展资源等，方便教师使用本书开展线上、线下混合式教学。（开课批次不同，课程网址可能有所区别，建议直接在平台搜索关键词“Web前端开发”。） 本书由金华职业技术学院胡平、林雪华和浙江师范大学李知菲担任主编，由上海柯瀚网络科技有限公司刘潇禹和北京开课吧科技有限公司余维海担任副主编，由邱晓华教授担任主审。本书由胡平统稿，项目1由林雪华编写，项目2、项目5、项目7由胡平编写，项目3、项目4由李知菲编写，项目6由刘潇禹编写，项目8由余维海编写。在编写本书的过程中，编者得到了金华职业技术学院王成福教授、陈晓龙教授、王伟斌副教授和吕梦娜同学的大力支持和帮助，在此向他们表示诚挚的谢意。 因编者水平有限，加之编写时间仓促，书中难免有疏漏和欠妥之处，恳请广大读者批评指正。 为了方便教师教学，本书提供配套的电子教学课件、微课视频及习题参考答案等，请有需要的教师登录华信教育资源网（http://www.hxedu.com.cn）免费注册后下载，有问题时请在网站留言或与电子工业出版社联系。扫一扫书中的二维码可阅看或下载相应的教学资源。

项目1 简单网页设计 1 教学导航 1 项目描述 1 1.1 前端开发语言 2 1.1.1 认识前端开发语言 2 1.1.2 开发环境 3 任务1-1 创建Web项目 6 1.2 HTML和CSS基础 11 1.2.1 HTML常用标签 11 1.2.2 CSS基础选择器 12 1.2.3 常用CSS样式 14 1.2.4 盒模型 16 任务1-2 制作“五环之歌”页面 16 1.3 CSS3常用的新增选择器 22 任务1-3 给导航条添加CSS样式 23 职业技能知识点考核1 27 1.4 浮动和定位 30 1.4.1 浮动 30 1.4.2 定位 33 任务1-4 制作网页焦点图 33 职业技能知识点考核2 37 1.5 HTML5常用的新增标签 38 任务1-5 制作一个常见问题答疑页面 40 职业技能知识点考核3 42 项目2 文本类网页设计 43 教学导航 43 项目描述 43 2.1 文本处理 44 2.1.1 文本阴影 44 2.1.2 溢出文本处理 45 任务2-1 制作网站新闻列表区 46 职业技能知识点考核4 49 2.2 特殊字体 49 任务2-2 制作白居易的《池上》页面 50 2.3 表单 54 2.3.1 表单输入类型 54 2.3.2 新的表单元素 56 2.3.3 新的表单属性 56 任务2-3 制作学员信息页 57 职业技能知识点考核5 63 项目3 图像类网页设计 65 教学导航 65 项目描述 65 3.1 背景 66 3.1.1 背景的定义 66 3.1.2 背景的原点位置 67 3.1.3 背景的显示区域 69 3.1.4 背景图像的大小 70 3.1.5 背景图像的定位 71 任务3-1 制作信纸页面 72 职业技能知识点考核6 77 3.2 边框 78 3.2.1 圆角边框 78 3.2.2 图片边框 80 3.2.3 渐变 82 任务3-2 制作风景页面 85 职业技能知识点考核7 91 3.3 盒阴影 91 3.3.1 盒子阴影 91 3.3.2 溢出处理 93 任务3-3 制作文明公约页面 93 职业技能知识点考核8 96 项目4 媒体杂志类网页设计 98 教学导航 98 项目描述 98 4.1 多列布局 99 任务4-1 制作电子杂志页面 100 4.2 简单动画 106 4.2.1 元素的变形 106 4.2.2 元素的旋转 106 4.2.3 元素的缩放和翻转 107 4.2.4 元素的移动 108 4.2.5 同时使用多个变形函数 109 4.2.6 定义变形原点 110 4.2.7 过渡效果 110 任务4-2 制作滑动的导航条 112 任务4-3 制作照片墙页面 115 职业技能知识点考核9 121 4.3 音频和视频 122 4.3.1 插入音频 122 4.3.2 插入视频 123 任务4-4 制作音频页面 123 职业技能知识点考核10 125 项目5　响应式布局网站设计 126 教学导航 126 项目描述 126 5.1 响应式网站首页的制作 127 任务5-1 制作位置固定的导航条 127 任务5-2 制作响应式网页主体部分 132 任务5-3 制作两栏式网页尾部 138 5.2 项目整合 144 职业技能知识点考核11 145 项目6　企业官网设计 146 教学导航 146 项目描述 146 任务6-1 创建项目 147 任务6-2 观察效果图 148 任务6-3 编写初始化CSS样式 149 任务6-4 编写可复用的header 149 任务6-5 编写可复用的footer 151 任务6-6 首页引入已编写好的header 155 任务6-7 首页引入已编写好的footer 156 任务6-8 编写首页banner部分 157 任务6-9 编写首页儿童精品课模块 160 任务6-10 编写首页父母充电站模块 163 任务6-11 编写首页剩余部分 165 任务6-12 “关于我们”页面引入公用部分 167 任务6-13 正式编写“关于我们”页面 167 任务6-14 “联系我们”页面前期准备 168 任务6-15 正式编写“联系我们”页面 169 任务6-16 收尾工作 172 项目7　移动端推广项目制作 174 教学导航 174 项目描述 174 7.1 大图轮播雏形——Swiper的使用方法 176 7.2 大图轮播的修饰 180 7.3 大图轮播的个性化设计——API文档的使用 181 7.4 真正的大“图”轮播——用图片替换文字 183 7.5 设置动画——Swiper Animate的使用方法 184 任务7-1　移动端推广项目准备工作 187 任务7-2　制作简历首页 190 任务7-3　制作基本资料页 193 任务7-4　制作荣誉页 195 任务7-5　制作“我的技能”页 197 任务7-6　制作“我的作品”页 199 任务7-7　制作尾页 199 7.6　代码汇总 200 项目扩展 204 项目8　使用canvas制作飞机大战游戏 205 教学导航 205 项目描述 205 8.1 canvas简介 206 8.2 canvas元素知识 207 8.3 canvas绘图基础 208 8.4 canvas动画基础 213 8.5 动画中的碰撞检测 215 任务8-1 游戏功能分析 219 任务8-2 图片预加载 220 任务8-3 绘制滚动背景图 222 任务8-4 创建英雄机对象 224 任务8-5 绘制子弹 226 任务8-6 监听键盘事件控制英雄机方向 232 任务8-7 绘制敌机 237 参考文献 251

http://www.hxedu.com.cn/hxedu/fg/book/bookinfo.html?code=G0381250