the web collection standard cs3 revealed
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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
The Web Collection Standard CS3 Revealed
Chapter 1 4
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 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
The Web Collection Standard CS3 Revealed
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
The Web Collection Standard CS3 Revealed
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
The Web Collection Standard CS3 Revealed
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
The Web Collection Standard CS3 Revealed
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
The Web Collection Standard CS3 Revealed
Chapter 1 10
Using Design Notes
FIGURE 1: Contents of a Design Notes file
Source filename
The Web Collection Standard CS3 Revealed
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
The Web Collection Standard CS3 Revealed
Chapter 1 12
Specifying Launch and EditPreferences
Ask When Launching– Allows you to specify whether or not to
launch the source PNG file
The Web Collection Standard CS3 Revealed
Chapter 1 13
Specifying Launch and EditPreferences
FIGURE 4: Fireworks Preferences dialog box
The Web Collection Standard CS3 Revealed
Chapter 1 14
Setting up theDreamweaver Site
FIGURE 2: File structure for a Web site
The Web Collection Standard CS3 Revealed
Chapter 1 15
Edit a Fireworks ImageFrom Dreamweaver
In this lesson, you will:– Edit a Fireworks image from a
Dreamweaver document
The Web Collection Standard CS3 Revealed
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
The Web Collection Standard CS3 Revealed
Chapter 1 17
Editing a Fireworks Imagefrom 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 18
Editing a Fireworks Imagefrom Dreamweaver
FIGURE 12: Edit Fireworks button in the Property inspector
Edit Fireworks
button
The Web Collection Standard CS3 Revealed
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
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
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