Creating Complex Framesets

The framesets you've learned about so far are the most basic types of frames that can be displayed. In day-to-day use, however, you'll rarely use these basic frame designs. On all but the simplest sites, you'll most likely want to use more complex framesets.

Therefore, to help you understand the possible combinations of frames, links, images, and documents that can be used by a website, this section will explore complex framesets.

Task: Exercise 14.2. Creating the Content Pages for Your Frameset

Most commonly, framesets provide navigation bars that keep navigational elements in view as the user scrolls through the contents of the document. By far, the most common place to present the navigation bars is on the left side of the browser window. Each time the visitor clicks a link in the left navigation frame, the content in the main frame displays the selected page. The (very silly) frameset that you'll create in this exercise demonstrates this technique. Although it's not a really practical example, it's simple, fun, and demonstrates the very same techniques you would use for a navigation bar.

When you design a web page that uses frames, you normally design the frameset before you go through all the trouble of designing the content that goes into it. That's because you'll want to know how big your frames are going to be before you start designing graphics and other page content to put into them.

I'm doing things a little backward here, but for good reason. It may help you to better understand how things fit together if you see real content in the frames as you design the frameset. For this reason, I'll have you design the content first.

The following content pages don't include any of the frameset tags discussed so far. There are eight pages in all, but I promise that I'll keep the code for these pages really brief. Ready?

Tip

When you lay out the basic structure of a frameset, you don't normally want to be bothered with details such as the actual contents of the frames. However, your frameset won't be displayed properly when it's loaded into a frames-compatible browser for testing unless you define <frame> tags that include valid documents. If you want to design a frameset before you create the content, you can create a small empty HTML document called dummy.html and use it for all your frame testing.

The frameset that you'll create in Exercises 14.3 through 14.7 consists of three frames. The layout of the frameset will be as shown in Figure 14.11. The frameset page loads first and instructs the browser to divide the browser window into three frames. Next, it loads the three pages that appear in the top, left, and main frames. Finally, if a user browses to the frameset without a frames-compatible browser, an alternative page will appear.

Figure 14.11. You'll create a frameset that consists of three frames: top, left, and main.

The top frame always displays the same web pageaway.html. The choices.html page that appears in the frame on the left side contains a list of links to six different pages named reason1.html through reason6.html. Each of these six pages will load into the main frame on the bottom-right portion of the frameset.

Start with the page displayed in the top frame. This page will always appear in the frameset. Here you can include any information you want to display permanently as visitors browse through your site. Real-world examples for the content of this frame include the name of your website, a site logo, a link to your email address, or other similar content. Type in the following code and save it to your hard drive as away.html:

<html> <head> <title>I'm Away from My Desk Because</title> </head> <body bgcolor="#cc6600" text="#000000"> <h3>I'm Away from My Desk, because ... </h3> </body> </html>

Figure 14.12 shows this page.

Figure 14.12. The top frame in the frameset.

Next, you'll create the left frame in the frameset. On real websites, this is typically the frame used for text or image navigation links that take your visitors to several different key pages on your site. For example, a personal site might have a navigation bar that takes its visitors to a home page, a guest book, a links page, and other sections of interest. A corporate or business site could contain links for products, customer support, frequently asked questions, employment opportunities, and so on.

The contents page in the following example works exactly the same way that a realworld navigation bar does. When the appropriate link is selected, it displays one of the six pages in the main frame of the frameset. The contents page contains links to six pages, reason1.html through reason6.html, which you'll create next.

After you enter the following code into a new page, save it to your hard drive in the same directory as the first page and name it choice.html:

Input

<html> <head> <title>Reason I'm Out</title> </head> <body bgcolor="#006699" text="#ffcc66" link="#ffffff" vlink="#66ccff" alink="#ff6666"> <p>Select a reason:</p> <hr /> <p><a href="reason1.html">Reason 1</a></p> <p><a href="reason2.html">Reason 2</a></p> <p><a href="reason3.html">Reason 3</a></p> <p><a href="reason4.html">Reason 4</a></p> <p><a href="reason5.html">Reason 5</a></p> <p><a href="reason6.html">Reason 6</a></p> </body> </html>

Your page should look as shown in Figure 14.13 when you open it in a browser.

Figure 14.13. The left frame in the frameset.

Now you need to create the six pages that will appear in the main frame when the visitor selects one of the links in the contents frame. The main frame is designed to display pages that normally you would display in a full browser window. However, if you're going to display your pages in a frameset that has a left navigation bar, you'll have to account for the reduced size of the frame in your design.

To keep the page examples relatively easy, I've given them all the same basic appearance. This means that the code for all of these pages is pretty much the same. The only items that change from page to page are the following:

The title of the page.
The description of my current mood.
The text that describes what each image means.

