Working Smart with Documents in Dreamweaver

[ LiB ]

How do you make the most of your documents in Dreamweaver? Make sure they're valid. Make sure they will work properly in all browsers that you think your visitors will be using. Finally, make sure they're accessible.

Checking Page Validity

Validation is an important concept in the web development world. Validation is the process of checking the code of an HTML, XML, or XHTML document to make sure it is properly coded (with correct syntax and no nonstandard tags or attributes) before it has to be displayed in a browser. Part of the reason today's browsers are so large and unwieldy is that they are programmed to deal with all sorts of invalid code, even to guess how a page should be presented if the syntax or elements are incorrect. In an ideal browsing world, each page's code would be checked for validityvalidatedbefore the browser tried to display it; invalid pages would not display at all. The browsers could be lean and mean because they would be able to predict that only correctly coded pages would ever come their way.

If you're just getting started in web design, or if you're a professional on tight deadlines, you can put off worrying about validation for now. None of the major browsers requires ityet. But eventually, they all will.

Validating Document Markup

Dreamweaver offers a validation service for all HTML documents.

To check the validity of a document, open the document you want to validate and choose File > Check Page > Validate Markup. After a moment or two, the Results window opens, showing the Validation tab, with your document's report card showing (see Figure 3.4).

Figure 3.4. Validating an HTML document in Dreamweaver.

You can also validate the current document or the current site by opening the Results window (Window > Results), pressing the green Validate button in the upper-left corner, and choosing Validate Document or Validate Entire Site (see Figure 3.4). If you have files selected in the Site panel, the Validate menu will also include the option Validate Selected Files in Site.

Determining Validation Settings

Validation involves checking your document(s) against a standard; there are all sorts of standards out there, from HTML 2.0 to XHTML strict and beyond. To see what standard Dreamweaver is using to validate your documents, and to change the standards as needed, choose Edit > Preferences > Validator, or, in the Results window, click the Validate button and choose Settings. Both of these commands open the Preferences > Validator dialog box (see Figure 3.5).

Figure 3.5. The Preferences dialog box showing the validation settings.

Validating XML

If you're working with any kind of XML (including XHTML), validation is crucial. Browsers (and other interpreters) will generally not process invalid documents. To validate an XML document, choose File > Check Page > Validate as XML. Note that because XHTML documents are really XML, you can also use this command to test their validity.

Checking Against Target Browsers

Okay, your pages all validate, so why don't they function right in your audience's favorite browser? Browsers have quirks and don't always adhere to standards. Most web designers end up memorizing their most unfavorite browser quirks and work around them. But not all of us can memorize everything. For us, Dreamweaver comes with a database full of information about which browsers support what.

Automatic Checking

Target browser checking is so important that Dreamweaver automatically checks every page you open as soon as you open it, and displays the Browser Target Check icon in the Document toolbar (see Figure 3.6). If your document passes all checks, you'll see an OK icon; if not, you'll see an alert icon. To see a list of problems, click the Browser Target Check icon and choose Show All Errors, or open the Results window (Window > Results) and bring the Target Browser Check tab to the front (see Figure 3.7). All items listed with yellow alert icons are warningsthey aren't supported by one of your target browsers, but that shouldn't cause problems on the page. All items listed with red stop-sign icons are errors; they might cause some unpleasant results in the target browser.

Figure 3.6. The Target Browser Check display in the Document toolbar.

Figure 3.7. The Results window showing target browser warnings and errors.

If you don't want your pages checked automatically, click the Target Browser Check icon in the toolbar and deselect the Auto-Check on Open option.

Manual Checking

In addition to this automatic checking, you can perform document- or site-wide browser checks any time you like. To check the current document, click the Target Browser Check icon in the Document toolbar and choose Check Browser Support. To check documents or a site, open the Results Window (Window > Results), bring the Target Browser Check tab to the front, and click the green button (see Figure 3.8). Use the drop-down menu in the Results window to display document-wide or site-wide alerts and errors.

Figure 3.8. Using the Results window to check browser support.

Determining Which Browsers to Check For

Target browser schecks are really meaningful only if you choose which browsers are important to you. Do this by clicking the Target Browser Check button in the toolbar and choosing Settings. In the dialog box that appears, select which browsers and versions you want to check against. Then click OK to close the dialog box.

Making Your Pages Accessible

Your pages preview beautifully in the major browsers. They pass the proper validation tests, so you know you're being a good coding citizen. But are they accessible? Accessible web pages are designed to be usable by people with visual, auditory, motor, or other disabilities . This includes people using screen readers and other special software and hardware to browse the Internet. For the World Wide Web to be truly universal, it needs to be accessible.

Accessibility Standards

Various standards exist to specify exactly what makes web pages accessible. The most important of these for you, the web designer, are these:

Section 508 Section 508 of the Federal Rehabilitation Act states that any website for use by government employees or for the purpose of disseminating government information must comply in some very specific ways with the Americans with Disabilities Act. Though Section 508 itself applies only to federal governmentrelated sites, many state governments have adopted it for websites under their jurisdiction; many corporations have also voluntarily adopted its standards.
W3C Web Accessibility Initiative (WAI) The World Wide Web Consortium (W3C) has created a detailed set of prioritized rules for accessibility. Many of these match the Section 508 rules, but this standard goes beyond Section 508.

How can you learn more about these accessibility standards? Your best friend for accessibility education in Dreamweaver is the Reference panel. Open this panel and, from the Book drop-down menu, choose UsableNet Accessibility Reference. You now have at your disposal all sorts of information on different standards and how to apply them (see Figure 3.9).

Figure 3.9. The Reference panel, showing accessibility information from UsableNet.

To learn more about applying Section 508 and WAI rules, see the sections throughout this book's chapters on making different page elements accessible.

For more information on Section 508, visit www.access-board.gov/sec508/guide/1194.22.htm. For more on the W3C WAI, visit www.w3.org/WAI/. For information on accessibility in general, visit www.usablenet.com.

Dreamweaver Accessibility Options

To help you create accessible web pages without compromising your efficiency, Dreamweaver MX 2004 gives you quick access to each of your page element's accessibility attributes. To enable accessibility attributes, choose Edit > Preferences and, in the dialog box, go to the Accessibility category (see Figure 3.10). The list of options represents different page elements that have special accessibility attributes in HTML. For each item you select, every time you click an object to insert that object, its dialog box will include those special attributes. (For more on accessibility options for individual page elements, see the accessibility sections in subsequent chapters throughout this book.)

Figure 3.10. The Preferences dialog box showing the Accessibility settings.

Checking Accessibility

Just as you can check validity and browser support, you can check your pages and sites for accessibility. Dreamweaver offers various tools for this.

To run an accessibility report on your current document or site, do this:

Choose Site > Reports.
When the Site Reports dialog box opens, choose Accessibility and choose whether to run the report on the current document, on the entire site, or on selected files in the site.
Before running the report, click the Report Settings button and choose which standards to check against. Click OK to close this dialog box.
Click Run to run the report.

Dreamweaver processes your pages and displays its results in the Results window. Figure 3.11 shows this process happening.

Figure 3.11. Running a site-wide accessibility report.

[ LiB ]