Dreamweaver 4 与 Fireworks 4 完美结合（五）
在Dreamweaver4中优化Fireworks4生成的图像文件 应用到Web页面中的图像文件一般都不能太大，因为受到网络带宽的限制，因此就必须对图像文件需要进行压缩处理。Dreamweaver和Fireworks结合使用的又一大特色就是可以在Dreamweaver4中快速调用Fireworks4的图像优化输出功能，而不必运行完整的Fireworks4。Dreamweaver4中的Optimize Image in Fireworks（在Fireworks中优化图像）命令就是用来完成这个功能的。该图像优化输出功能可以对当前选定的图像进行缩放、裁切、改变图像格式等操作，还可以完成改变图像颜色及动画控制操作功能，大大方便了随时对图像进行的一些网络适用性调整。 Optimize对话框中具有Fireworks4的Export Preview对话框中的所有功能，看上去样子也差不多。只有一点点小的变化，Fireworks4中的Export Preview对话框右下角的Export按钮和OK按钮不在了，变成了一个Update按钮。 Fireworks4和Dreamweaver4中的优化图像的对话框的区别在于：在Fireworks4中，使用菜单命令File->Export Preview（文件->输出预览），在Export Preview对话框中对图像的各项属性进行设置后点击Export按钮，又会弹出一个Export 对话框，在对话框中您可以根据需要选择Slicing和HTML模板选项。而在Dreamweaver中的Optimize命令中对于这些选项的设置只能依赖于您最后在Fireworks4中对这些选项的设置，自己本身并不能进行改变。http://it365cn.com/articleimg/101-1.gif
在Dreamweaver4中对图像文件使用Optimize Image in Fireworks4优化命令以前，先要确定当前页面文件被保存过一次。页面的当前状态可以不保存，但必须在硬盘中存在一个有效的文件才能使该命令正常运行。如果当前页面从来没有被保存过，使用Optimize Image in Fireworks4命令时，Dreamweaver4将会弹出警告窗口提示用户保存文件。 在Dreamweaver4中优化Fireworks4生成的图像文件的具体操作步骤如下所示： 1、 在Dreamweaver4中打开页面文件，用鼠标点击选择想要优化的图像文件。 2、 选择菜单命令Commands>Optimize Image in Fireworks…或者选择图像文件单击右键，在显示的上下文相关菜单中，选择Optimize Image in Fireworks…命令。 3、 如果有弹出信息框，确认是否调用源PNG图像进行修改。单击NO按钮，继续优化GIF或是JPEG图片。单击YES按钮，Dreamweaver4会自动查找该Fireworks4源PNG文件，如果找不到，将会弹出另一个对话框，让您选择某个PNG格式源文件并单击打开按钮继续操作。 4、 在Optimize对话框中，对Options、File、Animation选项卡中进行必要的修改。 5、 完成修改之后单击Update按钮，如果正在处理的是Fireworks4源PNG文件，所做的修改将同时存储到源PNG文件和导出的文件中，否则只对导出的文件进行修改。 如果在Optimize对话框中对图像的尺寸大小进行了修改或是执行了裁切操作，则必须在Dreamweaver4调整修改后图像的宽度和高度值，单击属性面板中Refresh按钮即可。在Dreamweaver4中使用Fireworks4行为 在Fireworks4输出的页面文件中可以包含JavaScript代码，当然这JavaScript不是我们自己加的，而是在Fireworks4中对特定的对象应用行为而由Fireworks4自己写进去的。这个JavaScript代码是标准的Dreamweaver代码，可以在Dreamweaver中被识别。或许有人会问代码能被Dreamweaver识别有什么好处呢？如果Dreamweaver4可以将Fireworks4中设置的行为象自身的行为一样来对待，那么就可以方便地在Dreamweaver4中编辑和修改在Fireworks4中定义的参数。 如果想要查看Fireworks4内置的行为，您可以打开Behavior面板，点击\"+\"按钮进行查看。 简单介绍一下这些行为的作用：
http://it365cn.com/articleimg/101-2.gif
Simple Rollover（简单的反转图效果）：当用户的鼠标通过图片时，图片自动发生替换，在Fireworks4中默认的是自动用第二帧中的图片替换掉第一帧中的图片。 Swap Image（图片交换效果）：这其实就是复杂的图片翻转效果，可以用指定帧、指定位置的图片替换当前位置的图片。也可以用外部文档图片替换掉当前文档中的任意位置、任意帧中的图片。 Set Nav Bar Image（设置导航条图片）：这组行为可以用在设定所选切片应该处于何种导航条状态。 Set Pop-Up Menu（设置弹出菜单效果）：这是Fireworks4 新增的一种行为，可以创作出简单的弹出下拉菜单效果。 Set Text of Status Bar（设置状态条文本）：设定在浏览器的状态栏显示的文字信息。 一般我们在切片或热点上设定的行为会显示在Fireworks4的Behavior（行为）面板，我们可以在此对它进行调整，包括修改行为设置和修改默认的事件设置。 下面我们用Fireworks4内置行为中的 Swap Image 来举个例子。例如我们在Fireworks4中做了如下图所示的一个效果：当鼠标移到圆形对象上去时，替换第二个Frame（帧）的图像。把它保存到Dreamweaver中的站点文件中。
http://it365cn.com/articleimg/101-3.gif
在Dreamweaver4中打开这个HTML文件，选中这个图像对象，打开Behaviors面板，此时您就会发现该面板与Fireworks4中的Behaviors面板非常的相似，所完成的功能也是一样的。
http://it365cn.com/articleimg/101-4.gif
对于所有的Fireworks4行为，Dreamweaver 4都会在文件中自动插入别一个行为：Proload Image。在Dreamweaver4的页面状态中选择标签，Behaviors面板中就会显示出这个行为的。 Dreamweaver4对每个行为的修改都使用不同的对话框，但是整个所做的过程却是相似的。在Dreamweave4中您可以象对使用Dreamweaver4自身的行为一样来编辑和修改在原本在Fireworks4中生成的行为，改变行为的触发事件等等，这一切显得非常的方便易用。
页:
[1]