Tự học HTML và CSS trong 1 giờ - part 53 pptx
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 (724.09 KB, 10 trang )
ptg
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 17.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 window named yellow_page. You accomplish this using the following code in par-
ent.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 17.6.
496
LESSON 17: Working with Frames and Linked Windows
FIGURE 17.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 should point to the same window. This is especially true
when you’re using frames, as you’ll discover in the following section.
Download from www.wowebook.com
ptg
In such cases, instead of 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 parent.html, the three hyperlinks could have been written as fol-
lows:
<!DOCTYPE html>
<html>
<head>
<title>Parent Window - Red</title>
<style type=”text/css” media=”screen”>
body {
background-color: #ff9999;
}
</style>
<base target=”yellow_page”> <!— add base target=”value” here —>
</head>
<body>
<h1>Parent Window - Red</h1>
<p><a href=”yellow.html” target=”yellow_page”>Open</a>
<!— no need to include a target —>
the Yellow Page in a new window.</p>
<p><a href=”blue.html” target=”blue_page”>Open</a> the Blue Page in a new
window.</p>
<p><a href=”green.html” target=”yellow_page”>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.
Working with Linked Windows
497
17
Download from www.wowebook.com
ptg
498
LESSON 17: Working with Frames and Linked Windows
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 doc-
ument in the same frame or window as the link.
Working with Frames
Frames make it possible to split a single web “page” into multiple independent parts,
each of which can display a document on its own. When frames were originally intro-
duced, this was a much bigger deal than it is today. One of the key benefits of frames is
that they enable you to make part of a site visible all the time even while other parts can
be scrolled out of view. This can now be done using CSS positioning. Frames enable you
to load new content into one section of a layout while leaving the rest of the page in
place, but that can be accomplished using JavaScript.
That is not to say that there’s no place for the use of frames any more, but they are much
less popular than they were in their heyday. There are some situations where frames are
absolutely the best solution to the problem at hand, but these days there are a lot of solid
alternatives, too.
Working with frames involves describing the frame layout and then choosing which doc-
uments will be displayed in each frame. Figure 17.7 shows how five separate documents
are needed to create the screen shown earlier in Figure 17.1.
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 17.7 has three 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 frame. These
documents are referenced by the frameset document.
NOTE
Download from www.wowebook.com
ptg
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:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<frameset>
your frameset goes here
</frameset>
</html>
It’s important that you understand upfront how a frameset document differs from a nor-
mal HTML document. If you include a <frameset> tag in an HTML document, you can-
not 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 learn about later in this lesson in
FIGURE 17.7
You must create a
separate HTML
document for each
frame.
Working with Frames
499
17
HTML FILE
Frame Definition
HTML FILE
13
2
4
Frame 1 Contents
HTML FILE
Frame 4 Contents
HTML FILE
Frame 3 Contents
HTML FILE
Frame 2 Contents
Download from www.wowebook.com
ptg
the section called, appropriately enough, “The <noframes> Tag.”) The <frameset> tags
contain only the definitions for the frames in this document—what’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 frames-
compatible browser uses as much space as possible for that frame.
When included in a complete frame definition, the following <frameset> tag splits the
browser into three vertical frames, as shown in Figure 17.8. The fifth line in the follow-
ing code example creates a left frame 100 pixels wide, a middle column that’s 50% of
the width of the browser, and a right column that uses all the remaining space:
Input ▼
<!DOCTYPE html>
<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>
500
LESSON 17: Working with Frames and Linked Windows
Download from www.wowebook.com
ptg
Output .
FIGURE 17.8
The cols attribute
defines the num-
ber of vertical
frames or columns
in a frameset.
Working with Frames
501
17
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.
NOTE
To define a frameset with three columns of equal width, use
cols=“*,*,*”. This way, you 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 17.9, you would write the following:
Input ▼
<!DOCTYPE html>
<html>
<head>
<title>Two Rows</title>
</head>
<frameset rows=”50%,50%”>
<frame src=”toprow.html”>
<frame src=”bottomrow.html”>
</frameset>
</html>
TIP
Download from www.wowebook.com
ptg
Alternatively, you could use the following line:
<frameset rows=“*,*”>
502
LESSON 17: Working with Frames and Linked Windows
Output .
FIGURE 17.9
The rows attribute
defines the num-
ber of horizontal
frames or rows in
a frameset.
If you try either of the preceding examples, 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 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 ▼
<!DOCTYPE html>
<html>
<head>
<title>The FRAME Tag</title>
</head>
<frameset rows=”*,*,*”>
<frame src=”document1.html”>
<frame src=”document2.html”>
<frame src=”document3.html”>
</frameset>
</html>
NOTE
Download from www.wowebook.com
ptg
This example defines a frameset with three horizontal frames of equal height (see Figure
17.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.
Working with Frames
503
17
Output .
FIGURE 17.10
You use the
<frame> tag
to define the
contents of each
frame.
When you’re creating frameset documents, you might find it help-
ful 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.
The <noframes> Tag
What happens if a browser that doesn’t support frames navigates to a frameset docu-
ment? 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:
<!DOCTYPE html>
<html>
<head>
<title>Frameset with No Frames Content</title>
</head>
TIP
Download from www.wowebook.com
ptg
<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 in this lesson, you add some <noframes> content
to a frameset.
504
LESSON 17: Working with Frames and Linked Windows
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.
You might wonder which browsers lack frame support these days. The answer is that
browsers on mobile browsers often do not support them. These days you should take
mobile devices into account when you create websites, because their use is growing
rapidly.
Changing Frame Borders
Notice that all the frames in this lesson have thick borders separating them. A number of
attributes can be set to control the appearance of frame borders or prevent them from
appearing altogether.
Start with the <frame> tag. The frameborder attribute is used to enable or disable the
default, browser-generated border between frames, which is usually gray and has a
beveled edge. frameborder takes two possible values: 1 (to display borders) or 0 (to turn
off the display of borders).
Frames can be styled using Cascading Style Sheets (CSS), so if you want to add your
own border to a frame, disable the browser-supplied borders using the frameborder
attribute and add your own using the CSS border property.
NOTE
Download from www.wowebook.com
ptg
Changing Frame Borders
505
17
If you turn off the border, frames-compatible browsers won’t dis-
play its default three-dimensional border. However, a space will
still be left for the border.
For example, the following code adds a deep red border around the middle frame in the
frameset using CSS:
<!DOCTYPE html>
<html>
<head>
<title>The FRAME Tag</title>
<style type=”text/css” media=”screen”>
frame.middle {
border-top: 3px solid #cc3333;
border-bottom: 3px solid #cc3333;
}
</style>
</head>
<frameset rows=”*,*,*”>
<frame frameborder=”0” src=”document1.html”>
<frame frameborder=”0” class=”middle” src=”document2.html”>
<frame frameborder=”0” src=”document3.html”>
</frameset>
</html>
As you can see, you can use classes (and IDs) with frames just as you can with other
HTML elements. Of course, there’s room for confusion when borders are defined. In the
following frameset definition, a conflict arises because the top frame has the frame bor-
der enabled, but the middle frame does not. In this case, if either frame has the border
turned on, it is displayed.
<!DOCTYPE html>
<html>
<head>
<title>The FRAME Tag</title>
</head>
<frameset rows=”*,*,*”>
<frame frameborder=”1” src=”document1.html”>
<frame frameborder=”0” src=”document2.html”>
<frame frameborder=”0”
src=”document3.html”>
</frameset>
</html>
NOTE
Download from www.wowebook.com
