TechNote

Take advantage of the sample CSS styles in Macromedia Dreamweaver MX 2004

Introduction

Macromedia Dreamweaver MX 2004 presents a major leap forward in the CSS rendering and editing capabilities of the Macromedia Dreamweaver web design suite. CSS has now taken center stage for the design aspects of Dreamweaver's WYSIWYG Design view, resulting in more manageable, efficient pages that comply with modern web design technologies and standards.

To help developers new to CSS become acquainted with some of the many advantages of using CSS, Macromedia has included the O'Reilly CSS Reference book in Dreamweaver MX 2004 (Window > Reference) and included several sample CSS stylesheets that you can use to jumpstart the design of your web pages. In addition, Macromedia has also included a sample page design that uses the power of CSS to create a customizeable web page that closely resembles the "Halo" look and feel of Macromedia's own website.

Using the sample CSS Styles

The sample styles in Dreamweaver MX 2004 are external stylesheets (meaning, the CSS styles are stored in a separate CSS file) and can be attached to an existing document by following these steps:

Open the web document that you wish to apply a sample CSS style to.
Click the Attach Style Sheet button in the CSS Styles panel.
In the bottom of the Attach External Style Sheet dialog box, click on the sample style sheets link in the "Dreamweaver has sample style sheets to get you started" text.
The Sample Style Sheets dialog box will appear, where you can select a CSS style sheet to apply to your page. Click the Preview button to have Dreamweaver temporarily apply the CSS styles in this style sheet to your current document for you to be able to examine the effect of the CSS on your document. This change is only temporary and will not change your document code until you click the OK button. You can click the Browse button at the bottom of the Sample Style Sheets dialog box to select where in your site the CSS file will be saved.
Click OK to apply the style sheet or Cancel to cancel this action.

Using the sample "Halo" page designs

In addition to the sample CSS styles, Macromedia Dreamweaver MX 2004 also includes sample pages that fully utilize the abilities of CSS to create pages that resemble the "Halo" look and feel of Macromedia's own pages. Here are the steps needed to create a sample "Halo" page:

Choose File > New.
From the New Document dialog box, select Page Designs (CSS). A selection of sample page designs will appear in the center window, along with a preview of what the page will look like. There are two"Halo" designs available, and four other CSS-based page designs.
Select the desired Halo page layout and click Create.
Dreamweaver will now ask you to give the file a name, then ask you where you want to store the CSS files and images used in this page design. Macromedia recommends saving them in a folder that is located under your defined site root so that Dreamweaver can properly generate the references to these files.
Dreamweaver will now generate the sample "Halo" page. When previewed in a browser (File > Preview in Browser, or press the F12 key) the page will have many CSS-generated effects similar to the effects found on the Macromedia web site.

Additional information

For more details, please refer to the CSS Topic in the Dreamweaver Developer Center. To learn more about Macromedia Halo elements in Flash and HTML, please refer to our Halo and MX Elements page.