Ten Ton Dreamweaver [Electronic resources]

Geoff Blake

نسخه متنی -صفحه : 109/ 52

Creating New Styles

When you use the CSS Styles panel, you're creating styles in a much more advancedand functionalway than when you work from the Property Inspector. You'll also see the arsenal of formatting attributes that CSS offers, which goes way beyond the basic font, size, and color settings that the Property Inspector provides. You'll see everything from case and alignment control to line and letter spacingan array of features rivaling that of even high-end print typography.

Get access to the CSS arsenal of formatting options by creating your styles in the CSS Styles panel.

As you begin creating styles through the CSS Styles panel, the styles won't be applied to the text on your page just yet. The idea here is to create styles first and then apply them to your text afterward. You can apply styles to your text through the Property Inspector.

To create a style using the CSS Styles panel, follow these steps:

At the bottom of the CSS Styles panel, click the New CSS Rule button, or choose Text > CSS Styles > New to begin creating a new style.

Pickin' Up Styles Throughout History

CSS ain't the only party in town! Styles have been with us since the dawn of time. Not happy with your current situation? Take a trip through history and get a few style pointers from these folks!

Early Man

The Deal: Even though prehistoric man didn't have much sense of style, he didn't mind running through the woods in animal skins. In fact, it's his uncomplicated style that has kept animal prints on the fashion radar for thousands of years . Sure beats wearing fig leaves. Last Seen: Picking stomped squirrel from his toes.

Middle Ages King

The Deal: Medieval kings had it all: hot queenies, servants, and massive armies at their beckon. As sweet pimpin' as they were, they'd bathe only three times in their life: at birth, for their wedding, and for their funeralmajor style faux pas. Last Seen: Getting soaped up by a mortician who wished the king had married much later in life.

Far East Warrior

The Deal: Artisans of sword play, hand combat, and fine weaponry, the feared warriors of the ancient East were also snappy dressers. Never ones to go for business casual, with their ornate and colorful combat attire, they sure made their opponents feel underdressed. Last Seen: All dressed up and ready to conquer.

Victorian Lady

The Deal: Every woman's fantasy life: stately mansions, chauffeured horse-drawn carriages, and gentlemen of noble society. This era lacked but one thing: narcotics control, with snuff being considered a lady's luxury at the time. Last Seen: Down at detox.

British Redcoats

The Deal: Never ones to dress down for an occasion, the British army always looked its best, even when facing down a fierce band of American colonists. As was quickly discovered, vibrant red didn't conceal an invasion force well in dense underbrush. Last Seen: See that big red blotch about two miles out?

Modern Punk Rocker

The Deal: Safety pins, tattoos, spiked gauntlets, piercingsit's all fair game for anti-establishment types. What was once fresh and full of political angst in the 1970s is now homogenized mainstream big business. Sorry to pop your bubble, kids. Last Seen: At the GAPthe whole ensemble for less than $200.

Chapter 9.

In the Name field, type a name for your style, preceded by a period. (If you forget the period, Dreamweaver adds it for you.)

You can use numbers and letters for the name, but you can't use spaces or punctuation, besides the period that precedes the name. Avoid names like title, body, and h1, because these names are used i98 (if you do, Dreamweaver will warn you to be home by 11 o'clock).

At the bottom of the dialog box, set Define In to This Document Only.

Choosing the New Style Sheet File setting will create an external style sheet that will apply to your whole web site. Choosing This Document Only limits the style to the current page.

Click OK.

The CSS Rule Definition dialog box appears, where you can set properties for your new style. The eight categories on the left side of the dialog box offer up all available formatting options for CSS (as opposed to the pishy three options available from the Property Inspector).

The dialog box is called the CSS Rule Definition dialog box is because it's here where you set the rules (the formatting options) for your style. Remember that any text that's formatted with the style simply follows the rules and does what it's told.

The next section details the three most common categories in the CSS Rule Definition dialog box: Type, Block, and Border. The remaining categories relate to graphics, hyperlinking, and page layoutall of which are discussed in other chapters.

Exploring the Rule Definition Dialog Box

