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

作者: 王晓玲

出版社: 电子工业出版社

出版时间: 2023-01

版次: 1

ISBN: 9787121449864

定价: 49.80

装帧: 其他

页数: 248页

分类: 教材教辅考试>教材>高职教材>计算机与互联网

本书是围绕《Web前端开发》职业技能等级标准（初级）和院校Web前端开发专业方向HTML5、JavaScript等主干课程编写的配套实践教程，书中的代码均已在开发环境和浏览器上运行通过。本书综合院校相关专业课程知识体系、Web前端开发岗位技能要求、《Web前端开发》职业技能等级标准（初级）中职业技能三者之间的知识和能力，并将其提炼成本书的实践能力目标。以实践能力为导向，以企业真实应用为目标，遵循企业标准开发过程和技术，以任务驱动，对HTML5、CSS3、JavaScript、jQuery、PC端/移动端等重要Web前端开发中的知识单元，结合实际案例和应用环境进行分析和设计，并对每个重要知识单元进行了详细的实现，使读者能够真正掌握这些知识在实际场景中的应用。本书分为两大部分：第一部分为技术专题（实验），主要进行知识单元训练，可以对应课程练习或实验进行实践，针对不同的知识单元设计了有针对性的专题项目，重点训练每个知识单元的内容，也为案例开发进行知识补强，储备技术；第二部分为案例，可以对应课程设计或综合实践，选用\"在线视频课程网站”，采用业务和知识迭代开发思路，完整训练Web核心知识单元在企业真实项目中的应用。王晓玲（1974.12—），女，河北滦县，硕士研究生。现为上海电子信息职业技术学院讲师。自2003月至今，一直在软件技术专业兢兢业业的教学。指导学生参加各种比赛，并多次获奖。其中，全国职业技能大赛中两次一等奖，一次三等奖。课程建设方面：市级精品课程《面向对象编程（Java）》，校级精品课程两门《Android软件开发》、《网页制作》。开发了学校的评教系统网站。第1章  概述（1）

1.1  实践目标（1）

1.2  技术专题设计（1）

1.3  案例设计（4）

第2章  开发环境：第一个HTML5程序（10）

2.1  技能和知识点（10）

2.2  需求简介（10）

2.3  设计思路（10）

2.4  实现（11）

2.4.1  下载安装Chrome（11）

2.4.2  下载安装HBuilder（13）

2.4.3  创建Web项目并运行（15）

第3章  HTML5表单—注册页面（19）

3.1  技能和知识点（19）

3.2  需求简介（20）

3.3  设计思路（20）

3.4  实现（21）

3.4.1  创建注册页面（21）

3.4.2  搭建头部和正文结构（22）

3.4.3  编写头部（22）

3.4.4  编写正文（23）

第4章  HTML5页面增强：资讯网站（25）

4.1  技能和知识点（25）

4.2  需求简介（25）

4.3  设计思路（26）

4.4  实现（27）

4.4.1  创建资讯详情页面（27）

4.4.2  搭建头部和正文结构（27）

4.4.3  编写头部（28）

4.4.4  编写正文（28）

第5章  HTML5全局属性：通信录（30）

5.1  技能和知识点（30）

5.2  需求简介（30）

5.3  设计思路（31）

5.4  实现（32）

5.4.1  创建通信录页面（32）

5.4.2  搭建头部和正文结构（32）

5.4.3  编写头部（33）

5.4.4  编写正文（33）

第6章  HTML5多媒体：HTML5播放音频（37）

6.1  技能和知识点（37）

6.2  需求简介（37）

6.3  设计思路（38）

6.4  实现（38）

6.4.1  搭建页面结构（38）

6.4.2  设置标题（39）

6.4.3  创建音乐列表（39）

第7章  HTML5多媒体：HTML5播放视频（41）

7.1  技能和知识点（41）

7.2  需求简介（41）

7.3  设计思路（42）

7.4  实现（42）

7.4.1  搭建页面结构（42）

7.4.2  设置标题（43）

7.4.3  创建视频列表（43）

第8章  HTML5语义化元素：音乐内容页（45）

8.1  技能和知识点（45）

8.2  需求简介（45）

8.3  设计思路（46）

8.4  实现（47）

8.4.1  搭建页面结构（47）

