Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P53 ppsx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (195.92 KB, 10 trang )
Working with Frames
<frame src="document2.html" />
<frame src="document3.html" />
</frameset>
</html>
This example defines a frameset with three horizontal frames of equal height (see Figure 14.10). The
contents of
document1.html are displayed in the first frame, the contents of document2.html in the second
frame, and the contents of
document3.html in the third frame.
Output
Figure 14.10. You use the <frame> tag to define the contents of each frame.
[View full size image]
Tip
When you're creating frameset documents, you might find it helpful to indent the <frame>
tags so that they're separated from the
<frameset> tags in your HTML document. This has
no effect on the appearance of the resulting web pages, but it does tend to make the HTML
source easier to read.
file:///G|/1/0672328860/ch14lev1sec3.html (6 von 7) [19.12.2006 13:49:38]
Working with Frames
The <noframes> Tag
What happens if a browser that doesn't support frames navigates to a frameset document? Nothing. You
get a blank page. Fortunately, there's a way around this problem.
A special tag block called
<noframes> enables you to include additional HTML code as part of the
frameset document. The code you enclose within the
<noframes> element isn't displayed in frames-
compatible browsers, but it's displayed in browsers that don't support frames. The
<noframes> tag takes
the following form:
<html>
<head>
<title>Frameset with No Frames Content</title>
</head>
<frameset>
your frameset goes here.
<noframes>
Include any text, hyperlinks, and tags you want to here.
</noframes>
</frameset>
</html>
Using the frames' content and tags inside <noframes>, you can create pages that work well with both
kinds of browsers. Later today, you'll add some
<noframes> content to a frameset.
Note
The way the <noframes> tag works is actually kind of interesting. It works because web
browsers are designed to ignore tags that they don't understand. So, browsers that don't
support frames ignore the
<frameset> and <frame> tags. They also ignore the <noframes> tag
and just display whatever is inside it. Browsers that do support frames know to render the
frames and ignore the text inside the
<noframes> tag.
file:///G|/1/0672328860/ch14lev1sec3.html (7 von 7) [19.12.2006 13:49:38]
Changing Frame Borders
Changing Frame Borders
Notice that all the frames in today's lesson have thick borders separating them. There are a number of
attributes that can be set to control the appearance of frame borders or prevent them from appearing
altogether.
Start with the
<frame> tag. By using two attributes, bordercolor and frameborder, you can turn borders
on and off and specify their color. You can assign
bordercolor any valid color value, either as a name or
a hexadecimal triplet.
frameborder takes two possible values: 1 (to display borders) or 0 (to turn off the
display of borders).
Note
If you turn off the border, frames-compatible browsers won't display its default three-
dimensional border. However, a space will still be left for the border.
HTML 4.01 currently lists only the
frameborder attribute. The bordercolor attribute qualifies
as an extension.
For example, the following code adds a deep red border (defined by #cc3333) around the middle frame in
the frameset:
<html>
<head>
<title>The frame Tag</title>
</head>
<frameset rows="*,*,*">
<frame src="document1.html">
<frame frameborder="1" bordercolor="#cc3333" src="document2.html">
<frame src="document3.html">
</frameset>
</html>
Although HTML 4.01 doesn't provide either of these attributes for the <frameset> tag, you can use both
of them to define default values for the entire frameset in current browsers.
Of course, there's room for confusion when colored borders are defined. In the following frameset
definition, a conflict arises because the two frames share a single common border, but each frame is
defined to have a different border color with the
bordercolor attribute:
<html>
<head>
<title>Conflicting Borders</title>
</head>
<frameset frameborder="0" rows="*,*,*">
<frame frameborder="1" bordercolor="yellow" src="document1.html">
<frame bordercolor="#cc3333" src="document2.html">
<frame src="document3.html">
file:///G|/1/0672328860/ch14lev1sec4.html (1 von 3) [19.12.2006 13:49:39]
Changing Frame Borders
</frameset>
</html>
In addition, the frameset is defined as having no borders, but the first frame is supposed to have a
border. How do you resolve this problem? You can apply three simple rules:
● Attributes in the outermost frameset have the lowest priority.
● Attributes are overridden by attributes in a nested <frameset> tag.
● Any bordercolor attribute in the current frame overrides previous ones in <frameset> tags.
Additional Attributes
Table 14.1 shows a few extra attributes for the <frame> tag. These attributes can give you additional
control over how the user interacts with your frames. Other attributes control margins or spacing
between frames and whether scrollbars appear when required.
Table 14.1. Control Attributes for the <frame> Tag
Attribute Value Description
frameborder 1
Displays borders around each frame (default).
frameborder 0
Creates borderless frames.
longdesc
URL
Specifies a URL that provides a longer description of the contents of the
frameset. Primarily used with nonvisual browsers.
marginheight
pixels
To adjust the margin that appears above and below a document within a frame,
set
marginheight to the number indicated by pixels.
marginwidth
pixels
The marginwidth attribute enables you to adjust the margin on the left and right
sides of a frame to the number indicated by pixels.
name
string
Assigns a name to the frame for targeting purposes.
noresize
By default, the users can move the position of borders around each frame on
the current screen by grabbing the borders and moving them with the mouse.
To lock the borders of a frame and prevent them from being moved, use the
noresize attribute.
scrolling auto
(Default) If the content of a frame takes up more space than the area available,
frames-compatible browsers automatically add scrollbars to either the right side
or the bottom of the frame so that the users can scroll through the document.
scrolling no
Setting the value of scrolling to no disables the use of scrollbars for the
current frame. (Note that if you do this but the document contains more text
than can fit inside the frame, users won't be able to scroll the additional text
into view.)
scrolling yes
If you set scrolling to yes, scrollbars are included in the frame even if they
aren't required.
file:///G|/1/0672328860/ch14lev1sec4.html (2 von 3) [19.12.2006 13:49:39]
Changing Frame Borders
src
URL
Specifies the URL of the initial source document that appears in a frame when
the frameset first opens in the browser.
file:///G|/1/0672328860/ch14lev1sec4.html (3 von 3) [19.12.2006 13:49:39]
Creating Complex Framesets
Creating Complex Framesets
The framesets you've learned about so far are the most basic types of frames that can be displayed. In
day-to-day use, however, you'll rarely use these basic frame designs. On all but the simplest sites, you'll
most likely want to use more complex framesets.
Therefore, to help you understand the possible combinations of frames, links, images, and documents
that can be used by a website, this section will explore complex framesets.
Task: Exercise 14.2. Creating the Content Pages for Your Frameset
Most commonly, framesets provide navigation bars that keep navigational elements in view
as the user scrolls through the contents of the document. By far, the most common place to
present the navigation bars is on the left side of the browser window. Each time the visitor
clicks a link in the left navigation frame, the content in the main frame displays the selected
page. The (very silly) frameset that you'll create in this exercise demonstrates this
technique. Although it's not a really practical example, it's simple, fun, and demonstrates the
very same techniques you would use for a navigation bar.
When you design a web page that uses frames, you normally design the frameset before you
go through all the trouble of designing the content that goes into it. That's because you'll
want to know how big your frames are going to be before you start designing graphics and
other page content to put into them.
I'm doing things a little backward here, but for good reason. It may help you to better
understand how things fit together if you see real content in the frames as you design the
frameset. For this reason, I'll have you design the content first.
The following content pages don't include any of the frameset tags discussed so far. There
are eight pages in all, but I promise that I'll keep the code for these pages really brief.
Ready?
Tip
When you lay out the basic structure of a frameset, you don't normally want to
be bothered with details such as the actual contents of the frames. However,
your frameset won't be displayed properly when it's loaded into a frames-
compatible browser for testing unless you define
<frame> tags that include valid
documents. If you want to design a frameset before you create the content, you
can create a small empty HTML document called
dummy.html and use it for all
your frame testing.
The frameset that you'll create in Exercises 14.3 through 14.7 consists of three frames. The
layout of the frameset will be as shown in
Figure 14.11. The frameset page loads first and
instructs the browser to divide the browser window into three frames. Next, it loads the
three pages that appear in the top, left, and main frames. Finally, if a user browses to the
frameset without a frames-compatible browser, an alternative page will appear.
file:///G|/1/0672328860/ch14lev1sec5.html (1 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
Figure 14.11. You'll create a frameset that consists of three frames:
top, left, and main.
[View full size image]
The top frame always displays the same web pageaway.html. The choices.html page that
appears in the frame on the left side contains a list of links to six different pages named
reason1.html through reason6.html. Each of these six pages will load into the main frame on
the bottom-right portion of the frameset.
Start with the page displayed in the top frame. This page will always appear in the frameset.
Here you can include any information you want to display permanently as visitors browse
through your site. Real-world examples for the content of this frame include the name of
your website, a site logo, a link to your email address, or other similar content. Type in the
following code and save it to your hard drive as
away.html:
<html>
<head>
<title>I'm Away from My Desk Because</title>
</head>
<body bgcolor="#cc6600" text="#000000">
<h3>I'm Away from My Desk, because </h3>
</body>
</html>
Figure 14.12 shows this page.
file:///G|/1/0672328860/ch14lev1sec5.html (2 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
Figure 14.12. The top frame in the frameset.
Next, you'll create the left frame in the frameset. On real websites, this is typically the frame
used for text or image navigation links that take your visitors to several different key pages
on your site. For example, a personal site might have a navigation bar that takes its visitors
to a home page, a guest book, a links page, and other sections of interest. A corporate or
business site could contain links for products, customer support, frequently asked questions,
employment opportunities, and so on.
The contents page in the following example works exactly the same way that a realworld
navigation bar does. When the appropriate link is selected, it displays one of the six pages in
the main frame of the frameset. The contents page contains links to six pages,
reason1.html
through
reason6.html, which you'll create next.
After you enter the following code into a new page, save it to your hard drive in the same
directory as the first page and name it
choice.html:
Input
<html>
<head>
<title>Reason I'm Out</title>
</head>
<body bgcolor="#006699" text="#ffcc66" link="#ffffff" vlink="#66ccff"
alink="#ff6666">
<p>Select a reason:</p>
<hr />
<p><a href="reason1.html">Reason 1</a></p>
<p><a href="reason2.html">Reason 2</a></p>
<p><a href="reason3.html">Reason 3</a></p>
<p><a href="reason4.html">Reason 4</a></p>
<p><a href="reason5.html">Reason 5</a></p>
<p><a href="reason6.html">Reason 6</a></p>
</body>
</html>
Your page should look as shown in Figure 14.13 when you open it in a browser.
file:///G|/1/0672328860/ch14lev1sec5.html (3 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
Figure 14.13. The left frame in the frameset.
Now you need to create the six pages that will appear in the main frame when the visitor
selects one of the links in the contents frame. The main frame is designed to display pages
that normally you would display in a full browser window. However, if you're going to display
your pages in a frameset that has a left navigation bar, you'll have to account for the
reduced size of the frame in your design.
To keep the page examples relatively easy, I've given them all the same basic appearance.
This means that the code for all of these pages is pretty much the same. The only items that
change from page to page are the following:
● The title of the page.
● The description of my current mood.
● The text that describes what each image means.
To create the first of the six pages that will appear in the main frame, type the following
code into a new page and save it as
reason1.html:
Input
<html>
<head>
<title>Reason 1 - Forgot My Lunch</title>
</head>
<body bgcolor="#ffffff">
<h2><img src="uhoh.jpg" width="275" height="275" align="left">I forgot my lunch
at home.</h2>
</body>
</html>
file:///G|/1/0672328860/ch14lev1sec5.html (4 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
Figure 14.14 shows what this page should look like in a browser.
Output
Figure 14.14. The first of the six pages that appear in the main frame.
You code the remaining five pages for the main frame similarly. Modify the code you just
created to build the second of the six main pages. The only differences from the previous
code (
reason1.html) are shown with a gray background. Save the new page as reason2.html.
The complete code appears as follows:
<html>
<head>
<title>Reason 2 - By the Water Cooler</title>
</head>
<body bgcolor="#ffffff">
<h2><img src="flirty.jpg" width="275" height="275" align="left">I'm flirting by
the water cooler.</h2>
</body>
</html>
For the third page, modify the code again and save it as reason3.html. The complete code
appears as follows:
<html>
<head>
<title>Reason 3 - Don't Ask!</title>
</head>
<body bgcolor="#ffffff">
<h2><img src="grumpy.jpg" width="275" height="275" align="left">None of
your business!</h2>
</body>
</html>
Here's the fourth page (reason4.html):
file:///G|/1/0672328860/ch14lev1sec5.html (5 von 14) [19.12.2006 13:49:41]
