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. -
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. 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. 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. |