结合Dreamweaver,Fireworks概述
独特的结合特性使得应用Macromeida Dreamweaver 4 和 Fireworks 4进行交互协作制作网页,对于您而言将非常的得心应手.Dreamweaver 和 Fireworks能够共享和管理HTML文件中的许多内容,例如链接,图像地图,切片,网页特效等等.使用Dreamweaver 和 Fireworks将大大提高您网页设计和编辑的效率,结合两者为您提供了一个高效的工作流程.
如果您希望在Dreamweaver中修改Fireworks生成的图像和表格,你可以调用Fireworks进行修改,修改后的内容将自动在Dreamweaver中完成更新,这样,您就不需要再手工的一点点重新整理和编辑了.如果您仅仅需要优化一下图像,您可以快速的调用Fireworks提供的图像优化对话框(而不必打开图像软件),输入新的设置,简单快捷的完成图像的优化.
在Dreamweaver中应用Fireworks文件
您可以使用不同的方式在Dreamweaver中通过插入(insert)命令放置Fireworks图像文件或HTML文件.在Fireworks中,您也可以通过输出(export)命令,直接将文件放置到Dreamweaver定义的站点文件夹中,提供Dreamweaver的后续调用.
在Dreamweaver中插入Fireworks图像
您可以在Dreamweaver中直接插入Fireworks生成的GIF, JPEG, 或 PNG 图像.
插入Fireworks图像:
| 1 |
在Dreamweaver文件中,将光标放置在您需要插入图像的位置. |
| 2 |
选择下列的一项操作: |
 |
选择菜单 Insert -> Image (插入 -> 图像). |
|
点击对象面板的"一般类别"中的"插入图像"按钮(Objects panel: Common category:Insert Image). |
| 3 |
在弹出的对话框中选择您希望插入的Fireworks图像,点击 Open(打开) 按钮. |
|
如果您选择的Fireworks图像不在当前的Dreamweaver站点中,Dreamweaver将弹出信息框,询问是否将文件复制到当前站点下. |
 |
