Tự học HTML và CSS trong 1 giờ - part 52 pdf

LESSON 17 Working with Frames and Linked Windows In the early days of the Web, two significant limitations of web browsers were that they could only display one document in a browser win

Quiz

1 What’s the basic function of a web server?

2 How can you obtain an Internet connection?

3 What are default index files, and what’s the advantage of using them in all

directories?

4 What are some things that you should check immediately after you upload your

web pages?

5 Name some of the ways that you can promote your website

6 What’s a hit?

7 What are the advantages of using an all-in-one submission page to promote your

site?

Quiz Answers

1 A web server is a program that sits on a machine on the Internet (or an intranet) It

determines where to find files on a website and keeps track of where those files are

going

2 You can obtain an Internet connection through school, work, or commercial

Internet or web services, or you can set up your own web server

3 The default index file is loaded when a URL ends with a directory name rather

than a filename Typical examples of default index files are index.html,

index.htm, and default.htm If you use default filenames, you can use a URL

such as http://www.mysite.com/ rather than http://www.mysite.com/index.html to

get to the home page in the directory

4 Make sure that your browser can reach your web pages on the server, that you can

access the files on your website, and that your links and images work as expected

After you’ve determined that everything appears the way you think it should, have

486 LESSON 16:Using JavaScript Libraries

Exercises

1 Download jQuery and use the <script>tag to load it in a web page

2 Use jQuery to disable all the links on a web page

3 Use jQuery to cause a border to appear around all the links on a web page when

the user mouses over them Make sure to remove the borders when the user moves

the pointer away from the link

4 Try to add a link to a web page that uses AJAX to retrieve the local temperature

from a weather site for your city You’ll need to find the URL for a page with your

city’s weather on it, and then create the correct selector to extract only the

informa-tion you want from that page After you find the weather page, view the source on

it to figure out how to extract the information using a jQuery selector

16

This page intentionally left blank

LESSON 17

Working with Frames

and Linked Windows

In the early days of the Web, two significant limitations of web browsers

were that they could only display one document in a browser window at

a time and that sites couldn’t open more browser windows if needed

Frames enable you to divide the browser window into sections, each

con-taining a different document, and linked windows enable you to create

links that open pages in new browser windows Used properly, these two

techniques can make your website easier to navigate Unfortunately, they

can also be misused to make your site confusing, difficult to use, and

annoying to your users In this lesson, you’ll learn how to apply these

techniques to make your site more usable

You’ll learn all about the following topics:

n What frames are, how they can affect your layout, and who

sup-ports them

n How to work with linked windows

n How to work with frames

n How to create complex framesets

n Inline frames

What Are Frames?

In this lesson, you’ll learn about the tags that you can use to create frames There are two

ways to use frames The first is to divide the page into sections using a frameset and then

to load documents into each of the frames, and the second is to embed a second

docu-ment into an existing page using an inline frame Inline frames are like images or Flash

movies, they can be included anywhere within a page Over time, inline frames have

become more commonly used, and frames created using framesets have become less

commonly used HTML5 does not include support for frames created using framesets,

leaving only inline frames Browser support for framesets is still all but universal, but for

new projects, you should probably avoid using framesets whenever possible

Frames give you an entirely different level of layout control than you’ve had so far in this

book For example, take a look at the example in Figure 17.1

490 LESSON 17: Working with Frames and Linked Windows

FIGURE 17.1

A sample web

page with frames.

▼

Because the information displayed on the page is separated into individual frames, the

contents of a single frame can be updated without affecting the contents of any other

frame If you click one of the linked images in the left frame, for example, the contents

of the large frame on the right are automatically updated to display the details about the

subject you’ve selected When this update occurs, the contents of the left frame and the

bottom frame aren’t affected

Working with Linked Windows

Before you learn how to use frames, you need to learn about the targetattribute of the

<a>tag It enables you to direct a link to open a page in a different frame or window, and

learning how to use it is necessary to build sites with frames that work This attribute

takes the following form:

target=“window_name”

Usually, when you click a hyperlink, the page to which you’re linking replaces the

cur-rent page in the browser window When you use the targetattribute, you can open links

in new windows, or in existing windows other than the one that the link is in With

frames, you can use the targetattribute to display the linked page in a different frame

Thetargetattribute tells the web browser to display the information pointed to by a

hyperlink in a window called window_name Basically, you can call the new window

anything you want, except that you can’t use names that start with an underscore (_)

These names are reserved for a set of special targetvalues that you’ll learn about later

in the “Magic targetNames” section

When you use the targetattribute inside an <a>tag, the browser first checks whether a

window with the name window_name exists If it does, the document pointed to by the

hyperlink replaces the current contents of window_name On the other hand, if no

win-dow called winwin-dow_name currently exists, a new browser winwin-dow opens with that name

assigned to it Then the document pointed to by the hyperlink is loaded into the newly

created window

Task: Exercise 17.1: Working with Windows

Framesets rely on the targetattribute to load pages into specific frames in a frameset

Each of the hyperlinks in the following exercise uses the targetattribute to open a web

page in a different browser window The concepts you’ll learn here will help you

under-stand later how targeted hyperlinks work in a frameset

Working with Linked Windows 491

17

In this exercise, you create four separate HTML documents that use hyperlinks,

includ-ing the targetattribute You use these hyperlinks to open two new windows called

yellow_pageandblue_page, as shown in Figure 17.2 The top window is the original

web browser window (the red page), yellow_pageis at the bottom left, and blue_pageis

at the bottom right

492 LESSON 17: Working with Frames and Linked Windows

FIGURE 17.2

Using the

targetattribute

indicates that

links should open

new windows.

First, create the document to be displayed by the main web browser window, shown in

Figure 17.3, by opening your text editor of choice and entering the following lines of

code:

Input▼

<!DOCTYPE html>

<html>

<head>

<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> the yellow page

with the Green Page.</p>

</body>

</html>

Working with Linked Windows 493

17

Output

FIGURE 17.3

The parent window

(the red page).

This creates a light-red page that links to the other three pages Save this HTML source

asparent.html

Next, create a document called yellow.html(see Figure 17.4) by entering the following

code:

Input▼

<!DOCTYPE html>

<html>

<head>

<title>Yellow Page</title>

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

body {

background-color: #FFFF33;

}

</style>

</head>

<body>

<h1>Yellow Page</h1>

<p>This is the first target page Its target is <b>yellow_page</b>.</p>

</body>

Output

FIGURE 17.4

yellow.htmlweb

browser window

named

yellow_page.

494 LESSON 17: Working with Frames and Linked Windows

After saving yellow.html, create another document called blue.html(see Figure 17.5)

by entering the following code:

Input▼

<!DOCTYPE html>

<html>

<head>

<title>Blue Page</title>

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

body {

background-color: #99ccff;

}

</style>

</head>

<body>

<h1>Blue Page</h1>

<p>This is the second target page Its target is <b>blue_page</b>.</p>

</body>

</html>

Next, create a fourth document called green.html, which looks like the following:

<!DOCTYPE html>

<html>

<head>

<title>Green Page</title>

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

body {

background-color: #ccffcc;

}

</style>

</head>

<body>

<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

follow-ing code from parent.htmldemonstrates:

<p><a href=“yellow.html” target=“yellow_page”>Open</a> the Yellow Page in a

new window.<br />

Working with Linked Windows 495

17

Output

FIGURE 17.5

blue.html

displayed in

the web browser

window named

blue_window.