浮动与定位教案

哈一职教案设计案例

课题授课时间

授课类型新授课学时 1

教

学

目

标

知识与技能会使用float属性设置浮动。

过程与方法回顾检查→情景模拟→知识巩固→总结作业

情感、态度与价值观树立积极探究新知的观念，培养学生勇于创新能力。

教学重点掌握Float属性。教学难点Float属性的应用。

教学方法情景模拟教学法、引导文教学法教具准备课件

教学过程

教学内容教师活动学生活动设计意

图【组织教学】

【回顾检查】

【情景模拟】

青鸟网页布局公司情况：

角色：老师：青鸟网页布局公司的老板和技术顾问。

同学：青鸟网页布局公司的员工，我们有四

个研发部门，部门经理分别为：×××。

青鸟网页布局公司背景：青鸟网页布局公司刚刚成

立，由于资金有限，我们现在的条件待遇一般，但

是我们要相信，通过我们的努力，面包我们会有的。

引出项目：告诉各位员工一个好消息，我刚刚与哈

一职网站设计部门负责人李主任签订了一

份设计合约，我们将为哈一职网站的两个版

块进行网页布局，各位员工，让我们共同努

力，争取赚到我们的第一桶金。

项目一：“哈一职志愿者服务队”活动网页布局效果

项目2：“哈一职礼仪队”活动网页布局效果图图

教师：“上课！”

提出2个问题。

教师布置角色并

介绍公司背景

引出本节课的两

个项目。

学生立礼

学生：“老师好！”

学生思考，然后回答问

题。

学生倾听互动，明确自

己的角色和职位。

学生倾听互动，明确自

身的任务。

教师组织

学生上

课。

温故而知

新

情景模拟

教学准备

工作。

情景模拟

教学开

始。

技术要点：作为公司的技术顾问，我先把我们要完

成的两个项目的技术要点介绍给大家。我们要完成的这两个网站版块的布局主要涉及到得知识点是：浮动。

浮动

1、浮动的应用。 （1）定位网页元素 （2）建立横向多列布局 （3）建立混合多列布局

2、float 属性

（1）用于定义元素的浮动方向 （2）语法规则：

左浮动语法规则：float:left; 右浮动语法规则：float:right;

实验过程：

实验1：未设置浮动盒子具有的性质

实验2—设置“钓”所在的盒子为左浮动

实验3—设置“鱼”所在的盒子为左浮动

实验4—设置“岛”所在的盒子为左浮动

讲解浮动的知识。

演示实验一 提出问题：网页布局是什么样的？

演示实验二 提出问题：当将“钓”所在盒子设置为左浮动

时，网页布局有何变化。

演示实验三 提出问题：当“钓”和“鱼”所在的盒子都设

置为左浮动时，网页布局有何变化。 演示实验四

学生倾听、识记。

总结：没有设置浮动的盒子是像兄弟般并排排列的。

总结：“钓”所在的盒子设置左浮动时，它的宽度不在伸展，而是能够容纳内容的最小宽度，此时，“鱼”所在的盒子与其关系变为同一行两列。

结论:“钓鱼岛”所在的三个盒子布局是一行三列。

结论：“钓鱼岛是中国

引出浮动的知识点。

理解没有设置浮动时盒子的性质。

掌握左浮动的设置方法及设置左浮动式的网页布局变化。 掌握设置两个左浮动时，网页布局的变化。

掌握设置

实验5

1、设置“岛”所在的盒子为右浮动

2、“岛”所在的盒子右浮动时，浏览器窗口变窄的网页情况。

实验6

1、设置“鱼”所在的盒子为右浮动，同时设置“岛”所在的盒子为左浮动

2、浏览器窗口变窄时，网页的情况。

实验7

提出问题：当“钓鱼岛”所在的三个盒子都设置为左浮动时，网页布局有何变化。

演示实验五 提出问题： 1、当“钓鱼”所在的二个盒子设置为左浮动，而“岛”设置为右浮动时，网页布

局有何变化？ 2、此时，浏览器窗口变窄，网页布局又又何变化？

演示实验六 提出问题： 1、将“鱼“所在盒子设置为右浮动，而“岛”设置为左浮动时，网页布局有何变化？

2、浏览器窗口变

窄的情况下，网页布局是如何变化的？

演示实验七

的”文字所在的盒子也和“钓鱼岛”三个字所在的三个盒子是同行三列。

结论：1、当将“岛”所在盒子设置为右浮动，“钓”和“鱼”所在盒子设置为左浮动时，“岛”所在的盒子在网页的最右侧，而此时文字所在的盒子在它们中间。

2、“岛”所在盒子被挤到下一行，但仍为右浮动。 结论：

1、“岛”所在的盒子和“鱼”所在的盒子交换了位置。在这里给了我们一个很重要的提示，通过使用CSS 布局，可以实现在HTML 不做任何改变的情况下，调换盒子的位置。

2、浏览器窗口变窄，同一行不能容纳两个左浮动的盒子，所以“钓”和“岛”是垂直排列的。而右浮动的“鱼”虽在的盒子是和“钓”所在的盒子是同行排列的。 结论：

1、“钓”所在的盒子高

三个左浮动时，网页布局的变化。

掌右浮动的属性，并理解浏览器变化

时的网页布局变化。

掌握调换盒子的方法，在网页布局中是非常有用的。

掌握盒子

1、全部向左浮动

2、浏览器窗口变窄时，网页的情况。

3、float属性小结

⏹float属性作用：

1)定位网页元素。

2)实现一行多列或混合多列的布局。

⏹float属性使用时注意事项：

1）在代码窗口中，使用英文状态下输入法进行输入，否则无法出现正确的运行结果。

2）设置之后的CSS样式，要使用“套用”才能实现网页布局的效果。

项目设计：

作为技术顾问，我已经把我们公司要完成的2个项目的主要技能要点和大家沟通完了，接下来我们要开始进行项目设计，我们分成两个项目组，比一比哪个项目组开发设计的快，希望大家能够加班加点，为公司的发展而努力！

项目设计讲述：

请项目研发部门经理讲述设计项目的过程。【知识巩固】

【总结】提出问题：

1、当在“钓”所

在盒子中增加内

容，然后将“钓

鱼岛”三个盒子

都设置为左浮动

时，网页布局有

何变化？

2、浏览器窗口变

窄的情况下，网

页布局是如何变

化的？

对浮动知识进行

小结。

答疑

引领

提出问题

引领小结

度增加，网页布局仍然

都是左浮动。

2、浏览器窗口变窄的情

况下，“岛”所在盒子

被挡住，不再继续左浮

动，而是垂直排列于

“鱼”所在盒子之下。

倾听、共同总结。

分组制作项目设计

主发言讲述，其他人倾

听。

分析回答问题

发言，进行总结。

高度发生

变化的情

况下，网

页布局的

变化。

巩固float

知识点。

提高浮动

的实际应

用能力。

提高应用

能力。

巩固知识

点

【作业】制作个人主题相册

【板书设计】

第六章浮动与定位设置浮动的两种方法：

一、视图方法

二、代码方法：

语法规则：float:left;

【教学后记】