传智播客
《HTML5+CSS3网站设计基础
教程》
教学设计
课程名称:HTML5+CSS3网站设计基础教程
授课年级:20XX年级
授课学期:2016学年第一学期
教师姓名:某某老师
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
答案: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属性清除浮动”
以及“使用after伪对象清除浮动”的异同,并分析其优缺点。
(4)、教师分别指出清除元素浮动时需要注意的问题,并给予解答。
(5)、学生练习,教师巡视,对疑难问题进行解答。
说明:在网页制作时可适时停下来,让学生自行尝试。小组之间可以协作讨论,教师巡视,对疑难问题进行解答。
?阶段小结
?小结
重点:元素的浮动属性float、清除浮动。
?答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
?巩固练习
?巩固本课时知识点
学完知识点后,教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握如何给元素设置浮动属性,并能够清除浮动元素带来的影响。
?通过“补充案例”加强学习
教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固。
第二课时
(讲解overflow属性)
复习上节课内容
在讲解本节内容前,抛出以下问题让学生回答,以复习上节课内容。
1、在上节课中,我们已经学习了如何给元素设置浮动。由于浮动元素不再占用原文档流的位置,对页面中其他元素的排版会产生影响,为了排除这种影响,有时候需要我们清除元素的浮动。那么,如何使用clear属性清除元素的浮动呢?请同学们讨论并举例说明。
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
●由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素
的排版产生影响。在CSS中,通过clear属性清除浮动的方法是:给
受到浮动的元素应用clear属性。可以分别使用clear:left、clear:right、
clear:both;来清除元素左、右及左右两侧浮动的影响。
说明:教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
?分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
当盒子内的元素超出盒子自身的大小时,内容就会溢出,这时如果想要规范溢出内容的显示方式,就需要使用CSS中的overflow属性。那么,请同学们
讨论下: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;
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)、教师分析“相对定位”的用法及显示效果,对比其和“静态定位”
的区别与联系。
150px 100px
在
文
档
流
中
的
位
置
仍
然
保
留
child-02
、教师指出应用“相对定位”时需要注意的问题,并给予解答。
、学生练习,教师巡视,对疑难问题进行解答。
讲解“绝对定位”
PPT对“绝对定位”的概念进行讲解。
、教师针对“绝对定位”进行详细讲解,并进行代码演示
、教师分析“绝对定位”的用法及显示效果,对比其和“静态定位”
以及“相对定位”的区别与联系。
150px
100px
、教师指出应用“绝对定位”时需要注意的问题,并给予解答。
、学生练习,教师巡视,对疑难问题进行解答。
讲解“固定定位”
)、教师展示PPT对“固定定位”的概念进行讲解。
、教师针对“固定定位”进行详细讲解,并进行代码演示
、教师分析“固定定位”的用法及显示效果,对比其和“静态定位”
“相对定位”以及“绝对定位”的区别与联系。
、学生练习,教师巡视,对疑难问题进行解答。
(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
答案解析:
绝对定位的元素将脱离标准文档流的控制,不再占据标准文档流中的空间。相对定位与绝对定位是两种不同的定位方式,相对定位是将元素相对于它在标
准文档流中的位置进行定位,对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留。
说明:教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
?分组讨论
对新课进行讲解前,先让学生分组讨论以下问题:
在HTML中,存在着各种各样的标记,可以定义字体、文本、图片、列表等。
其实,HTML中的元素可分为两种类型:块元素和行内元素。那么,请同学们讨论下:什么是块元素和行内元素,它们有哪些区别?请分别举例说明。
请小组代表对以上问题发表见解。
教师对上述问题进行解释:
在HTML中,元素分为块元素和行内元素。具体如下:
●块元素
块元素在页面中以区域块的形式出现,其特点是,每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
常见的块元素有
、
●行内元素
行内元素也称内联元素或内嵌元素,其特点是,不必在新的一行开始,同时,也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中,它们不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有、、、、、、、、
?知识点讲解
?讲解“元素的类型”
(1)、教师和学生互动:HTML标记语言提供了丰富的标记,用于组织页面结构。为了使页面结构的组织更加轻松、合理,HTML标记被定
义成了不同的类型,一般分为块标记和行内标记,也称块元素和行
内元素。下面,我们开始学习块元素和行内元素。
(2)、教师展示PPT对“块元素和行内元素”的概念及特点进行说明。
(3)、教师分别对“块元素和行内元素”进行讲解,并进行代码演示。
(4)、教师列举常见的块元素和行内元素,并对比其不同。
(5)、学生练习,教师巡视,对疑难问题进行解答。
?讲解“标记”
(1)、教师和学生互动:在上面的小节中,我们已经学习了
标记。
(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属性值)。 ●block:此元素将显示为块元素(块元素默认的display属性值)。 ●inline-block:此元素将显示为行内块元素,可以对其设置宽高和对齐 等属性,但是该元素不会独占一行。 ●none:此元素将被隐藏,不显示,也不占用页面空间,相当于该元素 不存在。 说明:教师可根据学生对上述问题的回答情况,对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 ?分组讨论 对新课进行讲解前,先让学生分组讨论以下问题: 在CSS中,可以通过float属性为元素设置浮动,以下属于float属性值的是() A、left B、center C、right D、none 答案:ACD 请小组代表对以上问题发表见解。 教师对上述问题进行解释: 答案解析:常用的float属性值有三个,分别表示不同的含义: ●left:元素向左浮动 ●right:元素向右浮动 ●none:元素不浮动(默认值) ?案例讲解 ?案例描述 本章前几节重点讲解了元素的浮动、定位、以及清除浮动。为了使读者更好地运用浮动与定位组织页面,本节将通过案例的形式分步骤制作一个网页焦点图,其默认效果如图所示。 当鼠标移上图中的焦点图时,两侧将会出现焦点图切换按钮,效果如下图所示。 ?案例分析