|
|
在
/ d6 S6 l) u/ h0 w, q" K- \Fireworks1 [5 e7 b. s4 t8 a
或者是. E& o( U9 ~* c4 y/ e6 O" I) Q" g
Photoshop
+ X0 |* F( Q4 [9 T' M8 v中设计好的网页效果图，需要导入到% ?' {. V: {8 z e1 ?3 s, l
Dreamweaver
2 U/ R' p: W- O$ _: C7 O2 ~中进行排版布局。在导入到Dreamweaver之前，可以使用Fireworks对效果图进行切片和优化，然后才能够把优化好的切片输出到Dreamweaver的站点中进行布局。切片的目的是为了获得图像素材，也就是说能够通过写X6 @" W- w: r4 \4 o
HTML
# n: o: ?3 a; B7 T5 \6 v语言脚本实现效果的部分，就不需要切片，而必须用图像的地方，则一定要切片。下面通过一个实例来给大家介绍一下Fireworks CS3的切片和优化功能，具体操作步骤如下： 1、在
8 O# s8 H% G" v8 y+ YFireworks" k! X4 r+ H+ V% e9 Y
CS3中打开制作好的网页效果图，如图1-23所示。 . ^8 X0 j% s8 w* R2 n# b1 L$ P
! |" k7 y- V ~5 t3 m
 ( h& ?0 K+ A, d0 y" F* v; O- }
O3 |4 A9 H" G y& \2 C8 }8 X: E
图1-23 在: r% ?4 N$ B1 c# J
Fireworks
% c1 ], F& n$ B% x CS3中打开制作好的效果图 【说明】效果图中的辅助线是在效果图设计之初就添加完毕的。 2、选择( B" l4 u% d7 V
Fireworks
/ ` }( ], G- @2 [4 c* l2 V+ A CS3中的【切片】工具，对效果图进行切片，切片完成后的效果如图1-24所示。
6 ~5 k( b' j* H1 S7 ?7 J
! r+ C; I& y7 u. Y % ?# h8 l; c6 [$ S( {
( S. T# ?4 @5 |' t. t7 N6 { 图1-24 切片完成后的效果 【说明】切片的时候，尽量保证所有的切片和被切片的图像尺寸一致，不要切片大于或者小于被切片的图像，同时切片之间尽量保持不要重叠。 3、几个特别需要注意的地方来详细给大家说一下，首先是在内容区域，文本的前方有小的黑色三角箭头，这是用图像来制作的，所以必须要切片，但是由于所有文本前方的箭头图标都是一样的，所以只需要切一张即可。如图1-25所示。 # v3 E, `% y/ j( |, s
3 C) D( |4 Z" R0 l
. ?# ~0 q! C2 t/ d, R) ^+ }& F9 b& q# c3 N6 v( _6 H0 {
图1-25 切片小图标
( j! i" l7 c# V4 d3 G/ Y9 m9 F, i' |
& i4 [. u1 f P 9 Q R% G0 k5 I6 Z5 Y1 Q' C" y
4、同样的道理，在这个效果图中，有很多的圆角效果，但是在切片的时候同样的效果仍旧只切片一张即可。如图1-26所示。 : Y# H _) t' l/ \5 n; P/ W) }
{3 `5 k0 o6 }3 W4 I6 W, T! r / ]( i/ B- `5 |) M2 J! Q
2 {! s0 w+ I9 |7 Y 图1-26 切片圆角图像 5、切片完成后，选择) k, C- y) t7 I: w+ X$ b% r7 V5 Q
Fireworks* W" E4 x: r, ?0 z% Q c
CS3中的【2幅】窗口，如图1-27所示。在这个窗口的左侧，是可编辑的原图，而在这个窗口的右侧，则是优化以后的图像。在这个窗口的下方，可以看到详细的关于每一个切片的文件量和
5 T. r M2 R, |' \: o+ o5 u* `* e下载0 f" m) c6 e" h5 v/ n
时间等信息。
5 x5 Y+ i, y5 y2 g0 J1 j6 V; Y, U4 r/ x' W
: k3 d4 a! Y. R" t$ I
1 f: _( ~- S+ y/ ^* c: s' o 图1-27
; s5 r$ U3 f! f/ |6 J- qFireworks
6 A6 p3 I. n+ z! {* e1 q+ z8 ^的【2幅】窗口 6、按快捷键【F6】，打开& [. P J+ Z( Q/ B0 D3 f* X. N( y; I
Fireworks8 C& |- h! Q. Q8 `& _
CS3的【优化】面板，使用【指针】工具，在【2幅】窗口的左侧依次选择切片，然后在【优化】面板中进行相应的优化操作，最终优化后的图像效果，可以在【2幅】窗口的右侧进行观察，如图1-28所示。 " `1 \+ G/ g8 q7 f& v3 d$ ?' z" V8 ~3 U
1 }1 o/ X! {; ]. d
 ! W2 B* y* D8 O
0 L3 i: z% A- k" t$ G" \
图1-28 对切片进行优化$ M3 v2 q6 f O+ _
1 R5 z1 J0 A; Y9 j' d" d 7、对每一张切片进行优化后，就可以导出所有的图像素材了。选择【文件】@@【导出】命令（快捷键为【Ctrl+Shift+R】），会弹出
. s1 A0 m7 a: l, A$ c# h0 qFireworks
7 |2 f4 L3 m0 @ CS3的【导出】对话框，如图1-29所示。 : p$ ]; _7 C D" i/ N* l
7 L0 h. j" U" H# [' {
* x3 Y; _4 l# v9 @- q$ J6 K7 U; v$ Z0 I1 m4 B
图1-29 # y: N) F) V0 k, T
Fireworks7 E' Q8 w4 G8 k
CS3的【导出】对话框 8、在【导出】对话框中的【导出】下拉列表中选择【
. {( E! F' y; p) R: G/ y; r& {HTML
5 m! L1 Z! b+ W( T; d- X和图像】选项，这样可以激活面板右下角的【选项】按钮，单击【选项】按钮，打开【HTNL设置】对话框，如图1-30所示。 / p/ Y6 ]" `4 T, g n- T" Z9 B
2 ]+ U: i: n7 G7 \, L% A$ ~3 u6 b
1 p0 {( a. F* E. a6 E1 B( u
) K; m `% u+ V( d) j0 M9 i. Y' y+ O 图1-30【
M- r c' J- j; e4 Q0 rHTML$ h' N2 v, c; M' K, R4 i: e b2 q6 v
设置】对话框 9、切换到【文档特定信息】选项卡，设置导出后所有切片的命名规则，可以使用文档名称加切片序号的方式来命名，这样做的目的是为了尽量让切片的名称变得简短，如果切片名称太长，在网页中写脚本的时候字符数量就会增加，网页文件的文件量也就会随之增加，如图1-31所示。设置完毕后，点击【确定】按钮，返回【导出】对话框。
$ L/ D- G: u N- l r+ ?
. u5 l) e; K: e 3 H$ B: X3 Q% R. Z- N8 {
2 z e2 C0 v! L" k6 j# f/ R5 i
图1-31 在【! ]7 [& B# c0 r" h1 R$ z
HTML
' i3 z/ k" O( _& R5 N设置】对话框中选择【文档特定信息】选项卡0 ?2 z$ h. O; @1 W5 z
3 R# [ }- u" o$ j% a10、更改【导出】对话框中的【导出】类型为【仅图像】。这样导出以后只会根据切片来生成图像而不会生成网页，在【文件名】文本框中输入希望的文件名称，建议命名规则简单易记，如图1-32所示。
* K- J, |% J7 K% M9 f1 S- ?9 Q7 w% x E; f; P* T# a, t5 F
2 [$ K* Z' |- z: j9 \3 l: ^1 B9 Z
' }; i1 j3 y5 U f8 u# Z 图1-32 " S u: {! _5 k
Fireworks
. S) I" J q7 X4 ?) S& c CS3的【导出】对话框 11、在【保存在】下拉列表中选择需要保存的位置，习惯上我们会把所有切片生成的图像保存到站点的图像文件夹内。在【切片】下拉列表中选择【导出切片】，但是不要勾选下方的【包含无切片区域】和【当前页面】复选框，如图1-32所示。 12、全部设置完毕后，点击【保存】按钮即可把这个页面中的所有切片导出到6 C8 u- w( f: C7 b$ o# w) ` ~
Dreamweaver6 N% h: C2 ~: h, }2 H8 X5 q3 R
的站点中去了，生成的图像如图1-33所示。 , u. Q' |, F! |/ D' b
$ y4 w# x2 E6 \: M
 - h I- n" a& I/ M9 _# J" u
& ^* `) E+ `. j! X 图1-33 导出到站点中的切片 所有的切片生成以后，就可以使用这些图像素材，在4 z: |& F3 I1 |0 ?- q$ l. [
Dreamweaver
) b* l; X* A6 }* f4 D CS3中进行排版布局了 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
