网页设计与制作中AP元素

1、标准文档网页设计与制作中 AP Div元素的应用课例 " iMh上海市城市科技学校金卫萍1一、本节课的目的 4 彳网页设计与制作课程中 AP Div元素是一种网页元素的定位技术，使用AP Div元素可以以像：素为单位精确定位页面元素，AP Div元素可以放置在页面的任意位置，使用户对页面操作的布局更J加轻松。本节课主要让学生掌握 AP Div元素的定位方法，多个元素的重叠，显示或隐藏，与时间轴 配合使用的动画效果等。 本节课以任务为引领， 结合引导发现法和探究研讨法进行教学，让学生自主参与知识的产生、发展与形成的过程，培养学生自主学习的习惯。 彳二、作为支撑的课题研究主要内容 . I

2、 本节课作为区级课题新课标背景下信息类课程教师主导教学行为行动研究一次行动研究，主要探究教师在课堂上的主导行为对教学实效的作用。并且进行同课异构教学研讨。在新课标理念引领下，通过本课题的实践研究，目的在于证明信息类专业教师课堂主导教学行为:的重要性以及艰巨性。树立学生主体的教育理念，找出信息类课程学生主体与教师主导的平衡点。针对中职学生的学习基础及情感态度，探索教师主导行为的常规方法和创新手段，通过交流反馈，在教学中推广实践。重视学生操作实践，在学生的实践中抓住教师主导行为这一主旋律，展示新课标背景 下中职信息类专业教师的风采。三、教学方法本次课是在前面两位同学科教师同课异构教学研讨基础上的进

3、一步教学提升。从应用出发设立情景，通过任务引领和互动教学体现教师主导学生主体，增强学生对所学技能的认识。 以学生为中心来组织教学，要求学生由被动的听讲变为主动的思考。本着这样的主导思想，本节课由5个主要教学环节组成：观察、实践、归纳、验证、应用。目的是让学生自主参与知识的产生、发展与形成的过程。通过不断的提问，激发学生积极思考问题，让学生主动提出疑问，主动回答老师的问题，调动学生的积极性。可以总结为6句话：牵住学生不放手，师生互动齐步走；发现厌烦换一招，设置陷阱有成效；循序渐进有繁简，综合问题最后练。将“示范操作”与“学生实训”两个环节交叉，分段进行，以便增强师生互动。老师在学生操作期间，注意

4、巡视，对不同学生进行个性辅导，体现分层教学思想，并发现个性问题，做到既解决共性问题，又不忽略个别学生，而且能够妥善将个性问题引申到共性知识上，做到循序渐进，同步教学。四、学情分析本次教学对象为30941电子信息技术专业二年级学生，经过大半年的教学接触，培养了良好的师生情感，对于专业问题的解决已经具备一定的分析能力，已经具有较好的概括能力， 该班级学风整体相对较好。但是，学生平时代码接触不多，因此创设情景，激发学生兴趣，消除他们对代码的“恐惧”心理，调动他们学习和探究的主动性、积极性，显得尤其重要。五、教学目标根据本节的教学内容、教学大纲要求能掌握AP Div元素的用途、创建、属性设置；使用行为

5、实现层的动态效果，结合学生现有的知识水平和理解能力，确定本节教学目标如下：1、知识和技能目标(1) 了解AP Div的网页布局方法及优点。(2)在AP Div中加入文本，图像，表单等元素。(3)用AP Div元素与行为结合实现显示或隐藏等效果(如小图片的预览效果)。(4)与时间轴结合实现动画效果。2、德育目标1、培养学生认真观察，勤于思考的学习态度；2、加强学生对世博的内在情感，达到德育教育时效。六、教学重点、难点针对教材内容以及学生的实际情况，确立：六、教学重难点教学重点：1、AP Div的布局功能2、AP Div的坐标，Z轴，溢出等属性参数的设置。3、与行为结合，实现显示或隐藏内容的功能。

6、4、与时间轴结合，实现动画效果。教学难点：1、理解AP Div元素Z轴属性的原理。2、与行为结合，实现 AP Div元素的显示或隐藏。七、教学设计教学过程教师活动预设（教学知识点）学生活动预设设计意图课题引入由世博会马上在上海开幕，引出给世博会做场馆介绍的任务，展示本节课的任务。观看并感受作品魅力，思考如何做。热点时事作为项 目背景，调动学 生的积极性，引 发兴趣。任务分析网页上有交互和动画效果，可以分解为三个子任务：子任务一：利用 AP Div元素页面布局；听讲，对完成任务有个大概思路。分解任务有利于学生理解任务步骤。子任务三：与时间轴结合的动画效果；子任务二：与行为结合的动态效果。子任务1

