Thursday 19th of October 2017 04:18:33 PM

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:

This will leave us with the following:

<TD>navigation bar and main display</TD>

We'll turn to the sidebar first. Each set of links is grouped into a list under a main heading; these headings look different from

"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. Download the version of Super HTML-XHTML DTD Extension appropriate to your machine.
  4. Open Dreamweaver.
  5. From the “Commands” drop-down, select “Manage Extensions.”
  6. 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 »
P {border-style: solid; border-color: gray;}
Figure 7-42

Figure 7-42. Borders have many aspects

By default, a single color value will be applied to all four sides, as with the paragraph in the previous example. On the other hand, if you supply four color values, you can get a different color on each side. Any type of color value can be used, from named colors to hexadecimal and RGB values.

Figure 7-43 shows us varying shades of gray for borders. Thanks to the grayscale nature of this book, I've been

B {border-left: 10px double gray; background: silver;}
Figure 7-53

Figure 7-53. An inline element with a left border

As expected, Figure 7-53 shows a little extra space on the left side of the inline element and no extra space above or below it.

With borders, just as with margins, the browser's calculations for line-breaking are not directly affected by any boxstyle is set, then the value of border-widthdefaults to medium , not zero. The exact width ofmedium will depend on the user agent'sprogramming, but a common value is 2 or 3 pixels.

8.2.2. Horizontal Formatting

In contrast

P {background-color: gray;}
Figure 6-14

Figure 6-14. Background gray for paragraphs

If you wish the color to extend out a little bit from the text in the element, then you need only add some padding to the mix, with the result shown in Figure 6-15:

P {background-color: gray; padding: 10px;}
Figure 6-15

Figure 6-15. Backgrounds and padding

(Padding will be discussed in detail in Chapter 7, "Boxes and Borders".)

The background color of just about any element can be set, from

Figure 11-17 shows a side-by-side comparison of theoriginal article and its online cousin.

Figure 11-17

Figure 11-17. A comparison

Furthermore, if we view the web page using a browser without stylesheets, it will come out looking like Figure 11-18.It may not be as pretty, but it's still quite readable.

Figure 11-18

Figure 11-18. The styled page without any styles