So you've created a new CSS style, and now you're staring down the CSS Rule Definition dialog box. Don't let all those knobs and buttons make you queasy. Here, you'll get a rundown of all the options available in the Type, Block, and Border categories; then you'll see how to actually put them to work in your own styles.

Setting the Type Options

The CSS Rule Definition dialog box contains all the properties available to your new styles. The Type category, shown here, offers up a pile of typographic control.

[View full size image]

The Type category is one of the most commonly used, because usually designers are after a lot of typographic control. The best thing about it, though, is support. Even old-timers like Internet Explorer 6 and Netscape Navigator 4 support its options. Here's a rundown of the available settings:

Font, Size, and Color: These options work the same as in the Property Inspector. Use the Font menu to set your typeface, the Size menu to set your text's size (remember: sizing in pixels is best), and the Color window to set a text color (you're not limited to the colors in Dreamweaver's web-safe palette; with modern browsers and operating systems, pretty much any color should be fine).

Style: Sets italics for your text. What's the difference between italic and oblique type? Oblique type is sometimes rendered by the browser as a normal font that's just slanted, not as true italicized text.

Line Height: Sets what designers in the print world call leading, which is the space between the lines in a paragraph.

Decoration: Applies visual formatting to your text. However, if you apply the Underline format to your text, you'll confuse at least some of your visitorsthey'll think it's a hyperlink. As for Blink, if you want to make your site look like a Niagara Falls wedding chapel, then by all means, knock yourself out. None is one of the more useful options here; you can use it to create a rollover effect for hyperlinks, as you'll see in Chapter 9.

Weight: Adds a degree of boldness to your text. The Weight menu provides a list of values you can use to set the degree of boldness for your text. Normal is about 400, and Bold is equivalent to about 700.

Let your text have it with the CSS Rule Definition dialog box's Type Category! Here, you can see settings for Font, Size, Weight, Style, andmost interestinglyLine Height (known as leading to print designers) being applied to a paragraph. Take that, text!

Variant: Sets your text to either normal type or small caps.

Case: Controls your text's capitalization. The options are Capitalize, Uppercase, and Lowercase. Capitalize capitalizes the first character in each wordsame as Title Case in word processors.

Working with the Block Category

The Block category gives you much greater control over your paragraphs of text than rusty ol88 can. Get settin' those properties!

[View full size image]

The Block category contains yet more traditional typography commands, including settings for word and letter spacing, indents, and justification that affect an entire block (or paragraph) of text. Some of these options can't be displayed in Dreamweaver's Design view, so you'll have to preview their effects in a compliant web browser.

Word Spacing: Spreads apart the words in your paragraph. You can use negative values if you want, but just be sure that your target browsers support this functionality.

Letter Spacing: Spreads apart the characters throughout your paragraph. Letter spacing is what print designers call kerning. Use positive or negative values to precisely control the amount of space between your characters. This option is supported by Internet Explorer 4 and Netscape Navigator 6 and up.

Vertical Alignment: Controls the vertical position of the text on your page. Vertical alignment is known as baseline shift in the print world; it controls the vertical position of text in relation to other words on the same line. Make sure you preview this setting in your target browsers.

Text Align: Sets the horizontal position of the text on your page. The menu options are Left, Right, Center, and Justify.

Text Indent: Sets a left indent for your style. You can type positive or negative values (a negative value creates an outdent), but keep your eye on those target browsers.

Whitespace: If your backgroun88 code contains whitespacethat is, tabs, spaces, and line breaksthen this option controls the way that it's rendered onscreen. Normal disables the display of all whitespace characters on your page. Pre displays all whitespace characters as they were entered into your code, with no line breaks. Nowrap removes all whitespace, like Normal, and displays text on a single line unless a forced line break (created by pressing Shift+Enter) occurs. Normally, code shouldn't contain tabs and additional spaces, so these settings are not commonly used.

Display: Controls the appearance of formatted elements onscreen. Only a handful of these options are supported by current browsers, including Block, Inline, and None, so be sure to test your page if you use these.

You may not use all the options in the CSS Rule Definition dialog box's Block category, but many come in handy for just the right amount of typographic control, including Letter Spacing, Text Align, Text Indent, and Whitespace, as seen here.

