Personal tools
  •  

DWMX Behaviors

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Dreamweaver offers several built-in JavaScript functions called "Behaviors." These behaviors are found in the Behaviors tab of the Design panel (Window > Behaviors). There are several behaviors that come with Dreamweaver, and several more that can be added as "Extensions" or plugins from www.macromedia.com/downloads .

Before you can get any extensions, you need to install the extension manager found at:
http://www.macromedia.com/exchange/em_download/

JavaScript enables web pages to have a certain degree of interactivity. For instance, a little JavaScript in a web page can let the user know if a certain form field has been filled out correctly. Other scripts can display an alert message, open a new window, perform calculations, and a huge variety of other functions. One behavior that we will use is the "Validate Form" behavior.

Read the following supplemental tutorial to get a feel for what Dreamweaver Behaviors can do. The behavior you will apply in your page is NOT covered in the tutorial, but don't panic, we'll walk you through it.

If you need more information than these tutorials cover, refer to the Dreamweaver manual (the book or in the Help menu within Dreamweaver) or search the Internet for "Dreamweaver Tutorial."

Activity:

Validate the input on your contact page email form.

Using JavaScript, you can verify that a user has put the correct type or amount of information in a form before they submit it.

  1. Open your contact.htm page.
  2. Select your Submit button on your email form.
  3. On the Behaviors tab of the Design panel, click the plus sign ( + ).
  4. Select the behavior "Validate Form." (If the Validate Form behavior is grayed out, it means that you do not have the Submit button selected)
  5. A dialog box will appear with a list of the text fields from your form. Click on each listing and check the "Required" box. It should already be set to accept "Anything." On the text field that collects the user's email Address, click the radio button to accept Email Address. This will create JavaScript that looks for the '@' symbol in the user's input.
  6. When you are finished, click OK.
  7. Save your file and upload it to the server
  8. Ensure that the behavior works correctly by attempting to submit the form without filling in any fields.

Rollover Images

Dreamweaver MX makes it easy to apply JavaScript rollovers to images. This means that when you move your mouse over an image, such as a button, it will replace the current image with another one, such as a highlighted version of the same button. In Dreamweaver, this is called the "Swap Image" behavior

The following supplemental 1 page tutorial and the activity below will guide you through the simple process of creating a rollover. Both assume that you have at least 2 images prepared. We suggest creating a simple button in a graphics program that says "Home" and making a copy of it that is a slightly different color, naming them "home_up.gif" and "home_over.gif" respectively. Otherwise, find 2 images that you would like to apply the Swap Image behavior to.

Activity:

Add a Rollover button to your web site.

  1. Open one of your web site pages, or if you would like to apply this button to your entire site, open your template file.
  2. Insert the "home_up.gif" image or another image that will be the "up" state of the rollover by clicking the Insert Image icon in the Insert panel, Common tab (Window > Insert).
  3. Since this image will act as a "button," add a link to "index.htm" to your image in the Properties panel.
  4. With the image selected, click the plus button ( + ) in the Behaviors tab of the Design panel (Window > Behaviors) to view the list of available behaviors. Select "Swap Image".
  5. In the dialog box that appears, click the folder icon next to the "Set Source To:" field to browse to your "home_over.gif" image or another image that will be the "over" state of your rollover. Make sure "Preload Images" and "Restore Images onMouseOut" are checked. Click OK.
  6. This should apply both "Swap Image" and "Swap Image Restore" to your list of behaviors in the Behaviors tab. "Swap Image Restore" simply adds the code telling the image to revert to the "up" state when your mouse moves off of it.
  7. Test your rollover by previewing your page in a browser (File > Preview in Browser or F12).
  8. Save your file. If you are adding the rollover to your template file, saving it will prompt you to update all the files in your site that use the template. Click OK.
  9. Upload your modified files to the server and check them out in a browser.
Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). DWMX Behaviors. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource127.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.