在网站上,网页设计者都使用了大量精心设计的图片文件。图片有多种格式,如JPEG、GIF、BMP、TIF、PIC等。目前在网页设计中常用的是JPEG和GIF格式的图片。
在HTML文件中,使用<IMG>标记插入图片,这个标记没有终止标记。当浏览器读到<IMG>标记时,就会显示它所代表的图片。图片标记<IMG>的属性如表2.5所示。
表2.5 图片标记<IMG>的属性
属性 |
描 述 |
SRC |
图像的URL地址 |
WIDTH |
图像宽度 |
HEIGHT |
图像高度 |
HSPACE |
水平间距 |
VSPACE |
垂直间距 |
BORDER |
图像边框,默认值为0 |
ALT |
图像的描述文字。如果浏览器不支持图像,描述文字将代替图像显示 |
LOWSRC |
显示低分辨率图像 |
ALIGN |
图像和相邻文字的排列 |
DYNSRC |
视频文件的URL地址 |
LOOP |
视频文件循环播放次数 |
LOOPDELAY |
视频文件循环播放延迟 |
START |
视频文件播放方式 |
USEMAP |
图像映射地图 |
下面对图片标记<IMG>属性进行详细介绍。
图像的URL地址属性SRC
SRC属性指出图像的URL地址,可以是绝对地址或者相对地址。
语法:
<IMGSRC=“file_name”>
file_name:插入图像路径。
图像的宽度和高度属性WIDTH、HEIGHT
语法:
<IMGSRC=“file_name”WIDTH=“value”HEIGHT=“value”>
WIDTH:设定图像的宽度,单位为像素。
HEIGHT:设定图像的高度,单位为像素。
图像的水平间距和垂直间距属性HSPACE、VSPACE
可以调整图像和文字之间的左右距离和上下距离。
语法:
<IMGSRC=“file_name”HSPACE=“value”VSPACE=“value”>
HSPACE:设定图像在水平方向和文字的距离,单位为像素。
VSPACE:设定图像在垂直方向和文字的距离,单位为像素。
图像边框属性BORDER
默认的图像是没有边框的,通过属性BORDER可以为图像设定边框。
语法:
<IMGSRC=“file_name”BORDER=“value”>
value:边框线的宽度,单位为像素。
图像的描述文字属性ALT
设定属性ALT,在浏览器中当鼠标放在图像上时,会出现所设置的描述文字;当浏览器不支持显示图像文件时,所设置的描述文字将代替图像显示。
语法:
<IMGSRC=“file_name”ALT=“描述文字”>
显示低分辨率图像属性LOWSRC
考虑到有些用户浏览网站速度慢的情况,可以在网页中插入低分辨率的图像。低分辨率的图像画质较差,但占用空间较小、传送文件较快,可以应用在网络拥塞的线路上。
语法:
<IMGLOWSRC=“file_name”>
file_name:插入图像路径。
2.图像超级链接在网页中,可以指定一个图像做为超级链接。与使用文本做为超级链接并没有太大不同,当单击图像时,会跳转到链接的页面。下面介绍使用图像做为超级链接的语法以及注意事项。
使用图像做超级链接
使用超级链接标记<A>和图片标记<IMG>指定图像做为超级链接。
语法:
<AHREF=“URL”><IMGSRC=“file_name”></A>
示例:
将图像文件01-01.gif链接到“http://www.soAsp.net”,代码如下:
<AHREF=“http://www.soAsp.net”TARGET=“_blank”><IMGSRC=“01-01.gif”WIDTH=“260” HEIGHT=“130”></A>
使用图像做超级链接的注意事项
为了让页面视觉效果更佳,可以指定图像做为超级链接来设计页面头部的导航栏;也可以做为导航按钮,单击导航按钮使用户方便地在页面中向前或者向后查看跳转页面。但是也不能大篇幅地使用图像超级链接,使用图像超级链接的注意事项如下:
(1)在页面中不要大量使用图像超级链接。当浏览网站速度很慢时,会使图像的载入和下载速度受到影响。
(2)使用与超级链接有联系的图像做为超级链接。
3.嵌入多媒体在HTML文件中可以直接嵌入多媒体文件。多媒体是指利用计算机技术,把多种媒体综合在一起,使之建立起逻辑上的联系,并能对其进行各种处理的一种方法。多媒体主要包括文字、声音、图像和动画等各种形式。在HTML文件中使用标记<EMBED>嵌入多媒体文件。
语法:
<EMBEDSRC=“file_url”WIDTH=valueHEIGTH=valueHIDDEN=hidden_valueAUTOSTART=auto_valueLOOP=loop_value></EMBED>
标记<EMBED>的属性如表2.6所示。
表2.6 标记<EMBED>的属性
属性 |
描 述 |
SRC |
多媒体文件路径 |
WIDTH |
播放多媒体文件区域的宽度 |
HEIGTH |
播放多媒体文件区域的高度 |
HIDDEN |
控制播放面板的显示和隐藏,取值为True代表隐藏面板,取值为No代表显示面板 |
AUTOSTART |
控制多媒体内容是否自动播放,取值为True代表自动播放,取值为False代表不自动播放 |
LOOP |
控制多媒体内容是否循环播放,取值为True代表无限次循环播放,取值为No代表仅播放一次 |
下面介绍如何使用<EMBED>标记嵌入不同的多媒体文件。
使用<EMBED>标记嵌入MPG电影文件
使用<EMBED>标记嵌入MP3音乐文件
MP3(MPEG Layer3)是一种数字音频格式,是以MPEG Layer3压缩编码为标准压缩音频。MP3压缩率可以达到1:12,也就是说1分钟的CD音质的音乐经过MPEG Layer3压缩编码可以压缩到1兆左右而基本保持不失真。在网页中可以嵌入MP3声音文件,以满足浏览者的需要。
使用<EMBED>标记嵌入AVI视频文件
AVI(Audio Video Interlaced)是一种不需要专门硬件参与就可以实现大量视频压缩的数字视频压缩格式,是文件音频数据和视频数据的混合,即音频数据和视频数据交错存放在同一个文件中。在Microsoft公司的Video For Windows支持下,可以用软件来播放AVI视频信号,因此它是视频编辑中经常用到的文件格式。大多数的CD-ROM多媒体光盘也都选用AVI作为视频文件的存储格式。
使用<EMBED>标记嵌入Flash动画
Flash动画是一种矢量动画格式,是用Macromedia公司的Flash软
件编辑而成,具有体积小、兼容性好、直观动感、互动性强大、支持MP3音乐等诸多优点,是当今比较流行的Web页面动画格式。在任何一个版本的浏览器上只要安装好插件,就可以观看Flash动画了