The Layer

     

The Layer "Box"

Dreamweaver provides several ways of creating layers .

TIP

Dreamweaver MX 2004 offers a number of predefined, layer-based page layouts that you can use as a jumping-off point for your own designs. To access these, choose File, New, choose Page Designs (CSS) in the Category column, then click through the individual designs in the center column, looking at the preview window until you find one that approximates your desired design.


Creating a Layer

To create a layer, do one of the following:

  • To create a layer, select Insert, Layout Objects, Layer from the menu. A layer is created at the insertion point with the default size settings.

  • You can also create a layer by dragging the Draw Layer option from the Layout tab of the Insert bar into the Document window. The layer is created in the closest position possible to where you release the button.

  • To draw a layer, click the Draw Layer button in the Layout tab of the Insert Bar. Then click in your document where you want the layer to be positioned and drag from the upper-left corner to the lower-right corner of your intended layer (see Figure 9.9).

    Figure 9.9. Draw a layer by clicking the Draw Layer icon in the Insert Bar; then click and drag in the Document window to define the layer's size and position.

    graphics/09fig09.jpg

    graphics/09fig09_alt.jpg


  • To draw multiple layers, click the Draw Layer button in the Insert Bar. Then hold down the (Command) [Ctrl] key while you draw. This enables you to continue drawing layers without having to repeatedly click the Draw Layer button.

If you have Invisible Elements turned on (View, Visual Aids, Invisible Elements), and you've checked Anchor Points for Layers in the Edit, Preferences, Invisible Elements list, a layer marker appears in the Document window for each layer. Even if you move the layer box, the layer marker remains where it was originally positioned.

NOTE

When Invisible Elements are active and layer anchor points selected, the elements on your page can appear in a shifted position in Design view. Turn off this option to get a better idea of how your page will look in a browser.


Adding Content to the Layer

You can insert elements into a layer just as you can with your base document. Before placing elements into a layer, you must first activate the layer by clicking anywhere inside its border. (Don't click the layer border itself, because that selects the layer for resizing or moving.)

When you activate a layer, the insertion point appears inside the borders of the layer box. Now any inserted object or typed text will go inside the layer (see Figure 9.10).

Figure 9.10. Activating a layer places the insertion point inside it. Any text or objects inserted here are placed within the layer.

graphics/09fig10.jpg

graphics/09fig10_alt.jpg


Selecting, Moving, Aligning, and Resizing a Layer in Design View

When you insert layers, they are rarely exactly where you want them to be. Fortunately, manipulating layers is easy. You can move, resize, or align layers in Design view, either "by sight" (see Figure 9.11) or via the Property inspector. You can select a layer or multiple layers in the Layers Panel or the Document window.

Figure 9.11. You can resize a layer by clicking its border and dragging one of the resize points around the edge. Move the layer by dragging on the drag box in the upper-left corner.

graphics/09fig11.jpg

graphics/09fig11_alt.jpg


Selecting a layer

You can select one or more layers in various ways.

Using the Layers Panel to Select a Layer

To use the Layers panel to select a layer, select Window, Layers and select the name of the layer.

Selecting a Layer in the Document Window

Click on the layer's border (the cursor turns into a four-headed arrow) and the resize handles appear, indicating that the layer is selected. Watch out: Clicking inside a layer causes the layer's selection handle to appear at the upper left, but does not actually select the layer. Always check the Property inspector to confirm that what you've selected is what you think you've selected.

Using Keyboard Shortcuts to Select a Layer

To use keyboard shortcuts to select a layer, select (Control-Shift-click) or [Command-Shift-click] from inside the layer.

Using the Tag Selector to Select a Layer

Click in a layer, then click the <div> tag in the Tag Selector to select a layer.

Selecting Multiple Layers

To select multiple layers with the Layers panel, Shift-click on as many layers as needed. The layers selected will stay highlighted.

Selecting Multiple Layers in the Document Window

To select multiple layers in the Document window, select Shift-click on the borders of two or more layers.

Resizing a Layer

Resizing a Layer with Resize Handles

In Design view, position the cursor over one of the eight resize handles on the sides and corners of the selected layer. A double-arrow cursor indicates the direction in which you can resize. Click and drag a handle to resize the layer.

Resizing a Layer One Pixel at a Time

In Design view, hold down (Control) or [Option] while pressing an arrow key. This method allows only the right and bottom border to move; the left and top borders are fixed.

Using Grid Snapping Increments to Resize a Layer

In Design view, hold down (Shift-Control) or [Shift-Option] while pressing an arrow key.

Resizing a Layer by Setting the Values

In Design view, type in the values in width (W) and height (H) in the Property inspector (Window, Properties).

Resizing Multiple Layers at the Same Time

Various techniques exist to resize multiple layers simultaneously .

Resizing Multiple Layers So They Conform to Each Other

In Design View, select Modify, Align, Make Same Width or Modify, Align, Make Same Height. The first selected layers conform to the width or height of the last selected layer. The last layer selected is represented by solid resize handles on the border; the other layers are represented by hollow resize handles.

Resizing Multiple Layers So That the Same Settings Apply

Select two or more layers. In the Property inspector, under Multiple Layers, enter the width and height values. The values are applied to all selected layers.

Aligning Layers

In Design view, select two or more layers. Select Modify, Align, and choose Left, Right, Top, or Bottom. All layers align with the last selected layer (highlighted in black). When aligning layers, child layers that aren't selected may move with a selected parent layer. The last layer selected is represented by solid resize handles on the border; the other layers are represented by hollow resize handles.



Using Macromedia Studio MX 2004
Special Edition Using Macromedia Studio MX 2004
ISBN: 0789730421
EAN: 2147483647
Year: N/A
Pages: 339

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net