Fireworks 4功能指南之四

打开Demo_11.png或者继续在你的演示文件中工作　　输出到Dreamweaver

在本地输出成Dreamweaver HTML文件来完成图象翻转效果之前，再让我们增加一些切图来控制页面如何被切割和优化
- U+ V6 ?4 C. g+ u, O, |" T

打开Ｗeb图层的眼睛图标来察看切片和热区
% |8 U8 t2 l4 l( `3 ?( {$ }; U* h) m

在白色区域上画一个切片到\"The Latest in Adventure Traveheadline\"的右边。这个切片应该会自动和文字标题／罗盘图象的切片吸附在一条线上

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

输入一些虚假的大字标题和文字（它将会在随后的ＤＷ中被格式化），按下回车键
4 @2 ~8 M8 m% r! _, D4 b
6 E- ^% _6 s" m$ m& g6 O
) D1 l* @; @$ Z& d9 m

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

在Optimize面板中，选择Jpeg 100%
1 u3 c8 D7 c4 P7 }4 U9 j. }: ]

' X: a. R7 \1 Y0 w( i+ d

在三个按钮下面拖出三个紧密相连的切片在文字部分（看到现在的右边的文字被按钮分成几个部分）
2 V, y, h5 V  Q: u
. X2 Z% y- [1 Z, [

在优化面板中，所以没有被使用切片的会自动变成切变并使用缺省的设置。看这些，确信没有任何被选择，然后看你的Optimize面板。这个缺省的设置为Gif,Web Adaptive 128种颜色
' g" x+ [/ a* T; ?7 @

让我们准备输出这个页面
! z8 T$ b  p1 v2 `

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

确定在HTML style选项中Dreamweaver被选择

在Table标签中
, f/ E& T, v' T6 p

在\"Space from\"中选择Nested Tables(嵌套表格)
3 @4 [/ r; d1 ^4 g2 ]

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

* P9 y; x3 G! m4 d0 v. N6 C, C

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

点击OK，保存你的演示文件 　　往返的表格编辑......　　往返的表格编辑
) F; x0 n' B  b' r* m* o$ S

启动Dreamweaver
5 s$ T0 I; w2 N9 F7 A

在exported HTML文件夹中打开demo.htm ·在中间的表格单元中选择文本,并改变其中的内容，然后格式化文本
8 A5 g' A; X9 @! C5 @3 c- q7 ^- h: y

接下来，在中心的表格单元格中的按钮上选择大的白色图形

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

1 H0 d1 Y5 h3 V, Y1 A* n/ h

选择整个表格（用文档窗口底部的快速标签选择器）
( N1 q' c4 k; b) m* O; w

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

+ h/ }( Y" e& l5 N, m& Q) T

在对话框里选择\"Use Original\"并且在第四个文件夹里点选Demo_12.png
+ J, {5 ]  a3 W0 }! @# A

Fireworks打开此文件

双击\"The Latest in Adventure Travel\"将它改变为\"The Best in Adventure Travel\"
2 p$ M- u+ v0 X' a! ?. I. d% t

" `# W$ B- u6 U6 b4 v

双击\"Great Barrier Reef\"文字
% |1 V+ O$ D( O- k* ^3 D( O' k; E$ O

选择大标题下面的文本内容并剪切它

点击文档窗口顶部的\"Done\"按钮
* X) E$ L( H# @2 P# ^8 @

返回DW,你将看到图片被更新了，但被转换成两个单元格的内容并未覆盖

在DW中，在\"Great Barrier Reef\"下面画一个层，然后将文字粘贴进去　　在Fireworks中快速优化图像......　　在Fireworks中快速优化图像
* g' e0 z4 Q! u- e6 g" Y

打开\"Adventure.htm\"

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

选择Commands>Optimze Image 在Fireworks中进行图象优化
$ Y6 C2 V8 c# K5 c! R

在优化窗口，改变设置为Gif,Web Adaptive,128色，单击更新
& ^5 F" M% T, @. c; Y" R7 z+ R
/ m# Y, q  ^  }  Y  h$ i 　　在Dreamweaver中自动插入Fireworks的HTML代码
" V# }2 s- x) D& J, O  c+ [+ ]& l

打开Fireworks

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


# ~. T# j, N9 ^: p" C! R& E  X

（选择文件）输出

*勾选\"select slice\"前面的复选框
  i2 B2 X% o# }

*选择 Images and HTML
6 u& I! A. S% r2 s

命名为\"nav.htm\" 单击Save
6 |* P# i& N0 @# j: v

切换到Dreamweaver

打开Adventure.htm页面，拖出一个新层，在Object面板里点击\"Insert Fireworks HTML\"，找到Nav.htm文件,则将这个导航按钮放置在这个层里
) a$ b- S) l3 v: V3 v4 M

按F12键预览
# ~: y. Y$ K! Q9 y( s+ n9 r- L