Go deep into Dreamweaver layer application

Note: As I mainly introduce some layer application skills here, I have not introduced the basic Layer knowledge. Please forgive me. In addition, I use Dreamweaver4.0 in this article.

I. Positioning of elements

It is very convenient to use tables to typeset pages. However, if you need to insert text into applications such as images, you need to use layers to typeset, in Dreamweaver4.0, layers can be easily converted into tables. First, set the image Layers on the page, click "Modify/Layout Mode/Convent Layers to Table", and a menu is displayed, set parameters and click OK to get the desired effect.

II. Auxiliary instructions on object creation

When you visit a website to view some images, as long as you move your mouse over the image, the explanatory text will be displayed. Here I will teach you how to achieve this effect.

1. Create two new layers named layer1 and layer2 respectively, insert the target object (take the image as an example) in the layer1 layer, and type the text to be explained in the layer2 layer, the corresponding location can be determined as needed,
2. Set the display status of layer2 layer to "Hidden" in properties, that is, when the page is loaded, the layer content is not displayed, and then select the layer1 layer where the target object is located, click the behavior button in the quick start panel (or press the Shift + F3 shortcut) to enter the action panel, and select the "Show Hide Layers" option under "+, in the "show layers" window, set layer2 to show and change the mouse event in the action panel to onmouseover. Similarly, this layer is invisible to onmouseout ), the action panel is shown in the following figure:



Basic labels:
Layer: the selection list of all layers used in the webpage. The default is the current operation Layer.
Movement: Move option. Unconstrained (unrestricted) can be dragged anywhere on the webpage. constrained (restricted) controls the drag range of the target layer, and selects the Up automatically generated after the menu, in the Down, Left, Right input box, type a positioning number.
Drag Target: Drag the Position of the layer in the webpage and click Get Current Position to Get the Current Position.
Snap if within: maximum allowable error, in px.

Under the Advanced tab:
Drag Handle: specifies the response range of the Drag layer, that is, where the mouse can Drag the layer.
Entire Layer: indicates that you can drag any position.
Area Within Layer: specifies the drag range. After selection, type in the positioning input box. Note that this is relative to the layer.
While dragging: when multiple layers are dragged, the display relationship is determined.

3. After you press "OK", drag the layer to complete the process. The default event is onclick, and change it to onMouseOver. Click onMouseOver for a small triangle under Actions, in this case, you do not need to click to activate. You only need to slide to the layer and drag it. You only need to press F12 to preview the drag effect.

4. Hide invisible content using layers

When creating a webpage, sometimes some elements or content are not displayed when the webpage is loaded. They are displayed only when a specific button is clicked, in this case, applying layers to process should be the smartest choice.

1. Call the Objects (project) panel and insert two buttons. Note that None (None) must be selected for the Action of the two buttons; otherwise, no effect can be made. As shown in the following figure:



5. Create a drop-down menu

Using the drop-down menu in a webpage can greatly save the webpage space and make the content classification display more organized. Below I will briefly introduce the creation process of a typical drop-down menu.

1. First, create a main menu project, assign corresponding links to each other, place a layer object under each link, and then put the content of the corresponding drop-down menu in the hidden layer. A link corresponds to a layer. If there are three links in your webpage, you need to create three hidden layers. The layers are placed under the links, as shown in the following figure. Note: If there are multiple main menus, they must be neat; otherwise, the display effect in the future will be affected.

 

 

2. Because the sub-menu is completely hidden after the menu is loaded, the following three sub-menu layers are set as hidden layers, and the "drop-down" content is invisible, in this example, double-click the "Today's news" link and select it. Then, press F8 to bring out the Behaviors menu and click "+" on the behavior panel ", select Show-Hide Layers. In the subsequent window, set the Layer1 layer to Show (display), and the other two Layers to Hide (hidden ), in this way, only the corresponding sub-menu is displayed. In the behavior list, click the arrow of the four action events to change the default Onclick to Onmouseover. The action panel is shown in the figure below:

3. In the behavior list, click the arrow buttons of the three action events to change the default Onclick to Onmouseover. Everything is done! This is the creation of a drop-down menu, and the other three links are set in the same way. Of course, if you create a click-type drop-down menu, you do not need to change the onlclick event above. Note: when setting the Show-Hide Layers menu, in addition to setting the drop-down menu layer of the link to Show (display), other Layers must be set to Hide (Hide ). After the file is created, press F12 to view the display effect in the browser.
6. Achieve the slide effect

It is very easy to use Flash as a slide, and the effect is also very good, but it requires the support of plug-ins, while using Java, it affects the speed of web browsing. In fact, you can make it through Dreamweaver, and the effect is not very bad than that of using java. This example mainly uses the timeline and display implicit layer special effect.

1. First, prepare several images of the same size.

2. You need to make a few slides to create several hidden layers and insert your images into the layers. In this example, three slides are used to create three hidden layers. When creating hidden layers, the coordinates of the three layers must be the same. Otherwise, the image may be displaced.

3. Adjust the Timeline editing window and add the three layers to the three animation tracks respectively.

4. Add the Behaviors event at the position of the first frame, double-click the Behavior track at the top of the first frame, and the Behaviors editing window is displayed. Click "+" select "Show-hide Layers ", in the Show-hide Layers editing window, select "Layer1" and click "Show" OK.

