epub 21-22

2 2 F i r e w o r k s 2 3We b 2 4We b 2 5 S h o c k w a v e F l a s h f i r e w o r k s / D r e a m w e a v e r D r e a m w e a v e r F i r e w o r k s F i r e w o r k s F i r e w o r k s F i r e w o r k s 22 Fireworks Web Web Web Fireworks (Macromedia Web ) F i r e w o r k s F i r e w o r k s Web F i r e w o r k s D r e a m w e a v e r Dreamweaver 3 Fireworks 3 M a c r o m e d i a D r e a m w e a v e r F i r e w o r k s F i r e w o r k s D r e a m w e a v e r F i r e w o r k s F i r e w o r k D r e a m w e a v e r F i r e w o r k s H T M L J a v a S c r i p F i r e w o r k s D r e a m w e a v e r We b Fireworks H T M L D r e a m w e a v e r Fireworks HTML We b We b D r e a m w e a v e r F i r e w o r k s We b

454 22.1 We b 1) 2) We b We 3) ( ) 4) 5) We b 6) 3 5 D r e a m w e a v e r F i r e w o r k s D r e a m w e a v e r F i r e w o r k s We b F i r e w o r k s We b F i r e w o r k s P N G F i r e w o r k s F i r e w o r k s G I F D r e a m w e a v e r F i r e w o r k s F i r e w o r k s Dreamweaver 3 Fireworks 3 F i r e w o r k s Dreamweaver 3 Fireworks 2 Fireworks 3 22.1.1 Fireworks We b Dreamweaver Fireworks Fireworks Dreamweaver F i r e w o r k s 22-1 Options G I F J P E G ( G I F P N G ) G I F P N G F i r e w o r k s File

22 Fireworks 455 ( ) 22-1 Fireworks 3 Dreamweaver Animation G I F Fireworks D r e a m w e a v e r F i r e w o r k s P N G We b G I F J P E G P N G F i r e w o r k s F i r e w o r k s ( ) ( F i r e w o r k s ) D r e a m w e a v e r F i r e w o r k s 22-2 D r e a m w e a v e r ( F i r e w o r k s 3 ) D r e a m w e a v e r F i r e w o r k s D r e a m w e a v e r F i r e w o r k s F i r e w o r k s F i l e P r e f e r e n c e s F i l e U p d a t e F i l e E x p o r t F i l e U p d a t e

456 22-2 F i r e w o r k s F i r e w o r k s F i r e w o r k s We b We b F i r e w o r k s P N G F i r e w o r k s P N G P N G F i r e w o r k s G I F J P E G P N G We b We b J P E G F i r e w o r k s 1) D r e a m w e a v e r F i r e w o r k s D r e a m w e a v e r 2) F i r e w o r k s Command Optimize Image 3) F i r e w o r k s P N G 4) 5 F i r e w o r k s 22.1.2 Fireworks D r e a m w e a v e r F i r e w o r k s F i r e w o r k

22 Fireworks 457 Dreamweaver 3 Dreamweaver 3 Fireworks 3 Studio F i r e w o r k s G I F J P E G P N G D r e a m w e a v e r F i r e w o r k s 1) E d i t P r e f e r e n c e s ( / ) 2) 3) ( G I F J P E G P N G ) 22-3 4) 5) 6) 22-3 Fireworks GIF JPEG PNG Dreamweaver Fireworks F i r e w o r k s Wi n d o w s C : \ P r o g r a m Files\Macromedia \Fireworks 3\Fireworks 3.exe M a c i n t o s h HD: Applications: Fireworks 3:fireworks 3(.exe ) ( ) F i r e w o r k s F i r e w o r k s G I F J P E G P N G F i r e w o r k s F i l e U p d a t e C t r l - S ( C o m m a n d - S ) F i r e w o r k s

458 22.1.3 Fireworks F i r e w o r k s D r e a m w e a v e r We b D r e a m w e a v e r D r e a m w e a v e r F i r e w o r k s D r e a m w e a v e r D r e a m w e a v e r D r e a m w e a v e r F i r e w o r k s ( ) 1) Site/Define Sites( ) 2) 3) 4) 5) 6) F i r e w o r k s ( ) f w _ s o u r c e fw_source=file:///d /DW3 Bible/images/house.png Ta b Ta E n t e r 22.2 ( R o l l o v e r s ), We b (rolling the mouse pointer over) F i r e w o r k s H T M L J a v a S c r i p t F i r e w o r k s We b F i r e w o r k s D r e a m w e a v e r F i r e w o r k s D r e a m w e a v e r F i r e w o r k s F i r e w o r k s D r e a m w e a v e r H T M L Dreamweaver 3 Fireworks HTML 22.2.1 Dreamweaver F i r e w o r k s ( r o l l o v e r ) U p ( ) O v e r ( ) D o w n ( ) Over Down( )

