Dreamweaver Tutorials

You can now edit and add CSS right from within the application, while this as been possible for some time Dreamweaver MX2004 offers much more support and control over style sheets.

To open the CSS Styles panel, do one of the following:
Choose Window > CSS Styles or use the keyboard shortcut of Shift+F11.
The Apply Styles and Edit Styles radio buttons located at the top of the CSS Styles panel let you select different views of the CSS styles associated with the current web page. I always find it helpful to workout has many styles first, and I am a great fan of ID and classes, in this next series of Dreamweaver tutorials we shall cover the benefits of using ID and class selectors in CSS.

Use Apply Styles view to select a class style to apply to an element in your web page. The Apply Styles view only displays custom (class) styles.

The Edit Styles view allows you to look at the style definition of the styles associated with the current document. The Edit Styles view displays style definition of custom (class) CSS styles we can do just the same thing using a ID which just places a marker on the tag, this tells the browser what to do when it reads the ID tag.

As you create a CSS style sheet, the style’s name and properties appear in the CSS Styles panel’s Edit Styles view. Edit Styles lists all the selectors that have been set and externally linked or imported style sheets are also shown. Apply Styles lets you view styles applied in the current document, as well as styles available in an attached external style sheet.

When you create a custom (class) style, it appears in the CSS Styles panel and in the Text > CSS Styles submenu.

Before we get started on our next few Dreamweaver tutorials and Style sheets, let us to run over the different options that we have:

Attach Style Sheet opens the Link External Style Sheet dialog box. Select an external style sheet to link to or import into your current document. Up to MX2004 it was a good idea to create the style sheet in a 3rd party program like topstyle pro, but the new improved css support makes it a lot easier to do it right from within the program interface.

New CSS Style opens the New CSS Style dialog box. You use the New CSS Styles dialog to select the type of style you’re creating—for example, to create a class style, redefine an HTML tag, or to define a CSS selector.

Edit Style Sheet opens the CSS Style Definition dialog box. Edit any of the styles in the current document or in an external style sheet.

Delete CSS Style removes the selected style from the CSS Styles panel, and removes the formatting from any element to which it was applied.

It may seen like a lot of hard work to create your web site in CSS, but in the long term even a small site will benefit from creating a layout in CSS, but be warned all is not simple while Dreamweaver helps you to create your site, and tutorials are all over the web some properties don't look the same on all platforms, in some cases you can use JavaScript or even a server side code such as PHP to change which style sheet is loaded this may be a good idea, if this seems complex, don't worry we have set up a full chapter of tutorials covering just this, if you would like to know more, open the training CD and in the Dreamweaver working files view the CSS-platform.pdf, you may also like to print this document out.