Web Standards in Dreamweaver, Part 2 - Design Files: Premade CSS Stylesheets
(Page 4 of 5 )
Dreamweaver MX ships with a set of ready-made design files, including style-sheets. If CSS seems like a rather abstract concept at this point, or if you just want a way to get started quickly, these files are really useful.
To use a ready-made stylesheet, select File -> New, and then select CSS Stylesheets from the New Document dialog box. A list of premade stylesheets is displayed in the center selector box, as shown in Figure 2-13.
Figure 2-13. Premade stylesheets
Clicking any stylesheet will display some of its elements in the Preview panel. After choosing one that you want, click Create, and the stylesheet is created as a new document in Dreamweaver. You will need to save this stylesheet within your site.
To get started using your stylesheet, attach it to your page. Any redefined tags will adopt the rules set in the stylesheet, and any custom classes defined will be available for your use.
Design Files: Page Designs (CSS) Dreamweaver also ships with full CSS page designs ready for you to use. These are an excellent way to start using CSS layouts because they give you a starting point from which you can experiment. To use one of these layouts, select File -> New -> Page Designs (CSS) and pick one of the designs. You can see apreview of the layout in the Preview panel, as shown in Figure 2-14. Click Create, save the HTML document, and copy the CSS file into your site.
Figure 2-14. Page designs in the Preview panel
The layout will appear in Design view and you can edit the HTML and CSS to your own requirements. Changes made to the CSS file now will not affect the master CSS file that is used to create the layout in the first place, so feel free to experiment as much as you like.
Design-Time Stylesheets Design-time stylesheets allow you to apply a stylesheet that will not be visible when the site goes live. They are useful when working on a site that has multiple stylesheets, such as sites that use specific stylesheets for different browsers or sites that allow a user to select one of several stylesheets. If you are writing the link to the stylesheet dynamically with ASP.NET, Dreamweaver will not be able to render that stylesheet during the design process. Using a design-time stylesheet allows you to work visually in the Dreamweaver environment.
Working with a Design-Time Stylesheet
You can open the Design Time Style Sheets dialog box by either right-clicking (CMD-clicking on a Mac) the CSS Styles panel and selecting Design Time in the context menu, or by choosing Text -> CSS Styles -> Design Time Style Sheets. The dialog box shown in Figure 2-15 appears.
Figure 2-15. The Design Time Style Sheets dialog box
You can select stylesheets saved within your site to be shown or hidden at design time. To display a CSS stylesheet at design time, click the plus sign (+) button above the Show only at design time text box to open a dialog box that will allow you to browse for and select this stylesheet. To hide a CSS stylesheet, click the plus sign (+) button above the Hide at design time text box, and browse for the stylesheet.
You can remove the stylesheet simply by selecting it and clicking the minus sign (–) button.
The CSS Styles panel is updated with the selected stylesheet’s name and an indicator (hidden or design) to reflect the stylesheet’s status. This only affects the view of the document within Dreamweaver; no changes are made to your code.
Integration with TopStyle CSS Editor Although you can select any external editor for CSS, Dreamweaver MX has a close integration with the popular TopStyle CSS editor. A trial version of TopStyle is included on the CD with Dreamweaver MX, and it can be downloaded from http://www.bradsoft.com. It is a very useful application for anyone working extensively with CSS.
Unfortunately, TopStyle is currently a Windows-only product. There are Mac alternatives (including Style Master, available at http://www.westciv.com/style_master/index.html), but it does not currently offer the tight integration with Dreamweaver MX that TopStyle does.
If you are working with TopStyle, changes made to your stylesheet in TopStyle are automatically updated in Dreamweaver’s Design view, and new classes that you add are available immediately.
 This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Creating Valid Markup >>
More Web Standards Articles
More By Apress Publishing
/ 5 
