网页设计与制作(二)

HTML图像标记

一、常用图像格式

1.GIF格式
GIF最突出的地方就是它支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片质量几乎无损失。再加上GIF支持透明(全透明或全不透明),因此很适合在互联网上使用。但GIF只能处理256种颜色在网页制作中,GIF格式常常用于Logo、小图标及其它颜色相对单一的图像。
2.PNG格式
PNG包括PNG-8和真彩PNG(PNG-24和PNG-32)。相对于GIF,PNG最大的优势是体积小,支持alpha透明(全透明、半透明、全部透明),并且颜色过渡更平滑,但PNG不支持动画。同时需要注意的是,IE6是可以支持PNG-8的,但在处理PNG-24的透明时会显示为灰色。通常,图片保存为PNG-8会在同等质量下获得比GIF更小的体积,而半透明的图片只能使用真色彩PNG。
3.JPG格式
JPG所能显示的颜色比GIF和PNG多得多,可以用来保存超过256种颜色的图像,但是JPG是一种有损压缩的图像格式,这就意味着每修改一次图片都会造成一些图片数据的丢失。JPG是特别为照片图像设计的文件格式,网页制作过程中类似于照片的图像比如横幅广告、商品图片、较大的插图等都可以保存为JPG格式
简而言之,在网页中小图片或网页基本图片加图标、按钮等考虑GIF或PNG-8、半透明图像考虑PNG-24,类似照片的图像则考虑JPG。

二、图像标记

HTML网页中任何元素的实现都要依靠HTML标记,要想在网页中显示图像标记《img/》
《img src=“图像 URL》
该语法中src属性用于指定图像文件的路径和文件名,它是img标记的必须属性。
在这里插入图片描述

1.图像的替换文本属性alt
由于一些原因图像可能无法正常显示,比如网速太慢、浏览器版本过低等。因此,为页面上的图像加上替换文本是个很好的习惯,在图像无法显示时告诉用户改图片的内容,这就需要使用图像的alt属性。
2.图像的宽高属性width、height
width和heigth属性用来定义图片的高度和宽度,通常只设置其中一个,另一个会按原图等比显示。如果同时设置两个属性,且其比例和原图大小比例不一致,现实的图像就会变形或失真。
3.图像的边框属性border
通过border属性可以为图像添加边框、设置边框的高度,但边框颜色的调整仅仅通过HTML属性是不能够实现的。
4.图像的边距属性vspace和hspace
使用vspace和hspace属性为图像设置了水平边距和垂直边距。为了使水平边距和垂直边距的显示效果更明显通常给图像添加1像素的边框,并且使用align=“left”使图像左对齐。

三、相对路径和绝对路径

实际工作中,通常建立一个文件夹专门用于存放图像文件,这时插入图像,就需要采用“路径”的方式来指定图像文件的位置。
1.绝对路径
绝对路径一般指带有盘符的路径或完整的网络地址。
2.相对路径
相对路径不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页