Section 12.2. Defining Style Rules for Specific Elements


12.2. Defining Style Rules for Specific Elements

You can divide the elements of a web page into two broad categories: layout elements, like table cells and layers; and content elements, like text and images. Both types can receive appearance attributes from a Cascading Style Sheet, which may lead you to wonder when to apply a style rule to a layout element and when to apply the rule to the content.

Applying style rules directly to the elements of your layoutthat is, your table cells or layersmakes good sense in situations like these:

  • You want to set the background color of an area of your layout.

  • You want to control the amount of padding in the main content area or sidebar.

  • You want to add margins to the main content area or sidebar.

  • You want to draw a visible border around an area of your layout.

BEST BET

Create a style rule for a layout element specifically when you want to control the appearance of the layout itself, not the content that goes inside the layout.


Notice that, in all of the above, you're defining the appearance of the layout itself, not the appearance of the content that goes into the layout. These appearance attributes remain the same, in other words, no matter what type of content you happen to place inside the table cell or layer.

By contrast, whenever you want to control the look of the content itself and not its container, you're usually better off creating style rules specifically for the content element. In other words, if the style rule stays the same no matter where the content happens to appear in the layout, then you should attach the style rule to the content element.

BEST BET

Create a style rule for a content element specifically when you want to control the look of the content, no matter where it happens to appear in your layout.


Content-type styles are more common overall. However, right now, most of the elements in your Dreamweaver template fall into the layout category. You may have a few content elements, like the list of secondary nav links at the bottom of the main content area, but not many. Rest assured, this number will increase dramatically when you get into Part 3 of this book. For now, you'll look at one example of a content-type style in "Creating a Style for a Content Element" a little further on in this chapter, just so you see how it's done. You'll go on to create styles for other types of content elements throughout the rest of this book.

12.2.1. Creating a Style for a Layout Element

Assume that you want to add some padding to the main content area to prevent the content from sitting snugly against the borders. You experiment with your layout sketch, and you decide upon the following values:

  • Along the top and bottom of the main content area, 20 pixels of padding

  • Down the left side of the main content area, 60 pixels of padding

  • Down the right side of the main content area, 0 pixels of padding

