Site hosted by Build your free website today!

Making documents XHTML compliant
This section describes how to make a new document XHTML compliant, and how to make an existing HTML document XHTML compliant.

To create a new, XHTML-compliant document:
Choose File > New.
The New Document dialog box appears.

Choose a document type.
Select the Make Document XHTML Compliant option.
Click OK.
To create XHTML-compliant documents by default:
Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and select the New Document category.
In the New Document category, choose a document type and select the Make Document XHTML Compliant option.
Click OK.
To make an existing HTML document XHTML compliant:
Open a document.

For a document without frames, choose File > Convert > XHTML.
For a document with frames, select a frame and choose File > Convert > XHTML. To convert the whole document, repeat this step for every frame and the frameset document.
Note: You can’t convert an instance of a template, because it must be in the same language as the template on which it’s based. For example, an instance of an XHTML template will always be XHTML; and an instance of an HTML template will always be HTML and can’t be converted to XHTML or any other language.


About the XHTML code generated by Dreamweaver
Dreamweaver generates XHTML code, and cleans up existing XHTML code, in a way that meets many of the XHTML requirements automatically. For the few XHTML requirements that remain, Dreamweaver provides you with the tools that you need.

Note: Some of the requirements described in this section are also required in various versions of HTML.

The following table describes the XHTML requirements that Dreamweaver meets automatically.

XHTML requirement To meet this requirement, Dreamweaver does this...
When the character encoding of a document is other than the default UTF-8, the document must have an XML declaration. Adds an XML declaration to an XHTML document and specifies the encoding; for example:
<?xml version="1.0" encoding="iso-8859-1"?>
There must be a DOCTYPE declaration in the document prior to the root element, and the declaration must reference one of the three Document Type Definition (DTD) files for XHTML (strict, transitional or frameset). Adds an XHTML DOCTYPE to an XHTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
Or, if the XHTML document has a frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "">
The root element of the document must be “html”, and the html element must designate the XHTML namespace. Adds the namespace attribute to the html element, as follows:
<html xmlns="">
A standard document must have the head, title, and body structural elements. A frameset document must have the head, title, and frameset structural elements. Includes the head, title, and body elements in a standard document and, in a frameset document, includes the head, title, and frameset elements.
All elements in the document must nest properly:
<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p> Generates correctly nested code and, when cleaning up XHTML, corrects nesting in code that was not generated by Dreamweaver.
All element and attribute names must be lowercase. Forces HTML element and attribute names to be lowercase in the XHTML code that it generates, and when cleaning up XHTML, regardless of your tag and attribute case preferences.
Every element must have an end tag, unless it is declared in the DTD as EMPTY. Inserts end tags in the code that it generates, and when cleaning up XHTML.
Empty elements must have an end tag, or the start tag must end with />. For example, <br> is not valid; the correct form is <br></br> or <br/>. Following are the empty elements: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, and param.
And for backwards-compatibility with browsers that are not XML-enabled, there must be a space before the /> (for example, <br />, not <br/>). Inserts empty elements with a space before the closing slash in empty tags in the code that it generates, and when cleaning up XHTML.
Attributes can’t be minimized; for example,
<td nowrap> is not valid; the correct form is
<td nowrap="nowrap">.
This affects the following attributes: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly, and selected. Inserts full attribute-value pairs in the code that it generates, and when cleaning up XHTML.
Note: If an HTML browser does not support HTML 4, it might fail to interpret these boolean attributes when they appear in their full form.
All attribute values must be quoted. Quotes attribute values in the code that it generates, and when cleaning up XHTML.
The following elements must have an id attribute as well as a name attribute: a, applet, form, frame, iframe, img, and map. For example,
<a name="intro">Introduction</a> is not valid; the correct form is
<a id="intro">Introduction</a> or
<a id="section1" name="intro">
Introduction</a>. Sets the name and id attributes to the same value, whenever the name attribute is set by a Property inspector, in the code that Dreamweaver generates, and when cleaning up XHTML.
For attributes with values of an enumerated type, the values must be lower case.
An enumerated type value is a value from a specified list of allowed values; for example, the align attribute has the following allowed values: center, justify, left, and right. Forces enumerated type values to be lowercase in the code that it generates, and when cleaning up XHTML.
All script and style elements must have a type attribute.
(The type attribute of the script element has been required since HTML 4, when the language attribute was deprecated.) Sets the type and language attributes in script elements, and the type attribute in style elements, in the code that it generates and when cleaning up XHTML.
All img and area elements must have an alt attribute. Sets these attributes in the code that it generates and, when cleaning up XHTML, reports missing alt attributes.

