Slide 1 of 24 1) Launch Fireworks 2) Under File, choose New 3) In the New Document dialog box, enter Width: 100, Height 160, Resolution 72, and choose White as the Canvas Color. Stanford Continuing Studies CS 38 Using Dreamweaver, Photoshop, & Fireworks: Graphics Production for the Web Week Four EXERCISE 1: GRAPHICS PRODUCTION & IMAGEMAPS

Slide 2 of 24 4) Choose the Rounded Rectangle Tool from the Vector Tools window: 5) Choose Blue (#0000FF) from the color picker in the Colors window:

Slide 3 of 24 6) Draw a rounded rectangle by clicking and dragging the mouse. In the Properties window, ensure that the rounded rectangle becomes 80 pixels wide, 30 pixels in height, and is positioned at the coordinates 10, 7 (x = 10 and y = 7).

Slide 4 of 24 7) Copy, paste, and move to produce 3 other rounded rectangles

Slide 5 of 24 8) Select the Text Tool 9) Choose Microsoft Sans Serif font, color white, size 16, bold, centered, with Smooth Anti-Alias. 10) Click and drag a box inside the first rounded rectangle. 11) Type Stanford

Slide 6 of 24 12) Repeat steps 8-11 for Berkeley, Harvard, and Yale.

Slide 7 of 24 13) Under File, choose Export Wizard. Click Continue. Choose The web and click Continue. Then, click Exit.

Slide 8 of 24 14) Click the GIF version of the image to select it, then click Export.

Slide 9 of 24 15) In the Save in field, change to your CS 38 folder on the Desktop. 16) In the File name field, enter navbar.gif 17) Click Export. 18) Quit Fireworks.

Slide 10 of 24 19) Launch Dreamweaver. 20)Under Site, choose New Site.

Slide 11 of 24 21)In the “What would you like to name your site” field, enter ImageMap Example. Then, click Next.

Slide 12 of 24 22) Select No, then click Next.

Slide 13 of 24 23) Click the Folder Icon and navigate to your CS38 folder on the Desktop. Then click Next.

Slide 14 of 24 24) Select None, then click Next. 25) Click Done.

Slide 15 of 24 26)Under File, choose New. In the General tab, select Basic page, HTML, then click Create. 27)In the Title field, enter Pick A School Website Then, under File, choose Save

Slide 16 of 24 28) In the File name field, enter schools.html, then click Save.

Slide 17 of 24 29) In the main window area, enter Pick A School Website:, then press ENTER. 30) Highlight the text. In the Properties palette, choose the Heading 1 format.

Slide 18 of 24 31) Under Insert, select Image. 32) Select navbar.gif, then click OK.

Slide 19 of 24 33) Select the image. 34) In the Properties palette, in the Map field, enter schools, then click the Rectangle Hotspot Tool.

Slide 20 of 24 35) Draw a box around the Stanford image. 36) In the Properties palette: In the Link field, enter In the Alt field, enter Stanford University

Slide 21 of 24 37) Click the Rectangle Hotspot Tool. 38) Draw a box around the Berkeley image. 39) In the Properties palette: In the Link field, enter In the Alt field, enter UC Berkeley

Slide 22 of 24 40) Click the Rectangle Hotspot Tool. 41) Draw a box around the Harvard image. 42) In the Properties palette: In the Link field, enter In the Alt field, enter Harvard University

Slide 23 of 24 43) Click the Rectangle Hotspot Tool. 44) Draw a box around the Yale image. 45) In the Properties palette: In the Link field, enter In the Alt field, enter Yale University

Slide 24 of 24 46) Under File, choose Save. 47) Publish schools.html and navbar.gif to your webs account. 48) Open your browser to see your published imagemap.