Home arrow Web Standards arrow 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
(Page 1 of 5 )

web standards

Editor's Note: See this link for part 1 of this chapter.  

CSS Tools in Dreamweaver MX 2004

Dreamweaver has a variety of tools that make working with CSS easier.

Setting Preferences

The following preferences will help you get comfortable working with CSS in the Dreamweaver environment.

CSS Styles

Open the Preferences dialog box (shown in Figure 2-7) by selecting Edit -> Preferences and selecting the CSS Styles category.

Web Standards 

Figure 2-7. The Preferences dialog box

CSS allows shorthand and longhand syntaxes for either brevity or clarity. A snippet of CSS code in longhand syntax looks like this:

.longhand {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #660066;
text-decoration: underline;

In this dialog box, checking the Use shorthand for boxes forces Dreamweaver to use the shorthand syntax. These rules are displayed in exactly the same way in any browser.

.shorthand {
font: small Arial, Helvetica, sans-serif;
color: #660066;
text-decoration: underline;

More important are the radio buttons at the bottom. If you created a style-sheet in another editor such as TopStyle and then make edits in Dreamweaver, you should make sure that any rules Dreamweaver adds are consistent with the style you used in the rest of your stylesheet. In this situation, select the If original used shorthand option.

TIP You may find that certain rules work when declared in shorthand but not in longhand in older browsers such as Netscape 4. If you are using the shorthand syntax to handle these problems, it is important to make sure Dreamweaver is set up to assist you with this.

If you check the final check box on this dialog box, Dreamweaver will open the CSS file when it is modified. This means you can keep a close eye on what the software is adding to your stylesheet.

File Types/Editors

To specify another editor as your default CSS editor, go to Preferences -> File Types /Editors, as shown in Figure 2-8.

Web Standards 

Figure 2-8. File types/editors

We will discuss integrating an external editor later in this chapter.

The CSS Styles Panel

The CSS Styles panel enables you to attach stylesheets to your page, create new styles (either in a new stylesheet, an existing stylesheet, or embedded in your document), and edit styles already created.

Creating a Simple Stylesheet in Dreamweaver

Follow these steps to create a stylesheet.

1. To create a new stylesheet, click the New CSS Style button, which is the second button from the left on the CSS Styles panel, as shown in Figure 2-9.

Web Standards 

Figure 2-9. The CSS Styles panel with New CSS Style button highlighted

This displays the New CSS Style dialog box, as shown in Figure 2-10.

Web Standards 

Figure 2-10. The New CSS Style dialog box

2. You will need to create a style definition in order to create a new style-sheet, and a good place to start is with the basic font styles for the body text of the page. Select the Tag (redefines the look of a specific tag) radio button. Next, in the drop-down list at the top of the page, select Body. Select the radio button to define a New Style Sheet File and click OK.

3. Because this is a new stylesheet, a Save As dialog box will appear so that you can save your stylesheet. Make sure that you add the .css extension on the end of your stylesheet name (in other words, save as global.css and not just global). Once you have saved your stylesheet, the dialog box shown in Figure 2-11 appears.

Web Standards 

Figure 2-11. The CSS Style Definition dialog box

4. In this CSS Style Definition dialog box, you can set the rules for a tag or class. For the body text, select Type in the Category list; choose a font, size, and color; and then click OK. You can redefine the look of any HTML tags that you want by following these steps.

5. To edit a CSS style, select it in the CSS Styles panel and then click the Edit button (second from the right at the bottom of the panel) to open the CSS Style Definition dialog box. Double-clicking the style in the tree view in the CSS Styles panel opens the stylesheet in Dreamweaver so you can make changes to the stylesheet itself.

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