Frames
With frames you can display multiple documents at one time, all in their own portion of the browser window.

Below is a list of all the tags that you can use to make frames.

TagExplanation
<FRAMESET> </FRAMESET>Begins and ends the frames.
<FRAME>Is used to give the info about one frame.
<NOFRAMES> </NOFRAMES>An alternate document to display if the browser doesn't support frames. Any tag can be used inside of it.
Those are the only tags that you use to make frames, but the attributes are what makes your frames work.

The FRAMESET tag is used to tell the browser that frames are used on the site. Not all browsers support frames, which is why you should always include a NOFRAMES tag on your page.

When you add a frameset tag to your site your need to specify ROWS or COLS. ROWS will split the page vertically, COLS does the same horizontally.

Border Size
You can change the size and color of your borders very easily. To change the size use this:
BORDER=0
Place that inside of the FRAMESET tag. The 0 can be changed to any number you would like, with 0 making the borders invisible.
The color can be changed just as easily:
BORDERCOLOR="#000000"
Just change the 000000 to any color code that you would like. Visit our Color Guide to see hundreds of colors and their values.
Targeting

Targeting is used to define which frame a link will be displayed in. For instance, you may have two frames, one is a navigation bar, while the other displays the pages. To get this to work right, you would have to have the navigational frame target the main frame. This is how you would do that:
<a href="http://www.myurl.com/mypage.html" target="main">About Me
If you want all the links on a page to show up in the one main frame, you put this at the top of the navigational pages body:
<BASE TARGET="main">
where main is the name of the frame you want to display your pages in. You could also add target="main" in the frames code where you give the navigational frame a name and a URL to display when the page is loaded. The following are other targeting options:
TARGET="_blank - Opens a new browser window to display the page in.
TARGET="_self - Displays the linked page in frame it is linked from.
TARGET="_parent" - Displays the linked information in the frame used the last document.
TARGET="_top" - Will display the information in a brand new browser window, with no frames.

Scrolling

There are three ways that you can set the scrolling on your frames:
SCROLLING="yes" - Puts scrollbars on the bottom and the right side of the frame, whether they are needed or not.
SCROLLING="no" - No scrollbars, even if they are needed.
SCROLLING="auto" - Only adds scrollbars if they are needed.

NORESIZE

If you add NORESIZE to your frames it will prevent visitors to your site from changing the size of your frames on their browsers.

Margin Height and Width

Marginwidth is used to determine the amount of space on both the right and left sides of a document within a frame. Marginheight does the exact same thing above and below the document. Both of these tags are optionally used. Both are attributes of the <FRAME> tag. Below is an example.

<FRAME SRC="mypage.html" NAME="mypage" MARGINHEIGHT="5" MARGINWIDTH="5">

Frame Spacing

Frame spacing is simply the space between your frames, in pixels. This tag is optional. It is, like <MARGINHEIGHT> and <MARGINWIDTH>, an attribute of the <FRAME> tag. Here is an example:

<FRAME SRC="mypage.html" NAME="mypage" FRAMESPACING="5">

Examples

Now we will show you examples of the frame tags and sample layouts. To show you the layouts we didn't create new pages, instead we made a table that shows how the browser window will be divided.

<FRAMESET COLS="25%,*,32%">
<FRAME SRC="top.html">
<FRAME SRC="middle.html">
<FRAME SRC="bottom.html">
</FRAMESET>
Top
Middle
Bottom
In the above example the 25% tells the browser that the top frame will take up 25% of the vertical space, the * tells that the middle frame will use all remaining space after the others have taken theirs, and the 32% says that the bottom frame will be 32% of the window.

The same thing with the ROW attribute looks like this:

<FRAMESET ROWS="25%,*,32%">
<FRAME SRC="left.html">
<FRAME SRC="middle.html">
<FRAME SRC="right">
L
e
f
t
M
i
d
d
l
e
R
i
g
h
t

You can also mix the ROW and COL attributes to get different results, like this:

<FRAMESET COLS="70%,*,50%">
  <FRAME SRC="top.html" NAME="top">
  <FRAMESET COLS="40%, 60%">
    <FRAME SRC="left.html" NAME="left">
    <FRAME SRC="right.html" NAME="right">
  </FRAMESET>
  <FRAME SRC="btm.html" NAME="btm">
</FRAMESET>

<FRAMESET ROWS="25%,75%">
<FRAME SRC="left.html">
<FRAME SRC="main.html">
</FRAMESET>
The NOFRAMES tag is very important, using the above frames example we will show you what is displayed if the browser doesn't support frames.

You can change that text to whatever you want, and any tags can be used, so you can add a completly alternate page for your visitors with a browser that does not support frames.
<FRAMESET ROWS="25%,75%">
<FRAME SRC="left.html">
<FRAME SRC="main.html">
<NOFRAMES>
<I>Sorry</I>, your browser doesn't support frames. Get a higher level browser then come back and see my site.
</NOFRAMES> </FRAMESET>
Sorry, your browser doesn't support frames. Get a higher level browser then come back and see my site.

You can change that text to whatever you want, and any tags can be used, so you can add a completly alternate page for your visitors with a browser that does not support frames.

<FRAMESET COLS="160,*" FRAMEBORDER="NO" BORDER=0
FRAMESPACING=0>
<FRAMESET ROWS="*,148" FRAMEBORDER="NO" BORDER=0
FRAMESPACING=0>

<FRAME SRC="testleft.html" NAME="left" SCROLLING="NO"
MARGINHEIGHT=6 MARGINWIDTH=0 NORESIZE TARGET="main">

<FRAME SRC="testcorner.html" NAME="corner" SCROLLING="NO"
MARGINHEIGHT=6 MARGINWIDTH=0 NORESIZE TARGET="main">

</FRAMESET>

<FRAMESET ROWS="*,120" FRAMEBORDER="NO" BORDER=0
FRAMESPACING=0>

<FRAME SRC="main.html" NAME="main" SCROLLING="AUTO"
MARGINHEIGHT=6 MARGINWIDTH=0 NORESIZE>

<FRAME SRC="testbottom.html" NAME="bottom" SCROLLING="NO"
MARGINHEIGHT=6 MARGINWIDTH=0 NORESIZE TARGET="main">

<FRAME SRC="testbottom.html" NAME="bottom" SCROLLING="NO"
MARGINHEIGHT=6 MARGINWIDTH=0 NORESIZE TARGET="main">