To do this, follow these steps:

  1. In the template's document window, click anywhere inside the main content area.

  2. Go to the Tag Selector at the bottom of the document window, and select the tag of the appropriate layout element. For a tables-based layout, you want the <td> tag, as selected in Figure 12-5. For a layers-based layout, you want the <div> tag. Clicking this tag selects the layout element itself, not the content inside it.

    Figure 12-5. The <td> tag is selected in the Tag Selector

    TIP

    To edit the attributes of the page itself, such as the background color or the default font for the entire page, choose the <body> tag from the Tag Selector.


  3. With the table cell or layer selected, go to the CSS Styles panel, and click the New CSS Rule button. (This is the one with the page icon.) Dreamweaver opens the New CSS Rule dialog box, as Figure 12-6 shows.

    Figure 12-6. Use the New CSS Rule dialog box to add a style rule to your external CSS file

    TIP

    In the New CSS Rule dialog box, under Define In, make sure that you select the option for your external stylesheet. Otherwise, Dreamweaver embeds the CSS code.


  4. If you want your style rule to apply to all table cells on the page, choose Tag under Selector Type, and then choose td or div from the Selector menu, but rarely is this the case. You probably don't want the nav area or the banner area to have the same amount of padding as the content area. Choose Advanced instead, and in the Selector field, type the name of the tag (either td or div), a period (.), and then a brief but descriptive name for the style. Since you're building this style for the main content area, content is as good a name as any, so type td.content or div.content.

  5. Click OK. The New CSS Rule dialog box closes, and the CSS Rule Definition dialog box in Figure 12-7 opens. Table 12-1 lists the types of attributes that appear under each category in this dialog box.

    Figure 12-7. Define new style rules in the CSS Rule Definition dialog

    Table 12-1. Appearance attributes by category in the CSS Rule Definition dialog box

    Category

    Includes

    Type

    Typeface, type size, font weight (bold), font style (italic), font variant (small caps), line height, type casing, type color, type decorations (underline, strike-through, etc.)

    Background

    Background color, background image

    Block

    Word spacing, letter spacing, text alignment, indents

    Box

    Width, height, padding, margins

    Border

    Border style, border width, border color

    List

    List type, leading character

    Positioning (These attributes apply primarily to the layers of a layers-based design.)

    Position on screen, clipping regions, stacking order, visibility, overflow behavior

    Extensions (These attributes apply to Internet Explorer version 4.0 or later, although many of them aren't supported by any version of any browser.)

    Page break, visual effects


  6. You want to add padding to the main content area, so you consult Table 12-1 and find that padding is in the Box category. Click the Box category in the CSS Rule Definition dialog box.

  7. Under Padding, uncheck the Same For All checkbox. Then type 20 in the Top field, 0 in the Right field, 20 in the Bottom field, and 60 in the Left field. Make sure all the units menus are set to pixels, as shown in Figure 12-8.

    Figure 12-8. Define the padding of the main content area under the Box category

  8. Click OK. Dreamweaver opens the CSS file as a separate document window and adds the new style rule to it. Click its tab, and choose File Save from the main menu to save your changes to the stylesheet.

  9. Choose File Save from the main menu, and update the pages of your site.

12.2.2. Creating a Style for a Content Element

Try another style definition, only this time, set the appearance of a content element, like the secondary nav links at the bottom of the main content area. You look back over your notes from Chapter 6, and you decide upon these specifications:

  • A typeface of Verdana, Helvetica, or the visitor's default sans-serif font

  • A type size of 12 pixels

  • Boldface

TIP

Avoid using the menus and buttons on the Property Inspector to set the appearance attributes of text, because Dreamweaver embeds this CSS code into the page.


Here's what you do:

  1. In the template's document window, click anywhere inside the paragraph that holds the secondary nav links.

  2. Go to the Tag Selector, and click the <p> tag to select the entire paragraph.

  3. Go to the CSS Styles panel, and click the New CSS Rule button. The New CSS Rule dialog box opens.

  4. Again, you probably don't want this style to apply to all paragraphs on your page, so choose the Advanced option, and type p.secondarynav or something to that effect in the Name field.

  5. Click OK. The New CSS Rule dialog box closes, and the CSS Rule Definition dialog box opens.

  6. You see from Table 12-1 that various type attributes appear under the Type category, so choose the Type category from the CSS Rule Definition dialog box if it isn't already selected.

  7. From the Font menu, choose the font list that reads Verdana, Helvetica, sans-serif.

    BEHIND THE SCENES

    You may recall from Chapter 6 that you specify a list of fonts rather than a single font for the typeface. The fonts appear in order of preference. Take a font list that reads Verdana, Helvetica, sans-serif. To the browser, this says, "The preferred font for the element is Verdana, but if Verdana isn't available on the visitor's system, then try Helvetica. If Helvetica isn't available either, then just go with the visitor's default sans-serif font."

    Dreamweaver comes prebuilt with several common and reliable font lists, but if you want to create your own, choose Edit Font List from the Font menu, and start choosing fonts. Be sure to conclude your list with serif, sans-serif, or monospaced. These are generic placeholders that correspond to the visitor's default serif, sans-serif, and monospaced font, whatever they happen to be. This way, if all else fails, the browser picks the default system font in the style of your choosing, and your page looks something like the way you intended it.


  8. From the Size menu, set the type size to 12 pixels.

  9. From the Weight menu, choose Bold. Your dialog box looks like the one in Figure 12-10.

    Figure 12-10. Now build a style rule for the secondary navigation text

  10. Click OK to add the style rule to the stylesheet.

  11. Switch to the stylesheet's document window, and choose File Save from the main menu.

  12. Choose File Save from the main menu, and update the pages of your site.



Dreamweaver 8 Design and Construction
Dreamweaver 8 Design and Construction (OReilly Digital Studio)
ISBN: 0596101635
EAN: 2147483647
Year: N/A
Pages: 154
Authors: Marc Campbell

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