CIS 205—Web Design & Development Integration Chapter 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 editor 1.Start Dreamweaver and create a new HTML document 2.Click Edit on the menu, click Preferences 3.Click File Types / Editors in the Category list 4.Click.png in the Extensions list, click Fireworks in the Editors list, click the Make Primary button 5.Repeat Step 4 for.gif 6.Click.psd in the Extensions list, click Photoshop in the Editors list, click the Make Primary button 7.Click OK

Lesson 1: Insert a Fireworks Image into a Dreamweaver Document (3) Specify launch and edit settings 1.Start Fireworks CS3 and create a new document 2.Click OK in the dialog box to accept default values 3.Click Edit on the menu, click Preferences 4.Click the Launch and Edit tab 5.Click the When editing from external application list arrow, click Always Use Source PNG 6.Repeat Step 5 for the When optimizing from external application option 7.Click OK

Lesson 1: Insert a Fireworks Image into a Dreamweaver Document (4) Set up the Dreamweaver web site 1.Using your file management tool, create a folder where you store your Data Files and name it Southwest 2.Create a folder called assets in the Southwest folder 3.In Dreamweaver, click Site on the menu, click New Site 4.Click the Advanced tab 5.Type SW Scenes in the Site name text box 6.Click the Browse for file button, navigate to the Southwest folder 7.Double-click the Southwest folder, click Select 8.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 text 12.Press [Shift]-[Enter] twice 13.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 Fireworks 1.In Fireworks, open ics_1.png from your Data Files, save as GrandCanyon.png 2.Click the Text tool, change the font to Times New Roman, size to 10, color to #0000FF in the PI 3.Click the top left corner of the image, type Rafting the Grand Canyon, center the text at the top of the image 4.Save your work 5.Click the Saved settings list arrow, click JPEG-Better Quality 6.Click File on the menu, click Export 7.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 document 1.Switch to Dreamweaver, expand the assets folder 2.Drag the GrandCanyon.jpg file to the insertion point in the document 3.In the Image Tag Accessibility Attributes window, type A photo of the Grand Canyon as the Alternate text, click OK 4.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