557386 Ch08.qxd 4/2/04 9:54 AM Page 174
Ł
174
Creating Cool Web Sites with HTML, XHTML, and CSS
The second table trick I want to demonstrate is using a table as a tool for developing the lay
out of an entire page rather than an element within the page. For this, I call on another exam
ple: a home page template for a small business site, built using tables.
<html>
<head>
<title>Tables as a Page Layout Tool</title>
<style type=”text/css”>
.name { color: white; font-weight: bold; font-size: 110%;
margin-top: 10px; }
body { color: #336; font-family: sans-serif; }
td { font-size: 90%; }
</style>
</head>
<body>
<table border=”0” width=”640” cellspacing=”9”>
<tr>
<td width=”115” align=”center” valign=”top” bgcolor=”#666666”>
<div class=”name”>
Small Business International, Inc.
</div>
<br />
<table border=”1” cellpadding=”14” cellspacing=”0”
bgcolor=”#DDDDDD”>
<tr><td align=”center”>
<a href=”mission.html”>Mission</a>
</td></tr>
<tr><td align=”center”>
<img src=”Graphics/sbi-image1.gif” vspace=”3”
alt=”sbi-map” /><br />
<div style=”font-size: 75%”>A strategic focus: Japan.</div>
</div>
</td></tr>
</table>
</body>
</html>
By now, every line of this example should make sense to you. Everything being used here has
been explained earlier in the book, with the exception of margin settings in the CSS. A quick
glance at Figure 8-12, and you can immediately see that this is how people create multiple
column designs, like that used on the Microsoft home page (
http://www.microsoft.com/
),
for example.
x-ref
I cover margin settings and other advanced aspects of CSS in Chapter 12.
Figure 8-12: A nifty table-based page layout.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch08.qxd 4/2/04 9:54 AM Page 176
Ł
176
Creating Cool Web Sites with HTML, XHTML, and CSS
The hidden problem with this design, however, is that it’s explicitly designed for a standard
VGA monitor resolution: 640 pixels wide. You can see that in the
table width
specification:
<table border=”0” width=”640” cellspacing=”9”>
If the user has a screen that’s considerably wider (800, 1024, or more pixels), a lot of unused
blank space remains on the right side of the screen, and you can’t do much about it.
colgroup
—column groups for tables. You won’t see them used too often on the Web,
but it’s worth a brief peek to see how they work!
With these additional HTML tags, you can now specify the number and exact size of each row
of a table with a combination of the
colgroup
and
col
tags within a
table
tag. There is a
cols
attribute to the
table
tag, but if you want to start including hints about your table size in your
page,
colgroup
is a much better, more flexible strategy.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch08.qxd 4/2/04 9:54 AM Page 177
177
Ł
Chapter 8: Tables and Frames
Why bother indicating the number of columns? Because if you have ever worked with com
plex tables, you already know that the browser can’t start rendering the first line of the table
until it has received every snippet of information. To understand why you should indicate the
number of columns, consider what happens when the following table is displayed onscreen:
<table border=”1” cellspacing=”3”>
<tr><td>The</td><td>Rain</td><td>in</td><td>Spain</td>
</tr><tr>
Continued
<col width=”4*” />
<colgroup />
<col />
<col width=”15%”><col width=”150” />
<tr><td>The</td><td>Rain</td><td>in</td><td>Spain</td>
</tr><tr>
<td>Falls</td><td>Mainly</td><td>On</td><td>The</td>
<td>Plain</td>
</tr><tr>
<td>and where is that plain?</td><td>in Spain! In
Spain!</td>
</tr>
</table>
This may look a bit confusing, but the sizing parameters are similar to how you specify frame
sizes when you use the
frameset
tag, which I explain shortly in the section “Pages within
Pages: Frames.” In a nutshell, you can specify sizes by percentage of the width of the window
(
width=”15%”
), the specific number of pixels
(width=”150”
), having the browser compute
the smallest possible width for the cells in the column (
<col>
without any width specified), or
by specifying how much of the remaining unallocated space should be allocated to the differ
ent columns. Notice that the 2* and 4* for the first
colgroup
width consumed by the last two columns is 300 pixels (15 percent + 150). The remainder
is 700 pixels, which is divided up into seven equal portions and then allocated. The result:
Column 1 is 200 pixels wide, Column 2 is 400 pixels wide, Column 3 is 100 pixels wide, and
the last two you already know. I know, I know, this makes your head swim!
A glance at Figure 8-14 demonstrates how this all works, and it also shows how
colgroup
lets you apply formatting to a set of columns simultaneously with the
align=”center”
attribute.
Notice one thing here: Internet Explorer 6.0, which I used for these screenshots, doesn’t
understand the asterisk width notation for
col
, so although it applied the percentage and
absolute pixel widths, and even caught the
align=”center”
in the
colgroup
tag, the first
and second columns ended up the same width (even though the second should be twice as
wide as the first).
4
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch08.qxd 4/2/04 9:54 AM Page 179
179
Ł
Chapter 8: Tables and Frames
Figure 8-14: The colspan and col tags define table attributes.
Therefore, not only is
col
useful for specifying the number of columns, it’s also quite useful
The other interesting thing about this example is that I’m specifying that I want to have the
second column of information aligned by the colon (:) character in the data cell contents.
The attribute
align=”char”
specifies a character alignment, and
char
is where you specify
which character to use for alignment. If you don’t specify a
char
value, the default is ‘.’, which
aligns numeric values along the decimal point.
Ł
Alas, character alignment isn’t supported in Internet Explorer 6.0, so Figure 8-15
tip
doesn’t show the times aligned along the colons. It’ll just magically work one day,
I expect.
Another possible
align
option (and, like the
align=”char”
option, it can appear anywhere
you can specify an alignment) that you might well have been waiting for since the first release
of HTML has arrived: justified text. The
align=”justify”
attribute should eliminate the ragged
right margin of text, while keeping the left margin also aligned.
This attribute can also be used with the
p
or
div
align=”justify”>
and you achieve the results desired.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch08.qxd 4/2/04 9:54 AM Page 181
181
Ł
Chapter 8: Tables and Frames
Figure 8-16: The align=”justify” attribute justifies text when it is used within the <p> tag but not when used within
a table data cell.
Pages within Pages: Frames
Okay, I think you’re ready. Take a deep breath. It’s time for us to explore something that
makes tables look easy: frames. Frames answer the question: What if each data cell in your
table was its own Web page?
When Netscape first introduced frames, prior to the release of HTML 3.2, lots of people didn’t
like them. Enough sites, however, started to develop around a frame design, splitting a single
Web page into separate panes, that they gradually became popular in spite of complaints.
Meanwhile, many sites that had introduced frame versions of their home pages had to also
offer a no-frame version for people who didn’t like frames; and today the first frame site I
ever saw, the Netscape home page, is now a frames-free site. If you want to be an HTML
expert, you should definitely know how to work with frames; but you’ll undoubtedly find that
when you become an expert in CSS, designing with tables with their myriad uses is the better
way to go.
The basics of frames
Unlike many of the tags you’ve seen so far, frames are an all-or-nothing proposition. Individual
frames are specified with the
frame
tag, which is itself wrapped in a
frameset
specifier that
indicates the amount of space to allocate to each pane of information. Here’s a very basic
, contains this code:
<body bgcolor=”white”>
<h2 style=”text-align:center;”>This
is the top pane on the page!</h2>
</body>
The second file,
bottom.html
, looks like this:
<body style=”background:black; color:white;”>
<div style=”margin-top: 10%;text-align:center;”>
<h2>this is the bottom section of the page!</h2>
</div>
</body>
Figure 8-17: A simple two-pane frame page.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch08.qxd 4/2/04 9:54 AM Page 183
183
Ł
Chapter 8: Tables and Frames
That’s the basic concept of frame documents: Instead of a single page defining all the infor
mation displayed to the visitor, the information is split into multiple pages, each given its own
small piece of the window.
Specifying frame panes and sizes
Now that you’re an expert with tables, it will come as no surprise that you have lots of options
for frames, too, only a few of which are vitally important to understand.
The most important tag to learn about is
frameset
. The
frameset
tag creates a frameset:
<frame src=”frames/advert1.html” />
<frame src=”frames/advert2.html” />
<frame src=”frames/advert3.html” />
</frameset>
</frameset>
</html>
In this case, what I’ve done is specify two columns of information. One column is 80 percent
of the width of the screen; the latter gets the remaining width. That’s specified with the follow
ing line:
<frameset cols=”80%,*”>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch08.qxd 4/2/04 9:54 AM Page 184
Ł
184
Creating Cool Web Sites with HTML, XHTML, and CSS
The first pane here is the second frameset: two rows, the first (
top.html
) 30 percent of the
available height, and the second (
bottom.html
) the remaining 70 percent:
<frameset rows=”30%,70%”>
<frame src=”frames/top.html” />
<frame src=”frames/bottom.html” />
</frameset>
The second column of information (the
*
width in the first frameset specification) contains
three advertisements evenly spaced, each 33 percent of the vertical space:
<frameset rows=”33%,33%,*”>
<frame src=”frames/default.html” name=”main” />
</frameset>
</html>
Notice in this example that the second
frame
tag now has a name associated with it:
main
.
Here are the contents of the
default.html
page:
<html>
<body style=”text-align:center;”>
<img src=”animal-image.gif” alt=”butterfly” />
</body>
</html>
And here’s the all-important
toc.html
page with the
target=”main”
attribute, where
“main”
is the name of the specific target pane as specified in the
frame
tag itself:
<html>
<body style=”background-color:yellow”>
<div style=”text-align:center; font-size:120%; font-weight:bold;”>
<h2>Pick An Animal</h2>
<div style=’line-height:2.0;’>
tag itself also has two attributes worth highlighting. The first enables you to spec
ify the width of a frame border:
frameborder
(makes sense, eh?), with an attribute in pixels.
The second,
scrolling
, enables you to force or prohibit a scroll bar, even if the pane is too
small for the information within it. Possible values are
yes
,
no
, and
auto
; the latter adds a
scrollbar if needed, but hides it otherwise. Here is a small sample of the
scrolling
attribute:
<html>
<title>Animals Tour</title>
<frameset cols=”20%,*”>
<frame src=”frames/toc.html” scrolling=”yes” />
<frame src=”frames/default.html” name=”main” />
</frameset>
</html>
Compare the results in Figure 8-20 with Figure 8-19.
By default, visitors can drag around the frame borders to resize elements of the page design.
If you’d rather that didn’t occur, add the
noresize
attribute, which, when written as xhtml, is
the odd looking
<a href=”noframes.html” target=”_top”>no frames</a>
As a fifth possible value, you can use the
target
attribute to point to a named window that doesn’t
exist, and thereby create a new window with that name.
Judicious use of the special
target
values can considerably improve your frames-based design and
offer, for example, a navigational window that sticks even while the user wanders around other areas
of the site.
If you don’t want to type the
target
value for each of your links, and they’re all pointing to the same
<base target=”value”>
If specific links are supposed to aim elsewhere, you are still free to override things with a
target
attribute within an individual
a href target=”self”
attribute.
Hypertext Reference Target Values
tag. Then, on the naviga
attribute, values that let you gain a bit more control over what’s going on. Table
8-4 summarizes the four key targets with which you should experiment.
Table 8-4: Values of the target Attribute for Greater Frame Control
Loads the document in a new, unnamed window.
Loads the document into the current window (the default).
Loads the document into the parent window (only relevant when you have more
Loads the document into the very topmost window, thus canceling all other
frames that might be in the window.
When you see a Web site that has a frames-based design and a button that says “no frames,” the code
<h2>Sorry, but our site is designed for a frames-compliant
browser</h2>
To visit us you’ll need to upgrade your Web software.
</body>
</noframes>
</html>
Displaying the preceding source with your regular Web browser, if it’s at least Internet
Explorer 3.0 or Netscape Navigator 2.0, shows you the multiple-frame design as expected.
Otherwise, you see the page that would be rendered as if you’d been sent the following HTML
sequence:
<html>
<body style=”text-align:center;”>
<h2>Sorry, but our site is designed for a frames-compliant
browser</h2>
To visit us you’ll need to upgrade your Web software.
</body>
</html>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch08.qxd 4/2/04 9:54 AM Page 189
189
Ł
Chapter 8: Tables and Frames
More fun with frames
Before leaving frames behind, I want to spend a little time looking at some of the cool attrib-
utes you can use to fine-tune the appearance of frames in a frameset. First and foremost, you
can get rid of the annoying grid line between frame elements by tweaking either the
border
attribute or (depending on the browser) the
frameborder
attribute. Whichever one you use, it
gettysburg2.html
is the background color, by the way. The results are shown in
Figure 8-21, and pay particular attention to the results of specifying a
border
width of five
pixels and the dramatic differences in margin changes.
Of course, it’s worth mentioning that the
margin
CSS style also offers significant flexibility to
change margins if used to modify the
<body>
tag. But sometimes you don’t have control over
the material that’s in your frames-based design. The margin style is explored in depth later,
in Chapter 12.
Ł
Read the entire Gettysburg Address at
http://www.intuitive.com/library/
note
Gettysburg.shtml
. It’s time well spent.
Creating a multipane frame site isn’t too difficult. What’s tricky is to do a really good job of it:
to produce a site that makes sense and actually helps people find what they want when they
explore your site.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
557386 Ch08.qxd 4/2/04 9:54 AM Page 190
Ł
190
Creating Cool Web Sites with HTML, XHTML, and CSS
Figure 8-21: The same Web Page with different frame margin settings.
Ł
<head><title>The Gettysburg Address</title></head>
<body style=”text-align:center;”>
<div style=”margin:25;text-align:left;”>
The Gettysburg Address, as delivered by President Abraham
Lincoln to the soldiers and general assembly at the
Gettysburg battlefield during the American Civil War,
November 19, 1863.
</div>
<p align=”center”>
<iframe src=”frames/gettysburg1.html” height=”70%” width=”75%”>
<table border=”1” cellpadding=”20”><tr>
<td align=”center”>You can’t see the information here,
which should be in a separate inline frame.
<p>
<a href=”frames/gettysburg1.html”>read the Gettysburg Address</A>
</td></tr></table>
</iframe>
</p>
More information about Lincoln can be found at
<a href=”http://www.netins.net/showcase/creative/lincoln.html”>
Lincoln Online</A>
</body>
</html>
The results in Internet Explorer, as shown in Figure 8-22, are quite attractive. Older browsers
that don’t understand the
iframe
tag ignore both parts of the
<iframe> </iframe>
pair and,
instead, interpret the HTML between the two tags. In this case, it says “You can’t see the
Ł
The
iframe
tag is popularly used on Web sites for those license agreements you
note
generally see prior to downloading software.
You have one final mechanism to explore as you further exploit inline frames on your site: You
can name the inline frame with the
name
attribute, and you can point references to the inline
frame with
target
, just as you would for a regular frames layout.
Table 8-5 summarizes the many HTML tags presented in this chapter.
Meaning
<table </table>
border=”x”
cellpadding=”x”
(in pixels).
cellspacing=”x”
(in pixels).
width=”x”
frame=”val”
rules=”val”
bordercolor=”color”
name).
bordercolorlight=”color”
Produces the lighter of the two colors specified
bordercolordark=”color”
Produces the darker of the two colors specified
bgcolor=”color”
or color name).
colspan=”x”
to span.
rowspan=”x”
to span.
align=”align”
valign=”align”
Specifies vertical alignment of material within the
background=”url”
Specifies the background picture for the cell.
<frameset </frameset>
Defines a frame-based page layout.
cols=”x”
Indicates number and relative sizes of column
frames.
rows=”x”
Indicates number and relative sizes of
column rows.
<frame
Defines a specific frame.
src=”url”
name=”name”
Indicates name of the pane (used with
=
name as a part of the
<a>
scrolling=”scrl”
auto.
frameborder=”x”
only marquees, and lots more!
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Copyright: Tài liệu đại học ©