第6章第1部分图像处理.ppt

《第6章第1部分图像处理.ppt》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、第6章第1部分图像的处理6.1背景图案的设定6.2网页中插入图形6.3img标签属性的使用6.4把文本排到图像下面6.5超链接与图形的应用6.6图像使用原则上一页下一页目录结束本节图像可以使Web页面更加生动美观、富有生机。目前浏览器可以显示JPEG、BMP和GIF图像。其中BMP文件因为存储空间大，传输不够快，所以并不常用。常用的是jpg文件和gif文件。其中GIF图像最多只能使用256种颜色（即只能保存为8位颜色），而JPEG格式可保存为24位，对具有连续色调的图像有最佳效果。不过，GIF图像虽然在图像质量上不及JPEG图像，但其却有所占存储空间小、下载速度快、支持动画效果、

2、背景色可透明等特点。因此应视不同情况而决定应使用哪种格式的图像。对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像。应采用GIF格式，而对于扫描图片、艺术作品这种对显示质量要求很高的图像则应采用JPEG格式。第6章图像的处理上一页下一页目录结束本节6.1背景图案的设定在网页中除了用一种单一的颜色作背景外，还可以用图像平铺的方法制作背景。图像平铺就是把一张小的图像在屏幕上一个一个地拼接起来，构成一个屏幕的完整的背景。定义背景图像的语法格式如下：其中，“image-URL”指图像的位置。在建立这种形式

3、的背景之前，首先要确定所选定的图案能否看上去无痕迹地连接在一起，或者能否产生一种较好的背景效果。用平铺图像作背景，将极明显地降低网页的显示速度。唯一的解决办法就是尽量使用小的图像文件，如果可能的话则不用。上一页下一页目录结束本节假设已经有了一个图像文件，怎样才能将它显示在网页上呢？在HTML中使用图像的标签是：。是用于导入图像文件的标签，使用此标签可将图像文件导入到HTML文件中显示。没有结束标签，因为当浏览器只有读取到标签时，会直接显示此标签所代表的图像。1．格式：6.2网页中插入图形上一页下一页目录

4、结束本节2．说明：src属性是用来指出一个图像的文件名，或是指出URL的路径名。如果图像的显示有问题，应该检查以下内容：①文件名是否书写正确；②图像文件是否是BMP、GIF或JPG格式；③是否已经打开了浏览器的图像下载功能。若上述几项全部正确，图像就能够显示出来。如果在同一个文件中需要反复使用一个相同的图像文件时，最好在标签中使用相对路径名，而不是使用绝对路径名或URL。因为使用相对路径名，浏览器只须将图像文件下载一次，再次使用这个图像时，只要重新显示一遍即可。如果使用的是绝对路径名，每次显示图像时，都要下载一次图像，这将会大大降低图像的显示速度。上一页下一页目录结束本节

5、有些浏览器只支持文本，不支持图像，这时我们可以采取一些其他办法来替代图像。标签中的alt属性能够有所帮助。当浏览器不能显示图像或找不到图像时，它可以将alt引导的文本显示在屏幕上，从而替代看不到的图像。6.3.1图像的取代文字alt上一页下一页目录结束本节标签中还提供了两个属性：height和width，用来设定图像的高度和宽度，二者可取像素值或百分比。小的图像占的磁盘空间较少，在网上传输的时间比较短。因此，可以充分利用这两个属性，先在网页上建立一个比较小的图像，然后再用这两个属性按比例放大，达到所希望的尺寸。但是有一点要记住，放大后图像中的像素也被按比例放大了

6、，所以放大倍数太大的图像可能会显得有些斑驳模糊。为了使网页产生好的图像效果，应尽可能多试几次，从而得到满意的结果。6.3.2设定图像的高度和宽度上一页下一页目录结束本节6.3.3设定图像的边框border标签的border属性可以给图像加一个边框。若border项默认或取值为0时，图像没有边框。上一页下一页目录结束本节在标签中使用align属性，可控制图像相对于文字基准线（文字中线）的水平对齐方式，其语法如下：各属性的设置值意义如下表所示：6.3.4设定图像的对齐方式align上一页下

7、一页目录结束本节align属性的设置值设置值对齐方式top上对齐middle居中对齐bottom下对齐left右对齐right左对齐上一页下一页目录结束本节6.3.5设定图像与文本之间的距离标签中的vspacr和hspace属性能够调整图像与其他文本之间的距离，两者均取像素值。设定语法如下：n，m为数值，单位为像素。vspace调整图像与上下文本的距离hspace调整图像与左右文本的距离上一页下一页目录结束本节6.4