Chapter 1
Integrating Adobe CS6
Web Standard
Chapter 1 Lessons
1. Insert a Fireworks image into a
Dreamweaver document
2. Import and edit a Fireworks image in
Flash
3. Insert and edit a Flash movie in
Dreamweaver
Integrating Adobe CS6 Web Standard
• The Adobe CS6 Web Standard set of
integrated Web development products
include:
– Dreamweaver
– Flash
– Fireworks
Integrating Adobe CS6 Web Standard
• 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.
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 Fireworks
Insert a Fireworks Image into a
Dreamweaver Document
• 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 Document
• 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 Document
Designate the
default editor for
each file type on
the File
Types/Editors tab
of the Preferences
dialog box.
Insert a Fireworks Image into a
Dreamweaver Document
• 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 Document
Notes
MNO file path
Contents of a Fireworks Design Notes file
Insert a Fireworks Image into a
Dreamweaver Document
• 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 Document
• You can use the Fireworks Preferences
dialog box to specify the following
launch and edit settings:
– Always Use Source PNG
– Never Use Source PNG
– Ask when Launching
Insert a Fireworks Image into a
Dreamweaver Document
Dreamweaver Preferences dialog box
Insert a Fireworks Image into a
Dreamweaver Document
•
Structure for the website
Destination
folders where
you can save
HTML documents
or SWF files.
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 objects
Import and Edit a Fireworks
Image in Flash
• To import a Fireworks document into
Flash:
– Open a Flash document
– Make sure that the layer to which you
import the file is not hidden
– Point to the Import command on the File
menu
Import and Edit a Fireworks
Image in Flash
• 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 Flash
Modifying text in
Fireworks
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 insert
Insert and Edit a Flash Movie in
Dreamweaver
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
Dreamweaver
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
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
Insert and Edit a Flash Movie in
Dreamweaver
Height text box
Changing the movie height