8.4.2  制作页头（47）

8.4.3  创建正文结构（48）

8.4.4  创建音乐内容（48）

8.4.5  操作按钮（49）

8.4.6  制作页脚（49）

第9章  CSS+CSS3：微博网站首页（50）

9.1  技能和知识点（50）

9.2  需求简介（50）

9.3  设计思路（51）

9.4  实现（52）

9.4.1  搭建页面结构（52）

9.4.2  制作页头（53）

9.4.3  制作正文导航栏（56）

9.4.4  制作正文微博列表（58）

第10章  CSS+CSS3：技术论坛系统首页（61）

10.1  技能和知识点（61）

10.2  需求简介（61）

10.3  设计思路（62）

10.4  实现（63）

10.4.1  搭建页面结构（63）

10.4.2  制作页头（64）

10.4.3  添加标题动画（65）

10.4.4  制作正文分类列表（66）

10.4.5  制作正文帖子列表（67）

第11章  移动端：电商列表页（70）

11.1  技能和知识点（70）

11.2  需求简介（70）

11.3  设计思路（71）

11.4  实现（72）

11.4.1  搭建页面结构（72）

11.4.2  设置视口（72）

11.4.3  制作页头（73）

11.4.4  创建商品列表（74）

第12章  移动端：视频网站（77）

12.1  技能和知识点（77）

12.2  需求简介（77）

12.3  设计思路（78）

12.4  实现（79）

12.4.1  搭建页面结构（79）

12.4.2  设置视口（79）

12.4.3  创建视频播放控件（79）

12.4.4  创建评论列表（80）

12.4.5  创建发布评论表单（81）

12.4.6  页面优化（83）

第13章  JavaScript基础语法：日期计算器（85）

13.1  技能和知识点（85）

13.2  需求简介（85）

13.3  设计思路（86）

13.4  实现（86）

13.4.1  编写页面（86）

13.4.2  获取日期值（87）

13.4.3  创建日期对象（88）

13.4.4  计算并显示结果（88）

第14章  面向对象：学生信息管理（90）

14.1  技能和知识点（90）

14.2  需求简介（90）

14.3  设计思路（91）

14.4  实现（91）

14.4.1  创建文件（91）

14.4.2  创建构造函数（92）

14.4.3  添加原型方法（92）

14.4.4  实例化对象（92）

第15章  DOM操作：学生信息列表（94）

15.1  技能和知识点（94）

15.2  需求简介（94）

15.3  设计思路（95）

15.4  实现（96）

15.4.1  编写页面（96）

15.4.2  生成学生信息表格（97）

15.4.3  新增学生信息（98）

15.4.4  删除学生信息（100）

第16章  jQuery：目录页面生成（101）

16.1  技能和知识点（101）

16.2  需求简介（101）

16.3  设计思路（102）

16.4  实现（102）

16.4.1  引入jQeury（102）

16.4.2  搭建页面（103）

16.4.3  定义数组（104）

16.4.4  显示目录内容（104）

16.4.5  单击目录显示内容（105）

第17章  案例：在线视频课程网站（107）

17.1  需求和设计（107）

17.1.1  项目背景（107）

17.1.2  项目目标（107）

17.1.3  项目功能（108）

17.1.4  开发环境（109）

17.1.5  程序结构设计（109）

17.2  界面设计（111）

17.2.1  页面类型（111）

17.2.2  页面整体布局（112）

17.2.3  用户登录页面设计（112）

17.2.4  首页设计（112）

17.2.5  课程列表页面设计（113）

17.2.6  移动端首页设计（113）

17.3  第一阶段HTML5：首页（114）

17.3.1  功能简介（114）

17.3.2  设计思路（114）

17.3.3  实现（115）

17.4  第一阶段HTML5：用户注册（118）

17.4.1  功能简介（118）

17.4.2  设计思路（119）

17.4.3  实现（119）

17.5  第一阶段HTML5：用户登录（122）

17.5.1  功能简介（122）

17.5.2  设计思路（123）

17.5.3  实现（124）

17.6  第一阶段HTML5：课程详情（127）

17.6.1  功能简介（127）

17.6.2  设计思路（127）

17.6.3  实现（128）

17.7  第一阶段HTML5：视频播放（135）

17.7.1  功能简介（135）

