Frames

The Basic Frame Tags:

<FRAMESET> ... </FRAMESET> Declares a new group of columns or rows of frames
<FRAME SRC="document.html"> The location of the document in the frame
<NOFRAMES> ... </NOFRAMES> Text to display if the browser can not see frames

Frames are an invention of Netscape which allow the browser to display multiple HTML documents in one browser window. There are two parts to the HTML code which is required to create frames. The majority of the code is contained in a new HTML file which defines how to load each frame in the window. The second part of a good frame design is written in each of the documents which is in a window of the frame. This code determines how each of the links in the current frame is loaded into the framed document.

Frames are a very dangerous part of HTML because it is very easy to totally destroy there usefulness in any document. Before you use frames on your pages, take some time to think about how you want them to interact with the page. Frames generally look better on machines running high resolution graphics. Most framed sites are easiest to use if monitor resolution is set to at least 800x600.

The best designs for framed pages are those which have one large window which contains the document of interest, and one or more others which are for navigational purposes. Don't want to move around the focal point of the site. The user should be able to tell at a glance which frames local navigational links will effect.

One way to think about frames is to think of each window as a tree computer abstract data structure. If this doesn't make sense, think of frames as a family tree. Each node or person in a tree can have children. The same is true for frames. If the window is the 'root' of the tree each frame of that tree can also have subframes. This understanding is very important if you want incorporate JavaScript into your frames for accessing multiple layers of different frames. Lets get onto looking at some examples of how to control the frames.

 

<FRAMESET COLS="50%,50%">       <FRAME SRC="a.html">       <FRAME SRC="b.html">  </FRAMESET>

Frame A Frame B

 

<FRAMESET ROWS="50%,50%">       <FRAME SRC="a.html">       <FRAME SRC="b.html">  </FRAMESET>

Frame A Frame B


Frames can have rows and columns. The flags COLS and ROWS are used within the FRAMESET tag to define each frame's size. COL and ROWS can be set to a number, a percent or a *. The values can be used interchangeably. Commas are placed in-between each value.


NUMBER: this value defines the size of the given frame in terms of pixels.


<FRAMESET ROWS="75%,25%"> - Divides the window into two frames the one on the left 75% of the window, on the right 25%.


PERCENT: frame size is set to a percent based on the parent frame. If there are no parent frames, the size is determined by the window size.


<FRAMESET ROWS="200,100"> - Divides the window into two frames, one of 200 pixels, the other of 100 pixels. If the window is wider than 300 pixels, any extra space will be left empty.


*: This is the default value which means divide whatever space is left undefined equally between all remaining frames.


<FRAMESET ROWS="20%,*,*"> - This divides the window into three frames, one will be 20% of the window, the others will each be 40% because 100%-20%=80%. Half of 80% is 40%.

<FRAMESET ROWS="100,*,*"> - This divides the window into three frames, the first will be 100 pixels, the other two will be half of whatever size is remaining in the window.

Eventually you will want to create a frame with both rows and columns. For this reason, frames can be layered when they are declared. The following code creates a frame with three columns. The first column is 30% of the window, the second will be 30%, the third column consists of two frames which each are 50% of the height of the window.
 

<FRAMESET ROWS="30%,*,40%">       <FRAME SRC="a.html">       <FRAME SRC="b.html">       <FRAMESET COLS="50%,*">            <FRAME SRC="c.html">            <FRAME SRC="d.html">        </FRAMESET>  </FRAMESET>

Frame A Frame B Frame C Frame D

The <frame> tag is used inside <frameset> to control how each individual document is displayed in the window. Frame has the following modifiers:

SRC="document.html" --- The path and name of the document which this frame shows when the page is loaded.

NAME="x" --- Frames can be given names which can be TARGETED to links from other documents. This attribute is optional, and no default value.

<FRAME SRC="main.html" NAME="MAIN">


MARGINWIDTH and MARGINHEIGHT --- While the browser automatically determines the margin width and height, you can force it to take a specific value. The minimum value must be larger than 1 and can not prevent text from being displayed in the window.

SCROLLING --- Determines whether a scroll bar should be placed if the page is larger than the frame size. The default value is AUTO, but sometimes a scroll bar will show up when you don't want one or when one is not necessary. Scrolling can be set to either NO, YES, or AUTO

<FRAMESET COLS="*,*"> 

     <FRAME SRC="scroll.html" SCROLLING="YES"> 

     <FRAME SRC="scroll.html" SCROLLING="NO"> 

</FRAMESET>

NORESIZE --- There are no attributes to this tag, but it prevents the user from resizing the window. This will often result in user "unfriendly" pages, however if you want to make sure the user is seeing something in a frame while they're on the page, (like ads or announcements) this is one way to do it.

Everything between a set of <NOFRAMES> tags is ignored by browsers using frames. There are two different things you can do with this tag.


• Tell the user to get Netscape v2.0 (or something else which supports frames)
• Or, include the HTML for a non-framed version of the document.

The TARGET flag is used to determine where links will load in a framed document. This is one of the most important parts of frames and is ignored or incorrectly written in many HTML documents.

The target flag is written as:

target="document.html"


It can be applied to HTML in four different ways:

As a Base Case:

This flag is usually placed at the top of the document and is used when the majority of the links on the page will be loaded into one area. (a frame, new window, or the entire browser) The default BASE will load all links into the current frame.

<base target="target_name">

As a Link:


This flag is used when you have one or two links will be loaded somewhere other than the BASE case.

<a href="url" target="target_name">LINK</a>

From an Area:


Use this flag to control the loading of frames from a client side image map.

<AREA SHAPE="shape" COORDS=" x,y,..." HREF="url" TARGET="target_name">

From a Form:


Use this flag if you want the results from a form to be loaded in a different frame.

<FORM ACTION="action_type " TARGET="target_name">

TARGET="_blank"


Use this target to load the link in an unnamed new window.


TARGET="_self"


Use this target to load the link in the same window the link is in. This is only useful if you have a relatively globally defined BASE target which is different than the current window.


TARGET="_parent"


Use this target link in the parent FRAMESET. It will default to "_self" if no parent exists.


TARGET="_top"


Use this target makes the link load in the full window and exit the frame grouping. This is good to put by links which will be exiting from your site onto the rest of the web.

Many people are not aware of the fact that it is possible to nest separate framed documents in one window. This can allow you to change multiple frames at the same time! For a working example, try clicking the GMHS and BBS GAMES links to the right of this frame.

Document 1:

<FRAMESET COLS="50%,50%">
<FRAME SRC="nest1.html" NAME="NEST1">
<FRAME SRC="nest2.html" NAME="NEST2">
</FRAMESET>


nest1.html:


<FRAMESET ROWS="25%,75%">
<FRAME SRC="a.html" NAME="A">
<FRAME SRC="b.html" NAME="B">
</FRAMESET>


All FRAME NAMEs can be access directly in layered FRAMESETs.


If you want a link in NEST1 to load in A: target="A"

If you want a link to load in all of NEST1, target="NEST1".
If the link is INSIDE A or B, target="_parent"