A List Apart

Menu
Issue № 141

Modifying Dreamweaver to Produce Valid XHTML

by Published in HTML, Workflow & Tools · 118 Comments

Problem: Dreamweaver 4 falls short in its ability to produce well–formed, standards–compliant markup. Solution: You can easily harness Dreamweaver’s two greatest strengths, its flexibility and its user community, to make it one of the best tools on the market for producing good XHTML. This article will tell you how.

Article Continues Below

With a few tweaks, hacks and extensions, you’ll be able to produce sites that validate, and to clean up legacy pages. Set aside an hour or two, follow these directions, and fall in love with Dreamweaver all over again.

What this article does not do

This article does not show how to tweak Dreamweaver to produce standards–compliant scripting. A future article may do that. Also note that upcoming Dreamweaver 5 is expected to be more standards–compliant than the current version, so some of these tweaks may not be needed with future versions of Dreamweaver.

Finally, remember to validate all your pages. Just because you’ve converted Dreamweaver into a standards–friendly tool doesn’t mean your pages will always be perfect. (We all make mistakes.)

Starting small

XHTML must be written in lowercase, so set Dreamweaver to write markup accordingly:

  1. Open Dreamweaver.
  2. From the dropdown select Edit>Preferences.
  3. In the Preferences dialog box, select code format on the left of the dialog box.
  4. Set the “case for tags”  and “case for attributes” to lowercase.

Setting lowercase.

Doctype by default

XHTML documents must begin with a namespace and an XHTML Document Type Declaration (including a URI that points to an online Document Type Definition). Unfortunately,  the default template in Dreamweaver does none of that:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" c charset=iso-8859-1">
</head><br />

But good little girls and boys use a template that looks like this:


<html  
xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
</head>

It’s easy to make the default template include this or any other Document Type and namespace declaration:

  1. Find the document called Default.html:
    Windows: C:ProgramFilesMacromediaDreamweaver4
    ConfigurationTemplatesDefault.html.
    Macintosh: HardDrive/Dreamweaver4/Configuration/
    Templates/Default.html.
  2. Make a backup of the file.
  3. Open Default.html and change the head so it includes the Document Type Declaration and namespace declaration above (or the Doctype and namespace declaration of your choice).
  4. You may also want to edit the <body> tag, deleting the body color and text/link color styles that your cascading style sheet should handle.
  5. While you are there, you can also set up links to style sheets, insert basic meta tags, and declare your character set.

Closing non–closing elements

XHTML requires you to close non–closing (“empty”) elements including form tags, image tags, horizontal rule tags and break tags. (For more information, see XHTML Guidelines in the NYPL Online Style Guide and W3C’s HTML Compatibility Guidelines for XHTML 1.0.) Closing these pesky elements can be one of the most time–consuming tasks in transitioning to XHTML. But you can modify Dreamweaver to do the work for you:

Closing the LineBreak.htm

Let’s start with the simple line break; we’ll change <br> to <br />.

First, find the file called LineBreak.htm in ConfigurationObjectsCharacters.

Finding objects.

  1. Create a backup of LineBreak.htm.
  2. Open LineBreak.htm.
  3. Edit line 17 so that <br> becomes <br />.
  4. Save and close the file.
  5. Open a new HTML document in Dreamweaver and insert a line break.
  6. View Source to be sure it worked.

Closing linebreaks.

Closing images

The process for the Image.js file is similar, but a bit more complicated:

  1. Go to ConfigurationObjectsCommon.
  2. Backup Image.js.
  3. Open the file Image.js and modify line 21 from:
    “return ‘’;”
    to this:
    “return ‘’;”.
  4. Again, test your work by opening a new HTML document and inserting an image file.

Repeat these steps for HR.htm and other non–closing element files in these folders:

  • ConfigurationObjectsCommon
  • ConfigurationObjectsForms
  • ConfigurationObjectsHead

Checking your work

After you have modified all of the non–closing elements, create a new document that uses all such elements and perform a little QA testing on it. Preview the pages in a few browsers on a few platforms, and run the page through the HTML validator. If you have made an error, you don’t want to compound it by creating pages with broken markup.

Characters and Styles

Dreamweaver makes it easy to insert special characters such as em–dash or proper quotation marks. Under the Insert drop–down menu, select Special Characters and you will see a list of the most common ones, ready for easy insertion.

