CIS 205—Web Design & Development

IntegrationChapter 1

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

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

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

• Designate the primary external image editor1. Start Dreamweaver and create a new HTML document2. Click Edit on the menu, click Preferences3. Click File Types / Editors in the Category list4. Click .png in the Extensions list, click Fireworks in the

Editors list, click the Make Primary button5. Repeat Step 4 for .gif6. Click .psd in the Extensions list, click Photoshop in the

Editors list, click the Make Primary button7. Click OK

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

• Specify launch and edit settings1. Start Fireworks CS3 and create a new document2. Click OK in the dialog box to accept default values3. Click Edit on the menu, click Preferences4. Click the Launch and Edit tab5. Click the When editing from external application list

arrow, click Always Use Source PNG6. Repeat Step 5 for the When optimizing from external

application option7. Click OK

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

• Set up the Dreamweaver web site1. Using your file management tool, create a folder where you

store your Data Files and name it Southwest2. Create a folder called assets in the Southwest folder3. In Dreamweaver, click Site on the menu, click New Site4. Click the Advanced tab5. Type SW Scenes in the Site name text box6. Click the Browse for file button, navigate to the Southwest

folder7. Double-click the Southwest folder, click Select8. Click the Browse for file button next to the Default images

folder text box, navigate to the Southwest folder, double-click assets, click Select

9. Click OK, click Done

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

• Set up the Dreamweaver web site (continued)10. 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

11. Click to the right of the text12. Press [Shift]-[Enter] twice13. Save the document as canyon-scenes.html in the

Southwest folder

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

• Edit and export an image to Fireworks1. In Fireworks, open ics_1.png from your Data Files, save as

GrandCanyon.png2. Click the Text tool, change the font to Times New Roman, size

to 10, color to #0000FF in the PI3. Click the top left corner of the image, type Rafting the Grand

Canyon, center the text at the top of the image4. Save your work5. Click the Saved settings list arrow, click JPEG-Better Quality6. Click File on the menu, click Export7. In the Export dialog box, navigate to the assets folder in the

Southwest site folder, click Save

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

• Insert a Fireworks image into a Dreamweaver document1. Switch to Dreamweaver, expand the assets folder2. Drag the GrandCanyon.jpg file to the insertion point in the

document3. In the Image Tag Accessibility Attributes window, type A photo

of the Grand Canyon as the Alternate text, click OK4. 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

5. Save your work