- A Tabbed Interface
- Creating the Base Graphics for the Tabs and Assembling the Tab Table
- Planning the Project and Dividing It into Logical Modules
- Creating the XHTML Base
- Creating the Main CSS Stylesheet (common.css)
- Creating the Supplemental CSS Style Rules (advanced.css)
- Creating the Basic Document Object Creation Script (docobj.js)
- Creating the Tab Navigation Script (tabs.js)
- Modifying the XHTML Markup to Call the Functions
Web site navigation interfaces that use a tab metaphor are very common. (Perhaps the best-known site that uses a tab-navigation interface is Amazon.com.) Yet in most cases, the navigation tabs are merely graphical links that load other pages from the server.
Here are the main points we'll cover in this project:
Modularizing the code
Using arrays to streamline the script
Manipulating the stacking order, or z-index, of elements
Gracefully Degrading Pages
There's still one thorny problem to face, however: How do you take advantage of these new methods and features but still accommodate users of version 4 and older browsers? Statistics for browser usage are in a constant state of flux, but as of this writing, a small yet still significant number of web surfers are using version 4 browsers.
Up until now, you have probably been accommodating users of older or alternate browsers using "browser sniffing" methods to redirect them to other pages, writing alternate content onto the page, and so on. However, this can greatly increase the time and cost needed to create and maintain a site.
In extreme cases, you may even have closed off users of older and alternate browsers by telling them that your site can only be accessed with certain browsers. This only invites resentment from your site visitors, who may never return to your site.
The method introduced in this project is called graceful degradation. Essentially, this means that you while you may design your page so that it's optimized for modern browsers, at the same time you ensure that the content of your site is viewable in older or non-graphical browsers. The goal is to make the same pages viewable and useable by the widest audience. See the "How It Works" sidebars at the end of this project to see how this is accomplished.