2022年为网页添加声音-教案

1、名师精编 优秀教案为网页添加声音 教案宜昌市水利电力学校 陈波【教学内容】为网页添加声音（高等训练出版社网页制作教程郭振欣史红星编第六章第一节）【教学目标】1 认知目标：明白常用声音文件的格式和特点；2 才能目标：把握为网页添加声音的多种方法；3 情感目标：利用上机分组研讨,独立操作,培育同学的协作精神；【重点】声音文件链接和嵌入至网页中的方法【难点】嵌入音频文件并设置参数、“ 播放声音” 动作的应用【教学方法】1采纳案例演示、启示式教学法；“ 实例讲解” “ 引导摸索” “ 综合练习”；2实行由浅入深、循序渐进的教学策略：【教学资源】自制课件、多媒体机房、互联网【教学时间】1 课时（ 45

2、分钟）【教学过程】一、导入新课及实践预备（约 4 分钟）1网页展现：用个互联网中的包含音乐的网页,直观的向同学展现,使同学感受音乐添加到网页中的特点；课件预备： 三个 Internet 快捷方式, 指向互联网中包含音乐的网页；展现的网页中有两个是嵌入音频文件,显示控件面板,一个是背景音乐；音乐的格式包括 2明白本节将学习的内容：.wma、.mid、.mp3；一、常见音频文件的格式 二、链接到音频文件 三、嵌入音频文件 四、 “播放声音 ”动作运用 五、添加网页背景音乐名师精编 优秀教案3实践操作预备：指导同学下载本节练习素材,解压缩,运行Dreamweaver,新建站点（以供应的素材文件夹为站

3、点根目录,便利制作） ,为后面将进行的实践操作做好预备；二、讲授新课与课堂练习（共约 30 分钟）1关于音频文件的格式（约 4 分钟）老师：同学们知道的音频格式有哪些？使用课件,试听不同格式的音频文件,辨论声音的差异；老师：因设计公司和标准的不同,音频文件格式多种多样；简洁介绍各自特点（更具体的说明可从互联网查阅资料） ；音质最好的是 CD（即通常所说的激光唱片）,但容量太大；最流行的是 MP3,压缩程度高、音质好；网络流行的主流音频媒体格式有 .wma、.rm 等；MIDI 使得人们可以利用多媒体运算机和电子乐器去创作、观赏和讨论音乐；WAV 是微软 Windows 本身供应的音频格式,由于

4、 实上的通用音频格式；2添加声音至网页的两种方法：（ 1）链接到音频文件： （约 5 分钟）老师：Windows 的影响力,这个格式已经成为了事链接到音频文件是将声音添加到 Web 页面的一种简洁而有效的方法；这种集成声音文件的方 法可以使拜访者能够挑选他们是否要收听该文件,并且使文件可用于最广范畴的观众；操作方法：与添加一般超级链接方法相同,只不过链接的是音频文件；演示课件中相关链接,简洁描述操作步骤；同学实践一： 新建 html 文档, 储存, 插入图片, 输入文字, 为图片和文字分别添加超级链接,链接目标为“sound” 文件夹中的不同格式的音频文件（任意选取）,储存,预览,测试链接；留

5、意：链接到音频文件将受客户端软件的影响,显现媒体播放器播放或下载提示；（ 2）嵌入音频文件（约 6 分钟）老师：嵌入音频文件是将声音直接并入页面中,可掌握音量、播放器在页面上的外观或者声音文件的开头点和终止点等；操作演示：名师精编 优秀教案1）新建 html 页,在“ 插入” 栏的“ 常用” 类别中,单击“ 媒体” 按钮,然后挑选“ 插件” 图 标,在“ 挑选文件” 对话框中挑选站点文件夹内的某个音频文件,调整插件宽、高,储存,预览；2）选中插件,添加参数“autostart” ,值为“false” ,储存,预览；true” ,储存,预3）选中插件,修改参数“autostart” 值为“tru

6、e” ,添加参数“hidden” ,值为“览；同学实践二：同老师操作演示；并简洁浏览课件附录,大致明白embed 标签的属性参数；留意：客户机应具有所选声音文件的适当插件后,声音才可以播放；视频文件也可采纳此方法嵌入至网页中；备注：老师边讲解边操作,让同学观看成效,把握网页中嵌入音频文件的方法,再加上同学的亲身体验,突破难点；并且在老师的引导下,同学通过观看,明白插件参数设置后产生的变化；3使用“ 播放声音” 动作为网页添加声音：（约 10 分钟）老师：在 Dreamweaver 的“ 动作” 中,有一项为“ 播放声音”,结合“ 第三章Dreamweaver 行为” 知识,能否为一张图片添加如

7、下成效：当鼠标指针指上图片时播放音效,当点击图片后播放一段声音剪辑？答案是确定的（演示课件成效）；同学实践三：依据课件描述,新建html 页,使用练习素材进行制作；说明：此方法实际仍使用 embed 标签,结合 javascript 脚本程序掌握播放,embed 标签中使用了“ hidden”属性,其值为 “true ”,因此控件面板未显示；备注：同学依据课件操作步骤描述自主操作,相互沟通,提高同学自学才能和意识；老师巡视辅导,指导操作关键点,修正错误；老师总结操作关键点并演示操作；关键步骤：1）选取将添加行为的对象；2）添加“ 播放声音” 动作；3）转变动作的触发大事；4添加网页背景音乐：

8、（约 5 分钟）老师：经过以上三个实践操作后,同学们摸索一下,能否敏捷运用以上方法为网页添加背景音乐？提示：所谓背景音乐,即表示音频文件自动播放并且不会在页面中显示；操作演示：名师精编 优秀教案方法一：使用插件,转变插件“ 宽”、“ 高” 属性值均为“0” ,增加参数“hidden” ,值为“true” ,以隐匿控件面板；增加参数“loop” ,值为“true” ,以循环播放；增加参数“autostart” ,值为“true” ,以自动播放（不加改参数默认也为自动播放）；方法二：在代码视图中,添加 html 代码“” ；其中, src 属性表示音乐文件的路径,loop=表示音乐循环播放次数,值

9、为“-1” 表示无限循环,假如要设置播放次数,就改为相应的数字即可；同学实践四：依据老师演示和课件描述,新建 数作用及代码视图中对代码的编辑方法；html 页,使用练习素材进行制作；重点懂得参留意： Dreamweaver 中对代码的编辑也很便利,有代码提示功能,简洁明白并把握基本的代码 编辑方法；备注：方法一为引导同学查阅embed 标签的属性参数作用后,得出操作思路,以提高同学运用学问的才能,再由同学描述、老师操作进行验证；方法二由老师演示操作,同学依据课件操作提示进行操作；三、摸索与练习（约 8 分钟）1使用“ 播放声音” 动作,为网页添加背景音乐；提示：选取对象为“body” （网页）,动作为“ 播放声音”,大事为“onLoad” （加载）；备注：利用以前所学的学问,结合本次课程内容,利用多种方法实现同一目标,促使同学对学问融会贯穿,敏捷运用,充分发挥同学的主动性,培育同学的创新精神；2假如我喜爱一首歌曲,它已经存在于另一个网站的某张网页的链接之中,我能否仅链接到它而不用供应我自己的文件？课件显示