Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P52 docx
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 (180.98 KB, 10 trang )
Working with Linked Windows
Figure 14.3. The parent window (the red page).
This creates a light-red page that links to the other three pages. Save this HTML source as
parent.html.
Next, create a document called
yellow.html (see Figure 14.4) by entering the following code:
Input
<html>
<head>
<title>Yellow Page</title>
</head>
<body bgcolor="#ffffcc">
<h1>Yellow Page</h1>
<p>This is the first target page. Its target is <b>yellow_page</b></p>
</body>
</html>
Output
Figure 14.4. yellow.html web browser window named yellow_page.
file:///G|/1/0672328860/ch14lev1sec2.html (3 von 7) [19.12.2006 13:49:37]
Working with Linked Windows
After saving yellow.html, create another document called blue.html (see Figure 14.5) by
entering the following code:
Input
<html>
<head>
<title>Blue Page</title>
</head>
<body bgcolor="#99ccff">
<h1>Blue Page</h1>
<p>This is the second target page. Its target is <b>blue_page</b>.</p>
</body>
</html>
Output
Figure 14.5. blue.html displayed in the web browser window named
blue_window.
file:///G|/1/0672328860/ch14lev1sec2.html (4 von 7) [19.12.2006 13:49:37]
Working with Linked Windows
Next, create a fourth document called green.html, which looks like the following:
<html>
<head>
<title>Green Page</title>
</head>
<body bgcolor="#ccffcc">
<h1>Green Page</h1>
<p>This is the third target page. Its target is <b>yellow_page</b>.
It should replace the yellow page in the browser.</p>
</body>
</html>
To complete the exercise, load parent.html (the red page) into your web browser. Click the
first hyperlink to open the yellow page in a second browser window. This happens because the
first hyperlink contains the attribute
target="yellow_page", as the following code from parent.
html
demonstrates:
<p><a href="yellow.html" target="yellow_page">Open</a> the Yellow Page in a
new window.<br />
Now return to the red page and click the second link. The blue page opens in a third browser
window. Note that the new windows probably won't be laid out like the ones shown in
Figure
14.2; they usually overlap each other. The following target="blue_page" statement in the
parent.html page is what causes the new window to open:
<a href="blue.html" target="blue_page">Open</a> the Blue Page in a new
window.</p>
The previous two examples opened each of the web pages in a new browser window. The
third link, however, uses the
target="yellow_page" statement to open the green page in the
file:///G|/1/0672328860/ch14lev1sec2.html (5 von 7) [19.12.2006 13:49:37]
Working with Linked Windows
window named yellow_page. You accomplish this using the following code in parent.html:
<p><a href="green.html" target="yellow_page">Replace</a> the yellow page
with the Green Page.</p>
Because you already opened the yellow_page window when you clicked the link for the yellow
page, the green page should replace the page that's already in it. To verify this, click the third
hyperlink on the red page. This replaces the contents of the yellow page (with the
yellow_page
target name) with the green page (
green.html), as shown in Figure 14.6.
Figure 14.6. green.html displayed in the web browser window named
green_page.
The
<base> Tag
When you're using the target attribute with links, you'll sometimes find that all or most of the
hyperlinks on a web page point to the same window. This is especially true when you're using
frames, as you'll discover in the following section.
In such cases, rather than including a
target attribute for each <a> tag, you can use another
tag,
<base>, to define a global target for all the links on a web page. The <base> tag is used as
follows:
<base target="window_name">
If you include the <base> tag in the <head> </head> block of a document, every <a> tag that
doesn't have a
target attribute will be directed to the window indicated by the base tag. For
example, if you had included the tag
<base target="yellow_page"> in the HTML source for
file:///G|/1/0672328860/ch14lev1sec2.html (6 von 7) [19.12.2006 13:49:37]
Working with Linked Windows
parent.html, the three hyperlinks could have been written the following way:
<html>
<head>
<title>Parent Window - Red</title>
<base target="yellow_page"> <! add base target="value" here >
</head>
<body bgcolor="#ff9999">
<h1>Parent Window - Red</h1>
<p>
<a href="yellow.html">Open</a> <! no need to include a target >
the Yellow Page in a new window.<br />
<a href="blue.html" target="blue_page">Open</a> the Blue Page in a new
window. </p>
<p><a href="green.html">Replace</a> <! no need to include a target >
the yellow page with the Green Page.</p>
</body>
</html>
In this case, yellow.html and green.html load into the default window assigned by the <base>
tag (
yellow_page); blue.html overrides the default by defining its own target window of
blue_page.
You also can override the window assigned with the
<base> tag by using one of two special
window names. If you use
target="_blank" in a hyperlink, it opens a new browser window that
doesn't have a name associated with it. Alternatively, if you use
target="_self", the current
window is used rather than the one defined by the
<base> tag.
Note
If you don't provide a target using the <base> tag and you don't indicate a target in a link's
<a> tag, the link will load the new document in the same frame as the link.
file:///G|/1/0672328860/ch14lev1sec2.html (7 von 7) [19.12.2006 13:49:37]
Working with Frames
Working with Frames
The introduction of frames in Netscape 2.0 heralded a new era for web publishers. With frames, you can
create web pages that look and feel entirely different from other pages. You can have tables of contents,
banners, footnotes, and sidebars, just to name a few common features.
At the same time, frames change what a "page" means to the browser and to your visitors. Unlike all
the preceding examples, which use a single HTML page to display a screen of information, a single
screen actually consists of a number of separate HTML documents that interact with each other.
Figure
14.7 shows how a minimum of five separate documents is needed to create the screen shown earlier in
Figure 14.1.
Figure 14.7. You must create a separate HTML document for each frame.
The first HTML document you need to create is called the frameset document. In this document, you
define the layout of your frames, and the locations of the documents to be initially loaded in each frame.
The document in
Figure 14.7 has three frames.
file:///G|/1/0672328860/ch14lev1sec3.html (1 von 7) [19.12.2006 13:49:38]
Working with Frames
Each of the three HTML documents other than the frameset document, the ones that load in the frames,
contain normal HTML tags that define the contents of each separate frame area. These documents are
referenced by the frameset document.
The <frameset> Tag
To create a frameset document, you begin with the <frameset> tag. When used in an HTML document,
the
<frameset> tag replaces the <body> tag, as shown in the following code:
<html>
<head>
<title>Page Title</title>
</head>
<frameset>
your frameset goes here
</frameset>
</html>
It's important that you understand up front how a frameset document differs from a normal HTML
document. If you include a
<frameset> tag in an HTML document, you cannot include a <body> tag also.
The two tags are mutually exclusive. In addition, no other formatting tags, hyperlinks, or document text
should be included in a frameset document. (The exception to this is the
<noframes> tag, which you'll
learn about later today in the section called, appropriately enough, "
The <noframes> Tag.") The
<frameset> tags contain only the definitions for the frames in this documentwhat's called the page's
frameset.
The HTML 4.01 specification supports the
<frameset> tag along with two possible attributes: cols and
rows.
The cols Attribute
When you define a <frameset> tag, you must include one of two attributes as part of the tag definition.
The first of these attributes is the
cols attribute, which takes the following form:
<frameset cols="column width, column width, ">
The cols attribute tells the browser to split the screen into a number of vertical frames whose widths are
defined by column width values separated by commas. You define the width of each frame in one of
three ways: explicitly in pixels, as a percentage of the total width of the
<frameset>, or with an asterisk
(
*). When you use the asterisk, the framescompatible browser uses as much space as possible for the
specified frame.
When included in a complete frame definition, the following
<frameset> tag creates a screen with three
vertical frames, as shown in
Figure 14.8. The fifth line in the following code example creates a left frame
100 pixels wide, a middle column that's 50% of the width of the screen, and a right column that uses all
the remaining space:
Input
file:///G|/1/0672328860/ch14lev1sec3.html (2 von 7) [19.12.2006 13:49:38]
Working with Frames
<html>
<head>
<title>Three Columns</title>
</head>
<frameset cols="100,50%,*">
<frame src="leftcol.html">
<frame src="midcol.html">
<frame src="rightcol.html">
</frameset>
</html>
Output
Figure 14.8. The cols attribute defines the number of vertical frames or
columns in a frameset.
Note
Because you're designing web pages for users with various screen sizes, you should use
absolute frame sizes sparingly. Whenever you do use an absolute size, ensure that one of
the other frames is defined using an
* to take up all the remaining screen space.
Tip
To define a frameset with three columns of equal width, use cols="*,*,*". This way, you
file:///G|/1/0672328860/ch14lev1sec3.html (3 von 7) [19.12.2006 13:49:38]
Working with Frames
won't have to mess around with percentages because frames-compatible browsers
automatically assign an equal amount of space to each frame assigned a width of
*.
The rows Attribute
The rows attribute works the same as the cols attribute, except that it splits the screen into horizontal
frames rather than vertical ones. To split the screen into two frames of equal height, as shown in
Figure
14.9, you would write the following:
Input
<html>
<head>
<title>Two Rows</title>
</head>
<frameset rows="50%,50%">
<frame src="toprow.html">
<frame src="botrow.html">
</frameset>
</html>
Alternatively, you could use the following line:
<frameset rows="*,*">
Output
Figure 14.9. The rows attribute defines the number of horizontal frames or
rows in a frameset.
file:///G|/1/0672328860/ch14lev1sec3.html (4 von 7) [19.12.2006 13:49:38]
Working with Frames
Note
If you try either of the preceding examples for yourself, you'll find that the <frameset> tag
doesn't appear to work. You get this result because there are no contents defined for the
rows or columns in the frameset. To define the contents, you need to use the
<frame> tag,
which is discussed in the next section.
The
<frame> Tag
After you have your basic frameset laid out, you need to associate an HTML document with each frame
by using the
<frame> tag, which takes the following form:
<frame src="document URL">
For each frame defined in the <frameset> tag, you must include a corresponding <frame> tag, as shown
in the following:
Input
<html>
<head>
<title>The FRAME Tag</title>
</head>
<frameset rows="*,*,*">
<frame src="document1.html" />
file:///G|/1/0672328860/ch14lev1sec3.html (5 von 7) [19.12.2006 13:49:38]
