本书是“十四五”高等职业教育计算机类专业系列教材之一，主要围绕HTML5、CSS3、JavaScript相关技术讲解网页设计与制作。全书分三篇：基础篇、提高篇、应用篇。基础篇主要介绍Web前端技术开发的基本概念，HTML、CSS、JavaScript三者在网页开发中各自扮演的角色，网页开发环境与工具，制作图文并茂的页面，表格的应用，表单的应用，通过HTML5搭建文本、图像、超链接、表格、表单等网页内容。提高篇主要介绍CSS基础知识、字体样式设置、文本精细排版、背景设置、层与区块的页面布局、多媒体元素、Canvas元素等，着重介绍CSS代码开发。应用篇主要介绍列表的应用，JavaScript、jQuery脚本语言的基础开发，使用Bootstrap前端开发框架进行综合网站开发的案例。
本书基于案例教学的思想，所有实例均具有代表性和实用性，系统学习后能使读者快速掌握网页制作的相关技术，迅速进入Web页面的实战开发。
本书适合作为高等职业院校Web前端技术开发课程的教材。

本书是针对高等职业院校Web前端技术开发课程编写的，主要介绍HTML 5、CSS 3、JavaScript前端开发技术。
本书从网页设计与制作的实际需要出发，全面、系统地介绍网页设计与制作的相关知识，并配合大量典型实例，让读者了解和掌握网页设计与制作的方法。全书分三篇：基础篇、提高篇、应用篇。基础篇共4个单元。第1单元是网页开发入门介绍；第2单元介绍图文并茂的页面制作，包括文档基本结构、添加文字、图片、超链接等；第3单元介绍表格的应用，包括表格的属性设置、跨行跨列操作、表格嵌套和布局；第4单元介绍HTML5表单的应用，包括表单控件的创建和属性设置。提高篇共3个单元；第5单元为使用CSS美化页面，介绍CSS基本概念和引入方式、CSS字体样式设置、文本精细排版和CSS背景设置；第6单元为层与区块的页面布局，主要介绍CSS核心盒子模型、层与定位、边框、填充、边距的设置等；第7单元为多媒体页面制作，介绍HTML5视频、音频、Canvas元素等。应用篇共3个单元。第8单元为列表的应用，介绍列表的建立、样式的设置、水平导航栏的制作等；第9单元介绍JavaScript和jQuery脚本语言的基础开发；第10单元为综合网站案例实战，从网页设计与准备到首页制作、子栏目页面等的制作，介绍如何使用Bootstrap前端开发框架进行快速建站的方法。
本书以网页设计与制作、网站管理与维护岗位人才的能力需求为导向，针对高职学生的认知特点，以企业典型案例为载体，形成从简单实例到复杂案例的系统化学习，突出学生的教学主体作用，重视职业能力的培养，充分体现课程教学的职业性、实践性和开放性。让学生在递进式案例教学过程中培养网页设计与制作的综合职业技能和职业素养。
本书具有以下特色：
1．案例丰富
每个知识点配有1个或多个实例，每个单元都设计了配套的实训任务和技能训练，重视技术的应用和实践，从实例到实训任务再到技能训练，循序渐进，层层深入，与此同时，激发读者自身的学习兴趣，形成持久的学习动力。
2．简单易用
本书配套丰富的立体化的在线学习资源，可以开展线上线下混合式教学，包括以下内容：
（1）PPT、教案、课程标准、习题及答案等。
（2）微课视频、操作视频等。
（3）案例库、源代码、实训任务、技能训练源代码和素材等。
3．实战性强
本书是校企合作的成果之一。书中的很多素材、实例和实训项目都是与企业联合设计与开发的，具有实战指导作用。
本书由高莺、尤澜涛任主编，由陆正、陆伟峰、张趁香、韩月娟、吕雅丽、吴刘洁
任副主编。
由于时间仓促，书中难免存在疏漏和不足之处，敬请广大读者批评指正，以期不断改进。

资源下载


编 者
2024年3月

基 础 篇
 网页开发入门 2
