Frame Usage developed by:
http://goldray.com/frames/frames.htm

Frames

"Frames" divide the browser window into independent sections and are most often used to provide a constant navigation window for a site, always visible, even when you link to an external site.

In designing frames, you start with a main frame document that defines the layout of your browser window and names each frame for targeting links. This file does not contain visible content although, if present, a <noframes> section presents content for non-frames browsers.

Defining Frames | Targeting Frames | Nested Frames | No Frames | Frame Tag Attributes | Design Note

Frame Defining Page

The main frame document defines the layout of your frames. It does not use a BODY tag and does not contain content.
<FRAMESET></FRAMESET>

The frameset tag is the containing tag for the main frame document. It replaces the standard <BODY> tag. The FRAMESET takes two attributes: ROWS and COLS

ROWS="x"
This attribute defines how the screen will be split horizontally. X becomes a comma-separated list of values that define the number and row size so that:

<FRAMESET ROWS="25%, 75%">

divides the screen into two parts, the top take 25% of the screen,the bottom takes 75%.

COLS="x"
Similarly, this attribute defines how the screen will be split vertically. So:

<FRAMESET COLS="125,400,*">

divides the screen into three parts, 125 pixels, 400 pixels and the wildcard * indicates the rest.

A FRAMESET tag can contain both ROWS and COLS and so create a symmetrical of rows and columns.

<FRAME>

The FRAME tag provides information about each of the sections defined in the FRAMESET, such as the URL of the initial page for the frame. These tags are contained within the FRAMESET. You must have one FRAME tag for every frame defined. These are applied in the order they are written. This tag has several possible attributes and no closing elements.

SRC="my_doc.htm" - This attribute gives the URL, or location, of the HTML file you want displayed in the frame and is necessary if you want a page inside the frame upon loading.

NAME="central_frame" - This attribute assigns a name to the frame allowing you to "target" an html page into the appropriate frame. If you have a small column for navigation and a larger window for documents, files called from the navigation frame can appear in the main window.

SCROLLING="yes/no/auto" - This attribute determines if there is a scrollbar on the frame. "Yes" means always; "no" means never; "Auto" tells the browser to determine if one is necessary and is the default.

NORESIZE - holds the frame at its assigned size; the user is unable to resize it. This attribute takes no value.

MARGINWIDTH="x" and MARGINHEIGHT="x" - These attributes specify, in pixels, the width of the frame's margin. MARGINWIDTH sets the left and right margins and MARGINHEIGHT sets the top and bottom margins.

Note: There are also browser-specific attributes, some of which work only on Netscape and others of which work only on Internet Explorer.

Go to top.

FRAMESET Example

Example 1

<HTML>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="toc.htm" NAME="toc">
<FRAME SRC="ch1.htm" NAME="main">
</FRAMESET >
</HTML>

There are two vertical frames (created by COLS attribute). The frame on the left is narrow (20%) and upon initial loading, the page "toc.htm" will appear there. The main frame is larger. If either frame was insufficient to display the entire contents of the appropriate file, the browser would add a scroll bar. The HTML document "ch1.htm" will initially appear in the 'main' frame upon loading.




Example 2

<HTML>
<FRAMESET COLS="50%, 50%" ROWS="33%, 33%, 33%">
<FRAME SRC="one.htm" SCROLLING="no">
<FRAME SRC="two.htm" SCROLLING="no">
<FRAME SRC="three.htm" SCROLLING="no">
<FRAME SRC="four.htm" SCROLLING="no">
<FRAME SRC="five.htm" SCROLLING="no">
<FRAME SRC="six.htm" SCROLLING="no">
</FRAMESET >
</HTML>

The above example creates the following window with 2 columns and 3 rows, dividing the window into six frames. There will be no scroll bars. Too many frames can certainly be confusing!

Go to top.







Targeting Frames

Normally, when you select a link, the new page appears in that same window as the link. With frames, you do not always want a hyperlinked page to appear in the same frame.

In example 1, with its Table of Contents sidebar, when you select a chapter link, you expect the text of the chapter to appear in the larger of the two frames so that you can read it and continue to navigate.

In order to ensure that clicking on a new chapter will result in that chapter going to the main frame, you must TARGET the main frame in your link. Here is the HTML source for the <BODY> of toc.htm that is loaded in the sidebar frame:












Example 3 - TOC.HTM

<BODY> <H1>Table of Contents</H1>
<HR>
<P>
<A HREF="ch1.htm" TARGET="main"><H2>Chapter <BR>One</H2>>/A>
<A HREF="ch2.htm" TARGET="main"><H2>Chapter <BR>Two</H2></A>
<A HREF="ch3.htm" TARGET="main"><H2>Chapter <BR>Three</H2>>/A>
<A HREF="ch4.htm" TARGET="main"><H2>Chapter <BR>Four</H2></A>
</BODY>

The TARGET attribute directs the chapter documents to load in the "main" frame (the name assigned in the <FRAMESET> source in Ex. 1 above) and not in the sidebar. Without this attribute, the browser default would load the hyperlinked document into the link's frame.

Note: If you point at a target that you did not previously declare using the <NAME> attribute, the browser will open a completely new window and load the page there.

Go to top.

Special Targets

There are a few reserved target names that begin with an underscore character. They are: