- A Tabbed Interface
- Project 12: Transitional CSS and Javascript Strategies
- 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
Planning the Project and Dividing It into Logical Modules
This project is divided into modules. Instead of putting everything into one document, each specific task is put into its own document, and the result is assembled at the end. The CSS is divided into two separate stylesheets: one containing rules that are compatible with CSS-aware (version 4 and higher) browsers and the other containing rules that are recognized only in browsers that recognize more advanced CSS rules (version 5.0 and higher of Netscape 6.x, Mozilla, and Internet Explorer). The JavaScript is also divided into two: one that contains two document object constructor functions that can be used over and over again for many projects and another that contains the functions specific to this project. The markup itself is XHTML, which follows current W3C recommendations.
Create a new text file to contain the XHTML markup. Save this in the root directory of your site as an HTML/XHTML file. Here we've named it tabpage.html.
Create a new directory under the root and name it inc.
In the inc directory, create a new text file that will contain the basic style rules that are recognized by most CSS-aware browsers. Save this file with the name common.css.
In the same directory, create a new text file that will contain more advanced CSS style rules that are only recognized by the latest graphical browsers. Save this file with the name advanced.css.
In the same directory, create a new text file that will contain the base document object constructor JavaScript. Save it with the filename docobj.js.
In the same directory, create a new text file that will contain the tab navigation Javascript. Save it with the filename tabs.js.