1.1 网页基础知识 2
1.1.1 网页与网站 2
1.1.2 经典网页赏析 3
1.1.3 浏览器的兼容性问题 5
1.2 HTML、CSS、JavaScript三者扮演的角色 5
1.2.1 HTML与HTML5的概念 5
1.2.2 CSS与CSS3的概念 7
1.2.3 JavaScript介绍 9
1.3 网页开发环境与工具 10
1.3.1 网页开发环境的种类 10
1.3.2 浏览器的标准模式和混杂模式 13
 图文并茂的页面制作 14
2.1 XHTML与文档类型声明 14
2.2 HTML基础语法 16
2.2.1 HTML标记 16
2.2.2 HTML标记属性 17
2.2.3 添加HTML注释 18
2.3 HTML文档整体结构 20
2.3.1 文档头部 20
2.3.2 文档主体 22
2.4 添加段落 23
2.5 添加标题 24
2.6 文本修饰 24
2.6.1 设置文本加粗 25
2.6.2 设置文本倾斜 25
2.6.3 设置下画线 25
2.7 特殊字符 26
2.8 图片与超链接 27
2.8.1 设置图片 27
2.8.2 添加超链接 29
2.8.3 绝对路径与相对路径 30
2.9 HTML文件命名及代码编写 32
实训任务 花卉图片展页面制作 32
技能训练 苏州园林景点介绍页面制作 34
 表格的应用 35
3.1 创建表格 35
3.1.1 表格的基本构成 35
3.1.2 设置表格的标题 37
3.1.3 添加表头 38
3.2 表格属性设置 39
3.2.1 设置表格边框样式 39
3.2.2 设置宽度和高度 41
3.2.3 设置对齐方式 44
3.2.4 边距与填充 47
3.2.5 背景色设置 49
3.3 跨行和跨列操作 51
3.3.1 跨列操作  51
3.3.2 跨行操作  52
3.4 表格嵌套 54
实训任务 使用表格嵌套制作销售员个人主页 55
技能训练 插件中心的设计与制作 57
 HTML5表单的应用 58
4.1 创建表单 58
4.2 表单输入控件 59
4.2.1 定义单行文本框 60
4.2.2 定义密码框 62
4.2.3 定义单选按钮 62
4.2.4 定义复选框 63
4.2.5 定义标准按钮 64
4.2.6 定义提交按钮 65
4.2.7 定义重置按钮 66
4.2.8 定义图像域 67
4.2.9 定义隐藏域 68
4.2.10 定义文件域 69
4.2.11 定义日期选择器 70
4.2.12 定义拾色器 70
4.2.13 定义数值域文本框 71
4.2.14 定义数值域滑动条 72
4.3 定义下拉列表 73
4.4 定义文本域 74
4.5 定义标签 76
4.6 HTML5表单数据内容变化 77
4.6.1 HTML5数据提交格式 77
4.6.2 HTML5数据提交范围 77
4.6.3 HTML5中增加表单数据类型和控件标记 77
4.6.4 新增HTML5表单控件属性 77
实训任务 登录表单的制作 81
技能训练 注册页面的设计与制作 82
提 高 篇
 使用CSS美化页面 84
5.1 CSS基础 84
5.1.1 CSS样式表的概念 84
5.1.2 CSS的选择器 84
5.1.3 CSS样式表引入方式 89
5.2 CSS字体样式设置 90
5.2.1 设置字体 90
5.2.2 设置字体大小 92
5.2.3 设置字体样式-font-style 94
5.2.4 设置字体加粗-font-weight 96
5.2.5 设置字体变体  97
5.2.6 设置组合字体属性  98
5.2.7 设置文字颜色-color 99
5.3 文本精细排版 101
5.3.1 添加文本修饰 101
5.3.2 设置文本对齐方式 103
5.3.3 设置文本缩进 104
5.3.4 调整行高 105
5.3.5 转换英文大小写-text-transform 107
5.4 背景设置 108
5.4.1 设置背景颜色 108
5.4.2 插入背景图片 110
5.4.3 设置重复背景图片 111
5.4.4 插入背景附件 112
5.4.5 设置背景图片位置 113
5.4.6 设置背景组合属性 114
实训任务 百度搜索结果页面的样式设计与制作 116
技能训练 新浪新闻页面的制作 117
 层与区块的页面布局 118