[View full size image]

Working with the Border Category

Don't be a squareuse the Border category to place a frame around your text! The available settings help control the type, thickness, and color of your frame.

[View full size image]

The Border category lets you apply and control border styles, colors, and line widths on text and graphics on your page.

Style: Choose from eight border styles, including solid, dashed, and dotted. The actual display of the border will depend on the browser being used, so be sure to preview your settings. Choose Same for All to set the same style for all four sides of your page element, or use different styles on different sides.

Noteworthy

The Dreamweaver developers do a great job of keeping up with the latest CSS standardswhich means that the options in the CSS Rule Definition dialog box are right on that bleeding edge, making it imperative that you test your pages in a variety of popular browsers. However, Dreamweaver's code validator will check your CSS and report, via a red wiggly line below the item, any CSS style element that is out of sync with common browsers.

Width: Sets the thickness of the border. Choose Thin, Medium, Thick, or a custom value, or choose Same for All if you want to apply the same setting to all four sides.

Color: Use Dreamweaver's 216-color web-safe palette, or any other color palette, to set the color of your style's border. Again, set the same color for all four sides, or set different colors for each side. Browser display can be touchy, so be sure to preview your work.

Using the Border category, place a frame around your text. Even better, turn off the Same for All option in the Style area, as shown here, and set different borders for different sides of your text. Then use the Width and Color options to control the border thickness and color.

Setting Formatting for Your Style

Now that you've had a quick tour of the CSS Rule Definition dialog box, you're ready to put some of those settings into action. In this section, you'll see how to set some of the more straightforward options for your new CSS style. It's as easy as delivering a five-cent pickup line.

Before you begin, take a gander at the CSS Styles panel, and you'll see your new stule loaded into the top pane.

Once your new style is created, Dreamweaver adds it to your list of styles at the top of the CSS Styles panel.

Noteworthy

Some CSS style options can't be displayed in Dreamweaver's Design view, so you may need to preview your page in your target browsers to see the effects of your CSS style settings.

Because your new style hasn't been applied to any text on your page, you won't see any visible formatting changes yet. To actually see your style in action, you have to apply it in your page using the Style menu in the Property Inspector, which is where we'll start, with the Type Options.

Here's how to set options for your style:

If the CSS Rule Definition dialog box is open on your screen, click OK to close it; then select the text on your page that you want to format with your new CSS style.

From the Style menu in the Property Inspector, choose your style.

The text is formatted with the new style. Now again, keep in mind that you won't see any visible change on your page because you haven't specified your new format settings yetyou're going to do that right now.

In the CSS Styles panel, double-click your style; then in the CSS Rule Definition dialog box, make sure Type is selected in the Category list.

Noteworthy

All settings in the CSS Rule Definition dialog box are optional. Just set the formatting options that you want for your style and leave the rest as they are.

Most designers like to set the Type category options because they want a lot of typographic control. One of the best things about this category is browser support: even old-timey browsers support the Type options.

Specify the Font, Size, and Color settings just as you would in the Property Inspector.

If you want to set italics for your text, use the Style pull-down menu.

Instead of using the Italic button on the Property Inspector to manually set italics for your text, build this formatting into your style using the italics setting.

Rather than sticking with the values on the Size menu, try typing your own value.

Now that your Type options are in place, you'll set paragraph-related options for your style.

In the CSS Rule Definition dialog box, select the Block category.

The Block category options provide additional traditional typography settings. These options control an entire paragraph (or block) of text.

Specify an alignment for your text by choosing a setting from the Text Align menu.

To indent the first line of your text paragraph, enter a value in the Text Indent field.

Keep in mind that the indent setting here indents only the first line of text in your paragraph. If you want to indent all the lines in your paragraph, use the Box category's Left Margin setting.

Now you'll set up your style to place a frame around your text.

In the CSS Rule Definition dialog box, select the Border category.

You can use the Border category to place a frame around your text. Here, you can set a style for the border, a color, and a line width. These options are also available for graphical elements that you may want to include on your page. For example, you may wish to put a border around an image.

