Fireworks网页切片应用资料.docxVIP

Fireworks 网页切片应用详解 Fireworks 网页切片应用详解 Fireworks 网页切片应用详解 我们这里所说之 我们这里所说之切片（Slice）就是将一幅大图像分割为一些小之图像切片，然后在网页中通过没有间距和宽度之 表格重新将这些小之图像没有缝隙之拼接起来，成为一幅完整之图像。这样做可以减低图像之大小，减少网页之下 载时间，并且能创造交互之效果，如翻转图像等，还能将图像之一些区域用html 来代替。Fireworks 在网页切片制 作方面有很强之优势，今天我们就来仔细看看Fireworks 网页切片全攻略。 一、切片在网页制作中之作用 一、切片在网页制作中之作用 在网页上之图片较大之时候，浏览器下载整个图片之话需要花很长之时间，切片之使用使得整个图片分为多 在网页上之图片较大之时候，浏览器下载整个图片之话需要花很长之时间，切片之使用使得整个图片分为多 个不同之小图片分开下载，这样下载之时间就大大之缩短了，能够节约很多时间。在目前互联网带宽还受到条件限 制之情况下，运用切片来减少网页下载时间而又不影响图片之效果，这不能不说是一个两全其美之办法了。 除了减少下载时间之外，切片也还有其他一些优点： 除了减少下载时间之外，切片也还有其他一些优点： 制作动态效果：利用切片可以制作出各种交互效果。例如前面将之按钮之这种状态其实最后导出之文件实质 制作动态效果：利用切片可以制作出各种交互效果。例如前面将之按钮之这种状态其实最后导出之文件实质 上就是不同状态之切片。 优化图像：完整之图像只能使用一种文件格式，应用一种优化方式，而对于作为切片之各幅小图片我们就可 以分别对其优化，并根据各幅切片之情况还可以存为不同之文件格式。这样既能够保证图片质量，有能够使得图片 变小。 创建链接：切片制作好了之后，就可以对不同之切片制作不同之链接了，而不需要在大之图片上创建热区了。 二、创建切片 二、创建切片 使用Fireworks 工具箱上之切片工具可以为已经制作好之图片创建切片。如图1 所示，切片工具有两类，分 使用Fireworks 工具箱上之切片工具可以为已经制作好之图片创建切片。如图1 所示，切片工具有两类，分 别为“矩形切片”工具（Slice tool）和“多边形切片”工具（Polygon Slice tool）。 下面我们分别就这两类热区工具之使用作介绍。 下面我们分别就这两类热区工具之使用作介绍。 图 1 两类切片工具 图 1 两类切片工具 1. 创建矩形切片 1. 创建矩形切片 首先打开图像，选择工具箱上之之切片工具，在图像之适当位置上按下鼠标左键并拖动绘制一个矩形区域，当 首先打开图像，选择工具箱上之之切片工具，在图像之适当位置上按下鼠标左键并拖动绘制一个矩形区域，当 矩形大小适当时释放鼠标，这样就生成了一个切片，如图2 所示。该切片区域被半透明之绿色所覆盖，称为切片对 象，另外Fireworks 根据切片对象之位置以红色分割线对图像进行了分割，称为切片向导。 图 2 绘制矩形切片 图 2 绘制矩形切片 要使切片与对象区域紧密匹配，可以和热点一样先选中要制作成为切片之对象，然后点击“Edit” 要使切片与对象区域紧密匹配，可以和热点一样先选中要制作成为切片之对象，然后点击“Edit”菜单，选 择“Insert”-“Slice”；如果选择了多个对象，则会出现一个如图3 所示之对话框，选择“Multiple”按钮， 可以创建多个切片，如图 4 所示。 图 3 提示对话框 图 3 提示对话框 图 4 制作多个切片 图 4 制作多个切片 2. 创建多边形切片 如图 5 所示，打开一幅图像，可以利用多边形切片工具在多边形之每个顶点单击制作多边形切片，如图6 所示。 图 5 打开图像 图 5 打开图像 图 6 创建多边形切片 图 6 创建多边形切片 由上图可见，图像中之切片向导仍然是水平和垂直之，生成之切片文件也还是矩形之。实际上多边形切片之 由上图可见，图像中之切片向导仍然是水平和垂直之，生成之切片文件也还是矩形之。实际上多边形切片之 形状主要是用于设置相应之行为触发区域之。如果切片对象被设置了链接，那么在浏览器中显示之时候，只有点击 到多边形区域时才会实现链接跳转，而在这个切片之其他区域则不会出现链接跳转。 同理，如果切片和对象区域完全符合或者说用户是基于路径对象制作切片，只需点击“编辑”菜单，再选择 同理，如果切片和对象区域完全符合或者说用户是基于路径对象制作切片，只需点击“编辑”菜单，再选择 “Insert”-“Slice”即可。 三、编辑切片 三、编辑切片 和热区之编辑非常类似，如果要选取切片，可以利用指针工具、部分选定工具来选中它，也可以使用层面板来 和热区之编辑非常类似，如果要选取切片，可以利用指针工具、部