17.7.2  设计思路（135）

17.7.3  实现（136）

17.8  第一阶段HTML5：后台课程管理（141）

17.8.1  功能简介（141）

17.8.2  设计思路（141）

17.8.3  实现（142）

17.9  第二阶段CSS3：首页（146）

17.9.1  功能简介（146）

17.9.2  设计思路（147）

17.9.3  实现（148）

17.10  第二阶段CSS3：用户注册（162）

17.10.1  功能简介（162）

17.10.2  设计思路（163）

17.10.3  实现（163）

17.11  第二阶段CSS3：用户登录（168）

17.11.1  功能简介（168）

17.11.2  设计思路（168）

17.11.3  实现（169）

17.12  第二阶段CSS3：课程详情（171）

17.12.1  功能简介（171）

17.12.2  设计思路（172）

17.12.3  实现（173）

17.13  第二阶段CSS3：章节目录（178）

17.13.1  功能简介（178）

17.13.2  设计思路（179）

17.13.3  实现（180）

17.14  第二阶段CSS3：视频播放（191）

17.14.1  功能简介（191）

17.14.2  设计思路（191）

17.14.3  实现（192）

17.15  第二阶段CSS3：后台课程管理首页（200）

17.15.1  功能简介（200）

17.15.2  设计思路（201）

17.15.3  实现（202）

17.16  第三阶段JavaScript+jQuery：章节目录页面交互效果（213）

17.16.1  功能简介（213）

17.16.2  设计思路（214）

17.16.3  实现（214）

17.17  第三阶段JavaScript+jQuery：视频播放页面交互效果（215）

17.17.1  功能简介（215）

17.17.2  设计思路（216）

17.17.3  实现（216）

17.18  第三阶段JavaScript+jQuery：后台课程管理首页交互效果（218）

17.18.1  功能简介（218）

17.18.2  设计思路（219）

17.18.3  实现（219）

17.19  第四阶段移动端：首页（222）

17.19.1  功能简介（222）

17.19.2  设计思路（223）

17.19.3  实现（224）

17.20  第四阶段移动端：用户登录（233）

17.20.1  功能简介（233）

17.20.2  设计思路（233）

17.20.3  实现（234）
内容简介:
本书是围绕《Web前端开发》职业技能等级标准（初级）和院校Web前端开发专业方向HTML5、JavaScript等主干课程编写的配套实践教程，书中的代码均已在开发环境和浏览器上运行通过。本书综合院校相关专业课程知识体系、Web前端开发岗位技能要求、《Web前端开发》职业技能等级标准（初级）中职业技能三者之间的知识和能力，并将其提炼成本书的实践能力目标。以实践能力为导向，以企业真实应用为目标，遵循企业标准开发过程和技术，以任务驱动，对HTML5、CSS3、JavaScript、jQuery、PC端/移动端等重要Web前端开发中的知识单元，结合实际案例和应用环境进行分析和设计，并对每个重要知识单元进行了详细的实现，使读者能够真正掌握这些知识在实际场景中的应用。本书分为两大部分：第一部分为技术专题（实验），主要进行知识单元训练，可以对应课程练习或实验进行实践，针对不同的知识单元设计了有针对性的专题项目，重点训练每个知识单元的内容，也为案例开发进行知识补强，储备技术；第二部分为案例，可以对应课程设计或综合实践，选用\"在线视频课程网站”，采用业务和知识迭代开发思路，完整训练Web核心知识单元在企业真实项目中的应用。
作者简介:
王晓玲（1974.12—），女，河北滦县，硕士研究生。现为上海电子信息职业技术学院讲师。自2003月至今，一直在软件技术专业兢兢业业的教学。指导学生参加各种比赛，并多次获奖。其中，全国职业技能大赛中两次一等奖，一次三等奖。课程建设方面：市级精品课程《面向对象编程（Java）》，校级精品课程两门《Android软件开发》、《网页制作》。开发了学校的评教系统网站。
目录:
第1章  概述（1）

1.1  实践目标（1）

1.2  技术专题设计（1）

1.3  案例设计（4）

第2章  开发环境：第一个HTML5程序（10）

2.1  技能和知识点（10）

2.2  需求简介（10）

2.3  设计思路（10）

2.4  实现（11）

