HTML5 CSS3网页设计与制作（第2版）教案-教学设计 第2章 初识HTML5.docx
《HTML5+CSS3网页设计与制作（第2版）》
教学设计
课程名称：
授课年级：
授课学期：
教师姓名：
年月日
课题名称
第2章初识HTML5
计划课时
6课时
教学引入
近年来，HTML5成为互联网行业的热门技术，它改变了Web应用的开发方式，在PC端和移动端都得到广泛应用。作为网页设计和制作人员，应该顺应时代潮流，掌握HTML5的相关技术。本章将从HTML5的优势、基本结构、标签概述、文本控制标签、图像标签等知识着手，详细讲解HTML5的相关内容。
教学目标
使学生了解HTML5的优势，能够对其优势进行归纳总结
使学生了解HTML5的基本结构，能够区分HTML5和XHTML的结构差异
使学生了解标签的分类，能够阐述单标签和双标签的差异
使学生熟悉标签的关系，能够设置具有嵌套和并列关系的标签
使学生掌握标签属性的用法，能够为标签添加对应的属性
使学生熟悉HTML5头部相关标签，能够归纳头部各类标签的作用
使学生掌握HTML文本控制标签的用法，能够使用不同类型的标签定义文本
使学生掌握HTML图像标签的用法，能够在网页中定义图像
教学重点
标签的属性
页面格式化标签
文本格式化标签
常见图像格式
插入图像
教学难点
HTML实体
教学方式
教学采用教师课堂讲授为主，使用教学PPT讲解。
教
学
过
程
第一、二课时
（HTML5的优势、HTML5的基本结构、标签的分类、标签间的关系、标签的属性、HTML5头部相关标签）
复习巩固
教师通过提问等方式了解学生的学习情况，对吸收不好的知识点进行再次巩固讲解。
通过直接导入的方式讲解新课
作为HTML的最新版本，HTML5是HTML的延续。HTML5经历了旧版本HTML和XHTML的发展，从某种意义上说，它是HTML标准更新和规范过程的产物。本节课将针对HTML5的优势、基本结构等内容进行讲解。
新课讲解
知识点1-HTML5的优势
教师通过展示PPT的方式讲解HTML5的优势。
兼容性
合理性
易用性
知识点2-HTML5的基本结构
教师通过展示PPT的方式讲解HTML5的基本结构。
HTML1.0的基本结构
基本结构中标签的含义
HTML5的基本结构
知识点3-标签的分类
教师通过展示PPT的方式讲解标签的分类。
单标签
双标签
注释标签
知识点4-标签间的关系
教师通过展示PPT的方式讲解标签间的关系。
嵌套关系
并列关系
知识点5-标签的属性
教师通过展示PPT以及代码演示的方式讲解标签的属性。
HTML标签设置属性的基本语法
示例代码演示标签属性的用法
知识点6-HTML5头部相关标签
教师通过展示PPT的方式讲解HTML5头部相关标签。
（1）title标签
（2）meta标签
归纳总结
教师回顾本节课所讲的内容，并通过课后题的方式引导学生解答问题并给予指导。
布置作业
教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。
第三、四课时
（页面格式化标签、文本格式化标签、HTML实体、常见图像格式、插入图像、阶段案例——制作新闻页面）
复习巩固
教师通过提问等方式了解学生的学习情况，对吸收不好的知识点进行再次巩固讲解。
通过直接导入的方式导入新课
无论网页内容如何丰富，文字始终都是网页中最基本的元素之一。为了使文字排版整齐、结构清晰，HTML5中提供了一系列文本控制标签，方便对文字进行样式设置。如标题标签h1~h6、段落标签p等。本节课将对不同类型文本控制标签进行详细讲解。
新课讲解
知识点1-页面格式化标签
教师通过展示PPT以及代码演示的方式讲解页面格式化标签。
标题标签
段落标签
水平线标签
换行标签
知识点2-文本格式化标签
教师通过展示PPT的方式讲解文本格式化标签。
常用的文本格式化标签
通过一个案例来演示文本格式化标签的用法
知识点3-HTML实体
教师通过展示PPT的方式讲解常用的特殊字符及HTML实体。
知识点4-常见图像格式
教师通过展示PPT的方式讲解常见图像格式。
GIF
PNG
JPEG
知识点5-插入图像
教师通过展示PPT以及代码演示的方式讲解插入图像。
图像标签的语法格式
常用的img标签属性
通过代码演示不同属性的作用
知识点6-阶段案例——制作新闻页面
教师通过实操的方式演示新闻页面的制作。
四、归纳总结
教师回顾本节课所讲的内容，并通过提问的方式引导学生解答问题并给予指导。
五、布置作业
教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。
第五、六课时
（上机练习）
上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的