网页制作技术第05章.pptVIP

第 5 章 网 页 图 像 处 理 5.1 利用Dreamweaver MX处理网页图像 5.2 利用HTML编辑图像 在网页设计中插入丰富多彩的图像画面，可以起到点缀美化页面的效果，增加网站的吸引力。但如果使用得不恰当，过多、过大的图像不仅影响页面的主题思想，而且会影响网页的浏览及下载速度。因此，如何在网页中灵活、恰当地利用好图像，尤其是对插入图像的有效处理是十分重要的。 5.1 利用Dreamweaver MX处理网页图像 一幅图像和一个个漂亮的按钮、标记，不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。可见图像在网页中的作用是非常明显的。作为一名网页设计者，掌握好网页图像的运用是非常重要的。 5.1.1 网页中的图像格式 我们在浏览网页时经常看到的是位图和矢量图。所谓的位图和矢量图是计算机描述/显示图像和图形的两种不同方式。位图是排列成网格的一个个点构成的，这些点称为像素点，当以恰当的分辨率显示时，它们便拼合在一起显现为一幅完整的图像；而矢量图则是用线条和填充色等数学信息来描述图像的。 在网页中常用的位图格式有GIF、JPEG、PNG，矢量图格式主要为SWF。由于受到网络带宽的制约，在网页上使用的图像都是经压缩处理过的图像格式，它们都有各自的特点。 5.1.2 选择图像处理软件 前面所介绍的几种图形图像格式的原始文件并不是都可以直接用在网页中，大多数情况下，需要对原始的图像素材进行必要的处理，例如，图像优化、添加特效等，然后再在网页中使用。这就需要一些图形图像处理软件的协助。 1．Photoshop 2．Fireworks 3．Flash 5.1.3 在网页中使用图像时应该注意的几个问题 1．网页的图像文件要小 2．控制网页中图像的数量和质量 3．在网页中恰到好处地添加动画 5.1.4 在网页中插入图像 制作网页的时候，第一手得到的图像并不十分美观，有的是死板的矩形，有的与网页缺乏统一性，如果不做出判断，直接使用这些图像，有可能会给版面带来负面影响。因此，在使用图像之前，一定要有目的地选择图像，最好的方法是运用图像处理软件美化一下图像，有关图像美化的内容请参见本书第13章。 1．插入图像 2．图像属性参数 3．改变图像的尺寸 注意：在网页文档中除非必要，否则不要大幅度地改变图像的尺寸，因为这样做容易使图像失真。 4．调整图像在网页中的相对位置 5．编辑图像 6．更换图像 7．实现“魔法图像” 5.1 5 设置网页背景 设置及改变网页背景的状态可以通过两种方法来实现：一种是设置背景颜色，通常是在网页安全颜色范畴之内选择；另一种是设置背景图像，然而，不是所有的图像都可以用作背景的。 1．设置网页背景颜色 2．设置背景图像 注意：选择背景图像的原则，一定不要选择颜色深重的图像，否则网页文档的内容不易被衬托出来。 5.1.6 在Dreamweaver MX中巧妙地处理图像 1．给图像添加文字说明 2．制作低分辨率图像 3．使用图像映射 4．设置跟踪图像 5.2 利用HTML编辑图像 使用各种 Dreamweaver MX可视工具及其选项对图像实施插入和编辑。同样，还可以利用HTML设计代码来插入和编辑网页中的图像 。 5.2.1 插入图像 在HTML中，使用IMG标记符可以在网页中加入图像。它具有两个基本属性：src和alt，分别用于设置图像文件的位置的替换文本。 5.2.2 编辑图像属性 1．指定图像的宽和高 2．图像边框 3．设置图像周围的空白 4．图像的对齐 * 图5-1 “选择图像源”对话框 图5-5 图像属性面板 图5-9 “页面属性”对话框 图5-13 为图像添加文字说明 图5-15 添加低分辨率图像路径 图5-17 图像热点属性面板 图5-18 跟踪图像设置面板