Web前端开发项目化教程（第2版）

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

　　胡平副教授，在金华职业技术学院信息工程学院从事计算机课程的教学研究工作，完成浙江省教科规课题等项目十余项，主持完成网站建设等精品课程项目，有丰富的实践与教学经验

项目1 简单网页设计\t1
教学导航\t1
项目描述\t1
1．1 前端开发语言\t2
1．1．1 认识前端开发语言\t2
1．1．2 开发环境\t3
任务1-1 创建Web项目\t6
1．2 HTML和CSS基础\t11
1．2．1 HTML常用标签\t11
1．2．2 CSS基础选择器\t12
1．2．3 常用CSS样式\t14
1．2．4 盒模型\t16
任务1-2 制作“五环之歌”页面\t16
1．3 CSS3常用的新增选择器\t22
任务1-3 给导航条添加CSS样式\t23
职业技能知识点考核1\t27
1．4 浮动和定位\t30
1．4．1 浮动\t30
1．4．2 定位\t33
任务1-4 制作网页焦点图\t33
职业技能知识点考核2\t37
1．5 HTML5常用的新增标签\t38
任务1-5 制作一个常见问题答疑页面\t40
职业技能知识点考核3\t42
项目2 文本类网页设计\t43
教学导航\t43
项目描述\t43
2．1 文本处理\t44
2．1．1 文本阴影\t44
2．1．2 溢出文本处理\t45
任务2-1 制作网站新闻列表区\t46
职业技能知识点考核4\t49
2．2 特殊字体\t49
任务2-2 制作白居易的《池上》页面\t50
2．3 表单\t54
2．3．1 表单输入类型\t54
2．3．2 新的表单元素\t56
2．3．3 新的表单属性\t56
任务2-3 制作学员信息页\t57
职业技能知识点考核5\t63
项目3 图像类网页设计\t65
教学导航\t65
项目描述\t65
3．1 背景\t66
3．1．1 背景的定义\t66
3．1．2 背景的原点位置\t67
3．1．3 背景的显示区域\t69
3．1．4 背景图像的大小\t70
3．1．5 背景图像的定位\t71
任务3-1 制作信纸页面\t72
职业技能知识点考核6\t77
3．2 边框\t78
3．2．1 圆角边框\t78
3．2．2 图片边框\t80
3．2．3 渐变\t82
任务3-2 制作风景页面\t85
职业技能知识点考核7\t91
3．3 盒阴影\t91
3．3．1 盒子阴影\t91
3．3．2 溢出处理\t93
任务3-3 制作文明公约页面\t93
职业技能知识点考核8\t96
项目4 媒体杂志类网页设计\t98
教学导航\t98
项目描述\t98
4．1 多列布局\t99
任务4-1 制作电子杂志页面\t100
4．2 简单动画\t106
4．2．1 元素的变形\t106
4．2．2 元素的旋转\t106
4．2．3 元素的缩放和翻转\t107
4．2．4 元素的移动\t108
4．2．5 同时使用多个变形函数\t109
4．2．6 定义变形原点\t110
4．2．7 过渡效果\t110
任务4-2 制作滑动的导航条\t112
任务4-3 制作照片墙页面\t115
职业技能知识点考核9\t121
4．3 音频和视频\t122
4．3．1 插入音频\t122
4．3．2 插入视频\t123
任务4-4 制作音频页面\t123
职业技能知识点考核10\t125
项目5　响应式布局网站设计\t126
教学导航\t126
项目描述\t126
5．1 响应式网站首页的制作\t127
任务5-1 制作位置固定的导航条\t127
任务5-2 制作响应式网页主体部分\t132
任务5-3 制作两栏式网页尾部\t138
5．2 项目整合\t144
职业技能知识点考核11\t145
项目6　企业官网设计\t146
教学导航\t146
项目描述\t146
任务6-1 创建项目\t147
任务6-2 观察效果图\t148
任务6-3 编写初始化CSS样式\t149
任务6-4 编写可复用的header\t149
任务6-5 编写可复用的footer\t151
任务6-6 首页引入已编写好的header\t155
任务6-7 首页引入已编写好的footer\t156
任务6-8 编写首页banner部分\t157
任务6-9 编写首页儿童精品课模块\t160
任务6-10 编写首页父母充电站模块\t163
任务6-11 编写首页剩余部分\t165
任务6-12 “关于我们”页面引入公用部分\t167
任务6-13 正式编写“关于我们”页面\t167
任务6-14 “联系我们”页面前期准备\t168
任务6-15 正式编写“联系我们”页面\t169
任务6-16 收尾工作\t172
项目7　移动端推广项目制作\t174
教学导航\t174
项目描述\t174
7．1 大图轮播雏形――Swiper的使用方法\t176
7．2 大图轮播的修饰\t180
7．3 大图轮播的个性化设计――API文档的使用\t181
7．4 真正的大“图”轮播――用图片替换文字\t183
7．5 设置动画――Swiper Animate的使用方法\t184
任务7-1　移动端推广项目准备工作\t187
任务7-2　制作简历首页\t190
任务7-3　制作基本资料页\t193
任务7-4　制作荣誉页\t195
任务7-5　制作“我的技能”页\t197
任务7-6　制作“我的作品”页\t199
任务7-7　制作尾页\t199
7．6　代码汇总\t200
项目扩展\t204
项目8　使用canvas制作飞机大战游戏\t205
教学导航\t205
项目描述\t205
8．1 canvas简介\t206
8．2 canvas元素知识\t207
8．3 canvas绘图基础\t208
8．4 canvas动画基础\t213
8．5 动画中的碰撞检测\t215
任务8-1 游戏功能分析\t219
任务8-2 图片预加载\t220
任务8-3 绘制滚动背景图\t222
任务8-4 创建英雄机对象\t224
任务8-5 绘制子弹\t226
任务8-6 监听键盘事件控制英雄机方向\t232
任务8-7 绘制敌机\t237
参考文献\t251