The Web Collection Standard CS3 Revealed

1. The Web Collection StandardCS3 Revealed CHAPTER 1: INTEGRATING ADOBE CS3 WEB STANDARD

2. Chapter Lessons • Insert a Fireworks image into a Dreamweaver document • Edit a Fireworks image from a Dreamweaver document • Create a Fireworks image and import it into Flash • Insert and edit a Flash movie in Dreamweaver The Web Collection Standard CS3 Revealed

3. Introduction • Adobe CS3: suite of integrated Web development products • Dreamweaver, Flash, Fireworks • Products can integrate easily with each other • Products have common features and interface elements The Web Collection Standard CS3 Revealed

4. Insert a Fireworks Image • In this lesson, you will: • Insert a Fireworks image into a Dreamweaver document The Web Collection Standard CS3 Revealed

5. Placing a Fireworks Imageinto Dreamweaver • Ways to place PNG, JPEG, and GIF images created in Fireworks directly into a Dreamweaver document • Use Image command on Insert menu • Export an image from Fireworks into a Dreamweaver site folder The Web Collection Standard CS3 Revealed

6. Placing a Fireworks Imageinto Dreamweaver • Exporting an image to Library folder allows you to insert the image as a library item • Export command on File menu in Fireworks • When you export an image file as an image only, one file (.jpg or .gif) is created The Web Collection Standard CS3 Revealed

7. Fireworks as the Primary External Image Editor • You can import a Fireworks image into a Dreamweaver document • You can edit a Fireworks graphic by launching Fireworks from within Dreamweaver The Web Collection Standard CS3 Revealed

8. Fireworks as the Primary External Image Editor • Fireworks must be set as the primary external image editor for GIF, JPEG, and PNG files in Dreamweaver • Preferences dialog box in Dreamweaver The Web Collection Standard CS3 Revealed

9. Using Design Notes • Design Notes file (MNO) • Contains information about the original source file (PNG or FLA) that created the exported file • Allows access to the source file for editing • Save Fireworks source PNG file and exported files in a Dreamweaver site The Web Collection Standard CS3 Revealed

10. Using Design Notes Source filename FIGURE 1: Contents of a Design Notes file The Web Collection Standard CS3 Revealed

11. Specifying Launch and EditPreferences • Use the Fireworks Preferences dialog box • Always Use Source PNG • Automatically launches Fireworks PNG file • Never Use Source PNG • Automatically launches the exported Fireworks image The Web Collection Standard CS3 Revealed

12. Specifying Launch and EditPreferences • Ask When Launching • Allows you to specify whether or not to launch the source PNG file The Web Collection Standard CS3 Revealed

13. Specifying Launch and EditPreferences FIGURE 4: Fireworks Preferences dialog box The Web Collection Standard CS3 Revealed

14. Setting up theDreamweaver Site FIGURE 2: File structure for a Web site The Web Collection Standard CS3 Revealed

15. Edit a Fireworks ImageFrom Dreamweaver • In this lesson, you will: • Edit a Fireworks image from a Dreamweaver document The Web Collection Standard CS3 Revealed

16. Editing a Fireworks Imagefrom Dreamweaver • Select image in the Dreamweaver document • Click Edit Fireworks in Property inspector • Fireworks is launched • Image appears in an edit window The Web Collection Standard CS3 Revealed

17. Editing a Fireworks Imagefrom Dreamweaver • Make your changes • Click Done to return to Dreamweaver document • To make quick export changes • Use Optimize Image in Fireworks command to display the Optimize dialog box The Web Collection Standard CS3 Revealed

18. Editing a Fireworks Imagefrom Dreamweaver Edit Fireworks button FIGURE 12: Edit Fireworks button in the Property inspector The Web Collection Standard CS3 Revealed

19. Create a Fireworks Image and Import it into Flash • In this lesson, you will: • Insert a Adobe Flash movie into a Dreamweaver document • Edit a Adobe Flash movie within Dreamweaver The Web Collection Standard CS3 Revealed

20. Create a Fireworks Image and Import it into Flash Flash allows you to import Fireworks PNG files directly into a Flash document Advantage: Fireworks layers can be imported as Flash layers This allows you to edit individual parts of an image, such as animating text or using a photograph to create a button 20 The Web Collection Standard CS3 Revealed Chapter 1

21. Create a Fireworks Document and Import it into Flash • Open Flash • Make sure layer to which you import is not hidden • Click Import on the File menu • Import to stage or Import to Library • Select the file to import • The Import Fireworks Document dialog box opens with many options • Click OK when done 21 The Web Collection Standard CS3 Revealed Chapter 1

22. Create a Fireworks Document and Import it into Flash Click to keep all text editable 22 The Web Collection Standard CS3 Revealed Chapter 1

23. Insert and Edit a Flash Movie in Dreamweaver • Flash movies can be inserted into Dreamweaver • Set the insertion point where you would like the movie to appear • Use the Media command on the Insert menu • Choose the .swf file that you would like to insert • You may need to copy the file to the root folder • A placeholder will appear (not the movie itself) 23 The Web Collection Standard CS3 Revealed Chapter 1

24. Insert and Edit a Flash Movie in Dreamweaver • You can use the Property inspector to complete the following: • Edit the Flash movie • Play and stop the Flash movie • Set width and height dimensions • Cause the movie to loop • Reposition the placeholder in the document window 24 The Web Collection Standard CS3 Revealed Chapter 1

25. Insert and Edit a Flash Movie in Dreamweaver 25 The Web Collection Standard CS3 Revealed Chapter 1

26. Chapter 1 Tasks • Insert a Fireworks image into a Dreamweaver document • Edit a Fireworks image from a Dreamweaver document • Create a Fireworks image and import it into Flash • Insert and edit a Flash movie in Dreamweaver The Web Collection Standard CS3 Revealed