Dreamweaver MX 2004 from scratch(5)

Author：Eve Cole Update Time：2009-05-31 21:27:10

Use behaviors to enrich web page effects <BR> Behaviors can be said to be the most distinctive feature of Dreamweaver MX 2004. It allows you to achieve a variety of dynamic web page effects without writing a line of JavaScript code. The key to behavior is that Dreamweaver MX 2004 provides many actions, which are actually standard JavaScript programs. Each action can complete a specific task. This way, if the functionality you need is in these actions, don't write your own JavaScript program.

Pop up message box

If you want others to see a pop-up message box to display some content when they enter the homepage of the website, you can do it through the following method.

The first step is to create a new page in the main window of Dreamweaver MX 2004, and then run the "Windows→Behaviors" command to activate the behavior panel.

The second step is to click the "+" button in the behavior panel and select the "Popup Message" command from the pop-up menu. At this time, you can see the window shown in Figure 1, in which you can enter something like "Welcome to the China Computer Education News website! ” and other prompt messages.

Figure 01
In the third step, after adding the prompt text, there will be an additional behavior called "Popup Message" in the control panel. At this time, click on the drop-down menu on the left and select the "onLoad" item, so that when others enter the page After that, the set behavior will be automatically executed, and naturally you will be able to see the pop-up message box.

Tip: From the drop-down menu, you can also select behaviors such as "onKeyDown" and "onMouseDown" to cause a message box to appear after pressing the keyboard or clicking the mouse.

Link explanation text

When browsing some web pages, explanatory text will appear when you place the mouse on an image or link. This effect can be achieved by following the steps below.

The first step is to insert an image in the editing window of Dreamweaver MX 2004. After clicking the image, fill in the "#" sign in the link input box of the properties panel to link it to this page.

The second step is to add a layer next to the image through the "Insert→Layer Objects→Layer" command and enter the words that need to be displayed. After selecting this layer, set the "Vis" property to "hidden" in the properties panel to hide the layer (Figure 2).

Figure 02

Step 3: After selecting the image, activate the behavior panel through the "Windows→Behaviors" command, click the "+" button and select the "Show-Hide Layers" item. Select the layer that needs to be displayed in the pop-up window, and then click the "Show" button at the bottom. After confirmation, an additional event named onMouseOver will appear in the behavior panel. At this time, click the "+" button and click to select the "OnMouseOver" item, so that when the mouse is placed on the image, the layer can be displayed, that is, floating text explanations can appear.

Step 4: Follow step 3 to add a "Hide" event to the layer just now, and set the behavior to "OnMouseOut" so that the layer can be hidden when the mouse is removed.

After completing the above operation, press the "F12" button to open the IE browser for preview. When the mouse moves over the picture, the preset prompt words will appear, and when the mouse moves away from the picture, the words will be automatically hidden.

Automatically resize windows

Some web pages will also adjust the web page size when changing the window size. Therefore, if the window is too large, there will be no blank space, and if the window is too small, the moving bar will not run out of the edge. For this automatic page size adjustment function, In Dreamweaver MX 2004, you can refer to the following steps to achieve it easily.

The first step is to create a new page, and then insert a table with one row and three columns through the "Insert→Table" command. At this time, you can ignore its width and let it automatically stretch to fit the browser window through the following settings.

In the second step, you can see that the width of each cell is marked and there is a small triangle at the bottom (Figure 3). In this form, you can set which part needs to be fixed, but only one column can be automatically stretched. For example, here we set the last column to automatically stretch as the window size changes.

Figure 03
The third step is to select the last column, run the "View→Table Mode→Layout Mode" command, and select the "Make Column Autostrach" item in the pop-up menu (Figure 4).

Figure 04
In the fourth step, a dialog box will appear, and it will prompt that in order to stretch the rows, Dreamweaver needs to place some spacer images in other columns. Select the "Create a spacer image file" option here, so that the images will not appear in the browser window. It is displayed, but plays the role of fixed table.

After confirming in step 5, return to the original editing window. You can see that the last column has automatically stretched to fill the entire browser window, while the other two columns maintain a fixed width.

Tip: If you set a column to automatically stretch, you can see a wavy line at the top of the column.

After completing the above operations, when previewing the page effect in the IE browser, if you change the size of the window, the width of the last column will also change, while the width of the first two columns will remain unchanged, so that the window can be automatically adjusted. Big or small.

The above introduces only some methods of behavior functions in Dreamweaver MX 2004. Flexible combination of behaviors and layers can also realize functions such as dynamic pictures, draggable layers, etc., making your homepage look richer. Colorful!