Step By Step: Floating Frames

Floating Frames: Step By Step

Follow these steps to place a "floating frame" in your Web page.

Step 1: Create the content that will go into the frame.

Think of a floating frame as a "window" that floats in your page. Through the window, you can see another Web page. Therefore, your first step is to create the page that will be seen through the window.

For the purpose of this demonstration, we will use a page that already exists: Microsoft's home page. The address of that page is http://www.microsoft.com/.

You may want the contents of your floating frame to display aligned with the top and left sides of the floating frame. To do this, place TOPMARGIN and LEFTMARGIN attributes in the BODY tag of the page that will be displayed in the floating frame:

<BODY TOPMARGIN=0 LEFTMARGIN=0>

To offset the frame's contents by 10 pixels down and to the right, use TOPMARGIN=10 LEFTMARGIN=10.

Step 2: Create the frame itself.

To create the floating frame, insert the following in the body of your Web page (after the <BODY> tag and before the </BODY> tag):

<FRAME WIDTH=200 HEIGHT=200 SRC="http://www.microsoft.com/">

This creates a 200-pixel by 200-pixel window on your page through which you can see Microsoft's home page. (The floating frame is actually a separate browser, so you can click links to other pages right in the frame. Try it!)

To make the frame a different size, change the WIDTH and HEIGHT. You can also use percentage values. The following will insert a floating frame that is half the height and width of Internet Explorer's content area:

<FRAME WIDTH=50% HEIGHT=50% SRC="http://www.microsoft.com">

Step 3: Do you want a 3-D border?

By default, floating frames have a 3-D recessed appearance. If you want a more seamless look, add a FRAMEBORDER attribute to your FRAMESET tag:

<FRAME WIDTH=200 HEIGHT=200 FRAMEBORDER=0 SRC="http://www.microsoft.com/">

Step 4: Do you want a scrollbar?

If you do not want the floating frame to have a scrollbar, add a SCROLLING attribute, as follows: <FRAME WIDTH=200 HEIGHT=200 SCROLLING=NO SRC="http://www.microsoft.com/">

This is especially useful in combination with FRAMEBORDER=0. Note that the contents of the frame will not be scrollable, not even by using the arrow keys.

Step 5: Should the frame have margins?

You can specify margins for a floating frame exactly as you can for images. The following example places a 10-pixel border on all four sides of the floating frame.

<FRAME WIDTH=200 HEIGHT=200 HSPACE=10 VSPACE=10 SRC="http://www.microsoft.com/">

Naturally, you can use HSPACE without VSPACE, and vice versa.

Step 6: Align the floating frame to left or right.

You can also align a floating frame to the left or right margin, exactly as you can align an image. The following example creates a frame aligned with the right margin:

<FRAME WIDTH=200 HEIGHT=200 ALIGN=RIGHT SRC="http://www.microsoft.com">

As with right-aligned images, subsequent text and other contents will be drawn to the right of the frame. To skip past the bottom of the frame, insert the following into your page:

<BR CLEAR=RIGHT> or <BR CLEAR=ALL>

Congratulations!

That's all it takes to place a floating frame in a Web page. See below for tips on getting the most out of floating frames!

Advanced Techniques

Addressing Floating Frames by Name

You can name your floating frames so that when a user clicks a link in your page, new content will show up in a floating frame on that page. Here's an example:

<FRAME WIDTH=100 HEIGHT=100 SRC="page1.htm" NAME="MyFrame">
...
<A HREF="page2.htm" TARGET="MyFrame"> Click here to see Page 2 in the floating frame. </A>

When the user clicks the link, the file page2.htm will show up in the floating frame.

Big Brother is Watching Your Fish

Using floating frames in combination with client pull gives you a window on your Web page that updates regularly without refreshing the entire page.

For example, let's say you have a video camera pointed at your fishtank. It sends new images of your fish to your Web server once every 30 seconds, where they can be viewed at http://www.mycompany.com/latestfish.gif.

To put a regularly updating view of your fish on your Web page, first create another page to contain the fish image. We'll say the address of this page is http://www.mycompany.com/fishpage.htm.

<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="30; URL=http://www.mycompany.com/fishpage.htm">
<TITLE>My Fish</TITLE>
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0>
<IMG WIDTH=100 HEIGHT=100 SRC="http://www.mycompany.com/latestfish.gif">
</BODY>
</HTML>

(Those familiar with the client pull technique will recognize the third line as the one that makes the page refresh every 30 seconds.) Now, simply place a floating frame pointing to the new page into your Web page:

<FRAME WIDTH=110 HEIGHT=110 FRAMEBORDER=0 SRC="http://www.mycompany.com/fishpage.htm">

From now on, visitors to your Web site will know more about your fish than you do.

Because a floating frame can contain any HTML document, this technique is useful not just for fishtanks and weather maps, but also for such things as stock quotes, on-line chats, and so on.

Back to the HTML Authoring Features page