|
|
在
' {5 F9 t$ _, K( B2 n4 ?; K' \7 WFireworks5 h* E- U% M2 o8 A' u4 B- V
或者是 h( X1 i& ~5 t4 F
Photoshop
, c- m% I2 d- o; c' I: {中设计好的网页效果图，需要导入到0 g: |" }2 ^+ k3 B- V9 b+ S0 p# j
Dreamweaver7 W. ?5 Q: X2 o* [: u: ?. h
中进行排版布局。在导入到Dreamweaver之前，可以使用Fireworks对效果图进行切片和优化，然后才能够把优化好的切片输出到Dreamweaver的站点中进行布局。切片的目的是为了获得图像素材，也就是说能够通过写X
" }1 s7 I3 O* ^" a0 H3 z5 a% j/ w0 _HTML
' S# Y1 W# z/ p. U( w/ ~7 [语言脚本实现效果的部分，就不需要切片，而必须用图像的地方，则一定要切片。下面通过一个实例来给大家介绍一下Fireworks CS3的切片和优化功能，具体操作步骤如下： 1、在- S6 x/ C/ j% i3 I) ~% N) E! K6 u* i
Fireworks
: C6 x7 g& k+ j0 v) u1 z CS3中打开制作好的网页效果图，如图1-23所示。
& M) t# F' v& K3 q7 h8 _ X- p2 i+ h1 ^0 W$ _3 X' d( s% u
 6 n. v( d5 }. J4 D; g
