教学项目十 HTML图片与声音标志的使用
【 教学内容 】
讲解 HTML标准中的图片及声音标志
【 教学目的 】
使学生掌握图片标志,声音标志及相应的属性,学会利用
标志在网页中插入声音与图片
【 新课 】
一, 图片标志 img的使用
1,语法
<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>
例 4.图片滚动效果的实现
二,标志 embed的使用
使用标志 embed可以实现在网页中插入声音,视频,动画等效
果,
语法,
<embed src=文件名 width=窗口宽度 height=窗口高度 >
例 5:在网页中插入音频
<html>
<body>
<center><embed src=1.rm width=400 height=180>
</body>
</html>
例 6.网页中 FLASH动画的插入
<html>
<body>
<center><embed src=11.swf width=480 height=320>
</body>
</html>
三,背景音乐的插入
语法,
<bgsound src=声音文件 loop=播放次数 >
例 7.在网页中设置背景音乐,次数为无限次
<html>
<head>
<bgsound src=223.mid loop=-1>
</head>
<body bgcolor=pink>
<p> 曾经有一份不真诚的爱情摆在我面前,我没有珍惜,等
到失去的时候才庆幸莫及,
<br>尘世间最快乐的事情莫过于此 。 如果上天能给我一个机会
再来一次的话, 我会
<br>说, 我不爱你, 如果非要给这个回答一个期限, 我希望是
,一百万年 ！
</body>
</html>
四, 水平线的插入
标志,<hr>
常用属性,
align:水平线的对齐方式
width:水平线的长度
size:水平线的宽度
color:水平线的颜色
【 课后小结 】
本节介绍了在网页中加入图片, 声音, 视频, 动画的标志
与相应属性, 熟练运用这些标志是制作多媒体网页的基础 。
【 教学内容 】
讲解 HTML标准中的图片及声音标志
【 教学目的 】
使学生掌握图片标志,声音标志及相应的属性,学会利用
标志在网页中插入声音与图片
【 新课 】
一, 图片标志 img的使用
1,语法
<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>
例 4.图片滚动效果的实现
二,标志 embed的使用
使用标志 embed可以实现在网页中插入声音,视频,动画等效
果,
语法,
<embed src=文件名 width=窗口宽度 height=窗口高度 >
例 5:在网页中插入音频
<html>
<body>
<center><embed src=1.rm width=400 height=180>
</body>
</html>
例 6.网页中 FLASH动画的插入
<html>
<body>
<center><embed src=11.swf width=480 height=320>
</body>
</html>
三,背景音乐的插入
语法,
<bgsound src=声音文件 loop=播放次数 >
例 7.在网页中设置背景音乐,次数为无限次
<html>
<head>
<bgsound src=223.mid loop=-1>
</head>
<body bgcolor=pink>
<p> 曾经有一份不真诚的爱情摆在我面前,我没有珍惜,等
到失去的时候才庆幸莫及,
<br>尘世间最快乐的事情莫过于此 。 如果上天能给我一个机会
再来一次的话, 我会
<br>说, 我不爱你, 如果非要给这个回答一个期限, 我希望是
,一百万年 ！
</body>
</html>
四, 水平线的插入
标志,<hr>
常用属性,
align:水平线的对齐方式
width:水平线的长度
size:水平线的宽度
color:水平线的颜色
【 课后小结 】
本节介绍了在网页中加入图片, 声音, 视频, 动画的标志
与相应属性, 熟练运用这些标志是制作多媒体网页的基础 。
