Web图像处理.ppt

第15章 Web图像处理 15.1 图像映像和热区 在网页制作中，为了页面的美观，常使用图像链接。对于导航性质的图像链接，经常需要在一幅图像中建立多个链接，Dreamweaver中使用的是热区超链接。如果使用Fireworks制作图像，就可以直接在Fireworks中完成热区链接的设置，并且生成相应的HTML源代码， 插入到网页文件中。 图片上添加了URL链接的部位称为热区，一组添加了一个或多个热区的图片称为图像映射图或简称图像映像。在Fireworks中创建图像映像通常有以下几个步骤： ① 首先创建或打开希望作为图像映像的图像，必须将它保存为PNG文档； ② 在该PNG文档中绘制热区； ③ 将热区分别同链接地址相关联； ④ 利用导出操作，将图像以及附属的HTML代码导出； ⑤ 在其他HTML编辑器，例如Dreamweaver中，将导出的图像和HTML代码插入到需要的地方。 15.1.1 创建热区 创建和编辑热区是构建图像映像的关键步骤，一旦打开了一幅PNG文档，即可将之作为图像映像的基础，并在其上绘制热区。要注意的是，必须将包含热区的图像保存为PNG文档后，才能正确保存热区设置。 1. 创建热区 【例15.1】创建热区 ① 打开或创建用作图像映像的PNG文档； ② 在工具箱中选择需要的热区工具（矩形、椭圆形或多边形），如图 15.1所示； ③ 在文档中要创建热区的位置拖动鼠标，绘出热区区域，即可创建热区。图15.2是在图像上创建的热区。 提示： 在绘制矩形热区和椭圆形热区时，拖动鼠标时同时按下Alt键，即可以将区域中心作为基准点进行绘制。按住Shift拖动鼠标可以建立正方形和圆形热区。 注意： 热区是以整幅图像为基础的，所以热区可以建立在矢量对象上，也可以建立在位图对象上，不必覆盖整个对象，也可以跨对象建立，也可以建立在空白区域上。在文档窗口中，每个热区也是一个对象，叫热区对象，在图层（Layer）面板中，热区对象建立在Web Layer层中。 2. 根据路径生成热区 虽然热区与图像对象没有直接关系，但有时希望建立的热区刚好覆盖一个或多个对象，这时，可以依路径生成热区。 【例15.2】依路径创建热区 ① 选中要作为热区的一个或多个路径对象； ② 打开Insert菜单，执行Hotspot命令，或是按Ctrl+Shift+U键。如果选中了一个路径对象，则该对象区域就会被设置为热区。如果选中了多个路径对象，则会弹出对话框，提示选择是将这多个对象区域所覆盖的外接矩形区域设置为热区（Single），还是分别将这多个对象区域构建多个热区(Multiple)。 注意: 无论路径是矩形还是圆形，通过这种方法生成的热区都是多边形热区。Fireworks 会添加多个多边形点来实现热区区域同曲线路径的匹配。 15.1.2 编辑热区 一次创建热区很可能不符合要求，如过大、过小、形状不吻合，或是同需要的区域不够匹配等。这时可以继续对热区进行编辑，使之最终符合要求。 前面已说明热区在文档窗口中是热区对象，它和图像对象应同等对待。只不过它不是图像，而是仅描述了一个范围，没有描边、填充、效果属性，形状、位置是它的本质属性。在编辑方面它与图像对象的相应操作完全相同。 1. 选中热区 使用工具箱中选择工具或子选择工具， 可以选中热区或热区路径的节点。 2. 移动热区 选中热区，用鼠标拖动热区，即可将之在文档中移动。 3. 调整热区形状 选中热区后，利用选择工具或子选择工具，拖动热区边框上的节点，即可调整热区形状。对于矩形和圆形热区，拖动边框上的节点，仍然会保持矩形和圆形的形状，但大小会改变。如果拖动的是多边形热区边框上的节点，则可以任意改变热区形状。 4. 改变热区形状类型 拖动矩形热区的边框节点，生成的仍然是矩形热区；拖动圆形热区边框上的节点，生成的仍然是圆形热区。而在对象（Object）面板中的Shape（形状）下拉列表中选择形状，则可以改变热区的类型，即可以将矩形热区改变为圆形热区等。注意，应先选中热区。 5. 热区的变形 使用变形工具和变形命令，热区可以像对象一样施行变形操作，如缩放、旋转、翻转、扭曲、斜切等。注意，热区的变形仅仅改变的是热区的形状，对热区原来覆盖的图像没有任何影响，即原来的图像不变形，不移动。 6. 改变热区颜色 默认状态下，为便于观察，热区呈半透明蓝色。选中热区，可以使用对象(Object)面板中的热区对象颜色框来改变显示颜色。 7. 显示或隐藏热区 热区有时可能会影响用户对图像的查看，这时可以隐藏热区，需要的时候再显示热区。工具箱中底部的按钮用于隐藏热区和切片，按钮用于显示热区和切片。还可以使用图层（Layer）面板Web图层中的眼睛图标来显示和隐藏热区。 15.1.3 为热区创建超链接 1. 创建超链接 【例15.