Fireworks 4功能指南之四

打开Demo_11.png或者继续在你的演示文件中工作　　输出到Dreamweaver
+ n: q1 A% g$ t+ Q

在本地输出成Dreamweaver HTML文件来完成图象翻转效果之前，再让我们增加一些切图来控制页面如何被切割和优化

打开Ｗeb图层的眼睛图标来察看切片和热区
  Z* b! M/ d8 ^6 W. G, O

在白色区域上画一个切片到\"The Latest in Adventure Traveheadline\"的右边。这个切片应该会自动和文字标题／罗盘图象的切片吸附在一条线上
. z* w0 r$ U5 F, }' g+ ^

当切片被选择时，在Object面板上，选择\"Type\":在弹出菜单中选择\"Text\"

输入一些虚假的大字标题和文字（它将会在随后的ＤＷ中被格式化），按下回车键
0 t9 L! O( ]' Z

& I6 z$ b3 w! n; \" `

在鱼的图象上拖出一个切片

在Optimize面板中，选择Jpeg 100%

2 \) A4 L$ V; Z1 q, P" I5 Y
3 Y, L$ V0 k" b0 L

在三个按钮下面拖出三个紧密相连的切片在文字部分（看到现在的右边的文字被按钮分成几个部分）
3 _( Z) t# c+ u' S7 S) b/ A5 `
' g' T# c  L3 Q% J' P9 o# s# F
: K) j& P' b  H+ h6 [& F+ M

在优化面板中，所以没有被使用切片的会自动变成切变并使用缺省的设置。看这些，确信没有任何被选择，然后看你的Optimize面板。这个缺省的设置为Gif,Web Adaptive 128种颜色
4 ]& R) y; V) E

让我们准备输出这个页面
* z, W" ]3 o: b  q; L

选择File菜单下的HTML Setup ·在General标签中

确定在HTML style选项中Dreamweaver被选择
% @5 f3 D1 _; K; ]

在Table标签中

在\"Space from\"中选择Nested Tables(嵌套表格)
# e+ ^+ B6 e+ X( y% L7 ~2 s

在Empty Cell区域，在弹出菜单中选择\"non-breaking space\"

5 {6 _: S. x) ^; N8 T# g
7 J4 p, ?" z0 D2 P9 {( _

在Document Specific标签中：什么都不用改变，只需要显示一下选项

点击OK，保存你的演示文件 　　往返的表格编辑......　　往返的表格编辑
1 w5 G% h% D9 [- M$ T1 @& z( Z( D2 O

启动Dreamweaver

在exported HTML文件夹中打开demo.htm ·在中间的表格单元中选择文本,并改变其中的内容，然后格式化文本
% K- h3 L/ T! S4 c

接下来，在中心的表格单元格中的按钮上选择大的白色图形
9 [+ G% v, e3 E! ?* q6 w1 \2 F3 I

在那里增些一些文字进行替换\"?2000，All rights reserved.\"

: N# y# G" o: F* `/ K5 v

选择整个表格（用文档窗口底部的快速标签选择器）
7 V) M1 [6 E0 h9 u; q; j" b

在属性栏里，注意Fireworks标签，点击Fireworks编辑按钮

! m# W9 R. q) k* y, n) B; G
/ ~' J! \7 i/ q7 W. n6 E

在对话框里选择\"Use Original\"并且在第四个文件夹里点选Demo_12.png

Fireworks打开此文件

双击\"The Latest in Adventure Travel\"将它改变为\"The Best in Adventure Travel\"

双击\"Great Barrier Reef\"文字

选择大标题下面的文本内容并剪切它
2 C4 ^( b: g' ]1 T: `9 S

点击文档窗口顶部的\"Done\"按钮

返回DW,你将看到图片被更新了，但被转换成两个单元格的内容并未覆盖
8 X3 j% `2 @: @6 u3 u) \: Y$ X

在DW中，在\"Great Barrier Reef\"下面画一个层，然后将文字粘贴进去　　在Fireworks中快速优化图像......　　在Fireworks中快速优化图像

打开\"Adventure.htm\"
) q. X7 t8 z$ Z/ v" `9 H; v# v

选择左面的罗盘图案，注意此图片现在是55K(在属性面版)

选择Commands>Optimze Image 在Fireworks中进行图象优化
6 n' @* f' o. Q* Y: j

在优化窗口，改变设置为Gif,Web Adaptive,128色，单击更新

　　在Dreamweaver中自动插入Fireworks的HTML代码
2 k- I4 ~. e. C  [0 t2 P6 o: |

打开Fireworks

打开Demo_12.png文件，选择顶部所有的6个按钮的切片。

2 y# ~0 }6 g- z

（选择文件）输出

*勾选\"select slice\"前面的复选框

*选择 Images and HTML
# ]- l' W& [: C& Z' `

命名为\"nav.htm\" 单击Save

切换到Dreamweaver

打开Adventure.htm页面，拖出一个新层，在Object面板里点击\"Insert Fireworks HTML\"，找到Nav.htm文件,则将这个导航按钮放置在这个层里

按F12键预览