But two problems make these options less than desirable. First, the process of selecting em–dash, for example, takes too many steps. It is easier to simply type “—”. Second, the character sequence that Dreamweaver inserts is not valid. So if you use these characters as they are, your site will not validate.

Two quick fixes solve both problems:

Editing the Special Character Files

You can edit the the character objects themselves so that they produce Unicode character entities. Let’s work with the em–dash:

  1. Return to the file ConfigurationObjectsCharacters.
  2. Open emdash.html.
  3. Change return ”—” to return “—”.
  4. Save the document, and test it as you did above.

Continue the process for the other files in the Characters directory. To modify the dropdown Insert>Special Characters>Other menu, edit commandsInsertEnt.htm. Again, backup this file before you edit it.

Caveat: Dreamweaver will not display some Unicode character sequences in Preview mode. Do not be alarmed when it renders “ (left double quotation mark) as a dot. All will be well when you see it in the browser.

Creating Keyboard Shortcuts

Now you have nicely written Unicode, but it’s still a pain to insert the little buggers. You can create keyboard shortcuts for the character sequences by editing the menus.xml document in your program files (Configuration>Menus>menus.xml.).

You might for example create cmd+shft+h for an em–dash. I created shortcuts for right and left double quotation marks.

Before you do this, close Dreamweaver. Edit menus.xml in another editor like HomeSite, BBEdit, PageSpinner, or Notepad. Make sure that you do not use a command sequence that is already in use.

Unicode em-dash.

The Bold and the Strong

While you are working in the menus.xml file, you might also want to exercise a little more semantic consideration. The <b> and <i> tags will validate, but use of these formatting tags is not really in the spirit of good markup. They don’t mean anything, they are just for formatting. If you care enough about document structure to want to write XHTML, you should be using the more meaningful tags <strong> and <em> instead.

There are a few different ways of making Dreamweaver do this, but I found it easiest to modify menus.xml this way:

Bold to strong, Italic to em.

I just gave the menu items _Bold the argument for strong, and _Italic the argument for em. This way, when you select bold from the text dropdown menu—or if you use the bold or italic keyboard commands—these semantically more meaningful tags will appear instead.

Caveat: This does not change the HTML generated by the properties window.

Update: After this article was published, Francois Jordaan implemented the XHTML modifications discussed here and packaged them in a downloadable file for your convenience. See the section labelled “Help & Praise,” below.

Cleaning up bad pages with extensions

A developer named Jason Dalgarno has been kind enough to made available a Dreamweaver extension that allows you to convert your pages into XHTML. Note this is a zipped file download. When uncompressed, Dreamweaver Extension Manager will open it automatically. The tool will:

  • Quote unquoted attribute values.
  • Unminimize Boolean attributes.
  • Copy name attributes to id attributes.
  • Add the pitifully neglected type attribute to [removed].
  • Set an empty alt attribute to <img> tags.
  • Change null links from # to JavaScript;.
  • Fill empty table cells.
  • Run the command site–wide (be careful with this one).

Remember to make a backup copy of the page (or site) before you work with this new tool.

A bit of fiddling may be required before you get the hang of it. By default, the extension will run every time you save a document. I found this a bit annoying and changed my preferences so it runs only when I command it to.

Super HTML–XHTML DTD Dreamweaver Extension

This handy little extension allows you to change the DTD of a page with a single command. Note that if you are working with Dreamweaver 3 or earlier, you will also need to download the Macromedia Extension Manager.

Installing the Extension

  1. Visit the recently moved and reformatted Macromedia Dreamweaver Exchange and search for the Super HTML-XHTML DTD Extension appropriate to your machine.
  2. Open Dreamweaver.
  3. From the “Commands” drop–down, select “Manage Extensions.”
  4. Browse to the Super HTML-XHTML DTD Extension file that you downloaded and double–click it. The extension should now be installed.

Help & Praise

The modifications discussed in this article have been implemented by Francois Jordaan and are available for downloading from his personal site.

Thanks to Rachel Andrew, William Samplonius, Sam Marshall, Yvonne Adams, Austin Govella, David Perini, Steve Champeon and the Webdesign-L community for help with this article.

118 Reader Comments

Load Comments