Transcript The Web Collection Standard CS3 Revealed

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
Chapter 1
2
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
Chapter 1
3
Insert a Fireworks Image
In this lesson, you will:
– Insert a Fireworks image into a
Dreamweaver document
The Web Collection Standard CS3 Revealed
Chapter 1
4
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
Chapter 1
5
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
Chapter 1
6
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
Chapter 1
7
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
Chapter 1
8
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
Chapter 1
9
Using Design Notes
Source
filename
FIGURE 1:
The Web Collection Standard CS3 Revealed
Contents of a Design Notes file
Chapter 1
10
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
Chapter 1
11
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
Chapter 1
12
Specifying Launch and Edit
Preferences
FIGURE 4:
The Web Collection Standard CS3 Revealed
Fireworks Preferences dialog box
Chapter 1
13
Setting up the
Dreamweaver Site
FIGURE 2:
The Web Collection Standard CS3 Revealed
File structure for a Web site
Chapter 1
14
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
Chapter 1
15
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
Chapter 1
16
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
Chapter 1
17
Editing a Fireworks Image
from Dreamweaver
Edit
Fireworks
button
FIGURE 12:
Edit Fireworks button in the Property inspector
The Web Collection Standard CS3 Revealed
Chapter 1
18
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
Chapter 1
19
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
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
Chapter 1
26