22 Fireworks 459 F i r e w o r k s G I F 22-4 We b U p O v e r D o w n D o w n Over Down D r e a m w e a v e r ( B e h a v i o r s ) F i r e w o r k s 1) F i r e w o r k s 2) Fireworks 3 File Export Special Export as Files 22-4 Fireworks Export Special ( 22-5 ) 3) F i r e w o r k s _ f n n 1-9 0 ( M a i n B u t t o n _ f 0 1 ) 4) 5 ) H T M L n o n e 6 ) D r e a m w e a v e r (rollover behaviors)

460 22-5 Fireworks Dreamweaver (rollovers) 7) ( r o l l o v e r ) 8) (Original Image Browse) (_ f 01 ) 9) 10) (Original Image Browse) _ f 02 11) 12 D o w n (_ f 03 ) Over Down(_f04) (Swap Image b e h a v i o r ) 19 We b F i r e w o r k s 22.2.2 Fireworks F i r e w o r k s Fireworks 3 Dreamweave 2 3. 0 3. 0 GoLive F r o n t P a g e ( r o l l o v e r s ) F i r e w o r k s H T M L < h e a d > < b o d y > F r o n t P a g e < h e a d > J a v a S c r i p t < b o d y > H T M L ( o n C l i c k o n M o u s e O v e r ) F i r e w o r k s Fireworks HTML D r e a m w e a v e r Dreamweaver 3

22 Fireworks 461 F i r e w o r k s F i r e w o r k s H T M L Fireworks HTML D r e a m w e a v e r D r e a m w e a v e r F i r e w o r k s F i r e w o r k s We b We 22-6 22-6 Fireworks ( H T M L ) U R L F i r e w o r k s F i r e w o r k s D r e a m w e a v e r (Image Map) F i r e w o r k s U R L ( b e h a v i o r s ) F i r e w o r k s ( r o l l o v e r ) ( b e h a v i o r s ) Dreamweaver F i r e w o r k s F i r e w o r k s 1) F i r e w o r k s 2) I n s e r t ( ) Hotspot or Insert( ) S l i c e ( ) Web F i r e w o r k s 3) F i r e w o r k s (Object Inspector)

462 4) F i r e w o r k s (Behavior Inspector) ( t h e + s i g n 5) (Simple Rollover) 6) F i l e E x p o r t 7) (Use Slice O b j e c t s ) (Slice Along Guides) 8) ( S t y l e ) H T M L D r e a m w e a v e r Dreamweaver 2 Dreamweaver 3 Dreamweaver 3 Library Dreamweaver 3 HTML Dreamweaver 3 Library 9) H T M L (Same Directory) (One Level Up) ( C u s t o m ) (Copy to Clipboard) D r e a m w e a v e r H T M L Dreamweaver 3 Library 10) F i r e w o r k s H T M L ( (Copy to Clipboard) ) D r e a m w e a v e r F i r e w o r k s H T M L Dreamweaver 3 Fireworks HTML Dreamweaver 3 Library Dreamweaver ( L i b r a r y p a l e t t e ) (Copy to Clipboard) ( E d i t ) ( P a s t e ) C t r l - V ( C o m m a n d - V ) D r e a m w e a v e r F i r e w o r k s ( L i b r a r y ) ( C l i p b o a r d ) F i r e w o r k s H T M L Insert Fireworks HTML F i r e w o r k s D r e a m w e a v e r 1) Dreamweaver 3 HTML Style F i r e w o r k s H T M L 2) Insert Fireworks HTML Insert Fireworks HTML 22-7 3) F i r e w o r k s H T M L (Delete File After Insertion) 4) Fireworks HTML 5) Fireworks HTML

