浮动与定位教案.doc

哈尔滨市第一职业高级中学校

哈一职教案设计案例

课题第六章浮动与定位授课时间2012年10月22日授课类型新授课学时1教
学
目
标知识与技能会使用float属性设置浮动。过程与方法回顾检查→情景模拟→知识巩固→总结作业情感、态度与价值观树立积极探究新知的观念，培养学生勇于创新能力。教学重点掌握Float属性。教学难点Float属性的应用。教学方法情景模拟教学法、引导文教学法教具准备课件教学过程教学内容教师活动学生活动设计意图【组织教学】

【回顾检查】

【情景模拟】
青鸟网页布局公司情况：
角色：老师：青鸟网页布局公司的老板和技术顾问。
同学：青鸟网页布局公司的员工，我们有四个研发部门，部门经理分别为：×××。
青鸟网页布局公司背景：青鸟网页布局公司刚刚成立，由于资金有限，我们现在的条件待遇一般，但是我们要相信，通过我们的努力，面包我们会有的。
引出项目：告诉各位员工一个好消息，我刚刚与哈一职网站设计部门负责人李主任签订了一份设计合约，我们将为哈一职网站的两个版块进行网页布局，各位员工，让我们共同努力，争取赚到我们的第一桶金。
项目一：“哈一职志愿者服务队”活动网页布局效果

项目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、浏览器窗口变窄时，网页的情况。

3、float属性小结
float属性作用：
定位网页元素。
实现一行多列或混合多列的布局。
float属性使用时注意事项：
1）在代码窗口中，使用英文状态下输入法进行输入，否则无法出现正确的运行结果。
2）设置之后的CSS样式，要使用“套用”才能实现网页布局的效果。
项目设计：
作为技术顾问，我已经把我们公司要完成的2个项目的主要技能要点和大家沟通完了，接下来我们要开始进行项目设计，我们分成两个项目组，比一比哪个项目组开发设计的快，希望大家能够加班加点，为公司的发展而努力！
项目设计讲述：
请项目研发部门经理讲述设计项目的过程。
【知识巩固】

【总结】教师：“上课！”

提出2个问题。

教师布置角色并介绍公司背景

引出本节课的两个项目。

讲解浮动的知识。

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

演示实验二
提出问题：当将“钓”所在盒子设置为左浮动时，网页布局有何变化。

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

演示实验五
提出问题：
1、当“钓鱼”所在的二个盒子设置为左浮动，而“岛”设置为右浮动时，网页布局有何变化？
2、此时，浏览器窗口变窄，网页布局又又何变化？

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

2、浏览器窗口变窄的情况下，网页布局是如何变化的？

演示实验七
提出问题：
1、当在“钓”所在盒子中增加内容，然后将“钓鱼岛”三个盒子都设置为左浮动时，网页布局有何变化？
2、浏览器窗口变窄的情况下，网页布局是如何变化的？

对浮动知识进行小结。

答疑

引领

提出问题

引领小结学生立礼
学生：“老师好！”

学生思考，然后回答问题。

学生倾听互动，明确自己的角色和职位。

学生倾听互动，明确自身的任务。

学生倾听、识记。

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

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