第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、最后学生上传作品情况