7、实例演示与讲解，用 AP Div元素加入文字和图片并排版；巡视指导学生任务的完成情况；先完成的学生思考多元素对齐的方法。观察，实训，并思考AP Div元 素排版的特点。AP Div元素的概念，属性及布局网页优点。子任务2提问：Flash中此动画的实现方法？AP Div元素与时间轴结合实现动画效果；巡视并个别辅导学生；典型错误分析，巩固知识点。同学展示成果，欣赏评价，并提 出改进意见，对 优秀作品鼓励。培养学生归纳总 结能力，培养学 生取长补短的良 好品质。子任务3在子任务1的基础上，引出下面任务；让学生先尝试放入四个大图片；讲解并演示：与行为结合实现交互效果；反馈交流，现场解决问题，有立竿见影

8、的效果。学生先摸索两 层元素的叠加 的方法。学生操作与老师 讲授结合突破难 点。小结作品评价小结。作业布置拼图游戏。八、教学内容（一）、课题引入展示本节课的内容，交互图片和动画效果，吸引住同学的注意力，并让同学思考用传统方法可 以解决吗？引出本节课的内容。（二）、任务分析网页上有交互和动画效果，可以分解为三个子任务：子任务一：利用 APDiv元素页面布局；子 任务二：与行为结合的动态效果；子任务三：与时间轴结合的动画效果。（三）：子任务一：利用 AP Div元素页面布局1、知识铺垫：AP Div的定义及特性a） 所谓AP Div ,是指存放文本、图像、表单和插件等网页内容的容器，可以想象成是一

9、张一张叠加起来的透明胶片，每张透明胶片上都有不同的画面，它用来控制浏览 器窗口中网页内容的位置、层次。b） 特性：AP Div最主要的特性就是它是浮动在网页内容之上的；也就是说，可以在（不影响其他网页元素情况下）网页上任意改变其位置，实现对 AP Div的准确定位； 把页面元素放入AP Div中可以使用户对页面操作的布局更加轻松。c） AP Div元素还有一些其他的重要特性。AP Div元素可以重叠，所以在网页中可以实现网页内容的重叠效果（如立体字）；AP Div元素还可以被显示或隐藏，可以实现网页导航中的下拉菜单，图片的可控显示或隐藏；还可以通过应用时间轴使其移动和变换， 这样在层中旋转一些

10、图片或文本，就能够实现动画效果。2、技术解析：掌握创建 AP Div元素，在AP Div元素中插入其他元素及修饰 AP Div元素的方法。国家馆预览帼馆 印度馆 巴醯 英国博3、步骤提示：(1)将光标放在文档插入点，在“布局”面板中单击“绘制 AP Div”按钮。(2)在文档窗口中拖动画出 AP Div元素，按住Ctrl可画多个AP Div元素。(3)每个AP Div元素中添加相应的文字和图片。(4)为元素命名并调整好各元素的位置，可以通过菜单“修改”一“排列顺序”命名操作。有情提示：可以通过复制、粘贴，快速制作出多个类似的AP Div元素。(四)：子任务二：请出海宝，与时间轴结合的动画效果1

11、、技术解析：AP Div元素与时间轴结合实现动画效果。实用文案国家馆预览帼糖 印雕 « 英国糖2、步骤提示：(1)添加AP Div元素"haibao ”,并加入海宝图片。(2)通过“窗口”菜单，调出时间轴。(3)把"haibao"元素拖动到时间轴上。(4)右击时间轴，选择“记录 AP元素的路径”命令，拖动海宝在屏幕中移动。(5)选中时间轴上的“自动播放”和“循环”按钮。(五)：子任务三：与行为结合的交互效果/隐藏元素结1、技术解析：AP Div元素属性的一个重要功能就是显示 /隐藏功能，与“行为”中显示合并利用光标的OnMouseOver和OnMouse

12、Out事件制作出交互效果。国家馆预览中国糖 印瓢 巳西糖 更撕2、步骤提示:(1)插入四个AP Div元素并命名，在其中加入对应的四张大图片。(2)同时选中新加入的四元素和“ kuang”元素，通过修改菜单调整它们的位置相同。(3)在AP元素面板中把"kuang"元素拖到四元素的上面，达到挡板的作用。(4)设置AP Div元素的可见性让四个大图片先隐藏。(5)通过菜单“窗口” 一 “行为”调出行为面板，选中“ zgt”，单击+,显示/隐藏元素，选 中"zgd "元素单击显示，确定；并把行为的触发条件改为" onMouseOver ；实现效果光标

13、放在中国 馆的小图像上，在框内出现中国馆的大图片。(6)通过菜单“窗口”调出行为面板，选中“ zgt”，单击+,显示/隐藏元素，选中“ zgd "单 击隐藏，确定；并把行为的触发条件改为“onMouseOut”。实现光标离开中国馆的小图像上，在框内中国馆的大图片消失的效果。同样方法：做出其他展馆。(六)、思考题：海宝拼图游戏。九、教学反思：一个人的公开课（一）、行动起源作为本人课堂研究室信息专业团队本学期的一个展示活动，我所带的专业团队朱广跃和胡淮宁两位老师于4月28日上午进行了 “同课异构”区级教学研讨展示课，并于课后进行“同课异构”校 本研讨交流。两位任课老师是我专业教学的互助同

