网页设计与制作中AP元素

网页设计与制作中网页设计与制作中 AP Div 元素的应用 课例 上海市城市科技学校 金卫萍 一 本节课的目的一 本节课的目的 网页设计与制作 课程中 AP Div 元素是一种网页元素的定位技术 使用 AP Div 元素可以 以像素为单位精确定位页面元素 AP Div 元素可以放置在页面的任意位置 使用户对页面操作 的布局更加轻松 本节课主要让学生掌握 AP Div 元素的定位方法 多个元素的重叠 显示或隐 藏 与时间轴配合使用的动画效果等 本节课以任务为引领 结合引导发现法和探究研讨法进行 教学 让学生自主参与知识的产生 发展与形成的过程 培养学生自主学习的习惯 二 作为支撑的课题研究主要内容二 作为支撑的课题研究主要内容 本节课作为区级课题 新课标背景下信息类课程教师主导教学行为行动研究 一次行动研 究 主要探究教师在课堂上的主导行为对教学实效的作用 并且进行同课异构教学研讨 在新课标理念引领下 通过本课题的实践研究 目的在于证明信息类专业教师课堂主导教学 行为的重要性以及艰巨性 树立学生主体的教育理念 找出信息类课程学生主体与教师主导的平 衡点 针对中职学生的学习基础及情感态度 探索教师主导行为的常规方法和创新手段 通过交 流反馈 在教学中推广实践 重视学生操作实践 在学生的实践中抓住教师主导行为这一主旋律 展示新课标背景下中职信息类专业教师的风采 三 教学方法三 教学方法 本次课是在前面两位同学科教师同课异构教学研讨基础上的进一步教学提升 从应用出发 设立情景 通过任务引领和互动教学体现教师主导学生主体 增强学生对所学技能的认识 以学 生为中心来组织教学 要求学生由被动的听讲变为主动的思考 本着这样的主导思想 本节课由 5 个主要教学环节组成 观察 实践 归纳 验证 应用 目的是让学生自主参与知识的产生 发展与形成的过程 通过不断的提问 激发学生积极思考问题 让学生主动提出疑问 主动回答 老师的问题 调动学生的积极性 可以总结为 6 句话 牵住学生不放手 师生互动齐步走 发现 厌烦换一招 设置陷阱有成效 循序渐进有繁简 综合问题最后练 将 示范操作 与 学生实训 两个环节交叉 分段进行 以便增强师生互动 老师在学 生操作期间 注意巡视 对不同学生进行个性辅导 体现分层教学思想 并发现个性问题 做到 既解决共性问题 又不忽略个别学生 而且能够妥善将个性问题引申到共性知识上 做到循序渐 进 同步教学 四 学情分析四 学情分析 本次教学对象为 30941 电子信息技术专业二年级学生 经过大半年的教学接触 培养了良 好的师生情感 对于专业问题的解决已经具备一定的分析能力 已经具有较好的概括能力 该班 级学风整体相对较好 但是 学生平时代码接触不多 因此创设情景 激发学生兴趣 消除他们 对代码的 恐惧 心理 调动他们学习和探究的主动性 积极性 显得尤其重要 五 教学目标五 教学目标 根据本节的教学内容 教学大纲要求能掌握 AP Div 元素的用途 创建 属性设置 使用行为实现层的动态效果 结合学生现有的知识水平和理解能力 确定本节教学目标如 下 1 知识和技能目标 1 了解 AP Div 的网页布局方法及优点 2 在 AP Div 中加入文本 图像 表单等元素 3 用 AP Div 元素与行为结合实现显示或隐藏等效果 如小图片的预览效果 4 与时间轴结合实现动画效果 2 德育目标 1 培养学生认真观察 勤于思考的学习态度 2 加强学生对世博的内在情感 达到德育教育时效 六 教学重点 难点 针对教材内容以及学生的实际情况 确立 六 教学重难点六 教学重难点 教学重点 1 AP Div 的布局功能 2 AP Div 的坐标 Z 轴 溢出等属性参数的设置 3 与行为结合 实现显示或隐藏内容的功能 4 与时间轴结合 实现动画效果 教学难点 1 理解 AP Div 元素 Z 轴属性的原理 2 与行为结合 实现 AP Div 元素的显示或隐藏 七 教学设计七 教学设计 教学过程教师活动预设 教学知识点 学生活动预设设计意图 课题引入 由世博会马上在上海开幕 引出给世博会 做场馆介绍的任务 展示本节课的任务 观看并感受作 品魅力 思考 如何做 热点时事作为项 目背景 调动学 生的积极性 引 发兴趣 任务分析 网页上有交互和动画效果 可以分解为三 个子任务 听讲 对完成 任务有个大概 思路 分解任务有利于 学生理解任务步 骤 子任务一 利用 AP Div 元素页面布局 子任务三 与时间轴结合的动画效果 子任务二 与行为结合的动态效果 子任务 1 实例演示与讲解 用 AP Div 元素加入文 字和图片并排版 巡视指导学生任务的完成情况 先完成的学生思考多元素对齐的方法 观察 实训 并思考 AP Div 元素排版的特 点 AP Div 元素的 概念 属性及布 局网页优点 子任务 2 提问 Flash 中此动画的实现方法 AP Div 元素与时间轴结合实现动画效果 巡视并个别辅导学生 典型错误分析 巩固知识点 同学展示成果 欣赏评价 并 提出改进意见 对优秀作品鼓 励 培养学生归纳总 结能力 培养学 生取长补短的良 好品质 子任务 3 在子任务 1 的基础上 引出下面任务 让学生先尝试放入四个大图片 讲解并演示 与行为结合实现交互效果 反馈交流 现场解决问题 有立竿见影的 效果 学生先摸索两 层元素的叠加 的方法 学生操作与老师 讲授结合突破难 点 小 结作品评价小结 作业布置拼图游戏 八 教学内容八 教学内容 一 课题引入 一 课题引入 展示本节课的内容 交互图片和动画效果 吸引住同学的注意力 并让同学思考用传统方 法可以解决吗 引出本节课的内容 二 任务分析 二 任务分析 网页上有交互和动画效果 可以分解为三个子任务 子任务一 利用 AP Div 元素页面布局 子任务二 与行为结合的动态效果 子任务三 与时间轴结合的动画效果 三 子任务一 利用 三 子任务一 利用 APAP DivDiv 元素页面布局元素页面布局 1 知识铺垫 AP Div 的定义及特性 a 所谓 AP Div 是指存放文本 图像 表单和插件等网页内容的容器 可以想象成是 一张一张叠加起来的透明胶片 每张透明胶片上都有不同的画面 它用来控制浏览器 窗口中网页内容的位置 层次 b 特性 AP Div 最主要的特性就是它是浮动在网页内容之上的 也就是说 可以在 不影响其他网页元素情况下 网页上任意改变其位置 实现对 AP Div 的准确定位 把页面元素放入 AP Div 中可以使用户对页面操作的布局更加轻松 c AP Div 元素还有一些其他的重要特性 AP Div 元素可以重叠 所以在网页中可以实 现网页内容的重叠效果 如立体字 AP Div 元素还可以被显示或隐藏 可以实现网 页导航中的下拉菜单 图片的可控显示或隐藏 还可以通过应用时间轴使其移动和变 换 这样在层中旋转一些图片或文本 就能够实现动画效果 2 技术解析 掌握创建 AP Div 元素 在 AP Div 元素中插入其他元素及修饰 AP Div 元素的方法 3 步骤提示 1 将光标放在文档插入点 在 布局 面板中单击 绘制 AP Div 按钮 2 在文档窗口中拖动画出 AP Div 元素 按住 Ctrl 可画多个 AP Div 元素 3 每个 AP Div 元素中添加相应的文字和图片 4 为元素命名并调整好各元素的位置 可以通过菜单 修改 排列顺序 命名操作 有情提示有情提示 可以通过复制 粘贴 快速制作出多个类似的 AP Div 元素 四 子任务二 请出海宝 与时间轴结合的动画效果 四 子任务二 请出海宝 与时间轴结合的动画效果 1 技术解析 AP Div 元素与时间轴结合实现动画效果 2 步骤提示 1 添加 AP Div 元素 haibao 并加入海宝图片 2 通过 窗口 菜单 调出时间轴 3 把 haibao 元素拖动到时间轴上 4 右击时间轴 选择 记录 AP 元素的路径 命令 拖动海宝在屏幕中移动 5 选中时间轴上的 自动播放 和 循环 按钮 五 子任务三 与行为结合的交互效果 五 子任务三 与行为结合的交互效果 1 技术解析 AP Div 元素属性的一个重要功能就是显示 隐藏功能 与 行为 中显示 隐藏元 素结合并利用光标的 OnMouseOver 和 OnMouseOut 事件制作出交互效果 2 步骤提示 1 插入四个 AP Div 元素并命名 在其中加入对应的四张大图片 2 同时选中新加入的四元素和 kuang 元素 通过修改菜单调整它们的位置相同 3 在 AP 元素面板中把 kuang 元素拖到四元素的上面 达到挡板的作用 4 设置 AP Div 元素的可见性让四个大图片先隐藏 5 通过菜单 窗口 行为 调出行为面板 选中 zgt 单击 显示 隐藏元素 选中 zgd 元素单击显示 确定 并把行为的触发条件改为 onMouseOver 实现效果光标放 在中国馆的小图像上 在框内出现中国馆的大图片 6 通过菜单 窗口 调出行为面板 选中 zgt 单击 显示 隐藏元素 选中 zgd 单击隐藏 确定 并把行为的触发条件改为 onMouseOut 实现光标离开中国馆的小 图像上 在框内中国馆的大图片消失的效果 同样方法 做出其他展馆 六 思考题 六 思考题 海宝拼图游戏 九 教学反思 一个人的公开课九 教学反思 一个人的公开课 一 行动起源 一 行动起源 作为本人课堂研究室信息专业团队本学期的一个展示活动 我所带的专业团队朱广跃和胡 淮宁两位老师于 4 月 28 日上午进行了 同课异构 区级教学研讨展示课 并于课后进行 同课 异构 校本研讨交流 两位任课老师是我专业教学的互助同伴 也同步参与了正在进行的共同体 研修课题 职教 做学一体 模式下有效教学行动研究 同样的教学内容 相似的教学目标 共同的教学理念 任务引领 做学一体 不同的教学任务 不同的教学引入 不同的教学环节 当然也会产生不一样的教学实效 那么作为这个团队的引领者 作为这门课程的任课者 作为有 效教学的课题研究者 在完成 同课异构 的研讨后 我有一个强烈的冲动 那就是在课例研讨 的基础上 再一次进行本课题的 同课异构 带着这份冲动 我在 4 月 29 日上午的教学中进 行了一次一个人 无听课老师 的公开课之旅 二 行动之旅 二 行动之旅 1 1 教学任务之选 教学任务之选 在上海世博即将开幕的 4 月 29 日 我毫无理由地选择朱广跃老师的 跟着海 宝看世博 应用应用 AP Div 元素制作世博宣传网页 这个主题 因为我相信学生的心情一定与我 一样 对世博充满了期待和幻想 2 2 课堂导入之法 课堂导入之法 转轴拨弦三两声 未成曲调先有情 一个好的开头是师生间建立感情的第 一座桥梁 它既能引起学生的兴趣 又能激发学生的求知欲 为整节课的学习打下良好的开头 两位同伴在教学中分别采用情景导入和案例对比导入 对于 跟着海宝看世博 应用应用 AP Div 元素制作世博宣传网页 这个主题 简单扼要 充满激情的情景引入是我对本课教学的首要环节 设计 避免因情景而过分情景的现象 一锤到位 既突出时政 又及时引出教学任务 3 3 任务分析之调 任务分析之调 任务分析是整个任务驱动过程中最富理性的关键环节 应该把现实中的任务 分解为具有专业技术成分的训练要求 经过分析 任务将变成具体的要求 从任务中提炼出在教 学目标中定位的主要知识和技能 并明确哪些是重点 哪些是难点 然后通过一步步的教学 分 析出解决这些难点的技术 吸取两位同伴平白直叙式的不足 我在这一环节中强调技术的分解描 述及技术的重难之处 把任务分解成四个小任务 简单直观描述小任务的技术支持和难易 从而 让学生对具体操作有直观鲜明的了解 4 4 示范操作之度 示范操作之度 作为新技术点 适当的示范操作是很有必要的 我们提倡在新技能教学时采 用边讲边做法 但什么时候演示 演示到什么度 一直是我们计算机学科教学的一个难控点 在 对所任教的学生调研中 学生希望老师不要把屏幕过多地掌控在老师手中 把课堂主动权更多交 给他们 不演示不能说明问题 过多过快的演示影响学生的情绪 示范性是关键 把握好重点和 难点是尺度 不可过快过多是原则 有了这样的演示准则以及同伴在演示过程中所带来的启发 我采用少步演示 关键强调 不断抛疑的方法 让学生有更多的空间和时间去自己探索 5 5 学生实践之导 学生实践之导 以实训为主的计算机教学 学生实践环节是学生主体行为的体现 在教师适 度的演示下 学生实践性教学也是教学的一个重要环节 我的理念是 学生实践操作过程要体现 学生主体 但不能忽视老师在这个环节的引导 教学巡视也是学法指导过程 反馈信息是关键 纠错分析是目标 巡视的目的是发现问题 如果问题具有共性 说明教师在刚才的教学中没能解 析清楚 应该及时地进行共性的纠错分析 对于部分基础较差的学生 应给予关注 可适当降低 任务要求 尽量让同伴多帮助 由于长期采取小组合作 同伴互助实践模式 我发现很多个性化 的问题以同伴互助形式完全能解决 老师的主要任务是解决技术的主要问题 6 6 课堂评价之法 课堂评价之法 课堂总结是课堂教学很重要的一个环节 它是教师引导学生对一节课学习内 容等情况的总结与反思 如今的很多课堂总结 似乎都有一定的模式 好多老师都喜欢用 通过 这节课的学习 你学到了些什么 通过这节课的学习 你有什么收获 说实话 在我平 时的课堂教学中 也是经常这样来进行课堂小结的 两位同伴也未能在他们的总结中突破这种常 用模式 突破这种条例式语言归纳是我对自己的新挑战 任务检测评价是目前计算机学科教学所 提倡的 所以我以巡视中发现的学生中有典型问题或有积极创意的作品作为课堂评价的典型案例 由此强调概念和技术 三 行动后记 三 行动后记 教学向来是 遗憾的艺术 真正的教学实践者 永远会有 如果再回到从前 的感慨 在两位同伴教学实践基础上的 一个人的公开课 课后还是有许多的遗憾 在这些遗憾中 有 的是纯技术问题 更