第5章CSS盒子模型_教学设计(教案).pdfVIP

《HTML5+CSS3 网站设计基础 教程》 教学设计 课程名称： HTML5+CSS3 网站设计基础教程 授课年级： 20XX 年级 授课学期： 20XX 学年第 XX 学期 教师姓名： XX 老师 20XX 年XX 月 XX 日 1 计划 课题名称 第5 章 CSS 盒子模型 8 课时 课时 盒子模型是 CSS 网页布局的基础，只有掌握了盒子模型的各种规律和特征，才 内容分析 可以更好地控制网页中各个元素所呈现的效果。本章将对盒子模型的概念、盒 子模型相关属性及元素的类型和转换进行详细讲解。  掌握盒子的相关属性，能够制作常见的盒子模型效果。  掌握背景属性的设置方法，能够设置背景颜色和图像。 教学目标  理解渐变属性的原理，能够设置渐变背景。  熟悉 CSS 控制列表样式的方式，能够运用背景图像定义列表项目符号。 教学重点：认识盒子模型、div标记、盒子模型相关属性、背景属性、CSS3 重点及措施 渐变属性。 措施：通过上机操作加强学习和补充案例进行巩固。 教学难点：盒子模型相关属性、背景属性、CSS3 渐变属性。 难点及措施 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学 PPT 讲解。 第一课时 （讲解认识盒子模型、div标记、盒子的宽与高） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第四章 “CSS3 选 择器”的相关知识。 1、通过上一章的学习，我们知道在 CSS3 中新增了很多新的选择器，例如 属性选择器、关系选择器等。本节课，我们将学习 CSS3 中重要的选择 器—结构化伪类选择器。那么，到底什么是结构化伪类选择器呢？常 教 见的结构化伪类选择器有哪些？ 学 过 答案： 程 CSS 基础选择器主要包括四种，具体如下： 结构化伪类选择器是 CSS3 中新增加的选择器。 常用的结构化伪类选择器有:root 选择器、:not 选择器、:only-child 选 择器、:first-child 选择器、:last-child 选择器、:nth-child(n)选择 器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:nth-last-of-type(n) 选 择器、:empty 选择器、:target 选择器。 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解 或直接进入本课时新内容的学习。 本课时内容学习 