Ten Ton DreamweaverBy
Geoff Blake...............................................Publisher: Peachpit PressPub Date: February 08, 2006Print ISBN-10: 0-321-37412-6Print ISBN-13: 978-0-321-37412-7Pages: 456Index
Creating New StylesWhen 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:
Exploring the Rule Definition Dialog BoxSo 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 OptionsThe 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 CategoryThe 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 CategoryDon'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
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 StyleNow 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
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 TagsIn 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!
|
لطفا منتظر باشید ...
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.
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.
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.
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.
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?
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.
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.
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.
![[View full size image]](/image/library/english/13880_209fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13880_211fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13880_212fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13880_212fig02_alt.jpg){kind=link}