Behaviors and Commands
Fly Out Menus
Finishing Touches and Uploading

DREAMWEAVER BEHAVIORS AND DREWAMWEAVER COMMANDS

 

Everybody loves the versatility that JavaScript can bring to your web pages, yet not as many people love programming JavaScript. Go figure.

Dreamweaver makes your life easier by allowing you to insert Behaviors, most of which directly translate into JavaScript. Using behaviors, you can do things like insert pop-up windows, create disjointed rollovers, check to see if users have a certain plug-in or what browser theyre running.

Commands save you work by automating complex tasks, like creating a photo album or checking HTML for redundancy or unneeded tags.

The best thing about behaviors and commands is that they are extendable. Many third party companies and individuals write commands and behaviors for Dreamweaver. You can download these extensions from the web, most often for free! Our web design course has even made some custom behaviors available to you!

 

Whoo Hoo!

 

Were going to learn about the best behaviors and commands that come with Dreamweaver and where to get the best extensions.

 

Behaviors

Behaviors are mostly JavaScripts made easy. To work with Behaviors, youll have to open the Behaviors Inspector:

WINDOW-> BEHAVIORS

Notice that the Behavior Inspector has a window labeled "Events For:" Make sure this is set to "4.0 and Later Browsers". You can set behaviors specifically for Netscape or IE, but why would you? Browser versions 3.0 and below have trouble with JavaScripts, so its best to leave them out right now. Later, you can run a special check to see what version browser someone is using. If theyre using (shudder) 3.0 or below, you can automatically direct them to a page designed for them.

 

The most important (and often overlooked) part of the Behavior inspector is the title bar. You will apply different behaviors (JavaScripts) to different elements. For example, you must have the <body> selected if you wish to check a browser version or pop a window up on load.

  1. Put an image and some text on the screen.
  2. Click the image and the text. Watch as the tag identified in the title bar of the Behavior Inspector changes.

 

Adding Behaviors

To add a behavior:

1.      Click the element you wish to add a behavior to: <body>, an image, a link

2.      Click the "+" on the Behaviors Inspector to add a behavior



3.      Choose your behavior.
("Open Browser Window") chosen in example below.



4.      Use the Events pull down to determine when your behavior event will occur.
Note that different options are available, depending what youre adding the behavior to. For example, when adding a behavior to a form, you can choose "on submit" as the event to trigger an action.

 

Useful <body> Behaviors

To use the <body> behaviors, you must be clicked into the body. This can sometimes be tricky. You may often be clicked inside a <p> tag. Remember that you can choose the tag youre editing by clicking on it in the lower left corner of the Dreamweaver window.

Some of the most useful <body> behaviors are:

Check Browser: You can check what browser a user is operating and redirect them to a page designed for their particular set up.

Check Plug-in: If your page uses elements that require a plug-in, you can check to make sure that your users have the correct plug-in before proceeding. If they dont, you can automatically direct them to a page that is plug-in free, or you can direct them to get the plug-in.

Go to URL: Automatically shuttles a user off to another URL, used when a page changes location. You can change the behavior so that it works on the page load, or when a user exits. Use this power only for good and never for evil.

Play Sound: Plays a .WAV or .AIFF file. Note that these files are large and take a fair amount of time to download. A small sound is okay, but stay away from extended sounds. Later youll learn how to stream MP3s and Real Audio.

Pop-up Message: A pop-up window appears upon load. Be careful not to get annoying.

 

Creating a Pop-Up Window With Behaviors

Youre going to create a pop-up window that displays when a user clicks a link. This can be incredibly useful to display images or set any kind of information in front of your user without losing the current page.

 

To create a linked pop-up window:

1.      Highlight text on the screen. In the link window of the Properties Palette, type "#".

The # sign sets the link up, but without a link value. This will allow the JavaScript to handle the linking.

2.      With the link still highlighted, click OPEN BROWSER WINDOW on the Behavior inspector.

You can set the windows height and width. Note that the pop-up window will not have navigation toolbars or other normal buttons and menus unless you check the appropriate box.

 

Using Behaviors to Create Disjointed Rollovers

The most useful of the image behaviors is the "swap image" behavior, which allows you to create disjointed rollovers. Disjointed rollovers allow you to roll over one image and have another image change somewhere else on the page.

For an example of disjointed rollover images check out:

www.awdsf.com/courseware/examples/disjointed.htm

 

A disjointed rollover works by replacing one image on the screen with another. The following table is set up for a Disjointed Rollover:

It appears that "Happy" and sad are sitting next to an empty cell. They are not. They are sitting next to a cell holding a transparent GIF, or shim. The shim will be switched out for another image when each button is rolled over.

 

To Build a Disjointed Rollover:

**NOTE: Follow the below steps carefully. While not hard, excited beginners sometimes get ahead of themselves and choose the wrong item when first building disjointed rollovers. If you mess up, just start again.

 

1.      Build a table containing all the items to show when the page loads.

