Fireworks 4.0 认证教程 第十二章 网页制作中

　　【内容提要】
+ ?$ p; I: v! S  d' A( c　　本章介绍Fireworks应用于网页制作的应用，使用Fireworks生成HTML代码，定制HTML代码模板以及与Dreamweaver的集成。学习Fireworks中的效率工具：查找和替换工具、批处理工具的使用。
3 _& J4 P& H% [* \/ j　　主要内容：
　　13. 使用Fireworks生成HTML代码
　　14. Fireworks与Dreamweaver的集成
　　15. 效率工具的使用，包括查找替换工具和批处理工具
1 I8 S/ G$ W& q( s　　重点与难点：
* v1 D+ n% g/ l　　在Fireworks中如何生成HTML代码，与Dreamweaver 的结合应用，效率工具的使用
! m+ R! _2 _# L) v4 h& c" I　　关键字：
/ ?- T  X$ M- M- L  O8 X/ E　　HTML代码、集成、效率工具
$ T3 w8 m! _9 w　　【本课内容】
　　12.1 使用Fireworks生成HTML代码
　　12.1.1 使用Fireworks复制HTML代码
　　1. 单击【Edit】菜单中的【Copy HTML Code】命令，打开\"Copy HTML Code\"对话框。
　　2. 在 \"Choose HTML Editor\"下拉列表中选择相应的代码编辑器，如：\"Dreamweaver\"。如图：
　　
/ u! x  n. h8 l- I1 c0 N
: N0 P1 Z, X2 f, z& G- t8 ?, n; P
　　3. 单击\"Next>\"按钮，进入下一个设置对话框，在文本框中输入导出的切片文件的基础名称。
- \  D; j* l# [! g* i　　4. 单击\"Next>\"按钮，进入下一个设置对话框，单击\"Brower\"按钮，打开\"Select Folder\"对话框，指定图像文件的存放位置。
' L5 V# Z( {1 m0 T  [　　5. 单击\"打开\"按钮，保存图像文件。
　　6. 单击\"Finish\"按钮，将\"HTML\"复制到剪贴板中
2 M) i4 O" v8 H. I　　7. 进入HTML编辑器Dreamweaver中，点击右键的\"粘贴\"，将剪贴板中的HTML代码粘贴到需要的位置，完成复制操作。
　　12.1.2 定制HTML代码模板
　　利用Fireworks定制自己的标准模板，以便生成可以在其他类型的HTML编辑器中直接插入的代码，或者生成具有某种特定风格的HTML代码，这些模板都存放在Fireworks安装目录下的 Configuration\\HTML Code文件夹中，每种模板对应一个文件夹，如图：
6 L0 Z, w6 d( T) A* L　　
$ b# b$ E4 U. x6 @$ [! D# A6 p0 c
; e0 e1 J* Q# |) K4 `, V  X
2 v+ X8 Z& H3 A2 Y) S　　要添加新的模板风格，可以先创建一个文件夹，在其中保存需要的模板文件，在Fireworks中可以使用一下几种文件来定义不同的代码格式：
　　CSSLayers.htt ：该文件用于设置生成的重叠样式表代码的格式。
3 D" Q2 e% Y& k" D3 f/ h* i　　ServerMap.mtt： 该文件用于设置服务器端图像映像代码的格式。
$ V* E5 w; q8 _9 h3 b5 i- J　　Slice.htt ：该文件用于设置切片代码的格式。
/ r! t* I4 R7 S; w5 R$ P0 t　　Metafile.htt：该文件用于设置轮替效果的代码格式。
　　12.2 与Dreamweaver的集成
　　Fireworks与Dreamweaver，Flash合称为网页制作梦工厂，都是Macromedia公司的产品，有着极好的兼容性，在这几个工具之间可以直接调用，进行编辑。本节将介绍如何利用它们的集成特性进行网页的制作。
　　12.2.1在Dreamweaver中插入Fireworks代码
　　要在Dreamweaver正在本节的文档中应用Fireworks的导出结果，只需直接在文档中插入Fireworks生成的HTML代码即可，操作如下：
6 \9 t4 l- o# [3 X4 x, V9 r: }; e7 G　　1. 启动Dreamweaver。
( B8 m1 m8 y7 Q% r　　2. 单击【Insert】菜单中的【Interactive Images】 级联菜单中的【Fireworks HTML】命令，打开\"Insert Fireworks HTML\"对话框。
　　3. 选择需要插入的HTML代码，如图：
　　

& y7 a* N& d- H% l
　　4. 如果希望在插入代码后删除原来位置的代码，则选中\"Delete file after insertion\"复选框。
6 o( j+ s) d+ r　　5. 单击\"OK\"按钮，则插入了HTML 代码，完成操作。
( h% R1 \% Z# R　　12.2.2 在Dreamweaver中编辑Fireworks的图像
, [5 a3 v2 ]" i$ H# |% B# p　　a) 在Dreamweaver文档窗口中，选中要编辑的图像
/ O) t, n$ A% W# `　　b) 用鼠标右键单击图像　，在弹出菜单中点击\"Edit with Fireworks 4\"命令，启动Fireworks来编辑图像。
　　c) 编辑完成，关闭Fireworks，图像自动更新。
　　12.2.3 在Dreamweaver中优化Fireworks导出的图像
  A3 L* M$ x( A+ v0 J! U; Q6 {　　1. 在Dreamweaver的文档窗口中选择图像。
　　2. 单击【Commands】菜单中的【Optimize Image in Fireworks】命令，打开Fireworks的\"Optimize\"对话框进行设置，对图像进行优化。
$ I/ U# @7 E. w5 T　　3. 完成设置，点击\"Update\"按钮，则图像更新完毕。
　　12.3 效率工具
) X  T- w# L& x# _/ V1 g　　12.3.1 查找替换工具
　　利用Fireworks的查找替换工具，可以在一个或多个文档中对指定的元素进行查找和替换，这些属性元素包括文本对象、超链接地址、字体以及颜色等等。
　　操作过程如下：
　　1. 打开要查找和替换的文档。
& V( l' U6 h- X　　2. 单击【Edit】菜单中的【Find and Replace】命令，打开\"Find and Replace\"面板如图：　　


1 a5 m" W2 A& O　　3. 面板中第一个下拉菜单用于指定搜索源，有5种类型：
* w6 d& |4 o. n" r　　Search Selection：仅在文档中被选定的文本和对象中进行查找和替换操作。
1 J" [- O# X' r) p　　Search Frame：在文档中的当前帧中进行查找和替换。
　　Search Document：在当前活动文档中进行查找和替换操作。
4 \8 q) i: |- D$ j% ~. X% l　　Search Project Log：在Fireworks的工程日志列表所列的文档中进行查找和替换操作。
) O2 L: |! q( g6 M* _# ]　　Search Files：在多个文件中进行查找和替换操作。
. U1 y1 n7 b/ u$ t　　4. 在面板中的第二个下拉列表中，用于查找和替换的元素类型，有以下几个选项：
7 ~! X) a- |4 Q( S8 F4 H　　Find Text：将文本对象帧的文本作为查找和替换的目标。
6 Y4 K! n% N  g; C' u6 L7 s　　Find Font：将文本对象中的字符字体属性作为查找和替换的目标。
" Q3 o+ X$ _* \) O4 U　　Find Color：将图像中的元素作为查找和替换的目标。
" M2 `- Y4 d6 \3 w1 t　　Find URL：将文档中的超链接地址作为查找和替换的目标。
　　Find No-Web 216：在文档中找出所有非Web 安全色的区域，并将其替换为最接近的安全色。
　　5. 设置完成，点击\"Find\"按钮；找到以后可单击\"Replace\"按钮，则对找到的
　　目标逐个；若点击\"Replace All\"按钮，则会将所有匹配的目标进行替换。值得注意的是，在多个文档中完成替换操作并保存后，就无法恢复到替换前的状态，所以，在进行替换操作前，最好先备份。查找和替换特性只能应用在Fireworks的PNG文档中，或者其他矢量对象的文档，如：Freehand、CorelDRAW和Illustrator等文档。对于常用的JPEG、GIF等位图是不能进行查找和替换操作的。
　　Fireworks的\"Optimize\"对话框进行设置，
* c2 _& r! y, R7 d9 U- Y" j, f" Q　　12.3.2 批处理工具
8 z# ~# G/ ]& q) ~' Q　　利用Fireworks的批处理工具可以帮助用户一次对多个图像文件进行相同的设置和处理，它可以完成如下操作：
　　1. 将选中文件的格式转换为其他格式。
　　2. 将选中的文件转换我带有不同优化设置的相同格式的文件。
　　3. 缩放导出的文件。
  j" u) J* c- |# s5 x　　4. 查找和替换文档中的文本、元素、超链接地址以及字体等等。
  z: \! A1 P! l5 Z　　批处理工具的使用，操作如下：
　　1. 单击【File】菜单中的【Batch Process】命令，打开\"Batch\"对话框，如图：　　

* N' \1 g6 p, ?
　　2. 双击要进行批处理的文件，文件名将出现在下面的列表框中。
　　3. 单击\"Next\"'按钮，打开下一个对话框，选择批处理操作的执行动作。
2 \$ p5 Z( H/ d( s　　4. 选择一种操作，单击\"Add\"按钮，则在右边的列表框这会出现该动作名。
1 w% o# q) x+ v4 V# r0 |2 S　　5. 单击\"Next\"继续下一步的设置，设置保存文件的方式。
) W, [4 L$ b! |3 E1 P# w　　6. 单击\"Batch\"按钮，执行批处理，操作完毕。
: a, g3 ~6 F) X/ ]" P3 z　　小 结
　　本章介绍Fireworks应用于网页制作的应用，使用Fireworks生成HTML代码，定制HTML代码模板以及与Dreamweaver的集成。最后学习Fireworks中的效率工具：查找和替换工具、批处理工具的使用。