2.4.1  下载安装Chrome（11）

2.4.2  下载安装HBuilder（13）

2.4.3  创建Web项目并运行（15）

第3章  HTML5表单—注册页面（19）

3.1  技能和知识点（19）

3.2  需求简介（20）

3.3  设计思路（20）

3.4  实现（21）

3.4.1  创建注册页面（21）

3.4.2  搭建头部和正文结构（22）

3.4.3  编写头部（22）

3.4.4  编写正文（23）

第4章  HTML5页面增强：资讯网站（25）

4.1  技能和知识点（25）

4.2  需求简介（25）

4.3  设计思路（26）

4.4  实现（27）

4.4.1  创建资讯详情页面（27）

4.4.2  搭建头部和正文结构（27）

4.4.3  编写头部（28）

4.4.4  编写正文（28）

第5章  HTML5全局属性：通信录（30）

5.1  技能和知识点（30）

5.2  需求简介（30）

5.3  设计思路（31）

5.4  实现（32）

5.4.1  创建通信录页面（32）

5.4.2  搭建头部和正文结构（32）

5.4.3  编写头部（33）

5.4.4  编写正文（33）

第6章  HTML5多媒体：HTML5播放音频（37）

6.1  技能和知识点（37）

6.2  需求简介（37）

6.3  设计思路（38）

6.4  实现（38）

6.4.1  搭建页面结构（38）

6.4.2  设置标题（39）

6.4.3  创建音乐列表（39）

第7章  HTML5多媒体：HTML5播放视频（41）

7.1  技能和知识点（41）

7.2  需求简介（41）

7.3  设计思路（42）

7.4  实现（42）

7.4.1  搭建页面结构（42）

7.4.2  设置标题（43）

7.4.3  创建视频列表（43）

第8章  HTML5语义化元素：音乐内容页（45）

8.1  技能和知识点（45）

8.2  需求简介（45）

8.3  设计思路（46）

8.4  实现（47）

8.4.1  搭建页面结构（47）

8.4.2  制作页头（47）

8.4.3  创建正文结构（48）

8.4.4  创建音乐内容（48）

8.4.5  操作按钮（49）

8.4.6  制作页脚（49）

第9章  CSS+CSS3：微博网站首页（50）

9.1  技能和知识点（50）

9.2  需求简介（50）

9.3  设计思路（51）

9.4  实现（52）

9.4.1  搭建页面结构（52）

9.4.2  制作页头（53）

9.4.3  制作正文导航栏（56）

9.4.4  制作正文微博列表（58）

第10章  CSS+CSS3：技术论坛系统首页（61）

10.1  技能和知识点（61）

10.2  需求简介（61）

10.3  设计思路（62）

10.4  实现（63）

10.4.1  搭建页面结构（63）

10.4.2  制作页头（64）

10.4.3  添加标题动画（65）

10.4.4  制作正文分类列表（66）

10.4.5  制作正文帖子列表（67）

第11章  移动端：电商列表页（70）

11.1  技能和知识点（70）

11.2  需求简介（70）

11.3  设计思路（71）

11.4  实现（72）

11.4.1  搭建页面结构（72）

11.4.2  设置视口（72）

11.4.3  制作页头（73）

11.4.4  创建商品列表（74）

第12章  移动端：视频网站（77）

12.1  技能和知识点（77）

12.2  需求简介（77）

12.3  设计思路（78）

12.4  实现（79）

12.4.1  搭建页面结构（79）

12.4.2  设置视口（79）

12.4.3  创建视频播放控件（79）

12.4.4  创建评论列表（80）

12.4.5  创建发布评论表单（81）

12.4.6  页面优化（83）

第13章  JavaScript基础语法：日期计算器（85）

13.1  技能和知识点（85）

13.2  需求简介（85）

13.3  设计思路（86）

13.4  实现（86）

13.4.1  编写页面（86）

13.4.2  获取日期值（87）

13.4.3  创建日期对象（88）

13.4.4  计算并显示结果（88）

第14章  面向对象：学生信息管理（90）

14.1  技能和知识点（90）

14.2  需求简介（90）

14.3  设计思路（91）

14.4  实现（91）

14.4.1  创建文件（91）

14.4.2  创建构造函数（92）

14.4.3  添加原型方法（92）

