FW MX 2004教程(10):链接设置

　在Fireworks中，为图像设置链接区域是靠“切片”或“热点”工具来完成，因此“切片”或“热点”区域又被称为链接区域。它们不是以图像的形式存在，而是在图像导出成网页格式后，以HTML代码的形式出现。

0 R4 e- L1 E/ }/ y; D. x　　1、切片与热点
# H! Q% q' l  N1 E9 Y# Z4 T- w　　网页层：所有的“切片”和“热点”区域都被保存在“层”面板中的“网页层”内，以划分它们与图像层的区别。但同时也可以像对待图像层那样对网页层进行例如重命名、选择、删除、展开/折叠层、隐藏/显示层、锁定/编辑层等操作，如图10—01。

6 Q8 _; M5 b3 n  v6 }% n' H) e: k1 @

1 h: `5 H, A9 {% B图10—01
. E  m$ O/ ^& Y　　链接区的变形：对于各种形状的图形可为其选择不同的“切片”或“热点”工具，为图象划分出所需的切片或热点区域。同时也可以使用各种“变形”工具对该区域进行变形处理，如图10—02。
# U! U+ w  {* l2 V9 _

3 q0 |( B; B1 q# J2 _
图10—02
, ]; K& V' \, y: q; s4 e( H　　设置链接：为图像设置好“切片”或“热点”的链接区域后，在其区域的属性对话框中就可以输入或设置链接的相关内容。如图10—03。
3 I* C- w( K& N$ w" h% B4 u

* e! e' B; l- ~. Y9 A. q+ b: Y  E
* Q9 t. s2 ], q5 q6 Y, S/ }图10—03
　　而对于“切片”区域除了可以为图像设置一个链接范围以外，还可以将该范围作为HTML的语言区域进行导出。只需在“切片”属性框中的类型下拉列表里选择“HTML”项，如图10—04。
% T8 b# e! a- I  J. K0 P

  u" Y9 {" b( d3 a
图10—04
. ^3 \7 X; @* C( q$ y( @　　然后点击类型列表下的“编辑”按钮即可在“编辑HTML切片”窗口中输入HTML代码。如此一来，也就把该切片区域转成了HTML的语言区域。

2 K. o, S1 o+ Q4 _
图10—05
- M4 {$ {9 J  e+ W5 A, X2 C　　控制手柄：在“切片” 区域的中心有一个圆形的控制手柄，右键点击即可弹出这个切片目前所能用到的所有行为指令。如图10—06。
0 z9 N# [! Z! S
) W3 a; G7 k5 S
图10—06
. ~+ s. Q& P; ?& U4 K　　导出所选切片——可把图像中的切片区域作为图像进行导出保存。在导出前，还可以使用“优化”面板对该区域进行各项设置，如图10—07。

" r% ?0 ^7 }! V' `  [: o/ U) [) ?
图10—07
5 g: m% B" v2 _　　排列——调整该切片在网页层中上下的排列位置；
　　添加简单变换图像行为——为图形的切片区域建立简单的图形变换效果；
) U1 T9 Q  w. Z  }' r　　添加交换图像形为——可启动“变换图像”的详细设置窗口，为切片区域的图像建立较复杂的图形变换效果；
　　添加状态栏信息——选择该项后会弹出一个 “设置状态栏文本”对话框，在消息栏中可输入要显示在浏览器状态栏上的文字信息。如图10—08。
6 W  x7 c3 `7 W# N$ i8 w5 r

) F0 ^4 |3 N/ {" t 图10—08
3 ^8 ^1 v' x( |4 @! u# m9 H' {　　添加导航栏——将图形的切片区域设置为网页的导航栏；
9 {3 T" q  F* f# ^# @0 L# c6 D　　添加弹出菜单——在切片位置添加一个弹出菜单的按钮；
　　编辑弹出菜单——可重新设置弹出菜单中的各项内容。
; _4 |% M  n2 E4 T" `5 [　　同样的，在“热点”区域的中心位置上也有个控制手柄，点击右键即可弹出相关行为，如图10—09。
0 Y+ m7 _8 B/ r! v; F

图10—09
　　为 “切片”或“热点”所添加的全部指令都保存在“行为”面板中。同时，点击“行为”面板上的“添加”

3 p# a1 ]$ d* l2 u7 ^( D 或“删除”

按钮也可以为切片、热点添加或删除相关的行为指令，如图10—10。

$ |3 a& u1 Y0 ~0 l
图10—10
4 R$ U5 ~6 W  @/ h　　2、制作弹出菜单
( T2 w8 d% S0 k* t: c' ]　　先制作或引入一个要用来制作弹出式菜单的主按钮，如图10—11。

* Z. a( v. S2 ^. R, ?$ D9 E
图10—11
& h+ b' ^( z, p　　接着为该按钮添加一个切片或热点，并在其控制手柄的弹出菜单中选择“添加弹出菜单”项，如图10—11。


0 C0 b( |7 q' M6 S9 k 图10—11
$ x; f  |0 C  D　　此时将会启动“弹出菜单编辑器”窗口，如图10—12。
6 f, Y$ F) f2 [
! y* C# f6 ?% }' k$ Y5 T  N

如图10—12
　　在“内容”选项卡中，点击“添加菜单项”

2 i3 ^2 c& G/ W2 ~$ z, t! I 或“删除菜单项”

9 s) k0 c/ i- e, W 按钮，可在文本栏中加入或删除一个菜单项；
( g& e* j, U' X# n　　文本栏——可输入弹出菜单中各选项的名称；
8 |# \7 O& l2 q4 F4 I, h　　链接栏——输入菜单菜单项所要链接的地址；
; D; }* A& b6 {" x7 ]　　目标栏——选择链接对象在浏览器中的打开方式。
% O6 W0 p9 W6 q: W: B3 P& m0 a6 P　　如果要把文本栏中某个菜单选项再设置为另一个菜单的下一级目录时，只需点击“下级菜单”

$ u5 d: ]6 q3 A6 y- ] 按钮即可。如图10—13；
5 P: i; p* r0 o+ P& x! ~- t
8 J3 M  t+ Q  x: e3 @" E
图10—13
3 O2 T  h; T& u: t　　?? 可以看到，“菜单2”已成了“菜单1”的下级目录了。而点击“上级菜单”
+ X5 m; u( u9 V0 ?7 h
, Z* v! k7 X: M* u! \7 p 按钮则可以将“菜单2”又向上恢复一级。
( ^4 T2 Y# K5 P0 t) t% e　　?? 菜单项上下位置的调整可能用鼠标的拖拽来完成，如图10—14，我们把“菜单5”向上移动了一格。
3 R$ ]( T- v( }9 m; l% q1 w
* S# c5 v% }; F
图10—14
% K* e9 S" A# u! h　　在“内容”选项卡的设置完成之后，点击右下角的“继续”按钮，进入下“外观”选项卡，如图10—15。
  |9 W0 S4 X1 X$ E9 k! f5 u
3 J7 i* |' Z6 x3 a" J) i
9 K% E/ p1 \& v+ |/ m3 g 图10—15
　　在单元格选项中，可以将弹出式菜单的风格设定为“HTML”或“图像”，而两种风格都可以在下面的预览框中先行查看；
　　在单元格右边的下拉列表中可以选择菜单的排列方式，分别有“垂直菜单”和“水平菜单”；
　　字体栏及旁边的文字设置工具，都是用于对菜单文字的各项设置；
: d# i. e% P* ]9 y/ Q$ N8 z3 S　　在“弹起状态”框中有两个颜色选择框，分别用于菜单在弹起状态时，文字颜色及其背景色的设置；
　　在“滑过状态”框中也有两个颜色选择框，是用于菜单在鼠标滑过状态时，文字颜色及背景色的设置。
: H( J( ~7 M3 D　　在“外观”选项卡的设置完成后，我们点击“继续”按钮，进入下一个选项卡。如图10—16。
8 C; [6 G' V5 e7 ]4 \
  }5 w6 y3 s) k& ^( o$ Q
图10—16
　　在“高级”选项卡中可以进一步对菜单的边框及边框颜色等进行详细的设置。完成后点击“继续”按钮。
　　在“位置”选项卡中可以对弹出菜单的弹出方式及位置进行设定，如图10—17。

4 a/ M( B2 W  [8 x. V  j
: y* b$ V  t! j1 j: o7 ` 图10—17
, p2 F0 Y# ?7 @8 y0 S0 Q　　菜单位置——设置主菜单的弹出位置。也可以直接输入主菜单弹出位置的坐标值；
　　子菜单位置——选择子菜单的弹出位置，同样也可以在下面的坐标中直接输入相关数值。而取消“放在同一位置”选项时，则子菜单总会与它的上一级菜单在同一水平位置上弹出。
" y7 S/ l( |+ d% S* v9 w1 Z8 H( g　　点击“完成”按钮后，弹出式菜单的制作就大功告成了，按F12键即可在浏览器中查看效果。
( Y: d% Z4 u+ |3 m. L
- y( a3 V6 E( D" B) k% P* w

. N1 \% C, `6 D' N图10—18