Adding User Interactivity
What You Will Learn
- Create rollovers
- Add user interactivity to your pages using behaviors
- Add multiple behaviors to one user action
- Add behaviors to image maps
- Create a status-bar message
- Redirect users based on the verision of their browser
- Open a new browser window
- Create a pop-up menu
Approximate Time: Four class periods
Lesson Files:
All *.html and image folder found @ P:\hoglen\webdesign_1 -2\lights_ofthe_coasts\lesson_5
Site Preperation
If you have not already done so, create a folder in your “web_design” folder on “H:”. Name the folder “lights_ofthe_coast”. Copy the above files to this folder. Now, create a new site definition for “lights_ofthe_coast”. Finally, export the definition to the same folder to facilitate importing the site each day.
Discussion & Errata
Inserting a Rollover Image, pp. 163-165
Tips!
- Be sure to r-click the warning and allow popups in order to see behaviors created in this lesson.
- Make your rollover images the same size.
Step 2: Be sure Common is selected in the Insert bar, then click on the Image icon. In the drop down menu select Rollover Image.
Adding Behaviors, p. 165
Tips!
- Use this method when the original image is already on the page. This also introduces you to the Behaviors panel which has lots more stuff in it.
- When done, look at the code. All you have done is have Dreamweaver add JavaScript for you.
- Each method you use in this chapter can also be done in Fireworks. When you use Dreamweaver, Fireworks, or plain JavaScript depends on your preference. It’s just another example of there being “…more than one way to skin a cat.”
Step 2: The reason for naming the graphics (properties panel) will become clear in step 5. Step 4: Open the Behaviors Panel from Windows in the top navbar.
Step 8:
Question
1. Can you guess why it’s important to select Preload Images and Restore Images on Mouse Out?
Swapping Multiple Images with One Event, p. 169
No changes. Same as previous method but selecting another image to swap with the Swap Image behavior.
Adding Behaviors to Image Maps, p. 171
Step 2: Select one of the Image Map Tools (located in lower-left of Properties panel). Note that you can create rectangular, oval, and polygon maps.
Step 3: The image map you just created will most likely already be selected.
Editing Actions and Events, pp. 174-176
Step 3: The “Show Events for” is now under the + menu rather than the Events menu.
Creating a Status-Bar Message, pp. 176-177
Questions
2. Which would you prefer used as a view of this web page: a popup or status bar message?
3. Notice that after seeing the Status Bar text to onMouseOut, the text remains in the status bar regardless of where the mouse is moved. Can you fix this so that the text shows onMouseOver and turns off onMouseOut?
Checking the Browser, p. 177
Step 2: The image below shows the “Tag Selector” which is not shown in the text.
Step 5: Do the same thing for the Alt URL box.
Questions
4. Bottom line, what did this accomplish?
5. How can you redirect a viewer to another page?
Opening a New Browser Window
No changes.
Creating a Pop-Up Menu
No changes.
Question
6. You can create pop-up menus several ways; with Flash, Fireworks, and like you have just seen, with Dreamweaver. You can also create pop-up menus with CSS. Why do many web designers prefer CSS over the other methods?
On Your Own
The files you will need are located in P:\hoglen\webdesign_1-2\lights_ofthe_coast\bonus_05
To view the finished page, go to:
Http://cse.ssl.berkely.edu/athomeastronomy/