14.4.4  实例化对象（92）

第15章  DOM操作：学生信息列表（94）

15.1  技能和知识点（94）

15.2  需求简介（94）

15.3  设计思路（95）

15.4  实现（96）

15.4.1  编写页面（96）

15.4.2  生成学生信息表格（97）

15.4.3  新增学生信息（98）

15.4.4  删除学生信息（100）

第16章  jQuery：目录页面生成（101）

16.1  技能和知识点（101）

16.2  需求简介（101）

16.3  设计思路（102）

16.4  实现（102）

16.4.1  引入jQeury（102）

16.4.2  搭建页面（103）

16.4.3  定义数组（104）

16.4.4  显示目录内容（104）

16.4.5  单击目录显示内容（105）

第17章  案例：在线视频课程网站（107）

17.1  需求和设计（107）

17.1.1  项目背景（107）

17.1.2  项目目标（107）

17.1.3  项目功能（108）

17.1.4  开发环境（109）

17.1.5  程序结构设计（109）

17.2  界面设计（111）

17.2.1  页面类型（111）

17.2.2  页面整体布局（112）

17.2.3  用户登录页面设计（112）

17.2.4  首页设计（112）

17.2.5  课程列表页面设计（113）

17.2.6  移动端首页设计（113）

17.3  第一阶段HTML5：首页（114）

17.3.1  功能简介（114）

17.3.2  设计思路（114）

17.3.3  实现（115）

17.4  第一阶段HTML5：用户注册（118）

17.4.1  功能简介（118）

17.4.2  设计思路（119）

17.4.3  实现（119）

17.5  第一阶段HTML5：用户登录（122）

17.5.1  功能简介（122）

17.5.2  设计思路（123）

17.5.3  实现（124）

17.6  第一阶段HTML5：课程详情（127）

17.6.1  功能简介（127）

17.6.2  设计思路（127）

17.6.3  实现（128）

17.7  第一阶段HTML5：视频播放（135）

17.7.1  功能简介（135）

17.7.2  设计思路（135）

17.7.3  实现（136）

17.8  第一阶段HTML5：后台课程管理（141）

17.8.1  功能简介（141）

17.8.2  设计思路（141）

17.8.3  实现（142）

17.9  第二阶段CSS3：首页（146）

17.9.1  功能简介（146）

17.9.2  设计思路（147）

17.9.3  实现（148）

17.10  第二阶段CSS3：用户注册（162）

17.10.1  功能简介（162）

17.10.2  设计思路（163）

17.10.3  实现（163）

17.11  第二阶段CSS3：用户登录（168）

17.11.1  功能简介（168）

17.11.2  设计思路（168）

17.11.3  实现（169）

17.12  第二阶段CSS3：课程详情（171）

17.12.1  功能简介（171）

17.12.2  设计思路（172）

17.12.3  实现（173）

17.13  第二阶段CSS3：章节目录（178）

17.13.1  功能简介（178）

17.13.2  设计思路（179）

17.13.3  实现（180）

17.14  第二阶段CSS3：视频播放（191）

17.14.1  功能简介（191）

17.14.2  设计思路（191）

17.14.3  实现（192）

17.15  第二阶段CSS3：后台课程管理首页（200）

17.15.1  功能简介（200）

17.15.2  设计思路（201）

17.15.3  实现（202）

17.16  第三阶段JavaScript+jQuery：章节目录页面交互效果（213）

17.16.1  功能简介（213）

17.16.2  设计思路（214）

17.16.3  实现（214）

17.17  第三阶段JavaScript+jQuery：视频播放页面交互效果（215）

17.17.1  功能简介（215）

17.17.2  设计思路（216）

17.17.3  实现（216）

17.18  第三阶段JavaScript+jQuery：后台课程管理首页交互效果（218）

17.18.1  功能简介（218）

17.18.2  设计思路（219）

17.18.3  实现（219）

17.19  第四阶段移动端：首页（222）

17.19.1  功能简介（222）

17.19.2  设计思路（223）

17.19.3  实现（224）

17.20  第四阶段移动端：用户登录（233）

17.20.1  功能简介（233）

17.20.2  设计思路（233）

17.20.3  实现（234）

查看详情

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

内容简介:

作者简介:

目录: