Section 10.2. Frame Basics

10.2. Frame Basics

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.

10.2.1. Defining the Frameset

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.

Figure 10-2. These figures show the same frameset, with a 25/50/25 percent split. Because frame size was set using a percent value (rather than specifying an exact pixel size ), all the frames get resized proportionately when the browser window is stretched .


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.

Figure 10-3. In this example, the frameset has a fixed 100-pixel frame on either side, and a middle frame that gets the remaining space. When the browser window is resized, the only frame that widens is the one in the middle.



Note: If you specify fixed pixel sizes for every row or column, the browser gives them the requested size and then checks if there's more space left over in the browser window. If there is, the browser expands all frames proportionately. This probably isn't the effect you want, so it's a good idea to use the asterisk to give all the extra space to a specific frame.

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.

Figure 10-4. You can create the illusion of a curved frame by adding the correct background image, as shown here.


10.2.2. Putting Documents in a Frameset

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.


Tip: When you supply the source for a frame, you follow all the same rules you follow when supplying the source for an image or hyperlink. That means you include just the file name if the file is in the same folder as the current page, or you can use a relative or absolute path (see Section 8.1.1).

To try this example out, save the frameset page using the file name index.htm .


Tip: Many Web servers treat index.htm as the entry point of your Web site. That means they send it to the browser automatically if they receive a request that doesn't specify a page. See Section 3.2 in Chapter 3 for more.

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.


Note: In the examples in this chapter, the <title> tag is left blank if it won't appear in a browser. That way, you can quickly sort out which titles are most important.

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

Figure 10-5. To display the frames page index.htm, the browser needs to request two separate pages. These documents are then shown in different frames in the same window.


10.2.3. Targeting Frames

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.

Figure 10-6. Here's what happens when you click the Page 1 link on the left-hand frame shown in Figure 10-5. The target page (page1.htm) appears, but in the frame where the menu bar used to be. Now you're stuck, with no navigation controls to move around.


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.

Figure 10-7. Once you add the target attribute to the <a> tag, menu links open the target in the Main frame on the right, keeping the menu links visible at all times.


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.

Table 10-1. Reserved 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 .




Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
EAN: N/A
Year: 2003
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net