Sunday 24th of September 2017 01:32:20 AM

CSS Style Guide

Before we get there, however, there are a few more things to cover.Remember that absolutely positioned boxes can have backgrounds,margins, borders, and padding; styles can be applied within them,just as with any other element. This can make them very useful forthe creation of sidebars, "stickynotes," and other such effects. One example is the ability toset a "change marker" on any paragraphthat has been edited. This could be done using the following stylesand markup:

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:

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

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 »
A:link IMG {border-style: outset; color: silver;}

As Figure 7-32 shows, the border is now based on the light gray silver, since that's now the foreground color of the image -- even though the image doesn't actually use that color, it's still passed on to the border. We'll talk about another way to change border colors in a later section.

Figure 7-32

Figure 7-32. Changing the color of the border

-15px . This image is placed inside aDIV which has no padding, borders, or margins. Theresult will be as shown in Figure 8-42.

Figure 8-42

Figure 8-42. Floating with negative margins

Contrary to appearances, this does not technically violate therestrictions on floated elements being placed outside their parentelements. Here's the technicality that permits this behavior: aclose reading of the rules listed earlier will show that the outeredges of a floating element must be within the element's