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