Rookie learns to use Dreamweaver MX 2004 behavior (8) Open browser window

Source: Internet
Author: User
Tags insert visibility dreamweaver
Dreamweaver| Browser

Site original content, reproduced please indicate the source Web page teaching network .

  Show-Hidden layer

The show-hidden layer action displays, hides, or restores the default visibility of one or more layers. This action is used to display information when the user interacts with the page. The show-hide layer can also be used to create a preloaded layer, a larger layer that initially blocks the content of the page, which disappears after all the page components have been loaded (you can do an advertising effect and remember to have seen such an ad in Sina).

Show-Hide layer action, specific action:

Select Insert-->> Layout object-->> layer and draw a layer in the document window.

Repeat this step to create a different layer.

Click to deselect the layers in the document window, and then open the Behaviors panel.

Click the plus (+) button and choose Show-hidden layer from the Actions pop-up menu.

In the Named Layers list, select the layer whose visibility you want to change. Click Show to display the layer, click Hide to hide the layer, or click Default to restore the default visibility of the layer. As shown in figure:

Repeat these steps for all remaining layers whose visibility you want to change at this time.

Click OK. The behavior panel is as shown in the figure:

Specific application, when pointing to a picture Show hidden layer, the specific production steps:

1. Insert a picture prepared beforehand;

2. Select the "Insert"-->> "Layout object"-->> "layer", the description text of the picture in the layer.

Click to deselect the layers in the document window, and then open the Behaviors panel. Select Show-Hidden layer from the Actions pop-up menu.

In the named Layers list, click Hide to hide the layer.

3. Select the picture and open the Behavior panel. Click the plus (+) button and choose Show-hidden layer from the Actions pop-up menu. Click the Hide button as shown below, and click OK.

4. Repeat the steps above, click the Plus (+) button and choose Show-hide layer from the Actions pop-up menu. Click the Show button as shown below, and click OK.

5. Set the behavior panel as shown below:

Save Press F12 to preview the effect: When you move the mouse over the picture, display the description text.

To create a pre-loading layer, do the following:

In the common category of the Insert Bar, click the Draw Layer button, and then draw a larger layer in Design view of the document window. This layer must overwrite all content on the page.

In the Layers panel, drag the layer name to the top of the layer list to specify that the layer should precede the stacking order. If not selected, select the layer and name it "load" using the leftmost text box in the Layer property inspector.

When the layer is still selected, the background color of the layer is set to the same color as the page background in the property inspector.

If necessary, in the layer (the layer should now block the rest of the page content) Click and type the message. For example, "Please wait, loading page" or "Loading ...", these messages prompt the visitor what is happening so that they know that the page contains content.

Click the <body> label in the label selector in the lower-left corner of the document window.

In the Behaviors panel, select Show-Hidden layer from the Actions pop-up menu.

Select the layer named "Load" from the named Layers list. Click Hide.

Click OK.

Make sure that the events listed next to the show-hidden layer action in the behavior list are onLoad. (usually the default onload, if not we can change.) )

Save the document and press F12 to preview the effect.

Don't forget we are studying! Open the appropriate code view to see the new code in the file, so we can be familiar with the code AH!



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.