浮动与定位_教学设计.doc

传智播客 《HTML5+CSS3网站设计基础教程》 教学设计 课程名称： HTML5+CSS3网站设计基础教程 授课年级： 2016年级 授课学期： 2016学年第一学期 教师姓名： 某某老师 201 年 月 日 课题名称 第6章 浮动与定位 计划课时 8课时 内容分析 通过前面几章的学习，初学者不难发现，在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动和定位属性。本章将对元素的浮动和定位进行详细讲解。 教学目标 理解元素的浮动，能够为元素设置浮动样式。 熟悉清除浮动的方法，可以使用不同方法清除浮动。 掌握元素的定位，能够为元素设置常见的定位模式。 重点及措施 教学重点：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：元素的浮动属性float、overflow在讲解内容前，抛出以下问题让学生回答，。。设置了浮动属性的元素会脱离文档流控制，移动到父元素位置的过程。{float:属性值;} 在上面的语法中，常用的float属性值有三个：left、right、none。分别用于设置元素向左浮动、元素向右浮动和元素不浮动。 知识点讲解 总结知识点 教师和学生一起总结在案例中涉及到的知识点，主要包括“元素的浮动属性float”等。 讲解“元素的浮动属性float” （1）、教师通过PPT对网页中常见的元素浮动效果进行展示。 （2）、教师通过PPT对“浮动”的概念及基本语法格式进行讲解，并进行代码演示。 （3）、教师对“浮动”的常用属性—左浮动、右浮动进行讲解，并进行代码演示。 （4）、教师指出对元素应用“浮动”时需要注意的问题，并给予解答。 （5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“清除浮动” （1）、教师对元素的浮动会对其他元素产生影响，并进行代码演示。 （2）、教师对分别对“使用空标记清除浮动”、“使用overflow属性清除浮动”以及“使用after伪对象清除浮动”的方法及应用范围进行讲解，并进行代码演示。 （3）、教师对比“使用空标记清除浮动”、“使用overflow属性清除浮动”以及“使用after伪对象清除浮动”的异同，并分析其优缺点。 （4）、教师分别指出清除元素浮动时需要注意的问题，并给予解答。 （5）、学生练习，教师巡视，对疑难问题进行解答。 说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结 重点：元素的浮动属性float、清除浮动。 答疑 教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固本课时知识点 学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握如何给元素设置浮动属性，并能够清除浮动元素带来的影响。 通过“补充案例”加强学习 教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。 第二课时 （讲解overflow属性） 复习上节课内容 在讲解内容前，抛出以下问题让学生回答，。。clear属性。可以分别使用clear:left、clear:right、clear:both;来清除元素左、右及左右两侧浮动的影响。visible：内容不会被修剪，呈现在元素框之外默认值hidden：溢出内容会被修剪，并且被修剪内容是不可见的 在讲解内容前，抛出以下问题让学生回答，。。基本语法格式position属性的四个常用值，并进行分析。 （5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“静态定位” （1）、教师展示PPT对“静态定位”的概念进行讲解。。 （2）、教师针对“静态定位”进行详细讲解，并进行代码演示。 （3）、学生练习，教师巡视，对疑难问题进行解答。 讲解“相对定位” （1）、教师展示PPT对“相对定位”的概念进行讲解。 （2）、教师针对“相对定位”进行详细讲解，并进行代码演示。 （3）、教师分析“相对定位”的用法及显示效果，对比其和“静态定位”的区别与联系。 （4）、教师指出应用“相对定位”时需要注意的问题，并给予解答。 （5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“绝对定位” （1）、教师展示PPT对“绝对定位”的概念进行讲解。 （2）、教师针对“绝对定位”进行详细讲解，并进行代码演示。 （3