《web图像处理》ppt课件

《《web图像处理》ppt课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第15章Web图像处理15.1图像映像和热区15.2切片15.3按钮和导航条15.4行为和翻转图像15.5图像的优化和导出思考与练习15.1图像映像和热区在网页制作中，为了页面的美观，常使用图像链接。对于导航性质的图像链接，经常需要在一幅图像中建立多个链接，Dreamweaver中使用的是热区超链接。如果使用Fireworks制作图像，就可以直接在Fireworks中完成热区链接的设置，并且生成相应的HTML源代码，插入到网页文件中。图片上添加了URL链接的部位称为热区，一组添加了一个或多个热区的图片称为图像映射图或简称图像映像。在Fireworks中创建图像映像通常有以下几个步骤：①

2、首先创建或打开希望作为图像映像的图像，必须将它保存为PNG文档；②在该PNG文档中绘制热区；③将热区分别同链接地址相关联；④利用导出操作，将图像以及附属的HTML代码导出；⑤在其他HTML编辑器，例如Dreamweaver中，将导出的图像和HTML代码插入到需要的地方。15.1.1创建热区创建和编辑热区是构建图像映像的关键步骤，一旦打开了一幅PNG文档，即可将之作为图像映像的基础，并在其上绘制热区。要注意的是，必须将包含热区的图像保存为PNG文档后，才能正确保存热区设置。1.创建热区【例15.1】创建热区①打开或创建用作图像映像的PNG文档；②在工具箱中选择需要的热区工具（矩形、椭圆形

3、或多边形），如图15.1所示；③在文档中要创建热区的位置拖动鼠标，绘出热区区域，即可创建热区。图15.2是在图像上创建的热区。提示：在绘制矩形热区和椭圆形热区时，拖动鼠标时同时按下Alt键，即可以将区域中心作为基准点进行绘制。按住Shift拖动鼠标可以建立正方形和圆形热区。注意：热区是以整幅图像为基础的，所以热区可以建立在矢量对象上，也可以建立在位图对象上，不必覆盖整个对象，也可以跨对象建立，也可以建立在空白区域上。在文档窗口中，每个热区也是一个对象，叫热区对象，在图层（Layer）面板中，热区对象建立在WebLayer层中。图15.1图15.22.根据路径生成热区虽然热区与图像对象没

4、有直接关系，但有时希望建立的热区刚好覆盖一个或多个对象，这时，可以依路径生成热区。【例15.2】依路径创建热区①选中要作为热区的一个或多个路径对象；②打开Insert菜单，执行Hotspot命令，或是按Ctrl+Shift+U键。如果选中了一个路径对象，则该对象区域就会被设置为热区。如果选中了多个路径对象，则会弹出对话框，提示选择是将这多个对象区域所覆盖的外接矩形区域设置为热区（Single），还是分别将这多个对象区域构建多个热区(Multiple)。注意:无论路径是矩形还是圆形，通过这种方法生成的热区都是多边形热区。Fireworks会添加多个多边形点来实现热区区域同曲线路径的匹配。

5、15.1.2编辑热区一次创建热区很可能不符合要求，如过大、过小、形状不吻合，或是同需要的区域不够匹配等。这时可以继续对热区进行编辑，使之最终符合要求。前面已说明热区在文档窗口中是热区对象，它和图像对象应同等对待。只不过它不是图像，而是仅描述了一个范围，没有描边、填充、效果属性，形状、位置是它的本质属性。在编辑方面它与图像对象的相应操作完全相同。1.选中热区使用工具箱中选择工具或子选择工具，可以选中热区或热区路径的节点。2.移动热区选中热区，用鼠标拖动热区，即可将之在文档中移动。3.调整热区形状选中热区后，利用选择工具或子选择工具，拖动热区边框上的节点，即可调整热区形状。对于矩形和圆形热

6、区，拖动边框上的节点，仍然会保持矩形和圆形的形状，但大小会改变。如果拖动的是多边形热区边框上的节点，则可以任意改变热区形状。4.改变热区形状类型拖动矩形热区的边框节点，生成的仍然是矩形热区；拖动圆形热区边框上的节点，生成的仍然是圆形热区。而在对象（Object）面板中的Shape（形状）下拉列表中选择形状，则可以改变热区的类型，即可以将矩形热区改变为圆形热区等。注意，应先选中热区。5.热区的变形使用变形工具和变形命令，热区可以像对象一样施行变形操作，如缩放、旋转、翻转、扭曲、斜切等。注意，热区的变形仅仅改变的是热区的形状，对热区原来覆盖的图像没有任何影响，即原来的图像不变形，不移动。6

7、.改变热区颜色默认状态下，为便于观察，热区呈半透明蓝色。选中热区，可以使用对象(Object)面板中的热区对象颜色框来改变显示颜色。7.显示或隐藏热区热区有时可能会影响用户对图像的查看，这时可以隐藏热区，需要的时候再显示热区。工具箱中底部的按钮用于隐藏热区和切片，按钮用于显示热区和切片。还可以使用图层（Layer）面板Web图层中的眼睛图标来显示和隐藏热区。15.1.3为热区创建超链接1.创建超链接【例15.3】在热区上创建超链接①选中要为之创