Section 6.3. Using Styles

6.3. Using Styles

Once you've created styles, applying them is easy. In fact, if you created HTML tag styles, you needn't do anything to apply them, because their selectors (see the box below) automatically dictate which tags they affect.

POWER USERS' CLINIC
Anatomy of a Style

Dreamweaver automatically handles the details of adding the proper CSS code to your pages, but if you're looking for something to read in bed, here's the behind-the-scenes scoop on how it works.

When you create an internal style sheet, Dreamweaver adds a pair of <style> tags to the head of the page (and a pair of HTML comment tags that hide the CSS from very old browsers). The opening <style> tag tells a Web browser that the following information isn't HTMLit's CSS code. When the Web browser encounters the closing </style> tag, it knows the CSS style information has ended.

Each line inside the<style> tag is a single style (in CSS speak, styles are also called "rules"). An HTML tag style for the Heading 1 tag (<h1>), for example, might look like this:

 h1 { font-size: 24px; color: #003399 } 

The first parth1is called a selector (in CSS-speak) and indicates what the style applies to. In this case, wherever the <h1> (Heading 1) tag appears in the Web page's code, this style applies.

The information between the braces{ }states what formatting the browser should apply. For example, the code shown above contains two formatting instructions for the <h1> tag. Each one's called a declaration and is composed of a property and a value . For example, font-size: 24px is one declaration with a property of font-size and a value of 24px . In other words, this rule tells a Web browser that text inside an <h1> tag should be 24 pixels tall. The second declaration in the code makes the text of all <h1> tags show up in the color #003399.

A class style looks just like an HTML tag, except that instead of a tag, the selector is a name you've supplied, preceded by a dot, like this:

 .company { font-size: 24px; color: #003399 } 

Styles stored in an external style sheet look exactly the same; the only difference is that external style sheets don't include the <style> tags and shouldn't include any HTML code. You can open a page in Code view (choose View Code) and edit an internal style sheet, just as you would the HTML of the page(see Chapter 9).

In Dreamweaver, you can also look at the raw style information of an external style sheet in several ways: open the .css file as you would a Web page (choose File Open or double-click its name in the Files panel), or you can right-click (Control-click) on the styles name in the CSS Styles panel and choose "Go to code" from the pop-up menu; if you've changed Dreamweaver's preferences, double-clicking a style's name can also open the CSS file.


6.3.1. Linking to an External Style Sheet

Whenever you create an external style sheet, Dreamweaver automatically links it to the current document. To use its styles in a different Web page, however, you must attach it to the page.

To do so, open the Web page to which you wish to add the style sheet. Then click the Attach External Style Sheet button (see Figure 6-1) on the CSS Styles panel. (If the CSS Styles panel isn't open, choose Window CSS Styles or press Shift-F11.)


Tip: You can also use the Property inspector to attach a style sheet. Just select "Attach Style Sheet " from the Style menu.

The Attach External Style Sheet window appears (see Figure 6-4.) Click the Browse button. In the Select Style Sheet File dialog box that appears, navigate to and double-click the CSS (.css)file you wish to attach to the document. If Dreamweaver offers to copy the style sheet file into your site's root folder, click Yes.

Figure 6-4. Most of the options in the Media menu aren't very useful, since there aren't any devices programmed to work with them. However, "printer" and "screen" are handy ways to control how your page displays when viewed on a monitor and when printed on paper.

The Attach External Style Sheet window provides two other options: how to attach the style sheet and what type of "media" you want the styles to apply to. The "media" setting is optional.

When attaching an external style sheet you can either "link" it or"import" it. These two choices are nearly identical; they're simply two different methods of attaching an external style sheet to a Web page. The only real difference is that Netscape Navigator 4 doesn't understand the Import method. For greatest compatibility, use the Link option.

The Media menu defines which type of output device or display should use the style sheet. For example, selecting "printer" means that the style sheet applies only when the document is printed. Most of these optionssuch as TV for televisions or TTY for teletype machinesaren't of any use to the average Web designer. But the options "printer" and "screen" can come in handy. For example, you can create a set of styles that applies just to computer monitors by attaching a style sheet with the "screen" optiongreat for those moody white-text on black background designer sitesand another setthis time using printer-friendly black text on a white backgroundthat applies only when printed. Then attach both sheets to the same page, and only styles in the "screen" style sheet appear when the page is viewed on a monitor, while those in the "printer" version appear only in the printed copy.

The "all" option in the Media menu is the same as not selecting anythingthe style sheet applies when printed, viewed on a monitor, felt on a Braille reader, and so on. (Dreamweaver 8 also includes a helpful toolbar for controlling the display of style sheets aimed at different mediasee Figure 6-5.) By using the Media menu, you can build one external style sheet that defines the basic look of all of your pages, and then create separate screen and printer style sheets that tweak that design for presentation on a monitor and on a piece of paper.

Figure 6-5. Dreamweaver 8 adds a Style Rendering toolbar to its arsenal of helpful CSS tools. To turn it on, choose View Toolbars Style Rendering, or right-click (Control-click) on either the Insert bar or the document toolbar, and then choose Style Rendering. Click a button on the toolbar to show styles that match the media type you selected when you attached the page (see Section 6.3). Screen (top left, circled) and Print (bottom left, circled) are the two most useful, though you can also hide all CSS styles by clicking the button on the far right of the toolbar (bottom right, circled).


Tip: You can preview the effect of the style sheet on your page by clicking the Preview button on the Attach External Style Sheet window.

After choosing your options, click OK, and Dreamweaver adds the necessary HTML code to the head of the Web page and automatically formats any tags in the document according to the style sheet's HTML tag styles. You'll see the formatting changes take place in the document window immediately after attaching the external style sheet.

If the style sheet contains class styles, on the other hand, you won't see their formatting effects until you apply them to an element on the page, as described next .

6.3.2. Applying a Class Style

You can apply class styles to any selection in the document window, whether it's a word, an image, or an entire paragraph. (You can apply any class style to any element, although doing so doesn't always make sense. If you format a graphic with a style that specifies bold, red Courier type, it won't look any different.)

For example, suppose your company's name appears in a paragraph of text on a Web page that includes (either in an internal style sheet or in a linked, external style sheet) a class style named .company . To format that text using the class style, you select the name in the document window and apply the style, as described below.

Similarly, to format larger selections, such as an entire paragraph, you'd select the paragraph and apply the class style. In fact, you can apply a class style to any HTML tag, such as the <p> (paragraph), <td> (table cell ), or <body> tags.

When you apply a class style ( .company , for example) to a tag, Dreamweaver adds a special class property to the page's code, like this: <p class="company">. On the other hand, if you apply a class to a selection that isn't a taga single word that you've double-clicked, for exampleDreamweaver wraps the selection within a <span> tag like this: <span class="company"> The National Exasperator</span>. This tag, in other words, applies a style to a span of text that can't be identified by a single tag.

As you can see, it doesn't take much code to add a style to a Web page. A single application of a CSS style may add only 15 characters to your document (<p class="company">). When you compare that compact instruction with the equivalent HTML code required to produce the same formatted text (such as <font size="5" face="Georgia, Times New Roman, Times, serif" color="#999933">The National Exasperator</font>), class styles look downright petite.

To apply a class style to text, select some words. Then, from the Style menu in the Property inspector, select the style name (top image in Figure 6-6). To style an entire paragraph, you only need to place the cursor anywhere inside the paragraph (or heading) before using the Property inspector.

To apply a class style to an object like an image, select the object (as always, the tag selector in the bottom of the document window is a great way to select a tag). Then use the Class pop-up menu on the Property inspector (bottom image in Figure6-6) to select the style name.

You can also apply a class style by selecting whatever element you wish to style, choosing Text CSS Styles, selecting the style from the submenu, or by right-clicking (Control-clicking) on the styles name in the CSS Styles panel, and then choosing "Apply" from the pop-up menu. Finally, you can also apply a class from the document window's tag selector, as shown in Figure 6-7.

Figure 6-6. The Property inspector provides the easiest method of applying a class style. Depending on what you've selected on the page (text, an image, or some other HTML tag) you'll encounter one of two different menusthe Style menu (top) or the Class menu (bottom). Either way, it's the same menu with the same options, and you use it to select the name of a style to apply it to whatever you've selected in the document window. You can also remove a style by selecting None from the menu.

Figure 6-7. You can apply a class style directly to a tag using the document window's tag selector. Just right-click (Control-click) the tag you wish to format, and then select the class style from the Set Class submenu. In addition, the tag selector lets you know if a tag has a class style applied to it. If so, the style's name is added at the end of the tag. For example, in this figure, a class style named .sidebar has been applied to a table cell (the <td> tag) on the page (circled).

6.3.3. Un-Applying a Class Style

To remove a style from an object on a Web page, simply select the element and then select None from the Property inspector's Style menu (see Figure 6-6). You can also choose Text CSS Styles None to remove a style from any selection (even nontext elements like images or tables).


Tip: If you've applied a class style to a selection of text, you don't actually have to select all of the text to remove the style. Just click anywhere inside it and select None from the Property inspector's Style menu (or choose Text CSS Styles None). Dreamweaver is smart enough to realize you want to remove the style applied to the text. (If you applied the style to a tag, Dreamweaver removes the Class property. If you applied the style using the <span> tag, Dreamweaver removes the span tag.)
class style with all of the formatting options you want for that third heading and apply it directly to the <h1> tag (by the magic of CSS, the class formatting options override any existing tag style optionssee Section 6.5.2 for more on this sleight of hand).
FREQUENTLY ASKED QUESTION
When Formatting Disappears

Sometimes when I copy text from one Web page and paste it into another Web page, all of the formatting disappears. What's going on?

When you use Cascading Style Sheets, keep in mind that the actual style information is stored either in the <head> of the Web page (for internal style sheets) or in a separate CSS file (an external style sheet). If a page includes an internal style sheet, when you copy text, graphics, or other page elements, Dreamweaver copies those elements and any class style definitions used by that content. When you paste the HTML into another page, the styles are written into the <head> of that page. This feature, new in Dreamweaver 8, can save you some time, but won't solve all of your woes. It doesn't, for example, copy any tag styles you've created or most advanced styles you may create (see Section 6.6). So if you copy and paste some textsay, an <h1> tag styled with an h1 tag stylethe <h1> tag and its contents will paste into another page, but not the tag style.

In addition, if a page uses an external style sheet, when you copy and paste text, the styles themselves don't go along for the ride. For example, if you copy a paragraph that has a class style applied to it and paste it into another document, the code in the paragraph is pasted (<p class="company"> for instance), but the actual "company" style, with all its formatting properties, isn't.

The best solution is to use a common external style sheet for all pages on your site. That way, when you copy and paste text, all the pages share the same styles and formatting. So in the example above, if you copy a paragraph that includes a class styleclass="company"into another page that shares the same style sheet, the paragraphs look the same on both pages.




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