Apply commonly used behavioral
Each behavior has its own user interface and is applied differently in each case. In this section, the application of three of the most common behavior explained. These are the following behavior:
* Exchange Picture
* Display elements / Collapse
* Open Browser
Share photo
The behavior of “share image” is most common with rollover effects applied. With this behavior the src attribute of an image is dynamically changed so that it points to different files. While as for rollovers often the image itself serves as a trigger, the behavior is “image exchange” is not limited. Thus, for example, you can click a hyperlink to change an image in a different location on the page.
Do share how to apply a behavior of type “image”, the following steps:
1. Open a page in Dreamweaver, which contains a picture.
2.
Select the image and type in the Property inspector in the field hyperlink the “# a”. Enter the ID field a unique name for the image. (Figure 4).
#
When behavior “share image” images identified by the ID (with a letter or start with a digit) and must not contain special characters (for example, can not contain spaces or punctuation).
# Click the panel “behavior” on behavioral Add (+) and select image exchange.
#
Select the dialog box, replace image “in the list of images, the image whose src attribute you want to change. Click Browse to navigate to the new image. Let the two options Preload images and Restore Images onMouseOut when activated (Figure 5). Click OK.
4.
With a standard web page are in the “share photo” probably a variety of both named and unnamed pictures available.
Note: Be careful, therefore, when you create a rollover effect that both options are enabled. With the option “Preload Images” insert a code into the body tag is about the picture changed when the page loads, not displayed. Thus, an immediate response is determined for the case that the behavior is triggered replace “image”. With the option to restore “images at onMouseOut” will conduct a further exchange of the type “image” with another event to restore the image src attribute is inserted.
5.
Save the page and press F12. After the page is opened in your browser, drag the cursor over the image to verify the change, and then away from the image to achieve the rollover effect.
Why does the behavior “Preloading images is” not appear in the panel? In the Behaviors panel “only the behavior of the selected tags displayed. If you are in the tag selector to choose the <body> day, the behavior “Preload Images” is displayed.
Elements Show / Hide
In Dreamweaver, you can use the visibility of all elements on the page using the behavior “elements Show / Hide Control” interactive. With this behavior, you can display useful information or pictures and then just hide it easily.
How to replace the behavior “Picture Show” must in the behavior “elements / Hide the item to be named. In general, the behavior of “elements used Hide / Show” on an absolutely positioned <div> tag, which is also known as AP Div tag. You can, however, all elements with an assigned ID or hide.
Run Profile to use the behavior “elements / Hide the following steps:
1.
Open a page in Dreamweaver, which contains an AP Div tag.
You can create an AP Div tag, for example, by selecting the control panel, “Insert” the “Layout” and then “AP Div to draw”. The mouse pointer changes to a crosshair and you can create a rectangle the size and shape of the div tag draw. Remove the div tag with the handle in the upper left corner to the desired position.
2.
Select the AP Div of day and in the Property inspector, enter the appropriate ID.
AP Div tags in Dreamweaver will automatically Ascending ID (apDiv1, apDiv2 etc.) assigned. It recommended, however, the AP Div tags provided with more meaningful names.
3. Select the trigger to be used as a hyperlink or the picture.
4. Click the Behaviors panel “on behavior (+) Add and select elements show / hide from.
5.
Select in the dialog box elements from Show / hide “in the list of elements of the items you want and then click the Show or Hide (Figure 6). Click OK.
Select the desired item.
Select Figure 6: Desired element.
You can perform multiple actions with one and the same behavior. Thus, for example, you can hide multiple div tags that contain elements of submenus in the menu structure, and also a show div tag for the selected menu. Click the “Default” to reset the visibility of an element to the default value.
6. Save the page and press F12. After the page is opened in your browser, click on the hyperlink or the image to show or hide the item selected. In Dreamweaver, the behavior of “elements will show / hide automatically the event” onClick “assigned. You can at any time in this event “onmouseover” or “Change onMouseOut” to create rollover effects.
If you want to use this behavior to indicate an element, it must first be hidden. In AP Div tags, you can either change the setting in the Property inspector “Shown.” Panel, or use the “AP-elements” and then clicking the eye icon, so it is closed.
Open Browser
Popup windows can be inserted with the code of “open browser windows. Using this behavior you can define the HTML page and insert the width, height and various other browser-specific options.
Run open to apply the behavior “browser”, the following steps:
1. Open a page in Dreamweaver and select the trigger to be used as a hyperlink or the picture.
2. Click the Behaviors panel “on behavior (+) Add and select Open from the browser window.
3.
Enter the Open dialog box “browser” in the URL box, map the path and name of the file or click Browse and select the file. Enter in the boxes to window width and window height, the size in pixels. Select the desired attributes in browser options. Alternatively, you can type in the box window, type a name for the popup window (Figure 7 and click OK.).
Browser Options dialog box, select “Open Browser”.
Select Figure 7: Browser Options dialog box, open browser window.
You must enter the window name only if you want to refer to another JavaScript function on the popup window.
4. Select the panel “conduct” the newly added entry and from then on the list “events” to the desired shutter.
5.
Save the page and press F12. After the page is opened in your browser, perform the appropriate action to enable the behavior.
In addition to those contained in Dreamweaver default behavior are on the Adobe Exchange website numerous other behavior. Choose to call this site in the Behaviors panel, select Add Behavior (+ off)> Other behavior.