Standards & Accessibility With Dreamweaver

Virginia DeBolt & Emily Lewis

Wednesday, May 6, 2009

About the Presenters

Virginia DeBolt

Emily Lewis

  • Web Designer/Front-end Developer for Pitney Bowes Business Insight
  • Develops and maintains public sites, intranet, electronic newsletters and emails for marketing campaigns
  • Specializes in semantic XHTML and CSS, accessibility, usability and microformats
  • Writes about web design (and other topics) at A Blog Not Limited

You'll Learn

What Are Web Standards?

What Is Web Accessibility?

Web Standards & Accessibility Go Hand–in–Hand

Getting Started With Standards: CSS for Presentation

Separation of content from presentation means using CSS

Demonstration: Dreamweaver's CSS-based Templates

Screenshot of Dreamweaver's CSS templates

Getting Started With Standards: CSS for Presentation

Demonstration: Dreamweaver's CSS Dialog Window

Screenshot of Dreamweaver's CSS dialog window

Getting Started With Standards: CSS for Presentation

Demonstration: Dreamweaver’s CSS Panel for Creating/Editing Styles

Screenshot of Dreamweaver's CSS panel

Getting Started With Standards: Semantics

Semantic markup and CSS-naming conventions convey meaning rather than presentation

Demonstration: Dreamweaver's CSS Panel to Create/Edit class & id Names

Screenshot of Dreamweaver's CSS panel

Getting Started With Standards: Semantics

Demonstration: Dreamweaver's Code View to Write Your Own Semantic Markup

Screenshot of Dreamweaver's Code View

Getting Started With Standards: Semantics

Demonstration: Beware of Non-semantic Markup

Screenshot of Dreamweaver's Properties panel

Getting Started With Standards: Validation

Demonstration: Dreamweaver's Markup Validation Tool

Screenshot of Dreamweaver's markup validation tool

Getting Started With Standards: Validation

Demonstration: Dreamweaver's Markup Validation Results

Screenshot of Dreamweaver's markup validation results

Getting Started With Standards: Validation

Demonstration: W3C CSS Validation Service

Screenshot of W3C CSS validation tool

http://jigsaw.w3.org/css-validator/

Getting Started With Standards: Device Independence

Demonstration: Dreamweaver's Check Page Tool

Screenshot of Dreamweaver's Check Page tool

Supporting Accessibility With Dreamweaver: Preferences

Demonstration: Dreamweaver's Accessibility Preferences

Screenshot of Dreamweaver's accessibility preferences

Supporting Accessibility With Dreamweaver: Resources

Demonstration: Dreamweaver's Built-in Accessibility Reference

Screenshot of Dreamweaver's accessibility reference

Supporting Accessibility With Dreamweaver: Resources

Demonstration: Adobe's Accessibility Resource Center

Screenshot of Adobe Accessibility Resource Center

http://www.adobe.com/accessibility/

Supporting Accessibility With Dreamweaver: forms

Demonstration: Dreamweaver's form Interface

Screenshot of Dreamweaver's form interface

Supporting Accessibility With Dreamweaver: Images

Images must have good alt text for supporting screen readers, mobile devices and even users with slow internet connections who may have images disabled.

Demonstration: Dreamweaver's Image Tag Accessibility Panel

Screenshot of Dreamweaver's image tag accessibility panel

So Much More, So Little Time

Great resources to help you learn more about standards and accessibility, as well as Dreamweaver:

Questions? Comments?

Contact Virginia

Contact Emily