a.      If you dont want to display rollover items upon load, use a shim set to match the height and width settings of the rollover items.
The above table elements, including the shim, can be found at:
www.awdsf.com/courseware/examples/disjointed.htm

 

2.      Name every on-screen item, including the shim, by clicking the item and typing an appropriate name in the properties palette. JavaScript requires that you name your images so it knows which one to replace.

You do not have to name items that have not appeared on the screen yet.

3.      Click a button. On the behavior inspector, choose:
SWAP IMAGE

 

4.      In the Images window, select an image to change when the preferred button is rolled over.
In the example below, the image "shim1" will be swapped for another rollover.

So far, weve set which button will activate the rollover (by clicking it and choosing the Swap Image behavior), and which image will change (by selecting it in the Images window above). Now we must instruct Dreamweaver which image should appear in the swapped images place.

5.      Click Browse and select which image to display upon rollover.

6.      Repeat steps 4 and 5 if you want more than one image to display upon rollover.

7.      Click OK

 

Commands

Commands save you work by automating complex tasks, like creating a photo album or checking HTML for redundancy or unneeded tags.

Weve already learned about two commands, Record Commands, and Set Color Scheme. Most of the really useful commands are available from external sources. Well learn about those in a minute. There are a couple of useful commands that come with Dreamweaver:

�.       Clean-Up HTML: Programmers are always complaining that Dreamweaver creates too much code and that it is redundant sometimes. The extra code that Dreamweaver inserts will hardly ever impact on load time, but the nice folks at Macromedia inserted a handy command to help Dreamweaver clean up after itself:
COMMANDS-> CLEAN-UP HTML

There is also a command that cleans up web pages created with MS Word. MS word creates webpages in XML and XHTML. It allows for wonderful formatting for things like online resumes and text based sites. Dreamweaver does remove a fair amount of code from pages created with Word 2000, but some formatting is lost.

�.       Create Web Photo Album: If you have a whole bunch of pictures that you want to make a web photo album with, Dreamweaver will save you hours of work. Dreamweaver will take every image in a folder, make thumbnails from them, and put all of the thumbnails on a page. If a user clicks the thumbnail, they will be taken to a unique page that displays the image full size.

To create a Web Photo Album:

  1. Click COMMANDS-> CREATE WEB PHOTO ALBUM

You will need to tell Dreamweaver what folder all of your images are in (Source Images Folder) and what folder it should put the thumbnails in (Destination Folder).

 

Downloading More Behaviors and Commands

One of the coolest things about Dreamweaver is that its commands and behaviors are expandable. Third party developers make new commands and behaviors. You can download and use most of them for free.

 

Software You Will Need

To extend the abilities of Dreamweaver, youll need the Extension Manager, available for free at Macromedias Exchange. To open the exchange, make sure youre signed on to the Internet, and click:

COMMANDS-> GET MORE COMMANDS

Download the exchange manager and install it into your machine.

 

Downloading Commands and Behaviors

Return to the Macromedia Exchange by clicking:

COMMANDS-> GET MORE COMMANDS

You can browse the available commands and behaviors. There are a whole big bunch of them, so youll have to look around. Make sure you read the download directions for each item you download. Sometimes they must be placed in a special folder on your hard drive.

 

Opening the Extension Manager

To open the Extension Manager click:

COMMANDS-> MANAGE EXTENSIONS

 

Installing Downloaded Commands and Behaviors

Youll install your new behaviors and commands directly through the extension manager.

  1. Open the extension manager by clicking COMMANDS-> MANAGE EXTENSIONS
  2. Install the new behavior or command by clicking: FILE-> INSTALL EXTENSION

 

  1. Browse to wherever you saved the extension and double click it.

 

Using the Extensions

There is no standard way to use the extensions. Some work through menus, while others work by pushing a button. Each extension item functions differently, but you can open the Extensions Manager to receive instructions on their use.

When you open the extension manager, youll see your installed extensions. When you click the desired extension, you will be given instructions on its use below.

 

Some Useful Extensions For You To Download

There are an awful lot of useful extensions. Below are just a couple of the ones Ive found most useful. Youll have to search for these extensions at the exchange:

�.       MFX Slide Menu: Creates cool menus that slide open when you click them!

�.       Auto Title Untitled Documents: Sets the Title of the document to whatever you saved it as, minus the ".htm". An auto title will almost never be sufficient for search engine configuration, though.

�.       Borderless Frame: Click a button, remove all frame borders! This is especially useful for users of Dreamweaver 3 and below.

�.       Resolution Redirect: Sends a user to a specific page depending on their screen resolution.

�.       Table of contents: Builds a Table of Contents for text heavy pages

 

There are also other sites that have extensions for you to download. A few are listed below. I would advise you to spend a good amount of time looking through the Macromedia exchange and the below sites. Youll find many useful and timesaving extensions for you to download.

http://www.idest.com/dreamweaver/objects-fr.htm

http://weblogs.userland.com/dreamweaver/commands/

 

Continue to Fly Out Menus |