WSU Google Search:

Formatting Numbers in Ordered Lists
Ordered lists are great for...numbering your lists. For instance, look at this great list of some Web resources:

Nice job at indenting, even when an item wraps to the next line. The problem, you'll note, is that while I've formatted my text to be a nice sans-serif brown (and bolded to boot), the numbers of the list are serif, black, and not bolded. Some Web page software, including Dreamweaver, does not apply text formatting to the actual list.

The answer: Cascading Style Sheets. Note in the following list, how the numbers and text are formatted identically.

1. Search Engine Watch (search engine info)
2. WebDeveloper.com (for advanced Web programming)
3. WebMonkey (Great for beginning Web designers, with some advanced tips as well)
4. Web Pages That Suck (Learn from the mistakes of others, and your page won't be nominated!)

This was done by redefining the <OL> HTML tag with CSS. The code in the header tag looks like this:

<style type="text/css">
<!--
ol { font-weight: bold; color: #990000; font-family: Arial, Verdana, Helvetica, "Sans Serif"; font-size: x-small}
-->
</style>

Note the font size is set as x-small. This does not conform to the relative font size preferred for accessibility. Apparently, Cascading Style Sheets do not allow relative sizes. So be aware of this limitation when using CSS.

Is there an easy way to do this in Dreamweaver?
I'm so glad you asked! Go to Window > CSS Styles. Click the little plus sign in the lower right of the CSS Styles window to create a new style. From the "Type" menu, select "Redefine HTML tag." Select the tag from the menu above, in this case, OL (for "ordered list").

Under "Define in," decide whether you want an external style sheet (a separate file that can be called by multiple HTML files), or whether you want to include the style in "This Document Only." The former choice is good for cases when you want a number of HTML pages to display the HTML similarly, while the latter choice says, "This change is good for this document only." The latter is also more compatible with a wide number of browsers.

Once you are finished with this window, say "OK," and a formatting window displays. Format the tag to your heart's content. Every instance of the tag will display identically on the page (or on pages that use an external style sheet for the tag).

Have a Web
question?
Ask Bob Hoffmann