6.1 CSS布局基础 118
6.1.1 文档流的概念 118
6.1.2 块级元素与行内元素 119
6.2 创建层 119
6.3 盒子模型 120
6.4 边框属性 122
6.5 填充属性 126
6.6 边距属性 127
6.7 元素浮动 129
6.8 清除浮动 136
6.9 元素定位 138
6.9.1 绝对定位 139
6.9.2 相对定位 143
6.9.3 z-index空间位置 144
实训任务？“厂”字形页面布局设计 145
技能训练 DIV+CSS页面布局建站 149
 多媒体页面设计 150
7.1 HTML5多媒体元素 150
7.1.1 HTML5音频 150
7.1.2 HTML5视频 152
7.1.3 使用DOM控制播放 154
7.2 HTML5 Canvas元素 158
7.2.1 Canvas属性设置 159
7.2.2 Canvas常用方法介绍 160
实训任务 音乐盒的设计与制作 164
技能训练 笑脸的绘制 166
应 用 篇
 列表的应用 168
8.1 列表的建立与使用 168
8.1.1 列表类型 168
8.1.2 无序列表 169
8.1.3 有序列表 170
8.2 嵌套列表 171
8.3 CSS设置列表样式 172
8.3.1 设置列表样式 172
8.3.2 添加列表图像 173
8.4 列表结合CSS的应用 174
实训任务 水平导航栏的制作 176
技能训练 排行榜的设计与制作 183
 JavaScript基础 184
9.1 JavaScript概要 184
9.1.1 什么是JavaScript 184
9.1.2 JavaScript的特点 184
9.2 JavaScript的用法 185
9.3 JavaScript的常量与变量 186
9.3.1 标识符 186
9.3.2 注释 186
9.3.3 数据类型 187
9.3.4 常量 187
9.3.5 变量 188
9.4 JavaScript的运算符 188
9.4.1 算术运算符 188
9.4.2 比较运算符 190
9.4.3 逻辑运算符 190
9.5 流程控制结构 193
9.5.1 顺序结构 193
9.5.2 选择结构 193
9.5.3 循环结构 200
9.6 函数 203
9.7 对象 205
9.7.1 HTML？DOM概念 206
9.7.2 对象的属性 206
9.7.3 对象的方法 207
9.7.4 常用对象 207
9.8 事件 212
9.9 jQuery脚本编程 214
9.9.1 jQuery介绍 214
9.9.2 jQuery的特点 214
9.9.3 jQuery应用 215
9.9.4 jQuery选择器 216
9.9.5 jQuery中的DOM操作 219
9.9.6 jQuery中的事件和动画 221
9.9.7 jQuery表单和表格的应用 224
实训任务 登录页面制作 227
技能训练 简易Web计算器功能的实现 231
 综合案例实战 232
10.1 网站设计和准备 232
10.1.1 内容设计 232
10.1.2 Bootstrap的应用 233
10.2 首页制作 234
10.2.1 大背景图片的自适应布局 234
10.2.2 页面浮动元素的制作 235
10.3 子栏目页面的制作 237
10.3.1 景点列表的制作 237
10.3.2 住宿列表的制作 239
10.3.3 交通列表的制作 241
10.4 详情页面的制作 242
10.4.1 景点详情页面的制作 242
10.4.2 住宿详情页面的制作 243
10.4.3 交通详情页面的制作 244

高莺，扬州大学，管理科学与工程，硕士研究生，目前任职于苏州工业园区服务外包职业学院，主要从事Java程序设计、前端技术开发、基于JSP的Web应用开发等理论课程和相关实训课程的教学。主持或参与校级教改项目3项，校级科研项目5项，横向项目6项，软件著作2项。主持校级网络资源1门，校本教材1本，发表论文3篇等。尤澜涛，副教授，中国计算机学会会员。目前任职于苏州工业园区服务外包职业学院，在国内外学术期刊和国际会议上发表论文20多篇，先后主持10多个教科研项目，累计申请发明专利6项，授权软件著作权10多项。

1．案例丰富
每个知识点配有1个或多个实例，每个单元都设计了配套的实训任务和技能训练，重视技术的应用和实践，从实例到实训任务再到技能训练，循序渐进，层层深入，与此同时，激发读者自身的学习兴趣，形成持久的学习动力。
2．简单易用
本书配套丰富的立体化的在线学习资源，可以开展线上线下混合式教学。