|
在Dreamweaver中插入Fireworks的HTML文件
您可以在Dreamweaver中插入Fireworks的HTML文件.Fireworks的HTML文件中包括了关联的图像链接,切片信息,和javascipt脚本语言.插入HTML文件使您在Dreamweaver页面中非常方便的加入Fireworks生成的图像和网页特效.
插入Fireworks HTML文件:
| 1 |
在Dreamweaver中,首先在您的站点中保存当前文件. |
| 2 |
将光标放置在你希望插入HTML文件的地方. |
| 3 |
选择下列的一项操作: |
|
选择菜单Insert -> Interactive Images -> Fireworks HTML (插入 -> 交互图像 -> Fireworks HTML). |
|
点击对象面板的"一般类别"中的"插入Fireworks HTML"按钮(Objects panel: Common category:Insert Fireworks HTML). |
| 4 |
在弹出对话框,点击 Browse(浏览) 选择您希望的Fireworks HTML文件. |
| 5 |
如果选中对话框下的Delete File After Insertion(插入后删除文件)选项,HTML文件插入页面后,源文件将被删除(放入垃圾箱 Recycle Bin (Windows操作系统) 或 垃圾箱 Trash (Macintosh操作系统). |
|
使用该选项前请确认您不再需要使用源HTML文件.该选项不影响图像文件.仅仅删除单独的HTML源文件. |
|
注: 如果HTML源文件在网络驱动器(network drive),将被永久删除,不会放入垃圾箱. |
| 6 |
点击 OK 按钮插入HTML文件.插入时包含了HTML源文件关联的图像,切片和JavaScript脚本语言. |
|
|
在Dreamweaver中复制和粘贴Fireworks HTML文件
一个快速的方法是直接复制和粘贴Fireworks HTML文件.
复制和粘贴Fireworks HTML文件:
| 1 |
在Fireworks中,选择菜单 Edit -> Copy HTML Code (编辑 -> 复制HTML源代码). |
| 2 |
按照向导完成设置. |
|
向导将图像输出到您的文件夹,将HTML源代码复制到剪贴板. |
| 3 |
在Dreamweaver中,将光标放置在你希望插入Fireworks HTML文件的地方,选择 Edit -> Paste (编辑 -> 粘贴). |
|
所有的HTML源文件中关联的图像和JavaScript脚本语言都默认的输入到Dreamweaver文件中.图像的链接自动完成更新. |
|
|
输出和粘贴Fireworks HTML文件到Dreamweaver:
| 1 |
在Fireworks中, 选择 File -> Export (文件 -> 输出). |
| 2 |
在输出对话框中,确定您输出文件和图像的Dreamweaver站点下的相关文件夹. |
| 3 |
在Save as(另存为)的下拉框中选择HTML and Images格式. |
| 4 |
在HTML的下拉框中选择Copy to Clipboard 方式. |
| 5 |
在Dreamweaver中,将光标放置在你希望插入Fireworks HTML文件的地方,选择 Edit -> Paste (编辑 -> 粘贴). |
|
所有的HTML源文件中关联的图像和JavaScript脚本语言都默认的输入到Dreamweaver文件中.图像的链接自动完成更新. |
|
|
输出Fireworks文件到Dreamweaver
Fireworks中的File -> Export命令让您可以输出和保存优化后的图像以及HTML文件到您希望的Dreamweaver站点相关文件夹下.您可以在Dreamweaver打开输出后的文件进行编辑.
您可以选择将Fireworks文件输出为CSS样式表层(Cascading Style Sheet layers)或Dreamweaver的库文件.(Dreameraver库文件一般包含站点页面中经常使用或经常更新的一些对象,例如导航栏等.库对象实际上是一段对应的HTML代码,存放在固定命名为Library的文件夹下.你可以简单的在页面编辑时,拖拽使用库对象.)
输出Fireworks图像和HTML文件:
| 1 |
在Fireworks中,选择菜单 File -> Export (文件 -> 输出). |
| 2 |
在Save as(另存为)的下拉框中选择HTML and Images格式. |
| 3 |
在HTML的下拉框中选择Export HTML File 方式. |
| 4 |
确定输出的Dreamweaver站点下的文件夹. |
| 5 |
点击 Save 按钮输出文件. |
|
|
输出Fireworks文件为CSS样式表层:
| 1 |
在Fireworks中,选择菜单 File -> Export (文件 -> 输出). |
| 2 |
在Save as(另存为)的下拉框中选择CSS Layers (.htm)格式. |
| 3 |
确定输出的Dreamweaver站点下的文件夹. |
| 4 |
点击 Save 按钮输出文件. |
|
|
输出Fireworks文件为Dreamweaver的库对象:
| 1 |
在Fireworks中,选择菜单 File -> Export (文件 -> 输出). |
| 2 |
在Save as(另存为)的下拉框中选择Dreamweaver Library (.lbi)格式.
 |
| 3 |
选择Dreamweaver站点根目录下的Library文件夹输出. |
|
如果您还没有Library文件夹,Fireworks询问是否创建. |
| 4 |
点击 Save 按钮输出文件. |
|
|
在Dreamweaver中调用Fireworks
在Dreamweaver中调用Fireworks
你可以在Dreamweaver中直接调用Fireworks对Fireworks生成的图像,切片,表格进行编辑和处理.调用Fireworks您需要在Dreamweaver中将Fireworks设为主扩展图像编辑器.
在Dreamweaver中将Fireworks设置为主扩展图像编辑器
Dreamweaver 4 提供了属性设置,可以决定编辑Dreamweaver页面中的图像所使用的软件.如果您希望能在Fireworks中编辑对网络图像格式GIF,JPEG,PNG进行快速编辑,您需要对应的将这几种格式的主图像编辑器设为Fireworks.
如果您使用的是Fireworks 4以前的版本,在Dreamweaver中进行扩展图像编辑将有影响.Fireworks 3不支持表格和切片的编辑.Fireworks 2不支持PNG格式的编辑.
在Dreamweaver 4中将Fireworks 4设置为主扩展图像编辑器:
| 1 |
在Dreamweaver中,选择菜单 Edit -> Preferences (编辑 -> 属性),选择 Types/Editors(类型/编辑器). |
| 2 |
在Extensions(文件扩展名)列表中,选择网络图像格式(.gif, .jpg, or .png). |
| 3 |
在Editors(编辑器)列表中,选择Fireworks 4,点击 Make Primary(设为主编辑器) 按钮.
 |
| 4 |
重复2,3步骤,你可以对其他文件格式进行设置. |
|
|
关于设计注释和源文件
当您在Fireworks中将源PNG文件按照一定形式(例如 Image and HTML)输出到Dreamweaver站点,Fireworks会自动添加输出文件的设计注释(Design Note).注释中包含了相关的信息,也包含了与源PNG文件的关联.
当您在Dreamweaver对Fireworks输出的文件进行编辑,Dreamweaver通过设计注释,自动调用源PNG图像.所以,建议您将网络图像源PNG文件一起保存在您设计的站点下.这样,下次对页面相应的Fireworks文件进行修改时,或者是小组远程协作时,Fireworks总能正确的找到并打开源PNG文件进行编辑,更新页面.
对Fireworks的源PNG文件进行调用和编辑属性的设置
设置Fireworks的调用和编辑(launch-and-edit)属性可以让您定义在其他应用程序,例如Macromedia Director或Dreamweaver,打开源PNG的方式.
定义Fireworks调用和编辑(launch-and-edit)属性:
| 1 |
在Fireworks中,选择菜单 Edit -> Preferences(编辑 -> 属性),点击 Launch and Edit (调用和编辑)标签(Windows操作系统) 或在下拉框中选择 Launch and Edit(调用和编辑)(Macintosh操作系统). |
| 2 |
定义在外部应用程序编辑和优化Fireworks文件时,源PNG的属性: |
|
Always Use Source PNG(总是使用源文件) 在外部程序中,调用Fireworks编辑Fireworks文件时,通过设计注释自动调用源PNG文件.编辑后同步更新外部程序中的图像和源PNG. |
|
Never Use Source PNG(不使用源文件) 在外部程序中,调用Fireworks编辑Fireworks文件时,不使用源文件(所以可以没有源PNG).编辑后仅仅对外部应用程序中的Fireworks文件更新,不改变源PNG. |
|
Ask When Launching(调用时询问) 在外部程序中,调用Fireworks编辑Fireworks文件时,显示对话询问.. |
|
|
在Dreamweaver中编辑Fireworks文件
在Dreamweaver中编辑Fireworks文件
您可以在Dreamweaver直接调用Fireworks编辑Fireworks生成的文件.完成编辑后,自动在Dreamweaver中进行更新.
Fireworks能够识别和保护在Dreamweaver中已经对Fireworks文件做过的改动,例如链接,图像地图,文字切片等等.利用Dreamweaver的属性监测器(Property inspector)您可以观察哪些内容属于Fireworks文件.例如,Fireworks生成的表格将在属性监测器中明确显示"Fireworks Table".
编辑Fireworks生成的图像
您可以在Dreamweaver中调用Fireworks编辑图像.
在Dreamweaver中调用和编辑Fireworks生成的图像:
| 1 |
在Dreamweaver中,选择菜单 Window -> Properties (窗口 -> 属性),打开属性监测器. |
| 2 |
选择下列的一项操作: |
|
选择图像(属性监测器将确认图像是否是Fireworks文件,如果是Fireworks生成的图像,显示关联的源PNG文件名).在属性监测器点击 Edit(编辑) 按钮.
 |
|
按住 Control 键(Windows操作系统) 或 Command 键(Macintosh操作系统), 双击您希望编辑的图像. |
|
鼠标右键(Windows操作系统) 或鼠标Control键 (Macintosh操作系统)点击您希望编辑的图像,在弹出菜单中选择 Edit With Fireworks 4 (使用Fireworks 4编辑). |
|
如果此时您没有正在使用Fireworks,Dreamweaver将自动调用Fireworks. |
| 3 |
如果有弹出信息框,请确认打开源PNG的方式. |
| 4 |
在Fireworks中编辑图像.Fireworks文件窗口显示您当前正在编辑Dreamweaver中的图像. |
|
Fireworks将识别和保存此前在Dreamweaver中对Fireworks文件做过的修改. |
| 5 |
当您完成编辑后,点击文件窗口中的 Done 按钮进行相应的Dreamweaver更新. |
|
点击 Done 将更新Dreamweaver的图像.更新后的图像使用此时Fireworks中的优化面板设置的格式和属性进行输出. |
|
注: 如果您在Dreamweaver的站点(Site)窗口打开图像文件进行编辑,上述提到的Dreamweaver和Fireworks的一些协作属性将不起作用.即使该图像文件时Fireworks生成的文件并且有关联的源PNG,Fireworks也不会打开源PNG.使用Dreamweaver和Fireworks的协作特性仅在Dreamweaver的文件窗口产生作用. |
|
|
编辑Fireworks生成的表格
当您调用Fireworks编辑Fireworks生成的表格的一部分,例如其中的某一个切片,Fireworks自动调用源PNG打开整个表格进行编辑.
在Dreamweaver中调用和编辑Fireworks生成的表格:
| 1 |
在Dreamweaver中,选择菜单 Window -> Properties (窗口 -> 属性),打开属性监测器. |
| 2 |
选择下列的一项操作: |
|
在您希望编辑的表格内部点击一下,选择Dreamweaver文件窗口左下角的状态栏里的 TABLE 标签选中整个表格.(属性监测器将确认表格是否是Fireworks文件,如果是Fireworks生成的表格,显示关联的源PNG文件名).在属性监测器点击 Edit(编辑) 按钮. |
|
点击表格的左上角表格边框选中表格(属性监测器将确认表格是否是Fireworks文件,如果是Fireworks生成的表格,显示关联的源PNG文件名).在属性监测器点击 Edit(编辑) 按钮. |
|
选择表格中您希望编辑的切片(属性监测器将确认表格是否是Fireworks文件,如果是Fireworks生成的表格,显示关联的源PNG文件名).在属性监测器点击 Edit(编辑) 按钮. |
|
按住 Control 键(Windows操作系统) 或 Command 键(Macintosh操作系统), 双击您希望编辑的Fireworks生成的切片. |
|
在您希望编辑的切片上点击鼠标右键 (Windows操作系统) 或 鼠标控制键 (Macintosh操作系统),在弹出菜单中选择 Edit With Fireworks 4 (使用Fireworks 4 编辑)命令. |
|
如果此时您没有正在使用Fireworks,Dreamweaver将自动调用Fireworks. 与表格关联的源PNG文件自动在文件窗口打开. |
| 3 |
在Fireworks中编辑图像.Fireworks文件窗口显示您当前正在编辑Dreamweaver中的图像. |
|
Fireworks将识别和保存此前在Dreamweaver中对Fireworks文件做过的修改. |
| 4 |
当您完成编辑后,点击文件窗口中的 Done 按钮进行相应的Dreamweaver更新. |
|
点击 Done 按钮将按照当前的优化设置和属性设置输出HTML和切片文件,自动在Dreamweaver的文件中更新,并保存修改后的PNG文件. |
|
|
优化Dreamweaver中Fireworks生成的图像
|