10.

In the Style pane, choose a style for your border from the Top pull-down menu.

You can choose from eight border styles, including Solid, Dashed, Dotted, and Ridge. Use the Same For All option to set the same style for all four sides of your page element, or use different styles on different sides.

11.

In the Width pane, set the thickness of the border.

Noteworthy

When you create custom Class styles (as you're doing here), you have to apply them to each element, one at a time, wherever you want to use them on your page. Sound like a drag? Maybe, but once you've taken the time to format your text, you'll then have total control over the text on your page (or even over your entire site, as we'll discuss shortly).

Select one of the preset thicknesses (Thin, Medium, or Thick) or enter a custom value. Choose Same for All if you want to use the same width for all four sides.

12.

Set a color for your border by clicking the boxes in the Color pane.

Clicking the color box opens Dreamweaver's color palette. Remember that you don't need to limit your color choices to this palette.

Noteworthy

What you select on your page before applying your style is important. Single-clicking a paragraph will format the entire paragraph. Selecting a single letter, word, or sentence will format only that selection.

13.

When you're done adding properties to your style, click OK in the CSS Rule Definition dialog box.

If you want to go back and make changes to your styleeither to edit the settings you used or to add some new onesuse the Properties pane in the lower half of the CSS Styles panel, just as you saw in "Editing Your Styles" earlier in this chapter.

A second (and perhaps more straightforward) way to edit a style is to double-click it in the top pane of the CSS Styles panel. Doing so reopens the CSS Rule Definition dialog box, where you can pick up where you left off.

Redefinin91 Tags

In the previous section, you saw how to create your own custom Class styles. Being able to create your own styles can be a real power trip, so what if your now CSS-corrupt, power-hungry self wants to go beyond just creating styleswhat if now you want to change the rules o90? Good newsyou can use CSS to redefine existin91 tags.

You can create as many custom Class styles as you want, but whether you like it or not, your page is going to be loaded full o90 tagsparagraphs, lists, tables, and so on. In fact, every page element that you insert into your page use103 tags, and at least initially, the tags determine the formatting of your page. So instead of creating new styles from scratch, you can redefine existing tags using CSS.

When you redefine a98 tag, what you're really doing is overriding your viewer's web browser preferences by sending the browser a new set of rules to follow. For example, let's assume that you want to change the look of all the main text on your pagesay you want to change the formatting, such as the font family and type color. Main text always uses the Paragraph tag. The problem with the Paragraph tag (and many othe102 tags) isn't structuralit's cosmetic. So while you could create a new custom Class style to handle the formatting duties of your main copy, you'd then have to manually apply your new style to every paragraph. But since your text is already formatted with the Paragraph tag, why not just change the rules for the Paragraph tag? Doing this is a heck of a lot easier than doing all that manual formatting. It's pretty powerful stuff. Go on and flexno one's looking!

At the bottom of the CSS Styles panel, click the New CSS Rule button.

In the New CSS Rule dialog box, set the Selector Type option to Tag and choose p from the Tag pull-down menu.

The p setting refers t99's Paragraph tag. It's helpful to have a somewhat decent understanding o90, so that you know what tag to choose from the menu. Otherwise, open Dreamweaver's Reference panel (Window > Reference) for a helping hand.

At the bottom of the dialog box, set Define In to This Document Only; then click OK.

Although you can use the New Style Sheet File setting with redefine88 tags (it will create an external style sheetsomething we'll look at later in this chapter), stick with This Document Only for now.

In the CSS Rule Definition dialog box that appears, specify any formatting settings that you want all paragraphs in your page to use.

You saw how to use this dialog box earlier. For example, you may want all paragraphs to use a particular font and size (use the Type category). Or perhaps you want all paragraphs to start with a specific indent or a certain amount of letter spacing (use the Block category).

Any properties that you set here will override the Paragraph tag's default formatting, and therefore tell your visitor's browser to display the tag in this new way. Any properties that you don't specify will revert to the tag's default style. For example, if you don't specify a font color, the color will be black, the text color's default. It's a CSS makeover dream come true!

When you're done setting your options, click OK.