FRAMES - Yet Another Way to Divide Up The Screen.

Frames - a method for dividing the browser window into smaller sub-windows, each displaying a different HTML document.
Frames have a controversial status.

Advantages

Allow parts of page to remain static while other parts scroll. (E.g., the navigational items might remain on screen.)
Can unify documents and items that remain on different servers. For example, keeps your frame navigation items on the screen while you display graphic or document on different server.
Can use <noframes> tag to add alternative content for browsers that do not support frames.

Disadvantages

Not supported by older browsers
Can increase the complexity of the site (have to organize all the documents for the frames.)
Frames can be more difficult to navigate.
Users cannot bookmark individual pages nested within a framed document.
It decrease the size of the screen displayed to the user.

Click here for an example of a frame.

Click here for another example.

Here is an example of a real example.

The Frameset Document

The seperate HTML documents needed to display the frames is held together by a
single frameset document.

The frameset document looks like a regular HTML document but

<frameset> tag is used instead of the <body>

<frameset> is used to define the rows and columns of the indivudual frames.
The indivdual frames are identified by <frame> tag.

Here is a simple example (Click here) the cols *.* uses default sizes of the frames.

    <HTML>
<HEAD><TITLE>A Simple Frame</TITLE></HEAD>
<FRAMESET COLS="*,*">
        <FRAME SRC="Lab4.html">
        <FRAME SRC="Lab7.html">
</FRAMESET>
<NOFRAMES> Your browser does not support frames </NOFRAMES>
</HTML>

Here is what you get if your browser does not support frames. (Click here)

Using Rows Instead of Columns

Here is a simple example (Click here) using the rows *.* uses default sizes of the frames.
It is a good idea to include comments to identify the frames usage.

<HTML>
<HEAD>
<TITLE> ReFrame </TITLE>
</HEAD>
<FRAMESET ROWS="*,*" >
<! ---- Use this frame for the top Row >

<FRAME SRC="lab6.html">

<! ---- Use this frame for the bottom hand side >

<FRAME SRC="Lab7.html">

</FRAMESET>
</HTML>

Border Control

Like tables you can control the size of your borders. Here is an example
with no border (Click here).

<HTML>
<HEAD>
<TITLE> ReFrame </TITLE>
</HEAD>
<FRAMESET BORDER=0, ROWS="*,*" >
<! ---- Use this frame for the top Row >
<FRAME SRC="lab6.html">
<! ---- Use this frame for the bottom hand side >
<FRAME SRC="Lab7.html">
</FRAMESET>
</HTML>

Why Would You Create A Border=0?

Here is an example of why you might want to do this. (Click here.) Note that you can
set ROWS or COLS to a size from 100-1%, or absolute pixel size.

For example :

<FRAMESET COLS="75%, *">
<FRAMESET COLS=50,* >

<HTML>
<HEAD>
<TITLE> frame3 </TITLE>
</HEAD>
<! Use the ROWS=15% to create a narrow navigation bar >
<FRAMESET BORDER=0 ROWS="15%,*" >
<! ---- Use this frame for the top Row >
<FRAME SRC="Welcome1.html">
<! ---- Use this frame for the bottom hand side >
<FRAME SRC="Welcome2.html">
</FRAMESET>
</HTML>

Here is the content of the document document1.html. (Note if this was an actual document
I would set each URL to something different.)

<HTML>
<HEAD>
<TITLE> frame3 </TITLE>
</HEAD>
<BODY BGCOLOR="silver">
<TABLE WIDTH=100%>
<TR>
<TD>
<A href="http://wwww.depaul.edu/~dlash"> HOME </A>
<TD>
<A href="http://wwww.depaul.edu/~dlash"> SITE INDEX </A>
<TD>
<A href="http://wwww.depaul.edu/~dlash"> SPORTS PAGE </A>
<TD>
<A href="http://wwww.depaul.edu/~dlash"> COMICS </A>
</TABLE>
</Body>
</HTML>

Nesting Frames
Nesting frames is putting a frame within a frame. Here is an example of how you do this. (Click here.)

<HTML>
<HEAD>
<TITLE> A Nested Frames Example </TITLE>
</HEAD>

<FRAMESET COLS="*,*" >

<FRAME SRC="Lab6.html">


<FRAMESET ROWS="*,*">
     
     <FRAME SRC="Lab4.htm">
     
     <FRAME SRC="Lab7.html">
</FRAMESET>
</FRAMESET>
</HTML>

Why Nest Frames?

The following is an example of setting up a navigation frame. (Click Here.)

<HTML>
<HEAD>
<TITLE> Frames Example </TITLE>
</HEAD>

<FRAMESET COLS="130,*" BORDER=0>

<FRAME SRC="links1.html" NAME=left>


<FRAMESET ROWS="33%,*">

<FRAME SRC="h.html" NAME=upper>

<FRAME SRC="i.html" NAME=lower>
</FRAMESET>
</FRAMESET>
</HTML>

Here is an the source for links1.html

<BODY BGCOLOR="#FFFFCC">
<H1 ALIGN=CENTER>
Links </H1>
<A HREF="a.html" TARGET="lower">The "A" page</A>
<BR>
<A HREF="b.html" TARGET="lower">The "B" page</A>
<BR><A HREF="c.html" TARGET="lower">The "C" page</A>
<BR><A HREF="d.html" TARGET="lower">The "D" page</A>
<BR>
</BODY>

The Frameset Attributes

Frameset has the following attributes:
<frameset> .... </frameset>

border =number - where number specifies the thickness (in pixels between the frames).
bordercolor=#rrggbb or color name
rows= list(number, % or *) - establishes the number and sizes of rows in frameset.

The Frames Attributes

bordercolor=#rrggbb or color name
longdesc=url - Specifies a link to a document containing a long description of the frame and its contents. It may be useful for non-frame browsers.
name=text - Assigns a name to the frame. This name is typically referenced by targers within links to make the document load in the named frame.
noresize - Prevents users from resizing the frame. Default allows users to resize.
scrolling=yes|no|auto - If scrollbar appears in a frame.

yes ===> scrollbars always appear
no ===> scrollbars never appear
auto ===> (default) scrollbars appear automatically when the contents do not fit in the screen.

src=url - Specifies the location of the HTML file to display in the frame.
marginheight=# - amount of space between the top and bottom of frame edge and its contents (in pixels). (mimimum value=1)
marginwidth=# - amount of space between left and right frame edges and it contents (min=1).

Messing With Scrollbars

Consider the following frame set - click here

<HTML>
<HEAD>
<TITLE> Frames Example </TITLE>
</HEAD>

<FRAMESET COLS="130,*" BORDER=0>

<FRAME SRC="links2.html" NAME=left>


<FRAMESET ROWS="75,*">
     
      <FRAME SRC="titlebar.html" NAME=titlebar>
     
     <FRAME SRC="h.html" NAME=lower>
</FRAMESET>
</FRAMESET>
</HTML>

Now change the following couple of lines and get the following - click here.

<FRAME SRC="links2.html" NAME=left SCROLLING=NO>
<FRAME SRC="titlebar.html" NAME=titlebar SCROLLING=NO>

Be careful of how you use scrolling on any webpage. I have seen studies that said that users generally do not ever scroll.