slide 1 of 24 1) launch fireworks 2) under file, choose new 3) in the new document dialog box, enter...
TRANSCRIPT
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 38Using 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 http://www.stanford.edu
•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 http://www.berkeley.edu
•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 http://www.harvard.edu
•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 http://www.yale.edu
•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.