Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P54 pot
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 (142.67 KB, 10 trang )
Creating Complex Framesets
<head>
<title>Reason 4 - Out to Lunch</title>
</head>
<body bgcolor="#ffffff">
<h2><img src="happy.jpg" width="275" height="275" align="left">I'm out
to lunch.</h2>
</body>
</html>
The fifth page (reason5.html) looks like the following:
<head>
<title>Reason 5 - Boss's Office</title>
</head>
<body bgcolor="#ffffff">
<h2><img src="scared.jpg" width="275" height="275" align="left">The boss
called me into his office.</h2>
</body>
</html>
The last main page (reason6.html) appears as follows:
<head>
<title>Reason 6 - I Don't Work Here Anymore</title>
</head>
<body bgcolor="#ffffff">
<h2><img src="duh.jpg" width="275" height="275" align="left">I just
got fired.</h2>
</body>
</html>
Now you have the six pages that will appear in the main frame of the frameset. You're finally
ready to build the frameset itself.
Task: Exercise 14.3. Combining rows and cols
file:///G|/1/0672328860/ch14lev1sec5.html (6 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
To remind you of the basic layout of the frameset that you'll create, Figure 14.15 is another
look at the complete page. It provides a simple example of how you can combine framesets
to create complex designs.
Output
Figure 14.15. The frameset with three frames: top, left, and main.
[View full size image]
Tip
When you're designing complex frame layouts, a storyboard is an invaluable
tool. It helps you block out the structure of a frameset, and it can be
invaluable when you're adding hyperlinks (as you'll see in
Exercise 14.5,
"Using Named Frames and Hyperlinks").
In Figure 14.15, the right section of the screen is split into two horizontal frames, and the
third frame at the left of the page spans the entire height of the screen. To create a
frameset document that describes this layout, open your text editor and enter the following
basic HTML structural details:
<html>
<head>
file:///G|/1/0672328860/ch14lev1sec5.html (7 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
<title>Why I'm Away Frameset</title>
</head>
<frameset>
</frameset>
</html>
Next, you must decide whether you need to use a rows or cols attribute in your base
<frameset>. Look at your storyboardin this case Figure 14.15and work out whether any
frame areas extend right across the screen or from the top to the bottom. If any frames
extend from the top to the bottom, as in this example, you need to start with a
cols
frameset; otherwise, you need to start with a
rows frameset. On the other hand, if no
frames extend completely across the screen either vertically or horizontally, you should
start with a
cols frameset.
To put it more simply, here are three easy-to-remember rules:
● Left to right, use rows
● Top to bottom, use cols
● Can't decide, use cols
Note
The reasoning behind the use of the "left to right, use rows" rule relates to how
frames-compatible browsers create frames. Each separate
<frameset>
definition can split the screen (or a frame) either vertically or horizontally, but
not both ways. For this reason, you need to define your framesets in a logical
order to ensure that you achieve the layout you want.
In Figure 14.15, the left frame extends across the screen from top to bottom. As a result,
you need to start with a
cols frameset by using the rules mentioned previously. To define
the base frameset, enter the following:
<frameset cols="125,*">
<frame src="choice.html"> <! loads the choices page into the left frame >
<frame src="dummy.html"> <! this line is only temporary >
</frameset>
Writing this code splits the screen into two sections. The first line defines a small frame at
the left of the screen that is 125 pixels wide, and a large frame at the right of the screen
that uses the rest of the available space.
As mentioned earlier today, the frameset document itself doesn't describe the contents of
each frame. The documents specified in the
src attribute of the <frame> actually contain the
text, images, and tags displayed by the frameset. You can see an example of this tag in the
second and third lines of the preceding code. The second line specifies the URL of the web
page in the left frame (the
choice.html page that you created earlier). The third line would
display a web page named
dummy.html (if you created one, that is), but we're just using this
as a placeholder for the next exercise.
file:///G|/1/0672328860/ch14lev1sec5.html (8 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
Task: Exercise 14.4. Nesting Framesets
The next step in the process is to split the right frame area into two horizontal frames. You
achieve this effect by placing a second
<frameset> block inside the base <frameset> block.
When one
<frameset> block is nested inside another, the nested block must replace one of
the
<frame> tags in the outside frameset. In this case, you'll replace the line that loads the
temporary
dummy.html page (which doesn't really exist).
To split the right frame into two frame areas, you replace the dummy
<frame> tag with an
embedded
<frameset> block. This embeds the new frameset inside the area defined for the
<frame> tag it replaces. Inside the <frameset> tag for this new block, you need to define a
rows attribute, as shown in the complete code:
<html>
<head>
<title>Why I'm Away Frameset</title>
</head>
<frameset cols="125,*">
<frame src="choice.html" <! this loads the choices page_into the left frame
>
<frameset rows="60,*"> <! the frame for column 2 >
<frame src="away.html"> <! has been replaced >
<frame src="reason1.html"> <! with an embedded >
</frameset> <! frameset block >
</frameset>
The embedded rows frameset defines two rows, the first being 60% of the height of the
embedded frame area and the second taking up all the remaining space in the embedded
frame area. In addition, two
<frame> tags are embedded inside the <frameset> block to
define the contents of each column. The top frame loads
away.html, and the bottom frame
loads
reason1.html.
Note
When used inside an embedded frameset, any percentage sizes are based on a
percentage of the total area of the embedded frame, not on a percentage of
the total screen.
Save the finished HTML document to your hard drive as frameset.html. Test it using a
frames-compliant browser. Also, if you happen to have a copy of a web browser that isn't
frames-compliant, try loading the document into it. You shouldn't see anything onscreen.
Task: Exercise 14.5. Using Named Frames and Hyperlinks
file:///G|/1/0672328860/ch14lev1sec5.html (9 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
If you were to load your frameset.html page into a frames-compatible browser at this
stage, you would see a screen similar to the one shown in
Figure 14.15. Some of the text
sizes and spacing might be slightly different, but the general picture would be the same.
Although it looks right, it doesn't work right yet. If you click any of the hyperlinks in the left
frame, the frames-compatible browser will attempt to load the contents of the file you
select into the left frame. What you really want it to do is to load each document into the
larger right frame.
Earlier today, you learned about the
target attribute, which loads different pages into a
different browser window. To make the frameset work the way it should, you need to use a
slight variation on the
target attribute. Rather than the target pointing to a new window,
you want it to point to one of the frames in the current frameset.
You can achieve this by first giving each frame in your frameset a frame name or window
name. To do so, include a
name attribute inside the <frame> tag, which takes the following
form:
<frame src="document URL" name="frame name">
Therefore, to assign a name to each of the frames in the frameset.html document, you add
the
name attribute to each of the <frame> tags. Your frameset page now looks like the
following, with the additions indicated with the shaded background:
<html>
<head>
<title>Why I'm Away Frameset</title>
</head>
<frameset cols="125,*">
<frame src="choice.html" name="left">
<! this loads the choices page into the left frame >
<frameset rows="60,*"> <! the frame for column 2 >
<frame src="away.html" name="top"> <! has been replaced >
<frame src="reason1.html" name="main"> <! with an embedded >
</frameset> <! frameset block >
</frameset>
This source code names the left frame "left", the top-right frame "top", and the bottom-
right frame
"main". Next, resave the updated frameset.html file, and you're just about
finished with the example.
Task: Exercise 14.6. Linking Documents to Individual Frames
file:///G|/1/0672328860/ch14lev1sec5.html (10 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
Once you've named the frames, you have to fix the links in the choice.html page so that
they load the target pages in the
main frame rather than the left frame.
You might recall that the
target attribute was used with the <a> tag to force a document to
load into a specific window. You'll use the same attribute to control into which frame a
document is loaded.
In this exercise, you want to load a page in the
main (bottom-right) frame whenever you
click a hyperlink in the
left frame. Because you've already named the bottom-right frame
"main", all you need to do is add target="main" to each tag in the choice.html document.
The following snippet of HTML source code demonstrates how to make this change:
<p><a href="reason1.html" target="main">Reason 1</a></p>
<p><a href="reason2.html" target="main">Reason 2</a></p>
<p><a href="reason3.html" target="main">Reason 3</a></p>
<p><a href="reason4.html" target="main">Reason 4</a></p>
<p><a href="reason5.html" target="main">Reason 5</a></p>
<p><a href="reason6.html" target="main">Reason 6</a></p>
Alternatively, you could use the <base target="value"> tag because every tag in the choice.
html
document points to the same frame. In this case, you don't need to include
target="main" inside each <a> tag. Instead, place the following inside the <head> </head>
block of the document:
<base target="main">
With all the changes and new documents created, you should now be able to load frameset.
html
into your frames-compatible browser and view all your HTML reference documents by
selecting from the choices in the left frame.
Tip
After you get all your links working properly, you might need to go back and adjust the size
of the rows and columns as defined in the
<frameset> tags to get the layout exactly right.
Remember, the final appearance of a frameset is still determined by the size of the screen
and the visitor's operating system.
Task: Exercise 14.7. Adding Your noframes Content
file:///G|/1/0672328860/ch14lev1sec5.html (11 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
Although you have a frameset that works perfectly now, there's another feature you need
to add to it. Remember, some people who visit your frames page won't be using
framescompatible browsers. The following addition to the frameset page creates some
content that they'll see when they open the frameset.
Once again, open the
frameset.html page. At this point, your code looks like the following:
<html>
<head>
<title>Why I'm Away Frameset</title>
</head>
<frameset cols="125,*">
<frame src="choice.html" name="left">
<! this loads the choices page into the left frame >
<frameset rows="60,*"> <! the frame for column 2 >
<frame src="away.html" name="top"> <! has been replaced >
<frame src="reason1.html" name="main"> <! with an embedded >
</frameset> <! frameset block >
</frameset>
</html>
Immediately after the last </frameset> tag and before the final </html> tag, insert the
following
<noframes> </noframes> element and content:
Input
<noframes>
<body bgcolor="#ffffff">
<h1>I'm Away from My Desk, because </h1>
<ul>
<li>Reason 1 -
<a href="reason1.html">I forgot my lunch at home.</a></li>
<li>Reason 2 -
<a href="reason2.html">I'm flirting by the water cooler.</a></li>
<li>Reason 3 - <a href="reason3.html">None of your business.</a></li>
<li>Reason 4 - <a href="reason4.html">I'm out to lunch.</a></li>
<li>Reason 5 -
<a href="reason5.html">The boss just called me in his office.</a></li>
<li>Reason 6 - <a href="reason6.html">I just got fired.</a></li>
</ul>
</body>
</noframes>
When a user who isn't using a frames-compatible browser navigates to the frameset, she'll
see the page that's similar to the one shown in
Figure 14.16.
Output
Figure 14.16. This page appears when users view the frameset with
a browser that isn't framescompatible.
file:///G|/1/0672328860/ch14lev1sec5.html (12 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
[View full size image]
Magic
target Names
Now that you've learned what the target attribute does in a frameset, you should know that there are
some special target names you can apply to a frameset.
You can assign four special values to a
target attribute, two of which (_blank and self) you've already
encountered. Netscape called these values magic target names. They're case sensitive. If you enter a
magic target name in anything other than lowercase, the link will attempt to display the document in a
window with that name, creating a new window if necessary.
Table 14.2 lists the magic target names
and describes their use.
Table 14.2. Magic target Names
target Name
Description
target="_blank"
Forces the document referenced by the <a> tag to be loaded into a new unnamed
window.
target="_self"
Causes the document referenced by the <a> tag to be loaded into the window or
frame that held the
<a> tag. This can be useful if the <base> tag sets the target to
another frame but a specific link needs to load in the current frame.
target="_parent"
Forces the link to load into the <frameset> parent of the current document. If the
current document has no parent, however,
target="_self" will be used.
file:///G|/1/0672328860/ch14lev1sec5.html (13 von 14) [19.12.2006 13:49:41]
Creating Complex Framesets
target="_top"
Forces the link to load into the full web browser window, replacing the current
<frameset> entirely. If the current document is already at the top, however,
target="_self" will be used. More often than not, when you create links to other
sites on the Web, you don't want them to open within your frameset. Adding
target="_top" to the link will prevent this from occurring.
file:///G|/1/0672328860/ch14lev1sec5.html (14 von 14) [19.12.2006 13:49:41]
Floating Frames
Floating Frames
With Internet Explorer 3.0, Microsoft introduced a novel variation on frames: floating frames. This
concept, which is a part of HTML 4.01, is somewhat different from the original frames idea that was
introduced in Netscape.
Floating frames have their advantages and disadvantages. One advantage is that you can position a
floating frame anywhere on a web page, just as you can with an image, a table, or any other web page
element.
Browser Support for Floating Frames
The authors of the HTML 4.01 frames specification included floating frames with some
hesitation. According to the specification, you can use the
<object> tag to achieve the same
effect as floating frames, so the inclusion of this type of frame is questionable. Still, the tag
is included in the HTML 4.01 specification, and all versions of Internet Explorer since
version 3, Mozilla Firefox, Netscape 6 (and above), and Opera 5 (and above) all support it.
Learning to use floating frames is worthwhile.
Standard framesets enable you to specify alternative content that can be viewed when someone without
a frames-compatible browser navigates to a frameset. Unfortunately, you don't have this option with the
<iframe> element. If you include a floating frame on your web page and a user navigates to it with a
browser that doesn't support them, he'll see absolutely nothing at all in the area where the frame should
be.
With that warning out of the way, here's a brief run-through of how to create floating frames. First, you
define them by using the
<iframe> tag. Like images, these frames appear inline in the middle of the
body of an HTML document (hence the
i in <iframe>). The <iframe> tag enables you to insert an HTML
document in a frame anywhere in another HTML document.
Table 14.3 shows how <iframe> takes the key attributesall of which, except for those indicated as
Internet Explorer extensions, appear in HTML 4.01.
Table 14.3. Key Attributes
Attribute Description
width
Specifies the width, in pixels, of the floating frame that will hold the HTML document.
height
Specifies the height, in pixels, of the floating frame that will hold the HTML document.
file:///G|/1/0672328860/ch14lev1sec6.html (1 von 3) [19.12.2006 13:49:41]
