宝典为网页添加声音-教案

宝典为网页添加声音- 为网页添加声音 教案 宜昌市水利电力学校 陈波 【教学内容】 为网页添加声音(高等教育出版社《网页制作教程》郭振欣 史红星编 第六章第一节) 【教学目标】 (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分钟)