Chapter 1 - PowerPoint Presentation

Slide1

Chapter 1

Integrating Adobe CS6

Web StandardSlide2

Insert a Fireworks image into a Dreamweaver document

Import and edit a

Fireworks image in FlashInsert and edit a Flash movie in Dreamweaver

Chapter 1 LessonsSlide3

The Adobe

CS6

Web Standard set of integrated Web development products include:DreamweaverFlash

Fireworks

Integrating Adobe

CS6

Web StandardSlide4

Adobe Version Cue

CS6

is used in a workgroup process where team members need access to the latest versions of files.Version Cue is accessed through Adobe Bridge and requires a connection to a server.

Integrating Adobe

CS6

Web StandardSlide5

Insert a Fireworks Image into a Dreamweaver Document

You can place PNG, JPEG, and GIF images created in Fireworks directly into a Dreamweaver document:

Select the position in the document where you want the image to appear and then insert the image

Export an image from Fireworks into a Dreamweaver site folder or copy and paste it from FireworksSlide6

The Fireworks program is the primary external image editor for GIF, JPEG, and PNG files when you launch it from within Dreamweaver.

The round trip editing feature automatically updates changes you make in Fireworks.

Insert a Fireworks Image into a Dreamweaver DocumentSlide7

Photoshop is the exclusive external image editor for PSD files.

You can change the external image editor using settings in the Preferences dialog box in Dreamweaver.

Insert a Fireworks Image into a Dreamweaver DocumentSlide8

Insert a Fireworks Image into a Dreamweaver Document

Designate the default editor for each file type on the File Types/Editors tab of the Preferences dialog box.Slide9

When you copy and paste an image in Fireworks or Flash in Dreamweaver, information about the original source file is saved in a Design Notes file.

The Design Notes file format extension is .mno.

Insert a Fireworks Image into a Dreamweaver DocumentSlide10

Contents of a Fireworks Design Notes

file

Notes

MNO file path

Insert a Fireworks Image into a Dreamweaver DocumentSlide11

The Design Notes file contains references to the source PNG file.

You can add notes to an MNO file.

Make sure that the MNO file, with your saved notes, has the same site-root path so you can share Design Notes.

Insert a Fireworks Image into a Dreamweaver DocumentSlide12

You can use the Fireworks Preferences dialog box to specify the following launch and edit settings:

Always Use Source

PNGNever Use Source PNG

Ask

when Launching

Insert a Fireworks Image into a Dreamweaver DocumentSlide13

Dreamweaver Preferences dialog box

Insert a Fireworks Image into a Dreamweaver DocumentSlide14

Destination folders where you can

save HTML documents or SWF files.

Structure for the website

Insert a Fireworks Image into a Dreamweaver DocumentSlide15

Import and Edit a

Fireworks

Image in Flash

Importing Fireworks PNG files directly into a Flash document:

You can select which elements you want to be able to

edit

You can import a Fireworks document as a single flattened bitmap, or retain editability for bitmapped

objectsSlide16

To import a Fireworks document into Flash:

Open a Flash document

Make sure that the layer to which you import the file is not hiddenPoint to the Import command on the File menu

Import and Edit a

Fireworks

Image in FlashSlide17

To import a Fireworks document into Flash…continued…

Click either Import to Stage to Import to Library

Select the file you want to import

Select the import options you want

Click OK

Import and Edit a

Fireworks

Image in FlashSlide18

Modifying text in Fireworks

Import and Edit a

Fireworks Image in FlashSlide19

Insert and Edit a Flash Movie in Dreamweaver

To insert a Flash movie (.swf) into a Dreamweaver document:

Set the insertion point where you want the movie to appear

Use the Media command on the Insert menu to select SWF as the media to insertSlide20

When you insert an SWF file into a Dreamweaver document, Dreamweaver automatically recognizes the native size of the file.

Insert and Edit a Flash Movie in DreamweaverSlide21

When you click the placeholder to select it, the Dreamweaver Property inspector displays information about the movie, including the filename.

Flash movie placeholder selected in Dreamweaver document

Insert and Edit a Flash Movie in DreamweaverSlide22

You can use the Property inspector to complete the following:

Edit the Flash movie

Play and stop the Flash movieSet width and height dimensions

Cause the movie to loop

Reposition the placeholder in the Document window

Insert and Edit a Flash Movie in DreamweaverSlide23

Changing the movie height

Height text box

Insert and Edit a Flash Movie in Dreamweaver