Monday 19th of March 2018 08:01:04 AM

CSS Style Guide

XHTML: Authoring Tips & Tools (including Dreamweaver)

On this page, you’ll find tips on learning to “think in XHTML” by focusing on document structure. You’ll also find tools to simplify your work process, whether you author your pages by hand in an HTML editing environment such as Allaire HomeSite, or work with Macromedia’s Dreamweaver.


Tips: Structure your pages

XHTML encourages logical document structure. When writing text for the web, or when converting existing text documents into web pages, think in terms of traditional outlines:

<h1>My Topic</h1>

<p>Introductory text</p>

<h2>Subsidiary Point</h2>

<p>Relevant text</p>

Avoid using deprecated HTML elements such as <font> tags to simulate a logical structure where none exists:

<font size="7">My Topic</font>

Likewise, if you find yourself authoring thusly ...

item <br />
another item <br />
a third item <br />

... you should probably be using an ordered or unordered list instead:

<li>another item</li>
<li>a third item</li>

Similarly, prefer <strong> to <b>, <em> to <i>, and so on. Most desktop browsers will display <strong> as <b>, creating the visual effect you seek without undermining the document’s logical structure.

Using structural markup such as <strong> also protects those using text browsers and alternative devices from downloading markup that is meaningless in their browsing environment. (What does <b> mean to a Braille reader?) See the Style Guide’s section on XHTML Accessibility Tips for more on this important topic.

If you’re concerned about the appearance of your web pages, remember that Cascading Style Sheets separate presentation from structure, allowing you to style any element as you wish.


Tools: Simplify your work process

Though transitioning from HTML to XHTML is not difficult, converting dozens (or hundreds) of ill-formed HTML pages to well-formed XHTML pages can be a chore. Several tools can help you:

Converting HTML documents en masse

The free W3C tool Tidy can automatically convert hundreds or even thousands of web pages from uppercase to lowercase tags, making it easy to update even very large sections of sites.

In addition, Tidy can examine web pages offline and correct most errors automatically.

Dreamweaver 4 & XHTML

There is every reason to believe that upcoming Dreamweaver MX will enable developers to create valid XHTML 1.0 Transitional pages. However, Dreamweaver versions 4 and earlier do not automatically generate valid XHTML. There are a few things you can do to make Dreamweaver 4 write XHTML.

Changing the Dreamweaver Default Template

To edit the default template in Dreamweaver, go to C:\Program Files\Macromedia\Dreamweaver 4\Configuration\Templates\Default.html, and change the DTD to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" ">

This will set the XHTML DTD on all new pages. This is also a good opportunity to set other defaults such as your link to the proper CSS files.

Configuring Dreamweaver

If you are adept enough at editing JavaScript, customize the software to close those pesky non-closing elements.

Go to C:\Program Files\Macromedia\Dreamweaver 4\Configuration\Objects\Common open the file Image.js and modify line 21:

"return '<img src="' + newURL + '">';"

to this:

"return '<img src="' + newURL + '" />';".

Try the same with other files like HR.htm. To change <br> to <br />, open Line Break.htm in Objects\Characters. In Objects\Forms, adjust all the form fields, and in Objects\Head, close meta tags.

See Modifying Dreamweaver to Produce Valid XHTML at A List Apart for a more complete discussion. After you read this article, go straight to XHTML modifications for Dreamweaver by Francois Jordaan and download about twenty modified files. We thank him for sharing.

Converting your pages into XHTML

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 zip download. When uncompressed, Dreamweaver Extension Manager will open it automatically. The tool will:

It also has a translator that should prevent Dreamweaver from choking on an <?xml?> declaration. It will also:

Remember to make a backup copy of the page before you work with this new tool. A bit of fiddling may be required before you get the hang of it.

Working With the Super HTML-XHTML DTD Dreamweaver Extension

