• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 10. Creating Layers > Modifying Layers

Modifying Layers

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 numbers 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 layer. Which method you use may depend on the complexity of your layout.

In the layers.htm document window, position the pointer over the text layer's border and click the border line when the pointer turns into a hand (Macintosh) or a cross hair with arrows (Windows).


If no layers are active, Shift-clicking inside a layer will select it. Simply clicking inside a layer places the insertion point in the layer and activates it, but does not actually select the layer itself. Other ways to select a single layer are to click the yellow layer marker that represents the layer's location in the HTML code (invisible elements must be showing) or to click the name of the layer in the Layers panel.

The layer becomes selected; square, black sizing handles appear around the layer. The name of the selected layer is highlighted in the Layers panel. The property inspector changes to indicate the properties of the selected layer. To see all properties, click the expander arrow in the lower-right corner of the property inspector.


To delete a layer, select it in the document window and press Backspace (Windows) or Delete (Macintosh).

Resize the text layer by typing 182 for the width in the W text field of the property inspector and pressing Enter (Windows) or Return (Macintosh).

In the property inspector, the W and H text fields display the specified width and height of the layer. Resizing a layer will change these values. The default unit of measurement is px (pixels).


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 follow the value without a space (for example, 3mm). Pixels or percentage are the recommended units.

You can also resize the layer by dragging any of the sizing handles.


To resize the layer one pixel at a time using the keyboard, select the layer and press Ctrl+right-arrow (or down-arrow) key for Windows or Option+right-arrow (or down-arrow) key for Macintosh. To resize the layer by the current grid increment, press Shift+Ctrl+right-arrow key (or down-arrow) for Windows or Shift+Option+right-arrow (or down-arrow) key for Macintosh. See the Grid and Ruler Settings exercise later in this lesson to learn how to set the grid increment.

By default, layers will expand to fit their content: When the content of the layer exceeds the specified size, the 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, will increase the size of the layer, expanding it down and to the right as much as is needed for all of its contents to be visible. Hidden maintains the size of the layer and clips any content that doesn't fit. Scroll will add scroll bars to the layer whether or not the contents exceed the layer's size. Auto will make scroll bars appear only when the contents of the layer exceed its boundaries. You may need to click the expander arrow on the property inspector to make these options visible. Overflow is not supported by all browsers, so use these options with caution.


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 will be hidden. This setting is available with all four Overflow options, but is not supported by all browsers.

With the text layer still selected, type 345 in the L text field and 37 in the T text field on the property inspector. Select the picture layer and type 22 in the L text field.


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.


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.

Select Layer3 and drag the selection handle down on the page so the layer appears below the first two layers. Paste the remaining text from dive.txt into this layer.

You can use any of these methods to move layers atop each other. If you overlap layers, you will need to adjust the order in which they are overlaid (their stacking order), as demonstrated in the next exercise.


If <LAYER> or <ILAYER> (Netscape 4.x layers only) are selected in the Tag drop-down menu, the property inspector will display radio buttons for you to choose from Top, Left or PageX, PageY. These two options allow you to position a layer in relation to its parent. Top, Left places the layer in relation to the top left corner of its parent (the outer layer if it is a nested layer, or the document window if it is not nested). PageX, PageY places the layer in the absolute location relative to the top-left corner of the page, whether or not it is a nested layer.

Select the text layer. In the property inspector, click the Bg Color box and select the lightest gray, or type #CCCCCC into the text field beside the color box.

The background of the layer changes to light gray.

There are two options for the backgrounds of layers. When using either option, test your pages in all browsers since the results may not be what you expect, depending on the content of the layer.

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 blank to specify transparency.


If <LAYER> or <ILAYER> (Netscape 4.x layers only) are selected in the Tag drop-down menu, the property inspector will include the Src option. Src will display another HTML document within the layer. Type the path of the document or click the folder icon to browse to and select the document. Note that Dreamweaver does not display this property in the document window.

Select the picture layer first, and then select the text layer by holding down Shift and clicking inside or on the border of the layer, or hold down Shift and click the picturelayer name in the Layers panel.

If the Layers panel is not visible, you can choose Window > Layers to display the Layers panel.

Since multiple layers are selected, the most recently selected layer appears with black handles—the other layer has outlined handles.


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.

Choose Modify > Align and choose Top from the alignment options.

When you choose an alignment option, all the selected layers are aligned to the last layer selected. The alignment options in this menu also include Left, Right, and Bottom.

The tops of textlayer and picturelayer are now aligned to each other.

Save the document.

Leave this file open for the next exercise.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint