1) Launch Dreamweaver 8.

1
Stanford Continuing Studies CS 22 Enhanced Web
Site Design Week Two DREAMWEAVER and IMAGEMAPS
1) Launch Dreamweaver 8. 2) Under Site, choose
New Site.
2
3) In the What would you like to name your site
field, enter ImageMap Example. Then, click Next.
3
4) Select No, then click Next.
4
5) Click the Folder Icon and navigate to your
floppy disk (A\). Then click Next.
5

• 6) Since we will be using Tripods 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
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
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
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
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
14) Under Insert, select Image. 15) Select
navbar.gif, then click OK.
11
16) Select the image. 17) In the Properties
palette, in the Map field, enter schools, then
click the Rectangle Hotspot Tool.
12

• 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

• 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

• 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

• 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
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.