Cynthia Beth Rubin

Creating Roll-overs with Dreamweaver

1. Save two related gifs or jpegs in Adobe ImageReady or Photoshop

• Click on the Launcher to Open ImageReady or Photoshop
  (or go to Applications on Hard Drive, and look inside the Adobe Photoshop folder)
  
• The first time that you OPEN, you need to be sure to be in YOUR FOLDER.
  Hit DESKTOP, then open the Hardrive, then Double Click on Temporary Work, and then on the Folder with YOUR NAME.
  
• OPEN your images
  
• REDUCE the size of the images make sure that they will work for your page.
  The smaller the better.
  
• SAVE them for the web (see Saving for the Web in Photoshop or ImageReady). Similar formats are available in Fireworks and GraphicConverter.
  
  BE SURE TO SAVE IN THE PROPER FOLDER,
  

note: You should start with a small image, already created in Photoshop or Painter.

2. Open your Page in Dreamweaver

• Click on the Launcher to Open Dreamweaver
  (or go to Applications on Hard Drive, and look inside the Dreamweaverr)
  (it is under graphics applications under the little apple)
  
  
• The first time that you OPEN, you need to be sure to be in the right FOLDER. Hit DESKTOP, then open the Hardrive, then Double Click on Temporary Work, and then on the Folder for this project.
  
• OPEN your page
  
  
• DEFINE your site, if you have not yet done so. Dreamweaver will write incorrect paths if you do not do this.
  This is under SITE in the menu.
  
  
• SAVE your page in the right folder (the one that you defined). Make sure that everything that you need is in the right folder.
  
  

3. Go to Insert in the Menu

• Go Down to Rollover Image
• You must give the image a name
  
• Browse for the first image
  
• Browse for the second image
• put in the link
  
• Hit OK
  
  note: the roll-over will not work in Dreamweaver. You must save and open the page in a browser (Netscape of Internet Explorer)

4. SAVE

• SAVE your page in the right folder (the one that you defined). Make sure that everything that you need is in the right folder.
  
  
• Under FILE, go down to SAVE.
  
  
• Get in the Habit of SAVING as you go along.

5. Make further modifications to the Page in Dreamweaver or Adobe Go-Live

• Add additional Rollovers
• Change the background Color
• Add text
• Add links
• Add tables
• Add other image
• Pagemill will not preserve the Java Script - do not use it once you have rollovers!

SAVE

6. Preview your Page in Netscape of Internet Explorer