HTML 4 For Dummies - Bonus Chapters

Framing Your Web 


 

Your Web pages are like pictures waiting to be framed. Even if you provide pure text for your users, you can still make great use of frames to help them navigate within your site.

Remember Icon

One important feature of frames is that they let you keep important information on screen constantly, while other portions of the screen change to reflect new content.

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

The following HTML code 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.

The following HTML code is 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 we show the HTML code for the Top frame.

<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>
<FRAME SRC="top.htm" NAME="Top Frame" SCROLLING="no">
</BODY>
</HTML>

The following HTML code is for the middle frame. Once again, this code shows a standard HTML document in which you can place any legal HTML tags and other information (preferably, some content that’s a bit more useful than what we've included).

<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>
<FRAME SRC=";middle.htm" NAME="Middle Frame" SCROLLING="yes">;
</BODY>
</HTML>

Finally, the following listing shows the HTML code for the bottom frame. 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.

Tip Icon 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>
<FRAME SRC=";bottom.htm" NAME="Bottom Frame" NORESIZE>
</BODY>
</HTML>

Extra 1 Main Page | Previous Section | Next Section

 


Home | Bonus Chapters | FTP Resources | Site Overview | Book Contents | Book URLs | Book Examples | Wayfinding Toolkit | Contact Info


URL: http://www.lanw.com/html4dum/h4d4e/extras/ex01/e01s03.htm
E-mail: HTML For Dummies

Webmaster: Natanya Pitts, LANWrights
Copyright Information
Revised -- January 16, 1998