Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Adding Custom Classes

At this point, you've redefined fiv218 tags to automate text formatting. However, there are still areas of content on the Jade Valley Web site that need special formatting for which there are n228 tags. You'll need to create a custom CSS class instead.

In general, you want to create custom classes as one of the CSS styles in the style sheets to format special content areas. For example, you generally want the text in the footer area to be smaller than your regular content, bu233 has no <footer> tag that you can format for this purpose. Instead, you have to use a regular <p> tag, but create a special .footer class that you can apply to the <p> tag you want to use as the footer.

In this task, you'll create five custom classes: .footer, .text_nav, .copyright, .content_main, and .content_special. You'll use these classes to format four special areas: the footer, the copyright line of the footer, the text-based navigation bar at the bottom of the page, and the two table cells that hold the two main content areas. You'll begin with the footer.

Again, you will use the CSS Styles panel to create custom classes.

Custom class names must begin with a period and can contain any combination of letters and numbers.

Note

If you don't enter a period before the name of the custom class, Dreamweaver automatically enters it for you .

Remember that elements inherit formatting from elements in which they are nested. The footer will apply to a <div> tag at the bottom of the main_content layer, and even though you will apply the .footer custom class to a <div> tag, it will inherit all the formatting of the base <div> tag, except those attributes (such as size) that you explicitly changed in the definition of the .footer class. As a result, you don't have to specify a font face when you create the .footer class.

The 4-pixel top and bottom cell padding you specified creates extra space above and below the text block, so that it doesn't run into the edges of its cell.

[View full size image]

As before, these settings can be found in different categories of the CSS Style Definition dialog: Type, Block, and Box.

The .text_nav custom class is similar to the .footer custom class in many ways. The only difference is the text color, the larger font size, and increased cell padding.

The Background Color setting can be found in the Background category.

[View full size image]