left margin of 10%. In a sufficiently narrow browser window, the leftmargin of the column could end up being much less than 2.5em. If thathappens, then the images could get pushed far enough to the left thatthey go partway "offscreen." Mixingunits like this, evenindirectly, can be risky. A better choice might be this:

IMG{float: left; margin-left: -10%;}

This will allow the images' left margins to scale along with

Monday 22nd of May 2017 09:26:09 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

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. 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 »
color to be applied to all H2 elements that are subsection headings. It would be much better to pick a class name like subsec or even sub-section. Both of these names have the advantage of actually meaning something -- and, furthermore, of being independent of any presentational concepts. After all, you might decide later to make all subsection titles dark red instead of dark blue, and the statement H2.dkblue {color: maroon;} is a little silly.

This will center all paragraphs within their parent elements, asshown in Figure 8-15.

Figure 8-15

Figure 8-15. Centering an element with automatic margins


As of this writing, only Internet Explorer 4.5 and 5 for theMacintosh and Opera 3.6 will center elements usingauto margins.

recall the earlier discussion about how colors aren't alwaysthe same across different operating systems, user agents, and soforth. There is one way to partially beat this problem, although onceagain it means restricting your color choices. There is a set of 216colors that are considered "web-safe," which means theyshould look the same on all computers and browsers, without anydithering or color-shifting. Note that I say"should" -- this is not a guarantee. It generallyseems to work, however.

Since, in this circumstance, the author's styles will outweigh the reader's styles -- that's how it is under CSS1, anyway -- then the new style sheet for this document will be as follows (shown in Figure 6-21):

/* combined styles */
BODY {color: black; background-color: black;}
Figure 6-21

Figure 6-21. Black on black

Not exactly readable, is it? Only the hyperlinks are visible, thanks to their default styles. That's why it's always a good collapsed. If you somehow manage to have two block-level elements next to each other, and each has a margin, the margins will not collapse. The easiest way to illustrate this principle is to set margins on two images and then have them appear on the same line, as they do in Figure 8-6:

<IMG SRC="test1.gif" STYLE="margin: 5px;" ALT="first test">
<IMG SRC="test2.gif" STYLE="margin: 5px;" ALT="second test">

(Note that the images in Figure 8-6 are actually inline elements, but they effectively demonstrate that horizontally