1. Slide 1 (of 16) 1) Launch Dreamweaver 8. 2)Under Site, choose New Site. Stanford Continuing Studies CS 22 · Enhanced Web Site Design Week Two DREAMWEAVER and IMAGEMAPS

2. Slide 2 (of 16) 3)In the “What would you like to name your site” field, enter ImageMap Example. Then, click Next.

3. Slide 3 (of 16) 4) Select No, then click Next.

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

5. Slide 5 (of 16) 6) Since we will be using Tripod’s web servers to publish your site, in the Sharing Files section, choose FTP, then enter ftp.tripod.com, your Tripod Username, and your Tripod password, as indicated. Click Next.

6. Slide 6 (of 16) 7)Since we will not be collaborating with anyone else on this web site for this class, choose No, do not enable check in and check out, then click Next. 8) Click Done.

7. Slide 7 (of 16) 9)Under File, choose New. In the General tab, select Basic Page, HTML, then click Create. 10)In the Title field, enter Pick A School Website Then, under File, choose Save

8. Slide 8 (of 16) 11) In the Save in field, make sure you are still at 3½ Floppy. In the File name field, enter schools.html, then click Save.

9. Slide 9 (of 16) 12) In the main window area, enter Pick A School Website:, then press ENTER. 13) Highlight the text. In the Properties palette, choose the Heading 1 format.

10. Slide 10 (of 16) 14) Under Insert, select Image. 15) Select navbar.gif, then click OK.

11. Slide 11 (of 16) 16) Select the image. 17) In the Properties palette, in the Map field, enter schools, then click the Rectangle Hotspot Tool.

12. Slide 12 (of 16) 18) Draw a box around the Stanford image. 19) In the Properties palette: In the Link field, enter http://www.stanford.edu In the Alt field, enter Stanford University

13. Slide 13 (of 16) 20) Click the Rectangle Hotspot Tool. 21) Draw a box around the Berkeley image. 22) In the Properties palette: In the Link field, enter http://www.berkeley.edu In the Alt field, enter UC Berkeley

14. Slide 14 (of 16) 23) Click the Rectangle Hotspot Tool. 24) Draw a box around the Harvard image. 25) In the Properties palette: In the Link field, enter http://www.harvard.edu In the Alt field, enter Harvard University

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

16. Slide 16 (of 16) 29) Under File, choose Save. 30) Under Site, choose Put. When the Dependent Files dialog box appears, click Yes. 31) Open your browser to see your published imagemap.