Section 8.4. Applying the Layer Style

8.4. Applying the Layer Style

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

Figure 8-5. The Insert Div and Draw Layer tools aren't available in Layout mode. If these tools are grayed out on the Insert bar, click the Standard button.

Figure 8-6. Once you've applied an ID style to add a layer to the page, that ID's name no longer appears in the ID menu on subsequent visits to this dialog box. That's because you can use an ID only once per page.

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.


Note: The Insert menu includes a few other options as well. You can insert the <div> tag before or after a particular tag, and if you simply clicked in the document window, you can insert the <div> tag at the cursor position by selecting the "At insertion point" option. In addition, two options are available for nesting one layer inside of another, as discussed on Section 8.7.4.

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.

    Figure 8-7. Unlike other page elements, layers don't appear in the same place on the page as their HTML code. Here, the layer that appears in the bottom-right corner is actually the first bit of HTML on the page (and is therefore represented by the layer marker in the top-left corner of the page).

    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 .


    Tip: The Layer marker (shield icon) takes up room on the screen and can push text, graphics, and other items out of the way. In fact, even the thin borders that Dreamweaver adds to tables and layers take up space in the document window, and the space they occupy may make it difficult to place layers precisely. The keyboard shortcut Ctrl+Shift+I ( -Shift-I) hides or shows invisible items like Layer markers. The Hide All Visual Aids option from the Document toolbar does the same thing (see Figure 8-8).
  • 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).


    Note: If one layer overlaps another, the top layerthe one with the higher Z-Index, as described on Section 8.3.1.3has a solid outline; the lower layer's outline appears as a dashed line where the top layer overlaps it.
  • 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.

Figure 8-8. The top four choices in the Visual Aids menu provide visual cues to help you with CSS layouts in Design view. The CSS Layout Backgrounds optionselected herelights up each <div> tag on a page with a hideous, randomly selected background color. It also highlights any element whose display property is set to "block" (Section 6.7.3) or that uses either absolute or relative positioning (Section 8.3.1.2). Both the CSS Layout Outlines and Layer Outlines options draw a gray line around positioned elements. In addition, the Layout Outlines option draws a black border around <div> tags that aren't absolutely positioned. The CSS Box model option is discussed on Section 6.7.4.1.

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.




Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

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