一、图片
一个纯文字的网页时不容易吸引人的,直观、明了、绚丽多彩的图片往往会给网页带来很大的生机。高质量的图片一般用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指定插件页面。