网页设计与制作中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元素页面布局；子任务二：与行为结合的动态效果；子任务三：与时间轴结合的动画效果。

（三）：子任务一：利用AP Div元素页面布局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、教学任务之选：在上海世博即将开幕的4月29日，我毫无理由地选择朱广跃老师的“跟着海宝看世博——应用AP Div元素制作世博宣传网页”这个主题，因为我相信学生的心情一定与我一样，对世博充满了期待和幻想。

2、课堂导入之法：“转轴拨弦三两声，未成曲调先有情。

”一个好的开头是师生间建立感情的第一座桥梁，它既能引起学生的兴趣，又能激发学生的求知欲，为整节课的学习打下良好的开头。

两位同伴在教学中分别采用情景导入和案例对比导入。

对于“跟着海宝看世博——应用AP Div 元素制作世博宣传网页”这个主题，简单扼要、充满激情的情景引入是我对本课教学的首要环节设计，避免因情景而过分情景的现象，一锤到位，既突出时政，又及时引出教学任务。

3、任务分析之调。

任务分析是整个任务驱动过程中最富理性的关键环节，应该把现实中的任务分解为具有专业技术成分的训练要求。

经过分析，任务将变成具体的要求：从任务中提炼出在教学目标中定位的主要知识和技能，并明确哪些是重点，哪些是难点。

然后通过一步步的教学，分析出解决这些难点的技术。

吸取两位同伴平白直叙式的不足，我在这一环节中强调技术的分解描述及技术的重难之处，把任务分解成四个小任务，简单直观描述小任务的技术支持和难易，从而让学生对具体操作有直观鲜明的了解。

4、示范操作之度：作为新技术点，适当的示范操作是很有必要的。

我们提倡在新技能教学时采用边讲边做法。

但什么时候演示？演示到什么度？一直是我们计算机学科教学的一个难控点。

在对所任教的学生调研中，学生希望老师不要把屏幕过多地掌控在老师手中，把课堂主动权更多交给他们；不演示不能说明问题、过多过快的演示影响学生的情绪。

示范性是关键；把握好重点和难点是尺度，不可过快过多是原则。

有了这样的演示准则以及同伴在演示过程中所带来的启发，我采用少步演示、关键强调、不断抛疑的方法，让学生有更多的空间和时间去自己探索。

5、学生实践之导：以实训为主的计算机教学，学生实践环节是学生主体行为的体现，在教师适度的演示下，学生实践性教学也是教学的一个重要环节。

我的理念是，学生实践操作过程要体现学生主体，但不能忽视老师在这个环节的引导。

教学巡视也是学法指导过程，反馈信息是关键，纠错分析是目标。

巡视的目的是发现问题，如果问题具有共性，说明教师在刚才的教学中没能解析清楚，应该及时地进行共性的纠错分析；对于部分基础较差的学生，应给予关注，可适当降低任务要求，尽量让同伴多帮助。