浮动与定位教案

哈尔滨市第一职业高级中学校 哈一职教案设计案例哈一职教案设计案例 课课 题题第六章 浮动与定位授课时间授课时间2012 年年 10 月月 22 日日 授课类型授课类型新授课学时 1 知识与技能知识与技能会使用float属性设置浮动 过程与方法过程与方法回顾检查 情景模拟 知识巩固 总结作业 教教 学学 目目 标标 情感 态度与价值观情感 态度与价值观树立积极探究新知的观念 培养学生勇于创新能力 教学重点教学重点掌握 Float 属性 教学难点教学难点Float 属性的应用 教学方法教学方法情景模拟教学法 引导文教学法教具准备教具准备课件 教教 学学 过过 程程 教学内容教学内容教师活动教师活动学生活动学生活动 设计意设计意 图图 组织教学组织教学 回顾检查回顾检查 情景模拟情景模拟 青鸟网页布局公司情况 角色 角色 老师 青鸟网页布局公司的老板和技术顾问 同学 青鸟网页布局公司的员工 我们有四 个研发部门 部门经理分别为 青鸟网页布局公司背景 青鸟网页布局公司背景 青鸟网页布局公司刚刚成 立 由于资金有限 我们现在的条件待遇一般 但 是我们要相信 通过我们的努力 面包我们会有的 引出项目 引出项目 告诉各位员工一个好消息 我刚刚与哈 一职网站设计部门负责人李主任签订了一 份设计合约 我们将为哈一职网站的两个 版块进行网页布局 各位员工 让我们共 同努力 争取赚到我们的第一桶金 项目一 项目一 哈一职志愿者服务队哈一职志愿者服务队 活动网页布局效活动网页布局效 果果 教师 上课 提出 2 个问题 教师布置角色并 介绍公司背景 引出本节课的两 个项目 学生立礼 学生 老师好 学生思考 然后回答问 题 学生倾听互动 明确自 己的角色和职位 学生倾听互动 明确自 身的任务 教师组织 学生上课 温故而知 新 情景模拟 教学准备 工作 情景模拟 教学开始 哈尔滨市第一职业高级中学校 项目项目 2 2 哈一职礼仪队哈一职礼仪队 活动网页布局效果图图活动网页布局效果图图 技术要点 技术要点 作为公司的技术顾问 我先把我们要完 成的两个项目的技术要点介绍给大家 我 们要完成的这两个网站版块的布局主要涉 及到得知识点是 浮动 浮动浮动 1 浮动的应用 浮动的应用 1 定位网页元素 2 建立横向多列布局 3 建立混合多列布局 2 float 属性属性 1 用于定义元素的浮动方向 2 语法规则 左浮动语法规则 float left 右浮动语法规则 float right 实验过程 实验实验 1 未设置浮动盒子具有的性质 未设置浮动盒子具有的性质 实验实验 2 设置设置 钓钓 所在的盒子为左浮动所在的盒子为左浮动 实验实验 3 设置设置 鱼鱼 所在的盒子为左浮动所在的盒子为左浮动 讲解浮动的知识 演示实验一 提出问题 网页 布局是什么样的 演示实验二 提出问题 当将 钓 所在盒子 设置为左浮动时 网页布局有何变 化 演示实验三 提出问题 当 钓 和 鱼 所在的盒子都设 置为左浮动时 网页布局有何变 学生倾听 识记 总结 没有设置浮动的 盒子是像兄弟般并排排 列的 总结 钓 所在的盒 子设置左浮动时 它的 宽度不在伸展 而是能 够容纳内容的最小宽度 此时 鱼 所在的盒 子与其关系变为同一行 两列 结论 钓鱼岛 所在 的三个盒子布局是一行 三列 引出浮动 的知识点 理解没有 设置浮动 时盒子的 性质 掌握左浮 动的设置 方法及设 置左浮动 式的网页 布局变化 掌握设置 两个左浮 动时 网 页布局的 变化 哈尔滨市第一职业高级中学校 实验实验 4 设置设置 岛岛 所在的盒子为左浮动所在的盒子为左浮动 实验实验 5 1 设置 设置 岛岛 所在的盒子为右浮动所在的盒子为右浮动 2 岛岛 所在的盒子右浮动时 浏览器窗口变窄所在的盒子右浮动时 浏览器窗口变窄 的网页情况 的网页情况 实验实验 6 1 设置 设置 鱼鱼 所在的盒子为右浮动 同时设置所在的盒子为右浮动 同时设置 岛岛 所在的盒子为左浮动所在的盒子为左浮动 2 浏览器窗口变窄时 网页的情况 浏览器窗口变窄时 网页的情况 化 演示实验四 提出问题 当 钓鱼岛 所在 的三个盒子都设 置为左浮动时 网页布局有何变 化 演示实验五 提出问题 1 当 钓鱼 所在的二个盒子 设置为左浮动 而 岛 设置为 右浮动时 网页 布局有何变化 2 此时 浏览 器窗口变窄 网 页布局又又何变 化 演示实验六 提出问题 1 将 鱼 所 在盒子设置为右 浮动 而 岛 设置为左浮动时 网页布局有何变 化 2 浏览器窗口 变窄的情况下 网页布局是如何 变化的 结论 钓鱼岛是中国 的 文字所在的盒子也 和 钓鱼岛 三个字所 在的三个盒子是同行三 列 结论 1 当将 岛 所在盒子设置为右浮动 钓 和 鱼 所在盒 子设置为左浮动时 岛 所在的盒子在网 页的最右侧 而此时文 字所在的盒子在它们中 间 2 岛 所在盒子被挤 到下一行 但仍为右浮 动 结论 1 岛 所在的盒子和 鱼 所在的盒子交换 了位置 在这里给了我 们一个很重要的提示 通过使用 CSS 布局 可 以实现在 HTML 不做任 何改变的情况下 调换 盒子的位置 2 浏览器窗口变窄 同一行不能容纳两个左 浮动的盒子 所以 钓 和 岛 是垂直排列的 而右浮动的 鱼 虽在 的盒子是和 钓 所在 的盒子是同行排列的 结论 掌握设置 三个左浮 动时 网 页布局的 变化 掌右浮动 的属性 并理解浏 览器变化 时的网页 布局变化 掌握调换 盒子的方 法 在网 页布局中 是非常有 用的 哈尔滨市第一职业高级中学校 实验实验 7 1 全部向左浮动 全部向左浮动 2 浏览器窗口变窄时 网页的情况 浏览器窗口变窄时 网页的情况 3 3 floatfloat 属性小结属性小结 float 属性作用 1 定位网页元素 2 实现一行多列或混合多列的布局 float 属性使用时注意事项 1 在代码窗口中 使用英文状态下输入法进行 输入 否则无法出现正确的运行结果 2 设置之后的 CSS 样式 要使用 套用 才能 实现网页布局的效果 项目设计 项目设计 作为技术顾问 我已经把我们公司要完成的 2 个项目的主要技能要点和大家沟通完了 接下来我 们要开始进行项目设计 我们分成两个项目组 比 一比哪个项目组开发设计的快 希望大家能够加班 加点 为公司的发展而努力 项目设计讲述 项目设计讲述 请项目研发部门经理讲述设计项目的过程 知识巩固知识巩固 总总 结结 演示实验七 提出问题 1 当在 钓 所在盒子中增加 内容 然后将 钓鱼岛 三个 盒子都设置为左 浮动时 网页布 局有何变化 2 浏览器窗口 变窄的情况下 网页布局是如何 变化的 对浮动知识进行 小结 答疑 引领 提出问题 引领小结 1 钓 所在的盒子高 度增加 网页布局仍然 都是左浮动 2 浏览器窗口变窄的 情况下 岛 所在盒 子被挡住 不再继续左 浮动 而是垂直排列于 鱼 所在盒子之下 倾听 共同总结 分组制作项目设计 主发言讲述 其他人倾 听 分析回答问题 发言 进行总结 掌握盒子 高度发生 变化的情 况下 网