22 Fireworks 463 22-7 Insert Fireworks HTML Fireworks Dreamweaver We b H T M L J a v a S c r i p t H T M L F i r e w o r k s Fireworks HTML ( ) 22.3 Dreamweaver Fireworks D r e a m w e a v e r F i r e w o r k s D r e a m w e a v e r F i r e w o r k s D r e a m w e a v e r We b We We b D r e a m w e a v e r 22.3.1 Web We b D r e a m w e a v e r F i r e w o r k s We b (Create Web Photo Album) D r e a m w e a v e r F i r e w o r k s D r e a m w e a v e r We b (Create Web Photo Album) D r e a m w e a v e r F i r e w o r k s We b F i r e w o r k s G I F J P E G T I F F P h o t o s h o p P I C T B M P 36 3 6 2 00 2 00 GIF WebSnap 128 We b ( WebSnap Adaptive palette) 128 GIF WebSnap 256 JPEG Better Quality J P E G 80 % JPEG Smaller File J P E G 60 % 2

464 1 0 0 % We b (Create Web Photo Album) 1) C o m m a n d s ( ) Create Web Photo Album( We b ) Create We b Photo Album 22-8 22-8 2) 3) 4) D r e a m w e a v e r H T M L 5) 36 3 6 7 2 7 2 1 00 1 00 1 44 1 44 2 0 0 2 0 0 6) 7) 8) 9) 10) 11) 22-9 12) F i r e w o r k s F i r e w o r k s D r e a m w e a v e r D r e a m w e a v e r H T M L 22-10 D r e a m w e a v e r F i r e w o r k s

22 Fireworks 465 Dreamweaver We b H T M L < h 1 > < b > X M L F i r e w o r k s F i r e w o r k s F i r e w o r k s 10 F i r e w o r k s C D - R O M C o m m a n d 22-9 Web 22-10 Fireworks Dreamweaver Web (Create Web Photo Album)

466 22.3.2 Dreamweaver / Fireworks D r e a m w e a v e r F i r e w o r k s F i r e w o r k s Fireworks 2 Dreamweaver 3 / Fireworks 3 Dreamweaver 3 Fireworks 3 J a v a S c r i p t F i r e w o r k s J a v a S c r i p t D r e a m w e a v e ( ) D r e a m w e a v e r F i r e w o r k s (Optimize Image) Fireworks API D r e a m w e a v e r F i r e w o r k s C-level extension F W L a u n c h D r e a m w e a v e r F i r e w o r k s 1) D r e a m w e a v e r 2) D r e a m w e a v e r 3) 4) Fireworks J a v a S c r i p t 5) J a v a S c r i p t 6) D r e a m w e a v e r F i r e w o r k s 7) Dreamweaver c o o k i e F i r e w o r k s 8) Fireworks F i r e w o r k s A P I 9) D r e a m w e a v e r F i r e w o r k s D r e a m w e a v e r D O M 10) F i r e w o r k s Fireworks DOM M a c r o m e d i a F i r e w o r k s w w w.macromedia.com/support/fireworks/ F i r e w o r k s (History palette) (the Copy Command to Clipboard) F i r e w o r k s J a v a S c r i p t (the Copy Command to Clipboard) F i r e w o r k s D r e a m w e a v e r FWLaunch C Library 22-1

22 Fireworks 467 22-1 FWLaunch b r i n g D W ToFront ( ) N / A D r e a m w e a v e r b r i n g F W ToFront ( ) N / A F i r e w o r k s execjsinfireworks (javascriptorfileurl ) F i r e w o r k s JavaScript 1 2 I / O 3: Dreamweaver 4 F i r e w o r k s 5: maylauch Fireworks ( ) Fireworks OptimizeIn Fireworks F i r e w o r k s F i r e w o r k s F i r e w o r k s ( f i l e U R L d o c U R L { t a rg e t Wi d t h } { t a rg e t H e i g h t }) 1 2 I / O 3: Dreamweaver 4 F i r e w o r k s 5: ValidateFireworks (versionnumber) Fireworks 22.4 We b We b We b F i r e w o r k s We b M a c r o m e d i a Dreamweaver F i r e w o r k s Dreamweaver F i r e w o r k s F i r e w o r k s D r e a m w e a v e r F i r e w o r k s F i r e w o r k s F i r e w o r k Fireworks H T M L Dreamweaver H T M L ( ) Dreamweaver F i r e w o r k s We b (Create Web Photo A l b u m ) Dreamweaver f w l a u n c h C-level F i r e w o r k s 23 D r e a m w e a v e r We b