Tự học HTML và CSS trong 1 giờ - part 53 pptx

You accomplish this using the following code in par-ent.html: Replace the yellow page with the Green Page.. This replaces the contents of the yellow page with the yellow_pagetarget name

Trang 1

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.htmlpage 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_pagewindow 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_pagetarget 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 targetattribute 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

Trang 2

In such cases, instead of including a targetattribute 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 targetattribute will be directed to the window indicated by the

basetag 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.htmlandgreen.htmlload into the default window assigned by the

<base>tag (yellow_page);blue.htmloverrides the default by defining its own target

17

Trang 3

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 docdoc-uments

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

Trang 4

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>

FIGURE 17.7

You must create a

separate HTML

document for each

frame.

17

HTML FILE Frame Definition

HTML FILE

2

4

Frame 1 Contents

HTML FILE Frame 4 Contents

Trang 5

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: colsandrows

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 colsattribute, which takes the following

form:

<frameset cols=“column width, column width, ”>

Thecolsattribute 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>

Trang 6

Output

FIGURE 17.8

Thecols attribute

defines the

num-ber of vertical

frames or columns

in a frameset.

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

Therowsattribute works the same as the colsattribute, 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>

TIP

Trang 7

Alternatively, you could use the following line:

<frameset rows=“*,*”>

Output

FIGURE 17.9

Therows 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”>

</frameset>

</html>

NOTE

Trang 8

This example defines a frameset with three horizontal frames of equal height (see Figure

17.10) The contents of document1.htmlare displayed in the first frame, the contents of

document2.htmlin the second frame, and the contents of document3.htmlin the third

frame

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

TIP

Trang 9

<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

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 frameborderattribute is used to enable or disable the

default, browser-generated border between frames, which is usually gray and has a

beveled edge framebordertakes 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

Trang 10

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>

<style type=”text/css” media=”screen”>

frame.middle {

border-top: 3px solid #cc3333;

border-bottom: 3px solid #cc3333;

}

</style>

</head>

<frame frameborder=”0” src=”document1.html”>

<frame frameborder=”0” class=”middle” src=”document2.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 borbor-der

turned on, it is displayed

<!DOCTYPE html>

<html>

<head>

</head>

NOTE

Định dạng
Số trang	10
Dung lượng	724,09 KB