| Layers are a pretty versatile way to create web page content because you can position layers any way you want on the page, even overlap them. Layers, however, are supported only by version 4 and later browsers and can result in some messy-looking web pages if you don't use CSS text formatting to keep the content of the layers consistent between browsers and platforms. Layers can be made visible and invisible using the Show/Hide Layers mouse action in GoLive and can be animated using the DHTML Timeline Editor in GoLive. Adding Layers to the Page When you add a layer to a page, GoLive inserts a small yellow marker at the insertion point where the layer is added. Because layers are essentially floating boxes, the yellow marker can appear in one place while the actual layer is someplace else. The yellow marker always shows where the source code for the layer is in relation to the rest of the document, as shown in Figure 35.27. Figure 35.27. The source code for the layer is located where the yellow markers are. 
To add a layer to a page: 1. | Drag the Layer object from the Basic Objects palette onto the page to add a layer. If you point to a specific point in the text and the insertion icon appears, the yellow marker appears in this location as does the corresponding DIV source code. You can alternatively position your cursor in the text and then click the New Layer button in the Layers palette, as shown in Figure 35.28.
Figure 35.28. Add a new layer by dragging the object or clicking the New Layer button. 
| 2. | Assign a name to your layer in the Layer Inspector or in the Layers palette.
Layer names cannot contain spaces and cannot begin with a number.
| 3. | You can set the background color or background image of a layer in the Layer Inspector. Select BgImage and then select a file to insert a background image. Select Color, click the color field, and then select a color to set the background color of the layer.
Netscape browsers do not display a background color or image in a layer that is empty. If you want to do this, insert a transparent GIF file into the layer to fool Netscape into displaying the background color and image.
| 4. | Add content to your layer the same way you add content to a web page. Avoid, however, using tables and layout grids inside layers.
|
Selecting, Positioning, and Resizing Layers To select a layer you can either click the layer name in the Layers palette or position your cursor over the top edge of the layer until the hand icon appears and then click. After the layer is selected you can position it by clicking and dragging the top edge of the layer. To resize the layer, select it and drag the handles that appear. You can also precisely position the layer using the Layer Inspector. With the layer selected, use the Layer Inspector to set the following options: Enter the x and y coordinates of the layer from the top-left corner of the web page by entering pixel values in the Left and Top field of the Layer Inspector, as shown in Figure 35.29. Figure 35.29. Enter the coordinates of your layer. 
Enter the dimensions of your layer in pixels using the Width and Height fields in the Layout Inspector. Select Auto from the Width or Height menus to make the layer fit its content automatically. Choose Percent from the Width and Height menus to size the selected layer automatically in relation to the percentage of the window width or height.
To turn on the grid lines for positioning the layer, choose Layer Grid Settings from the Layers palette menu and then define the page grid values. Choose Prevent Overlapping to prevent the layers from overlapping, especially if you intend to convert the layers to a table later.
Setting the Layer Order The stacking order of layers is controlled by a value called the Z-index. The Z-index is simply a number that determines which layers are under or over other layers. The lower the number, the further down in the stacking order the layer. The highest number will be on top and the lowest on the bottom. Use the Layer Inspector to set a layer's Z-index, as shown in Figure 35.30. Figure 35.30. Set the stacking order of your layers using the Z-index value in the Layer Inspector. 
Managing Layers with the Layers Palette Use the Layers palette to manage the layers in your document, as shown in Figure 35.31. You can lock, hide, or show layers while you work. Use the Layers palette to assign names to your layers, and adjust the Z-index of your layers by dragging within the Layers palette. Use the Set Stacking Order button in the upper-right corner of the Layers palette to change the layering to either lowest to highest or vice-versa based on the Z-index number. Figure 35.31. The Layers palette. 
Use these options in the Layers palette to manage the layers in your document: - Click on the eye icon inside the first column to hide or show layers temporarily.
You can have more than one layer with the same Z-index number. In this case layers are layered based on which was created first, then second, then third, etc. Because the Z-index value comes into play only when layers are overlapped, you don't have to worry about the numbers when none of your layers overlap.
- Click in the padlock column to lock or unlock a layer temporarily.
- You can click the name of a layer, even if it's hidden or locked, to bring it to the foreground.
- Click the icon at the top of the Z-index column to change the stacking order to either ascending or descending order.
To hide all layers or show all layers, hold down the Ctrl key (in Windows) or the  key (on the Mac) and then click an eye icon in the Layers palette. This same technique works on the lock icons as well: Ctrl-click or -click on a lock icon to lock all layers or unlock all layers.
- To change the name of a layer, click once on the name to highlight the layer and then click again to select the name and type to edit it.
- To change the Z-index value, click once to select the Z-index number and then click again and type to edit the number.
Nesting Layers Layers can be nested inside other layers to create a parent-child relationship. Nesting layers together can help keep groups of items together and facilitate minilayouts that can be moved and formatted together or even animated using the DHTML timeline. Existing layers can be easily nested using the Layers palette, and you can nest layers when you first create them by dragging a new layer onto an existing layer. To view nested layers in the Layers palette, the Hierarchic option must be selected in the Layers palette menu, as shown in Figure 35.32: 1. | Create a layer by dragging the Layer object from the Basic Objects palette onto the page, or double-click the Layer object in the Basic Objects palette.
| 2. | Use the Layer Inspector to specify the settings for the new layer and assign a name to your layer using the Layers palette.
| 3. | Drag a new layer onto your page, this time positioning the new layer over an existing layer until the edge of the existing layer is highlighted. Release the new layer to nest the new layer inside the highlighted layer. Remember, the nesting won't be visible in the Layers palette unless you select Hierarchic from the palette menu.
| 4. | When the hierarchic option is selected for the Layers palette, you can nest and un-nest layers by dragging them inside the Layers palette, as shown in Figure 35.33. Nested layers appear indented under their parent layer in the Layers palette.
Figure 35.33. Nested layers in the Layers palette. 
|
Figure 35.32. The options in the Layers palette menu. 
Using the Show/Hide Layer Action One of the really neat things you can do with DHTML layers is to show and hide them on your web pages using a text, object, or graphic trigger. For example, you can create a list and set a trigger action for each item in to the list to show and hide layers, making things pop on and off the screen as you move your mouse over the items in the list. This is also an effective way to create pop-up menus as a navigation aid on your site: 1. | Start by creating some layers and adding content to them. If you want all your layers to appear in the same place on the page, stack them on top of each other. Be sure to name the layers to make them easier to select later. Uncheck the Visible check box in the Layer Inspector to make a layer initially invisible when the web page loads.
Hiding layers by clicking the eye icons in the Layers palette only hides the layers temporarily. When you view the page in a browser, the layers are visible unless you uncheck the Visible check box in the Layer Inspector.
| 2. | Select the text, image, or object that you want to have act as the trigger for hiding and showing a layer. Click the New Link button in the toolbar or in the Link tab of the Inspector to create a link. Type the number symbol (#) in the Link field of the Inspector palette, as shown in Figure 35.34 to create a null link. A null link doesn't go anywhere, it just makes the text, image, or object act like a link. If you want the trigger to also link to someplace, you can enter the URL for the link here instead of the null link. There must be one or the other in the link field to enable assigning an action.
Figure 35.34. Create a link for the trigger text, graphic, or object. 
| 3. | Choose Window, Actions to display the Actions palette, as shown in Figure 35.35.
Figure 35.35. The Actions palette. 
| 4. | In the Actions palette, select the mouse event called Mouse Enter and then click the Create New Action button.
| 5. | From the Action pop-up menu in the Actions palette, select ShowHide from the Multimedia submenu, as shown in Figure 35.36.
Figure 35.36. Choose the ShowHide action. 
| 6. | From the Layer menu in the Actions palette, select a layer from the list.
| 7. | From the Mode menu, select the action you want to take place when you put your mouse pointer over the trigger. Select Show or Hide to show or hide the selected layer, or select Toggle to show and hide the layer based on its current status.
| 8. | Save and preview your page in a web browser. You can also preview this action in the Preview tab of GoLive.
|
|
