本教材以培养能从事Web前端开发工作的技术技能型人才为目标进行编写。将“Web前端开发岗位技能要求、职业标准、工作过程和项目”作为教材主体内容，以职业场景、职业技能、知识能力为主要框架结构，以解决实际项目的思路和操作为主线，通过初识Web前端技术、HTML常见标签、CSS3入门、美化页面、网页中的导航菜单、网页中的表单、网页中的表格等任务全面详细地介绍了前端开发技术。本教材的项目由企业工程师根据项目实施情况提供原型，在校教师按照高职学生认知特点重构项目教学过程，校企双方专家共同审定。

本教材具有以下特点：

（1）突出客户端网页效果制作能力的培养。本教材按照工学结合教材的编写思路，精心设计了七个教学环节：任务描述、学习目标、知识引入、任务实现、动手实践、任务小结和课后练习。让读者在反复动手实践中学会应用所学知识解决实际问题。

（2）教学内容根据真实任务来设定。选取的教学内容适用于设计与制作小型网站，也可以作为大型网站规划与建设的基础。

（3）内容由浅入深，并辅以大量的实例说明，操作性和实用性较强。

（4）充分考虑学生的认知规律，化解知识难点。本教材面向实际应用组织教材内容，通过实例进行讲解、分析。

项目1  初识Web前端技术

任务1-1  Web 前端开发准备 3

任务描述 3

学习目标 3

知识引入 3

一、Web 前端概述 4

二、Web 前端开发工具 6

三、搭建Web 前端开发环境 8

任务实现  查看页面源代码 12

任务1-2  创建第一个网页 13

任务描述13

学习目标13

知识引入13

一、什么是HTML？ 13

二、HTML 基本结构 15

任务实现  编写第一个HTML 程序16

动手实践18

任务小结18

课后练习18

项目2  HTML常见标签

任务2-1  制作图文网页 21

任务描述21

学习目标21

知识引入21

一、文本控制标签 21

二、图像标签 26

任务实现  制作图文混排页面 27

任务2-2  制作新闻列表 29

任务描述29

学习目标29

知识引入29

一、超链接标签 29

二、列表标签 34

任务实现  制作新闻列表页面 38

动手实践39

任务小结39

课后练习39

项目3  CSS3入门

任务3-1  制作文字logo 43

任务描述43

学习目标43

知识引入43

一、CSS3 基础知识 43

二、CSS3 初级选择器 47

三、CSS3 高级选择器 50

任务实现  用CSS 样式实现文字页面效果54

任务3-2  简单的页面布局 57

任务描述57

学习目标57

知识引入57

一、盒子模型 57

二、<div>标签 59

三、边框属性 60

任务实现  简单的页面布局 63

动手实践64

任务小结65

课后练习65

项目4  美化页面

任务4-1  制作具体新闻页面 69

任务描述69

学习目标69

知识引入69

一、字体样式属性 69

二、文本外观属性 73

任务实现  制作具体新闻页面 76

任务4-2  美化新闻列表页面 78

任务描述78

学习目标78

知识引入78

一、超链接样式 78

二、背景颜色和背景图像 80

任务实现  美化新闻列表页面 86

动手实践88

任务小结88

课后练习88

项目5  网页中的导航菜单

任务5-1  一级导航菜单的设计 93

任务描述93

学习目标93

知识引入93

一、水平导航菜单 94

二、垂直导航菜单 99

任务实现  制作网站首页水平导航页面 104

任务5-2  二级弹出式菜单的设计与定位 107

任务描述 107

学习目标 107

知识引入 107

一、元素的定位 107

二、定位的属性 108

三、定位的应用 109

任务实现  制作首页二级弹出式菜单页面 119

动手实践 123

任务小结 124

课后练习 124

项目6  网页中的表单

任务6-1  登录页面的设计 127

任务描述 127

学习目标 127

知识引入 128

一、表单的组成 128

二、创建表单 128

三、表单控件 129

任务实现  制作用户登录页面 133

任务6-2  注册页面的设计 137

任务描述 137

学习目标 137

知识引入 138

HTML5新增类型 138

任务实现  制作用户注册页面 143

动手实践 149

任务小结 149

课后练习 149

项目7  网页中的表格

任务7-1  制作显示数据的表格 153

任务描述 153

学习目标 153

知识引入 154

一、创建表格 154

二、表格的常见属性 156

任务实现  制作用表格显示数据的页面 161

任务7-2  制作不一样的网页表格 163

任务描述 163

学习目标 163

知识引入 163

CSS 控制表格样式 163

任务实现  设计网页中的表格 167

动手实践 174

任务小结 175

课后练习 175

项目8  网页中视频和音频的应用

任务8  网页中插入视频与音频文件 179

任务描述 179

学习目标 179

知识引入 180

一、Web 上的视频 180

二、Web 上的音频 185

任务实现  模仿制作百度视频页面 187

动手实践 188

任务小结 189

课后练习 189

项目9  实战开发

任务9  学院首页的设计与制作 193

任务描述 193

学习目标 193

知识引入 193

一、效果图分析 194

二、首页详细制作 196

任务实现  制作淘兴趣网站的首页和登录页面 219

动手实践 227

任务小结 228

课后练习 228