FW与DW结合使用细谈

　　Dreamweaver和Fireworks是Macromedia公司的网页制作利器，它们之间具有强大的兼容性，这种无缝连接的特性大大减少了网页设计者进行软件切换的时间，使网页制作和图像处理的效率得到了有效的提高。它们独特的集成功能使得在Fireworks与Dreamweaver之中交替处理文件变得十分容易。Dreamweaver和Fireworks识别和共享许多相同的文件编辑结果，其中包括对链接、图像映射、表格切片等的更改。这两个应用程序共同为在HTML页面中编辑、优化和放置网页图形文件提供了一个优化的工作流程。

　　这里我们将细细介绍Dreamweaver和Fireworks方便快捷的结合使用，领会这两炳利刃的合璧所产生的强大威力，从而为将来实际中的网站建设打下一定的基础。下面我们就来详细了解一下Fireworks MX 2004与Dreamweaver MX 2004结合使用的知识和技巧。文章末尾提供原文件供大家下载参考。

　　
　　文章导读：

　　一、用Dreamweaver占位符创建Fireworks文件
　　二、向Dreamweaver中插入Fireworks HTML
　　三、更新Dreamweaver中的Fireworks HTML
　　四、将Fireworks文件导出到Dreamweaver库
　　五、设Fireworks为Dreamweaver外部图像编辑器
　　六、在Dreamweaver中编辑Fireworks文件

　　详细内容：

　　一、使用Dreamweaver占位符创建Fireworks文件

　　图像占位符允许用户指定Dreamweaver中将来放置的Fireworks图像的大小和位置，可以让我们在网页创建最终的图片之前尝试采用各种不同的网页布局，从而将Fireworks和 Dreamweaver的功能综合运用，发挥二者的强大功能。

　　在使用Dreamweaver图像占位符创建Fireworks图像时，系统会用与所选占位符尺寸相同的画布创建一个新的Fireworks文档。一旦Fireworks使用结束并且返回到 Dreamweaver，所创建的新Fireworks图形即会取代最初选择的图像占位符。

　　使用Dreamweaver占位符创建Fireworks文件的具体步骤：

　　第一步：在Dreamweaver MX 2004中，将所需的HTML文档保存到当前站点下。将光标定位在文档中需要插入Fireworks文件的位置并依次选择“Insert”-〉“Image Objects”-〉“Image Placeholder”选项。然后跳出图像占位符对话框，用户可以如图1所示设置图像占位符的名称、颜色、大小替换文本等内容。

图1 图像占位符对话框

　　第二步：单击“OK”，图像占位符即会插入到Dreamweaver文档中，如图2所示。

图2 图像占位符

　　第三步：点击图像占位符属性面板上的按钮，Fireworks MX 2004被启动，出现图3所示的文件窗口。

图3 Fireworks中的图像占位符

　　第四步：在 Fireworks 中创建图像，完成后单击“Done”。如图4所示,在“另存为”对话框中指定源png文件的名称和位置，然后单击“保存”。

图4 指定图像源文件

　　第五步：在“Export”对话框中命名导出的图像文件，这些文件是将在Dreamweaver中显示的jpeg或gif文件。然后为导出的图像文件指定位置，所选的位置应在Dreamweaver的站点文件夹内。如果已经输入了图像占位符的名称，则该名称在 Fireworks中将用作默认文件名，如图5所示。

图5 导出文件

　　第六步：单击“保存”按钮，返回到Dreamweaver，所创建的新Fireworks图像就会取代最初选择的图像占位符，如图6所示。

图6 Fireworks图像取代了图像占位符

　　二、 Dreamweaver中插入Fireworks HTML

　　将Fireworks HTML插入到Dreamweaver中有许多不同的方法。用户可以将Fireworks HTML复制到剪贴板；或者利用菜单或者“Insert”面板来直接插入Fireworks HTML文件；也可以在Dreamweaver中打开导出的Fireworks HTML文件，然后复制并粘贴所选的代码片段；另外使用 Fireworks中的“Update HTML”命令还可以轻松地更新导出到Dreamweaver的代码，甚至可以将HTML 导出为Dreamweaver库项目。这些方法各有千秋，用户可以根据具体情况作出选择。

　　具体应用：　　

　　1. 将Fireworks HTML复制到剪贴板在Dreamweaver中使用

图7 导出对话框中选择复制到剪贴板

　　将Fireworks HTML放到Dreamweaver中的一种快速方法是将其从Fireworks复制到剪贴板上，然后直接粘贴到Dreamweaver文档中。我们可以用两种方法在Fireworks中复制HTML代码到剪贴板。一种是可以使用“Edit”菜单下的“Copy HTML Code”，另一种是在“Export”对话框中HTML选项中选择“Copy to Clipboard”（复制到剪贴板）选项，如图7所示。这样就可以将Fireworks HTML复制到剪贴板并在指定的位置生成相关的图像文件，然后可以在Dreamweaver中将该HTML粘贴到文档中。所有与Fireworks文档相关的HTML和JavaScript代码都复制到Dreamweaver文档中，图像导出到指定的位置，而Dreamweaver将用这些图像的站点相对链接更新HTML。

　　2. 直接将Fireworks HTML插入到Dreamweaver中

　　若要将Fireworks HTML文件直接插入到Dreamweaver中可按如下步骤操作：

　　首先需要将Fireworks HTML文件导出到已定义的Dreamweaver站点中，将光标放在文档中要插入的位置。选择“Insert” -> “Image Objects”->“Fireworks HTML”或者在插入面板的“Common”类别中单击插入图像按钮旁边的倒三角形，这时会弹出图8所示的下拉菜单。

图8 下拉菜单

　　选择插入Fireworks HTML的按钮图标，会出现如图9所示的对话框，单击“Browse”选项，选择所需的Fireworks HTML文件，然后单击“OK”即可将HTML代码连同它的相关图像、切片和JavaScript 一起插入到Dreamweaver文档中了。

　　如果插入后不再需要Fireworks HTML文件，请选择“Delete file after insertion”（插入后删除文件）选项。此选项不会影响与HTML文件关联的PNG源文件。

图9“插入Fireworks HTML”对话框

　　3. 从Fireworks HTML中复制代码并粘贴到Dreamweaver中

　　另一种方法是在Dreamweaver中打开导出的Fireworks HTML文件，然后将所需的部分复制并在另一个Dreamweaver文档中粘贴就可以了。

　　 三、更新Dreamweaver中的Fireworks HTML

　　若使用“File”菜单下的“Update HTML”选项，用户可以在Fireworks中编辑PNG源图像，然后自动更新任何放置在Dreamweaver文档中已导出的HTML代码和图像文件。值得一提的是，它甚至可以在 Dreamweaver不运行的情况下用来更新文件，有点像在word文档中可以直接对插入的excel图表进行修改一样，这可以给设计者带来极大的方便。

　　下面我们就来看看具体的步骤：

　　第一步：如图10所示，打开Fireworks文件更改所需修改的文档。

图10 修改图像

　　第二步：选择“File”->“Update HTML” ，然后会出现如图11所示的对话框，定位到有需要更新的HTML的Dreamweaver 文件，然后单击“打开”。

图11 定位到要更新的HTML文件

　　第三步：这时在跳出图12所示的对话框，选择“Replace images and associated HTML”（替换图像及其HTML）或者“Update images only”（仅更新图像），单击“OK”。

图12 更新HTML对话框

　　然后再定位到要放置需要更新的图像文件的目标文件夹，单击“打开”，如图13所示。这样我们就更新的所需要更新的图像或者图像及其HTML文件了。

图13定位要放置需更新的图像文件的目标文件夹