TechNote

Using font formatting in Dreamweaver MX 2004

Introduction

When trying to change the appearance of text in the page, developers may be surprised to see span tags with style attributes instead of font tags. They may also notice that in spite of choosing certain page properties, there is no code written to the body tag. Developers will also see style code written to the top of the code.

The World Wide Web Consortium (W3C), an organization that provides direction for web development technologies and specifications for the use of technologies such as HTML, indicates that developers should use Cascading Style Sheets rather than HTML tags (such as font tags) to determine page appearance. In support of that, Macromedia Dreamweaver MX 2004 writes CSS code by default when developers make appearance choices, unless the page itself already uses HTML tags.

Prerequisites

A basic understanding of CSS will help readers understand and appreciate how Dreamweaver MX 2004 implements text styling. It also helps to be familiar with the Dreamweaver workspace. More resources are available in Additional information at the bottom of this document.

Note: You can also find additional information on Cascading Style Sheets in the Dreamweaver Help. Access Help in Dreamweaver by selecting Help > Using Dreamweaver (or selecting F1 from the keyboard).

Determining appearance

You can easily determine the appearance of the page or of text within Dreamweaver, using the tools in the Property inspector.

Text appearance

Apply styles to a text selection by following these steps:

Open or create a new document in Dreamweaver.
Select some text. If no text is selected, the change will apply to subsequent text entered.
Using the Property inspector, set the desired font, size or color.

Body appearance

Determine the appearance of the pages by following these steps:

Open or create a new document in Dreamweaver.
Click the Page Properties button in the Property inspector.
Set the appearance in the Page Properties dialog box, including setting heading and link appearance choices if available.

How the output may differ

By default, Dreamweaver MX 2004 formats text using CSS. Each time a font, size or color is defined for a text selection, Dreamweaver MX 2004 creates a new document-specific style which is then available from the Property Inspector's style pop-up menu. Code similar to the code below is inserted into the head of the document:

 <style type="text/css">
		

	<!--
		

	 .style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
		

	 -->
		

	</style>

Code similar to the following surrounds the text:

 <span outputclass="style1">text</span>

The actual experience may differ, however, in the following situations:

If the document already styles everything usingfont tags, Dreamweaver will assume it should usefont tags, that it should modify the body tag using HTML code, and that the Page Properties dialog box will only include those settings available if using HTML code.
If the document's body tag uses HTML code to determine page appearance, but the page doesn't exclusively usefont tags, text styling will still use CSS styles.
If you set the Dreamweaver preference described below to use HTML tags, Dreamweaver will use HTML tags (font tags for text appearance and HTML code in the body tag for page appearance).

Note: Even if the document has an external style sheet applied, new style declarations created from using the Property inspector will still be written to the head of the document rather than the CSS file.

Changing font formatting preferences

Using CSS styles give designers and developers greater control over their web pages by separating content from layout. Although using CSS styles to format text is the preferred method, certain requirements force developers to revert to HTML tags (inline styles) instead. For this reason, Dreamweaver MX 2004 comes with a preference that controls whether CSS or HTML styles are used. To toggle between using CSS and HTML styles, follow the steps below:

Select Edit > Preferences.
Choose General from the Category list.
In the Editing Options section of the General category, set the Use CSS instead of HTML tags option to the desired setting.

Note: If the page was created using HTML styles only (as in previous version of Dreamweaver), the application will continue to use HTML tags to format your text instead of CSS, regardless of your settings in Preferences. If the page contains a mixture of HTML and CSS styles, Dreamweaver will use CSS.

Modifying page properties

Depending on the setting of the CSS preference (explained above), different properties can be defined in the Page Properties dialog box for each web page by choosing Modify > Page Properties. When the CSS preference is checked, additional properties can be defined for the page, relating to the page's default font and hyperlink properties.