Frames work by splitting a browser window into two or more regions , and showing a different HTML page in each region. The first step to using frames is to create a frameset document, which holds the smaller Web pages and defines how the browser window should be split.
A frameset page isn't like an ordinary HTML page. It still starts with an <html> tag, and it includes a <head> section, where you can define the title for the page, but it doesn't continue with the familiar <body> tag, where you usually put the content of the page. Instead, it includes a <frameset> tag that divides the page into separate frames, and a <noframes> tag that supplies content that is shown if frames aren't viewable on the browser that's loading the pages. Here's a summary of the code you might see on a frameset page:
<html> <head> <title>A Sample Frames Page</title> </head> <frameset></frameset> <noframes></noframes> </html>
The <noframes> portion is the easiest to fill in. Just enter the HTML content you want to show if the browser doesn't support frames. Many Web sites include little more than a couple of lines of text, like this:
<noframes>This Web site uses frames and your browser doesn't support them.</noframes>
This approach, although common, isn't terribly helpful. Later in this chapter (Section 10.3.3), you'll learn how to include some much more respectable content in the <noframes> section, without going to much extra work.
Some of the reasons that a browser might not support frames include:
The browser is really old. This is incredibly rare today. Netscape's supported frames since version 2.
It's a mobile browser, like those used on small devices like cell phones. Of course, if you want to support these devices, you need to design your site with their small screens and limited display powers in mind.
The Web surfer is viewing-impaired and is using a screen-reading program (a program that "speaks" text on a Web page). To make the page accessible to screen readers, you should definitely use the <noframes> technique shown later on Section 10.3.3.
The information inside your <frameset> tags is the heart of your frameset page. It's where you decide how to split the browser window into rows or columns of specific sizes (with each row or column occupying its own frame). You define the width of each column using the cols attribute, or the height of each row using the rows attribute. For every column or row you want to add to your page, you need to add a measurement indicating its width or height, respectively. Here's an example that splits the page into two even columns:
<frameset cols="50%,50%"> </frameset>
Here's an example that creates three rows, with the middle section being the largest:
<frameset rows="25%,50%,25%"> </frameset>
Figure 10-2 shows what this example looks like in a browser.
|
In these examples, the size of each column or row is defined using a percentage value. For example, if you use 50 percent for a column, it will occupy half of the browser window.
Another option is to specify an exact pixel size. For example, here's a three-column example where the left and right columns are always 100 pixels each:
<frameset cols="100,*,100"> </frameset>
This example introduces another nifty trickusing the asterisk (*). You use this to tell the browser to make that frame occupy the remaining space. For example, if the browser window is 800 pixels wide, you'll have two 100-pixel columns on the flanks and a 600-pixel column in the leftover space. Figure 10-3 shows what this looks like.
|
As you've probably figured out by now, frames always occupy rectangular regions of a browser window. There's no way to create frames with fancy shapes . However, that doesn't mean you can't create the illusion of a shaped frame. All you need to do is create a regular rectangular frame and use the background-image property discussed in Chapter 7 (Section 7.2.5) to add some sort of shaped or curved background picture behind your frame. Figure 10-4 shows an example.
|
Splitting the window into frames is a good first step, but in order to see some actual content on your pages, you'll need to define the frame source . The frame source is the HTML document that contains the content you want to show in an individual frame.
To define the frame source, you need to add one <frame> tag for each column and row your frameset includes. You add these <frame> tags inside the <frameset> tags, keeping the same order that was used to list the columns (left to right) or rows (top to bottom).
Here's the basic skeleton for a page with two frames:
<frameset cols="30%,*"> <frame> <frame> </frameset>
To link your page to the frame you want to incorporate , you can set various attributes of the <frame> tag. The most important are src (which lists the Web page file name ) and name (which gives the frame a descriptive title you can use to refer to the frame later). Here's a typical example of a complete frameset page:
<html> <head> <title>A Sample Frames Page</title> </head> <frameset cols="30%,*"> <frame name="Menu" src="menu.htm"> <frame name="Main" src="welcome.htm"> </frameset> </html>
In this case, it makes sense to assume that the Menu frame on the left (that is, the first frame listed) will always show the same menu from the menu.htm page. On the other hand, the Main frame on the right will be reused to show all kinds of different contentinitially it shows the welcome page, but that will change as the reader surfs through the Web site. That's why the frame name and the HTML file name don't match in the second <frame> tag.
To try this example out, save the frameset page using the file name index.htm .
Next, create the menu.htm and welcome.htm pages. All the menu.htm page needs is a simple list of links, as shown here:
<html> <head><title></title></head> <body> <a href="welcome.htm">Welcome</a><br> <a href="page1.htm">Page 1</a><br> <a href="page2.htm">Page 2</a><br> <a href="page3.htm">Page 3</a> </body> </html>
When displaying frames, the browser uses the title that's defined in the frameset page. That means the title in the menu.htm and welcome.htm pages has no effect. However, it's a good idea to still include the <title> element, because it's a required part of HTML. Additionally, the title information sometimes appears in search engine listings.
The welcome.htm page can show some straightforward content:
<html> <head><title></title></head> <body> <h1>Welcome</h1> <p>This simple welcome page shows how two frames can be joined in happy matrimony. On the left is a menu with a set of links. Over here on the right, there's a heading and an ordinary paragraph, which makes up a content page.</p> </body> </html>
As always, you could use styles to make these two pieces look a lot more impressive (see Chapter 6 for more on styles). But these pages are enough to give you an idea of how all this frames business works. Assuming all the pages are in the same folder, you'll see a single integrated window when you request index.htm (see Figure 10-5).
|
There's actually a small but important flaw in the frameset shown in the previous example. When you click one of the navigation links, the target page of the link opens in the frame where the link is placed (see Figure 10-6).
To correct this problem, you need to change your links so that they explicitly tell the browser to open the target page in the Main frame. To take care of this, you need to add the target attribute to the <a> tag. Use this attribute to supply the name of the frame where the page should be displayed.
|
Here's how you should rewrite the menu.htm page to target your links:
<a href="welcome.htm" target="Main" >Welcome</a><br> <a href="page1.htm" target="Main" >Page 1</a><br> <a href="page2.htm" target="Main" >Page 2</a><br> <a href="page3.htm" target="Main" >Page 3</a>
Figure 10-7 shows the corrected behavior.
|
Rather than changing every link in your page, it would be nice if there were a way to set a single target frame that would apply to every link in the page. Fortunately, HTML makes this easy with the <base> tag. Using the < base > tag, you could rewrite the menu page like this:
<html> <head> <base target="Main"> <title></title> </head> <body> <a href="welcome.htm">Welcome</a><br> <a href="page1.htm">Page 1</a><br> <a href="page2.htm">Page 2</a><br> <a href="page3.htm">Page 3</a> </body> </html>
There are also four reserved target names that have special meanings. You can use these target names with individual links or with the <base> tag instead of naming an actual frame. For example, you can use these targets to open a pop-up window, as shown here:
<a href="contact.htm" target="_blank" >Welcome</a><br>
Table 10-1 has the list of these target names.
Name | Description |
---|---|
_top | Opens the target in the "top" level of the window. That means every frame is cleared away to make room for the new document. It's equivalent to typing the URL of the target page into the browser's address box. |
_parent | Opens the target in the frameset that contains the current frame. In the examples you've seen so far, there's only one frameset, so this is equivalent to the _top target. However, if you start deploying nested frames (Section 10.3.5) the _parent target comes in handy. |
_self | Opens the target in the current frame. This is the standard behavior, unless you've changed it using the <base> tag. |
_blank | Opens the target in a brand new pop-up window. This technique should be used sparingly, because it can quickly litter the unsuspecting visitor's monitor with a confusing mess of extra windows . |