The Web Collection Standard CS3 Revealed

The Web Collection StandardCS3 Revealed

CHAPTER 1: INTEGRATING ADOBE CS3 WEB STANDARD

Chapter 1 2

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

Chapter Lessons

The Web Collection Standard CS3 Revealed

Chapter 1 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


Chapter 1 4

Insert a Fireworks Image

In this lesson, you will:– Insert a Fireworks image into a

Dreamweaver document


Chapter 1 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


Chapter 1 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


Chapter 1 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


Chapter 1 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


Chapter 1 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


Chapter 1 10

Using Design Notes

FIGURE 1: Contents of a Design Notes file

Source filename


Chapter 1 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


Chapter 1 12


Ask When Launching– Allows you to specify whether or not to

launch the source PNG file


Chapter 1 13


FIGURE 4: Fireworks Preferences dialog box


Chapter 1 14

Setting up theDreamweaver Site

FIGURE 2: File structure for a Web site


Chapter 1 15

Edit a Fireworks ImageFrom Dreamweaver

In this lesson, you will:– Edit a Fireworks image from a

Dreamweaver document


Chapter 1 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


Chapter 1 17


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


Chapter 1 18


FIGURE 12: Edit Fireworks button in the Property inspector

Edit Fireworks

button


Chapter 1 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


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


Click to keep all text

editable

Create a Fireworks Document and Import it into Flash


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)



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


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

Documents

Transcript of The Web Collection Standard CS3 Revealed