6 j4 b9 y* J; J5 h& u r
图1-23 在2 h( u6 M0 \" \
Fireworks
& v; l7 A' u7 |' U" F CS3中打开制作好的效果图 【说明】效果图中的辅助线是在效果图设计之初就添加完毕的。 2、选择- q% @4 |2 ^, t
Fireworks
+ h0 \: a3 v: C7 | CS3中的【切片】工具，对效果图进行切片，切片完成后的效果如图1-24所示。 6 g3 W$ g/ \9 U( l! Q
1 B; g' V8 d- e# g
 ; K% S; W' a: @1 O& i- `& N9 Y
# Z6 V6 K5 g0 I+ w
图1-24 切片完成后的效果 【说明】切片的时候，尽量保证所有的切片和被切片的图像尺寸一致，不要切片大于或者小于被切片的图像，同时切片之间尽量保持不要重叠。 3、几个特别需要注意的地方来详细给大家说一下，首先是在内容区域，文本的前方有小的黑色三角箭头，这是用图像来制作的，所以必须要切片，但是由于所有文本前方的箭头图标都是一样的，所以只需要切一张即可。如图1-25所示。 0 n( k: F; k% X+ h3 K; y, c" c
3 Y1 u3 E; O' J" g! `8 u/ q
/ @& z: y: ?. |/ p5 ~
9 X* Q/ Z$ D Z: U, w8 |' x 图1-25 切片小图标
4 u3 g* M1 C$ B& ^1 Q, X) I; s1 V$ I$ s n8 p! V
8 C r3 @9 W6 D* E! N# w
4、同样的道理，在这个效果图中，有很多的圆角效果，但是在切片的时候同样的效果仍旧只切片一张即可。如图1-26所示。
+ ]/ D$ W; m( p% J% C; H1 u8 g8 s9 S' ^- h
 5 A3 H/ @: T7 {4 q g7 `
( H) G, o+ L2 o2 a1 D+ a 图1-26 切片圆角图像 5、切片完成后，选择
. f' H. e/ J% k7 IFireworks
& b5 |3 d% _2 Z8 @ CS3中的【2幅】窗口，如图1-27所示。在这个窗口的左侧，是可编辑的原图，而在这个窗口的右侧，则是优化以后的图像。在这个窗口的下方，可以看到详细的关于每一个切片的文件量和
+ f+ i! g5 W# O( z& l下载
, Z: b$ u9 I5 `/ U" W时间等信息。 * _0 k7 f/ v8 ^
- g7 a9 R% z" u: }" @; C
' k# R# {2 {. A1 D7 |/ q$ a* c0 r9 x; s) O2 M
图1-27
7 u" k( j" J. ^; WFireworks2 ^( p8 i9 D5 d% t) L, @3 k
的【2幅】窗口 6、按快捷键【F6】，打开
1 ^+ q3 t7 l! D+ p' F8 u4 {Fireworks
) c: U3 O7 U5 L1 g0 h6 M3 s- X: t2 |1 g CS3的【优化】面板，使用【指针】工具，在【2幅】窗口的左侧依次选择切片，然后在【优化】面板中进行相应的优化操作，最终优化后的图像效果，可以在【2幅】窗口的右侧进行观察，如图1-28所示。
2 [9 D3 G; r f% h5 T$ f `7 T+ U: e* l1 Q) z n$ ^( _& \
$ |# |, Y9 |8 [! q* J- N7 w, K @+ R' [
图1-28 对切片进行优化
; x0 n' W3 i- a, p9 ]( f+ R ' a- m% k' m5 u; S& u
7、对每一张切片进行优化后，就可以导出所有的图像素材了。选择【文件】@@【导出】命令（快捷键为【Ctrl+Shift+R】），会弹出
& j8 {; A7 T; X8 IFireworks
& Y# z% E7 n4 h. {( y2 p CS3的【导出】对话框，如图1-29所示。 - }9 {0 w$ M* B% t
7 N8 p. X: r9 b `- m3 {; q 3 h) h/ I' N3 l: U. ^
' r. n5 @ c4 L2 m
图1-29
( A1 S! p! v' X0 g, L* u: @+ `Fireworks% I' |7 {: B$ S
CS3的【导出】对话框 8、在【导出】对话框中的【导出】下拉列表中选择【
" L* r7 V" i( p, N/ d; ~HTML8 M1 M3 K# g, I# i
和图像】选项，这样可以激活面板右下角的【选项】按钮，单击【选项】按钮，打开【HTNL设置】对话框，如图1-30所示。
9 x0 s/ C$ ^5 W
8 u5 V3 s9 k# J* j
5 q0 s. [% M8 H4 q* k
: H5 M4 b. f; P3 a 图1-30【, Y% z) ~% J5 T( T8 [0 @
HTML- s( S: W, L1 F4 q3 I) O$ _
设置】对话框 9、切换到【文档特定信息】选项卡，设置导出后所有切片的命名规则，可以使用文档名称加切片序号的方式来命名，这样做的目的是为了尽量让切片的名称变得简短，如果切片名称太长，在网页中写脚本的时候字符数量就会增加，网页文件的文件量也就会随之增加，如图1-31所示。设置完毕后，点击【确定】按钮，返回【导出】对话框。
" u% W6 [8 e0 ~- i @( W7 U2 [" W7 [8 R! U; v! Y1 \
 % j5 Z/ q3 f& P3 C. u! a
O& X E% V) T9 P, X% @( A. b# B 图1-31 在【0 u6 t9 e, Y) A8 j' f( I
HTML m, o: \; H* T$ P( n. \
设置】对话框中选择【文档特定信息】选项卡0 Z( b% k3 p, ?
' o$ t. W+ ?, @5 \10、更改【导出】对话框中的【导出】类型为【仅图像】。这样导出以后只会根据切片来生成图像而不会生成网页，在【文件名】文本框中输入希望的文件名称，建议命名规则简单易记，如图1-32所示。 3 z; u6 b& D" L( g
8 {9 [7 z0 ^8 o) p6 n! K
0 V, `; N6 }) v9 V* |' x
- G9 T2 r( R' S! [" K4 U0 P 图1-32 : J- a/ w9 [6 ^( T6 O
Fireworks9 w; ]7 R* U2 P- Q5 s2 q! q
CS3的【导出】对话框 11、在【保存在】下拉列表中选择需要保存的位置，习惯上我们会把所有切片生成的图像保存到站点的图像文件夹内。在【切片】下拉列表中选择【导出切片】，但是不要勾选下方的【包含无切片区域】和【当前页面】复选框，如图1-32所示。 12、全部设置完毕后，点击【保存】按钮即可把这个页面中的所有切片导出到9 J" J6 C0 P8 q6 A8 V8 k
Dreamweaver
9 M$ ^, Y( \2 z/ j% k4 e的站点中去了，生成的图像如图1-33所示。 $ z& C5 Z0 l! P: |
" ^& Q6 i1 Z- C& Z4 n
4 C: r8 L% K# @3 C+ v
0 p) T. K2 ~% n7 i/ ?: } 图1-33 导出到站点中的切片 所有的切片生成以后，就可以使用这些图像素材，在
# Y+ F1 m! [4 I8 q! tDreamweaver
/ I9 c q2 ^2 l& E8 a: r& b, M CS3中进行排版布局了 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
