Macromedia Dreamweaver 8: Training from the Source

2017-07-07 02:10:07

Nesting is a way to group layers together. A nested layer moves with its parent layer and inherits the parent's visibility. There might be times when you want to nest or unnest a layer, and this exercise demonstrates that process. Be cautious; the results might be unreliable because nested layers might not display correctly in all browsers. If you do choose to nest layers, test your pages with your target browsers to be sure the result is what you expect. (Testing is covered in Lesson 15.)

Note

The top (T) and left (L) values in the Property inspector for a nested layer are relative to the parent layer, not the top-left corner of the page. T and L specify the location of the layer from the top-left corner of the page or parent layer.


1.	In the layers.html document, use the Layers panel to select the Layer3 layer and drag the layer name (not the layer itself) over the textlayer layer while pressing Cmd (Macintosh) or Ctrl (Windows). Release Layer3 when it is over top of the textlayer. In Windows, a solid outline will appear around the textlayer name as you drag Layer3 over it. There is no visual indication on the Macintosh. Tip Don't release when the area between the layers is highlighted by the display of the thin black linedoing so changes the stacking order of the layers instead of nesting the layers. In the Layers panel, the Layer3 layer now appears indented below its parent layer: textlayer. Next to the textlayer layer is a downward-pointing triangle (Macintosh) or a minus sign () button (Windows) that allows you to see the nested layer. You can collapse this view by clicking the triangle (Macintosh) or minus sign (Windows) to display only the parent layer with a triangle pointing to the right (Macintosh) or a plus sign (+) button (Windows). You can click the plus sign or triangle again to show the list of nested layers. The position of the Layer3 layer in the Document window shifts to be in the lower right of the textlayer layer because the left value of the Layer3 layer is now relative to its parent layer: textlayer. In the Document window, the layer icon representing the nested Layer3 layer appears at the top of the textlayer layer, just above the table. The space created by this icon is seen in Dreamweaver only if you have visual aids enabled. The icon is not seen in (nor does it take up space in) the browser window. If you preview the layers.html file in several different browsers, you might notice differences that occur in the display of layers. The display might vary depending on the system visitors' operating systems and browsers, so always make a practice of checking your work in multiple browsers. Note You can also create a layer within an existing layer by selecting Draw Layer on the Insert bar and drawing the layer within an existing layer. For this to work, the Nest When Created Within A Layer box must be selected in Preferences. To change the Layer Preferences, choose Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows) and select the Layers category.

2.	On the Layers panel, select the nested Layer3 layer and drag it above the textlayer layer so a thin black line shows just above the textlayer layer. The nesting of a layer is removed, and the layer no longer appears indented in the Layers panel. The Layer3 layer is now moved back to its original location in the Document window and appears above the textlayer in the Layers panel.
3.	Save the layers.html document.

Leave this file open for the next exercise.

Категории