Intermediate Web Design logo
Introduction | Readings | Instruction | Assessment | Calendar  

 
 

Module Three: Getting Graphic
Optional Section on Graphic Link Devices
The Popup Message | The Jump Menu

The Popup Message

So you think pop-ups are really cool? There's another kind of pop-up that you may have seen on a web page. Try moving your cursor over these words.

  1. Begin your popup message by highlighting the text or image you wish to activate the pop-up. This will be the "trigger" to get our message to appear.
  2. In the Tag Inspector panel (F9), find the Behaviors tab. Click on the plus sign and select Popup Message from the menu.
  3. A dialog widow will open. Type in your message. It is not possible to add special formatting to this text. Click OK or hit Enter when you're done.popup message editing
  4. The default (automatic) behavior for a popup message is to appear when the reader clicks on the trigger. In the illustration you'll see this circled in blue. If you want to make the popup easier to find, click on the behavior (onClick) to see a menu of options (the trigger must be highlighted for the behavior to be editable). The example I created for you uses onMouseover (circled in red).
  5. Select the appropriate behavior and save the page. The popup won't work on the Dreamweaver workspace, so preview the page by clicking on the Live View button. Don't forget to turn off Live View when you're done previewing your page!

    NOTE: The only way to modify your popup message is to open the page in Code view and edit the text there.

The Jump Menu

"For our unit over 20th century composers you may choose to research one of the following. Click on the first name to see the complete list."

The construction above is called a jump menu. Its advantage, other than it's cool, is that you can have a huge list of options, but the menu only takes one line on the web page.

  1. Begin your jump menu by placing your cursor where you want the menu to appear on the page. It's not a good idea to place the menu "inline" with text, so you'll probably want to hit Enter before creating the menu. You can change the alignment of the menu on the page later if you wish.
  2. From the Insert menu select Form --> Jump Menu (toward the bottom of the options). The Insert Jump Menu dialog window will open. You can also start you jump menu through the Forms Insert menu (click on the jump menu button, circled in red):
    Jump menu button
    Begin by typing the first menu item in the Text window. When you tab to the URL window, your first text entry becomes your first menu item. Now type, paste, or navigate to the link for the first menu item.
  3. Click on the plus sign, as you did in the pop-up menu, to add more items to the list. Use the up and down arrows to change the order of the items in the list at any time.
  4. You'll notice that there are four more options forJump menu options you. For the time being we'll ignore Open URLs in:. The Menu name is not necessary, but enter one if you feel it's untidy to leave it as menu1. The two check boxes can be useful, depending on your use of the jump menu. If you look at my 20th century composers menu again, you'll see a Go button. However, you didn't need to click on it because the browser "went" as soon as you released the mouse on your choice of composer. But what if you wanted to go to the same site as appears in the window? That's when you click on the Go button. Do you want the list to reset to the first item after the reader goes to the new link? If so, check "Select first item..." Otherwise the name will remain the same as what the reader last chose.
  5. Click on OK or hit Enter when you're done. Like the pop-up menu, you'll need to preview the page in order to see the jump menu work.
  6. Editing a jump menu isn't too hard. Start by selecting the menu, then right-click/Control-click to see a menu that includes List Values... You can also find a List Values button in the Properties Inspector (where you'd ordinarily find the Page Properties button). This window appears:

You can now edit the Item Label (text) or Value (URL) as needed. Click on the text or URL to change them. Use the plus sign to add an item; use the minus sign to delete one. Use the up and down arrows to change the order of the items. Click OK or hit Enter when you're done.

Because these three items are optional, there is no guided practice or assessment for them. However, if you wish to try them out, feel free to add them to an existing page or create a new document. Upload it it your BlueDrive site and send me the URL. I'll be happy to critique it.

Tip:
These components, especially the Popup Message, can look gimmicky on your web site. Please use them prudently.

When you have finished your work on this page, continue to the Assessment Page.

 

Introduction | Readings | Instruction | Assessment | Calendar
Return to top
© COPYRIGHT 2004-2007 James Erbe All Rights Reserved.
Logo design by Carlo Vergara and Phillip Martin.
Last Updated: January 10, 2009 8:51 AM
http://www.uwstout.edu/soe/profdev/advwebdesign