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

Lesson 15. 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.html document window, position the pointer over the textlayer layer's border and click the border line when the pointer turns into a hand (Macintosh) or four outward-facing arrows (Windows).


If no layers are selected, Shift-clicking inside a layer will select 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. 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, and square, black sizing handles appear around the layer. The textlayer layer appears above the other layers while it is selected. A dotted line (Macintosh) or a solid line (Windows) appears around the name of the selected layer in the Layers panel. The Property inspector changes to reflect 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 and press Delete (Macintosh) or Backspace (Windows).

Resize the textlayer layer by typing 300px for the width in the W text field of 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 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 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.


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 any arrow) for Macintosh or Shift+Ctrl+right-arrow key (or any arrow) for Windows. See the Grid and Ruler Settings exercise later in this lesson to learn how to set the grid increment.

As you have seen while inserting the text and images, layers will 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, 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 without providing scroll bars. 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.


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.

With the textlayer layer still selected, type 350px in the L text field and 50px in the T text field on the Property inspector. Select the landscape layer and type 25px in the L text field and 100px in the T text field.


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 animate layers in Lesson 16.

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 the lighthouse layer in the layers panel and drag the selection handle in the document window down on the page so the layer appears underneath the landscape layer. Select the Layer3 layer and drag in underneath the lighthouse layer.

You can use any of these methods to move layers atop each other. When layers are hidden by other layers that appear atop them, you will need to use the layers panel or the layer markers to select the layer you want to modify. You can also adjust the order in which layers are overlaid (their stacking order), as demonstrated in the next exercise.


If your document contains <LAYER> or <ILAYER> tags (Netscape 4.x layers only), those layers are indicated by a layer marker with an 'N' on the marker. If you select a <LAYER> or <ILAYER> layer in the document window, 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. As mentioned previously, these tags are now discontinued; they are not support by either Netscape or Explorer.

Your document will now look similar to the example shown here.

Select the textlayer layer. In the Property inspector, click the Bg Color box and select pale tan, or type #CCCC99 into the text field.

The background of the layer changes to pale tan.

There are two options for the backgrounds of layers. When using either option, test your pages in all browsers—the results may 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. The text may exceed the defined length of the layer, in which case the background may be either too big or too small. To avoid this, you can assign the same pale tan color to the background of the table. Another way to solve the problem is to use CSS to define an absolute size for the text. For this exercise, you may want to set the background of the table to #CCCC99 in order to avoid this problem.

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 no color (the empty color swatch with a red line through it) at the top of the color menu to specify transparency.

Select the landscape layer, and then press and hold down the Shift key while selecting the textlayer layer by clicking on the border of that layer.


You can also hold down the Shift key and click the layer name in the Layers panel to select multiple layers. 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 > Top.

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 the textlayer and landscape layers 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