（精）第二讲 用HTML设置文本和图像.ppt

1 窗口框架简介 学习目标 理解矢量图和位图的区别，了解常用的Web图像格式。 理解Web图像的处理流程，初步掌握基本的Web图像处理操作。 掌握在网页中插入图像的方法，理解图像在网页中的作用和Web图像的基本使用原则。 矢量图 矢量图形是指用线条和填充色等数学信息来描述图像的一种图像类型。 制作矢量格式图像的软件有 Freehand、Illustrator、CorelDraw、AutoCAD 。 位图 位图是指用像素一点一点地描述图像的一种图像类型。 常用的位图编辑软件有 Fireworks、Photoshop、ImageReady、PhotoImpact 等 常用Web图像格式 GIF JPEG PNG GIF GIF（Graphics Interchange Format，图形交换格式）格式的特点： 无损压缩 最多256色 能够使用透明色 有所占存储空间小、下载速度快、支持动画等特点 JPEG JPEG（Joint Photographic Expert Group，联合图形专家组）格式的特点： 有损压缩 24位颜色 可以控制压缩比 图像质量好，对具有连续色调的图像有最佳效果 PNG PNG（Portable Network Graphics，可移植的网络图形）格式的特点： 无损压缩 24位颜色 支持透明度 BMP图像文件因为存储空间大，传输不够快，所以并不常用,常用的是jpg文件和gif文件。 对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像,应采用GIF格式 而对于扫描图片、艺术作品这种对显示质量要求很高的图像则应采用JPEG格式。 图像使用说明 背景图案的设定 在网页中可以用图像平铺的方法制作背景。 定义背景图像的语法格式如下： body background=image-URL 其中，“image-URL”指图像的位置。 说明： 注意平铺的效果：在建立这种形式的背景之前，首先要确定所选定的图案能否看上去无痕迹地连接在一起，或者能否产生一种较好的背景效果。 尽量不用：用平铺图像作背景，将极明显地降低网页的显示速度。唯一的解决办法就是尽量使用小的图像文件，如果可能的话则不用。 img是用于导入图像文件的标签，使用此标签可将图像文件导入到HTML文件中显示。 img没有结束标签，因为当浏览器只有读取到img标签时，会直接显示此标签所代表的图像。 1．格式： img src=image-URL 网页中插入图形 2．说明： src属性是用来指出一个图像的文件名，或是指出URL的路径名。 如果图像的显示有问题，应该检查以下内容： ① 文件名是否书写正确； ② 图像文件是否是BMP、GIF或JPG格式； ③ 是否已经打开了浏览器的图像下载功能。 若上述几项全部正确，图像就能够显示出来。 小技巧： 如果在同一个文件中需要反复使用一个相同的图像文件时，最好在img标签中使用相对路径名，而不是使用绝对路径名或URL。因为使用相对路径名，浏览器只须将图像文件下载一次，再次使用这个图像时，只要重新显示一遍即可。如果使用的是绝对路径名，每次显示图像时，都要下载一次图像，这将会大大降低图像的显示速度。 img标签属性的使用 图像的取代文字 设定图像的高度和宽度 设定图像的边框 设定图像的对齐方式 设定图像与文本之间的距离 img标签中的alt属性：当浏览器不能显示图像或找不到图像时，它可以将alt引导的文本显示在屏幕上，从而替代看不到的图像。 img src=face.gif alt=MY FACE :-) 图像的取代文字alt img标签中还提供了两个属性：height和width，用来设定图像的高度和宽度，二者可取像素值或百分比（相对窗口）。 示例： image src=fh.jpg height=60 width=80 设定图像的高度和宽度 设定图像的边框border img标签的border属性可以给图像加一个边框。若border项默认或取值为0时，图像没有边框。 image src=fh.jpg border=5 在img标签中使用align属性，可控制图像相对于文字基准线（文字中线）的水平对齐方式，其语法如下： img align=top、middle、bottom、left或right 各属性的设置值意义如下表所示： 设定图像的对齐方式align align属性的设置值 图像居右 right 图像居左 left 下对齐 bottom 居中对齐 middle 上对齐 top 对齐方式 设 置 值 把文本排到图像下面