Web前端开发实训案例教程(初级)

本书是根据《Web前端开发职业技能等级标准2.0版》（初级）编写的配套的实践教程，其中涉及的项目代码使用HBuilder开发工具编译，并且均可在主流浏览器中运行。 本书将中职、高职院校及应用型本科院校的计算机应用、软件技术等相关专业开设的Web前端开发方向的课程体系，与企业Web前端开发岗位能力模型相结合，依据《Web前端开发职业技能等级标准2.0版》（初级）的技能要求，形成三位一体的Web前端开发技术知识地图。本书以实践能力为导向，以开发企业真实应用为目标，遵循企业软件工程标准和技术开发要求，采用任务驱动方式，将Web前端开发（初级）所涉及的HTML+HTML5、CSS+CSS3、JavaScript、jQuery相关知识单元，充分融入实际案例和应用环境中。本书对《Web前端开发职业技能等级标准2.0版》（初级）涉及的重要知识单元都进行了详细的介绍，帮助读者掌握Web前端开发的技术技能要求。 本书依托实验项目对知识单元进行介绍，并且针对不同的知识单元设计了多个实验项目，帮助读者掌握每个知识单元的核心内容。 本书适合作为《Web前端开发职业技能等级标准2.0版》（初级）实践教学的参考用书，也可作为有意成为Web前端开发工作者的学习指导用书。

北京新奥时代科技有限责任公司于2006年04月12日在石景山分局登记成立。公司经营范围包括技术开发、技术推广、技术转让、技术咨询、技术服务等。

