Turn off your iPad. It is not to be used (in any way) in this classroom, either for academic or recreational use (unless approved by the instructor). Ignoring this will result in detention and further disciplinary action (Gross Misconduct/Refusal to comply). Did you remember to put your assignments in a folder? Did you label the folder after the assignment title? Did you save your file in the appropriate manner? If not: NO GRADE! Check your PowerSchool frequently. It's your RESPONSIBILITY!

 

(Due Date: March 5)

Website Design (Part V): Rollover Effects

Buttons are more exciting when they actually do something. There’s no getting around it. Humans tend to be astonished when something lights up, or glows, or dances, or whatever gets their attention. We like the sparkle. We like the dazzle.

  1. Open your webpage design in Photoshop
  2. Add a “Outer Glow” layer effect to the “Home” layer 
  3. Modify the Outer Glow settings so that your Home button looks like this (make sure the glow does not extend beyond the slice border):
  4. Repeat this process for all the buttons

This is how your buttons should now look:

  1. Use the square marquee tool to select the home button (make sure the marquee snaps to the boarders around the button)
  2. Go to Edit (on the menu bar) and select “Copy Merged”
  3. Go to File and select “New”
  4. Click “Ok” (just ignore all the other stuff)
  5. Click “Edit” (on the menu bar)
  6. Click “Paste”
  7. Save this image as a “CompuServeGIF” image and call it: “home_button_over” in the “images” directory
  8. Repeat this process with all of your other buttons, adding “_over” to the end of their original names
  9. Do not repeat this process with the logo or spacer images

Now, in our HTML page, we are going to make the images glow when we move our mouse of them.

  1. In Dreamweaver, select your “Home” button
  2. In Dreamweaver, select “Window” on the menu bar
  3. Select “Behaviors” (This is actually under the Tag Inspector window) 
  4. Click on the “+” button (which is the symbol for “Add Behavior”
  5. Select “Swap Image”
  6. Select image “home_button” and set the source to “home_button_over” 
  7. Repeat this process for your other buttons, assigning the “Swap Image” behavior to the appropriate buttons (this is why we labeled your buttons earlier on. If we hadn’t, Dreamweaver would only be able to identify the images as “unnamed <img>” like what is displayed above.

When you are done, go to "File" on the menu bar and then select "Preview In Browser." You can select whatever browser you choose. But, Dreamweaver will force you to save your document first. This is normal.