to correspond with their content, simply click, hold, and drag the resize handle located in the bottom-right of each layer to resize the layer respective to the size of the content within it. Finally, move the layer that contains the headshot photograph and place it just underneath the text layer. The result looks like Figure 11.5. Figure 11.5. Resize the layer so that it matches the size of the content within it and drag the headshot layer so that it sits just underneath the text layer. [View full size image]   You'll begin to notice the flexibility that layers expose: Adding them to the page is easy, moving them is easy, and resizing them respective to the content within them is easy. In the next few sections, we'll discuss the various properties you can set using the Properties Inspector and the Layers panel. Modifying Layer Properties with the Properties Inspector Like every feature in Dreamweaver, layers expose properties you can customize using the Properties Inspector. If you haven't noticed, the layers-based Properties Inspector becomes available when you select a layer. As you can see in Figure 11.6, the Properties Inspector exposes properties that uniquely identify the layer, that set the dimensions of the layer, set the stacking order or z-index of the layer, and so on. Also notice that moving your cursor just over the layer displays properties already set for the layer within a yellow ToolTip. Figure 11.6. The layers-based Properties Inspector exposes numerous customizable properties. Moving your cursor over the layer exposes the properties already set for the layer within a ToolTip. [View full size image]   A complete list of customizable properties exposed by the layers-based Properties Inspector is given here: Layer ID: Add a value in this text box to uniquely identify the selected layer. By default, Dreamweaver adds the value Layer1, Layer2, and so on as you add layers to the page. Of course, the default names mean little to us, so we'll change them. To demonstrate this, select each of the two layers and name them AdaImage and AdaText respectively. Also note that you can use only standard alphanumeric characters when naming a layer. Spaces, hyphens, slashes, and periods are not allowed. L and T: Enter values into these text boxes to set the position of the layer from the Top and Left side of the browser. The Left and Top values are measured from the top-left point of the layer. If you're working with nested layers, the Left and Top values are measured from top and leftmost corner of the parent layer. W and H: Enter values in these text boxes to set the width and height of the layer. If the content in the layer exceeds the width or height of the layer, Dreamweaver automatically stretches the layer to accommodate the content within it. As you'll see, you can change the Overflow property to set how the browser handles the excess content in the browser. Z-Index: Enter a value in this text box to set the stacking order of the layer. The lower the number, the lower the layer appears in the stacking order. The higher the number, the higher the layer appears in the stacking order. To demonstrate this property, select the AdaImage layer and change the Z-Index to 2. Now select the AdaText layer and change that Z-Index to 1. Position the AdaImage layer over the AdaText layer. As you can see from Figure 11.7, the AdaImage layer partially hides the AdaText layer. Of course, you know this is