Modifying Dreamweaver to Produce Valid XHTML

by
Published in HTML, Workflow & Tools

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
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#section2

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#section3

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#section4

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#section5

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#section6

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#section7

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#section8

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#section9

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#section10

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#section11

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#section12

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#section13

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 <script>.
  • 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#section14

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#section15

  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#section16

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

  2. In DW4. In code mode I try editing Javascript code like MouseOver, OnChange, etc, and change them to all lower case.
    They look OK but then they always revert back to their original.
    I’m trying to validate as XHTML.
    Anyone else seen this?
    Any fixes??
    email me
    jaz@mykard.com
    —
    Jaz

  3. Dreamweaver keeps rewriting my javascript events as such:
    onmouseover = onMouseOver

    this is keeps my page from validating…

    is there anyway to stop Dreamweaver from doing this?

  4. I create site models in XML, generate the site (with XSLT) and then fill in the content in a WYSIWYG (using FP2002). Now I’m trying to round-trip the content back into the XML.

    Problem: the HTML generated in FP2002 is not XHTML compliant by far, so the round-trip screws up my XML something wonderful.

    Any suggestions for a nice (cheap) page WYSIWYG for XHTML? No site features required (except maybe publishing)?

    Thanks.

  5. Dreamweaver MX trial version expired and I’ve tried everything to rejuvenate it with no luck. There is obviously some hidden file that prevents me from re-downloading a fresh trial version and the old one won’t launch anymore. Any suggestions? (I’ve tried the suggestions above for changing a trial version to full but it doesn’t seem to work once the 30 day trial version has expired)

  7. great little article this, now i don’t need to buy dwMX….oh how i like my dreamweaver 3 :)….thanks again! scott

  11. I keep finding the question, but have never found the answer. I use DW for the templates and management etc. I hand code in code view, but DW won’t leave certain attributes well enough alone.

    It keeps changing selected=”selected” back to selected

    How do I get it to stop that?

    Jennifer

  13. I’ve just read that comment tags in XHTML have to be done differently using CDATA or something – it’s still a little fuzzy. Anyway, DMX uses comment tags for its templates with no CDATA thingummy so doesn’t that mean all pages produced by a DMX template are NOT valid XHTML? Anybody know what I’m talking about?

  15. Hello,

    I was just wondering if A list a part is going to publish a guide how to make these same tweaks in DW MX 2004. Atleast the doctype doesn’t change by editing the default.html anymore. I’m using a mac with DW MX 2004.

  16. The modifications to Dreamweaver to produce valid XHTML, do they apply to Dreamweaver MX as well or only the previous versions: 4,3..?

  17. does anybody know where to get the crack for dreamweaver MX for osx?
    if you please let me know thanks

  18. Does anyone know of a program that does automatic XHTML? If there is not one out yet, is there anyone who wants some XHTML work to do? email me to get started. I have paypal and pay very well!

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

I am a creative.

by
A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career.
Career