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