This chapter is from the book
This chapter is from the book
This chapter is from the book
Embedding a Layer with Style Sheets
By inserting a layer with the previous techniques, you're really positioning by eye, at least at this point. However, what I consider to be one of the great strengths of layers is the precise placement they offer. By using the CSS Styles panel inside of Dreamweaver, you have the capability to precisely place the layers anywhere within the document.
Although this way may seem a bit more technical and less visual, it offers some other advantages in addition to precise placement. By inserting a layer with the CSS styles, you can attach the layer to an external style sheet so that the layer appears in the same place on every page. Of course, you also have the advantage of being able to control the text's size and font family through the CSS style.
Cascading style sheets were covered in great detail in Chapter 10. Refer to this chapter if a concept appears vague, for I'm going to discuss only layer placement with CSS in this chapter.
Creating a Layer with Style Sheets
Follow these steps to learn how to insert a layer in a precise location by using CSS.
Make sure the CSS Styles panel is visible. If it is not, choose Window, CSS Styles to open the CSS Styles panel.
In the CSS Styles panel, click the New Style button located in the bottom-right corner of the panel. This opens the New CSS Style dialog box as shown in Figure 12.6.
In the New CSS Style dialog box, choose Make Custom Style (class) from the Type category. Type in a name for the style. Also, choose Define in This Document Only. Click OK. This launches the Style Definition dialog box.
In the Style Definition dialog box, choose the Positioning category. This changes the options that are presented on the right side, as displayed in Figure 12.7.
In the top category, choose settings for the Type, Z-Index, Visibility, and Overflow. For Type choose Absolute, and for Visibility choose Visible from the drop-down menu. You're probably familiar with absolute and relative sizing; however, Static may be a bit confusing. Refer to the note at the end of this exercise for an explanation as to what the Static option offers. Set Overflow and Z-Index to Auto, and finally, type in a value for width and height to determine the size of the layer. Choose Pixels in the drop-down menu for the units.
In the next section, Placement, enter values for the Left, Top, Right, and Bottom positions. The default increment is pixels; however, you can change the units in the drop-down menu located to the right of the text field.
Finally, leave the Clip portion of the dialog box set to the defaults. You'll look at clip options later in this chapter. When you're happy with your settings, choose OK. Refer to Figure 12.8 to see my settings.
This brings you back to the document. Notice the style in the CSS Styles panel. Click the style once to apply it so it will appear in your document as shown in Figure 12.9.
Remember that layers are part of the CSS Style specification. This can yield great benefits. By adding a layer to your style sheet, especially external ones, you have the flexibility of adding specific text with a specific style to any or all documents.
){kind=small}
Figure 12.6 The New CSS Styles dialog box offers options for creating a new CSS
style.
)
Figure 12.7 The category you select on the left determines which options
are available in the body of the dialog box.
)
Figure 12.8 These are the settings I used to create my layer in the CSS
Styles.
NOTE
The Static option for sizing ignores the Left and Top attributes. By choosing this option you forfeit precise control over the placement. Preview your document in a browser to see the results.
Absolute and Relative Positioning
Absolute sizing uses pixel values based on the top-left corner of an HTML document, whereas relative positioning is based on the size of the browser window at any given time. It can be a bit tricky to gauge how relative positioning will appear in a browser. However, it can be useful if you want the content to reposition itself in case a change occurs with the browser's window size.
)
Figure 12.9 After I click the style in the CSS Styles panel, the layer is placed
in the exact coordinates that I specified in the Style Definition dialog
box.