Web前端开发项目化教程(第2版)

项目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