第14课 锦上添花——用层制作网页特效 教案

第14课 锦上添花———用层制作网页特效 教案 教学目标 1、知识与技能: 学会关于层的基本操作,掌握层行为的添加,时间轴的使用。 2、过程与方法: 能在网页制作中运用层来丰富自己的网页。 3、情感态度与价值观: 体会层在网页制作中的神奇作用;增强表达信息的兴趣。 学情分析 学生已经具备一定的计算机操作技能和自主学习能力,学生已经学习了制作电子作品的大部分内容,能够创作并规划自已的网页,本节内容能让网页富有动感,使自己的网页更吸引人,相信学生会非常感兴趣。因此,从这些学生的具体情况出发,给他们创造自主探究的条件,让他们在感兴趣的游戏制作中提高网页制作的水平,实现本课教学目的。21世纪教育网版权所有 重点难点 重点: 层的基本操作以及层在网页中的运用。 难点: 理解层的作用并能灵活运用 教学课时 1课时 教学过程 教学活动 活动1【活动】 一、激趣导入 在学习新课之前我请大家先玩儿一个游戏。 大家知道这个拼图游戏是怎样制作的吗?这个游戏运用了Dreamweaver中层的功能,今天我们就来学习关于层的知识。学生用浏览器打开一个网页(事先准备好的拼图),通过鼠标拖动改变图片的位置,最后拼出完整的图样。 活动2【活动】 二、初步尝试 教师提供学习资料,学生自学了解什么是层。回答问题 设计意图:让学生先对层有一个浅层次的认识,通过下面的学习逐步了解层的作用。 任务一:制作拼图游戏 刚才的拼图游戏是怎样实现的呢? 教师演示主要步骤 设计意图:拼图游戏的制作有一定难度,教师演示重点步骤,利于学生快速掌握要领。 基本功能实现: 1、插入三行三列表格(表格边框为1,填充和间距均为0),依次按顺序插入拼图素材小图片 2、选中九个单元格,修改/转换/表格到层 3、依次为每个层添加层行为(层拖动)选中“取得目前位置”, “接近像素”后面的值表示什么意思?后面再回答这个问题。 4、打乱顺序,将层分别拖动到别处 5、在开始位置插入一个3行3列表格,作为目标位置。 刚才“接近像素”后面的值表示什么意思?(默认50) 设计意图:这个值在后面测试网页时学生会很容易理解,在这里不解释,让学生通过自己实践去获得。 发现了什么问题? 拖动图片放入表格时位置不符,可以看出表格不好定位,把表换成层试试? 删除表格插入一个层,在层里面插入一个3行3列的表格,表格大小与层的大小一致,即每个单元格正好容纳一张图像。表格边框为1,填充和间距均为0。 展示学生制作成果。 得出结论:层可以很方便在页面中定位。 设计意图:学生自己操作发现问题,解决问题从而得出结论。通过这一过程学生会对所学记忆深刻。 活动3【活动】 三、知识拓展 学生任选一个任务完成: 教师提供相应素材和帮助文件 任务二:层的显示与隐藏 插入一副图像,当鼠标移动到“拼图游戏提示”几个字时,出现拼图答案的小图像,鼠标移出文字时,图像消失。21教育网 教师提供方法 为层添加不同的行为就会使层有不同的功能, 任务三:网页上游动的对象 小卡通图片或同学们自己感兴趣的小图片在页面上循环游动。 教师巡回指导,随时了解学生操作情况 完成任务的同学进行网页测试并上传任务。 能力强的同学可以完成两个任务。 设计意图:学生已经具备了一定的自主学习能力。这里让学生自主选择自己感兴趣的任务更能激发他们的创作热情,同时提升自己的自主学习能力。 活动4【活动】 四、教学评价 作品评价: 让两个同学分别展示不同任务,总结层的作用:可以使用层来设计页面的布局;利用层可以更好的定位;利用层可以非常灵活地放置内容。21cnjy.com 整体评价: 1、学生课堂表现 2、学生任务完成情况 3、最后学生上传作品情况 ... ...