Framing Your Web

Your Web pages may be like pictures waiting to be framed. Even if you primarily provide text for your users, you can still make great use of frames to help them navigate within your site. Remember, one of the most important features of frames is that they let you keep important information on the screen constantly, while other portions of the screen change to reflect new content information.

In the following example, pay close attention to the relationship between the resultant screen shot and the multiple HTML documents required to construct it. As you can see, working with frames causes you to create more (but generally smaller) HTML documents, because each frame requires its own HTML document. Ahh, such is the price you must pay to provide your users with the best possible Web site. Don't say we didn't warn you!

The first thing you must do to use frames successfully is to visualize your Web page in its framed incarnation. Sketch it on a napkin, the back of an envelope, or whatever is handy in the trash can. Don't forget that you need one HTML document to define your sketched-out frame page and a separate HTML document for each frame in the sketch.

A basic, three-frame Web page

Figure 10-1: This basic, three-frame Web page shows the use of nonresizable frames.

The following HTML code, for the Web page document shown in Figure 10-1, sets up a top frame 150-pixels high and a bottom frame 100-pixels high. Both frames are nonscrolling, and the bottom frame is not resizable. The middle frame is set to scrolling to illustrate the scroll bars. This type of setup is quite versatile and accommodates many different uses. Next is the HTML for the structure of the three-frame page:

<HTML>

<HEAD><TITLE>Three Frame Example</TITLE></HEAD>

<FRAMESET ROWS="150, *, 100">

<FRAME SRC="top.htm" NAME="Top Frame" SCROLLING="no">

<FRAME SRC="middle.htm" NAME="Middle Frame"

SCROLLING="yes">

<FRAME SRC="bottom.htm" NAME="Bottom Frame"

SCROLLING="no" NORESIZE>

</FRAMESET></HTML>

Next is the HTML code for the Top frame shown in Figure 10-1. The document is the same as the one shown for the Figure 10-1. Hey, it worked there, didn't it? Why mess with a good thing?

<HTML>

<HEAD><TITLE>Top Frame</TITLE></HEAD>

<BODY>

<CENTER><H2>Top frame text here.</H2></CENTER>

The text you are reading here is in a file named top.htm. The file is called by the following line in the main.htm document:<BR>

&#60;FRAME SRC=&quot;top.htm&quot; NAME=&quot;Top Frame&quot; SCROLLING=&quot;no&quot;&#62;

</BODY></HTML>

The following is the HTML code for the Middle Frame shown in Figure 10-1. Once again, this code shows a standard HTML document where you can place any legal HTML tags and other information (preferably, some content that's a bit more useful than what we show).

<HTML>

<HEAD><TITLE>Middle Frame</TITLE></HEAD>

<BODY>

<center><H2>Middle frame text here.</H2></center>

The text you are reading here is in a file named middle.htm. The file is called by the following line in the main.htm document:<BR>

&#60;FRAME SRC=&quot;middle.htm&quot; NAME=&quot;Middle Frame&quot; SCROLLING=&quot;yes&quot;&#62;

</BODY></HTML>

Finally, the following listing shows the HTML code for the Bottom frame shown in Figure 10-1. This listing is another standard HTML document, but remember, the document is displayed within a fixed-height (100-pixel) frame that can't be resized.

Your job, as a Web page author, is to make sure that the information is compact or short enough to fit the specified frame space, even when users resize their entire browser screens. If you can't make the information fit the frame, use relative values for the frame height and allow resizing instead.

<HTML>

<HEAD><TITLE>Bottom Frame</TITLE></HEAD>

<BODY>

<center><H3>Bottom frame text here.</H3></center>

The text you are reading here is in a file named bottom.htm. The file is called by the following line in the main.htm document:<BR>

&#60;FRAME SRC=&quot;bottom.htm&quot; NAME=&quot;Bottom Frame&quot; NORESIZE&#62;

</BODY></HTML>

Stunningly Framed Web Sites

Recently frames have dropped out of favor and fad with many Web developers. Partly because not all browsers handle frame markup in the same way and partly because frames are still not standardized. So, we had a difficult time locating any worthwhile examples of framed sites.

Because frames are dynamic beasts, capturing them in a picture would not do them justice. So, load these URLs in your own frames-enabled browser to see the goods for yourself.


Previous Section | HTML Frames | Extras TOC


E-Mail: HTML for Dummies at html4dum@lanw.com


URL: http://www.lanw.com/html4dum/h4d3e/extras/ch10sec2.htm 
Text - Copyright © 1995, 1996, 1997 Ed Tittel & Stephen N. James. 
For Dummies, the Dummies Man logo and Dummies Press are trademarks or registered trademarks of Wiley Publishing, Inc. Used with Permission.
Web Layout - Copyright © 1997, LANWrights
Revised -- May, 2002 [MCB]