Web前端开发实训案例教程（初级） 下载 pdf 百度网盘 epub 免费 2025 电子书 mobi 在线

本书是根据《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前端开发工作者的学习指导用书。

目 录

第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

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

暂无出版社相关信息，正在全力查找中！

暂无相关书籍摘录，正在全力查找中！

在线阅读地址：Web前端开发实训案例教程（初级）在线阅读

在线听书地址：Web前端开发实训案例教程（初级）在线收听

在线购买地址：Web前端开发实训案例教程（初级）在线购买

暂无原文赏析，正在全力查找中！

暂无其它内容！