本书为“十四五”职业教育国家规划教材，也是国家职业教育软件技术专业教学资源库配套教材。

本书采用模块化的编写思路，将HTML5、CSS3、JavaScript三方面内容分为网页策划起步，网页的基本页面实现，运用HTML5的新标签，构建网站层叠样式表，设置文本、背景与列表样式，运用盒子模型布局网页，运用影音多媒体，设计表单，运用特殊效果和运用JavaScript实现网页的交互等教学任务。每个任务的编写分为任务描述、知识准备、任务实施、任务拓展、项目实训5个环节。

本书配有微课视频、课程标准、授课计划、授课用PPT、案例素材等丰富的数字化学习资源。与本书配套的数字课程“网页设计与制作”已在“智慧职教”平台（www.icve.com.cn）上线，学习者可登录平台在线学习，授课教师可调用本课程构建符合自身教学特色的SPOC课程，详见“智慧职教”服务指南。教师也可发邮件至编辑邮箱1548103297@qq.com获取相关资源。

本书结构合理，内容丰富，实用性强，可以作为高等职业院校计算机类专业、商务类专业、艺术设计类专业的教学用书，还可以作为相关专业从业人员的自学用书。

前辅文
任务1 网页策划起步
  任务描述：网站主页的策划与设计
  知识准备
   1.1 网页设计的概念与术语
   1.2 网页设计流程
   1.3 HTML5概述
   1.4 编写第一个HTML5页面
   1.5 综合实例：体验HTML5的页面特征
  任务实施：网站主页的策划与设计
   1.资料收集
   2.页面规划
   3.绘制页面草图
  任务拓展
   1.认识Dreamweaver CC
   2. HBuilder的快速开发技巧
  项目实训：智慧校园登录与教师应用门户策划
任务2 网页的基本页面实现
  任务描述：运用HTML编写Web页面
  知识准备
   2.1 HTML5基础
   2.2 文字与段落标签
   2.3 图像与超链接标签
   2.4 表格与列表
   2.5 综合实例：书法家庄辉个人介绍
  任务实施：运用HTML编写主页的基本结构
   1.制作页面基本结构
   2.制作网站头部
   3.制作网站banner区域
   4.制作网站内容区域
   5.制作网站版权信息
  任务拓展
   1. 标签
   2. 标签
   3. 标签
  项目实训：企业招聘页面结构实现
任务3 运用HTML5的新标签
  任务描述：使用HTML5新标签优化网页
  知识准备
   3.1 结构性标签
   3.2 分组标签
   3.3 页面交互标签
   3.4 行内语义性标签
   3.5 HTML5的全局属性
   3.6 综合实例：个人博客页面结构设计
  任务实施：使用HTML5新标签优化网页
   1.网页结构性元素分析
   2.应用结构性元素完善页面
  任务拓展
   1. 标签和标签
   2. 、 和 的区别与使用 项目实训：网站页面的分析与编写 任务4 构建网站层叠样式表 任务描述：使用CSS实现门户网站导航 知识准备 4.1 初识CSS3 4.2 CSS的使用 4.3 CSS3选择器 4.4 CSS的继承与层叠 4.5 综合实例：门户网站导航设计 任务实施：使用CSS实现门户网站导航 1. 任务分析 2. 编写页面通用样式 3. 添加 标签并编写样式表 4. 编写nav区域与链接样式 任务拓展 1. 实际元素与伪元素的转化 2. 主流浏览器的兼容性处理 项目实训：使用样式表美化网页页面 任务5 设置文本、背景与列表样式 任务描述：美化门户网站导航与banner区域 知识准备 5.1 文本样式设置 5.2 背景属性设置 5.3 列表样式设置 5.4 综合实例：电商产品分类列表展示 任务实施：美化门户网站导航与banner区域 1. 任务分析 2. 编写页面 与的HTML结构 3. 编写页面基本样式与 区域样式 4. 编写页面区域样式 任务拓展 1. 文本的word-wrap属性 2. @font-face属性 项目实训：使用CSS制作导航菜单 任务6 运用盒子模型布局网页 任务描述：使用盒子模型布局网站页面 知识准备 6.1 盒子模型 6.2 盒子模型的常用属性 6.3 元素的浮动与定位 6.4 综合实例：数字化教学资源平台网站布局 任务实施：使用盒子模型布局网站banner部分 1. 任务分析 2. 编写页面区域HTML代码 3. 编写区域样式 任务拓展 1. 页面主体区域的实现 2. 页脚区域的实现 项目实训：运用盒子模型与定位布局企业网站 任务7 运用影音多媒体 任务描述：门户网站banner中的视频展示 知识准备 7.1 多媒体对象基本知识 7.2 插入多媒体对象 7.3 综合实例：花卉视频介绍 任务实施：门户网站banner中的视频展示 1. 任务分析 2. 修改HTML结构代码 3. 给video元素编写CSS代码 任务拓展 1. 通过网络URL地址调用网络多媒体文件 2. 调用网页多媒体文件 项目实训：使用CSS设计视频播放界面 任务8 设计表单 任务描述：智慧校园信息门户的登录页表单设计 知识准备 8.1 表单的基本概念 8.2 HTML5中新增的表单属性与元素 8.3 综合实例：用户注册页面的设计 任务实施：智慧校园信息门户的登录页表单设计 1. 任务分析 2. 登录表单的HTML结构代码 3. 给表单设计CSS样式 任务拓展 1. 表单边框的应用 2. 文本域标签
  项目实训：表单模仿设计
任务9 运用特殊效果
  任务描述：交通示意图动画效果
  知识准备
   9.1 CSS3多列布局
   9.2 CSS3转换
   9.3 transitions过渡
   9.4 animation动画
   9.5 综合实例：艺术照片墙
  任务实施：交通示意图动画效果
   1. 任务分析
   2.设计HTML结构代码
   3.使用CSS实现动画效果
  任务拓展
   1. CSS3 Animation动画库
   2. Animate跨平台动画库
  项目实训：母亲节礼盒
任务10 运用JavaScript实现网页的交互
  任务描述：下拉菜单的设计与实现
  知识准备
   10.1 JavaScript概述
   10.2 JavaScript数据类型、变量、数组、运算符和表达式
   10.3 程序控制结构
   10.4 函数的定义与引用
   10.5 浏览器窗口对象
   10.6 页面中元素的访问与属性的设置
   10.7 事件的指派与处理函数的编写
   10.8 文档对象模型
   10.9 DOM节点对象的事件处理
   10.10 综合实例：工资表格的美化设计
  任务实施：下拉菜单的设计与实现
   1. 任务分析与实施思路
   2.下拉菜单的HTML结构
   3.样式设计
   4. 编写JavaScript脚本
   5. 项目应用
  任务拓展
   1. 表单验证
   2. JSON自定义对象
  项目实训：在线测试系统
参考文献