CIS 205

1
CIS 205Web Design Development

• Integration
• Chapter 1

2
Chapter 1 Integrating Adobe CS3 Web Standard

• Introduction
• Dreamweaver, Flash, and Fireworks integrate
  easily to create interesting web sites
• Adobe Bridge CS3 provides a good way to organize,
  locate, and display different elements in a web
  site
• Adobe Version Cue CS3 allows multiple developers
  to work on the same project in a secure and
  organized way

3
Lesson 1 Insert a Fireworks Image into a
Dreamweaver Document

• Placing a Fireworks Image into Dreamweaver
• You can use the Insert, Image command in
  Dreamweaver to insert a PNG, JPEG, or GIF image
• You can also export an image from Fireworks into
  a Dreamweaver site folder
• Using Fireworks as the Primary External Image
  Editor
• Fireworks is the default external image editor in
  Dreamweaver
• You can right-click an image and click Edit With
  to select an editor
• Specifying Launch and Edit Preferences
• Fireworks has settings on how to work with PNG
  files from another program such as Dreamweaver
• Setting up the Dreamweaver Site
• It is important to set up a web site in an
  organized manner

4
Lesson 1 Insert a Fireworks Image into a
Dreamweaver Document (2)

• Designate the primary external image editor
• Start Dreamweaver and create a new HTML document
• Click Edit on the menu, click Preferences
• Click File Types / Editors in the Category list
• Click .png in the Extensions list, click
  Fireworks in the Editors list, click the Make
  Primary button
• Repeat Step 4 for .gif
• Click .psd in the Extensions list, click
  Photoshop in the Editors list, click the Make
  Primary button
• Click OK

5
Lesson 1 Insert a Fireworks Image into a
Dreamweaver Document (3)

• Specify launch and edit settings
• Start Fireworks CS3 and create a new document
• Click OK in the dialog box to accept default
  values
• Click Edit on the menu, click Preferences
• Click the Launch and Edit tab
• Click the When editing from external application
  list arrow, click Always Use Source PNG
• Repeat Step 5 for the When optimizing from
  external application option
• Click OK

6
Lesson 1 Insert a Fireworks Image into a
Dreamweaver Document (4)

• Set up the Dreamweaver web site
• Using your file management tool, create a folder
  where you store your Data Files and name it
  Southwest
• Create a folder called assets in the Southwest
  folder
• In Dreamweaver, click Site on the menu, click New
  Site
• Click the Advanced tab
• Type SW Scenes in the Site name text box
• Click the Browse for file button, navigate to the
  Southwest folder
• Double-click the Southwest folder, click Select
• Click the Browse for file button next to the
  Default images folder text box, navigate to the
  Southwest folder, double-click assets, click
  Select
• Click OK, click Done

7
Lesson 1 Insert a Fireworks Image into a
Dreamweaver Document (5)

• Set up the Dreamweaver web site (continued)
• Create a new Blank Page HTML document, type
  Canyon Scenes in the document, change the font to
  Times New Roman, , the font size to 24, the
  color to black, then center the text
• Click to the right of the text
• Press Shift-Enter twice
• Save the document as canyon-scenes.html in the
  Southwest folder

8
Lesson 1 Insert a Fireworks Image into a
Dreamweaver Document (5)

• Edit and export an image to Fireworks
• In Fireworks, open ics_1.png from your Data
  Files, save as GrandCanyon.png
• Click the Text tool, change the font to Times New
  Roman, size to 10, color to 0000FF in the PI
• Click the top left corner of the image, type
  Rafting the Grand Canyon, center the text at the
  top of the image
• Save your work
• Click the Saved settings list arrow, click
  JPEG-Better Quality
• Click File on the menu, click Export
• In the Export dialog box, navigate to the assets
  folder in the Southwest site folder, click Save

9
Lesson 1 Insert a Fireworks Image into a
Dreamweaver Document (6)

• Insert a Fireworks image into a Dreamweaver
  document
• Switch to Dreamweaver, expand the assets folder
• Drag the GrandCanyon.jpg file to the insertion
  point in the document
• In the Image Tag Accessibility Attributes window,
  type A photo of the Grand Canyon as the Alternate
  text, click OK
• Click the Browse for File button next to the Src
  text box in the PI, browse to where you saved the
  GrandCanyon.png file, click GrandCanyon.png,
  click OK
• Save your work