Dreamweaver
Enrich web effects with behavior
Behavior can be said to be the most distinctive feature of Dreamweaver MX 2004, which allows you to implement multiple dynamic Web pages without writing a single line of JavaScript code. The key to behavior is that Dreamweaver MX 2004 offers a lot of action, which is a standard JavaScript program where each action can accomplish a specific task. So, if the functionality you need is in these actions, then don't write the JavaScript program yourself.
Pop-up message box
If you want someone to enter the home page when you can see a pop-up message box to display some content, you can do this through the following methods.
The first step is to create a new page in the Dreamweaver MX 2004 main window, 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 choose "Popup Message" from the pop-up menu, and you can see the window shown in Figure 1, where you can enter such as "Welcome to China Computer Education news website!" "Message.
Figure 01
The third step after adding a good hint text, the control panel is called "Popup message" behavior, at this time also click on the left Drop-down menu, and choose "OnLoad" an item, so that when someone enters the page will automatically perform the behavior of the setting, Naturally, you can see the pop-up message box.
Tip: You can also choose "OnKeyDown", "OnMouseDown", and so on from the Drop-down menu, so that you press the keyboard or click the mouse to appear in the message box.
Link Interpretation Text
When browsing some Web pages, the mouse over the image or the link will have an explanatory text appears, the effect can be achieved through the following steps.
The first step is to insert an image in the Dreamweaver MX 2004 edit window, and then, after clicking the image, fill in the "#" number in the Link entry box in the property panel and let it link to this page.
The second step is to add a layer next to the image by using the "Insert→layer objects→layer" command, and enter the words you want to display. After this layer is selected, the "Vis" property is set to "Hiddend" in the properties panel to hide the layer (Figure 2).
Figure 02 Step three after selecting the image, activate the behavior panel with the Windows→behaviors command, click the + button and select Show-hide Layers. Select the layer that you want to display in the pop-up window, then click the "Show" button on the lower part, so that you can make an extra event in the behavior panel called onmouseover. At this point click the "+" button and click "OnMouseOver", so that when the mouse on the image can be displayed on the layer, that is, can appear floating text explained.
The fourth step is to add the "hide" event to the layer in the third step and set the behavior to "onmouseout" so that the layer can be hidden when the mouse is taken away.
After the above operation, press the "F12" button to open the IE browser preview, when the mouse moved to the picture on the time will appear preset prompts the words, and the mouse moved the picture when the words automatically hidden.
AutoFit Window Size
Some pages change the size of the window to adjust the page size, so the window is too large there is no space, the window is too small edge will not run out of the move bar, for this automatic resizing of the page, in the Dreamweaver MX 2004 can refer to the following steps to easily implement.
The first step is to create a new page and then insert a row of three columns by using the "insert→table" command, which allows it to be automatically stretched to fit the browser window, regardless of its width.
The second step is to see that the lower part of each cell is marked with a width and a small triangle (Figure 3). In this table, you can set which parts need to be fixed, but only one column will be extended automatically, for example, here we set the last column to expand automatically as the window size changes.
Figure 03
Step three to select the last column, run the view→table mode→layout Mode command, and select Make Column Autostrach in the pop-up menu (Figure 4).
Figure 04
Step fourth will then appear in the dialog box, and you will be prompted to allow the line to stretch, Dreamweaver need to place some interval pictures in other columns, select "Create a spacer image file", so that the picture is not displayed in the browser window, Instead, it acts as a fixed form.
After the fifth step, you return to the original edit window, and you can see that the last column has been automatically stretched to fill the entire browser window, while the other two columns remain in a fixed width.
Tip: Set the Automatically stretched column to see a wavy line at the top of the column.
When you do this, when you preview the page effect in IE browser, if you change the size of the window, the width of the last column changes, and the width of the first two columns remains unchanged, so that you can resize the window automatically.
As described above, there are only a few ways to behave in the Dreamweaver MX 2004, and the flexibility to combine behaviors and layers can also be accomplished with features such as dynamic pictures, drag-and-drop layers and so on, making your home page look more colorful!
