Develop Websites with Dreamweaver MX 2004

Previous Page / Next Page

(Continued from Previous Page)

7. Click OK.

The Save Style Sheet File As dialog opens.

8. Enter a name for the style sheet, including the extension .css, and click Save.

The CSS Style Definition dialog opens, with the tag you selected shown in the title bar.

9. Use the various categories listed on the left side of the window to change the appearance of the text that uses this tag. For example:
• To change the appearance of the type, select Type from the Category list and then select a font, size, color, and any decorations you want to apply.
• Use the Block category to define spacing and alignment.
• Use the List category to define an image to use for bulleted lists.
• Positioning lets you define the precise positioning of layers on your page, something we'll describe later in the tutorial.
10. When you've finished, click OK.

The tag appears in the CSS Styles panel.

Tip:

Notice that Dreamweaver opens the style sheet in the Document window. You can view the code by clicking the document's tab. When you've finished, save and close the document.

Classes are custom styles that do not correspond to existing HTML tags. To create a class, you use the same process, except that you must name the class:

1. On the CSS Styles panel, click the New CSS Style button.

The New CSS Style dialog opens.

2. Select the Class option button.

3. Enter a name for the class into the Name field. Class names must begin with a period, which Dreamweaver has already inserted before unnamed1.
4. If necessary, create a new style sheet (as described in the previous steps), or select an existing style sheet from the drop-down menu.
5. Click OK.
6. The CSS Style Definition dialog opens.
7. Choose the elements you want to use and click OK.

The style appears in the CSS Styles panel.

Previous Page / Next Page

Learn Macromedia Dreamweaver MX 2004 for free! Dreamweaver is a trademark of Macromedia Corporation. Learnthat.com is not affiliated with Macromedia.