第1章实践概述1
1.1实践目标1
1.2实践知识地图2
1.3实施安排7
第2章开发环境：HBuilder开发工具9
2.1实验目标9
2.2实验任务9
2.3设计思路10
2.4实验实施（跟我做）10
2.4.1步骤一：下载和安装HBuilder10
2.4.2步骤二：启动HBuilder11
2.4.3步骤三：创建Web项目12
2.4.4步骤四：创建HTML文件13
2.4.5步骤五：编辑HTML文件14
2.4.6步骤六：运行HTML文件14
第3章HTML/HTML5：文库网站15
3.1实验目标15
3.2实验任务15
3.3设计思路17
3.4实验实施（跟我做）17
3.4.1步骤一：创建首页和文档详情页17
3.4.2步骤二：添加首页的内容18
3.4.3步骤三：添加文档详情页的内容21
第4章HTML/HTML5：网址导航24
4.1实验目标24
4.2实验任务25
4.3设计思路25
4.4实验实施（跟我做）26
4.4.1步骤一：创建项目，搭建页面主体结构26
4.4.2步骤二：添加form表单内容27
4.4.3步骤三：创建大分类导航28
4.4.4步骤四：制作分类详情页28
4.4.5步骤五：使用iframe加载分类详情页31
第5章HTML/HTML5：影评网34
5.1实验目标34
5.2实验任务35
5.3设计思路35
5.4实验实施（跟我做）36
5.4.1步骤一：适配移动端视口36
5.4.2步骤二：搭建页面主体结构37
5.4.3步骤三：创建影评网首页的页头37
5.4.4步骤四：创建影评网首页的正文部分38
5.4.5步骤五：创建影评网首页的页脚40
5.4.6步骤六：创建提交评论页面40
第6章HTML/HTML5：音乐网站43
6.1实验目标43
6.2实验任务44
6.3设计思路44
6.4实验实施（跟我做）45
6.4.1步骤一：创建项目，搭建页面的主体结构45
6.4.2步骤二：创建正文部分46
6.4.3步骤三：搭建页脚49
第7章HTML/HTML5+CSS/CSS3：招聘网站50
7.1实验目标50
7.2实验任务51
7.3设计思路52
7.4实验实施（跟我做）54
7.4.1步骤一：创建项目54
7.4.2步骤二：链接外部样式文件55
7.4.3步骤三：搭建导航栏55
7.4.4步骤四：搭建正文部分的框架57
7.4.5步骤五：设置公司简介板块58
7.4.6步骤六：设置招聘职位板块59
7.4.7步骤七：设置招聘流程板块60
7.4.8步骤八：搭建页脚61
第8章HTML/HTML5+CSS/CSS3：旅游网站63
8.1实验目标63
8.2实验任务64
8.3设计思路64
8.4实验实施（跟我做）66
8.4.1步骤一：创建文件66
8.4.2步骤二：链接外部样式文件66
8.4.3步骤三：设置导航栏样式66
8.4.4步骤四：添加页面标语69
8.4.5步骤五：搭建游客点评栏69
8.4.6步骤六：搭建页脚72
第9章HTML/HTML5+CSS/CSS3：企业门户网站73
9.1实验目标73
9.2实验任务74
9.3设计思路74
9.4实验实施（跟我做）75
9.4.1步骤一：创建企业门户网站的首页75
9.4.2步骤二：添加CSS样式77
第10章HTML/HTML5+CSS/CSS3：动物园网站83
10.1实验目标83
10.2实验任务83
10.3设计思路84
10.4实验实施（跟我做）85
10.4.1步骤一：搭建页面主体结构85
10.4.2步骤二：制作场馆子页面86
10.4.3步骤三：使用＜iframe＞标签导入子页面88
10.4.4步骤四：创建场馆列表88
10.4.5步骤五：添加CSS样式89
第11章HTML/HTML5+CSS/CSS3：开源社区94
11.1实验目标94
11.2实验任务94
11.3设计思路95
11.4实验实施（跟我做）96
11.4.1步骤一：创建项目96
11.4.2步骤二：搭建页面主体结构97
11.4.3步骤三：搭建页头98
11.4.4步骤四：搭建正文99
11.4.5步骤五：搭建页脚104
第12章HTML/HTML5+CSS/CSS3：动漫视频网站105
12.1实验目标105
12.2实验任务106
12.3设计思路106
12.4实验实施（跟我做）107
12.4.1步骤一：创建项目107
12.4.2步骤二：搭建页面主体结构108
12.4.3步骤三：创建热播视频列表109
12.4.4步骤四：创建分类视频列表111
12.4.5步骤五：制作CSS3动画113
12.4.6步骤六：定义自定义字体114
第13章HTML/HTML5+CSS/CSS3：外卖网115
13.1实验目标115
13.2实验任务116
13.3设计思路117
13.4实验实施（跟我做）119
13.4.1步骤一：创建项目119
13.4.2步骤二：搭建页面主体结构119
13.4.3步骤三：搭建页头120
13.4.4步骤四：搭建Banner图121
13.4.5步骤五：搭建产品分类列表122
13.4.6步骤六：搭建产品列表122
13.4.7步骤七：搭建页脚124
第14章HTML/HTML5+CSS/CSS3：摄影网站126
14.1实验目标126
14.2实验任务126
14.3设计思路127
14.4实验实施（跟我做）128
14.4.1步骤一：创建网站首页128
14.4.2步骤二：添加CSS样式129
第15章HTML/HTML5+CSS/CSS3：线上点单网站133
15.1实验目标133
15.2实验任务133
15.3设计思路134
15.4实验实施（跟我做）135
15.4.1步骤一：创建网站首页135
15.4.2步骤二：添加CSS样式137
第16章HTML/HTML5+CSS/CSS3：魔方相册142
16.1实验目标142
16.2实验任务142
16.3设计思路143
16.4实验实施（跟我做）143
16.4.1步骤一：HTML布局143
16.4.2步骤二：搭建魔方相册主体143
16.4.3步骤三：添加CSS样式144
第17章HTML/HTML5+CSS/CSS3：简易地球仪147
17.1实验目标147
17.2实验任务147
17.3设计思路148
17.4实验实施（跟我做）148
17.4.1步骤一：HTML布局148
17.4.2步骤二：搭建简易地球仪的外部容器148
17.4.3步骤三：添加CSS样式148
第18章HTML/HTML5+CSS/CSS3：个人博客150
18.1实验目标150
18.2实验任务151
18.3设计思路151
18.4实验实施（跟我做）152
18.4.1步骤一：创建个人博客首页152
18.4.2步骤二：添加CSS样式154
第19章JavaScript+jQuery：Banner轮播图158
19.1实验目标158
19.2实验任务159
19.3设计思路159
19.4实验实施（跟我做）161
19.4.1步骤一：HTML布局161
19.4.2步骤二：添加CSS样式162
19.4.3步骤三：Banner广告图的切换164
19.4.4步骤四：改变导航指示项165
第20章JavaScript+jQuery：商品选项卡167
20.1实验目标167
20.2实验任务168
20.3设计思路169
20.4实验实施（跟我做）170
20.4.1步骤一：HTML布局170
20.4.2步骤二：添加CSS样式172
20.4.3步骤三：切换商品列表173
20.4.4步骤四：自动切换175
第21章JavaScript+jQuery：盲盒小游戏177
21.1实验目标177
21.2实验任务178
21.3设计思路179
21.4实验实施（跟我做）180
21.4.1步骤一：HTML布局180
21.4.2步骤二：添加CSS样式181
21.4.3步骤三：切换选中的盲盒182
21.4.4步骤四：开启盲盒184
第22章JavaScript+jQuery：大转盘抽奖187
22.1实验目标187
22.2实验任务187
22.3设计思路188
22.4实验实施（跟我做）190
22.4.1步骤一：构建页面190
22.4.2步骤二：下载和使用jQuery191
22.4.3步骤三：定义全局变量192
22.4.4步骤四：设置click事件192
22.4.5步骤五：创建operation()方法执行抽奖操作192
22.4.6步骤六：关闭弹窗194
第23章JavaScript+jQuery：网页便签195
23.1实验目标195
23.2实验任务195
23.3设计思路196
23.4实验实施（跟我做）197
23.4.1步骤一：HTML布局197
23.4.2步骤二：添加CSS样式197
23.4.3步骤三：使用JavaScript控制网页便签199
第24章JavaScript+jQuery：拼图201
24.1实验目标201
24.2实验任务201
24.3设计思路202
24.4实验实施（跟我做）202
24.4.1步骤一：HTML布局202
24.4.2步骤二：添加CSS样式203
24.4.3步骤三：使用JavaScript控制拼图205
第25章JavaScript+jQuery：视频弹幕208
25.1实验目标208
25.2实验任务209
25.3设计思路209
25.4实验实施（跟我做）210
25.4.1步骤一：HTML布局210
25.4.2步骤二：添加CSS样式210
25.4.3步骤三：实现弹幕功能211
25.4.4步骤四：扩展弹幕功能212
第26章JavaScript+jQuery：网页调色器215
26.1实验目标215
26.2实验任务216
26.3设计思路216
26.4实验实施（跟我做）217
26.4.1步骤一：HTML布局217
26.4.2步骤二：添加CSS样式218
26.4.3步骤三：JavaScript调色220