《web图像处理》ppt课件.ppt

第15章 Web图像处理,15.1 图像映像和热区 15.2 切片 15.3 按钮和导航条 15.4 行为和翻转图像 15.5 图像的优化和导出 思考与练习,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层中图15.1,图15.2,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.3】在热区上创建超链接 ① 选中要为之创建链接的热区； ② 打开Window菜单，选中Object命令，打开对象（Object）面板（见图15.3）；,③ 在“链接地址”文本框中输入链接的目标地址，也可以从后面的下拉列表中选择现有的URL链接； ④ 在“替换文本”文本框中，输入替换文字； ⑤ 在链接目标下拉列表中，选择目标网页在哪个框架集或窗口中被打开。

2. 管理超链接 如果链接的数目不多，那么在对象面板中直接输入链接地址是非常便捷的然而，如果构建的站点较复杂，需要链接地址很多，且一些地址可能反复使用，则每次都直接输入就显得很麻烦，而且容易出错这时可以将这些地址存放在地址库中，需要的时候，只需要从URL面板中选择就可以了 ① 打开Window菜单，选中URL命令，或按Ctrl+Alt+U键，显示URL面板（见图15.4）；,图15.4,② 在“URL库”中选择包含所需URL的库名称； ③ 为热区创建链接选中热区，然后再从URL列表中选中需要的URL，即可将该URL分派到该热区上，从对象面板上可以看到这种变化； ④ 向列表中添加新地址在“链接地址”文本框中直接输入URL，可以为当前热区建立URL链接，单击右边的“+”号即可将该地址添加到URL列表中或单击面板右下角的“添加”按钮来在URL列表中添加新地址； ⑤ 编辑URL 从URL列表中选择要编辑的URL，执行面板菜单的Edit URL（编辑URL）命令，即可以修改列表中的地址； ⑥ 删除URL在URL列表中选中URL地址，单击右下角的“删除URL”按钮即可以删除列表中的URL；,⑦ 操作使用过的URL列表。

在URL面板中，打开“链接地址”下拉列表，可以看到所有曾经使用过的URL，其中有些URL可能已添加到库中，而有些可能尚未添加到库中在面板菜单中选择Add Used URLs to Library（添加使用过的URL到库中）命令，可将曾经使用过的URL列表中所有的URL都添加到该库中选择Clear Unused URLs（清空未使用URL）命令，即可将列表中未被使用过的URL信息全部清除； ⑧ 构建自己的URL库默认状态下，系统本身所带的URL库名为URLs.htm，它的容量虽没什么限制，但有时会希望将不同类别的地址放在不同的库里使用面板菜单New URL Library（新建URL库）命令，可以建立自己的URL库它们被保存到Fireworks安装目录下的Settings|URL Libraries 文件夹中，如果希望删除某个URL库，则可以进入到该目录下，删除相应的HTML文件15.1.4 导出图像映像 【例15.4】导出图像映像 ① 在优化（Optimize）面板中优化图像，并设置图像文件格式为GIF或JPG； ② 打开File菜单，选择Export命令，或是直接单击工具栏上的“导出”按钮，打开Export(导出)对话框（见图15.5）； ③ 选择保存图像和HTML的文件夹，输入文件名，一般图像和HTML文件使用相同的名字，但有不同的后缀； ④ 在“保存类型”选择HTML and Images（HTML和图像）； ⑤ 在HTML中选择Export HTML File，可以单击其后的Option按钮选择文件扩展名；,图15.5,⑥ 没有切片，在Slice（切片）中选择None； ⑦ 如果需要将图像放到某个子目录中，可以选中Put Images in Subfolder(将图像放到子目录中)复选框，并可用Browse（浏览）按钮选择子目录。

默认情况下，HTML和图像文件放在同一个目录中 下面是Fireworks生成的关于图像映像的HTML文件，其中灰色部分是图像映像的代码，可以插入到其他HTML文件中去，插入时注意图像文件所在的目录 flower ,,,15.2 切片,如果页面中的图像较大，在浏览器中下载时就会耗费较长的时间为了避免这种情况，可以将较大的图像分割为多幅较小的图像，这样浏览器就会分别下载图像的各个部分，以提高下载速度这些从大图像上被分割出的图像称作切片（Slice）在网页中可以利用表格等手段将被分割为小块的切片拼接起来，重新显示为一幅完整图像 在网页中使用切片还有以下优点： 由于每个切片实际上是一个图像文件，所以，可以为每个切片建立图像超链接，而不必使用图像映像；,对图像的不同部分，根据质量要求可以使用不同的优化方案，甚至不同的文件格式； 对图像中大片图案相同或颜色相同的区域，不必全部保存，而将这些区域分成大小相同的切片，只需保存一片即可，这样就大大减小整个文件的大小，有利于加快下载速度； 便于重复使用图像，每个切片都可以作为一个单独的图像使用，所以，如果切片制作合理，则对图像中的不同部分，可以重复使用； 可以利用切片制作按钮、悬停按钮和动画。

采用手工分割图像一般是将图像不同部分保存为多个文件，这是非常麻烦的，因为分割图像和拼接图像都必须非常准确，才能做得天衣无缝而在Fireworks中，一切皆由系统完成，所以变得非常简单15.2.1 创建切片 热区是图像中可以创建超链接的一个区域，而切片也划定了一个区域，也可以创建超链接，并且该区域划定的图像将以独立的文件形式保存从网页角度看，热区是由HTML代码划分的，而切片实际上是图像文件如果多个小的图像文件可以拼接在一起组成一幅大的图像，则每个小图像文件就是一个切片，否则，就是独立的图像文件 创建切片的操作同创建热区的操作非常类似，只是创建热区使用的是热区工具，而创建切片使用的是切片工具而已此外，切片只能是矩形，不能是其他形状，虽可以创建多边形的切片，但这种切片实际上也是由矩形拼凑而成的1. 创建矩形切片 矩形切片是将图像分割成矩形区域，它是最常用的切片 【例15.5】创建切片 ① 在工具箱上，选择“矩形切片”工具（见图15.6）； ② 在文档中拖动鼠标，勾画出一个矩形区域，即可生成矩形切片绘制的区域被半透明绿色所覆盖，称作切片对象，Fireworks同时会根据切片对象的位置，对图像进行分割，分割线呈现红色，称为切片参考线（Guide），参见图15.7； ③ 如果创建其他切片对象，可以重复上面的操作。

图15.6,图15.7,注意： “切片文件”和“切片对象”是不同的概念切片文件是导出操作之后生成的文件，而切片对象是在文档中利用切片工具绘制的对象；切片文件始终是矩形的，而切片对象则可以是矩形，也可以是多边形如果切片对象是多边形，则对应图像文件的矩形大小就是该多边形外接矩形的大小切片对象是真正的对象，它存在于文档的Web Layer 图层中有时也简称“切片”，这时如果在文档中，指的即是切片对象，而如果在导出时称呼切片，则指的是切片文件 2. 基于路径对象的矩形切片 手工绘制的切片可能会比所覆盖的对象区域或大或小，如果希望切片对象的区域同路径对象所在的矩形区域完全吻合，可以根据路径对象的形状直接构建切片① 根据路径对象的形状选中构建切片的路径； ② 执行Insert。