Build Your Own Standards Compliant Website Using Dreamweaver 8

# Introduction * Who Should Read This Book? * What s In This Book? * Further Reading * The Book s Website o The Code Archive o Updates and Errata * The SitePoint Forums * The SitePoint Newsletters * Your Feedback * Acknowledgements # What are Web Standards? * Web Standards Defined * Who Needs Web Standards? o Web Designers and Developers o Browser Manufacturers o Authoring Tool Manufacturers o Web Users * Using Web Standards o Creating a Valid XHTML Document o Validating your Document o Using Valid CSS o Validating for Accessibility o Applying a Semantic Document Structure o Separating Presentation from Document Structure * Summary # Site Planning and Setting up for Development * The Code Spark Site Design o Features of the Code Spark Website o Designing the Site * Structuring the Site o Dealing with Common Elements * Setting up a Web Server o Installing Apache o Testing SSI o Using IIS as your Local Web Server * Hosting your Site * Setting up Dreamweaver o Your Workspace o Setting Preferences * Summary # XHTML and Semantics * What is XHTML? o XML o XHTML * What Makes a Valid XHTML Document? o The DOCTYPE o The html Element o The head Element o The body Element * XHTML and HTML: the Differences o Quoting Attribute Values o Closing all Empty and Non-empty Elements o Avoiding Minimizing Attributes o Writing Elements and Attributes in Lowercase o Nesting Elements Properly o Using id Instead of name to Identify Elements * Why use XHTML? o Creating Clean Markup o Making Code Easier for Machines to Process o Boosting the Portability of Content o Allowing Integration with other XML Applications * XHTML in Dreamweaver o Creating New Pages o Converting Existing Pages * Semantic Markup o Using Elements Semantically o Semantic Markup and Text-Only Devices * Summary # Constructing the Document * The New XHTML Document * The Main Content Area o Linking to Other Tutorials o Displaying Browser Statistics * Other Page Elements * The Heading and Main Navigation o The Sidebar * Validating your XHTML o Validation in Dreamweaver * Summary # CSS and Dreamweaver * Why CSS? o CSS Basics * Your Basic Toolkit o Setting Preferences for CSS o The Page Properties Dialog Box o The CSS Panel o The Property Inspector o Editing CSS in Code View o Sample CSS Styles o CSS Page Designs o Design Time Style Sheets o The Style Rendering Toolbar o CSS "Layout Blocks" * Summary # Constructing the Layout with CSS * The Homepage Document * Defining the Basic Layout o The Header o The Content Area o The Navigation Area * Creating CSS Rules o The Body Area o Styling the Header div o The Top of the Header Area o The Accessibility Buttons o The Main Navigation o Styling the Navigation Links o The Properties Pane of the CSS Panel * The Content Area o The Content Sections o Using Dreamweaver Visual Aids o The Headings o The Contents of the Homepage Boxes o Styling Tables o The Browser Statistics Section * The Sidebar o The Search Box o The Topics List o The Articles Lists o Rounding Out the Sidebar * CSS Validation and Browser Testing o Validating the Code o Browser Testing * Summary # Accessibility * Will Considering Accessibility Stop us Creating Exciting Designs? * Which Users Benefit? * Which Guidelines are we Working to? o The Web Accessibility Initiative (WAI) o WACG Checkpoint Priorities o Legislation * Dreamweaver Tools for Accessibility * Accessibility in Practice o Priority 1 o Priority 2 o Priority 3 * Accessibility Validation o The Dreamweaver Accessibility Validator o Cynthia Says: Online Validation * Summary # Building the Site * Creating the Includes o The First Include: head.html o The Second Include: top.html o The Final Include: bottom.html * Creating The Base Page * The Tutorial List Page o Creating the Lists o Adding to the CSS * An Example Tutorial Page o Adding CSS for the Tutorial Page o The Author Image o The Author Credit and Date o The Introduction Text o Inline Images o Quotes * Highlighting the Current Section in the Navigation Area * The Sitemap o Marking up the Sitemap o Styling the Sitemap with CSS * Summary # Forms and Third-party Services * The Contact Form o Marking up the Form o Laying out the Form with CSS o Client-side Validation Using Dreamweaver o Submitting the Form * Adding a Search Facility o Creating an Atomz Account o Adding the Search Form to Your Site o Editing the Atomz Templates * Summary # Alternate Style Sheets * Accessibility Controls o Text Resizing o Switching Style Sheets o A Low Graphics Layout * Media Types o Print Style Sheet * Final Tasks o Final Validation * Summary # Index