Some Dreamweaver Tricks

Creating a rollover with an image map

Dreamweaver has a Behavior menu that can help you add some Javascript techniques to yourpages. A good one to know is the Swap Image Command. This will allow you to have a rollovereffect on an Image Map.

1. Create an image as an image map and then create additional images for your rolloverstates.

2. Create an image map in a normal page layout (table, etc.). Use the hotspot tool inDreamweaver to make your hotspots.

3. Open the Behavior Palette (Window, Behaviors)

4. Make sure you have one of the hotspots of the image selected. (Use the hotspot selectarrow in the image properties box)

5. Click on the plus sign (+) in the Behavior palette. It drops down a list of behaviors.Choose Swap Image.

6. A dialogue box opens up that allows you to select the image to be swapped with thatImage map when you rollover that hotspot. Simply browse for the file and hit OK. Leavethe Preload Images and Restore on MouseOut boxes checked.

7. Continue for all hotspots

That’s it. It’s as simple as doing a regular rollover. The trick is making sure you create yourrollover states consistently.

Creating Disjointed Rollovers

Sometimes you want to create a rollover effect in which the item that changes is in anotherplace on the screen than the button that triggers the event (i.e. rollover a button to change aphoto somewhere on the page). You can also use the Swap Image Behavior to accomplishthis.

1. Create all button and photo image states. Make sure all photos are in the sameproportion (preferably the same size)

2. Insert all the images on the page as they are to appear in their original state3. Name all images (use the name field in the Dreamweaver properties inspector)4. In the Behavior Palette, choose the + sign, then choose Swap Image.

Web Publishing and DevelopmentInstructor: Cindy RoyalThe University of Texas

5. First select the name of the image that will be swapped for the button. Then browse forthe image that you want to swap it with on the mouseover. Keep the boxes at thebottom of the box clicked.

6. Then select the main photo image and browse and match the photo that you want toswap. Hit OK. Check the code to see the Javascript that was written.

7. Do this for each button

Converting Layers to Tables

As we seen throughout the semester, tables can be difficult to manipulate. There is a feature inDreamweaver that allows you to create moveable layers to put your items in and freely movethem around the page (don’t kill me for not having shown you this yet. I wanted you to reallyunderstand tables first). BUT YOU MUST CONVERT LAYERS TO TABLES BEFORE YOUPUBLISH THE PAGE. Many browsers do not read the layer code properly, so you don’t alwaysget the results you want. But it is easy to convert the layered page to a table.

1. Choose Insert, Layer from the menu2. You can insert any object, text, or animation in a layer3. Now you can move this freely about the page. Be sure to click on the little handle in the

top left corner. You can also size the layer with the edges.4. You can insert additional layers with other objects and place them on the page.5. Some important tips: Do Not Overlap Layers and Do Not Put Layers Inside of Layers.6. To check if you have accidentally put a layer inside another layer, open your Layer

Palette and see if any layers are indented.7. When you have a version with layers ready, save it under a unique name so that you

can always go back to your layered version to make changes.8. Choose Modify, Convert, Layers to Tables. Now save this tabled version under another

name. This is the one you will upload to your site.