Monday 21st of August 2017 02:38:58 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. 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 »

In other words, a floating element cannot stick out beyond the edge of its containing element, unless it's too wide to fit on its own. This prevents a situation where a succession of floated elements could appear in a horizontal line and far exceed the edges of the containing block. Instead, if a float would stick out of its containing block by appearing next to another one, it is floated down to a point below any previous floats, as illustrated by Figure 8-36 (where the floats start on the next line in order to more clearly illustrate the principle at work here). This rule first appeared in CSS2, to correct its omission in CSS1.

altogether. We'll start by considering the simple case of asmall inline element within a single line, as depicted in Figure 7-22.

Figure 7-22

Figure 7-22. A single-line inline element with a left margin

Here, if we set values for the left or right margin, they will bevisible, as Figure 7-23 makes obvious:

B {margin-left: 10px; background: silver;}
Figure 7-23

Figure 7-23. An inline element with a left margin

Note the extra space between the end of the word just before therelative URL should be interpreted with respect to the style sheet,but Navigator 4.x doesn't do this correctly, so absolute URLsmay be a better answer. Good background practices

An interesting thing about images is that they're laid on topof whatever font-weight: bold;}P {margin-left: 5em; position: relative;}<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN>laoreet dolore magna aliquam erat volutpat.</P>

While this does rely on inserting an extra element, the advantage isthat the SPAN can be placed anywhere in theparagraph and still have the result depicted in Figure 9-21.

Figure 9-21

Figure 9-21. Setting a "change bar" with absolute positioning

darker than what was inherited. If none is available, then the useragent sets the element's font weight to the next numericalvalue, unless the value is already 900, in whichcase the weight remains at 900. Thus, you mightencounter the following situations, illustrated in
Figure 5-10:

P {font-weight: normal;}P EM {font-weight: bolder;}  /* results in 'bold' text, evaluates to '700' */H1 {font-weight: bold;}H1 B {font-weight: bolder;}  /* if no bolder face exists, evaluates to '800' */