Fireworks 4功能指南之四

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

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

打开Ｗeb图层的眼睛图标来察看切片和热区
# n2 J4 z6 h7 m5 G3 c. ?8 L

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

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

输入一些虚假的大字标题和文字（它将会在随后的ＤＷ中被格式化），按下回车键

* q6 m+ `0 R9 [1 f

在鱼的图象上拖出一个切片
# {% Y. o5 J+ j6 b3 ?/ Z

在Optimize面板中，选择Jpeg 100%

在三个按钮下面拖出三个紧密相连的切片在文字部分（看到现在的右边的文字被按钮分成几个部分）
1 M5 q; D9 _: k, N8 r5 n
* f8 e, f3 x, q% ^& v; f* p& m$ U

在优化面板中，所以没有被使用切片的会自动变成切变并使用缺省的设置。看这些，确信没有任何被选择，然后看你的Optimize面板。这个缺省的设置为Gif,Web Adaptive 128种颜色
; k. t6 t3 s- i% i" o" t2 M

让我们准备输出这个页面
0 n& @0 @8 g- n

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

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

在Table标签中

在\"Space from\"中选择Nested Tables(嵌套表格)
. ]! Q9 I( X3 U# r* d

在Empty Cell区域，在弹出菜单中选择\"non-breaking space\"
( U; X! s0 A$ v$ \6 A) S

' _% p) C5 N; }3 a; o' k2 \

在Document Specific标签中：什么都不用改变，只需要显示一下选项
' N# B4 U5 \1 P

点击OK，保存你的演示文件 　　往返的表格编辑......　　往返的表格编辑

启动Dreamweaver
" x4 q3 ^* z$ j

在exported HTML文件夹中打开demo.htm ·在中间的表格单元中选择文本,并改变其中的内容，然后格式化文本

接下来，在中心的表格单元格中的按钮上选择大的白色图形
- t0 P7 f4 \) z; }

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

2 m, k4 _& L) u9 u

选择整个表格（用文档窗口底部的快速标签选择器）
+ `2 f& n4 W9 T7 |' P5 h

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


1 \& l2 T' y5 Z7 }+ w$ c

在对话框里选择\"Use Original\"并且在第四个文件夹里点选Demo_12.png
1 c) |1 E( ~+ g( m# D& H

Fireworks打开此文件

双击\"The Latest in Adventure Travel\"将它改变为\"The Best in Adventure Travel\"
8 F& S: n5 c% E! r& ?+ W; `7 p
' w  m9 g) D5 O3 ]& d% L4 I
2 ?* z0 m$ P9 q+ L& g

双击\"Great Barrier Reef\"文字

选择大标题下面的文本内容并剪切它
) [$ H! l# w0 w

点击文档窗口顶部的\"Done\"按钮
7 o$ A- w* B% W8 ^, ?6 B% I% W. ?

返回DW,你将看到图片被更新了，但被转换成两个单元格的内容并未覆盖
' F& s( o- I  X- w! q0 R+ g# F/ ]

在DW中，在\"Great Barrier Reef\"下面画一个层，然后将文字粘贴进去　　在Fireworks中快速优化图像......　　在Fireworks中快速优化图像
/ _- [% ~  q& G

打开\"Adventure.htm\"

选择左面的罗盘图案，注意此图片现在是55K(在属性面版)
* h* {  C( m! G- ?6 o' |% a0 T/ J, i

选择Commands>Optimze Image 在Fireworks中进行图象优化
7 Y  D. P' u  I% ^/ C! V

在优化窗口，改变设置为Gif,Web Adaptive,128色，单击更新
3 l4 q0 h4 M# V
　　在Dreamweaver中自动插入Fireworks的HTML代码

打开Fireworks
3 b: S, m' V$ {4 P+ H. X+ B% E

打开Demo_12.png文件，选择顶部所有的6个按钮的切片。
: \' x! a4 ?2 [2 i3 Z( d

（选择文件）输出
' k$ J$ `* L7 J) \( S: V

*勾选\"select slice\"前面的复选框
; v" I: G. P3 g$ v3 {

*选择 Images and HTML
! z8 H# q- a; y0 N" H

命名为\"nav.htm\" 单击Save
: B5 l* I& Y2 z. q, E

切换到Dreamweaver
' o% K( g! Y* h1 T

打开Adventure.htm页面，拖出一个新层，在Object面板里点击\"Insert Fireworks HTML\"，找到Nav.htm文件,则将这个导航按钮放置在这个层里
8 Y! ]; E+ z; q; F" Q! @

按F12键预览