WEB前端开发任务驱动式教程(HTML5+CSS3+JAVASCRIPT)(第2版)(微课版)

2025-8-28 76 8/28

WEB前端开发任务驱动式教程(HTML5+CSS3+JAVASCRIPT)(第2版)(微课版)

作者:汪婵婵

页数:264

出版社:电子工业出版社

出版日期:2023

ISBN:9787121448614

高清校对版pdf(带目录)

前往页尾底部查看PDF电子书

内容简介

本书以“采用网页新标准技术、突破传统知识体系结构、基于工作能力培养、置身真实工作情境”为标准,通过任务驱动的教学方式讲解HTML5、CSS3、JavaScript等Web前端开发技术。本书包含8个单元、18个任务、18个实战演练、18个强化训练和18个课后实训,每个项目任务又以“知识准备→实战演练→强化训练→课后实训”为主线,介绍了Web基础知识、HTML5语言基础、HTML5新增标签及属性、CSS3基础、盒子模型、HTML5表单的应用、网页多媒体和JavaScript基础。本书将Web前端开发技术贯穿所有的项目任务和实训中,深入剖析了网页布局及样式美化的思路和方法,使学生掌握Web前端核心技术,启发并引导学生自主学习,并形成良好的职业素养。本书既可以作为高等院校、高等职业院校“网页设计与制作”课程的教材,也可以作为前端与移动开发的培训教材,还可以供从事网页制作、网站开发、网页编程和美工设计等方面工作的人员参考。

作者简介

汪婵婵,副教授,2011年毕业于同济大学计算机技术工程硕士。工作十多年来,一直从事网站设计类课程的教学,积累了一定的经验。曾主持省课题一项,市课题一项,院课题多项。参与多项省部级课题、市厅级课题和院级课题。主编教材两本,副主编一本。

目录

目录

第一单元 Web基础知识

任务1 搭建开发环境 1

1.1 知识准备 1

1.1.1 Web与Internet 1

1.1.2 Web的工作原理 2

1.1.3 Web页的类型 3

1.1.4 HTML5概述 3

1.2 实战演练——搭建开发环境 3

1.2.1 网页编辑软件的安装 3

1.2.2 浏览器的安装 5

1.3 强化训练——创建第一个HTML5页面 5

1.3.1 创建和管理站点 5

1.3.2 创建和保存HTML5文档 7

1.4 课后实训 8

第二单元 HTML5语言基础

任务2 文字与段落排版 10

2.1 知识准备 10

2.1.1 HTML5文档格式 10

2.1.2 标签的属性 11

2.1.3 文本标签 12

2.1.4 分隔标签 14

2.1.5 序列标签 16

2.2 实战演练——制作“科技馆参观须知”网页 18

2.2.1 网页效果图 18

2.2.2 制作过程 19

2.2.3 代码分析 19

2.3 强化训练——制作“我家菜馆”点菜单网页 20

2.3.1 网页效果图 20

2.3.2 制作过程 20

2.3.3 代码分析 21

2.4 课后实训 21

任务3 图像和超链接 22

3.1 知识准备 22

3.1.1 图像标签 22

3.1.2 绝对路径和相对路径 23

3.1.3 超链接标签 24

3.1.4 锚点链接 25

3.2 实战演练——制作“网页技术介绍”网页 27

3.2.1 网页效果图 27

3.2.2 制作过程 27

3.2.3 代码分析 29

3.3 强化训练——制作“文章故事网”网页 29

3.3.1 网页效果图 29

3.3.2 制作过程 30

3.3.3 代码分析 31

3.4 课后实训 31

第三单元 HTML5新增标签及属性

任务4 结构标签和分组标签 32

4.1 知识准备 32

4.1.1 结构标签 32

4.1.2 分组标签 39

4.2 实战演练——制作“唐诗欣赏”网页 41

4.2.1 网页效果图 41

4.2.2 制作过程 41

4.2.3 代码分析 44

4.3 强化训练——制作“温州地标性建筑”网页 45

4.3.1 网页效果图 45

4.3.2 制作过程 45

4.3.3 代码分析 47

4.4 课后实训 48

