案例 Dreamweaver层的运用.docVIP

Dreamweaver层的运用教学案例 张东升 教材分析： 《网页制作》是计算机应用专业的一门课程。教材侧重知识点的讲解，知识综合运用少、实例也少。为此，我根据教程，结合学生的实际情况，自编了一套实例用来充实教学内容，对基于教材的教学是一个很好的延伸，《层的运用》便是其中的一例。 现在的学生都已经具备一定的计算机操作技能。在课前调查中得知，很多学生有制作自己个人主页的愿望，并十分羡慕那些已经拥有的个人主页的网友。所以，我确定了一个长期的任务——制作学生自己的个人主页，贯穿整个学期的网页制作课程教学。 ?这一节课的教学是对上节课课本内容——“创建和使用层”的一个延伸，其中还用到Photoshop对图片进行简单处理。下节课就开始课本内容——第九章“表单”的教学，这节课学习的“用图层做小拼图游戏”是本章知识点的一个综合应用。 教学目标：? [知识目标] 在了解了如何创建和使用层的基础上，进一步熟悉层，运用层做网页。 [能力目标] 恰到好处的在网页中运用层。 [情感目标] 体会层在网页制作中的神奇作用；提升兴趣。 教学重点： 层的插入、层上图片和表格的插入以及“行为”的添加。 教学难点： 拖动层行为的运用 教学方法： 任务驱动法、实例教学法 教学思路： 复习导入→设置疑问→解答疑问、学习新课→巩固练习→扩展练习→课堂讨论→布置作业 教学准备： 计算机多媒体一体化教室 教学过程：? 教师活动 学生活动 设计目的 一、 导入新课。 1、前面我们学习了如何创建和使用层，请同学们简单回忆一下；这节课我们通过一个例子进一步给同学们展示层的妙用。 （引出本节课的任务） 教师演示自己制作好的拼图游戏网页 2、在本学期开学的时候，老师就布置了一个总的学习任务就是学会网页制作，让大家能够在网上拥有自己的个人主页，那么有上网经历的同学就会发现一般个人主页上都会有“娱乐休闲”版块，我们今天的任务就是用“层”的知识做一个主页的二级页面“娱乐休闲之拼图游戏”。 3、设置疑问 用浏览器打开一个网页（事先准备好的拼图），通过鼠标拖动改变图片的位置，最后拼出完整的图样，为什么这些小图可以拖动放在一定区域的任意位置上呢？请同学们想一想用前面的知识能否实现呢？跟上节课说的“层的使用”有何联系呢？ 二、 教学新课之层的妙用： 1、图片处理 在图像处理软件photoshop中打开一幅风景图像，调整其大小到长和宽均为三的整数倍，将其分解为大小相同的9个块并分块保存。 2、制作网页 （a)?运行Dreamweaver MX 2004,新建一个HTML文件，设置网页标题，保存网页文件。 （b)?在页面上描绘9个与图像大小相同的层，然后拖动层，按照原图像分别在9个层中插入并拼好图像各部分。再描绘一个层，用于放置完整图像效果图，当前页面效果所示。 （这里教师提醒学生注意层在网页上的位置，最好为容易记忆和计算的整数，方便各层的精确对齐；请同学们用笔记下layer1的位置坐标和整个图象的大小以备后用） （c)?在页面空白处单击，确保没有任何对象选中，打开[行为]面板，单击+按钮，在下拉菜单中选择[拖动层]命令，弹出[拖动层]对话框。 （此处是本节课新增的内容——为各层添加行为，作为课本的一个补充） （d)?在对话框的[层]下拉列表中选择“层Laryer1”，单击[取得目前位置]按钮，则对话框中的显示，单击[确定]按钮。 （教师解释该对话框中“取得目前位置”的含义，请同学们想一想并回答“接近象素”后面的值表示什么意思？此处留下悬念暂时教师不给出答案，留到后面解释。） （e)?再次选择[行为]面板中的[拖动层]命令，在对话框的[层]下拉列表中选择“层Larye2”，单击[取得目前位置]按钮，对话框中的显示所示，单击[确定]按钮返回。 （f)?重复此操作，分别为层Layer3到层Layer9设置[拖动层]行为。此时，[行为]面板中的显示所示。 （g)?再描绘一个层，让层的左边距和上边距对准Layer1的左边距和上边距，层的大小刚好为完整的9张图大小。在层里面插入一个3行3列的表格，表格大小与层的大小一致，即每个单元格正好容纳一张图像。表格边框为1，填充和间距均为0。 （前面的数字记住了吗？layer1的位置坐标和整个图的大小） （h)?打乱页面上各层的位置，保存文件并在IE浏览里浏览，此时页面上除“参考图”外，其他各块图像都是可以移动的。当用户将某一块图像移动到距离正确位置50像素的范围内时，图像将自动找准位置。 （i)?（此处的50px在前面哪里设置的，可还记得？正象前面同学们回答的一样这里象素值表示当用户将某一块图像移动到距离正确位置多少像素的范围内时，图像将自动找准位置。前面你回答对了吗？） 三、课堂练习。（教师巡视，并查看学生的操作情况） 在机子里有哪些信誉好的足球投注网站合适的图片处理后，制作9块的拼图