“网页设计与制作”是一门专业必修课，以培养学生的网页设计与制作能力为出发点，本书参考《Web前端开发》职业技能证书标准，对接1+X Web前端开发等级考试和Web前端开发岗位需求，重构课程内容，以学习导航为点、学习环节为线、思政案例为面，介绍使用HTML、CSS及JavaScript进行网页设计与制作的一般技巧。
全书共十一个情境，从逻辑上可分为三大部分，前五个情境为第一篇基础篇，主要介绍网页中的主要组成元素——文本、图片、表格和超链接等知识；情境六至情境九为第二篇进阶篇，主要介绍模板、表单、CSS、JavaScript等知识；最后两个情境为第三篇应用篇，主要从实际应用的角度出发，综合前面所学的知识进行综合网站的实现、测试及发布。
本书以实用为基本出发点，不仅包括各种网页设计与制作的基础理论，还强调了它们的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。
本书内容经过了长期的教学检验，证明是符合当下职业教育发展要求的。本书可作为高职院校、成人高校和培训班的“网页设计与制作”“Web前端开发”等课程的教材或参考书，也适合广大网页制作爱好者或相关从业人员使用。

第一篇 基础篇
情境一 网页设计与制作概述
【学习导航】
1 制作第一个网页
2 职业技能与知识点要求
3 素质目标
【学习环节】
1 学习路线
2 知识小天地
2.1 认识网页
2.2 网页概念
2.3 静态网页和动态网页
2.4 Web服务器和客户端
2.5 统一资源定位器（URL）
2.6 网页制作的基本技术
2.7 常见网页制作工具
【考核评价】
【同步技能考点】
【课后拓展】
情境二 制作纯文本网页
【学习导航】
1 制作革命根据地网页
2 职业技能与知识点要求
3 素质目标
【学习环节】
1 学习路线
2 知识小天地
2.1 HTML发展历程
2.2 HTML特点
2.3 ＜!DOCTYPE＞标记
2.4 ＜html＞＜/html＞标记
2.5 ＜head＞＜/head＞标记
2.6 ＜meta/＞标记—设置编码格式
2.7 ＜meta/＞标记—设置网页描述
2.8 ＜meta/＞标记—设置作者信息
2.9 ＜meta/＞标记—设置页面自动刷新和跳转
2.10 ＜title＞＜/title＞标记
2.11 ＜link/＞标记
2.12 ＜script＞＜/script＞标记
2.13 ＜body＞＜/body＞标记
2.14 ＜hn＞＜/hn＞标题标记
2.15 ＜p＞＜/p＞段落标记
2.16 ＜hr/＞水平线标记
2.17 ＜br/＞换行标记
2.18 ＜font＞＜/font＞字体标记
2.19 字体样式标记
【考核评价】
【同步技能考点】
【课后拓展】
情境三 制作图文混排网页
【学习导航】
1 制作中国古代科技文化成就介绍网页
2 职业技能与知识点要求
3 素质目标
【学习环节】
1 学习路线
2 知识小天地
2.1 无序列表
2.2 有序列表
2.3 自定义列表
2.4 常用图片格式
2.5 ＜img＞图片标记
2.6 图片路径的表示方法
【考核评价】
【同步技能考点】
【课后拓展】
情境四 制作表格布局的网页
【学习导航】
1 制作历史人物故事网页
2 职业技能与知识点要求
3 素质目标
【学习环节】
1 学习路线
2 知识小天地
2.1 表格标记
2.2 合并单元格
【考核评价】
【同步技能考点】
【课后拓展】
情境五 制作包含超链接的网页
【学习导航】
1 绿水青山网站的设计与制作
2 职业技能与知识点要求
3 素质目标
【学习环节】
1 学习路线
2 学习小天地
2.1 超链接的定义
2.2 超链接的分类
2.3 文本超链接
2.4 图像超链接
2.5 锚点超链接
【考核评价】
【同步技能考点】
【课后拓展】
第二篇 进阶篇
情境六 使用模板制作网页
【学习导航】
1 书籍网页的设计与制作
2 职业技能与知识点要求
3 素质目标
【学习环节】
1 学习路线
2 知识小天地
2.1 新建模板
2.2 管理模板
【考核评价】
【同步技能考点】
【课后拓展】
情境七 制作注册网页
【学习导航】
1 个人信息注册网页制作
2 职业技能与知识点要求
3 素质目标
【学习环节】
1 学习路线
2 知识小天地
2.1 表单的作用
2.2 表单标记
【考核评价】
【同步技能考点】
【课后拓展】
情境八 使用CSS美化网页
【学习导航】
1 中国航天成就网页的设计与制作
2 职业技能与知识点要求
3 素质目标
【学习环节】
1 学习路线
2 知识小天地
2.1 什么是CSS
2.2 CSS的引入方式
2.3 CSS的两个特性
2.4 CSS的基本语法
2.5 CSS选择器的分类
2.6 CSS的属性
【考核评价】
【同步技能考点】
【课后拓展】
情境九 使用JavaScript制作交互式注册页面
【学习导航】
1 交互式注册页面的设计与制作
2 职业技能与知识点要求
3 素质目标
【学习环节】
1 学习路线
2 知识小天地
2.1 JavaScript的组成
2.2 JavaScript的引用
2.3 JavaScript的语法
2.4 JavaScript的关键字
2.5 JavaScript的变量、数据类型和声明
2.6 JavaScript的标识符
2.7 JavaScript的全局属性
2.8 JavaScript的运算符
2.9 JavaScript的分支循环
2.10 JavaScript的数组
2.11 JavaScript的字符串
2.12 JavaScript的正则表达式
2.13 JavaScrip