To create the first of the six pages that will appear in the main frame, type the following code into a new page and save it as reason1.html:

Input

<html> <head> <title>Reason 1 - Forgot My Lunch</title> </head> <body bgcolor="#ffffff"> <h2><img src="/books/2/631/1/html/2/uhoh.jpg" width="275" height="275" align="left">I forgot my lunch at home.</h2> </body> </html>

Figure 14.14 shows what this page should look like in a browser.

Output

Figure 14.14. The first of the six pages that appear in the main frame.

You code the remaining five pages for the main frame similarly. Modify the code you just created to build the second of the six main pages. The only differences from the previous code (reason1.html) are shown with a gray background. Save the new page as reason2.html. The complete code appears as follows:

<html> <head> <title>Reason 2 - By the Water Cooler</title> </head> <body bgcolor="#ffffff"> <h2><img src="/books/2/631/1/html/2/flirty.jpg" width="275" height="275" align="left">I'm flirting by the water cooler.</h2> </body> </html>

For the third page, modify the code again and save it as reason3.html. The complete code appears as follows:

<html> <head> <title>Reason 3 - Don't Ask!</title> </head> <body bgcolor="#ffffff"> <h2><img src="/books/2/631/1/html/2/grumpy.jpg" width="275" height="275" align="left">None of  your business!</h2> </body> </html>

Here's the fourth page (reason4.html):

<head> <title>Reason 4 - Out to Lunch</title> </head> <body bgcolor="#ffffff"> <h2><img src="/books/2/631/1/html/2/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> <body bgcolor="#ffffff"> <h2><img src="/books/2/631/1/html/2/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> <body bgcolor="#ffffff"> <h2><img src="/books/2/631/1/html/2/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`

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.

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

Left to right, use rows
Top to bottom, use cols
Can't decide, use cols

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="/books/2/631/1/html/2/choice.html"> <!-- loads the choices page into the left frame -->  <frame src="/books/2/631/1/html/2/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.

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> <title>Why I'm Away Frameset</title> </head> <frameset cols="125,*">  <frame src="/books/2/631/1/html/2/choice.html" <!-- this loads the choices page_into the left frame      -->  <frameset rows="60,*">   <!-- the frame for column 2 -->   <frame src="/books/2/631/1/html/2/away.html"> <!-- has been replaced -->   <frame src="/books/2/631/1/html/2/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

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> <title>Why I'm Away Frameset</title> </head> <frameset cols="125,*">  <frame src="/books/2/631/1/html/2/choice.html" name="left">  <!-- this loads the choices page into the left frame -->   <frameset rows="60,*">    <!-- the frame for column 2 -->    <frame src="/books/2/631/1/html/2/away.html" name="top"> <!-- has been replaced -->    <frame src="/books/2/631/1/html/2/reason1.html" name="main"> <!-- with an embedded -->   </frameset>         <!-- frameset block --> </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

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> <p><a href="reason2.html" target="main">Reason 2</a></p> <p><a href="reason3.html" target="main">Reason 3</a></p> <p><a href="reason4.html" target="main">Reason 4</a></p> <p><a href="reason5.html" target="main">Reason 5</a></p> <p><a href="reason6.html" target="main">Reason 6</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

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> <title>Why I'm Away Frameset</title> </head> <frameset cols="125,*">  <frame src="/books/2/631/1/html/2/choice.html" name="left">  <!-- this loads the choices page into the left frame -->  <frameset rows="60,*">    <!-- the frame for column 2 -->   <frame src="/books/2/631/1/html/2/away.html" name="top">  <!-- has been replaced -->   <frame src="/books/2/631/1/html/2/reason1.html" name="main"> <!-- with an embedded -->  </frameset>         <!-- frameset block --> </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 bgcolor="#ffffff"> <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.

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` 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 current document. If the current document has no parent, however, `target="_self"` will be used.
`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.

Task: Exercise 14.2. Creating the Content Pages for Your Frameset

Figure 14.11. You'll create a frameset that consists of three frames: top, left, and main.

Figure 14.12. The top frame in the frameset.

Figure 14.13. The left frame in the frameset.

Figure 14.14. The first of the six pages that appear in the main frame.

Task: Exercise 14.3. Combining rows and cols

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

Task: Exercise 14.4. Nesting Framesets

Task: Exercise 14.5. Using Named Frames and Hyperlinks

Task: Exercise 14.6. Linking Documents to Individual Frames

Task: Exercise 14.7. Adding Your noframes Content

Figure 14.16. This page appears when users view the frameset with a browser that isn't framescompatible.

Magic target Names

Table 14.2. Magic target Names

Task: Exercise 14.3. Combining `rows` and `cols`

Magic `target` Names