| |
Using Layers, Behavior and Dynamic Effects
Layers tool gives you greater flexibility in positioning elements on the page. Unlike tables, layers let you stack objects, overlapping them as needed without sacrificing the ability to position elements with precision. You can also control the visibility of layers, as well as their appearance, using cascading style sheets. Dreamweaver’s layers are constructed using CSS positioning and the <div> elements. You can use layers to construct animations, pop-up message, navigation menus, and image-swapping, and you can overlap layers to produce visual effects using text.
Building Up Layers
- On the Insert bar, make sure the Layout category is selected as shown in Figure-5.1.
Figure-5.1
- Select the Draw Layer icon as shown in Figure-5.1.
- Click and drag the mouse to draw a layer on the page. The layer acts as the container for an element you add to the page, such as text, a button, a graphic or a Flash movie file.
- If necessary, you can reposition the layer by dragging it with the mouse, or by entering values into the L (Left) and T (Top) fields of the Property Inspector as shown in Figure-5.2.
Figure-5.2
- You can resize the layer in the same way you reposition it: either click and drag one of the selection handles at the edge of the layer, or enter specific values into the W (Width) and H (Height) fields.
- Notice a small rectangular icon at the top left of the selection in design view. This marks the position of actual <div> element in the code as shown in Figure-5.3, denoted by A.
Figure-5.3
- If you are working with many layers, things can get a little confusing. Design panel allows you to select a layer. The eye icon allows you to turn the visibility of the layer on and off as shown in Figure-5.4. The Z column allows you to decide the stacking order of layers.
Figure-5.4
- In the property inspector, change its name from Layer2 to Flower as shown in Figure-5.5. We have used naming conventions for JavaScript behavior to these layers.
Figure-5.5
- In the property inspector Overflow specifies how the layer should appear when the contents exceed the size of the layer. You can choose whether or not the extra contents should be hidden or visible, or whether or not to include scroll bars.
Figure-5.6
- Enter a name for the layer into the Layer ID field. Naming layers helps you manage them later, using the Layers panel.
Controlling Layer Visibility
- Draw a new layer. Set the border of the Layer and use the Property inspector to set the L, T, W, and H and layer ID properties. Place this layer into a navigation bar.
- Return to Design view.
- Go to the layers panel. You will see something like this Figure-5.7.
Figure-5.7
- In design view, click once on the layer so that the tag hierarchy <body> <div#rose> appears in the Tag selector. Then go to Behaviors panel, click plus (+), and select Show-Hide Layers to open the Show-Hide Layers box as shown in Figure-5.8.
Figure-5.8
- As you can see, it shows Rose layer. With the Rose layer selected, click the hide button. It will come something like Figure-5.9.
Figure-5.9
- Click Ok. Go to the Behaviors panel to see that behavior is capable of hiding and revealing layer. You can apply single behavior on multiple layers.
- Save your file and preview it in the Browser.
Attaching a Layer to Hyperlink
- Start by drawing the layer on the page. As you did before, select the Draw layer option on the layout tools button.
- Click the border of the layer to select it and set its property inspector.
- Click inside the layer and type some text.
- Create a CSS style and attach it to your layer. Open the CSS styles panel and click the New CSS Style button, the one with the plus (+) at the bottom of the panel. Set the type to class, Set Name to Link, and define in as This Document Only as shown in figure5_10.
Figure-5.10
- When you click Ok, You need to specify the styles for the layer. In the type category set the Font, Size, Color etc as shown in Figure-5.11.
Figure-5.11
- In the Background category, set the background image to image and set the repeat field to No-Repeat and make the Horizontal and vertical position center.
- In the Block category, set text Align to center.
- Use the positioning category and set the width field to 260 pixel and height field to 60 pixels. Set the top field to 285 pixels and left to 205 pixels as shown in Figure-5.12.
Figure-5.12
- Click ok .You will find out the new Link as appeared in the CSS panel. Now apply the new style to the layer. When you open the style drop down list, you will find the style you just created as shown in Figure-5.13.
Figure-5.13
- Select Link and after saving your work preview it in a web browser.
- Attach the behavior that makes your layer appear and disappear. In the behavior panel select Show button and click Ok.
- Use the onMouseOver event to the Behavior you have just added as shown in Figure-5.14.
Figure-5.14
- Save the page and preview it in the browser. The Layer is not visible yet and that it appears when you place the cursor over the link.
- The layer remains visible now when you move the mouse off the link. Now add hide behavior to layer again when mouse rolls off the button.
- Save your work and preview it .This time layer appear and disappear.
|
