Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P54 pot

In Figure 14.15, the right section of the screen is split into two horizontal frames, and the third frame at the left of the page spans the entire height of the screen.. If you were to l

Trang 1

<title>Reason 4 - Out to Lunch</title>

</head>

<body bgcolor="#ffffff">

<h2><img src="happy.jpg" width="275" height="275" align="left">I'm out

to lunch.</h2>

</body>

</html>

The fifth page (reason5.html) looks like the following:

<head>

<title>Reason 5 - Boss's Office</title>

</head>

<h2><img src="scared.jpg" width="275" height="275" align="left">The boss

called me into his office.</h2>

</body>

</html>

The last main page (reason6.html) appears as follows:

<head>

<title>Reason 6 - I Don't Work Here Anymore</title>

</head>

<h2><img src="duh.jpg" width="275" height="275" align="left">I just

got fired.</h2>

</body>

</html>

Now you have the six pages that will appear in the main frame of the frameset You're finally ready to build the frameset itself

Task: Exercise 14.3 Combining rows and cols

Trang 2

To remind you of the basic layout of the frameset that you'll create, Figure 14.15 is another look at the complete page It provides a simple example of how you can combine framesets

to create complex designs

Output

Figure 14.15 The frameset with three frames: top, left, and main.

[View full size image]

Tip

When you're designing complex frame layouts, a storyboard is an invaluable

tool It helps you block out the structure of a frameset, and it can be

invaluable when you're adding hyperlinks (as you'll see in Exercise 14.5,

"Using Named Frames and Hyperlinks")

In Figure 14.15, the right section of the screen is split into two horizontal frames, and the third frame at the left of the page spans the entire height of the screen To create a

frameset document that describes this layout, open your text editor and enter the following basic HTML structural details:

<html>

<head>

Trang 3

<title>Why I'm Away Frameset</title>

</head>

<frameset>

</frameset>

</html>

Next, you must decide whether you need to use a rows or cols attribute in your base

<frameset> Look at your storyboardin this case Figure 14.15and work out whether any frame areas extend right across the screen or from the top to the bottom If any frames extend from the top to the bottom, as in this example, you need to start with a cols

frameset; otherwise, you need to start with a rows frameset On the other hand, if no

frames extend completely across the screen either vertically or horizontally, you should start with a cols frameset

To put it more simply, here are three easy-to-remember rules:

Note

The reasoning behind the use of the "left to right, use rows" rule relates to how

frames-compatible browsers create frames Each separate <frameset>

definition can split the screen (or a frame) either vertically or horizontally, but

not both ways For this reason, you need to define your framesets in a logical

order to ensure that you achieve the layout you want

In Figure 14.15, the left frame extends across the screen from top to bottom As a result, you need to start with a cols frameset by using the rules mentioned previously To define the base frameset, enter the following:

<frameset cols="125,*">

<frame src="choice.html"> <! loads the choices page into the left frame > <frame src="dummy.html"> <! this line is only temporary >

</frameset>

Writing this code splits the screen into two sections The first line defines a small frame at the left of the screen that is 125 pixels wide, and a large frame at the right of the screen that uses the rest of the available space

As mentioned earlier today, the frameset document itself doesn't describe the contents of each frame The documents specified in the src attribute of the <frame> actually contain the text, images, and tags displayed by the frameset You can see an example of this tag in the second and third lines of the preceding code The second line specifies the URL of the web page in the left frame (the choice.html page that you created earlier) The third line would display a web page named dummy.html (if you created one, that is), but we're just using this

as a placeholder for the next exercise

Trang 4

Task: Exercise 14.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 <frameset> 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.html page (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

rows attribute, as shown in the complete code:

<html>

<head>

</head>

<frame src="choice.html" <! this loads the choices page_into the left frame >

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

The embedded rows frameset 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

Note

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

frames-compliant browser Also, if you happen to have a copy of a web browser that isn't frames-compliant, try loading the document into it You shouldn't see anything onscreen

Task: Exercise 14.5 Using Named Frames and Hyperlinks

Trang 5

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

stage, you would see a screen similar to the one shown in Figure 14.15 Some of the text sizes and spacing might be slightly different, 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 really want it to do is to load each document into the larger right frame

Earlier today, you learned about the target attribute, 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 target attribute Rather than the target pointing 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 window name To do so, include a name attribute inside the <frame> tag, which takes the following form:

<frame src="document URL" name="frame name">

Therefore, to assign a name to each of the frames in the frameset.html document, you add the name attribute to each of the <frame> tags Your frameset page now looks like the

following, with the additions indicated with the shaded background:

<html>

<head>

</head>

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

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

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

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

</frameset>

This source code names the left frame "left", the top-right frame "top", and the bottom-right frame "main" Next, resave the updated frameset.html file, and you're just about finished with the example

Task: Exercise 14.6 Linking Documents to Individual Frames

Trang 6

Once you've named the frames, you have to fix the links in the choice.html page so that

they load the target pages in the main frame rather than the left frame

You might recall that the target attribute 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 left frame 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 html document points to the same frame In this case, you don't need to include

target="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 be able to load frameset html into your frames-compatible browser and view all your HTML reference documents by

selecting from the choices in the left frame

Tip

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

Task: Exercise 14.7 Adding Your noframes Content

Trang 7

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

framescompatible 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.html page At this point, your code looks like the following:

<html>

<head>

</head>

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

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

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

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

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 14.16

Output

Figure 14.16 This page appears when users view the frameset with

a browser that isn't framescompatible.

Trang 8

[View full size image]

Magic target Names

Now that you've learned what the target attribute does in a frameset, you should know that there are some special target names you can apply to a frameset

You can assign four special values to a target attribute, two of which (_blank and self) 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 14.2 lists the magic target names and describes their use

Table 14.2 Magic target Names

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 current document If the

current document has no parent, however, target="_self" will be used

Trang 9

target="_top" Forces the link to load into the full web browser window, replacing 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

target="_top" to the link will prevent this from occurring

Trang 10

Floating Frames

With Internet Explorer 3.0, Microsoft introduced a novel variation on frames: floating frames This

concept, which is a part of HTML 4.01, is somewhat different from the original frames idea that was introduced in Netscape

Floating frames have their advantages and disadvantages One advantage is that you can position a floating frame anywhere on a web page, just as you can with an image, a table, or any other web page element

Browser Support for Floating Frames

The authors of the HTML 4.01 frames specification included floating frames with some

hesitation According to the specification, you can use the <object> tag to achieve the same

effect as floating frames, so the inclusion of this type of frame is questionable Still, the tag

is included in the HTML 4.01 specification, and all versions of Internet Explorer since

version 3, Mozilla Firefox, Netscape 6 (and above), and Opera 5 (and above) all support it

Learning to use floating frames is worthwhile

Standard framesets enable you to specify alternative content that can be viewed when someone without

a frames-compatible browser navigates to a frameset Unfortunately, you don't have this option with the

With that warning out of the way, here's a brief run-through of how to create floating frames First, you define them by using the <iframe> tag Like images, these frames appear inline in the middle of the

body of an HTML document (hence the i in <iframe>) The <iframe> tag enables you to insert an HTML document in a frame anywhere in another HTML document

Table 14.3 shows how <iframe> takes the key attributesall of which, except for those indicated as

Internet Explorer extensions, appear in HTML 4.01

Table 14.3 Key Attributes

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

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