| After you create a layer, you might want to add a background to it, move it around, or resize it. One of the advantages of using layers is that you can place them in precise locations on the page. You can use the Property inspector and type in values for placement, and you can align layers to other layers. You need to select a layer first before you can make any modifications to it. There are several methods for selecting a layerthe method you use depends on the complexity of your layout. | | 1. | In the layers.html Document window, position the pointer over the border of the textlayer layer and click the border line when the pointer turns into a hand (Macintosh) or a crosshair with arrows (Windows), and the border turns red.
Note If no layers are selected, Shift-clicking inside a layer selects it, whereas simply clicking inside a layer places the insertion point in the layer and activates it, but does not actually select the layer itself. You can select multiple layers by Shift+clicking other layers. Additional ways to select a single layer are to click the yellow layer marker that represents the layer's marker in the Document window, the layer's tag in the tag selector, or the name of the layer in the Layers panel. The layer becomes selected, and square black sizing handles appear around the layer. The name of the selected layer in the Layers panel is highlighted.
The Property inspector changes to reflect options for the selected layer. To see all properties, click the expander arrow in the lower-right corner of the Property inspector.
Tip To delete a layer, select it and press Delete (Macintosh) or Backspace (Windows). | | | 2. | Resize the textlayer layer by typing 320px for the width in the W text field on the Property inspector and pressing Return (Macintosh) or Enter (Windows).
In the Property inspector, the W and H text fields display the specified width and height of the layer. Resizing a layer changes these values. The default unit of measurement is px (pixels).
Note You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent's value). The abbreviations must immediately follow the value, with no space between (for example, 3mm). Pixels or percentage are the recommended units.  You can also resize the layer by dragging any of the sizing handles.
Note To resize the layer one pixel at a time using the keyboard, select the layer and press Option+right-arrow key (or any arrow) for Macintosh or Ctrl+right-arrow key (or any arrow) for Windows. To resize the layer by the current grid increment, press Shift+Option+right-arrow key (or the arrow for the direction that you want the layer to expand in) for Macintosh or Shift+Ctrl+right-arrow key (or the arrow for the direction that you want the layer to expand in) for Windows. See the Grid and Ruler Settings exercise later in this lesson to learn how to set the grid increment. As you learned while inserting the text and images earlier in this lesson, layers expand to fit their content. When the content of the layer exceeds the specified size, the original values for width and height will be overridden. The Overflow setting on the Property inspector controls how layers behave when this occurs. There are four Overflow options: Visible, Hidden, Scroll, and Auto.
Visible, the default option, increases the size of the layer, expanding the layer down and to the right as much as is needed for all the layer's contents to be visible. Hidden maintains the size of the layer and clips any content that doesn't fit without providing scroll bars. Scroll adds scroll bars to the layer, whether or not the contents exceed the layer's size. Auto makes scroll bars appear only when the contents of the layer exceed its boundaries.
You might need to click the expander arrow on the Property inspector to make these options visible.
Note You can also set the clipping area to specify the part of the layer that is visible. The clipping area can be smaller, larger, or the same size as the layer. Use the Property inspector to define the visible area by typing values in all four Clip text fields: L (left), T (top), R (right), and B (bottom). Any content outside of the clipping area is hidden. This setting is available with all four Overflow options. | | | 3. | With the textlayer layer still selected, type 375px in the L text field and 50px in the T text field on the Property inspector. Select the om layer and type 125px in the L text field and 100px in the T text field.
Be sure to select the om layernot the image it containsbefore trying to modifying the left (L text field) and top (T text field) distance properties for the om layer in the Property inspector.
Note The layer position can be off the page if the values in L and T are set to negative numbers. You might do this if you want to animate the layer and want it initially placed off the page. You will learn to animate layers later in this lesson.  Be sure to use the L and T text fields on the top half of the Property inspector. Do not use the Clip text fields for this step. The L text field on the top half of the Property inspector defines the space between the layer and the left side of the browser window. The T text field on the top half of the Property inspector defines the space between the layer and the top side of the browser window.
Note You can also drag the selection handle or border of the selected layer to move it to a different location on the page. To move a layer from the keyboard one pixel at a time, select the layer and use the arrow keys. Hold the Shift key and press an arrow key to move the layer by the current grid increment. | 4. | Select the class layer in the Layers panel and drag the layer selection handle in the Document window down on the page so the layer appears farther down the page, below the om layer. Select the Layer3 layer and drag it farther down the page, below the class layer.
Dragging the layer selection handle will help you to be sure you are dragging the actual layer, not just the contents of the layer.
Note When dragging Layer3, pausing the layer over top of the bottom edge of the Document window causes the document to scroll upward, giving you the space you need for the layer at the bottom of the window. When layers are hiding other layers that appear below them, you need to use the Layers panel or the layer markers to select a hidden layer that you want to modify. You can also adjust the order in which layers are overlaid (their stacking order), as demonstrated in the next exercise.
Your document now looks similar to the example shown here.
 | | | 5. | Select the textlayer layer. In the Property inspector, click the Bg color box, and select pale tan or type #CCCC99 into the text field.
Tip Be sure to select the layer, not the table that contains the text.  The background of the layer changes to pale tan.
There are two options for the backgrounds of layers:
- Bg image: Specifies a background image for the layer. Type the path for the image in the text field or click the folder icon to select a source image. The background of a layer might not display in all browsers.
- Bg color: Specifies a background color for the layer. Leave the text field blank or choose the default no color (the empty color swatch with a red line through it) at the top of the color menu to specify transparency.
When using either option, test your pages in all browsersthe results might not be what you expect, depending on the content of the layer. In this case, you have text in the layer. When viewed in the browser, the size of the text can vary greatly depending upon the visitor's browser and system, particularly if the text size is relative. The text might exceed the defined length of the layer, in which case the background might be either too big or too small. To avoid this, you can assign the pale tan color to the background of the table instead. Another way to solve the problem is to use CSS to define an absolute size for the text and then set the size of the layer accordingly.
| | | 6. | Select the om layer; then press and hold down the Shift key while selecting the textlayer layer by clicking the border of that layer.
Tip You can also hold down the Shift key and click the layer name in the Layers panel to select multiple layers. Because multiple layers are selected, the most recently selected layer appears with solid handlesthe other layer has outlined handles.
 Note To resize multiple layers at once, select two or more layers in the document and choose Modify > Align > Make Same Width or Make Same Height. The first selected layers change to the width or height of the last selected layer. You can also enter width and height values in the Property inspector to apply the values to all selected layers. | 7. | Choose Modify > Arrange > Align Top.
When you choose an alignment option, all the selected layers are aligned to the position of the last layer selected. The alignment options in this menu also include Left, Right, and Bottom.
The tops of the textlayer and om layers are now aligned to each other.
| 8. | Save the document.
|
Leave this file open for the next exercise. |
