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

Applying CSS Styles

As you're about to see, applying CSS styles is very easy, especially given how much work the styles do. The only catch, as noted below, is that you have to be sure to attach a style to the correct page element. Knowing a bit o219 can come in handy.

CSS styles must be applied to an existin220 tag. It's possible to apply a CSS style to any one of several tags, including paragraphs, hyperlinks, and table cells, and therein lies the problem. A given block of text can appear inside a hyperlink, which is itself inside a paragraph, which is inside a table cell. In such situations, it's hard for Dreamweaver to guess which tag it should attach the style to. The following technique ensures that you give Dreamweaver the information it needs to apply the style to the right tag every time.

Because you've redefined severa225 tags, Dreamweaver automatically formats the content that's within the <p> tags. In this task, you'll learn how to format content using other redefine217 tags such as <h1>, <h2>, <a>, and custom classes.

1.	If it isn't already open, open jadevalley_templat218. Position the cursor before the word Lorem in the first paragraph on the main page and press Enter/Return to create a new paragraph. Type Main Heading and press Enter/Return. Then type Sub-heading and press Enter/Return again .

We're creating descriptive text to which Dreamweaver will apply the styles. At this point, these two new paragraphs are formatted as body paragraphs, using the <p> tag.

[View full size image]

2.	Click anywhere in the Main Heading line and choose Heading 1 from the Format selector in the Property inspector. Next, click anywhere in the Sub-heading line and choose Heading 2 from the Format selector in the Property inspector.

Changing the formatting to Heading 1 adds <h1> tags around the text. You redefined the attributes of both the <h1> and <h2> tags using CSS, so Dreamweaver automatically applies the formatting you specified as soon as you change them to headings.

[View full size image]

Next, you'll prep the footer area. You defined three custom classes for this: .footer, .text_nav, and .copyright. Obviously, .text_nav and .copyright map clearly onto the two existing paragraphs of the footer. But what about .footer itself? That style is meant to apply to both of the lines in the footer. What you need to do, then, is to wrap both of those lines in a new tagonce again a <div> tagand apply the .footer style to it.

You'll start with the <div> tag.

3.	Drag to select the text navigation bar and the copyright lines. Using the Layout category of the Insert menu, click the Insert Div Tag button.

This button enables you to insert a <div> wrapped around the current selection.

[View full size image]

After you click the button, a small dialog appears.

4.	In the Insert Div Tag dialog, make sure that Wrap Around Selection is selected in the Insert option. In the Class option, specify footer. Leave ID blank. Click OK.

[View full size image]

The two footer lines are separated from the rest of the main_content <div>. The lines are still inside that <div> tag, so they inherit its properties, except where explicitly overridden. In this case, the alignment is overridden (the two lines are center-aligned).

[View full size image]