Dreamweaver (hereinafter referred to as DW) provides a mechanism called "Behavior" to help you build interactive behaviors in the page. Behavior is a series of actions performed on a web page, through which the user interacts with the page. Using the behavior of DW, you can achieve rich dynamic page effects and achieve user-page interaction without writing a single line of code.
A behavior is composed of events and actions. An event is the result of an action being triggered, and an action is pre-written JavaScript code used to complete a specific task, such as opening a browser window, playing a sound, etc.
When using behaviors on a page element, you specify actions and events to be triggered. DW has provided some certain actions that you can apply to page elements.
1. Some basic built-in behaviors
1. Call JavaScript (Call JavaScript)
This behavior allows you to set up the corresponding JavaScript script to be called when certain events are triggered to implement the corresponding action. When setting this behavior, you can directly enter JavaScript scripts or functions.
2. Change Property (Change Property)
This behavior allows you to dynamically change object properties, such as the size of the image, the background color of the layer, etc. Note that setting this behavior depends on browser support.
3. Check Browser
There are certain differences in the support capabilities of different browsers. Using this behavior, we can check the browser version to jump to different pages.
4. Check Plugin
Sometimes the pages we create require the support of certain plug-ins, such as web pages made using Flash, so it is necessary to check the plug-in of the user's browser to see if it has the specified plug-in installed. This behavior does just that.
5. Control Shockwave or Flash (Control Shockwave or Flash)
Shockwave and Flash are objects that are often inserted into current web page production. This behavior is used to control these objects. You can use it to control the play, stop, and return of the animation, and you can also control the frame to jump directly to.
6. Move Layer (Drag Layer)
The "Move Layer" behavior can realize the movement of layers on the page, and even the movement of layered content.
7. Jump to URL (Go To URL)
You can specify the current browser window or the specified frame window to load the specified page.
8. Jump Menu
The "Jump Menu" behavior is mainly used for editing jump forms.
9. Popup message dialog box (Popup Message)
If you want to display an information dialog box on the page, or give the user a prompt message, you can use this behavior.
2. Simple Example
Below we will take dynamic pictures as an example to introduce the use of behaviors. First you need to make two pictures 1 and 2 of the same size. Here are the specific steps.
1. Open DW to create a page and insert Figure 1 into this page.
2. Select Figure 1 in the DW editing window.
3. Select "Behaviors" in the menu "windows" or press F8 to open the Behavior panel. Note that in the Events For pop-up menu, "3.0 and Later Browsers" should be selected.
4. Press the "+" button to add a new behavior - "Swap Image", and the "Swap Image" dialog box will pop up. In the picture list, you will see a list of all pictures on the page. Select the picture 1 you want to transform. This is the original picture. When the mouse pointer moves over it, it will be replaced by a highlighted picture 2. substitute.
5. Click the Browse button and select the one you want to replace. Through the "onMouseOver" event, the selected picture 2 replaces the original picture 1.
6. Select the default settings for image pre-calling and storage.
The "Preload Images" option means that when the entire page is downloaded, the transformed images are placed in the browser's cache. When the viewer moves the mouse pointer over the Our Story image for the first time, he can hardly feel the highlighted image. There is no delay in the appearance of . The "Restore Images onMouseOut" option means that when the "onMouseOut" (mouse out) event occurs, the image will be automatically restored to its original state.
7. After the settings are completed, click the "OK" button to close the "Swap Image" dialog box and apply the previous settings.
At this time, the Behavior panel contains the events and actions you just set for the picture. There is a "Swap Image" action mark next to the "OnMouseOver" event, and above it there is the "onMouseOut" event and the corresponding "Swap Image Restore" action (this behavior is when you accept the default in the Swap Image dialog box options defined).
8. Close the Behavior panel. Press F12 to preview the page. When you move the mouse pointer to picture 1, you will find that it has been replaced by picture 2.
The above example is just a simple application example of DW's Behavior. There are many other uses, so I won’t explain them one by one here. In addition, DW also allows users to use extended behaviors, which can be downloaded from the Macromedia homepage.