教学项目十 HTML图片与声音标志的使用 【教学内容】 讲解HTML标准中的图片及声音标志 【教学目的】 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与图片 【教学重点】 IMG标志的使用 embed标志的使用 【教学难点】 理解img标志和embed标志中属性的意义 【教学方式】 案例分析式、练习式相结合 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<Internet 网页工场>> Wittime工作室 重庆出版社 3．<<JavaScript从入门到精通>> 电脑报社出版 【新课】 图片标志的使用 语法 <img src=图片文件路径及名称> 与img配合使用的属性： src: 指定图片所在位置及文件名 align: 设置文字与图片的对齐方式 border:设定图片外框 vspace:设定图片与文字垂直方向间隔 hspace:设定图片与文字水平方向音隔 width: 调整图片宽度 height:调整图片高度 alt: 浏览器无法正常显示图片时，显示alt指定的文字 例1： 插入图片，宽度400，高度280，垂直居中对齐 <html> <head> <title>图片插入例子</title> </head> <body> <p> 这是使用img插入的图片</p> <hr color=green size=4> <img src=0374.jpg width=800 height=240 align=middle> <br> </body> </html>  例2.将图片设置为背景  <html> <head> <title>图片背景的使用</title> </head> <body background=11.gif bgproperities=fixed> <p><center><font size=6 face=隶书 color=green>爱情是什么</font></center></p> <br><br> <p> 老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让你泪流满面； <br>老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住 自己的喷嚏和鼻涕；<br>朋友说：爱情是只啁啾的鸟，总想往高处飞，但又 总要找个栖息的角落；<br>而嗜饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。 </body> </html> 例3.视频的插入 在标志img中使用属性dynsrc,可以在网页在加入视频  程序代码如下: <html> <body> <center><img dynsrc=1.wmv width=400 height=260 loop=2> </body> </html> 二.标志embed的使用 使用标志embed可以实现在网页中插入声音,视频,动画等效果. 语法: <embed src=文件名 width=窗口宽度 height=窗口高度> 例4:在网页中插入音频  <html> <body> <center><embed src=1.rm width=400 height=180> </body> </html> 例5.网页中FLASH动画的插入  <html> <body> <center><embed src=11.swf width=480 height=320> </body> </html> 三.背景音乐的插入 语法: <bgsound src=声音文件 loop=播放次数> 例6.在网页中设置背景音乐,次数为无限次  <html> <head> <bgsound src=223.mid loop=-1> </head> <body bgcolor=pink> <p>&nbsp; 曾经有一份不真诚的爱情摆在我面前,我没有珍惜,等到失去的时候才庆幸莫及, <br>尘世间最快乐的事情莫过于此。如果上天能给我一个机会再来一次的话，我会 <br>对那个男孩说，我不爱你，如果非要给这个回答一个期限，我希望是，一百万年！ </body> </html> 四、水平线的插入 标志：<hr> 常用属性： align:水平线的对齐方式 width:水平线的长度 size:水平线的宽度 color:水平线的颜色 【课后小结】 本节介绍了在网页中加入图片，声音，视频，动画的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。