Dreamweaver 4 与 Fireworks 4 完美结合（二）
在Dreamweaver4中插入Fireworks4图像文件如果您稍微有一点Dreamweaver知识的话，您就会知道Dreamweaver4的Object（对象）面板的Common（常用）对象集合中有一个Insert Image（插入图像）按钮,可以让您非常方便地插入由Fireworks4生成的GIF、JPEG或是PNG格式的图像。(注：当然也可以插入不是由Fireworks4生成的图像文件，这个按钮的作用是在Dreamweaver中插入图像文件。) 在Dreamweaver4的页面文件中插入Fireworks4的图像文件可以按如下步骤进行操作： 1、 当前的Dreamweaver页面文件中，将光标移动到需要插入图像的位置单击。 2、 使用菜单命令Insert->Image（插入->图像）或是打开Object（对象）面板，点击Common（常用）类型中的Insert Image （插入图像）按钮。 3、 在弹出的查找范围对话框中选择您想插入的图片，对话框右边的Image Preview中您可以对进行图片进行预览。点击Select按钮打开图片。 如果您选择的Fireworks4的图像文件不在当前的Dreamweaver4站点中，Dreamweaver4将弹出信息框，询问是否将文件复制到当前站点下。 在Dreamweaver4中插入Fireworks4的HTML文件在Dreamweaver4中，Object（对象）面板的Common（常用）对象集合中有一个Fireworks4徽标http://it365cn.com/articleimg/98-1.gif
点击这个按钮您就可以在Dreamweaver4中插入Fireworks4生成的HTML文件。Fireworks4的HTML文件中包括了与此相关联图像的链接、图像的切片信息及JavaScript脚本语言。该命令可以让您在Dreamweaver4页面中非常方便地加入由Fireworks4生成的图像和网页特效及HTML代码。在Dreamweaver4的页面文件中插入Fireworks4的HTML文件可以按如下步骤进行操作： 1、 在Dreamweaver4中，首先在您的站点中保存当前文件。 2、 将光标放置在你需要插入Fireworks HTML文件的地方。 3、 用菜单命令Insert>Interactive Image>Fireworks HTML（插入->交互式的图像-> Fireworks HTML）或是打开Object（对象）面板，点击Common（常用）类型中的Insert Fireworks HTML （插入Fireworks HTML）按钮。 4、 在弹出的对话框，单击Browse按钮，选择需要插入的Fireworks HTML文件。
http://it365cn.com/articleimg/98-2.gif
对话框的下面有一个Delete File After Insertion复选框，如果选中了这个复选框，当前HTML文件被插入到页面后，源HTML文件将会被放入回收站中。使用该选项前您需要确认是否不再需要使用这个源HTML文件。该选项不会影响到图像文件，仅仅只是删除单独的HTML文件。如果该源HTML文件位于网络驱动器（Network Drive），该文件将会被永久地删除，不会放入回收中，因此请小心使用。Dreamweaver4中复制和粘贴Fireworks HTML文件想要在Dreamweaver4中插入Fireworks HTML文件，最快速方便的一个方法就是通过直接复制和粘贴Fireworks HTML文件。这种方法和以前通过在Dreamweaver中插入图像和HTML代码的方法有很大的不同，因为它是通过拷贝粘贴来完成的。 在Dreamweaver4中复制和粘贴Fireworks HTML文件您可以按如下步骤进行操作： 1、 在Fireworks4中，对已经完成准备输出到Dreamweaver4的文件使用菜单命令 Edit -> Copy HTML Code，快捷方式为Ctrl+Alt+C。2、 此时会显示Copy HTML Code（拷贝HTML代码）向导，该向导将会输入您的图像文件和拷贝与此相关链的HTML文件和JavaScript到剪贴板中，您可以把它们粘贴到您的HTML编辑器中。首先您需要选择HTML编辑器，在下拉列表中选择Dreamweaver。点击Next按钮。
http://it365cn.com/articleimg/98-3.gif
http://it365cn.com/articleimg/98-4.gif
3、 在切片基础文件名称输入框中输入切片的基础文件名。这个基础文件名将会应用到每个切片中，文件的扩展名是自动生成的。您可以点击HTML Setup按钮对HTML属性进行高级的设定。完成设置后点击Next按钮。如上右图。 4、 点击Browse按钮，在你当前的Web站点中选择输出图像的文件夹，当你的图像被输出后，HTML代码将会被拷贝到剪贴板。点击Finish按钮。 5、 打开Dreamweaver文件，将光标放置到需要插入Fireworks HTML文件的地方，使用菜单命令Edit>Paste。此时所有的与该HTML源文件相关联的图像及JavaScript脚本语言都默认的输入到Dreamweaver文件中，图像的链接自动完成更新。 与此相似的，在Fireworks4中您可以通过Export命令来复制和粘贴Fireworks HTML文件，方法如下： 1、 在Fireworks4中，对已经完成准备输出到Dreamweaver4的文件使用菜单命令File->Export（文件->输出）。 2、 在Export输出对话框中，确定您输出文件和图像的Dreamweaver站点下的相关文件夹中。 3、 在保存类型下拉列表中选择HTML and Images方法。 4、 然后在HTML的下拉列表中选择Copy to Clipboard 方式。 5、 打开Dreamweaver文件，将光标放置到需要插入Fireworks HTML文件的地方，使用菜单命令Edit>Paste。此时所有的与该HTML源文件相关联的图像及JavaScript脚本语言都默认的输入到Dreamweaver文件中，图像的链接自动完成更新。 输出Fireworks图像和HTML文件通常来说在Fireworks4中输出文件很容易，而且可以输出很多种格式的图像或是网页文件。菜单命令File -> Export（文件->输出）让您可以输出和保存优化后的图像以及HTML文件到您希望的Dreamweaver站点相关文件夹下，这样您就可以在Dreamweaver中打开该网页文件进行必要的编辑了。 在Fireworks4中输入图像和HTML文件您可以按如下步骤进行操作： 1、 在Fireworks4中对将要进行输出的文档文件使用菜单命令File->Export（文件->输出）默认的键盘快捷方式为Ctrl+Shift+R。
http://it365cn.com/articleimg/98-5.gif
2、 在文件名输入框中输入该HTML文件的名字。 3、 在保存类型的下拉列表中选择HTML and Image方式。 4、 在HTML下拉列表中选择Export HTML File方式。 5、 Slices选项里有三个选择，分别为： a) None（无切分）：将文档输出为只有一个图片组成的HTML文档，而不管文档中是否包含切片对象。 b) Export Slices（输出切片对象）：根据文档中的切片设置输出包含切片的HTML文档。 c) Slice Alone Guide（沿辅助线切分）：根据辅助线设置切分图片。 一般情况下我们若将文档输出为HTML文件，Export Slices是较好的选择；Slice Along Guides的作用是根据文档中的辅助线设置，将图片划分成许多小图片，但并不会加入任何行为，而且在使用Slice Along Guide选项前必须先设置辅助线。 6、 在进行输出设置时还有一些复选项选项，也一并介绍： a、Selected Slices Only：仅仅只导出当前被选定的切片。 b、Current Frames Only：仅仅只导出当前帧。 c、Include Areas without Slices：导出时也包含无切片区域。 d、Put Images In Subfolder：将导出的图像文件放在站点中的子文件夹中，点击下面的browse按钮可以选择当前站点中的子文件夹，允许设置HTML文件在上一级目录。7、点击保存按钮输出文件。
页:
[1]