In most cases, a layer includes a variety of HTML elementsimages, paragraphs, headlines, and so on. Unlike a normal style that you usually apply to a single tag or even a single word, all the elements inside a layer are wrapped inside a <div> tag. Dreamweaver includes a simple tool to make adding the <div> tag easy.
Available from the Layout tab of the Insert bar, the Insert Div Tag tool is a one-click tool for wrapping content in a CSS style (Figure 8-5). To use it, select all of the content you want to include in the layer and then click the button on the Insert bar (alternatively, you can choose Insert Layout Objects Div Tag). Either way, the Insert Div Tag window opens (see Figure 8-6).
You can select the name of a class or ID style from either the Class or ID menu. In the case of a layer, you'll most likely select the name of the layer style you created from the ID menu. Dreamweaver 8 adds a New CSS Style button to the Insert Div Tag window. Click it, and you go about the normal process of creating a style as described in Chapter 6; when you're done creating the style, the name appears in either the Class or ID box, depending on the type of style you created.
The Insert menu reads "Wrap around selection." Click OK to wrap the selected content in a <div> tag. The layer appears on the page with the ID style applied to it.
Alternatively, you might start with a blank page, create your layer styles, insert the layers , and then add content to each layer. The process is the same as above, except instead of selecting your page content and then wrapping it in a <div> tag, you place the cursor on the page where you want the HTML code for the layer to appear. Then use the Insert Div Tag tool and, from the Insert Div Tag window, select the ID name and choose the "At insertion point" option to insert the layer. Dreamweaver inserts the layer and adds a small amount of dummy text like this: "Content for id 'banner' Goes Here." Later, you can delete this text and then type or paste text, add graphics, and insert other HTML into the layer.
Unless you add a background color or border to your layer, it's difficult to identify its boundaries. And if you insert a layer without wrapping it around any content, it'll be invisible. To make working with layers easier, Dreamweaver provides visual cues in Design view, as shown in Figure 8-7.
Layer marker . The gold shield with the letter C represents the position in the underlying HTML where the code for the layer actually appears.
These markers aren't normally visible (unlike in previous versions of Dreamweaver). To see them, you must turn them on in the Preferences window: press Ctrl+U ( -U) to open the window, click the Invisible Elements category, and make sure the "Anchor points for layers" option's turned on.
While HTML objects generally appear in the document window in a top-to-bottom sequence that mirrors their order in the HTML source code, the position of layers doesn't depend on where the layer-creating code appears in the page's HTML. In other words, it's possible to have a layer appear near the bottom of the final Web page, whose actual code may be the first line in the body of the HTML page (see Figure 8-7 for more detail).
Click the shield icon to select the layer. Note, however, the difference from the selection handle (described next ): When you drag a Layer marker, you don't move the layer in the page layout. Instead, you reposition the layer's code in the HTML of the page.
That distinction can cause confusion. For instance, be careful not to drag a Layer marker (which represents the HTML code) into a table. Putting a layer inside a table can cause major display problems in some browsers.
That said, a layer can overlap a table, or even appear to be inside a cell; just make sure the gold Layer marker itself isn't inside a cell .
Selection handle . The selection handle provides a convenient handle to grab and move a layer around the page. The handle appears when you select the layer or when you click inside the layer to add material to it. The handle lets you move the position of the layer without changing the position of its code (see "Moving Layers" on Section 8.7.2).
Layer outline . A thin, gray, 3-D border outlines each layer. Like the Layer marker and selection handle, it's there only to help you see the boundaries of the layer and doesn't show up in Web browsers. You can turn it on and off, but to turn it off, you need to make sure two options in the View Visual Aids menu dont have checkmarks next to their names : Layer Outlines and Layout Outlines. You can also use the Visual Aids menu in the Document window (see Figure 8-8).
Layer positioning summary . If you select a layer and hover your mouse over that layer, Dreamweaver pops up a yellow box with information about how that layer is positioned (see Figure 8-7), including the name of the ID style or class style, what type of positioning is used, the dimensions of the layer, and so on. This box provides a quick summary of relevant positioning information and gives you a bird's-eye view of the CSS properties defining the layer's placement on the page.
POWER USERS' CLINIC Floats: An Alternative to Absolute Positioning |
While CSS-Positioning uses precise measurements and absolute positioning to place elements on a page, many common design elementslike a left or right sidebar, or boxes with pullquotescan also be achieved with the CSS Float property described on Section 6.7.4. Say you've got four paragraphs of text. You'd like the top two paragraphs to fit in a 200-pixel wide sidebar at the right edge of the page. You can create a CSS style with a width of 200 pixels and a Float property of Right. This moves those two paragraphs to the right edge of the page, letting the two bottom paragraphs move up and fill the empty space in the left side of the page. (For this kind of scheme to work, you should always set a width for the floated style. Otherwise, the style can span the entire width of the page, not providing any room for other content to appear next to the floated paragraphs.) For excellent information on this technique, check out www.complexspiral.com/ publications /containing-floats/ or http:// css-discuss .incutio.com/?page=FloatLayouts. |