任务5 页面交互标签、层次语义标签和全局属性 48

5.1 知识准备 48

5.1.1 页面交互标签 48

5.1.2 层次语义标签 51

5.1.3 全局属性 53

5.2 实战演练——制作“书评网”网页 56

5.2.1 网页效果图 56

5.2.2 制作过程 57

5.2.3 代码分析 60

5.3 强化训练——制作“面试应答技巧”网页 60

5.3.1 网页效果图 60

5.3.2 制作过程 61

5.3.3 代码分析 63

5.4 课后实训 63

第四单元 CSS3基础

任务6 标记选择器和类选择器 65

6.1 知识准备 65

6.1.1 CSS简介 65

6.1.2 CSS样式规则 65

6.1.3 CSS样式的引入 66

6.1.4 CSS样式的优先级 68

6.1.5 标记选择器 68

6.1.6 类选择器 69

6.2 实战演练——制作“美化文章”网页 70

6.2.1 网页效果图 70

6.2.2 制作过程 70

6.2.3 代码分析 72

6.3 强化训练——制作“图文混排”网页 72

6.3.1 网页效果图 72

6.3.2 制作过程 73

6.3.3 代码分析 74

6.4 课后实训 75

任务7 链接伪类和CSS样式面板 75

7.1 知识准备 75

7.1.1 链接伪类 75

7.1.2 CSS样式面板 77

7.2 实战演练——制作“散文欣赏”网页 77

7.2.1 网页效果图 77

7.2.2 制作过程 78

7.2.3 代码分析 85

7.3 强化训练——制作“热点新闻”列表 85

7.3.1 网页效果图 85

7.3.2 制作过程 86

7.3.3 代码分析 91

7.4 课后实训 91

任务8 id选择器、伪选择器和表格样式 92

8.1 知识准备 92

8.1.1 id选择器 92

8.1.2 伪选择器 93

8.1.3 表格 94

8.2 实战演练——制作“鞋子尺码对照单”网页 96

8.2.1 网页效果图 96

8.2.2 制作过程 96

8.2.3 代码分析 98

8.3 强化训练——制作“婴儿身高体重标准表”网页 99

8.3.1 网页效果图 99

8.3.2 制作过程 100

8.3.3 代码分析 102

8.4 课后实训 103

任务9 复合选择器和通配符选择器 103

9.1 知识准备 103

9.1.1 复合选择器 103

9.1.2 通配符选择器 106

9.1.3 同时应用多个样式 106

9.2 实战演练——制作“寓言故事”网页 107

9.2.1 网页效果图 107

9.2.2 制作过程 108

9.2.3 代码分析 110

9.3 强化训练——制作“诗词欣赏”网页 110

9.3.1 网页效果图 110

9.3.2 制作过程 111

9.3.3 代码分析 116

9.4 课后实训 116

第五单元 盒 子 模 型

任务10 盒子模型及应用 119

10.1 知识准备 119

10.1.1 盒子模型的概念 119

10.1.2 边框的设置 120

10.1.3 内边距的设置 125

10.1.4 外边距的设置 126

10.2 实战演练——制作“古诗文欣赏”网页 128

10.2.1 网页效果图 128

10.2.2 制作过程 128

10.2.3 代码分析 129

10.3 强化训练——制作“散文赏析”网页 130

10.3.1 网页效果图 130

10.3.2 制作过程 130

10.3.3 代码分析 132

10.4 课后实训 133

任务11 元素的浮动 133

11.1 知识准备 133

11.1.1 元素的类型及转换 133

11.1.2 overflow属性 135

11.1.3 元素的浮动 136

11.1.4 清除浮动 139

11.2 实战演练——制作“网站导航条”网页 144

11.2.1 网页效果图 144

11.2.2 制作过程 145

11.2.3 代码分析 146

11.3 强化训练——制作“浪漫花语百科网”网页 146

11.3.1 网页效果图 146

11.3.2 制作过程 146

11.3.3 代码分析 150

11.4 课后实训 151

任务12 元素的定位 152

12.1 知识准备 152

12.1.1 元素的定位模式与边偏移 152

