2022年浮动与定位教学设计 .pdf

名师精编优秀教案传智播客HTML5+CSS3 网站设计基础教程教学设计课程名称：HTML5+CSS3 网站设计基础教程授课年级：20XX 年级授课学期：2016 学年第一学期教师姓名：某某老师精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 1 页，共 13 页名师精编优秀教案201 年月日课题名称第 6 章 浮动与定位计划课时8 课时内容分析通过前面几章的学习，初学者不难发现，在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动和定位属性。本章将对元素的浮动和定位进行详细讲解。教学目标理解元素的浮动，能够为元素设置浮动样式。熟悉清除浮动的方法，可以使用不同方法清除浮动。掌握元素的定位，能够为元素设置常见的定位模式。重点及措施教学重点：元素的浮动属性float、运用 clear 属性清除浮动、运用overflow 属性清除浮动、使用after 伪对象清除浮动、overflow 属性、元素的定位属性。措施：通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点：元素的浮动属性float、overflow 属性、元素的定位属性。措施：通过上机操作加强学习和补充案例进行巩固。教学方式教学采用教师课堂讲授为主，使用教学PPT 讲解。教学过程第一课时（讲解元素的浮动属性float、清除浮动）复习上节课内容在讲解本节内容前，抛出 以下 问题 让学生回答，以复习第五章 “CSS 盒子模型”的 相关知识 。1、 一个盒子的宽 （width ）和高（height ）均为 300px，左内边距为30px，同时盒子有3px 的边框，请问这个盒子的总宽度是多少？（ ）A、333px B、366px C、336px D、363px 精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 2 页，共 13 页名师精编优秀教案答案： C盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；所以，盒子的总宽度= width（300px）+左内边距（ 30px）+左右边框宽度之和（3px*2 ）=336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，这样的布局制作出来的页面看起来呆板、不美观。其实，通过元素“浮动”可以使页面中的元素按照左、中、右的结构进行排版。那么，什么是“元素的浮动” ，以及如何设置元素的浮动呢？请小组代表 对以上问题 发表见解 。教师 对上述问题进行解释 ：所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS 中，通过float 属性来定义浮动，其基本语法格式如下：选择器 float:属性值 ; 在上面的语法中，常用的float 属性值有三个：left、right、none。分别用于设置元素向左浮动、元素向右浮动和元素不浮动。知识点讲解总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“元素的浮动属性 float”等。讲解“元素的浮动属性float”（1） 、教师通过PPT 对网页中常见的元素浮动效果进行展示。（2） 、教师通过PPT 对“浮动”的概念及基本语法格式进行讲解，并进行代码演示。（3） 、教师对“浮动”的常用属性左浮动、右浮动进行讲解，并进行代码演示。（4） 、教师指出对元素应用“浮动”时需要注意的问题，并给予解答。（5） 、学生练习，教师巡视，对疑难问题进行解答。讲解“清除浮动”（1） 、教师对元素的浮动会对其他元素产生影响，并进行代码演示。（2） 、教师对分别对“使用空标记清除浮动”、 “使用 overflow 属性清除浮动”以及“使用after 伪对象清除浮动”的方法及应用范围进行讲解，并进行代码演示。（3） 、教师对比“使用空标记清除浮动”、 “使用 overflow 属性清除浮动”精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 3 页，共 13 页名师精编优秀教案以及“使用after 伪对象清除浮动”的异同，并分析其优缺点。（4） 、教师分别指出清除元素浮动时需要注意的问题，并给予解答。（5） 、学生练习，教师巡视，对疑难问题进行解答。说明： 在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结小结重点：元素的浮动属性float、清除浮动。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握如何给元素设置浮动属性，并能够清除浮动元素带来的影响。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第二课时（讲解 overflow属性）复习上节课内容在讲解本节内容前，抛出 以下 问题 让学生回答，以复习上节课内容。1、在上节课中， 我们已经学习了如何给元素设置浮动。由于浮动元素不再占用原文档流的位置，对页面中其他元素的排版会产生影响，为了排除这种影响，有时候需要我们清除元素的浮动。那么，如何使用clear属性清除元素的浮动呢？请同学们讨论并举例说明。请小组代表 对以上问题 发表见解 。教师 对上述问题进行解释 ：由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。在CSS 中，通过clear 属性清除浮动的方法是：给受到浮动的元素应用clear 属性。可以分别使用clear:left 、clear:right 、clear:both;来清除元素左、右及左右两侧浮动的影响。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：当盒子内的元素超出盒子自身的大小时，内容就会溢出，这时如果想要规范溢出内容的显示方式，就需要使用CSS中的 overflow属性。 那么， 请同学们精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 4 页，共 13 页名师精编优秀教案讨论下： overflow属性的属性值有哪些？各个属性值有什么作用？请小组代表 对以上问题 发表见解 。答案： overflow 属性的常用值有四个，分别表示不同的含义：visible ：内容不会被修剪，会呈现在元素框之外（默认值）。hidden：溢出内容会被修剪，并且被修剪的内容是不可见的。auto：在需要时产生滚动条，即自适应所要显示的内容。scroll ：溢出内容会被修剪，且浏览器会始终显示滚动条。知识点讲解讲解“ overflow 属性”（1） 、教师通过PPT 对“ overflow 属性”的作用进行讲解。（2） 、教师对“ overflow 属性”的基本语法格式进行讲解，并进行代码演示。（3） 、教师对“ overflow 属性”的四个常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。（4） 、教师指出应用“overflow 属性”时需要注意的问题，并给予解答。（5） 、学生练习，教师巡视，对疑难问题进行解答。阶段小结小结重点： overflow 属性。易错点：注意区分overflow 不同属性值的用法。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握overflow 属性的用法。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。完成“补充案例” ，通过平台提交给教师，教师下节课进行点评。预习 6.3 节【元素的定位】 。第三、四课时（讲解元素的定位属性、静态定位、相对定位、绝对定位、固定定位、z-index层叠等级属性）说明：将 6.3 小节作为两个课时进行讲解。复习上节课内容在讲解本节内容前，抛出 以下 问题 让学生回答，以复习上节课内容。1、下列样式代码中，可实现元素的溢出内容被修剪，且被修剪的内容不可见的是 （）。A、 overflow:visible; B、 overflow:hidden; 精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 5 页，共 13 页名师精编优秀教案C、 overflow:auto; D、 overflow:scroll; 答案： B答案解析：overflow 属性的常用值有四个，分别表示不同的含义：visible ：内容不会被修剪，会呈现在元素框之外（默认值）。hidden：溢出内容会被修剪，并且被修剪的内容是不可见的。auto：在需要时产生滚动条，即自适应所要显示的内容。scroll ：溢出内容会被修剪，且浏览器会始终显示滚动条。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：元素的定位方式包括多种，例如：静态定位、相对定位、绝对定位、固定定位等。那么，请同学们讨论下：什么是“相对定位”？请小组代表 对以上问题 发表见解 。教师 对上述问题进行解释 ：相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative 时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。知识点讲解讲解“元素的定位属性”（1）、教师和学生互动：制作网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行精确定位。元素的定位属性主要包括定位模式和边偏移两部分。下面，将进行具体讲解。（2） 、教师分别针对“定位模式”和“边偏移”进行详细讲解。（3） 、教师对“定位模式”的基本语法格式进行讲解，并进行代码演示。（4） 、教师指出position 属性的四个常用值，并进行分析。（5） 、学生练习，教师巡视，对疑难问题进行解答。讲解“静态定位”（1）、教师展示PPT 对“静态定位”的概念进行讲解。（2） 、教师针对“静态定位”进行详细讲解，并进行代码演示。（3） 、学生练习，教师巡视，对疑难问题进行解答。讲解“相对定位”（1）、教师展示PPT 对“相对定位”的概念进行讲解。（2） 、教师针对“相对定位”进行详细讲解，并进行代码演示。（3） 、教师分析“相对定位”的用法及显示效果，对比其和“静态定位”的区别与联系。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 6 页，共 13 页名师精编优秀教案150px100px在文档流中的位置仍然保留child-02（4） 、教师指出应用“相对定位”时需要注意的问题，并给予解答。（5） 、学生练习，教师巡视，对疑难问题进行解答。讲解“绝对定位”（1）、教师展示PPT 对“绝对定位”的概念进行讲解。（2） 、教师针对“绝对定位”进行详细讲解，并进行代码演示。（3） 、教师分析“绝对定位”的用法及显示效果，对比其和“静态定位”以及“相对定位”的区别与联系。150px100px（4） 、教师指出应用“绝对定位”时需要注意的问题，并给予解答。（5） 、学生练习，教师巡视，对疑难问题进行解答。讲解“固定定位”（1）、教师展示PPT 对“固定定位”的概念进行讲解。（2） 、教师针对“固定定位”进行详细讲解，并进行代码演示。（3） 、教师分析“固定定位”的用法及显示效果，对比其和“静态定位”、“相对定位”以及“绝对定位”的区别与联系。（4） 、学生练习，教师巡视，对疑难问题进行解答。讲解“ z-index 层叠等级属性”（1）、教师和学生互动：当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，那么，怎样解决这个问题呢？精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 7 页，共 13 页名师精编优秀教案（2）教师展示PPT 对“ z-index 层叠等级属性”的用法进行说明。（3） 、教师针对 “z-index 层叠等级属性” 进行详细讲解， 并进行代码演示。（4） 、教师指出“z-index 层叠等级属性”需要注意的问题，并给予解答。（5） 、学生练习，教师巡视，对疑难问题进行解答。阶段小结小结重点：相对定位、绝对定位。易错点：注意区分相对定位与绝对定位的用法。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握如何使用定位属性控制元素的位置，以及 z-index 层叠等级属性控制元素的堆叠顺序。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业完成“补充案例” ，通过平台提交给教师，教师下节课进行点评。预习 6.4 节【元素的类型与转换】。预习 6.5 节【阶段案例制作网页焦点图】。第五课时（讲解元素的类型、标记、元素的转换）复习上节课内容在讲解本节内容前，抛出 以下 问题 让学生回答，以复习上节课内容。1、关于元素的绝对定位模式，下列说法正确的是（）A、“ position: absolute; ”可以将元素的定位模式设置为绝对定位；B、绝对定位的元素将脱离标准文档流的控制；C、绝对定位的元素将不再占据标准文档流中的空间；D、绝对定位与相对定位的效果完全相同；答案： ABC答案解析：绝对定位的元素将脱离标准文档流的控制，不再占据标准文档流中的空间。相对定位与绝对定位是两种不同的定位方式，相对定位是将元素相对于它在标精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 8 页，共 13 页名师精编优秀教案准文档流中的位置进行定位，对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在 HTML 中，存在着各种各样的标记，可以定义字体、 文本、 图片、列表等。其实， HTML中的元素可分为两种类型: 块元素和行内元素。那么，请同学们讨论下： 什么是块元素和行内元素，它们有哪些区别？请分别举例说明。请小组代表 对以上问题 发表见解 。教师 对上述问题进行解释 ：在 HTML 中，元素分为块元素和行内元素。具体如下：块元素块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有 、 、 、 等，其中 标记是最典型的块元素。行内元素行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有、 、等，其中 标记是最典型的行内元素。知识点讲解讲解“元素的类型”（1） 、教师和学生互动：HTML 标记语言提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML 标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。下面，我们开始学习块元素和行内元素。（2） 、教师展示PPT 对“块元素和行内元素”的概念及特点进行说明。（3） 、教师分别对 “ 块元素和行内元素”进行讲解，并进行代码演示。（4） 、教师列举常见的块元素和行内元素，并对比其不同。（5） 、学生练习，教师巡视，对疑难问题进行解答。讲解“ 标记”（1） 、 教师和学生互动： 在上面的小节中， 我们已经学习了 标记，标记是典型的块标记。下面， 我们学习一个典型的行内标记精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 9 页，共 13 页名师精编优秀教案标记。（2） 、教师展示PPT 对标记的概念及特点进行说明。（3） 、教师对 标记的使用方法进行讲解，并进行代码演示。（4） 、 教师对比 标记和 标记的异同， 并指出使用 标记布局时需要注意的问题。（5） 、学生练习，教师巡视，对疑难问题进行解答。讲解“元素的转换”（1）、教师和学生互动：我们知道，网页是由多个块元素和行内元素构成的盒子排列而成的，而 HTML 元素分为块元素和行内元素。如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，那么，需要怎么做呢？其实，在CSS 中使用display 属性可以对元素的类型进行转换。（2） 、教师展示PPT 对“ display 属性”及其常用的属性值进行展示。（3） 、教师对“ display 属性”的使用方法进行讲解，并进行代码演示。（4） 、教师对比 “display 属性”不同属性值显示的不同效果，并进行总结。（5） 、教师指出使用“display 属性”转换元素类型时需要注意的问题，并给与解答。（6）、学生练习，教师巡视，对疑难问题进行解答。阶段小结小结重点：元素的转换。易错点：注意区分行内元素和块元素。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地区分元素的类型，以及如何进行元素的转换等知识点。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第六课时（讲解阶段案例制作网页焦点图）复习上节课内容在讲解本节内容前，抛出 以下 问题 让学生回答，以复习上节课内容。1、在上一节中，我们知道HTML元素主要分为块元素和行内元素两部分，并且通过display属性可以对元素的类型进行转换。那么，请大家回顾下：display属性常用的属性值有哪些？并说明其含义。答案：display 属性常用的属性值及含义如下：inline ：此元素将显示为行内元素（行内元素默认的display 属性值）。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 10 页，共 13 页名师精编优秀教案block：此元素将显示为块元素（块元素默认的display 属性值）。inline-block ：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在 CSS中，可以通过float 属性为元素设置浮动，以下属于float 属性值的是（）A、left B、center C、right D、none 答案： ACD请小组代表 对以上问题 发表见解 。教师 对上述问题进行解释 ：答案解析：常用的float 属性值有三个，分别表示不同的含义：left：元素向左浮动right ：元素向右浮动none：元素不浮动（默认值）案例讲解案例描述本章前几节重点讲解了元素的浮动、定位、以及清除浮动。为了使读者更好地运用浮动与定位组织页面，本节将通过案例的形式分步骤制作一个网页焦点图，其默认效果如图所示。当鼠标移上图中的焦点图时，两侧将会出现焦点图切换按钮，效果如下图所示。案例分析精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 11 页，共 13 页名师精编优秀教案分析“网页焦点图”的构成元素，将其拆解为几个部分，分析各部分使用了哪些 HTML 标记及应用了哪些CSS 样式。案例实现教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构、定义 CSS 样式等步骤完成页面的制作，并指出其中需要注意的事项。说明： 在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结小结重点：元素的浮动、元素的定位、元素的类型与转换。易错点：注意区分行内元素和块元素的区别。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，让学生再制作一次“网页焦点图”。以此使学生更熟练地运用浮动和定位进行网页布局，掌握清除浮动的几种常用方法，理解元素的类型与转换。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业完成“补充案例” ，通过平台提交给教师，教师下节课进行点评。复习 本课时的所有知识点和案例，加强巩固。第七、八课时（上机测试）教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对“元素的浮动属性”、“清除浮动”及“ overflow 属性”使用的熟练程度，以及对如何使用“元素的定位属性”、“元素的类型与转换”等知识点的掌握程度。（作品点评）教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。布置作业完成课后“动手实践” ，并扫描二维码查看答案。预习 7.1 节【认识表单】 。预习 7.2 节【表单属性】 。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 12 页，共 13 页名师精编优秀教案教学后记精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 13 页，共 13 页