Home arrow Web Standards arrow Page 3 - 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 - The Property Inspector
(Page 3 of 5 )

In Dreamweaver MX 2004, the old-style Property inspector that allowed you to add <font> tags to your documents is gone. In its place is the new and improved Property inspector, shown in Figure 2-12, which allows you to add classes to page elements far more quickly than before.

 Web Standards

Figure 2-12. Property inspector

The Format drop-down list lets you add the structural (X)HTML markup to elements. If you select an element in Design view and then choose Heading 1 from this list, the element will become a level 1 heading (<h1>). Other structural markup that you can add using the Property inspector includes the following:

  • Click the B button to wrap an element in <strong></strong> tags, making it appear bold in a browser.

  • Click the I button to wrap an element in <em></em> tags, making it appear italicized in the browser.

  • Click the Unordered List button to turn an element into an unordered list.

  • Click the Ordered List button to create an ordered list.

The Text Indent and Text Outdent buttons add and remove <blockquote> elements. You should not use the Text Indent button to indent text; rather, you should use it to mark up a quote. To indent text, you should use a left-padding setting in a CSS class.

The font, size, and color drop-down lists should be used with caution. As already mentioned, the use of <font> tags has been removed from the Property inspector, so if you change the font of an element using this menu, Dreamweaver creates a class in the head of your document and then applies it to the element. You would be better served to create your own classes for text that needs to be specially formatted, or create a special element using these menus and copy the resulting CSS out of the head of your document and into your external stylesheet, where it will be available to any pages that have this stylesheet attached.

The Style drop-down list picks up any classes that you created and gives you an easy way to apply them to page elements. Select an element in Design view and select a class from this drop-down list, and the class will be applied to the element.

The Page Properties Dialog Box

The Page Properties dialog box can be launched from the Property inspector as well as by selecting Modify -> Page Properties. This dialog box gives you a quick way to set CSS properties for your document. Once again, these properties will appear in the head of your document, and because you are usually aiming for a unified look and feel throughout your site, you should copy them to your external stylesheet.

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