Basic Frames

The most basic set of frames requires 3 .html documents: 1) The
Frameset Document 2) A Source Page 3) Another Source Page

Here is an example of this simple frameset, laid out in a very
common format: The Left Menu

  color=”#FFFFFF” face=”Arial” size=”-1″>index.html (_top)  
  face=”Arial” size=”-1″>menu.html (Menu)

  • Link
  • Link
  • Link
  • Link


  color=”#FFFFFF” face=”Arial” size=”-1″>main.html (Main)

stuff, stuff

stuff, stuff, stuff


In this example, only the 2 Source pages will be visible to the
user, and the Menu Frame will remain onscreen while the Main frame is updated by the links
in the Menu. Lets look at the HTML source of each document to see how they work to achieve
this effect:

1. The Frameset – index.html (_top)



<frameset cols="30%,70%">

<frame src="menu.htm" name="Menu">

<frame src="main.htm" name="Main">



href="main.htm">Click Here</a></noframes>


All of the html tags in this example are required.
We will look at some optional frameset effects in the next chapter.

Now lets examine each tag individually:

<frameset cols="30%,70%">

Open Frameset creating Columns. Make the First Column 30% of the screen width, and the
second column 70%

<frame src="menu.html"

For the First Column, display the contents of menu.html, and give this frame the name

<frame src="main.html"

For the First Column, display the contents of menu.html, and give this frame the name


Close Framesets

href="menu.htm">Click Here</a></noframes>

Older Browsers and Search Engines sometimes have trouble with
frames. Adding a link to your menu page will make sure these users can get to your

2. The Menu Frame – menu.html (Menu)

The source frames of any Frameset are normal html documents that you
can design in any way you like. The IMPORTANT thing to remember is that each of your links
will need a TARGET, which tells the link which frame it is to be opened in. If you do not
specify a target for your links, the link will open inside the current frame.

For our example, we will need to specify the target "Main"
in each link, so that the link gets displayed in the correct frame:

<a href="next.html" target="Main">Link color=”#FF0000″></a>

3. The Main Frame – main.html (Main)

This page can be anything you desire. As in the above example, you
may want to create a link which updates the Menu frame, while leaving the Main page
onscreen. Simply specify your target as "Menu":

<a href="menu2.html" target="Menu">Link color=”#FF0000″></a>

4. Important things to know about Frame Targets:

The Target of a Link must correspond to the name=""
of a frame created by the frameset document. Frame names/targets are case-sensitive, so be
sure you are consistent.

The frameset document is known as the parent of any
particular frame. There are some special target names you can use to "clear"
your frames – or break out of frames altogether. These names are _top and _parent.
In the above example, targeting either _top or _parent will remove the
frames completely and display the link in the full browser window.

Borderless Frames

One of the major things now in frame usage is borderless frames. To make borderless frames, just do these two simple things. Add framespacing=”0″ border=”0″ frameborder=”0″ into your <FRAMESET> tag. Then, add marginwidth=”0″ marginheight=”0″ into your <FRAME> tags. Thats it!

Advanced Frames

This tutorial looks at some the Tags available, and discusses the
behavior of each.

<frameset cols="x,x">
  <frameset rows="x,x">

Each occurrence of the <frameset> tag must specify either columns (cols) or rows to
be displayed. A <frameset> tag cannot contain BOTH cols AND Rows –
this effect is achieved by nesting frameset tags.

Columns or Rows can be specified in either pixel or percentage value: <frameset
cols="300,*"> or <frameset rows="25%,50%,25%">, and can
contain as many columns or rows as you wish. Each comma separated value ("X,")
represents a <frame src=""> which must be displayed. Therefore
<frameset rows="25%,*,100"> would represent a window framed into 3 areas,
20% on top, 100 pixels high on the bottom. Since we cannot know the height of the browser,
we cannot determine the value of the middle frame – the command  " *,"
tells the browser to expand this frame  to use the rest of the window.

<frameset> options:

border=0 framespacing=0

