Web前端开发实训案例教程（初级）素材

素材下载地址：Web前端开发实训案例教程（初级）素材

内容简介

本书是按照《Web前端开发职业技能等级标准》编写的配套实践教程，其中涉及的应用技术专题和项目代码均在主流浏览器中运行通过。本书结合大学计算机相关专业Web前端开发方向课程体系、企业Web前端开发岗位能力模型和《Web前端开发职业技能等级标准》，形成Web前端开发三位一体知识地图，以实践能力为导向，以企业真实应用为目标，遵循企业软件工程标准和技术，以任务为驱动，针对HTML5、CSS3、JavaScript、jQuery等重要Web前端开发中的知识单元，结合实际案例和应用环境进行分析与设计，并对每个重要知识单元进行详细的实现，使读者能够真正掌握这些知识在实际场景中的应用。本书分为两大部分：第一部分为实验，采用技术专题进行知识单元训练，可以对应课程练习或实验，针对不同的知识单元设计了实验项目，重点训练每个知识单元的内容；第二部分为综合实践，可以对应课程设计或综合实践，运用一个电商网站项目贯穿Web前端开发核心知识，完整训练核心知识单元在企业真实项目中的应用。
本书适合作为《Web前端开发职业技能等级标准》实践教学的参考用书，也可作为对Web前端开发感兴趣的学习者的指导用书。

目录

第1章 实践概述 1
1.1 实践目标 1
1.2 实践知识地图 1
1.3 实施安排 6
1.3.1 实验部分（技术专题） 6
1.3.2 综合实践部分 11
第2章 网页设计与制作 19
2.1 实验目标 19
2.2 实验任务 19
2.3 设计思路 20
2.4 实验实施（跟我做） 20
2.4.1 步骤一：设计网页原型 20
2.4.2 步骤二：设计页面效果 21
2.4.3 步骤三：网页切图 22
2.4.4 步骤四：网页设计 25
第3章 开发工具（HBuilder） 26
3.1 实验目标 26
3.2 实验任务 26
3.3 设计思路 26
3.4 实验实施（跟我做） 27
3.3.1 步骤一：下载并安装
HBuilder 27
3.3.2 步骤二：启动HBuilder 27
3.3.3 步骤三：创建工程 28
3.3.4 步骤四：创建HTML页面 29
3.3.5 步骤五：编辑HTML文件 30
3.3.6 步骤六：运行 30
第4章 网站服务器部署
（Apache服务器） 32
4.1 实验目标 32
4.2 实验任务 32
4.3 设计思路 32
4.4 实验实施（跟我做） 32
4.3.1 步骤一：下载Apache 32
4.3.2 步骤二：安装Apache 34
4.3.3 步骤三：测试Apache 35
第5章 HTML制作静态网页
（新闻网站） 36
5.1 实验目标 36
5.2 实验任务 37
5.3 设计思路 37
5.4 实验实施（跟我做） 38
5.4.1 步骤一：创建“登录”页面 38
5.4.2 步骤二：添加“登录”
页面内容 38
5.4.3 步骤三：创建新闻首页和
二级页面 39
5.4.4 步骤四：添加新闻页面
内容 39
5.4.5 步骤五：实现页面跳转 42
第6章 CSS设计页面样式
（购物网站） 43
6.1 实验目标 43
6.2 实验任务 44
6.3 设计思路 44
6.4 实验实施（跟我做） 46
6.4.1 步骤一：创建文件 46
6.4.2 步骤二：链接到外部
样式文件 46
6.4.3 步骤三：导航栏样式 47
6.4.4 步骤四：左边栏 48
6.4.5 步骤五：右边栏 50
6.4.6 步骤六：底边栏 51
第7章 JavaScript开发交互效果页面
（网页计算器） 53
7.1 实验目标 53
7.2 实验任务 54
7.3 设计思路 54
7.4 实验实施（跟我做） 56
7.4.1 步骤一：HTML布局 56
7.4.2 步骤二：CSS添加样式 57
7.4.3 步骤三：JavaScript计算 59
7.4.4 步骤四：扩展功能
（验证正则表达式） 62
第8章 jQuery开发交互效果页面
（手机号抽奖） 64