Creating Styles with the Property Inspector


For users who are upgrading from an older version of Dreamweaver, it's the most natural thing in the world to use the Property Inspector to create styles. You can still style text with the Property Inspector in Dreamweaver 8, but there are a few things to keep in mind.

The old way of using Dreamweaver added dozens, perhaps hundreds, of font tags to a page with the Property Inspector. Getting rid of all those bandwidth- eating font tags is a good thing. Nowadays, the Property Inspector won't generate font tags if your Preferences are set to Use CSS instead of HTML tags (see Figure 5.3). Instead, it creates styles.

This sounds good, but there's a problem: the Property Inspector only writes internal styles. There's nothing wrong with internal styles, if that's what you want. You may want to design a page using internal styles and export the styles when you're finished. Keep in mind that this is what's happening, and you're good to go.

To create styles with the Property Inspector:

1.
Open a new, blank document, or a document with content but with no styles yet applied.

2.
Click the Page Properties button on the Property Inspector. The Page Properties dialog appears ( Figure 5.41 ).

Figure 5.41. Page Properties for Appearance determine backgrounds, fonts, colors, and margins.


3.
The Page Properties dialog contains five categories. You can set properties as desired in the following:

Appearance: Set appearance properties for the body, including page font, size , text color, background color , background image. If you use a background image, you should also set how it repeats.

Margins are set individually for top, right, bottom, and left.

Links: Set link font, size, link color, visited links, rollover links, active links, and select underline style from the pop-up menu ( Figure 5.42 ).

Figure 5.42. Page Properties for Links set up fonts, colors, and sizes for links.


Headings: Set a heading font, and choose a size and color for each heading ( Figure 5.43 ).

Figure 5.43. Page Properties for Headings set up fonts, colors, and sizes for headings.


Title/Encoding: Type a page title. Choose Document Type (DTD) from the pop-up menu. Leave Encoding alone unless you know what you're doing and are creating pages in multiple languages ( Figure 5.44 ).

Figure 5.44. Page Properties for Title/Encoding determine title, document type, and language encoding.


Tracing Image: Browse to locate the tracing image and set the degree of transparency ( Figure 5.45 ). Tracing images were covered in Chapter 3, "Building Your First Page."

Figure 5.45. Page Properties for Tracing Image set up a tracing image.


4.
Click Apply to see how your changes look, and then OK to accept your changes.

Tips

  • The styles and properties you set are stored internally in this document only. You can inspect them in Code view. The Document Type appears in the first line of code. The language encoding appears in a meta element in the head . The styles are enclosed in a style element in the head . If you set a tracing image, it appears in Design view.

  • Names in the Page Properties dialog are not always standard CSS selector or property names . For example, in the Links category, Rollover links correspond to the CSS pseudo-class selector a:hover and Underline style corresponds to the CSS property text-decoration .


To create classes with the Property Inspector:

1.
Open a document and select the text or tag to be styled.

2.
On the Property Inspector, set new values for any or all of the following: Font, Size, and Color. For color, use the Color Picker to choose a color for the selected text ( Figure 5.46 ).

Figure 5.46. Write class rules for Font, Size, and Color with the Property Inspector. Here, Color is being set.


3.
Dreamweaver creates a class with a generic name , and that class is applied immediately to the selected text. The new class appears in the Style pop-up menu on the Property Inspector ( Figure 5.47 ). The class is applied with a span tag to inline text ( Figure 5.48 ). If the selected text is a complete element, such as a paragraph, the class is applied to the element's tag.

Figure 5.47. The Style pop-up menu on the Property Inspector lists available class rules. Choose a class from this menu to apply it.


Figure 5.48. To apply a class to an inline element, such as a sentence , word, or letter, Dreamweaver uses a span element.


Tip

  • In step 2, don't change the Format or Style value or you'll be changing your selection instead of creating a new class.





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net