5. Double-click the Behaviors track at 15 frames. The Beahoviors window is displayed, and the Show-hide layers event is added. This event hides layer1. When the animation takes 15 frames, you need to change the image. Therefore, you need to add a "show-hide layers" event at 15 frames. This time, layer2 is displayed. After adding two events at 15 frames, the Behaviors window is shown as follows:

6. Add two Behaviors events to the 29th frame. One is to hide layer2, and the other is to display layer3. This is to change the image. If you have more than three slides, you can add two Behaviors events after a frame.

7. Add the hidden layer 3 Behaviors event to the last frame.

8. Finally, select Autoplaly and Loop in the Timelines window. After the selection, drag the small square to overlap with the Behaviors of the last frame, so as to avoid the pause when there is no display of the frame during the repeated animation. The Behaviors event of the last frame is shown in the following figure:

 

7. Create a path to move the layer

A path movement layer is a layer object that moves in the webpage according to the specified path. Currently, most layers are used for webpage advertisements. The confirmation and adjustment of the path to move in Dreamweaver are completed by using the TimeLine (TimeLine.

1. Click the layer button in "Object", drag and insert "new layer" at the starting point of the path, and insert the content to be moved to the layer.

2. When the calibration layer is selected, click the TimeLine button in the quick start board. By default, TimeLine objects may not be found in the Dreamweaver4 boot board, in this case, you can call up the TimeLine editing Window through the menu "Window/TimeLine", right-click the first TimeLine (that is, the location of the red lens block), and select "Add Object" in the pop-up menu ", at this time, a moving length of 15 GB/s is automatically generated, the lens is moved to the position of 15 Gb/s, and the layer is dragged to the end position of the path to release, then a simple moving path is completed.


8. Create a static floating effect

When you browse a webpage, you have not noticed this situation: no matter how you adjust the browser window, an image is always in the relative position: that is, the position of the browser window remains unchanged, for example, the window is always in the upper right corner of the window. When the content of the window slides with the scroll bar, it automatically moves to the original position. Next I will teach you how to use Dreamweaver to achieve this effect.

1. Because Dreamweaver does not directly provide a tool for creating a static floating layer, these are implemented through the corresponding plug-ins. Therefore, you must first download the stav plug-in from the relevant website, decompress and copy the two files (including the image file Cross Browser Static Division.gif and the webpage File Cross Browser Static Division.htm) to the Dreamweaver installation directory Configuration \ Objects \ Common. Restart Dreamweaver. In the Object panel, you will see that the "SI" option is added at the bottom, select it in the pop-up window to set the floating layer to the top and left distance, and then insert the specified content in the layer to replace the default value. then a simple floating layer is complete.

2. To adjust the position of a layer in a webpage, select it first, and then change the values of L (left) and T (top) in the Properties panel. As shown in the following figure:


Dreamweaver layers are far more widely used than we think. Many effects that require programming can be easily achieved through layers. However, it is impossible to thoroughly understand the Dreamweaver layer by using just a few examples. This article is just a reference, and you have to look at yourself for practice. I hope you will be good at thinking during your learning and usage, I have learned some clever and unique application skills.

3. Because the moving path is a straight line between two points, you must establish a smooth curve path that meets the requirements. In TimeLine, changing the path shape is achieved by adding a key frame. Right-click the location where the keyframe needs to be added and select the "Add keyframe" option. Meanwhile, drag the layer object to the specified direction, the path is bent. If you want to create a more complex curve path, you can add multiple keyframes.

4. You can adjust the movement speed of the layer by changing the number of frames between two points. You only need to drag the TimeLine to represent the "hollow circle" of the cursor.

Note: the layer may block the content that visitors want to browse when moving. If you use the "drag layer" to create a layer, we believe it can achieve twice the result with half the effort.

 

3. Press F12 in the browser and you will see the text displayed when you move the mouse over the image. The text will automatically disappear after you move it away.

Note: You can drag the description layer 2 to adjust the description text.

 

3. Application of dragging layers

When you browse some web pages, you will often see some similar images or text. You can Drag and drop the mouse to change the position. This effect is generally achieved through the "Drag layer" (Drag layer) the implementation of the drag layer requires the response of the mouse event, such as onclick and onmouseover. The following uses inserting an image and dragging a layer as an example.

1. First create a layer and add the content you want to put, for example, insert an image.

2. Click the selected Layer and enter the action floating panel (press Shift + F3 directly). Select the "Drag Layer" item in the "+" number list, if this option is unavailable, you can adjust the browser type and version supported by the action event, such as IE5.0. The Drag Layer editing window is displayed.

The Drag Layer editing window consists of two tabs: Basic and Advanced. I will explain the meaning of each tag.

2. Prepare the content in the layer and set it as implicit. The content in the layer is determined by yourself. Here I assume that the feedback information is used to change the content in the layer according to your needs.

3. Click "show feedback", bring up the Behaviors menu, and add the Events (event) display layer. Do not change Actions (action, do not change it to "OnMouseOver". Otherwise, this button is useless. The settings are complete, as shown in the following figure:

4. Click "hide feedback" and add the Events hidden layer.