260 likes | 382 Views
The Web Collection Standard CS3 Revealed. CHAPTER 1: INTEGRATING ADOBE CS3 WEB STANDARD. 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
E N D
The Web Collection StandardCS3 Revealed CHAPTER 1: INTEGRATING ADOBE CS3 WEB STANDARD
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
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
Insert a Fireworks Image • In this lesson, you will: • Insert a Fireworks image into a Dreamweaver document The Web Collection Standard CS3 Revealed
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
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
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
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
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
Using Design Notes Source filename FIGURE 1: Contents of a Design Notes file The Web Collection Standard CS3 Revealed
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
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
Specifying Launch and EditPreferences FIGURE 4: Fireworks Preferences dialog box The Web Collection Standard CS3 Revealed
Setting up theDreamweaver Site FIGURE 2: File structure for a Web site The Web Collection Standard CS3 Revealed
Edit a Fireworks ImageFrom Dreamweaver • In this lesson, you will: • Edit a Fireworks image from a Dreamweaver document The Web Collection Standard CS3 Revealed
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
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
Editing a Fireworks Imagefrom Dreamweaver Edit Fireworks button FIGURE 12: Edit Fireworks button in the Property inspector The Web Collection Standard CS3 Revealed
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
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
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
Create a Fireworks Document and Import it into Flash Click to keep all text editable 22 The Web Collection Standard CS3 Revealed Chapter 1
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
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
Insert and Edit a Flash Movie in Dreamweaver 25 The Web Collection Standard CS3 Revealed Chapter 1
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