Rollovers and behaviors in DreamWeaver

DreamWeaver tries to simplify the process of dealing with javascript as much as possible.

Rollovers


Insert | Image Object | Rollover Image

Peru SST unitimages that can be used to play with:

button, button-over

light bulb, glowing light bulb



Jumpmenus

Insert | Form | Jump Menu

In this menu, "NEARBY LIBRARIES" is a menu item that doesn't have a value (URL) to jump to. It's just that the first item on the list shows by default, and so you can use that to "label" the menu.

Insert the Jump Menu: to get that behaviour of having you leave the page as soon as an option is selected.


Using DW 'behaviors'

Behaviors are javascript scripts that DreamWeaver makes available through its Behaviors Window. Available by going to "Window | Behaviors"

Useful behaviors that DW offers include...

Frequently you'll want to trigger a 'behavior' by, say, clicking on a hypertext link or button. How to make sure that the user doesn't get transported elsewhere? Two things...

<a href="javascript:"
  onClick="blah();return false">

Show/hide a layer

Show more

  1. In DreamWeaver, Create a new document, and insert a named layer (div) in that document with something on it.
  2. Give the layer visibility:hidden as one of its style rules.
  3. Click away from the layer. Insert some text, highlight the text you want to make into the link that will do the action, and link it to javascript:;
  4. With the text still highlighted, open/go to the Behaviors Window.
  5. Click "+" and choose "Show-Hide Layers". Choose your layer and click Hide.
  6. Once you've created such a 'behavior, you can click once on the trigger, to change that to something other than what DW choose initially.



Spry menu bars and other things

With DW CS3 and newer you can Insert | Spry | Menu Bar to insert a menu like the one at right.

This menu is actually a bunch of nested, bulleted lists. Select the <ul> tag associated with the top of the list. The property window will change to let you add/subtract submenus and specify URLs.

Turn Styles Off to see/edit the menu bar in the form of a bulleted list.

Whenever you use any of these Spry items, DW needs to put a bunch of javascript files and CSS stylesheets in a /SpryAssets/ subfolder. You edit the stylesheets to change the appearance of the menu bar.

Try changing, for example:

Tabbed panels

...Look like this:

Content 1
Content 2






Homework - rollover

Using Photoshop, create two images with the same pixel dimensions. Use DreamWeaver to create a web page with a rollover effect: switching the image when the mouse goes overtop the first one. Hand your homework in by putting a link to the page you made using the comments feature of this page (below).