Presentation is loading. Please wait.

Presentation is loading. Please wait.

Page 1 of 15 1) Launch Dreamweaver. 2)Under Site, choose Manage Sites Click New, then Site. Continuing Studies CS 22 ·Stanford University EXERCISE 3: IMAGEMAPS.

Similar presentations


Presentation on theme: "Page 1 of 15 1) Launch Dreamweaver. 2)Under Site, choose Manage Sites Click New, then Site. Continuing Studies CS 22 ·Stanford University EXERCISE 3: IMAGEMAPS."— Presentation transcript:

1 Page 1 of 15 1) Launch Dreamweaver. 2)Under Site, choose Manage Sites Click New, then Site. Continuing Studies CS 22 ·Stanford University EXERCISE 3: IMAGEMAPS

2 Page 2 of 15 3) Enter ImageMap Example, then click Next.

3 Page 3 of 15 4) Select No, then click Next.

4 Page 4 of 15 5) Click the Folder Icon and navigate to your floppy disk (A:\). Then click Next.

5 Page 5 of 15 6)Select None, then click Next. 7) Click Done.

6 Page 6 of 15 8)Under File, choose New. In the General tab, select Basic Page, HTML, then click Create. 9)In the Title field, enter Pick A School Website Then, under File, choose Save

7 Page 7 of 15 10) In the Save in field, make sure you are still at 3½ Floppy. In the File name field, enter schools.html, then click Save.

8 Page 8 of 15 11) In the main window area, enter Pick A School Website:, then press ENTER. 12) Highlight the text. In the Properties palette, choose the Heading 1 format.

9 Page 9 of 15 13) Under Insert, select Image. 14) Select navbar.gif, then click OK.

10 Page 10 of 15 15) Select the image. 16) In the Properties palette, in the Map field, enter schools, then click the Rectangle Hotspot Tool.

11 Page 11 of 15 17) Draw a box around the Stanford image. 18) In the Properties palette: In the Link field, enter http://www.stanford.edu In the Alt field, enter Stanford University

12 Page 12 of 15 19) Click the Rectangle Hotspot Tool. 20) Draw a box around the Berkeley image. 21) In the Properties palette: In the Link field, enter http://www.berkeley.edu In the Alt field, enter UC Berkeley

13 Page 13 of 15 22) Click the Rectangle Hotspot Tool. 23) Draw a box around the Harvard image. 24) In the Properties palette: In the Link field, enter http://www.harvard.edu In the Alt field, enter Harvard University

14 Page 14 of 15 25) Click the Rectangle Hotspot Tool. 26) Draw a box around the Yale image. 27) In the Properties palette: In the Link field, enter http://www.yale.edu In the Alt field, enter Yale University

15 Page 15 of 15 28) Under File, choose Save. 29) Using Tripod, publish schools.html and navbar.gif to your tripod account (see Uploading Using Tripod). 30) Open your browser to see your published imagemap.


Download ppt "Page 1 of 15 1) Launch Dreamweaver. 2)Under Site, choose Manage Sites Click New, then Site. Continuing Studies CS 22 ·Stanford University EXERCISE 3: IMAGEMAPS."

Similar presentations


Ads by Google