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

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 want it to do

Trang 1

▼ Task: Exercise 17.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

<frame-set>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.htmlpage (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 rowsattribute, as shown in the complete code:

<!DOCTYPE html>

<html>

<head>

<title>Why I’m Away</title>

</head>

<frameset cols=”125,*”>

<! this loads the choices page into the left frame >

<frame src=”choice.html”>

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

</html>

The embedded rowsframeset 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

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 in your

browser

NOTE

▲

Trang 2

▼ Task: Exercise 17.5: Using Named Frames and Hyperlinks

If you were to load your frameset.htmlpage into a frames-compatible browser at this

stage, you would see a screen similar to the one shown in Figure 17.15 Some of the text

sizes and spacing might differ slightly, 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 want it to do is to load each document into the

larger right frame

Earlier in this lesson, you learned about the targetattribute, 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 targetattribute Instead of the targetpointing 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

win-dow name To do so, include a nameattribute inside the <frame>tag, which takes the

fol-lowing form:

<frame src=“document URL” name=“frame name”>

Therefore, to assign a name to each of the frames in the frameset.htmldocument, you

add the nameattribute to each of the <frame>tags Your frameset page now looks like the

following, with the additions indicated with the shaded background:

<!DOCTYPE html>

<html>

<head>

</head>

<! this loads the choices page into the left frame >

<frame src=”choice.html” name=”left”>

<frame src=”away.html” name=”top”> <! has been replaced >

<frame src=”reason1.html” name=”main”> <! with an embedded >

</frameset>

</html>

This source code names the left frame “left”, the top-right frame “top”, and the

bot-tom-right frame “main” Next, resave the updated frameset.htmlfile, and you’re just

about finished with the example

17

▲

Trang 3

▼ Task: Exercise 17.6: Linking Documents to Individual Frames

After you’ve named the frames, you have to fix the links in the choice.htmlpage so that

they load the target pages in the mainframe rather than the leftframe

You might recall that the targetattribute 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 leftframe 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>

Alternatively, you could use the <base target=“value”>tag because every tag in the

choice.htmldocument points to the same frame In that case, you wouldn’t need to

includetarget=“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 load frameset.html

into your frames-compatible browser and view all your HTML reference documents by

selecting from the choices in the left frame

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.

TIP

▲

Trang 4

▼ Task: Exercise 17.7: Adding Your noframes Content

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

frames-compatible 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.htmlpage At this point, your code looks like the

fol-lowing:

<!DOCTYPE html>

<html>

<head>

</head>

<!— this loads the choices page into the left frame —>

<frame src=”choice.html” name=”left”>

<frame src=”away.html” name=”top”> <! has been replaced >

<frame src=”reason1.html” name=”main”> <! with an embedded >

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

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

17

Trang 5

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 17.16

Output

FIGURE 17.16

This page appears

when users view

the frameset with

a browser that

isn’t

frames-compatible.

▲

Now that you’ve learned what the targetattribute does in a frameset, you should know

you can apply some special target names to a frameset

You can assign four special values to a targetattribute, two of which (_blankandself)

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 17.2 lists the magic targetnames and describes their use

TABLE 17.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

cur-rent document If the curcur-rent document has no pacur-rent, how-ever, target=“_self” will be used.

target=“_top” Forces the link to load into the full web browser window,

replac-ing 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

Trang 6

Inline Frames

The main advantage of inline frames is that is that you can position them anywhere on a

web page, just as you can other elements like images or Flash movies You can

incorpo-rate content from another page or even another site into a page in a seamless way

through the use of inline frames Inline frames, which are specified using the <iframe>

tag, are commonly the means by which “widgets” offered by popular websites are

incor-porated into other websites For example, sites like Twitter and Facebook offer widgets

that you can incorporate into your own site that are implemented using inline frames

Here’s a brief run-through of how to create floating frames First, you define them using

the<iframe>tag Like images, these frames appear inline in the middle of the body of

an HTML document (hence the i for inline) The <iframe>tag supports attributes like

src, which contains the URL of the document to be displayed in the frame, and height

andwidth, which control the size of the frame

Table 17.3 lists the attributes of the <iframe>element

TABLE 17.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.

src Specifies the URL of the HTML document to be displayed in the frame.

name Specifies the name of the frame for the purpose of linking and

targeting.

frameborder Indicates whether the frame should display a border A value of 1

indicates the presence of a border, and a value of 0 indicates no border should be displayed.

marginwidth Specifies the margin size for the left and right sides of the frame in

pixels.

marginheight Specifies the size of the top and bottom margins in pixels.

noresize Indicates that the frame should not be resizable by the user (Internet

Explorer extension).

scrolling As with the <frame> tag, indicates whether the inline frame should

include scrollbars (This attribute can take the values yes , no , or auto ; the default is auto )

vspace Specifies the height of the margin (Internet Explorer extension).

hspace Specifies the width of the margin (Internet Explorer extension).

17

Trang 7

TABLE 17.3 Continued

Attribute Description

longdesc The URL for a page containing a long description of the contents of the

iframe.align As with the <img> tag, specifies the positioning of the frame with respect to the text line in which it occurs Possible values include left , middle , right , top , and bottom , which is the default value absbottom , absmiddle , baseline , and texttop are available as Internet Explorer extensions Deprecated in favor of CSS

Because you know how to use both regular frames and inline images, using the <iframe>

tag is fairly easy The following code displays one way to use the Away from My Desk

pages with a floating frame In this example, you begin by creating a page with a red

background The links that the user clicks appear on a single line, centered above the

iframe For clarity, I’ve placed each of the links on a separate line of code

Following the links (which target the floating frame named “reason”), the code for the

floating frame appears within a centered <div>element As you can see in the HTML

below, the floating frame will be centered on the page and will measure 450 pixels wide

by 105 pixels high:

Input▼

<!DOCTYPE html>

<html>

<head>

<title>I’m Away From My Desk</title>

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

body { background-color: #ffcc99; }

</style>

</head>

<body>

<h1>I’m away from my desk because </h1>

<p style=”text-align: center”>

<a href=”reason1.html” target=”reason”>Reason 1</a> |

<a href=”reason6.html” target=”reason”>Reason 6</a>

</p>

<div style=”margin: 0 auto; width: 450px;”>

<iframe name=”reason” src=”reason1.html” style=”width: 450px; height:

105px”></iframe>

</div>

Trang 8

Figure 17.17 shows the result

17

Output

FIGURE 17.17

An inline (or

float-ing) frame.

Opening Linked Windows with JavaScript

Pop-up windows are used all over the Web They are often used to display

advertise-ments, but they can be used for all sorts of other things, as well, such as creating a

sepa-rate window to show help text in an application or to display a larger version of a graph

that’s embedded in a document You’ve seen how you can use the targetattribute to

open a link in a new window, but that approach isn’t flexible You can’t control the size

of the window being displayed, nor which browser interface controls are displayed

Fortunately, with JavaScript you can take more control of the process of creating new

windows You’ve already learned that one of the objects supported by JavaScript is

win-dow It refers to the window that’s executing the script To open a new window, you use

theopenmethod of the windowobject Here’s a JavaScript function that opens a window:

function popup(url) {

mywindow = window.open(url, ‘name’, ‘height=200,width=400’);

return false;

}

The function accepts the URL for the document to be displayed in the new window as an

argument It creates a new window using the window.openfunction, and assigns that new

window to a variable named mywindow (I explain why we assign the new window to a

variable in a bit.)

The three arguments to the function are the URL to be displayed in the window, the

name for the window, and a list of settings for the window In this case, I indicate that I

want the window to be 400 pixels wide and 200 pixels tall The name is important

because if other links target a window with the same name, either via the window.open()

function or the targetattribute, they’ll appear in that window

Trang 9

At the end of the function, I return false That’s necessary so that the event handler used

to call the function is stopped To illustrate what I mean, it’s necessary to explain how

this function is called Instead of using the targetattribute in the <a>tag, the onclick

handler is used, as follows:

<a href=“whatever.html” target=”_blank” onclick=“popup(‘whatever.html’)”>Pop

up</a>

Ordinarily, when a user clicks the link, the browser calls the function and then goes right

back to whatever it was doing before, navigating to the document specified in the href

attribute Returning falsein the popup()function tells the browser not to continue what

it was doing, so the new window is opened by the function, and the browser doesn’t

fol-low the link If a user who had JavaScript turned off visited the page, the link to

what-ever.htmlwould still open in a new window because I included the target attribute, too

In the preceding example, I specified the heightandwidthsettings for the new window

There are several more options available as well, which are listed in Table 17.4

TABLE 17.4 Settings for Pop-Up Windows

Setting Purpose

height Height of the window in pixels.

width Width of the window in pixels.

resizable Enable window resizing.

scrollbars Display scrollbars.

status Display the browser status bar.

toolbar Display the browser toolbar.

location Display the browser’s location bar.

menubar Display the browser’s menu bar (Not applicable on Mac OS X.).

left Left coordinate of the new window onscreen (in pixels) By

default, pop-up windows are placed slightly to the right of the spawning window.

top Top coordinate of the new window onscreen (in pixels) By

default, pop-up windows are placed slightly below the top of the spawning window.

When you specify the settings for a window, you must include them in a

comma-separated list, with no spaces anywhere For the settings that allow you to enable or

disable a browser interface component, the valid values are onoroff Here’s a valid list

of settings:

status=off,toolbar=off,location=off,left=200,top=100,width=300,height=300

Trang 10

Here’s an invalid list of settings:

status=off, toolbar=off, location=false, top=100

Including spaces (or carriage returns) anywhere in your list will cause problems It’s also

worth noting that when you provide settings for a new window, the browser

automati-cally assumes a default of offfor any on/off settings that you don’t include So, you can

leave out anything you want to turn off

Here’s a complete example that uses JavaScript to create a new window:

<!DOCTYPE html>

<html>

<head>

<title>Popup example</title>

<script type=”text/javascript”>

var mywindow = window.open(url, ‘name’, ‘height=200,width=400’);

return false;

}

</script>

</head>

<body>

<h1>Popup Example</h1>

<p>

<a href=”popup.html” onclick=”popup(this.href)”>Launch popup</a>

</p>

</body>

</html>

When a user clicks the Launch popup link, a new 200x400 pixel window appears with

the contents of popup.html

The unobtrusive approach is to skip the onclickattribute entirely and bind the popup()

function to the link in your JavaScript code First, change the link on the page to look

like this:

<a href=“popup.html” id=”launchpopup”>Launch popup</a>

Then you should edit the <script>tag so that it looks like this:

<script type=”text/javascript”>

var mywindow = window.open(url, ‘name’, ‘height=200,width=400’);

return false;

}

window.onload = function () {

var link = document.getElementById(“launchpopup”);

link.onclick = function () {

return popup(this.href);

17

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