Home arrow Web Standards arrow Page 4 - Web Standards in Dreamweaver, Part 2

Web Standards in Dreamweaver, Part 2

This article walks you through setting the preferences for working with CSS in Dreamweaver, how to work with the CSS style panel, linking to the stylesheet, improvements to the Propert Inspector, how to creat new XHTML documents and more. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, with Rachel Andrew and Kevin Marshall, published by Apress, 2004, ISBN: 1590593480.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
September 08, 2004
  1. · Web Standards in Dreamweaver, Part 2
  2. · Creating Classes
  3. · The Property Inspector
  4. · Design Files: Premade CSS Stylesheets
  5. · Creating Valid Markup

print this article

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.

Web Standards

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.

Web Standards 

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.

Web Standards 

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.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials