本教材是计算机应用技术专业(Web前端开发方向)专业的专业核心基础课程,通过对

Web前端工程师的职业岗位进行系统化调研与分析,对接工信部Web前端开发“1+X”证书

标准,构建课证融通的教学实施范式。本教材将职业技能认证标准与课程内容相融合,职业技

能考核与课程考核评价同步,将课程内容进行重构,形成了10个典型项目。每个项目由若干

任务组成,每个任务对接相关知识点和技能点,同时课后采用工单任务形式让学生拓展训练。

10个典型项目主要来源于教学团队名师工作室已开发完成的项目,充分体现了教育的特色。

师生在教学中共同探讨如何加强编写代码的规范性、严谨性。本教材融入思政元素,力求在培

养学生成为一名合格的Web前端工程师的同时,兼具家国情怀、职业道德和匠心精神。

项目1 创建第一个网页———Web前端

概述……………………………… 1

任务1 Web简介……………………… 1

1.1 认识网页和网站………………… 2

1.2 Web的诞生…………………… 4

1.3 Web相关术语………………… 5

任务2 网站建设基础………………… 8

2.1 网页设计基础…………………… 8

2.2 网页配色基础…………………… 9

2.3 网站设计流程………………… 11

2.4 网页模块命名规范…………… 13

2.5 网站建设基本流程…………… 14

2.6 网站建设后期事宜…………… 14

2.7 网站开发者工具……………… 15

任务3 项目实施 …………………… 20

3.1 编写HTML代码…………… 20

3.2 编写CSS代码………………… 21

课后习题………………………………… 22

项目2 旅游专题网站首页———

HTML入门……………………… 23

任务1 认识HTML ………………… 24

1.1 HTML文档基本格式………… 25

1.2 HTML标签…………………… 26

1.3 标签的属性…………………… 28

1.4 HTML文档头部相关标签…… 29

任务2 HTML文本控制标签……… 31

2.1 标题标签和段落标签………… 31

2.2 文本样式标签………………… 34

2.3 文本格式化标签……………… 35

2.4 文本语义标签………………… 36

2.5 特殊字符标签………………… 37

任务3 HTML图像标签…………… 38

3.1 常用图像格式………………… 38

3.2 图像标签……………………… 39

3.3 相对路径与绝对路径………… 43

任务4 项目实施……………………… 43

4.1 准备工作……………………… 43

4.2 效果分析……………………… 44

4.3 制作“头部”模块……………… 45

4.4 制作“说旅游”模块…………… 46

4.5 制作“旅游有你真好”模块…… 47

4.6 制作“驴友评论”模块………… 48

4.7 制作“页脚”模块……………… 50

课后习题………………………………… 51

项目3 书海遨游主题网页———CSS入门… 53

任务1 CSS简介……………………… 54

1.1 什么是CSS? ………………… 54

1.2 结构与表现分离……………… 54

1.3 CSS发展史…………………… 55

任务2 CSS核心基础………………… 55

2.1 CSS样式规则………………… 55

2.2 引入CSS样式表……………… 56

2.3 CSS基础选择器……………… 61

任务3 CSS控制文本样式…………… 64

3.1 CSS字体样式属性…………… 64

3.2 CSS文本外观属性…………… 67

任务4 CSS高级属性………………… 73

4.1 CSS复合选择器……………… 74

4.2 CSS层叠性与继承性………… 77

4.3 CSS优先级…………………… 78

任务5 项目实施……………………… 81

5.1 准备工作……………………… 82

5.2 效果分析……………………… 82

5.3 定义基础样式………………… 83

5.4 制作“标题”及“banner”模块… 84

5.5 制作热卖模块………………… 86

5.6 制作“页脚”模块……………… 87

课后习题………………………………… 89

项目4 视觉摄影协会主题网站首页———

盒子模型………………………… 91

任务1 认识盒子模型………………… 92

1.1 盒子的几个概念和属性……… 93

1.2 设置盒子属性的几种方式…… 93

1.3 盒子的宽度与高度…………… 93

任务2 盒子模型相关属性…………… 94

2.1 边框属性……………………… 95

2.2 内边距属性…………………… 100

2.3 外边距属性…………………… 102

2.4 背景属性……………………… 102

任务3 CSS3新增盒子模型属性…… 107

3.1 颜色的透明度………………… 107

3.2 圆 角………………………… 108

3.3 图片边框……………………… 110

3.4 阴 影………………………… 112

3.5 渐 变………………………… 113

任务4 元素类型与转换…………… 117

4.1 元素的类型…………………… 117

4.2 <div>与<span>标签…… 119

4.3 元素的转换…………………… 121

任务5 块级元素垂直外边距的合并… 123

5.1 相邻块级元素垂直外边距的

合并…………………………… 124

5.2 嵌套块级元素垂直外边距的

合并…………………………… 125

任务6 项目实施…………………… 127

6.1 准备工作……………………… 127

6.2 效果分析……………………… 127

6.3 定义基础样式………………… 128

6.4 制作“导航”及“banner”模块…… 129

