Home arrow Web Standards arrow Page 2 - Web Standards in Dreamweaver, Part 1
WEB STANDARDS

Web Standards in Dreamweaver, Part 1


The first half of this chapter focuses on the use of XHTML and CSS when working in Dreamweaver. Discover why developing in XHTML instead of HTML is a good idea and how to start working in valid XHTML Transitional. Some basics of CSS design are also covered. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, Rachel Andrew and Kevin Marshall, published by Apress, 2004, ISBN: 1590593480.)

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
August 04, 2004
TABLE OF CONTENTS:
  1. · Web Standards in Dreamweaver, Part 1
  2. · The Rules of Writing XHTML
  3. · Empty Elements
  4. · Lists
  5. · XHTML in Dreamweaver MX 2004
  6. · Authoring Valid CSS
  7. · The Basics of CSS

print this article
SEARCH DEVARTICLES

Web Standards in Dreamweaver, Part 1 - The Rules of Writing XHTML
(Page 2 of 7 )

For anyone with a reasonable understanding of HTML, XHTML is not difficult to learn, and of course, Dreamweaver MX will help you all the way. All you need to do is follow a few simple rules that are common to all XML (and therefore XHTML) documents.

Document Type Declaration

An XHTML document must validate against one of the following three XHTML DTDs:

• XHTML Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• XHTML Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• XHTML Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

As you will see later in this chapter, XHTML Strict does not allow any deprecated elements or framesets, XHTML Transitional supports deprecated elements (those elements that have been flagged for removal in future versions of [X]HTML) but not frames, and XHTML Frameset is the version that supports deprecated elements and frames. There must be a DOCTYPE declaration in the document above the <html> tag, and it must reference one of the XHTML DTDs. Dreamweaver MX inserts the XHTML Transitional DTD by default when you create a document with the Make document XHTML compliant check box selected in the New Document dialog box, as shown in Figure 2-1. However, if you are creating a frameset, it will insert the Frameset DTD.

 dreamweaver

Figure 2-1. The New Document dialog box

Today’s web contains a varied mix of web sites; some are written to the new standards of HTML 4.01 or XHTML and others are a mixture of HTML versions utilizing browser-specific tags and quirks for specific effects. In order to handle this, the latest browser releases use the DOCTYPE to decide whether the document’s author expects a standards-compliant browser to render the page or whether the page was written for older, non–standards-compliant browsers and might rely on quirky, non-standard behavior. DOCTYPE “sniffing,” as it has come to be described, relies on the fact that most of these quirky documents either have no DOCTYPE or use an old DOCTYPE.

Using any of the XHTML examples shown earlier will cause modern browsers to switch into standards-compliant mode and render your pages relatively close to the W3C specifications. Please note that using the XML declaration or prolog (<?xml version="1.0" encoding="UTF-8" ?>) at the top of your document will switch Internet Explorer 6 back into Quirks mode, causing IE 6 to assume that you want to display your pages as they would appear in older versions of browsers, whereas Netscape 6+ and Mozilla will display your pages in a standards-compliant manner. This was added in the previous version of Dreamweaver, so if you want to work to standards-compliant mode, the best advice is to remove it. Your pages will still be valid XHTML documents without it.

If you are still working in HTML, you can also work in standards-compliant mode by using a complete HTML 4.01 DOCTYPE (that contains a URL).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 -> Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

If you use an incomplete DOCTYPE (like the following one) or no DOCTYPE at all, IE 6, Mozilla, and Netscape 6 will assume that you want your pages to look as they did in older versions of browsers and revert to their Quirks mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Quotation Marks

All attribute values must be enclosed in quotation marks. In the following <img> tag, the height and width attributes are incorrectly defined:

<img height=100 width=300 alt="my logo" src="logo.gif" />

Here is the correct way to do it:

<img height="100" width="300" alt="my logo" src="logo.gif" />

Although previous versions of Dreamweaver tended to quote attributes correctly, you may find that code snippets that you or other developers on your team use may not be as carefully written. Selecting Commands -> Clean up XHTML will add quotation marks where they are needed in your document.

Case Sensitivity

Element and attribute names must be in lowercase. Both of the following lines are incorrect:

<IMG HEIGHT="100" WIDTH="300" ALT="my logo" SRC="logo.gif" />
<img HEIGHT="100" WIDTH="300" ALT="my logo" SRC="logo.gif" />

Here is the correct XHTML:

<img height="100" width="300" alt="my logo" src="logo.gif" />

If you have always written your HTML tags in uppercase to easily differentiate between tags and content, you may find this change difficult at first. JavaScript event handlers such as onclick or onmouseover must also be written in lowercase.

The following JavaScript is incorrect:

onMouseOver="MM_swapImage('img1','','i/button01b.gif',1)"

Here is the correct way to do it:

onmouseover="MM_swapImage('img1','','i/button01b.gif',1)"

When working with an XHTML document, Dreamweaver MX will generate lowercase code, including JavaScript. If you are working in HTML, you can choose whether to use uppercase or lowercase for HTML tags in the Preferences dialog box. However, it is not a bad idea to begin to work in lowercase—even in HTML— because it will be necessary in the future.

Closing Tags for Nonempty Elements

A nonempty element is a tag that contains something between the start tag and the end tag. Some HTML elements can be written without the closing tag; for example, the closing </p> tag of the paragraph element is optional and therefore omitted by many HTML authors. In XHTML however, all elements must be closed.

The following, although valid in HTML, is incorrect in XHTML:

<p>This is some text formatted in a paragraph.

<p> This is the second paragraph.

Here is the XHTML way of marking up the same text:

<p>This is some text formatted in a paragraph.</p>

<p> This is the second paragraph.</p>

Dreamweaver MX closes all nonempty elements whether you are working in HTML or XHTML, and will add closing tags when you run the Clean up HTML command.

This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.

Buy this book now.


blog comments powered by Disqus
WEB STANDARDS ARTICLES

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials