This workshop is, first and foremost, about building Standards Compliant Web pages and sites that do not rely on tables (or frames) for presentation. Efforts to change habits of controlling the visual presentation of Web pages with tables to XHTML + CSS table-less design have been motivated, in part, by Web developers wanting to remove laborious, endless tweaking of a snarl of tags from their day-to-day tasks. An even more compelling reason for developing with XHTML and CSS is the assurances of working in compliance with standards “which ensure simple, affordable access to web technologies for all” [ WASP ].
While the content of this workshop is introductory level, the content will be equally useful for anyone who is responsibile for rebuilding a table-based design for greater accessibility.
Outline:
- Module 1:
- Gathering and Getting to Know Your Tools; Liquid/Fluid Design; Standards Compliance; Accessibility; and DOCTYPEs and Validation.
- Module 2:
- Structured Documents; Separating Content from Presentation; CSS Selectors and Specificity.
- Module 3:
- The Box Model.
- Module 4:
- The Box Model (continued) and Positioning.
- Module 5:
- Cascade vs. Inheritance.
- Module 6:
- Styling for Different Media; Forms; Design Inspiration;
Tools:
Text Editors:
The simple text editors, such as Notepad (Windows) and TextEdit (Mac), which are installed on most computers will be used for writing both XHTML and CSS. Anyone who has written or edited a table-based Web page with these text editors may know how cumbersome those projects are with these simple tools. Table-less designs are a completely different experience!
Browsers for Testing:
If you are developing your Web pages on a Windows PC, you will likely have Internet Explorer (IE6 or IE7) installed. Safari is usually the default browser installed on Macs. Mozilla Firefox, an open-source browser that is gaining ground as the preferred browser for both platforms, should also be installed for testing your documents. Firefox Developer Tools will be used for most exercises in this workshop. The first week will be used to install, set-up, and test-drive the tools you'll need for the workshop. But, if anyone decides to install tools before the workshop experiences difficulties, you'll likely find answers in the Troubleshooting section of the documentation pages.
- IE 6 IE7 (Windows)
- Netscape 8.1.2 and 7.2 (Windows and Mac, respectively)
- Firefox (both)
- Safari (OS X)
- Web Developer Tools for Firefox
Text:
The required text for this workshop is: Head First HTML with CSS & XHTML by Elisabeth Freeman, Eric Freeman, published by O'Reilly Media (December 1, 2005).
Several people have told me they enjoy the chatty, informal, narrative style of this book. Personally, I find all that off-putting, but, the content is solid, well organized, and, most-importantly, at all times instructing to current standards. If you find it too cute, patience will be repaid with good content. If you love the retro 50s, comic book feel, yeah!
Additional readings will be made available depending on individual and group interests.
Additional Information:
Feel free to Contact Me with any questions. Please include "GSLISCE" somewhere in the subject line.