Defining CSS Style Background properties
You use the Background category of the CSS Style Definition dialog box to define background settings for a CSS style. You can apply background properties to any element in a web page. For example, create a style which adds a background color or background image to any page element, for example behind text, a table, the page, and so on. You can also set the positioning of a background image. See also About Cascading Style Sheets and Editing a CSS style.

To define background settings:

To open the CSS Styles panel, do one of the following:
Choose Window > CSS Styles.
Press Shift+F11.

Open the CSS Style Definition dialog box by doing one of the following:
Add a new style. For detailed information, see Creating a new CSS style.

Creating a new CSS style
Create a CSS style to automate the formatting of HTML tags or a range of text identified by a class attribute.

To create a new CSS style:
Place the insertion point in the document, then do one of the following to open the New CSS Style dialog box:
In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button (+) located in the lower right area of the panel.
In the text Property inspector, click the Toggle CSS/HTML Mode button, if necessary, to switch to CSS Mode, then in the CSS Style pop-up menu, select New CSS Style.
Choose Text > CSS Styles > New CSS Style.
The New CSS Style dialog box appears.

Define the type of CSS style you want to create:
To create a custom style that can be applied as a class attribute to a range or block of text, select Make Custom Style (Class), then in the Name field, enter a name for the style.
Note: Custom style (class) names must begin with a period and can contain any combination of letters and numbers. For example, .myhead1. If you don’t enter a beginning period, Dreamweaver automatically enters it for you.

To redefine the default formatting of a specific HTML tag, select Redefine HTML Tag, then in the Tag field, enter an HTML tag or choose one from the pop-up menu.
To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute, select Use CSS Selector, then in the Selector field, enter one or more HTML tags or choose one from the pop-up menu. The selectors available from the pop-up menu are a:active, a:hover, a:link, and a:visited.
Select the location in which the style will be defined:
To create an external style sheet, choose New Style Sheet File.
To embed the style in the current document, choose This Document Only.
Click OK.
The Style Definition dialog box appears.

Choose the style options you want to set for the new CSS style.
When you are done setting style attributes, click OK.


Double-click an existing style to open it for editing.
In the CSS Style Definition dialog box, choose Background, then set the style attributes you want.
Leave any of the following attributes empty if they are not important to the style:

Background Color sets the background color for the element. The background color attribute is supported by both browsers.

Background Image sets the background image for the element.The background image attribute is supported by both browsers.

Repeat determines whether and how the background image is repeated. The Repeat attribute is supported by both browsers.

No Repeat displays the image once at the beginning of the element.

Repeat tiles the image horizontally and vertically behind the element.

Repeat-x and Repeat-y display a horizontal and vertical band of images, respectively. Images are clipped to fit within the boundaries of the element.

Note: Use the Repeat property to redefine the body tag and set a background image that does not tile or repeat.

Attachment determines whether the background image is fixed at its original position or scrolls along with the content. Note that some browsers may treat the Fixed option as Scroll. This is supported by Internet Explorer but not Netscape Navigator.

Horizontal Position and Vertical Position specify the initial position of the background image in relation to the element. This can be used to align a background image to the center of the page, both vertically and horizontally. If the attachment property is Fixed, the position is relative to the Document window, not to the element. This attribute is supported by Internet Explorer but not Netscape Navigator.

When you are finished setting these options, select another CSS category on the left side of the panel to set additional style attributes, or click OK.