This handy little extension allows you to change the DTD of a page with a click or a command stroke. 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 Macromedia Exchange site and do a search on “XHTML DTD.” (If the site were not in frames, we could just link to that extension from here.)
  2. Follow the link for the Super HTML-XHTML DTD Extension.
  3. Since the structure of the XML document can be specified in DTDs they provide a simple way to make it easier to exchange XML documents that conform to a DTD. For example, if two software systems need to exchange information, then if both of the systems conform to one DTD, the two systems can process information from each other. DTDs are not as powerful as some kind of schema architecture for XML, they don't support typing, subclassing, or instantiation mechanisms that a schema architecture must have.

    DTDs are a simple way to make sure that 2 or more XML documents are of the same "type". Its a very limited approach to making "typed" XML documents shareable across systems. In the future some kind of schema system will be proposed by the W3C that should allow typing, instantiation and inheritance of information (in XML).

    XML enables interoperability

    All of the advantages of XML outlined so far all make interoperability possible. This is one of the most important requirements for XML, to enable disparate systems to be able to share information easily.

  4. Download the version of Super HTML-XHTML DTD Extension appropriate to your machine.
  5. Open Dreamweaver.
  6. From the “Commands” drop-down, select “Manage Extensions.”
  7. Browse to the Super HTML-XHTML DTD Extension file that you downloaded and double–click it. The extension should now be installed.
Preparing Web Pages

Once you have the Super HTML-XHTML DTD Extension working you can easily change doc types in your documents. To write valid XHTML documents:

  1. Go to the “Commands” drop–down menu.
  2. Select “Dreamwarrior” then “Super HTML-XHTML.”
  3. A dialog box will open, and you should select the XHTML 1.0 Transitional option.
  4. Remember to check “Add xmlns and lang: English attributes in <html>.”
  5. Do not select “xml version = 1.0 encoding =” because it will generate the XML prologue (<?xml>) that, alas, causes problems in many browsers.

This will only give you the proper XHTML DTD. It will not convert your markup to XHTML. So if you change the DTD and neglect to change the markup, your page will not validate.


Managing your Dreamweaver Preferences

Make sure that you set up Dreamweaver to produce markup that is in lowercase (<p>), and that the default file extension is “.html” and not “.htm.”

  1. Go to Edit > Preferences (or Ctrl/Cmd U).
  2. Select “General” from the Category menu at left.
  3. Under File Options, check the “Add Extension when Saving:” and fill the text box in with “.html.”
  4. Select “Code Format” from the Category menu.
  5. Under “Case for Tags:” and “Case for Attributes” select “lowercase.”

Keep Doing Your Research

Developers who use Dreamweaver 4 and earlier should continue to visit Macromedia’s Dreamweaver Exchange site, and search for XHTML-related extensions and other tips.

Naturally, the library does not maintain Macromedia’s Dreamweaver Exchange site, so these extensions may have been renamed or deleted—or may have become outdated—by the time you read this page.

« XHTML Section Index | XHTML Accessibility Tips »
easier to see. The look of a border style is always based in some way on the color of the border, although the exact method may vary between user agents. For example, Figure 7-30 illustrates two different ways of rendering an inset border.

Figure 7-30

Figure 7-30. Two valid ways of rendering inset

So let's assume that you want to define a border style for images that are inside a hyperlink. You might make them outset, so they have a "raised button" look, as depicted in

1.4.5. CSS Comments

/* These are my styles! Yay! */

CSSalso allows for comments, but it uses a completely different syntaxto accomplish this. CSS comments are very similar to C/C++ comments,in that they are surrounded by /* and*/:combinations as there are colors, but we can't exactly show them here -- being stuck in grayscale as we are -- however, we'll try to give you some idea of what you can do. Here are a few ideas to get you started.

This is a simple style sheet, as shown in Figure 6-19:

BODY {color: rgb(0%,50%,0%); background-color: #CCFFCC;}
H1, H2 {color: yellow; background-color: rgb(0,51,0);}
Figure 6-19

Figure 6-19. The results of a simple style sheet