《HTML5网页前端设计》的教与学
- 前端
- 2023-01-21
建议先把视频看完
在后台回复书号或者作者名，可以下载完整的课件、源码和教学大纲
HTML5网页前端设计（零基础56课时版）
本教学大纲适用于零基础入门学习，适用于未曾学习过WEB前端设计的前置课程的班级。可以直接使用本教材完成Web网页前端设计的基础入门和后续HTML5技术的学习。本教材配合以《HTML5网页前端设计实战》作为实验辅导教材。
内容
章节
学习目标
理论课时
上机课时
建议
基础知识篇
（1-4章）
第1章 绪论
HTML5入门介绍
2
0
第2章 HTML5基础
HTML5基本结构
HTML5保留的常用标签
HTML5新增的常用标签
2
2
上机实验：
开发第一个Web页面
使用HTML5新增标签丰富页面内容
第3章 CSS基础
CSS样式表
CSS选择器
CSS常用样式
CSS定位
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第1章：
1. 导航栏菜单的设计与实现
2. 商务风格表格的设计与实现
第4章 JavaScript基础
JavaScript变量、基本数据类型
JavaScript对象类型
JavaScript运算符
JavaScript 条件语句和循环语句
JavaScript函数
JavaScript DOM和BOM
6
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第2章：
1. 电子时钟的设计与实现
2. 电子日历的设计与实现
重点篇
（5-10章）
第5章 HTML5 拖放API
掌握HTML5元素拖放功能
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第3章：
1. 仿回收站效果的设计与实现
2. 图片相框展示的设计与实现
第6章 HTML5 表单API
HTML表单基础
HTML5表单新增输入类型
HTML5表单新增元素标签
HTML5表单新增属性
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第4章：
1. 用户注册页面的设计与实现
2. 问卷调查页面的设计与实现
第7章 HTML5 画布API
HTML5画布创建
绘制路径、矩形、图片和文本
颜色和样式设置
保存与恢复技术
变形与剪裁
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第5章：
1. 手绘时钟的设计与实现
2. 拼图游戏的设计与实现
第8章 HTML5 媒体API
HTML5音频的应用
HTML5视频的应用
HTML5媒体API的其他通用功能
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第6章：
1. 音乐播放器的设计与实现
2. 在线教学视频的设计与实现
第9章 HTML5 地理定位API
经纬度坐标
HTML5获取当前定位
HTML5实时更新定位
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第7章：
1. 运动数据记录的设计与实现
2. 运动轨迹记录的设计与实现
第10章 HTML5 Web存储API
localStorage和sessionStorage存储
存储、读取数据、数据遍历
删除指定数据、清空所有数据
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第8章：
1. 网页主题设置的设计与实现
2. 网页日志本的设计与实现
提高篇
（11章）
第11章 CSS3技术
CSS3边框和背景效果
CSS3文本和字体效果
CSS3变形与动画效果
CSS3多列
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第9章：
1. 特殊字体效果的设计与实现
2. 动画放大菜单的设计与实现
总计
36
20
HTML5网页前端设计（零基础64课时版）
本教学大纲适用于零基础入门学习，适用于未曾学习过WEB前端设计的前置课程的班级。可以直接使用本教材完成Web网页前端设计的基础入门和后续HTML5技术的学习。本教材配合以《HTML5网页前端设计实战》作为实验辅导教材。
内容
章节
学习目标
理论课时
上机课时
建议
基础知识篇
（1-4章）
第1章 绪论
HTML5入门介绍
2
0
第2章 HTML5基础
HTML5基本结构
HTML5保留的常用标签
HTML5新增的常用标签
2
2
上机实验：
开发第一个Web页面
使用HTML5新增标签丰富页面内容
第3章 CSS基础
CSS样式表
CSS选择器
CSS常用样式
CSS定位
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第1章：
1. 导航栏菜单的设计与实现
2. 商务风格表格的设计与实现
第4章 JavaScript基础
JavaScript变量、基本数据类型
JavaScript对象类型
JavaScript运算符
JavaScript 条件语句和循环语句
JavaScript函数
JavaScript DOM和BOM
6
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第2章：
1. 电子时钟的设计与实现
2. 电子日历的设计与实现
重点篇
（5-10章）
第5章 HTML5 拖放API
掌握HTML5元素拖放功能
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第3章：
1. 仿回收站效果的设计与实现
2. 图片相框展示的设计与实现
第6章 HTML5 表单API
HTML表单基础
HTML5表单新增输入类型
HTML5表单新增元素标签
HTML5表单新增属性
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第4章：
1. 用户注册页面的设计与实现
2. 问卷调查页面的设计与实现
第7章 HTML5 画布API
HTML5画布创建
绘制路径、矩形、图片和文本
颜色和样式设置
保存与恢复技术
变形与剪裁
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第5章：
1. 手绘时钟的设计与实现
2. 拼图游戏的设计与实现
第8章 HTML5 媒体API
HTML5音频的应用
HTML5视频的应用
HTML5媒体API的其他通用功能
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第6章：
1. 音乐播放器的设计与实现
2. 在线教学视频的设计与实现
第9章 HTML5 地理定位API
经纬度坐标
HTML5获取当前定位
HTML5实时更新定位
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第7章：
1. 运动数据记录的设计与实现
2. 运动轨迹记录的设计与实现
第10章 HTML5 Web存储API
localStorage和sessionStorage存储
存储、读取数据、数据遍历
删除指定数据、清空所有数据
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第8章：
1. 网页主题设置的设计与实现
2. 网页日志本的设计与实现
提高篇
（11章）
第11章 CSS3技术
CSS3边框和背景效果
CSS3文本和字体效果
CSS3变形与动画效果
CSS3多列
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第9章：
1. 特殊字体效果的设计与实现
2. 动画放大菜单的设计与实现
综合篇
综合应用设计实例
通过对完整项目实例的解析与实现，提高开发者项目分析能力以及强化对于HTML5、CSS3与JavaScript的综合应用能力
4
4
上机实验（任选其一）：
《HTML5网页前端设计实战》第10章：
1. 贪吃蛇游戏的设计与实现
2. Web网站的设计与实现
总计
40
24
HTML5网页前端设计（有Web基础56课时版）
本教学大纲适用于学习过WEB前端设计的前置课程的班级（包括HTML、CSS和JavaScript技术）。可以使用本教材完成后续HTML5和CSS3技术的学习。本教材配合以《HTML5网页前端设计实战》作为实验辅导教材。
内容
章节
学习目标
理论课时
上机课时
建议
基础知识篇
（1-4章）
第1章 绪论
HTML5入门介绍
2
0
第2章 HTML5基础
HTML5基本结构
HTML5保留的常用标签
HTML5新增的常用标签
2
2
上机实验：
开发第一个Web页面
使用HTML5新增标签丰富页面内容
第3章 CSS基础
（根据前置课程内容选讲）
CSS样式表
CSS选择器
CSS常用样式
CSS定位
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第1章：
1. 导航栏菜单的设计与实现
2. 商务风格表格的设计与实现
第4章 JavaScript基础
（根据前置课程内容选讲）
JavaScript变量、基本数据类型
JavaScript对象类型
JavaScript运算符
JavaScript 条件语句和循环语句
JavaScript函数
JavaScript DOM和BOM
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第2章：
1. 电子时钟的设计与实现
2. 电子日历的设计与实现
重点篇
（5-10章）
第5章 HTML5 拖放API
掌握HTML5元素拖放功能
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第3章：
1. 仿回收站效果的设计与实现
2. 图片相框展示的设计与实现
第6章 HTML5 表单API
HTML表单基础
HTML5表单新增输入类型
HTML5表单新增元素标签
HTML5表单新增属性
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第4章：
1. 用户注册页面的设计与实现
2. 问卷调查页面的设计与实现
第7章 HTML5 画布API
HTML5画布创建
绘制路径、矩形、图片和文本
颜色和样式设置
保存与恢复技术
变形与剪裁
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第5章：
1. 手绘时钟的设计与实现
2. 拼图游戏的设计与实现
第8章 HTML5 媒体API
HTML5音频的应用
HTML5视频的应用
HTML5媒体API的其他通用功能
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第6章：
1. 音乐播放器的设计与实现
2. 在线教学视频的设计与实现
第9章 HTML5 地理定位API
经纬度坐标
HTML5获取当前定位
HTML5实时更新定位
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第7章：
1. 运动数据记录的设计与实现
2. 运动轨迹记录的设计与实现
第10章 HTML5 Web存储API
localStorage和sessionStorage存储
存储、读取数据、数据遍历
删除指定数据、清空所有数据
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第8章：
1. 网页主题设置的设计与实现
2. 网页日志本的设计与实现
提高篇
（11章）
第11章 CSS3技术
CSS3边框和背景效果
CSS3文本和字体效果
CSS3变形与动画效果
CSS3多列
6
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第9章：
1. 特殊字体效果的设计与实现
2. 动画放大菜单的设计与实现
总计
36
20
HTML5网页前端设计（有Web基础64课时版）
本教学大纲适用于学习过WEB前端设计的前置课程的班级（包括HTML、CSS和JavaScript技术）。可以使用本教材完成后续HTML5和CSS3技术的学习。本教材配合以《HTML5网页前端设计实战》作为实验辅导教材。
内容
章节
学习目标
理论课时
上机课时
建议
基础知识篇
（1-4章）
第1章 绪论
HTML5入门介绍
2
0
第2章 HTML5基础
HTML5基本结构
HTML5保留的常用标签
HTML5新增的常用标签
2
2
上机实验：
开发第一个Web页面
使用HTML5新增标签丰富页面内容
第3章 CSS基础
（根据前置课程内容选讲）
CSS样式表
CSS选择器
CSS常用样式
CSS定位
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第1章：
1. 导航栏菜单的设计与实现
2. 商务风格表格的设计与实现
第4章 JavaScript基础
（根据前置课程内容选讲）
JavaScript变量、基本数据类型
JavaScript对象类型
JavaScript运算符
JavaScript 条件语句和循环语句
JavaScript函数
JavaScript DOM和BOM
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第2章：
1. 电子时钟的设计与实现
2. 电子日历的设计与实现
重点篇
（5-10章）
第5章 HTML5 拖放API
掌握HTML5元素拖放功能
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第3章：
1. 仿回收站效果的设计与实现
2. 图片相框展示的设计与实现
第6章 HTML5 表单API
HTML表单基础
HTML5表单新增输入类型
HTML5表单新增元素标签
HTML5表单新增属性
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第4章：
1. 用户注册页面的设计与实现
2. 问卷调查页面的设计与实现
第7章 HTML5 画布API
HTML5画布创建
绘制路径、矩形、图片和文本
颜色和样式设置
保存与恢复技术
变形与剪裁
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第5章：
1. 手绘时钟的设计与实现
2. 拼图游戏的设计与实现
第8章 HTML5 媒体API
HTML5音频的应用
HTML5视频的应用
HTML5媒体API的其他通用功能
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第6章：
1. 音乐播放器的设计与实现
2. 在线教学视频的设计与实现
第9章 HTML5 地理定位API
经纬度坐标
HTML5获取当前定位
HTML5实时更新定位
2
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第7章：
1. 运动数据记录的设计与实现
2. 运动轨迹记录的设计与实现
第10章 HTML5 Web存储API
localStorage和sessionStorage存储
存储、读取数据、数据遍历
删除指定数据、清空所有数据
4
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第8章：
1. 网页主题设置的设计与实现
2. 网页日志本的设计与实现
提高篇
（11章）
第11章 CSS3技术
CSS3边框和背景效果
CSS3文本和字体效果
CSS3变形与动画效果
CSS3多列
6
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第9章：
1. 特殊字体效果的设计与实现
2. 动画放大菜单的设计与实现
综合篇
综合应用设计实例
通过对完整项目实例的解析与实现，提高开发者项目分析能力以及强化对于HTML5、CSS3与JavaScript的综合应用能力
4
4
上机实验（任选其一）：
《HTML5网页前端设计实战》第10章：
1. 贪吃蛇游戏的设计与实现
2. Web网站的设计与实现
总计
40
24