第04章 图像处理(已改).ppt

第4章图像的处理 4 1背景图案的设定4 2网页中插入图形4 3img标签属性的使用4 4把文本排到图像下面4 5超链接与图形的应用4 6图像使用原则 上一页 下一页 目录 结束 本节 图像 是由一些被称为 图像元素 或 像素 的带颜色的小块排列而成的 像素 是能够在计算机屏幕上显示的最小的图像信息单元 它实现上是一个很小的带有颜色的矩形 第4章图像的处理 补充 两个概念 上一页 下一页 目录 结束 本节 GIF GraphicsInterchangeFormat 优点 最多支持256色 支持透明 支持多帧动画显示效果 可以使用在品质较差或者需要透明或动画显示的情况 缺点 过去LZW需要交专利费 GIF图像只能支持256种颜色 JPEG JointPhotographicExpertsGroup 优点 支持多种颜色 可以有很高的压缩比 可以使用在品质要求较高的场合 风景 写真等 缺点 压缩信息占用大量空间 使用了有损压缩 不支持透明 不支持动画效果 PNG PortableNetworkGraphics 优点 是一种新的图片技术 可以表现品质比较高的图片 使用了无损压缩 支持透明 w3c推荐 缺点 不支持动画 BMP 仅Windows支持的图像格式 限制比较大 第4章图像的处理 上一页 下一页 目录 结束 本节 第4章图像的处理 上一页 下一页 目录 结束 本节 BMP文件因为存储空间大 传输不够快 所以并不常用网络上 常用的是jpg文件和gif文件 对于徽标 公司厂标等在每一主页显示 要求能快速下载并能在低配置的系统中查询的图像 应采用GIF格式对于扫描图片 艺术作品这种对显示质量要求很高的图像 采用JPEG格式 第4章图像的处理 上一页 下一页 目录 结束 本节 4 1背景图案的设定 定义背景图像的语法格式如下 其中 image URL 指图像的位置说明 默认背景图像将以平铺方式显示平铺图像作背景 将降低网页显示速度注意 所选的图像应看上去能无痕迹地连接在一起尽量不用或使用小的图像文件 上一页 下一页 目录 结束 本节 在HTML中使用图像的标签是 注意 没有结束标签 4 2网页中插入图形 上一页 下一页 目录 结束 本节 1 格式 2 说明 src属性是用来指出一个图像的文件名 或是指出URL的路径名 如果图像的显示有问题 应该检查以下内容 文件名是否书写正确 图像文件是否是BMP GIF或JPG格式 是否已经打开了浏览器的图像下载功能3 最好在标签中使用相对路径名 上一页 下一页 目录 结束 本节 4 3img标签属性的使用 4 3 1图像的取代文字4 3 2设定图像的高度和宽度4 3 3设定图像的边框4 3 4设定图像的对齐方式4 3 5设定图像与文本之间的距离 上一页 下一页 目录 结束 本节 标签中的alt属性 当浏览器不能显示图像或找不到图像时 它可以将alt引导的文本显示在屏幕上 从而替代看不到的图像 例 4 3 1图像的取代文字alt 上一页 下一页 目录 结束 本节 标签中还提供了两个属性 height和width 用来设定图像的高度和宽度 二者可取像素值或百分比 例 4 3 2设定图像的高度和宽度 上一页 下一页 目录 结束 本节 4 3 3设定图像的边框border 标签的border属性可以给图像加一个边框 若border项默认或取值为0时 图像没有边框 例 上一页 下一页 目录 结束 本节 在标签中使用align属性 可控制图像相对于文字基准线 文字中线 的水平对齐方式 其语法如下 例 各属性的设置值意义如下表所示 4 3 4设定图像的对齐方式align 上一页 下一页 目录 结束 本节 align属性的设置值 各属性的设置值意义如下表所示 上一页 下一页 目录 结束 本节 4 3 5设定图像与文本之间的距离 标签中的vspacr和hspace属性能够调整图像与其他文本之间的距离 两者均取像素值 设定语法如下 n m为数值 单位为像素 vspace调整图像与上下文本的距离hspace调整图像与左右文本的距离 上一页 下一页 目录 结束 本节 4 4把文本排到图像下面 如果文本还没有填满图像周围的空间时 就希望从图像下面重新开始另一行文本 这时 普通的换行标签就不起作用了 这就需要在标签中使用clear属性来满足这一要求 clear left文本在图像下面另起一行 用于图像在左边的情况clear right文本在图像下面另一行 用于图像在右边的情况clear all文本在图像下面另起行处 上一页 下一页 目录 结束 本节 如果将标签放在和的中间 这个图像将成为一个可点击的图像 产生一个链接 可以看出 这个图像被自动地加上一个蓝色的边框 成为一个可以点击的图像 这里还可以巧妙地利用alt属性 加入提示信息 当浏览者的鼠标移到图像时 显示提示信息 4 5超链接与图形的应用 上一页 下一页 目录 结束 本节 4 6图像使用原则 1 在设计网页时 不是必需的图像 要舍得忍痛割爱 2 图像尽量做得小一点 小图像在网上的传输速度比较快 这对于网络传输速度较慢的用户更为重要 较小的图像可以是尺寸比较小 也可以通过减少图像颜色使图像文件减小 3 为了使不支持图像的浏览器能看到文本 可以同时使用图像和alt的纯文本格式 这样 能使更多的用户看全这个网页 4 设计一般不要宽于450像素值 因为不少浏览器宽度大约为460像素值 许多显示器也不是彩色的 在设计网页时 这些因素都应该考虑进去 上一页 下一页 目录 结束 本节 三 多边形shape poly coords x1 y1 x2 y2 x3 y3 x1 y1 FirstCorner x2 y2 SecondCorner 当shape是poly多边形时 coords表示多边形所有