繁体中文
设为首页
加入收藏
当前位置:网站制作首页 >> Dreamweaver教程 >> Fireworks是与Dreamweaver结合使用细谈(1)

Fireworks是与Dreamweaver结合使用细谈(1)

2008-01-15 08:00:00  作者:  来源:互联网  浏览次数:0  文字大小:【】【】【
简介:一、使用Dreamweaver占位符创建Fireworks文件   在使用Dreamweaver图像占位符创建Fireworks图像时,系统会用与所选占位符尺寸相同的画布创建一个新的Fireworks文档。一旦Fireworks使用结束并且返回到 Dreamwea...
关键字:Dreamweaver Fireworks

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

  在使用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文档中粘贴就可以了。

责任编辑:admin
相关文章