14、伴，也同步参与了正在进行的共同体研修课题职教“做学一体”模式下有效教学行动研究。同样的教学内容，相似的教学目标，共同的教学理念（任 务引领，做学一体），不同的教学任务，不同的教学引入，不同的教学环节，当然也会产生不一样的 教学实效。那么作为这个团队的引领者，作为这门课程的任课者，作为有效教学的课题研究者，在完 成“同课异构”的研讨后，我有一个强烈的冲动，那就是在课例研讨的基础上，再一次进行本课题的“同课异构”。带着这份冲动，我在 4月29日上午的教学中进行了一次一个人（无听课老师）的公 开课之旅。（二）、行动之旅1、教学任务之选：在上海世博即将开幕的 4月29日，我毫无理由地选择朱广跃老师的“

15、跟着海宝看世博应用AP Div元素制作世博宣传网页”这个主题，因为我相信学生的心情一定与我一样， 对世博充满了期待和幻想。2、课堂导入之法：“转轴拨弦三两声，未成曲调先有情。” 一个好的开头是师生间建立感情的第一座桥梁，它既能引起学生的兴趣，又能激发学生的求知欲，为整节课的学习打下良好的开头。两位同伴在教学中分别采用情景导入和案例对比导入。对于“跟着海宝看世博应用AP Div元素制作世博宣传网页”这个主题，简单扼要、充满激情的情景引入是我对本课教学的首要环节设计，避免因 情景而过分情景的现象，一锤到位，既突出时政，又及时引出教学任务。3、任务分析之调。 任务分析是整个任务驱动过程中最富理性的关

16、键环节，应该把现实中的任务分解 为具有专业技术成分的训练要求。经过分析，任务将变成具体的要求：从任务中提炼出在教学目标中 定位的主要知识和技能，并明确哪些是重点，哪些是难点。然后通过一步步的教学，分析出解决这些难点的技术。吸取两位同伴平白直叙式的不足，我在这一环节中强调技术的分解描述及技术的重难之 处，把任务分解成四个小任务，简单直观描述小任务的技术支持和难易，从而让学生对具体操作有直观鲜明的了解。4、示范操作之度： 作为新技术点，适当的示范操作是很有必要的。我们提倡在新技能教学时采用边讲边做法。但什么时候演示？演示到什么度？ 一直是我们计算机学科教学的一个难控点。在对所任教的学生调研中，学生

17、希望老师不要把屏幕过多地掌控在老师手中， 把课堂主动权更多交给他们； 不演 示不能说明问题、过多过快的演示影响学生的情绪。示范性是关键；把握好重点和难点是尺度，不可过快过多是原则。有了这样的演示准则以及同伴在演示过程中所带来的启发，我采用少步演示、关键强调、不断抛疑的方法，让学生有更多的空间和时间去自己探索。5、学生实践之导：以实训为主的计算机教学，学生实践环节是学生主体行为的体现，在教师适度的演示下，学生实践性教学也是教学的一个重要环节。我的理念是，学生实践操作过程要体现学生主体，但不能忽视老师在这个环节的引导。教学巡视也是学法指导过程， 反馈信息是关键，纠错分析是目标。巡视的目的是发现问题

18、， 如果问题具有共性，说明教师在刚才的教学中没能解析清楚，应该及时地进行共性的纠错分析；对于部分基础较差的学生，应给予关注，可适当降低任务要求，尽量让同伴多帮 助。由于长期采取小组合作、同伴互助实践模式，我发现很多个性化的问题以同伴互助形式完全能解 决，老师的主要任务是解决技术的主要问题。6、课堂评价之法。 课堂总结是课堂教学很重要的一个环节，它是教师引导学生对一节课学习内容等 情况的总结与反思。如今的很多课堂总结，似乎都有一定的模式。好多老师都喜欢用“通过这节课的 学习，你学到了些什么？”“通过这节课的学习，你有什么收获？”。说实话，在我平时的课堂教学中，也是经常这样来进行课堂小结的，两位同伴也未能在他们的总结中突破这种常用模式。突破这种条例式语言归纳是我对自己的新挑战。任务检测评价是目前计算机学科教学所提倡的，所以我以巡视中发现的学生中有典型问题或有积极创意的作品作为课堂评价的典型案例，由此强调概念和技术。（三）、行动后记教学向来是“遗憾的艺术”，真正的教学实践者，永远会有“如果再回到从前”的感慨。在两 位同伴教学实践基础上的“一个人的公开课”，课后还是有许多的遗憾。在这些遗憾中，有的是纯技 术问题，更多的是对计算机学科教