用Fireworks切割图形 　　做过网页的朋友一定都知道：网站好，网页就得小。在不减少内容的情况下，网页当能够做得越小越好。而给网页瘦身最有效方法就是减小图片的尺寸，但当您不得不在网页中放入一大幅图象时，是否还有更好的解 决之道呢？ 　　切图就是一个不错的方法，为了尽量保持图形的完整又不庞大，我们可以将一整幅图片按照相近的色区切割成多个小图片，并将每个小图片保 存为色深较浅的gif 图形。这样可以达到又漂亮又快捷的效果。 　　但传统的切图工作十分繁琐，许多设计者都是使用Photoshop类软件将图一片片分好，然后在分别保存为不同色深的gif图象，虽然可以使用action之类的自动执行命令集，但实际工作量依旧十分惊人，而且非常容易切错尺寸。 　　现在用了Fireworks就可以非常轻松地切割图片了，首先用Fireworks 打开要切割地图形文件（File > Open），当图片打开后选择工具栏最右下方的切割工具（SliceTool），在图中按住鼠标左键任意画出想要的切割效果（注意不要将选区重叠），图中那些红线表示就是最后生成的表格分栏情况。 　　等全部的切割区域完成后选择“FILE > EXPORT”进入导出，在Format 中选择gif，再根据图象的具体情况设置色深、调色板和透明色，然后按下 “Next”。 　　最后再导出成HTML文件的对话框中指定保存的目录，在“slicing:” 选项中选择“Use Slice Objects:”按照刚才划分出的切割情况来切图， 并分别保存。在“Style选项”中选择“Generic”导出成标准的HTML源码。 OK，如果要和Dreamwever一同使用的话，可以选择“Dreamweaver Libra- ry.lbi”将导出为DREAMWEAVER2的一个模板，而“Dreamweaver” 选项将 导出成DREAMWEAVER作出来的网页源码。 　　就这样，仅几秒种的时间，就完成了一个非常专业的图形切割。怎么样，您是不是感受到了Fireworks的强大功能。

用Fireworks制作具有动态效果的切图

　　在上一章中，我们说到用fireworks2进行切图，可以将一个大图片分割成不同色深的多个小图片，并且生成相应的网页文件或代码，从而减小网页的重量。今天我要接着告诉您的是，功能强大的fireworks2不仅可以制作静态切图，更能够导出javascript动态特效！

　　打开monitor.gif 件后你可以看到那上面画的是一个电视机，现在我们要做的是将这个电视机放入一个网页，并且当浏览者的鼠标按下电视机上的开关后，会在屏幕中播放内容。

　　第一步，要在图象上制作用来调用javascript的热区，制作热区的方和上一章中切割图象的方法一样，都是使用工具栏最右下方的切割工具 （ SliceTool）。由于我们设想中的这个javascript是通过按下电视机开关后在屏幕上出现变化，所以需要定义两个热区，分别是电视机开关和电视机屏幕。

　　然后选择“windows > Object”（Ctrl+I）选项，打开Object面板。先选中电视屏幕的热区，Object面板即将显示这个热区的属性，其中的连接地址默认为 “No URL(noHREF)”也就是当前网页的连接（#）；项内容为鼠标放到图片上时显示的提示；这下面那个红色的靶心是target ， 用来确定连接标签的目标的，在这儿就不多说了；最关键的是：不要激活 target下的“Auto-Name Slices”功能，而需手动给这个切割热区起一个名字，这样做是为了在指定behavior时能够方便的辨认目标。还要注意的是在给slice命名时，不能使用中文，否则生成的javascript 代码会在浏览器中长时间报错。在这个例子中我给屏幕热区起的名字是“screen”，再以同样的方法给电视开关取名为“button”。

　　接着做一个电视上要显示的图象，选择“File > New”（Ctrl+N）命令新建一个和屏幕热区大小相同的图片（注意：尺寸过大或过小都会被 javascript缩放到屏幕热区的大小）。新建文件后，您可以使用工具栏上各类工具随心所欲地画出自己喜欢的东东（工具栏中各个绘图工具的使用方法将在以后的教程中做详细介绍）。对自己的作品满意了吗？您画完后 请选择“File > Export”（Ctrl+Shift+R）将图象导出为网络图形。

　　Fireworks的图象导出功能非常强大，但现在您只要一路NEXT就可以了，并将生成的gif文件保存到指定的目录下。

　　然后回到我们刚才编辑的电视机画面，选定开关热区，再选择“ Windows > Behaviors”（Ctrl+Alt+H）选项，打开behaviors面板。按下添加按钮，选择“Swap Image”，在随后弹出的Swap Image对话框中的“ Swap Image in Slice”选项中选择“screen”热区（也可以在右边的热区画面中直接选择screen热区，这样做就可以让button热区调用一个使 screen 热区产生变化的javascript）；在“Source of Swap”中选择“Image File”并在浏览面板中指定刚才制作的那个gif图象。最后激活“Restor Image onMouseOut”（激活这个功能后，浏览者将鼠标离开调用javascript 的热区后，发生变化的图象将恢复正常。

　　当上面这步完成后，behaviors面板中将出现一个 “OnMouseOver”的件处理器，这就说明刚才做的热区已经成功调用了javascript。但我们期的效果是当鼠标按下开关后才在电视屏幕中显示内容，所以请按下“ OnMouseOver”旁的下拉菜单按钮，在弹出的菜单中选择“OnClick”。好，到这儿基本上该完工了。想看看作品的效果如何吗？选择“File > Preview in Browser > Preview in ...”（F12）命令，就可以在新窗口 中预览刚才的作品了。

　　达到预期效果了吗？满意的话就可以导出成品了，这儿有个小技巧，由于fireworks的预览功能已经生成了临时的图形和HTML文件，所以如您使用IE5行预览的话，可以直接在自己满意的预览窗口中将所以文另存，就可以免去导出步骤而得到完整的作品了。如果您没有IE，那只能乖乖地使用导出功能，具体地导出方法和我们在上一章中所说的静态切图的导出方法相同，在这儿就步重复了。