i n t e r n e t c o n s u l t a n t s

Frames Tutorial

This tutorial shows you how use Frames to format rows and columns in your document. Frames can be used to present a static navigation map on one side of the browser, while the other side displays your content. This tutorial was designed for you if, and only if, you already have a modicum of HTML under your belt. Frames are an advanced HTML technique. When used properly, they can enhance navigation and help you present your website effectively. Frames are not inherently evil, but their implementation sometimes lacks common sense. Please read about the Dark Side of Frames before going overboard.

Step One: Defining the Layout

Specify the number of rows or columns to lay out in FRAMESET. Rows and columns are usually defined as percentages or number of pixels. For example, <FRAMESET ROWS="10%,90%"> will give a small top row and a large bottom area. <FRAMESET COLS="50,*"> will define a narrow 50 pixel band on the left side and a large space on the right side. Then give each row or column a NAME and SRC. The NAME will later allow you to specify which FRAME a page loads into. SRC defines the source of the frame.

Practice Frame 1 with three rows. Please resize the practice frame to a small window. All the practice frames will load into that same window. The frames themselves can be resized by dragging their borders.

<HTML>
<FRAMESET ROWS="25%,65%,10%">
	<FRAME NAME="top" SRC="red.html">
	<FRAME NAME="middle" SRC="black.html">
	<FRAME NAME="bottom" SRC="blue.html">
</FRAMESET>
</HTML>

Practice Frame 2 shows two columns. Note the use of the asterisk to define the width of the second column. Also, I added the optional element NORESIZE to each FRAME tag so these frames cannot be resized.

<HTML>
<FRAMESET COLS="100,*">
	<FRAME NAME="left" SRC="yellow.html" RESIZE=NO>
	<FRAME NAME="right" SRC="cyan.html" RESIZE=NO>
</FRAMESET>
</HTML>

Mindless but important exercise: what are the names of the frames in the above examples?

Practice Frame 3 shows how to subdivide frames by adding more FRAMESET containers. There are two columns, and the right-hand column is subdivided into two rows. I recommend defining either COLS or ROWS in a FRAMESET, but not both, because placement becomes confusing. Also I have added the optional element SCROLLING=yes to one of the frames. SCROLLING can be defined as yes, no, or auto, and it defaults to auto.

<HTML>
<FRAMESET COLS="100,*">
	<FRAME NAME="left" SRC="yellow.html" SCROLLING=yes>
	<FRAMESET ROWS="25%,50%">
		<FRAME NAME="right_top" SRC="cyan.html">
		<FRAME NAME="right_bottom" SRC="blue.html">
	</FRAMESET>
</FRAMESET>
</HTML>

A note concerning the NAME: some are reserved for special actions. Don’t use any of the following as a NAME. You will learn more about these NAMES soon.

NOFRAMES: the text within this optional container will only be displayed by browsers that don't know how to deal with frames. You can put anything in this container that would normally go inside the BODY container. The simplest solution is to put a link to the main page in it. For example:

<HTML>
<FRAMESET ... >
<NOFRAMES>
Your browser doesn't support frames.
Click here to visit our site.
</NOFRAMES>
</FRAMESET>
</HTML>

Step Two: Naming Your Targets

Practice Frame 4

The NAME element is versatile. For instance, I defined our practice window as NAME="practice" and used this as a TARGET for each frame demonstration link, so your desktop was not littered with new browser windows.

Practice Frame 5 shows a recursion pitfall, and lets you experiment with the names _top, _parent, _self, and _blank.

You can put any URL into your frames. When people click on a link on that page, it automatically loads back into the same frame, unless the link specifically tells it to do otherwise. To avoid having your own pages subverted to another's ends, consider using the element TARGET="_top" in your links.

Ponderous question of the day: What do you think will happen if you recursively load a frame document into one of its own frames?

This Frames Tutorial is just one example of the expertise of our staff. Want to learn more? Contact us for more information!

Want Frames? Access Advocates.
Satisfaction guaranteed!