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

精选学习资料 - - - - - - - - - 名师精编 优秀教案传智播客HTML5+CSS3 网站设计基础教程教学设计课程名称：HTML5+CSS3 网站设计基础教程名师归纳总结 授课年级：20XX 年级第 1 页,共 13 页授课学期：2022 学年第一学期老师姓名：某某老师- - - - - - -精选学习资料 - - - - - - - - - 名师精编 优秀教案201 年 月 日方案课题名称第 6 章 浮动与定位8 课时课时通过前面几章的学习,初学者不难发觉,在默认情形下,网页中的元素会依据内容分析从上到下或从左到右的次序一一排列；假如仅仅依据这种默认的方式进行布局,网页将会显得单调、纷乱；为了使网页的布局更加丰富、合理,可以在 CSS中对元素设置浮动和定位属性；本章将对元素的浮动和定位进行具体讲解；懂得元素的浮动,能够为元素设置浮动样式；教学目标 熟识清除浮动的方法,可以使用不同方法清除浮动；把握元素的定位,能够为元素设置常见的定位模式；教学重点：元素的浮动属性 float 、运用 clear 属性清除浮动、运用 overflow 属重点及措施 性清除浮动、使用 after 伪对象清除浮动、overflow 属性、元素的定位属性；措施：通过上机操作加强学习和补充案例进行巩固；难点及措施教学难点：元素的浮动属性 float 、overflow 属性、元素的定位属性；措施：通过上机操作加强学习和补充案例进行巩固；教学方式教学采纳老师课堂讲授为主,使用教学PPT 讲解；第一课时名师归纳总结 教（讲解元素的浮动属性float、清除浮动）第 2 页,共 13 页复习上节课内容学在讲解本节内容前,抛出 以下 问题 让同学回答,以复习第五章 “ CSS 盒子过模型” 的 相关学问 ；程1、 一个盒子的宽 （width ）和高（height ）均为 300px,左内边距为30px,同时盒子有3px 的边框,请问这个盒子的总宽度是多少？（ ）A、333px B、366px C、336px D、363px - - - - - - -精选学习资料 - - - - - - - - - 名师精编 优秀教案答案： 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 页精选学习资料 - - - - - - - - - 名师精编优秀教案100pxchild-02 在150px文档流中的位置仍然保留（4）、老师指出应用“ 相对定位” 时需要留意的问题,并赐予解答；（5）、同学练习,老师巡察,对疑难问题进行解答；讲解“ 肯定定位”（1）、老师展现 PPT 对“ 肯定定位” 的概念进行讲解；（2）、老师针对“ 肯定定位” 进行具体讲解,并进行代码演示；（3）、老师分析“ 肯定定位” 的用法及显示成效,对比其和“ 静态定位”以及“ 相对定位” 的区分与联系；100px150px（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 节【阶段案例制作网页焦点图】；第五课时（讲解元素的类型、<span>标记、元素的转换）复习上节课内容在讲解本节内容前,抛出 以下 问题 让同学回答,以 复习上节课内容；1、关于元素的肯定定位模式,以下说法正确选项（）A、“position: absolute; ” 可以将元素的定位模式设置为肯定定位；B、肯定定位的元素将脱离标准文档流的掌握；C、肯定定位的元素将不再占据标准文档流中的空间；D、肯定定位与相对定位的成效完全相同；答案： ABC 答案解析：肯定定位的元素将脱离标准文档流的掌握,不再占据标准文档流中的空间；相对定位与肯定定位是两种不同的定位方式,相对定位是将元素相对于它在标名师归纳总结 - - - - - - -第 8 页,共 13 页精选学习资料 - - - - - - - - - 名师精编 优秀教案准文档流中的位置进行定位,对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍旧保留；说明：老师可依据同学对上述问题的回答情形,对以上问题进行简洁讲解或直接进入本课时新内容的学习；本课时内容学习分组争论对新课进行讲解前,先让同学分组争论以下问题：在 HTML中,存在着各种各样的标记,其实, HTML中的元素可分为两种类型们争论下： 什么是块元素和行内元素,请小组代表 对以上问题 发表见解 ；老师 对上述问题进行 说明 ：可以定义字体、 文本、 图片、列表等；: 块元素和行内元素；那么,请同学 它们有哪些区分？请分别举例说明；在 HTML中,元素分为块元素和行内元素；具体如下：块元素 块元素在页面中以区域块的形式显现,其特点是,每个块元素通常都会独 自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页 布局和网页结构的搭建；常见的块元素有 <h1><h6> 、<p>、<div> 、<ul> 、<ol> 、<li> 等,其中 <div> 标记是最典型的块元素；行内元素 行内元素也称内联元素或内嵌元素,其特点是,不必在新的一行开头,同 时,也不强迫其他的元素在新的一行显示；一个行内元素通常会和它前后的其 他行内元素显示在同一行中,它们不占有独立的区域,仅仅靠自身的字体大小 和图像尺寸来支撑结构,一般不行以设置宽度、高度、对齐等属性,常用于控 制页面中文本的样式；常见的行内元素有 <strong>、<b>、<em>、<i> 、<del> 、<s>、<ins>、<u>、<a>、<span>等,其中 <span>标记是最典型的行内元素；学问点讲解 讲解“ 元素的类型”（1）、老师和同学互动：HTML 标记语言供应了丰富的标记,用于组织页面结构；为了使页面结构的组织更加轻松、合理,HTML 标记被定义成了不同的类型,一般分为块标记和行内标记,也称块元素和行内元素；下面,我们开头学习块元素和行内元素；（2）、老师展现 PPT 对“ 块元素和行内元素” 的概念及特点进行说明；（3）、老师分别对 “块元素和行内元素” 进行讲解,并进行代码演示；（4）、老师列举常见的块元素和行内元素,并对比其不同；（5）、同学练习,老师巡察,对疑难问题进行解答；名师归纳总结 讲解“<span>标记”第 9 页,共 13 页（1）、老师和同学互动： 在上面的小节中, 我们已经学习了<div> 标记,<div>标记是典型的块标记； 下面,我们学习一个典型的行内标记<span>- - - - - - -精选学习资料 - - - - - - - - - 名师精编 优秀教案标记；（2）、老师展现 PPT 对<span>标记的概念及特点进行说明；（3）、老师对 <span>标记的使用方法 进行讲解,并进行代码演示；（4）、老师对比 <span>标记和 <div> 标记的异同, 并指出访用 <span>标记布局时需要留意的问题；（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：此元素将被隐匿,不显示,也不占用页面空间,相当于该元素 不存在；说明：老师可依据同学对上述问题的回答情形,对以上问题进行简洁讲解 或直接进入本课时新内容的学习；本课时内容学习分组争论是（对新课进行讲解前,先让同学分组争论以下问题：float 属性值的在 CSS中,可以通过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 页