These 3 frameborder controls should be used only to turn borders OFF. If you want to leave
the borders ON, don’t use anything. Browser manufacturers have dabbled with such controls as
framespacing and bordercolor, but these should never be used unless your site is on a
closed intranet. They are not well supported and your results can vary widely

<frame src="file.url"

The <frame> tag is required for each "X," row or column specified in the
<frameset> tag. Each <frame> will require an initial page src="" to
display, and a unique name="FrameName" to target with hyperlinks from other
framed pages.

<frame> options:


Add this to your <frame> tag to control the
scrollbars for that frame. The default scrolling behavior for any unspecified frame is
auto, which is to say: "Only display scrollbars IF the content runs outside the
display area."


You can control the margins for each frame with these
options. The default value in most browsers is roughly 15 pixels


IF you have frame borders visible, this option will "lock" them in place, and
remove the users ability to resize the framed areas.


Believe it or not, this tag causes plenty of problems for those who forget it. it is required
to close each instance of the <frameset> tag

<noframes> </noframes> content. You can insert custom content strictly for Older Browsers, but it is important
that you at LEAST include a link to your main menu page.

Now that we’ve learned the tags, lets create a more complex

  color=”#FFFFFF” face=”Arial” size=”-1″>index.html (_top)  
  color=”#FFFFFF” face=”Arial” size=”-1″>menu.html (Menu)

  • Link
  • Link
  • Link
  • Link
  color=”#FFFFFF” face=”Arial” size=”-1″>main.html (Main)

face=”Arial” size=”-1″>Stuff, stuff, stuff

stuff, stuff, stuff

color=”#FFFFFF” face=”Arial” size=”-1″>nested.htm (Nest)
  color=”#FFFFFF” face=”Arial” size=”-1″>sub-a.htm (subA)   color=”#FFFFFF” face=”Arial” size=”-1″>sub-b.htm (subB) color=”#FFFFFF” face=”Arial” size=”-1″> 
  color=”#FFFFFF” face=”Arial” size=”-1″>   

In this example, we have four src="" documents,
and 4 Named Frames to Target. We have nested our frameset twice,  to combine rows and
columns – once with tag nesting, and once with document nesting.

<frameset cols="33%,*"> face=”Arial” size=”-1″>


    <frameset rows="60%*,*>

src="main.htm" name="main">

src="nested.htm" name="nest">




Now lets examine each tag individually:

<frameset cols="30%,*"> face=”Arial” size=”-1″>

This tag defines 2 columns, one for the menu at 30%, and another for "*", or,
the remaining 70% of the screen area.

<frame src="menu.htm"

For the First Column, display the contents of menu.html, and give this frame the name

<frameset rows="60%,*"> face=”Arial” size=”-1″>

Here we are defining a NEW frameset with 2 rows, which will display in the second column
created by the frameset above.

<frame src="main.htm"

For the top row of the second column, we insert our main page.

<frame src="nested.htm"

For the bottom row of the second column, we will include a new<frameset> document.
As we will see, this will create yet 2 more columns, to display in the bottom row.

</frameset></frameset face=”Arial” size=”-1″>>

Be sure to close each <frameset>

Nested.htm (Nest or _parent) face=”Arial” size=”-1″>

The source of nested.htm is simple enough:

<frameset cols="50%,50%" frameborder=no
border=0 framespacing=0>

<frame src="sub-a.htm" name="subA">

<frame src="sub-b.htm" name="subB">



Our final discussion involves dynamically changing the contents of more than one frame. As you have seen in the above example, two or more frames can be changed simply by targeting the _parent of a nested frameset document. This will not always suffice however, and you may find it easier to use the javascript method illustrated below:

<BODY onLoad=”parent.frameName.location=’’ “>

Including this simple command in any document of your frameset, will cause the specified frame NAME to be updated with the specified URL. Simply put, you will change the First frame in your sequence with the normal href=”” target=”frameName” method, and that new document will cause the next frame in your sequence to load the appropriate page.