Dreamweaver Lesson 5

[Completed Latest]

  1. Open the latest.htm file from the Lesson05 folder.
  2. Switch to Layout mode to view table structure
  3. Place insertion point in the blank cell to the left of Welcome to Compass. Then click the [Insert][Image Objects][Rollover Image]

    .
  4. Key biking in the Image Name text box. The name you enter here must be unique. No other object on this page can have the same name. Don't begin the name with a number.
  5. Click "Browse" next to the original image text box and select biking_button.gif in the Project_Images folder.
  6. Click "Browse" next to the rollover image text box and select biking_button_f2.gif.
  7. Make sure the "Preload Rollover Image" option is selected.
  8. Key Biking in the Alternative text box.
  9. Click "Browse" next to the When Clicked, go to URL and like the biking button to biking.htm from the Lesson05 folder.
  10. Place the insertion point after the image and press {Shift} + {Enter}.
  11. Use the "Insert Rollover Image" command, repeating steps 3-10 to add the remaining buttons: climbing_button.gif, diving_button.gif, and kayaking_button.gif. For the rollover images, use the corresponding image files:climbing_button_f2.gif, diving_buttn_f2.gf, and kayaking_button_f2.gif. Don't forget to give each a unique name as well as Alternative text. You don't need to link these buttons.
  12. Select the "Adventure Gear" image and key gear in the image name tex box on the Property inspector (see figure below). The image name text box is under the word "Image" on the upper-left corner of the Property inspector.


  13. Click [Window][Behaviors] to open the Behaviors panel.
  14. With the image still selected, click Add Behavior (+) button at the top of the Behaviors panel and click "Swap Image" from the pop-up menu.
  15. In the Swap Image dialog box, click "Browse" and select Ad_gear_f2.gif image from the Project_images folder.
  16. Repeat steps 12-15 to add rollovers to the remaining buttons, using the corresponding image filesfeatures_f2.gif, Travel_logs_f2.gif, and About_f2.gif. Don't forget to name each image before you add the Swap Image behavior.
  17. Select the "Welcome to Compass" graphic.
  18. Name the the image "text".
  19. Select the round biking image to the left. This image has a Swap image behavior assigned.
  20. Double-click the "Swap Image" action in the Behaviors panel. The swap image dialog box opens.
  21. Select "image text" in the list.
  22. Click Browse and select biking_text.gif from the "Project_images" folder.
  23. Repeat steps 19-22 for all round buttons, using climbing_text.gif, diving_text.gif, and kayaking_text.gif from the "Project_images" folder.