网页中的多媒体应用

 

一、图片

 

    一个纯文字的网页时不容易吸引人的，直观、明了、绚丽多彩的图片往往会给网页带来很大的生机。高质量的图片一般用TIFF格式保存，但其图片过大，不太适合网络传输。所以，选用图片时，除了要考虑图片的颜色搭配等问题外，还要考虑图片的格式。不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其容量的大小。网页中常用的图片格式为GIF、JPEG和PNG。

    一般在网页设计中选择的图片不要超过8KB，如必须选用较大的图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。另外，如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。因为使用相对路径时，浏览器只需要下载一次，当再次使用该图片时，只需要重新显示即可。但若使用绝对路径就必须在每次显示图片时都下载一次，这样会增大网络的下载量，使浏览速度变慢。

 

    在HTML文档中，显示图片所用的标记是<img>。

×基本语法

    <img src=”url” width=” ” height=” ” hspace=” ” vspace=” ” align=” ” border=” ” alt=” ”>

×语法说明

(1)src属性用来指定图片源，即URL路径，是必须属性。该路径可以是相对路径，也可以是绝对路径。

(2)指定图像的高和宽：默认情况下，在HTML页面中显示的是图像的原始大小。如果要显示指定的图像大小，就要采用<img>标记的width和height属性。width和height的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。在width和height属性中，如果只设置了其中的一个属性，那么另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对于原图变形或失真。

(3)<img>标记的hspace(指的是所设置的图片与相邻元素的水平间距)和vspace(指的是所设置的图片与相邻元素的垂直间距)属性分别用来指定图像的水平间距和垂直间距。其值为数字，单位为px，默认值为0。

(4)<img>标记的align属性用来指定图像与周围元素的对其方式，其取值如下表所示：

align属性值

         取值说明

left

    在水平方向上左对齐

center

    在水平方向上居中对齐

right

    在水平方向上右对齐

top

    图片顶部与同行其他元素顶部对齐

middle

    图片顶部与同行其他元素中部对齐

bottom

    图片顶部与同行其他元素底部对齐，此为align的默认值

absbottom

    图片的底部与同行最低元素的底部对齐，常用于Netscape浏览器

absmiddle

    图片的中部与同行最大元素的中部对齐，常用于Netscape浏览器

baseline

    图片的底部与文本基准线对齐，常用于Netscape浏览器

texttop

    图片的顶部与同行最高元素的顶部对齐，常用于Netscape浏览器

 

(5)<img>标记的border属性用来指定图片的边框。Border的值用数字表示，默认单位为px。默认情况下，图片没有边框，即border=0。图片边框的颜色不可调整，默认为黑色。当图片做为作为超链接使用时，图片边框的颜色和文字超链接的颜色一致，默认为深蓝色。

(6)<img>标记的alt属性用来指定图片文字说明。alt属性用于对图片信息进行描述。当图片无法正常在浏览器中显示时，图片位置显示该描述信息。当图片可以正常显示时，当光标放在图片上才显示该描述信息。alt属性可在Web浏览器不支持图像显示或用户关闭图像下载功能时，告诉用户该处是一幅什麽样的图像。

 

二、滚动文字

 

    滚动文字可以增加文字的动态效果，引起浏览者的注意，丰富网页的内容。在HTML文档中，插入滚动文字所用的标记是<marquee> … </marquee>。

×基本语法

    <marquee> … </marquee>

×语法说明

(1)<marquee>标记的常用属性参数摄住如下表所示：

<marquee>属性

        属性功能说明

   属性的取值

     各属性值的功能

 

 

behavior

   

 

设置文字的滚动方式

   scroll

   循环滚动(默认值)111

   slide

   滚动一次停止111

   alternate

   来回交替滚动111

 

 

direction

   

 

设置文字的滚动方向

   left

   向右向左滚动222

   right

   向左向右滚动222

   up

   由下向上滚动222

   down

   由上向下滚动222

 

bgcolor

  

 设置滚动文字的背景颜色

   英文颜色名称

   表示所用颜色333

   #rrggbb

   表示所用颜色333

 

Width和height

  

 设置滚动背景的宽和高

   数字

   设置背景的绝对面积444

   相对百分比

   设置背景相对浏览器窗口的大小444

hspace和vspace

   设置滚动文字背景和周围其他元素的空白间距

   数字

   设置背景和周围其他元素的绝对距离

 

loop

  

设置滚动文字的循环次数

   正整数n

   文字滚动n次555

   infinite

   文字滚动无限次(默认值)555

scrollmount

   设置滚动文字每次移动的距离

   数字(默认单位px)

   文字每次移动的距离

scrolldelay

   设置滚动文字每次移动后的间歇时间

   数字(默认单位px)

   滚动文字每次移动后的间歇时间

(2)将要添加效果的文字放到<marquee>和</marquee>之间，同时可以设置文字的字体、大小和颜色。

(3)各属性都是可选参数，根据需要可插入<marquee>和</marquee>之间。

(4)默认情况下，滚动背景的面积和文字等高，和浏览器等宽。设置绝对大小时默认单位为px。

(5)默认情况下，hspace和vspace的值为0，默认单位为px。

 

三、背景音乐

 

    设置背景音乐的标记为<bgsound>，其参数设定不多，可播放的声音文件格式包括WAV、AU、MIDI、WMV、MP3等。该设置在网页中不显示播放软件面板。

×基本语法

    <bgsound src=” ” loop=” ”>

×语法说明

(1)src指声音文件的URL来源，即其路径，为必选属性。

(2)loop指定声音文件的循环播放次数，其值为正整数可指定播放次数，其值为-1或infinite指定循环播放无限次。

 

四、其他多媒体文件

 

    使用<bgsound>标记只能添加声音文件，而且不能显示和调整播放软件的控制面板。而使用<embed>标记则可以插入各种各样的多媒体文件，如WMV、MP3、AVI、SWF、MOV、RMVB等。

×基本语法

    <embed src=”url” loop=”true|false” autostart=”true|false” width=”width” height=”height” type=”media-type” pluginspage=”plugin”>

×语法说明

(1)src指定多媒体文件的URL，即其路径，为必选属性。

(2)loop指定声音文件的循环次数，值为true可循环播放无限次，值为false只能播放一次，默认值为false。

(3)autostart指定对媒体文件在下载完后是否自动播放。

(4)width和height分别指定多媒体窗口的宽和高。值都为0时类似背景音乐可隐藏面板。

(5)type指定多媒体的播放类型。

(6)pluginspage指定插件页面。