化整为零──网页图片分割完全手册
网络与通信
很多网站的封面都是一张大图，但你却看到，通常这张大图都是一块一块出现的，被设计师分割成了许多小块，他们为什么要这么做呢？
●加快网页下载速度
一张大图从上至下一点点地出现，无法实现抢先预览。并且一旦下载意外中断，又得从头来过。而如果我们使用切割图，在浏览时可同时下载这些切割后的小图片，不需要等它完全显示就可以通过其中的一格或者数格图片知道该图的具体内容，如果某一部分下载失败，只需重新下载那一部分即可，大大节省浏览者的等待时间。
●方便快捷地维护
当一个主要由图片组成的页面上某个部分需要更改时(可能只是一个小按钮或什么细节部分)，如果你切割了图片，就只需新上传修改过的那个部分图片就可以了，而不必重新上传整个大图。
●快速更新整个网站
如果我们在切割图片前进行了很好的规划，那么我们可以完全控制切割后的网站效果，不论是导航条，背景图，还是各种边框我们都可以在Fireworks中制作并控制。一旦需要修改，只要更改这几个图片就可以赋予整个网站新的风格。
●最佳的图片效果
大家都知道JPG与GIF这两种图片格式各有优缺点，GIF格式适于颜色简单的图形，JPG格式适于颜色复杂的照片。如果在一个页面中我们既有颜色很简单的也有颜色非常复杂的部分时，我们就可以将此图片切割，指定颜色简单的部分输出为GIF格式，其他部分输出为JPG格式，非常完美地解决这个问题。
既然分割图片有这么多好处，那么请看下去吧。我们将谈一谈如何使用Fireworks MX在Dreamweaver中做到这一切。
一、切割简单的网站大图
所谓简单的网站大图，指的是除去图片内容之外，没有过多的按钮，导航以及结合HTML文字等元素的网站效果图片。对于这样的图片我们基本不需要设置切割范围，可以由Fireworks MX自动完成切割。
步骤1：打开Fireworks MX，并使用菜单命令File→open打开设计好的网站效果图。调整图形的显示比率，使之完全处于工作区域中。
步骤2：使用菜单命令，View→Rulers显示出标尺，再使用菜单命令View→Guides→Show Guides显示辅助线，使用鼠标从标尺向图形拖曳就可以拖出一条辅助线。你可以双击它以精确定位。继续拖曳一些辅助线将它分成几个部分(如（图1）)。
步骤3：使用菜单命令，File→Export打开Export 对话框，在选择了输出图片的路径后，点击保存类型后的下拉框，在弹出的下拉菜单中选择Html and Images选项。点击下部的Slices后的下拉框，在下拉菜单中选择Slices Along Guides(按照辅助线切割图片)。点击OK按钮，图片被切割后输出，所有输出的图片都按照切割的次序加以命名(如（图2）)。
我们可以在Dreamweaver中打开输出的HTML文件查看切割后的效果，你会发现所有的切割图片都被一个表格重新拼合为一张完整的图片。
二、切割复杂的页面效果图
复杂的网站页面效果图，指的是除去图片内容之外，还有很多的按钮、链接、导航或者是结合HTML文字等元素的网站效果图片。对于这样的图片我们应当经过充分的构思确定出大概的切割区域后再开始切割。
步骤1：打开并调整好网站效果图。
步骤2：考虑好怎样进行切割以达到最佳的效果，以我们的实例来看，应当将中心放置文本的区域切出来，用于放置文字；而左上角的按钮应当切割做链接，至于网站的名称与版权也应当进行切割，以便于今后的修改。
步骤3：在想好大致的切割方法后就可以开始动手了。先选择图片中心的矩形区域，然后使用菜单命令Edit→Insert→Slice，就可以在这个矩形区域上添加一个切片。我们可以使用这样的方法给每一个单独的元件加上切片(如（图3）)。
步骤4：使用同样的方法给左上方的方形按钮添加切片。我们还可以同时将两个元件切成一个切片，按住键盘的Shift键分别点击网站的标题“涂”、“鸦”，这时我们选择了这两个元件，同样使用菜单命令Edit→Insert→Slice，Fireworks MX会弹出一个对话框，提示你选择了多个元件，是分别进行切片还是切割为一个切片，选择Single，完成切片(如（图4）)。
步骤5：但是有的时候我们要将一个元件切割为两个切片，这时候就应该使用手工切片了。在工具栏上选择Slice Tool，注意如果在Slice Tool的图标上按住鼠标不放，将会出现两个选项，第一个是矩形切片，第二个是多边形切片，可以根据具体需要进行选择。选择矩形切片，拖曳鼠标就可以绘制一个矩形切割区域，为图片上的人像制作切片(如（图5）)。
步骤6：现在切片做得差不多了，但是应当注意到左下角的笔筒被切割成了很多小的切片，其中左上角部分被切割在文本区域内不能更改，但是其他部分有些过于凌乱了，为了便于今后的修改，我们应当把它集中到尽可能少的切片当中。使用多边形切片工具，点击鼠标确定多边形的顶点，双击鼠标结束顶点的设置，将笔筒的剩余部分切割为一个多边形的切片。
步骤7：好了，我们现在完成了所有的切片工作，可以输出文件了。在完成工作后请一定注意将源图片以PNG无损压缩格式保存起来，这样才能为以后的修改提供可靠的依据。
三、输出切片时的设置与技巧
在前面我们说过，我们可以根据对图片不同的要求与效果选择输出的图片格式，并且为它们添加链接等信息以减少在Dreamweaver中再编辑时的工作量。下面就来看看具体应该怎样做。
步骤1：打开前面进行过切片处理的PNG格式图片，鼠标选择任意一个切片，在工作区域下方的Properties面板上可以看到关于此切片的信息(如（图6）)。
步骤2：在Slice Export Option下拉框中可以选择此切片输出的格式，可以根据不同需要进行选择。在Links后面的文本框中可以输入此图片的链接地址，Alt后的文本框中可以输入此图片的信息，Target后下拉框可以选择打开链接文件的窗口。其实这些选项与HTML标记语言中的意义是相同的，就不多说了，按照自己的需要进行设置吧。
步骤3：在你设置链接的时候一定会有很多重复使用的链接地址，比如网站的首页，总是要重复地输入也未免太麻烦了一点，没关系，我们可以使用Fireworks MX的Asset上面板来帮助我们。我们可以使用菜单命令Window→URL打开它。
步骤4：选择一个切片，在完成对其Link设置以后，例如此Link地址为index.htm，你经常需要使用这个链接地址，那么在Assets 面板的URL选项卡中点击加号，我们可以看到链接地址index.htm已经被加入到Library中(如（图7）)。再选择一个未设置链接的切片，现在你只需要点击一下index.htm就可以把链接加上了。
