浮动与定位教案

1、哈尔滨市第一职业高级中学校哈一职教案设计案例 课 题第六章 浮动与定位授课时间2012年10月22日授课类型新授课学时1教学目标知识与技能会使用float属性设置浮动。过程与方法回顾检查情景模拟知识巩固总结作业情感、态度与价值观树立积极探究新知的观念，培养学生勇于创新能力。教学重点掌握Float属性。教学难点Float属性的应用。教学方法情景模拟教学法、引导文教学法教具准备课件教 学 过 程教学内容教师活动学生活动设计意图【组织教学】【回顾检查】【情景模拟】青鸟网页布局公司情况：角色：老师：青鸟网页布局公司的老板和技术顾问。同学：青鸟网页布局公司的员工，我们有四个研发部门，部门经理分别为：&#

2、215;××。青鸟网页布局公司背景：青鸟网页布局公司刚刚成立，由于资金有限，我们现在的条件待遇一般，但是我们要相信，通过我们的努力，面包我们会有的。引出项目：告诉各位员工一个好消息，我刚刚与哈一职网站设计部门负责人李主任签订了一份设计合约，我们将为哈一职网站的两个版块进行网页布局，各位员工，让我们共同努力，争取赚到我们的第一桶金。项目一：“哈一职志愿者服务队”活动网页布局效果项目2：“哈一职礼仪队”活动网页布局效果图图技术要点：作为公司的技术顾问，我先把我们要完成的两个项目的技术要点介绍给大家。我们要完成的这两个网站版块的布局主要涉及到得知识点是：浮动。浮动1、浮动的应用。

3、（1）定位网页元素（2）建立横向多列布局（3）建立混合多列布局2、float属性（1）用于定义元素的浮动方向（2）语法规则： 左浮动语法规则：float:left;右浮动语法规则：float:right;实验过程：实验1：未设置浮动盒子具有的性质实验2设置“钓”所在的盒子为左浮动实验3设置“鱼”所在的盒子为左浮动实验4设置“岛”所在的盒子为左浮动实验5 1、设置“岛”所在的盒子为右浮动2、“岛”所在的盒子右浮动时，浏览器窗口变窄的网页情况。实验61、设置“鱼”所在的盒子为右浮动，同时设置“岛”所在的盒子为左浮动2、浏览器窗口变窄时，网页的情况。实验71、全部向左浮动2、浏览器窗口变窄时，网页的

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

5、置角色并介绍公司背景引出本节课的两个项目。讲解浮动的知识。演示实验一提出问题：网页布局是什么样的？演示实验二提出问题：当将“钓”所在盒子设置为左浮动时，网页布局有何变化。演示实验三提出问题：当“钓”和“鱼”所在的盒子都设置为左浮动时，网页布局有何变化。演示实验四提出问题：当“钓鱼岛”所在的三个盒子都设置为左浮动时，网页布局有何变化。演示实验五提出问题：1、当“钓鱼”所在的二个盒子设置为左浮动，而“岛”设置为右浮动时，网页布局有何变化？2、此时，浏览器窗口变窄，网页布局又又何变化？演示实验六提出问题：1、将“鱼“所在盒子设置为右浮动，而“岛”设置为左浮动时，网页布局有何变化？2、浏览器窗口变窄的

6、情况下，网页布局是如何变化的？演示实验七提出问题：1、当在“钓”所在盒子中增加内容，然后将“钓鱼岛”三个盒子都设置为左浮动时，网页布局有何变化？2、浏览器窗口变窄的情况下，网页布局是如何变化的？对浮动知识进行小结。答疑引领提出问题引领小结学生立礼学生：“老师好！”学生思考，然后回答问题。学生倾听互动，明确自己的角色和职位。学生倾听互动，明确自身的任务。学生倾听、识记。总结：没有设置浮动的盒子是像兄弟般并排排列的。总结：“钓”所在的盒子设置左浮动时，它的宽度不在伸展，而是能够容纳内容的最小宽度，此时，“鱼”所在的盒子与其关系变为同一行两列。 结论:“钓鱼岛”所在的三个盒子布局是一行三列。结论：“

7、钓鱼岛是中国的”文字所在的盒子也和“钓鱼岛”三个字所在的三个盒子是同行三列。结论：1、当将“岛”所在盒子设置为右浮动，“钓”和“鱼”所在盒子设置为左浮动时，“岛”所在的盒子在网页的最右侧，而此时文字所在的盒子在它们中间。2、“岛”所在盒子被挤到下一行，但仍为右浮动。结论：1、“岛”所在的盒子和“鱼”所在的盒子交换了位置。在这里给了我们一个很重要的提示，通过使用CSS布局，可以实现在HTML不做任何改变的情况下，调换盒子的位置。2、浏览器窗口变窄，同一行不能容纳两个左浮动的盒子，所以“钓”和“岛”是垂直排列的。而右浮动的“鱼”虽在的盒子是和“钓”所在的盒子是同行排列的。结论：1、“钓”所在的盒子高度增加，网页布局仍然都是左浮动。2、浏览器窗口变窄的情况下，“岛”所在盒子被挡住，不再继续左浮动，而是垂直排列于“鱼”所在盒子之下。倾听、共同总结。分组制作项目设计主发言讲述，其他人倾听。分析回答问题发言，进行总结。教师组织学生上课。温故而知新情景模拟教学准备工作。情景模拟教学开始。引出浮动的知识点。理解没有设置浮动时盒子的性质。掌握左浮动的设置方法及设置左浮动式的网页布局变化。掌握设置两个左浮动时，网页布局的变化。掌握设置三个左浮动时，网页布局的变化。掌右浮动的属性，并理解浏览器变化时的网页布局变化。掌握调换盒子的方法，在网页布局中是非常有用的。掌握盒子高度