XHTML by Example: A Hybrid Layout (Part I)
- Benefits of Transitional Methods Used in These Chapters
- Basic Approach (Overview)
- First Pass Markup: Same as Last Pass Markup
This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter and the two that follow it form a tight little unit. In this chapter, we'll roll up our sleeves and apply what we've learned about XHTML thus far to mark up a real-world design project. The markup we create will be partly structural, partly transitional, and fully standards-compliant. In Chapter 9, "CSS Basics," we'll cover Cascading Style Sheets (CSS) basics for beginning and intermediate users. Finally, in Chapter 10, "CSS in Action: A Hybrid Layout (Part II), we'll learn still more about CSS while using it to complete our project. This "teaching by doing" business is not unlike learning to swim by being tossed into deep, cold water, although we prefer to think of it as picking up French by visiting Paris. For good measure, as we build this project, we'll start learning how to incorporate accessibility into our markup (and hence, into our sites).
Benefits of Transitional Methods Used in These Chapters
In this chapter, we'll begin crafting a hybrid, transitional layout combining traditional (but here, streamlined) table layout techniques with structured textual markup and accessibility enhancements. The techniques used in this project and explained in these three chapters are ideal for libraries and other public institutions, along with small companies and any other organization that seeks to do the following:
Manage large amounts of content on a limited budget
Support a wide range of browsers and devices
Conserve visitors' bandwidth (and their own)
Begin the transition to web standards with publishing methods that are reliable, cost-effective, and easy to implement
Style Sheets Instead of JavaScript
By the end of these three chapters, we will have produced a standards-compliant template for the i3Forum site [Figure 8.1]. The final templates created in these chapters can be viewed on the Happy Cog staging server at http://i3.happycog.com/. The finished site, produced by means of these templates, is located at http://i3forum.com/.
)
Figure
8.1 The finished template, as it will appear when the work explained in
Chapters 8 through 10 has been completed.
In this chapter, we'll nail down our markup. In Chapter 10, we'll add CSS to control the color, size, and relative positioning of elements. (We'll pause in Chapter 9 to learn CSS basics.) Among other things, the CSS we create will deliver menu rollover effects more commonly accomplished with images and JavaScript. There's nothing wrong with images or JavaScript, but by using XHTML text and CSS instead, we'll save bandwidth while making the site readily accessible to a wide variety of environments, including screen readers and text browsers, nondesktop-browsers (such as PDA and phone-based browsers), and non-CSS-capable browsers.