12.1.2 静态定位 152

12.1.3 相对定位 152

12.1.4 绝对定位 154

12.1.5 固定定位 156

12.1.6 z-index层叠等级属性 156

12.2 实战演练——制作“旅游景点推荐网”banner 157

12.2.1 网页效果图 157

12.2.2 制作过程 157

12.2.3 代码分析 159

12.3 强化训练——制作“个人博客首页”网页 160

12.3.1 网页效果图 160

12.3.2 制作过程 160

12.3.3 代码分析 163

12.4 课后实训 164

任务13 阴影与渐变属性 164

13.1 知识准备 164

13.1.1 box-shadow属性 164

13.1.2 box-sizing属性 165

13.1.3 线性渐变 167

13.1.4 径向渐变 168

13.1.5 重复渐变 168

13.1.6 Web字体图标 170

13.2 实战演练——制作“网站广告栏”网页 171

13.2.1 网页效果图 171

13.2.2 制作过程 171

13.2.3 代码分析 173

13.3 强化训练——制作“旅游攻略网”网页 174

13.3.1 网页效果图 174

13.3.2 制作过程 175

13.3.3 代码分析 179

13.4 课后实训 181

任务14 过渡与变形属性 181

14.1 知识准备 181

14.1.1 过渡属性 181

14.1.2 变形属性 183

14.2 实战演练——制作“产品展示”网页 184

14.2.1 网页效果图 184

14.2.2 制作过程 185

14.2.3 代码分析 186

14.3 强化训练——制作“商品评论”网页 187

14.3.1 网页效果图 187

14.3.2 制作过程 187

14.3.3 代码分析 191

14.4 课后实训 191

第六单元 HTML5表单的应用

任务15 表单与input元素 194

15.1 知识准备 194

15.1.1 认识表单 194

15.1.2 创建表单 194

15.1.3 input元素及属性 195

15.2 实战演练——制作“登录界面”网页 196

15.2.1 网页效果图 196

15.2.2 制作过程 196

15.2.3 代码分析 198

15.3 强化训练——制作“简历”表单 199

15.3.1 网页效果图 199

15.3.2 制作过程 200

15.3.3 代码分析 203

15.4 课后实训 204

任务16 其他表单元素与表单验证 204

16.1 知识准备 204

16.1.1 其他表单元素 204

16.1.2 表单验证方法 207

16.1.3 正则表达式 208

16.2 实战演练——制作“商品订购”表单 210

16.2.1 网页效果图 210

16.2.2 制作过程 210

16.2.3 代码分析 213

16.3 强化训练——制作“会员注册”表单 213

16.3.1 网页效果图 213

16.3.2 制作过程 214

16.3.3 代码分析 216

16.4 课后实训 217

第七单元 网页多媒体

任务17 视频与音频 218

17.1 知识准备 218

17.1.1 嵌入视频 218

17.1.2 嵌入音频 219

17.1.3 <source>标签 219

17.1.4 视频与音频的DOM操作 220

17.2 实战演练——制作“音乐播放器”网页 221

17.2.1 网页效果图 221

17.2.2 制作过程 221

17.2.3 代码分析 223

17.3 强化训练——制作“视频播放”网页 223

17.3.1 网页效果图 223

17.3.2 制作过程 224

17.3.3 代码分析 225

17.4 课后实训 225

第八单元 JavaScript基础

任务18 JavaScript的应用 226

18.1 知识准备 226

18.1.1 JavaScript简介 226

18.1.2 JavaScript语言基础 228

18.1.3 JavaScript函数 230

18.1.4 事件及事件驱动 231

18.1.5 JavaScript对象 233

18.1.6 BOM对象 238

18.1.7 DOM对象 240

18.2 实战演练——制作“商品精选模块”网页 243

18.2.1 网页效果图 243

18.2.2 制作过程 243

18.2.3 代码分析 245

18.3 强化训练——制作“焦点图广告”网页 246

18.3.1 网页效果图 246

18.3.2 制作过程 246

18.3.3 代码分析 250

18.4 课后实训 251
PDF更新中
- THE END -

非特殊说明,本博所有文章均为博主原创。