Slicing Images

  1. Select the crop tool (fourth from the top on the tool bar) and hold until the slice tool appears. Select the slice tool.
  2. Draw slices around each button, the header, the footer. Work from the top down.
  3. Make sure the layer for the rollover button state is hidden and the layer for the normal button state is visible
  4. Go to File Save for Web and Devices
  5. Click Save. Save the images in the same folder as your html and css page.
  6. Open up Finder and navigate to the images folder.  Rename the images (header, home, contact, footer, etc.)
  7. In Photoshop, turn off the layer for the normal button state and make the rollover button state visible.
  8. Go to File Save for Web and Devices
  9. Click Save. Save the images in the same folder your html and css page and the new images folder. They images will be put into the existing images folder.
  10. Open up finder and delete extra images and rename buttons (home_roll, contact_roll, etc.).

Mapping the Drive

In Dreamweaver, we need to do something called “Mapping the Drives.” This points dreamweaver to the folder where all of our website content is stored (images, html pages, etc.) This is really important once we start placing in pictures and other content because Dreamweaver creates a specific file path to find the content we place in.

  1. Go to Site Manage Site
  2. Rename your site with your  name
  3. Browse to the folder where your html page, css page, and images folder is and select it.
  4. Click Save and the Done.

Look at the panel on the lower right side. You should see the folder you selected with all of your pages displayed and images folder displayed.

Navigation Bar

We are going to insert the navigation bar as a special rollover images.

  1. Delete any text that is in the navbar div tag region.
  2. Place your cursor in between the div tags.
  3. Go to the insert panel on the top right and select Insert Rollover Image (if you just see a regular image, click on the drop down arrow on the left side of the image option and choose rollover image).
  4. Browse and Select both the original image and then the rollover image.
  5. Enter in alternate text.
  6. Click OK.
  7. On Design view, click just to the right of the inserted image so that you have a blinking cursor.
  8. Insert the remaining buttons the same way.

Inserted into your code view will be the images and in the head area of your code (the behind the scenes) a lot of javascript will be added.  It is perfect where it is at.