文/Donger

　　Fireworks4与Dreamweaver4的结合使用--
　　　　在Dreamweaver4中应用Fireworks4文件

　　输出Fireworks文件为CSS样式表层

　　Fireworks中有另一种类型的导出方法，尽管不只限于Dreamweaver，但是非常适合于Dreamweaver-Fireworks工作流程，这就是Fireworks能直接导出图片到Cascading Style Sheet(CSS)图层。CSS图层是一个自由浮点结构，可以在任何版本4以上的浏览器中显示。CSS图层中几个值得注意的特性：

　　1、 位置：图层以及它们包含的内容是可以精确放置的，这使得在页面中的布局远比用传统的HTML使用表格方法容易的多。
　　

　　2、深度：图层之间可以彼此堆叠，它们的深度（深度指层与层之间的上下关系）可以动态地改变。

　　3、 可视性：图层可以根据实际情况或者作者的意愿隐藏或显示。

　　4、图层可以动态放置，并且可以在屏幕上随意移动。

　　在Fireworks4中可以通过二种不同的方法导出Dreamweaver的CSS图层：导出Fireworks图层和导出Fireworks帧。
下面我们重点介绍一下利用Fireworks4中的图层导出成Dreamweaver中的CSS图层的方法，过程如下：

　　1、 新建Fireworks4文档，在同一个层中放置几个不同的对象，当然可以是矢量对象，也可以是导入的位图对象，根据你的实际需要吧。

　　2、 使用键盘快捷方式Ctrl+A,全选这些对象， 然后使用菜单命令Command->Document->Distribute to Layers，这个命令是作用是把选定的对象分布到每个层中去。

　　3、 如果有需要的话，调整对象在各个层中的位置，您还可以给图层重新命名，因为Fireworks中的图层中将会作为下面Dreamweaver中的CSS图层名称。

　　4、 使用菜单命令File->Export，此时Export对话框出现。

　　5、 在保存类型的下拉列表中选择CSS Layers(.htm)

　　6、 在Source下拉列表中选择Fireworks Layers。

　　7、 如果您希望每个图片保持在帧中的相对位置的话，你必须取消对Trim Image复选项的选择。如果您希望每个图像对象的左上角对齐，则应该选中此复选框。

　　8、 Put Image in Subfolder复选项的使用和上一节中一样，您可以点击Browse按钮在站点中选择保存图像文件的子文件夹。

　　9、 设置完后点击保存按钮，此时每个位于Fireworks4中的图层对象都会作为一个单独的图像保存，CSS图层信息也用HTML代码形式写出。

　　10、 接下来回到Dreamweaver中，打开这个由Fireworks生成的HTML页面。

　　11、 您可以使用下面二种方法在页面上选择所有的CSS图层：

　　在Dreamweaver 的Layers面板中按住Shift键并点击每个图层。

　　在Dreamweaver的文档窗口中按住Shift键点击每个CSS图层符号。

　　12、 使用菜单命令Edit->Copy复制所选中的图层。

　　13、 打开目标Web页面，使用菜单命令Edit->Paste插入图层。
Dreamweaver中的CSS图层的深度由Fireworks中图层的顺序所决定的。在CSS图层中，编号高的图层放在编号低的图层的上面。当然你可以人为的改变这个排放顺序。

　　另一种通过利用Fireworks4中的帧导出成Dreamweaver中的CSS图层的方法上面介绍的方法类似，当用户需要在Dreamweaver中建立复杂的Show-Hide（显示-隐藏）图层行为时可用此方法，具体的在此我也不详细介绍了，大家自己动手试试吧，或许在您以后的工作中会起到一些小小的用处。