Fireworks网页切片应用详解(1)

　一、切片在网页制作中的作用　　 在网页上的图片较大的时候，浏览器下载整个图片的话需要花很长的时间，切片的使用使得整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩短了，能够节约很多时间。在目前互联网带宽还受到条件限制的情况下，运用切片来减少网页下载时间而又不影响图片的效果，这不能不说是一个两全其美的办法了。　　 除了减少下载时间之外，切片也还有其他一些优点：　　* 制作动态效果：利用切片可以制作出各种交互效果。例如前面将的按钮的这种状态其实最后导出的文件实质上就是不同状态的切片。　　* 优化图像：完整的图像只能使用一种文件格式，应用一种优化方式，而对于作为切片的各幅小图片我们就可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，有能够使得图片变小。　　* 创建链接：切片制作好了之后，就可以对不同的切片制作不同的链接了，而不需要在大的图片上创建热区了。

　　二、创建切片
　　 使用Fireworks工具箱上的切片工具可以为已经制作好的图片创建切片。如图1所示，切片工具有两类，分别为“矩形切片”工具（Slice tool）和“多边形切片”工具（Polygon Slice tool）。　　 下面我们分别就这两类热区工具的使用作介绍。

% i+ i% Q/ l: s) }$ E, K0 T
; l. s. I% h/ |# Y图1 两类切片工具　　1. 创建矩形切片　　首先打开图像，选择工具箱上的的切片工具，在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域，当矩形大小适当时释放鼠标，这样就生成了一个切片，如图2所示。该切片区域被半透明的绿色所覆盖，称为切片对象，另外Fireworks根据切片对象的位置以红色分割线对图像进行了分割，称为切片向导。


图2 绘制矩形切片　　 要使切片与对象区域紧密匹配，可以和热点一样先选中要制作成为切片的对象，然后点击“Edit”菜单，选择“Insert”->“Slice”；如果选择了多个对象，则会出现一个如图3所示的对话框，选择“Multiple”按钮，可以创建多个切片，如图4所示。

% M+ b! _0 B9 G5 x0 g0 Q
图3 提示对话框


图4 制作多个切片

+ I; l+ }9 x9 P& F3 ~[1][2][3]下一页


' m$ ], U+ G! B/ i# K2. 创建多边形切片　　如图5所示，打开一幅图像，可以利用多边形切片工具在多边形的每个顶点单击制作多边形切片，如图6所示。
, ?9 }5 P* e% \4 Z) t
; B  d+ Z* n' C- s$ a, B) P" d' k
. U3 l& a9 p9 h: t0 r图5打开图像

, q$ t5 o# B9 U6 C' Q* Q
- K# F0 O0 f3 I. q图6 创建多边形切片
( ?; l* g! E4 J- d& D+ q7 k　　 由上图可见，图像中的切片向导仍然是水平和垂直的，生成的切片文件也还是矩形的。实际上多边形切片的形状主要是用于设置相应的行为触发区域的。如果切片对象被设置了链接，那么在浏览器中显示的时候，只有点击到多边形区域时才会实现链接跳转，而在这个切片的其他区域则不会出现链接跳转。　　 同理，如果切片和对象区域完全符合或者说用户是基于路径对象制作切片，只需点击“编辑”菜单，再选择“Insert”->“Slice”即可。

上一页[1][2][3]下一页
9 Y8 y  U' R& k# ?- Y1 `
+ S$ _/ N. F) E9 J. }& s
三、编辑切片
  |$ w2 h/ W6 q
7 Q1 ~, G2 J% F! h　　和热区的编辑非常类似，如果要选取切片，可以利用指针工具、部分选定工具来选中它，也可以使用层面板来进行；选中切片之后，若要移动切片可以利用鼠标、方向键或者属性面板的位置值。　　默认情况下热区是透明的绿色，如果需要改变热切片的颜色，只需要在图7所示的切片属性面板中的切片颜色框中选择所需要的颜色即可。
) Y- C' p, F% r  X1 ]（图7 切片属性面板 图片较大，请拉动滚动条观看）
, x/ e+ _$ {" \　　 在切片属性面板中，类型栏的下拉菜单中有图像和HTML两项，选择HTML会出现图8所示的面板，点击按钮，在图9所示的弹出窗口中设置HTML代码可以创建一个文本链接。
5 b  y( g+ Z* m, v' d. g# S（图8 将切片类型改为HTML 图片较大，请拉动滚动条观看）


图9 Edit HTML Slice对话框
（图10 选择优化方式 图片较大，请拉动滚动条观看）
　　 此外，在属性面板的优化下拉列表中还有几类优化方式，我们可以依据实际情况选择一种优化方式，如图10所示。　　 可以利用工具箱上的隐藏切片和热点工具来将选中的切片隐藏起来，需要显示切片的时候单击显示切片和热点工具即可将切片显示出来。如同热区的显示和隐藏一样，我们同样还可以利用层面板上的眼睛图标显示和隐藏该切片。
　　四、添加链接
　　 为切片添加链接同样有两种方法，一是利用属性面板，二是利用URL面板。当我们选定某个切片之后，我们可以在这两个面板中为该热区设置链接地址和链接属性。方法和热区的链接方法类似，这里不再重复了。

上一页[1][2][3]