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 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 Image into 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 Image into 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

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

Specifying Launch and Edit Preferences 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 Edit Preferences 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 Edit Preferences FIGURE 4: Fireworks Preferences dialog box The Web Collection Standard CS3 Revealed

Setting up the Dreamweaver Site FIGURE 2: File structure for a Web site The Web Collection Standard CS3 Revealed

Edit a Fireworks Image From Dreamweaver In this lesson, you will: Edit a Fireworks image from a Dreamweaver document The Web Collection Standard CS3 Revealed

Editing a Fireworks Image from 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 Image from 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 Image from 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 The Web Collection Standard CS3 Revealed Chapter 1 20

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 The Web Collection Standard CS3 Revealed Chapter 1 21

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

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) The Web Collection Standard CS3 Revealed Chapter 1 23

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 The Web Collection Standard CS3 Revealed Chapter 1 24

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

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