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

本书采用模块化的编写思路，将HTML5、CSS3、JavaScript三方面的学习内容分为网页设计与策划，网页的基本页面布局，运用HTML5的新标签，构建网站层叠样式表，设置文本、背景与列表样式，运用CSS进行网页布局，设计表单，运用CSS3实现特殊效果，运用JavaScript实现网页的交互，共9个教学任务。每个任务的编写分为任务描述、知识准备、综合案例、任务实施、任务拓展、项目实训6个环节。

本书配有微课视频、课程标准、授课计划、授课用PPT、案例素材等丰富的数字化学习资源。与本书配套的数字课程“网页设计与制作”已在“智慧职教”平台(www.icve.com.cn)上线，学习者可登录平台在线学习，授课教师可调用本课程构建符合自身教学特色的SPOC课程，详见“智慧职教”服务指南。授课教师如需获得本书配套教辅资源，请登录“高等教育出版社产品信息检索系统”(xuanshu,hep.com.cn)搜索下载。

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

前辅文
任务1 网页设计与策划
  任务描述：网站主页的策划与设计
  知识准备
   1.1 网页设计的概念与术语
   1.2 网页设计的流程
   1.3 HTML5概述
   1.4 编写第一个HTML5页面
   1.5 综合实例：体验HTML与CSS页面布局
  任务实施
   1.资料收集
   2.页面规划
   3.绘制页面草图
  任务拓展
   1.认识Visual Studio Code工具
   2.AI加油站：使用文心一言撰写网站策划书
  项目实训：智慧校园登录与学生应用门户策划
任务2 网页的基本页面布局
  任务描述：运用HTML编写Web页面
  知识准备
   2.1 HTML5基础
   2.2 文字与段落标签
   2.3 图像与超链接标签
   2.4 表格与列表标签
   2.5 HTML的块级标签或内联标签
   2.6 综合实例：历代优秀墨竹作品学习页面顶部区域的HTML构建
  任务实施
   1.页面HTML5结构分析
   2.制作页面的HTML基本结构
   3.编写顶部栏HTML代码
   4.编写网站Logo与导航栏的HTML代码
   5.编写网站Banner栏的HTML代码
   6.编写工具推荐栏的HTML代码
  任务拓展
   1.标签的使用
   2.AI加油站：使用豆包“Trae”编程助手
  项目实训：墨竹画源流析与作品赏析栏目结构实现
任务3 运用HTML5的新标签
  任务描述：使用HTML5新标签优化网页
  知识准备
   3.1 HTML5结构性标签
   3.2 分组标签
   3.3 页面交互标签
   3.4 行内语义性标签
   3.5 多媒体对象的使用
   3.6 综合实例：《淇澳清风图》作品赏析页面的实现
  任务实施
   1.页面HTML5结构分析
   2.编写课程报名栏HTML代码
   3.编写课程通知栏HTML代码
   4.编写合作伙伴栏HTML代码
   5.编写页尾模块栏HTML代码
  任务拓展
   1.HTML5的全局属性
   2.AI加油站：使用“代码小浣熊”编程助手
  项目实训：网站页面的分析与编写
任务4 构建网站层叠样式表
  任务描述：网站顶部栏与导航栏的页面实现
  知识准备
   4.1 认识与使用 CSS
   4.2 CSS3新增选择器
   4.3 CSS的继承与层叠
   4.4 综合实例：博物院导航布局
  任务实施
   1.顶部栏的HTML结构与CSS分析
   2.顶部栏的HTML结构与CSS样式设计
   3.导航栏的HTML结构与CSS分析
   4.导航栏的HTML结构与CSS样式设计
  任务拓展
   1.实现导航菜单的悬停特效
   2.增效工具：HTML表格生成器
  项目实训：历代优秀墨竹作品学习页面“画源流析”的页面实现
任务5 设置文本、背景与列表样式
  任务描述：人工智能学习网站主页主体部分的页面实现
  知识准备
   5.1 文本样式设置
   5.2 背景属性设置
   5.3 列表样式设置
   5.4 综合实例：中华传统文化百部经典效果展示
  任务实施
   1.页面HTML结构分析
   2.Banner栏的HTML结构与CSS样式设计
   3.工具推荐栏的HTML结构与CSS样式设计
   4.课程报名栏的HTML结构与CSS样式设计
   5.开课通知栏的HTML结构与CSS样式设计
  任务拓展
   1.@font-face属性
   2.增效工具：CSS压缩与解压工具
  项目实训：使用CSS完成导航菜单的制作
任务6 运用CSS进行网页布局
  任务描述：AI教育企业主页培训课程的页面实现
  知识准备
   6.1 盒子模型
   6.2 盒子模型的常用属性
   6.3 元素的浮动与定位
   6.4 弹性布局
   6.5 网格布局
   6.6 综合实例：作品赏析模块的页面整体布局
  任务实施
   1.页面HTML结构分析
   2.标题的HTML结构与CSS样式设计
   3.导航标签部分的HTML结构与CSS样式设计
   4.培训卡片的HTML结构与CSS样式设计
  任务拓展
   1.CSS书写顺序与规范
   2.使用columns多列布局
   3.增效工具：CSS Layout Generator
  项目实训：使用HTML+CSS布局画源流析模块页面
任务7 设计表单
  任务描述：AI教育企业新用户注册页面
  知识准备
   7.1 表单的基本概念
   7.2 HTML5中表单新增的元素与属性
   7.3 综合实例：登录页面的设计与实现
  任务实施
   1.页面HTML结构分析
   2.注册页面的HTML结构代码
   3.注册页面表单设计的CSS样式
  任务拓展
   1.表单边框的应用
   2.AI加油站：使用"Fitten Code"编程助手
  项目实训：表单模仿设计
任务8 运用CSS3实现特殊效果
  任务描述：交通示意图动画效果制作
  知识准备
   8.1 transform转换
   8.2 transitions过渡
   8.3 animation动画
   8.4 综合实例：历代优秀墨竹作品展示墙
  任务实施
   1.任务分析
   2.设计HTML结构代码
   3.使用CSS实现动画效果
  任务拓展
   1.增效工具：CSS3 Animale动画库
   2.增效工具：过渡动画生成器
  项目实训：墨竹名家作品展示
任务9 运用JavaScript实现网页的交互
  任务描述：AI教育企业主页下拉菜单的设计与实现
  知识准备
   9.1 JavaScript概述
   9.2 JavaScript数据类型、变量、数组、运算符和表达式
   9.3 程序控制结构
   9.4 函数的定义与引用
   9.5 浏览器窗口对象
   9.6 页面中元素的访问与属性的设置
   9.7 事件的指派与处理函数的编写
   9.8 文档对象模型
   9.9 DOM节点对象的事件处理
   9.10 综合实例：奥运会中国队金牌榜表格的美化设计
  任务实施
   1.任务分析与实施思路
   2.下拉菜单的HTML结构
   3.样式设计
   4.编写JavaScript脚本
   5.项目应用
  任务拓展
   1.JSON自定义对象
   2.增效工具：JSON在线解析编辑器
   3.增效工具：HTML转JavaScript在线工具
  项目实训：在线测试系统
参考文献

“十四五”职业教育国家规划教材