slide 1 of 24 1) launch fireworks 2) under file, choose new 3) in the new document dialog box, enter...
TRANSCRIPT
![Page 1: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/1.jpg)
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
![Page 2: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/2.jpg)
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:
![Page 3: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/3.jpg)
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).
![Page 4: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/4.jpg)
Slide 4 of 24
7) Copy, paste, and move to produce 3 other rounded rectangles
![Page 5: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/6.jpg)
Slide 6 of 24
12) Repeat steps 8-11 for Berkeley, Harvard, and Yale.
![Page 7: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/7.jpg)
Slide 7 of 24
13) Under File, choose Export Wizard. Click Continue. Choose The web and click Continue. Then, click Exit.
![Page 8: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/8.jpg)
Slide 8 of 24
14) Click the GIF version of the image to select it, then click Export.
![Page 9: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/9.jpg)
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.
![Page 10: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/10.jpg)
Slide 10 of 24
19) Launch Dreamweaver.
20) Under Site, choose New Site.
![Page 11: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/11.jpg)
Slide 11 of 24
21) In the “What would you like to name your site” field, enter ImageMap Example. Then, click Next.
![Page 12: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/12.jpg)
Slide 12 of 24
22) Select No, then click Next.
![Page 13: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/13.jpg)
Slide 13 of 24
23) Click the Folder Icon and navigate to your CS38 folder on the Desktop. Then click Next.
![Page 14: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/14.jpg)
Slide 14 of 24
24) Select None, then click Next.
25) Click Done.
![Page 15: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/16.jpg)
Slide 16 of 24
28) In the File name field, enter schools.html, then click Save.
![Page 17: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/17.jpg)
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.
![Page 18: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/18.jpg)
Slide 18 of 24
31) Under Insert, select Image.
32) Select navbar.gif, then click OK.
![Page 19: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/19.jpg)
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.
![Page 20: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/21.jpg)
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
![Page 22: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649eb35503460f94bb9f38/html5/thumbnails/24.jpg)
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.