Dreamweaver 4 与 Fireworks 4 完美结合（三）

输出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->aste插入图层。 Dreamweaver中的CSS图层的深度由Fireworks中图层的顺序所决定的。在CSS图层中，编号高的图层放在编号低的图层的上面。当然你可以人为的改变这个排放顺序。 另一种通过利用Fireworks4中的帧导出成Dreamweaver中的CSS图层的方法上面介绍的方法类似，当用户需要在Dreamweaver中建立复杂的Show-Hide（显示-隐藏）图层行为时可用此方法，具体的在此我也不详细介绍了，大家自己动手试试吧，或许在您以后的工作中会起到一些小小的用处。输出Fireworks文件为Dreamweaver的库对象Dreamweaver中的库对象是一个非常有用的封装的HTML包，一个库对象中可能包含上百条代码，如果您要去一条条地理解修改的话将会是一个费时费力的过程。在Dreamweaver中，库对象被作为一个整体来对待，因此设计者们只需要关心一个元素就可以。使用Dreamweaver库对象就可以在插入Fireworks输出内容的时候免去对代码的处理，其中还可以包括最复杂的行为。 在Fireworks中导出Dreamweaver的库对象的处理方法如下： 1、 使用菜单命令File->Export，显示Export对话框。2、 在保存类型的下拉列表中选择Dreamweaver Library(.lbi)。 3、 在slices选项里有三个选择，分别为： a) None（无切分）：将文档输出为只有一个图片组成的库对象，而不管文档中是否包含切片对象或是行为。 b) Export Slices（输出切片对象）：根据文档中的切片设置输出包含切片的或是行为的库对象。c) Slice Alone Guide（沿辅助线切分）：根据辅助线设置切分图片来输出库对象。4、 其他几个复选框的选项同上二节所述相同，不再重复。 5、 点击保存按钮导出该库对象文件，于此同时Fireworks会提示你，必须将导出的库文件放置到你的站点目录中单独的Library目录中，选定你的库目录后，Fireworks会将导出的文件放置于你指定的库目录中。 在Fireworks中当文档被作为Dreamweaver4库对象导出后，非常容易将其插入到Dreamweaver的页面中，您按以下步骤进行操作： 1、 在Dreamweaver4中，打开要插入导出的库对象的页面文件。 2、 如果当前文档窗口中没有Library面板，使用菜单命令Window->Library，或在Dreamweaver Launcher中单击Library图标。 3、 此时在Library中就会显示出该库对象。 4、 在需要插入库对象的地方放置光标，从Library面板中选择库对象，点击Library面板中的Insert按钮或是从面板中直接把库对象拖到当前页面需要的位置，此时库对象被加入到页面中，并且处于选中状态。您可以在页面中自由移动由Fireworks4生成的库对象，代码也会根据需要移动。 Dreamweaver库对象的最大一个特别就是它的可编辑性，这个特性有些类似于Fireworks中的Symbol的属性。编辑一个库对象，则Dreamweaver就会自动更新所有使用该对象的Web页面。一般图像的修改操作可以从Dreamweaver的属性面板中单击Edit（编辑）按钮，而库对象图像的修改而必须先\"解锁\"。 要编辑一个库对象，可以按如下步骤进行操作： 1、 选中图像，再从属性面板中点击Edit按钮。如果文件不是PNG格式的，Fireworks会询问用户是否需要打开源文件进行编辑，并且给用户一个机会去选择，选中的PNG文件将会自动在Fireworks4中打开。 2、 根据需要在Fireworks4中修改文件。 3、 完成后，使用菜单命令File->Update。修改后的文件自动在Dreamweaver的库对象文件中进行更新。 4、 在Dreamweaver中，使用菜单命令File->Save，保存该库对象5、 Dreamweaver将会注意到该库对象已经做过了修改，它会询问是否要更新本站点中所有包含该库对象的Web页面文件。如果需要更新所有包含该库对象的页面的话，单击Yes，如果以后希望再进行更新，则点击No。 如果选择了以后更新库对象，那么您可以在以后任何时候想更新的话，只需要使用菜单命令Modify->Library->Update Pages就可以了。