Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

8.7 Modifying Layer Properties

Once you've added a layer, you don't need to go back to the CSS Style Definition
window to edit most of the layer's positioning properties. Using the Property inspector,
you can rename it, resize it, move it, align it with other layers, and set many
other properties.

But first, you must select the layer using one of these methods:

Click the layer's name in the Layers panel (see the Section 8.6).

Click the layer's selection handle (see Figure 8-7).

Click the layer's border. The border turns red when you've moved your mouse into
the proper position.

Click the Layer marker that indicates the HTML code for the layer (see Figure 8-7).

FREQUENTLY ASKED QUESTION The Case of the Collapsing Layers When I preview a page containing layers with Netscape 4, the layers collapse and change size when I resize the browser window. How do I prevent this? Ahh, Netscape 4: the bane of Web designers. Due to a bug in that program, resizing the browser window can cause layers to change size and even disappear from the screen. To conquer this problem, Dreamweaver supplies a command that forces Netscape 4 browsers to reload the page whenever the window is resized, redrawing the layers correctly in the process. To add this command to your page (which is only necessary if it contains layers), choose CommandsAdd/Remove Netscape Resize Fix. This inserts a small JavaScript program in the page, supplying the resize fix. (You can use the same command to remove this JavaScript from your page if you've removed layers entirely. Why weigh down your Web page with JavaScript that it doesn't need?) You can also make Dreamweaver insert this aptly named command automatically whenever you draw a layer. Choose Edit Preferences (Dreamweaver Preferences on the Mac) to open the Preferences window. Click the Layers category and turn on the Add Resize Fix box. But remember: You need to do this only if you want to support Netscape 4 browsersfortunately, an uncommon situation.

And if that isn't enough ways to select a layerMacromedia's programmers never
sleepyou can also Shift-click a layer. This technique also lets you select multiple
layers, so that you can set the properties of (or align) many layers at once. If you're
working in a layer or have a layer selected, Shift-clicking another layer selects them
both. You can continue to Shift-click to select additional layers. (Shift-click a second
time to deselect a selected layer.)

8.7.1 Resizing Layers

When you select a layer, eight handles appear around the edges of the layer (see Figure
8-4). You can drag any of these handles to change the layer's dimensions. The corner
handles resize both the width and height simultaneously.

You can also use the keyboard to resize a layer. First select the layer, and then do one
of the following:

Press the Ctrl () key and press the arrow keys to change the layer's size by one
pixel. The up and down arrow keys adjust the layer's height; the left and right arrows
affect its width.

To change the size ten pixels at a time, press Shift+Ctrl (Shift-) and press the
arrow keys.

For better precision, use the Property inspector to set an exact width and height for
the layer (see Figure 8-9). Type a value in the W and H boxes to change the width
and height of the layer, respectively. You can specify any unit of measurement that
Cascading Style Sheets understands: px (pixels), pc (picas), pt (points), in (inches),
mm (millimeters), cm (centimeters), em (height of the current font), ex (height of
current font's x character), or % (percentage). To do so, type a number immediately
followed by the abbreviation for the unit. For example, type 2in into the W box to
make the layer 2 inches wide.

Another benefit of using the Property inspector is that Dreamweaver lets you resize
multiple layers at once. Shift-click two or more layers to select them, and then type new
widths and heights. Dreamweaver sets all selected layers to these same dimensions.

Figure 8-8), you can't drag any of a layer's resize handles
over another layer. In other words, you can't resize layers so as to overlap other layers when dragging.

But if you use the Property inspector to change the dimensions of a layer, Dreamweaver always allows
overlaps. Since the Prevent Overlaps feature is meant to be used with the not-very-useful Convert Layers to
Tables command, you can safely leave this box unchecked.

8.7.2 Moving Layers

Moving a layer is just as simple as resizing. Drag any border or the layer's selection
handle (shown in Figure 8-7). (Avoid the eight resize handles, which change the size
of the layer when dragged.)

For less speed but greater precision, you can move a layer using the keyboard. First
select the layer and then do one of the following:

To move a layer one pixel at a time, press the corresponding keyboard arrow key.

Press Shift while using an arrow key to move a layer ten pixels at a time.

NOTE

Dreamweaver assumes that all layers are positioned based on the top and left edge of a page. If,
however, you've used the Right or Bottom positioning properties (see Section 8.3.1) for your layers, don't move
a layer using these methods. Dreamweaver won't update those properties, and will instead insert additional
Top and Left settings, which can cause your page to display erratically. You'll need to edit the CSS style directly
using one of the techniques discussed in Section 6.4.

As you'd guess, you can also control a layer's placement using the Property inspector
(see Figure 8-9). Dreamweaver measures a layer's position relative to the left and top
edges of the page (or, for nested layers, from the left and top edges of the parent layer).
The Property inspector provides two boxes for these values: L specifies the distance
from the left edge of the page to the left edge of the selected layer; T specifies the
distance from the top edge of the page to the top of the selected layer.

NOTE

You can't edit a layer's Right or Bottom positioning properties from the Property inspector.

To position a layer using the Property inspector, select the layer (for example, by clicking
the layer's border or selecting its name in the Layers panel) and type distances in
the L and T boxes. You can use any of the units of measurement mentioned previously.
You can even use negative values to move part or all of a layer off the page entirely
(offstage, you might say), which is something you'd do if you intended a subsequent
animation to bring it onstage, into the document window.

For example, if you drew a 100-pixel-tall and 50-pixel-wide layer, you can move it
to the very top-left corner of the page by selecting it and typing 0 in both the L and
T boxes. To position that same layer so that it's just off the left edge of the page, type
-50px in the L box.

You can't move a layer completely off the screen by dragging it. If you try, Dreamweaver rudely snaps the layer back to its previous position when you release the mouse. To completely move a layer out of sight, you must use the keyboard or Property inspector.

The Property inspector
controls many
layer properties (although
some require
editing CSS styles).

8.7.3 Aligning Layers

At times you may want to align several layers so that their left, top, bottom, or right
edges line up with each other. Dreamweaver's Align command will do just that; it can
even make the width and height of selected layers the same.

The layer you select last dictates how Dreamweaver aligns the layers. For example,
say you have three layersA, B, and Cand select them in order from A to C. You
then align them to Left. Dreamweaver uses the left edge of layer C (the last one you
selected) as the value for the other layers.

To use this feature, select two or more layers (by Shift-clicking them), choose Modify
Align, and then select one of the following options from the submenu:

Left aligns the left edges of all selected layers. In other words, it gives each layer
the same L property.

Right aligns the right edges.

Top aligns the top edges, so that the T properties are all set the same.

Bottom aligns the bottom edges of the layers.

Make Same Width sets the same width for all selected layers (in the W box in the
Property inspector). Make Same Height does the same for the height of the layers.

8.7.4 Background Image and Color

You can set a layer's background in the same way you would for a table or table cell. To
add a background image to the layer, click the folder icon next to the Bg Image field,
and then select an image from your site folder. As usual, Dreamweaver tiles the image,
if necessary, until the entire layer is filled with repeating copies of the graphic.

Setting a background color is even easier. Just use the Bg Color box (see Section 1.3.3) to
select a color or sample a color off the screen.