Creating the XHTML Base - Page 3
June 7, 2002
We've used XHTML instead of HTML for the markup for this project. (If
you're unsure about XHTML markup conventions, refer back to Project 4,
" Creating a Complex Layout with CSS-P.")
-
Create the DOCTYPE declaration for XHTML 1.0
Transitional in your markup document tabpage.html.
- In the head section of the document, tabpage.html,
insert the tags necessary to link the external CSS files.
Note that we created two external stylesheets in the previous step: common.css
and advanced.css. Because advanced.css contains rules that will only apply
to later browsers, including some rules that may cause problems in version
4 browsers, we'll use the @import method of linking an external
stylesheet. For common.css we will use the <link> tag.
Note the order: @import comes before the <link>. This
is because any @import rule must precede all other style rules specified
for a document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
-<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1" />
<title>Project 13: Tabbed interface demo</title>
<style type="text/css" title="supplement">
<!--
@import "inc/advanced.css";
-->
</style>
<link rel="Stylesheet" rev="Stylesheet" href="inc/common.css" />
Note: As you saw in Project 4, older browsers, such as Netscape 4.x,
do not recognize the @import rule. We're using this seeming deficiency
to our advantage here, to make sure that any CSS style rules that aren't
interpreted properly are isolated from Netscape 4.x. All these rules are put
in the advanced.css stylesheet.
For more information about the @import rule, see the W3C specifications
at http://www.w3.org/TR/REC-CSS2/cascade.html#at-import.
-
In the head section of the markup document, tabpage.html,
insert the <script></script> tags to link the external
JavaScript files.
<script src="inc/docobj.js" type="text/javascript"></script>
<script src="inc/tabs.js" type="text/javascript"></script>
</head>
- In the body section of the document,
create the markup for the contents.
Arrange the content logically so that it can be easily read even if the
browser in use does not recognize CSS or JavaScript. The text inside the
tabs becomes the header for each section.
Each of the three table cells that make up a tab have a class or
id designation: the left side table cells have a class attribute
value of tableft; the right side table cells have a class
value of tabright; and the middle section table cells have the id
values tabmiddle1, tabmiddle2, and so on.
Each div has a unique id.
<body>
<div id="tab1">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="8" height="24" class="tableft">
<img src="images/dot.gif"
alt=""
width="8"
height="24"
border="0"></td>
<td id="tabmiddle1">overview</td>
<td class="tabright">
<img src="images/dot.gif"
alt=""
width="7"
height="24"
border="0"></td>
</tr></table>
</div>
<div id="box1">
<!-- content of the first text box. Omitted for clarity. -->
</div>
<div id="tab2">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="8" height="24" class="tableft">
<img src="images/dot.gif"
alt=""
width="8"
height="24"
border="0"></td>
<td id="tabmiddle2">background</td>
<td class="tabright">
<img src="images/dot.gif"
alt=""
width="7"
height="24"
border="0"></td>
</tr></table>
</div>
<div id="box2">
<!-- content of the second text box. Omitted for clarity. -->
</div>
<div id="tab3">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="8" height="24" class="tableft">
<img src="images/dot.gif"
alt=""
width="8"
height="24"
border="0"></td>
<td id="tabmiddle3">best recipes</td>
<td class="tabright">
<img src="images/dot.gif"
alt=""
width="7"
height="24"
border="0"></td>
</tr></table>
</div>
<div id="box3">
<!-- content of the third text box. Omitted for clarity. -->
</div>
<div id="tab4">
<tr>
<td width="8" height="24" class="tableft">
<img src="images/dot.gif"
alt=""
width="8"
height="24"
border="0"></td>
<td id="tabmiddle4">etcetera</td>
<td class="tabright">
<img src="images/dot.gif"
alt=""
width="7"
height="24"
border="0"></td>
</tr></table>
</div>
Creating the Base Graphics for the Tabs and Assembling the Tab Table - Page 2
JavaScript + CSS + DOM Magic
CREATING THE MAIN CSS STYLESHEET (COMMON.CSS) - Page 4
|
