【网页设计教案】HTML图片与声音标志的使用.docVIP

教学项目十 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 pcenterfont size=6 face=隶书 color=green爱情是什么/font/center/p brbr p 老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让你泪流满面； br老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住 自己的喷嚏和鼻涕；br朋友说：爱情是只啁啾的鸟，总想往高处飞，但又 总要找个栖息的角落；br而嗜饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。 /body /html 例3.视频的插入 在标志img中使用属性dynsrc,可以在网页在加入视频 程序代码如下: html body centerimg dynsrc=1.wmv width=400 height=260 loop=2 /body /html 二.标志embed的使用 使用标志embed可以实现在网页中插入声音,视频,动画等效果. 语法: embed src=文件名 width=窗口宽度 height=窗口高度 例4:在网页中插入音频 html body centerembed src=1.rm width=400 height=180 /body /html 例5.网页中FLASH动画的插入 html body centerembed 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 pnbsp; 曾经有一份不真诚的爱情摆在我面前,我没有珍惜,等到失去的时候才庆幸莫及, br尘世间最快乐的事情莫过于此。如果上天能给我一个机会再来一次的话，我会 br对那个男孩说，我不爱你，如果非要给这个回答一个期限，我希望是，一百万年！ /body /html 四、水平线的插入 标志：hr 常用属性： align:水平线的对齐方式 width:水平线的长度 size:水平线的宽度 color:水平线的颜色 【课后小结】 本节介绍了在网页中加入图片，声音，视频，动画的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。 湖北职院计算机科学与技术系理论课教案—《网页设计》