6.5 制作最新动态模块…………… 131

6.6 制作“样片欣赏”模块………… 133

6.7 制作“页脚”模块……………… 134

课后习题……………………………… 135

项目5 “经史子集”主题网站首页———

浮动与定位…………………… 136

任务1 元素的浮动………………… 137

1.1 元素的浮动属性……………… 138

1.2 清除浮动……………………… 140

1.3 overflow属性………………… 146

任务2 元素的定位………………… 148

2.1 元素的定位属性……………… 148

2.2 静态定位……………………… 148

2.3 相对定位……………………… 149

2.4 绝对定位……………………… 150

2.5 固定定位……………………… 152

2.6 z-index层叠等级属性……… 153

任务3 Div+CSS布局……………… 153

3.1 版心和布局流程……………… 153

3.2 单列布局……………………… 153

3.3 两列布局……………………… 154

3.4 三列布局……………………… 154

3.5 通栏布局……………………… 155

任务4 项目实施…………………… 156

4.1 准备工作……………………… 156

4.2 效果分析……………………… 156

4.3 定义基础样式………………… 157

4.4 制作“导航”及“banner”模块…… 158

4.5 制作新闻模块………………… 161

4.6 制作“悬浮框”和“页脚”模块… 163

课后习题……………………………… 164

项目6 “书与创”主题网页制作———列表

与超链接……………………… 166

任务1 列表标签…………………… 167

1.1 无序列表……………………… 167

1.2 有序列表……………………… 169

1.3 自定义列表…………………… 170

任务2 css控制列表样式…………… 171

2.1 list-style-type属性………… 171

2.2 list-style-image属性………… 172

2.3 list-style-positon属性……… 173

2.4 list-style属性………………… 175

任务3 超链接标签………………… 177

3.1 创建超链接…………………… 177

3.2 锚点链接……………………… 178

任务4 链接伪类控制超链接……… 179

任务5 项目实施…………………… 180

5.1 准备工作……………………… 180

5.2 效果分析……………………… 181

5.3 定义基础样式………………… 181

5.4 制作“banner”及“内容”模块…… 182

5.5 制作“banner”和“国内文创产品”

模块…………………………… 184

5.6 制作文创作品………………… 184

5.7 制作“版权信息”模块………… 187

课后习题……………………………… 189

项目7 “文创联盟”登录注册页面———

表格与表单…………………… 191

任务1 表格标签…………………… 192

1.1 创建表格……………………… 192

1.2 <table>标签的属性……… 194

1.3 <tr>标签的属性…………… 197

1.4 <td>标签的属性…………… 198

任务2 CSS控制表格样式………… 200

2.1 CSS控制表格边框………… 200

2.2 CSS控制单元格边距……… 202

2.3 CSS控制单元格宽和高…… 204

任务3 表 单……………………… 205

3.1 认识表单……………………… 205

3.2 表单控件……………………… 207

任务4 CSS控制表单样式………… 213

任务5 HTML5表单新属性……… 216

5.1 <form>新特性…………… 217

5.2 <input>新特性…………… 218

任务6 项目实施…………………… 220

6.1 准备工作……………………… 220

6.2 效果分析……………………… 221

6.3 定义基础样式………………… 221

6.4 制作“banner”及“内容”模块…… 222

6.5 制作“页脚”模块……………… 226

课后习题……………………………… 227

项目8 春节主题网站首页———CSS3

进阶…………………………… 229

任务1 CSS3选择器………………… 230

1.1 属性选择器…………………… 230

1.2 关系选择器…………………… 233

1.3 结构化伪类选择器…………… 236

1.4 伪元素选择器………………… 243

任务2 CSS3过渡、变形、动画……… 245

2.1 过 渡………………………… 245

2.2 变 形………………………… 248

2.3 动 画………………………… 252

任务3 项目实施…………………… 254

3.1 准备工作……………………… 254

3.2 效果分析……………………… 254

3.3 定义基础样式………………… 255

3.4 制作菜单栏模块……………… 257

3.5 制作内容模块………………… 258

3.6 制作“页脚”模块……………… 260

课后习题……………………………… 26

项目9 冬奥会主题网站首页———HTML5

进阶…………………………… 262

任务1 多媒体嵌入………………… 263

1.1 视频/音频嵌入技术………… 263

1.2 视频文件和音频文件的格式… 264

1.3 嵌入视频和音频……………… 264

1.4 CSS控制视频的宽和高…… 267

任务2 HTML5数据存储技术…… 268

2.1 原始存储方式———Cookie … 268

2.2 HTML5全新存储技术 Web

Storage ……………………… 269

任务3 JavaScript的引入…………… 269

任务4 项目实施…………………… 271

4.1 准备工作……………………… 271

4.2 效果分析……………………… 271

课后习题……………………………… 275

项目10 抗疫专题网站制作———实战

开发…………………………… 277

10.1 准备工作…………………… 278

10.2 首页面制作………………… 279

10.3 子页面详情页制作………… 285

10.4 子页面视频页制作………… 286