宝典为网页添加声音-教案
为网页添加声音 教案
宜昌市水利电力学校 陈波 【教学内容】
为网页添加声音(高等教育出版社《网页制作教程》郭振欣 史红星编 第六章第一节)
【教学目标】
(1) 认知目标:了解常用声音文件的格式和特点。
(2) 能力目标:掌握为网页添加声音的多种方法。
(3) 情感目标:利用上机分组研讨,独立操作,培养学生的协作精神。 【重点】
声音文件链接和嵌入至网页中的方法
【难点】
嵌入音频文件并设置参数、“播放声音”动作的应用
【教学方法】
(1) 采用案例演示、启发式教学法。
(2) 采取由浅入深、循序渐进的教学策略:“实例讲解”?“引导思考”?“综合练习”。
【教学资源】
自制
、多媒体机房、互联网
【教学时间】
1课时(45分钟)
【教学过程】
一、导入新课及实践准备(约4分钟)
1(网页展示:
用,个互联网中的包含音乐的网页,直观的向学生展示,使学生感受音乐添加到网页中的特点。
课件准备:三个Internet快捷方式,指向互联网中包含音乐的网页。展示的网页中有两个是嵌入音频文件,显示控件面板,一个是背景音乐;音乐的格式包括.wma、.mid、.mp3。
2(了解本节将学习的内容:
一、常见音频文件的格式
二、链接到音频文件
三、嵌入音频文件
四、“播放声音”动作运用
五、添加网页背景音乐
3(实践操作准备:
指导学生下载本节练习素材,解压缩,运行Dreamweaver,新建站点(以提供的素材文件夹为
站点根目录,方便制作),为后面将进行的实践操作做好准备。 二、讲授新课与课堂练习(共约30分钟)
1(关于音频文件的格式(约4分钟)
教师:同学们知道的音频格式有哪些,
使用课件,试听不同格式的音频文件,分辨声音的差异。 教师:
因设计公司和
的不同,音频文件格式多种多样。简单介绍各自特点(更详细的说明可从互
联网查阅资料)。
音质最好的是CD(即通常所说的激光唱片),但容量太大; 最流行的是MP3,压缩程度高、音质好;
网络流行的主流音频媒体格式有.wma、.rm等;
MIDI使得人们可以利用多媒体计算机和电子乐器去创作、欣赏和研究音乐;
WAV是微软Windows本身提供的音频格式,由于Windows的影响力,这个格式已经成为了事
实上的通用音频格式。
2(添加声音至网页的两种方法:
(1)链接到音频文件:(约5分钟)
教师:
链接到音频文件是将声音添加到 Web 页面的一种简单而有效的方法。这种集成声音文件的方
法可以使访问者能够选择他们是否要收听该文件,并且使文件可用于最广范围的观众。
操作方法:与添加普通超级链接方法相同,只不过链接的是音频文件。 演示课件中相关链接,简单描述操作步骤。
学生实践一:新建html文档,保存,插入图片,输入文字,为图片和文字分别添加超级链接,
链接目标为“sound”文件夹中的不同格式的音频文件(任意选取),保存,预览,测试链接。
注意:链接到音频文件将受客户端软件的影响,出现媒体播放器播放或下载提示。
(2)嵌入音频文件(约6分钟)
教师:
嵌入音频文件是将声音直接并入页面中,可控制音量、播放器在页面上的外观或者声音文件的开始点和结束点等。
操作演示:
1)新建html页,在“插入”栏的“常用”类别中,单击“媒体”按钮,然后选择“插件”图标,在“选择文件”对话框中选择站点文件夹内的某个音频文件,调整插件宽、高,保存,预览。
2)选中插件,添加参数“autostart”,值为“false”,保存,预览。
3)选中插件,修改参数“autostart”值为“true”,添加参数“hidden”,值为“true”,保存,预
览。
学生实践二:同教师操作演示。并简单浏览课件附录,大致了解embed标签的属性参数。
注意: 客户机应具有所选声音文件的适当插件后,声音才可以播放。视频文件也可采用此方法嵌入至网页中。
备注:教师边讲解边操作,让学生观察效果,掌握网页中嵌入音频文件的方法,再加上学生
的亲身体验,突破难点。并且在教师的引导下,学生通过观察,了解插件参数设置后产生的
变化。
3(使用“播放声音”动作为网页添加声音:(约10分钟)
教师:
在Dreamweaver的“动作”中,有一项为“播放声音”,结合“第三章Dreamweaver行为”知识,能否为一张图片添加如下效果:当鼠标指针指上图片时播放音效,当点击图片后播放一段声音剪辑,
是肯定的(演示课件效果)。
学生实践三:根据课件描述,新建html页,使用练习素材进行制作。
说明:此方法实际仍使用embed标签,结合javascript脚本程序控制播放,embed标签中使用了
“hidden”属性,其值为“true”,因此控件面板未显示。
备注:学生根据课件操作步骤描述自主操作,相互交流,提高学生自学能力和意识。教师巡
视辅导,指导操作关键点,修正错误。
教师
操作关键点并演示操作。
关键步骤:
1)选取将添加行为的对象;2)添加“播放声音”动作;3)改变动作的触发事件。
4(添加网页背景音乐:(约5分钟)
教师:
经过以上三个实践操作后,同学们思考一下,能否灵活运用以上方法为网页添加背景音乐,
提示:所谓背景音乐,即表示音频文件自动播放并且不会在页面中显示。
操作演示:
方法一:使用插件,改变插件“宽”、“高”属性值均为“0”,增加参数“hidden”,值为“true”,以隐藏控件面板;增加参数“loop”,值为“true”,以循环播放;增加参数“autostart”,值为“true”,以自动播放(不加改参数默认也为自动播放)。
方法二:在代码视图中,添加html代码“
”。其中,src属性表示音乐文件的路径,loop=表示音乐循环播放次数,值为“-1”表示无限循环,如果要设置播放次数,则改为相应的数字即可。
学生实践四:根据教师演示和课件描述,新建html页,使用练习素材进行制作。重点理解参
数作用及代码视图中对代码的编辑方法。
注意:Dreamweaver中对代码的编辑也很方便,有代码提示功能,简单了解并掌握基本的代码编辑方法。
备注:方法一为引导学生查阅embed标签的属性参数作用后,得出操作思路,以提高学生运
用知识的能力,再由学生描述、教师操作进行验证。方法二由教师演示操作,学生按照课件
操作提示进行操作。
三、思考与练习(约8分钟)
1(使用“播放声音”动作,为网页添加背景音乐。
提示:选取对象为“body”(网页),动作为“播放声音”,事件为“onLoad”(加载)。
备注:利用以前所学的知识,结合本次课程内容,利用多种方法实现同一目标,促使学生对
知识融会贯通,灵活运用,充分发挥学生的主动性,培养学生的创新精神。
2(如果我喜欢一首歌曲,它已经存在于另一个网站的某张网页的链接之中,我能否仅链接到它而不用提供我自己的文件,
课件显示解答,学生探索后,教师指导进行示范:1)插件源文件路径使用URL;2)合理方法:链接至该网页。
学生实践五:新建html页,使用外部网站中的音频文件作为网页背景音乐。
四、小结(约3分钟)