Section 8.8. Nesting Layers

8.8. Nesting Layers

Nesting doesn't necessarily mean that one layer appears inside another layer; rather, it means that the HTML for one layer is written inside the code for another layer. The nested layer itself can appear anywhere on the page (see Figure 8-11). The main benefit of nested layers is that the parent layerthe layer containing the HTML of one or more other layerscan control the behavior of its child layers .

For example, suppose you create one layer and nest two layers inside it. If you move the parent layer on the screen, the two child layers follow it, which gives you an easy way to move several layers in unison . Furthermore, the parent layer can control the visibility of its children. When you hide the parent layer (see Section 8.3.1.3), the nested layers also disappear (unless you've specifically set the nested layers' visibility property to visible ).

---

Tip: Dreamweaver 8's factory settings hide a useful visual cueLayer markers (see Figure 8-7). These identify where in the code the HTML for the layer appears. Since a nested layer is a layer whose code appears inside the parent layer's codefor example, inside the <div> taga Layer marker appears inside the parent layer for each nested layer. To turn on the Layer marker feature, press Ctrl+U ( -U) to open the Preferences window; click the Invisible Elements category, and then turn on the Anchor Points for Layers checkbox. You also need to make sure visual aids are turned on (as explained in Figure 8-8).

---

Figure 8-11. An inner nested layer doesn't necessarily appear inside the outer layer. The HTML for the layer at far right, for example, is nested inside the large gray box layer. And a layer that appears on top of another layer isn't necessarily a nested layer, either; the white box here isn't nested at all. But the HTML for a nested layer does appear within the code for the outer layer. To identify a nested layer, click a Layer marker (the shield) within a layer; the nested layer's selection handle appears.

Here's how to create a nested layer:

• While pressing the Ctrl ( ) key, drag one layer in the Layers panel (see Figure 8-9) onto another layer. The dragged layer becomes the child of the layer you drop it on, and its name appears indented in the Layers panel, also shown in Figure 8-9.

  To un-nest a layer, drag it above or below the parent layer in the Layers panel. (Doing so places the code for the nested layer directly before the opening <div> tag of the parent layer.)

  ---

  Tip: You can also un-nest a layer, and gain more control over where the HTML for that layer is written in the document, by dragging the Layer marker to a new spot in the document window. (This Layer marker isn't always immediately visible, however; see the Tip on Section 8.4.)

  ---

• Use the Insert Div Tag button on either the Common or Layout tab of the Insert bar, or choose Insert Layout Objects Div Tag. In either case, the Insert Div Tag window appears (Figure 8-12). Select the name of the layer you wish to nest inside another layer; choose either "After start of tag or "Before end of tag" from the first Insert menu; then choose the name of the parent layer from the second menu.

• Click inside a layer, and then choose Insert Layout Objects Layer. You get a new, nested layer inside it. This technique and the next one, however, create a new layer in an internal style sheetthe same as when drawing a layer. This isnt usually the best option, as described on Section 8.6.

• Drag the Layer tool from the Layout tab of the Insert bar and drop it inside a layer on the page. (Note that this isn't the same procedure described on Section 8.6, in which you click the Layer button and then drag in the document window.)

Figure 8-12. The Insert Div Tag tool makes creating a nested layer easy. Just make sure to select either the "After start of tag" or "Before end of tag" option (top), followed by the name of the parent layer in the ID box (bottom).