Dreamweaver 4 与 Fireworks 4 完美结合（四）
在Dreamweaver4中调用和编辑Fireworks4生成的图像 在Dreamweaver4您可以可以直接启动Fireworks4编辑由Fireworks4生成的图像文件，在Fireworks4中完成编辑后，保存图像并且在Dreamweaver4中会进行自动更新。 在Dreamweaver4中调用Fireworks4来编辑图像文件的操作方法如下所示： 1、 在Dreamweaver4的打开页面文件，并且用鼠标点击选择需要进行编辑的图像文件。 2、 执行下面的其中一项操作： 点击属性面板中的Edit按钮，如果当前文档中属性面板不存在，可以使用菜单命令 Window -> Properties打开Properties（属性）面板，键盘快捷方式为Ctrl+F3。 按住Ctrl键不放，同时双击需要到Fireworks4中进行编辑的图像文件 在图像文件上点击鼠标右键，在显示的上下文相关菜单中，选择Edit With Fireworks4命令。 3、 如果Dreamweaver中找不到Fireworks的源文件，将会给出提出窗口，让您选择并确认源PNG文件。如果此时Fireworks4软件没有启动，将会自动启动Fireworks4。 4、 此时的Fireworks4的文档窗口中会打开，并可以编辑Dreamweave4中选择图像的源PNG文件。在此之前，Fireworks4将识别和保存此前在Dreamweaver4中对Fireworks4图像文件所做过的修改。 5、 在Fireworks4中完成编辑后，您可以通过点击Fireworks4文档窗口左上角的Done按钮保存修改后的图像文件，或者使用菜单命令File->Update，键盘快捷方式为Ctrl+S来保存图像文件，在Dreamweaver4中会完成相应的图像更新。http://it365cn.com/articleimg/100-1.gif
6、或许您会问该图像是以什么优化格式输出的呢，在上面的步骤中我们并没有进行设置呀？如果您想修改图像文件的格式，如把GIF格式的图像重新输出成JPEG格式的图像，这又该如何进行操作呢？其实修改后的文件使用此时Fireworks4中Optimize（优化）面板中的设置进行输出，您可以在保存前，通过改变优化输出设置来确定图像输出格式，如果您改变了文件的输出格式，在Dreamweaver4也会自动完成全部的图像文件链新的更新，速度非常不错。 在操作过程中有一点需要注意，如果您在Dreamweaver4的Site（站点）窗口中打开图像文件进行编辑，那么上述提到的Dreamweaver4和Fireworks4的一些协作属性将不起作用。即使该图像文件是由Fireworks4生成的文件并且有与之相关联的源PNG格式文件都没有用的。因为使用Dreamweaver4和Fireworks4的协作特性仅在Dreamweaver4的文档窗口中起作用。 在Dreamweaver4中调用和编辑Fireworks4生成的表格 Fireworks4能输出成HTML的页面文件，页面文件中必定会包含表格，当您在Dreamweaver4中打开该由Fireworks4生成的页面文件，在Dreamweaver的属性面板中可以很方便地观察到该页面中哪些内容属于Fireworks4文件，例如，由Fireworks4生成的表格将会在属性面板中明确显示出\\\"Fireworks Table\\\"。 而且Fireworks4还会自动识别和保护在Dreamweaver4中对Fireworks4文件所做过的修改，例如超级链接、图像地图等等。 在Fireworks4中将源PNG文件按照输出形式Image and HTML输出到Dreamweaver4站点中，在Dreamweaver4中打开该HTML文件，编辑由Fireworks4生成的表格的一部分，例如其中的某一个切片，Fireworks4将会启动并自动调用源PNG打开整个图像进行编辑。 在Dreamweaver4中调用和编辑由Fireworks4生成的表格的操作方法如下所示： 1、 首先在Dreamweaver4中打开由Fireworks4生成的页面文件，并且使用菜单命令 Window -> Properties打开Properties（属性）面板，键盘快捷方式为Ctrl+F3，打开Properties（属性）面板。 2、 执行下面的其中一项操作： 在表格内部任意位置处单击，选择Dreamweaver4文档窗口左下角状态栏里的标签，这样就选择了整个表格。如果是由Fireworks4生成的表格将会在属性面板中明确显示\\\"Fireworks Table\\\"并显示相关链的源PNG文件名。点击属性面板中的Edit按钮。如下图所示。
http://it365cn.com/articleimg/100-2.gif
点击表格的左上角的表格边框选中整个表格。如果是由Fireworks4生成的表格将会在属性面板中明确显示\\\"Fireworks Table\\\"并显示相关链的源PNG文件名。点击属性面板中的Edit按钮。 按住Ctrl键不放，同时双击希望编辑的Fireworks4生成的切片选择的图像文件。 在表格中的任意图像文件上点击鼠标右键，在显示的上下文相关菜单中，选择Edit With Fireworks4命令。 如果此时您的机器中没有打开Fireworks4软件，Dreamweaver4将会自动启动Fireworks4，与表格相关链的源PNG文件自动在文档窗口中打开。 3、 在Fireworks4的文档窗口对打开的Dreamweave4中选择图像的源PNG文件进行编辑。在此之前，Fireworks4将识别和保存此前在Dreamweaver4中对Fireworks4图像文件所做过的修改。 4、 完成编辑后，点击Fireworks4文档窗口左上角的Done按钮保存文件，或者使用菜单命令File->Update，键盘快捷方式为Ctrl+S来保存文件。更新后的文件按照当前的优化设置和属性设置输出HTML和切片文件，自动在Dreamweaver4的文件中更新，并保存修改后的PNG文件。自动更新Dreamweaver4中使用的Fireworks HTML代码 Fireworks4和Dreamweaver4结合使用的又一大特色就是您可以在不打开Dreamwaver4页面文件的情况下，通过Fireworks4来更新该页面的图像和HTML代码。 在Fireworks4中，使用菜单命令 File -> Update HTML，此时Fireworks4会自动将Dreamweaver4中使用的与之关联的图像或表格进行代码更新。该命令可以让您对源PNG文件的修改能直接应用到源PNG对应的网页中去，而不必再对页面进行编辑。 自动更新Dreamweaver4中使用的Fireworks HTML代码的操作方法如下： 1、 在Fireworks4中打开源PNG文件，进行相应的编辑修改后使用菜单命令File>Update HTML（文件->更新HTML文件）。 2、 在弹出的Locate HTML File窗口中查找当前需要更新的页面，找到后点击打开按钮。 3、 此时会弹出Update HTML对话框，该对话框中有二个选项： Replace images and HTML（替换图像和HTML文件）：选择该选项会弹出另外一个窗口确定要保存图像的文件夹。此时可以把图像保存到站点中的另外文件夹中去。 Fireworks4可以在不打开Dreamweaver4的情况下自动更新Dreamweaver4中对应的图像、HTML和JavaScript代码。 Update images only（只更新图像文件）：仅仅只是更新图像文件，因为不会有类似于上面一个选项的对话框出现。
http://it365cn.com/articleimg/100-3.gif
别外还有一种情况，在弹出的Locate HTML File窗口中查找当前需要更新的页面，如果Fireworks4无法在选定的当前需要更新的页面中更新HTML代码，这就说明有可能当前页面文件不包含该Fireworks4文件。此时将会给出一个警告框，如果选择确定按钮，Fireworks4会自动将该Fireworks4文件中的JavaScript代码放在页面的起始部分，将HTML代码放在页面的尾部，并且指定图像文件夹。选择取消按钮，则就放弃这次操作。
页:
[1]