第5章 CSS盒子模型_教学设计.docVIP

博学谷——让IT教学更简单，让IT学习更有效 博学谷——让IT教学更简单，让IT学习更有效 PAGE 14 PAGE 2 传智播客 《HTML5+CSS3网站设计基础教程》 教学设计 课程名称： HTML5+CSS3网站设计基础教程 授课年级： 2016年级 授课学期： 2016学年第一学期 教师姓名： 某某老师 201 年 月 日 课题名称 第5章 CSS盒子模型 计划课时 8课时 内容分析 盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。本章将对盒子模型的概念、盒子模型相关属性及元素的类型和转换进行详细讲解。 教学目标 掌握盒子的相关属性，能够制作常见的盒子模型效果。 掌握背景属性的设置方法，能够设置背景颜色和图像。 理解渐变属性的原理，能够设置渐变背景。 熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。 重点及措施 教学重点：认识盒子模型、div标记、盒子模型相关属性、背景属性、CSS3渐变属性。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：盒子模型相关属性、背景属性、CSS3渐变属性。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 第一课时 （讲解认识盒子模型、div标记、盒子的宽与高） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS3选择器”的相关知识。 通过上一章的学习，我们知道在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) 选择器、: \o CSS :nth-child(n) 选择器 empty选择器、:target选择器。 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 随着信息化的迅速发展,手机已经成为人们日常生活中的必需品。一个完整的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。其实，在CSS中也存在着盒子模型，利用CSS盒子模型能够更好的对网页进行排版。那么，如何理解“CSS盒子模型”呢？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 如果把手机想象成HTML元素，那么手机盒子就是一个CSS盒子模型，其中手机为CSS盒子模型的内容，填充泡沫的厚度为CSS盒子模型的内边距，纸盒的厚度为CSS盒子模型的边框。当多个手机盒子放在一起时，它们之间的距离就是CSS盒子模型的外边距。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 知识点讲解 讲解“认识盒子模型” （1）、教师展示PPT对“CSS盒子模型”的概念进行讲解，并以生活中常见的手机盒子的构成进行演示。 （2）、教师展示PPT，对CSS盒子模型的构成元素进行具体讲解。 （3）、教师使用CSS盒子模型控制网页中的元素，并进行代码演示。 （4）、学生练习，教师巡视，对疑难问题进行解答。 讲解“div标记” （1）、教师展示PPT对“div标记”的概念及用途进行讲解，并举例说明。 （2）、教师对“div标记”的使用方法进行讲解，并通过代码进行演示。 （3）、教师指出使用“div标记”布局时需要注意的问题，并给与解答。 （4）、学生练习，教师巡视，对疑难问题进行解答。 讲解“盒子的宽与高” （1）、教师展示PPT对“盒子的宽与高”的概念进行讲解。 （2）、教师分别对“盒子的宽度与高度”的常用单位数值进行讲解，并通过代码进行演示。 （3）、教师指出计算“盒子模型的总宽度和总高度”的计算原则，并能够根据实际情况进行计算。 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和 盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和 （4）、学生练习，