HTML 3.2 and Netscape 3.0: Frames Frame Example 2 Simple Frame Example 1 Simple Frame Example 2 | WebReference

HTML 3.2 and Netscape 3.0: Frames Frame Example 2 Simple Frame Example 1 Simple Frame Example 2

Frames

HTML 3.2 and Netscape 3.0

Frames allow you to divide Web pages into multiple scrollable regions. Each region can reference a separate URL, allowing the display of multiple Web pages within one page. Each region, or FRAME, can be NAMEd, allowing it to be targeted. One frame can refer to another frame through its name, allowing one frame to be updated by clicking on a link in another.

Frames can be nested to create intricate FRAMESETs. You should limit the total number of frames to three or four as each one usually requires a separate page to load within it.

Frames open up new interface possibilities on the Web. You can use a non-scrolling fixed frame as a "shelf" for ad banners or button bars. Table of contents can remain fixed in one frame while the content frame is updated. Frames work well with JavaScript or VBScript, you can update multiple frames with one click, and create intricate, interactive interfaces.

FRAMESET Syntax

A framed document has a basic structure very similar to your normal HTML document, except the FRAMESET tag replaces the BODY tag. FRAMESETs contain two or more FRAMEs which each refer to separate URLs. The FRAMESET tag has two structural attributes, ROWS, and COLS which divide the page up into multiple rows or columns. To allocate portions of the page you give the ROWS or COLS attribute a list of absolute or relative values each representing a frame. These can be in pixels (i.e., 60), a percentage (1-100%), or a relative-sized amount (*, 2*, 3*).

The * character is a "relative-sized" frame and is interpreted as a request to give the frame all remaining space. Multiple relative-sized frames get equal amounts of the remaining space. Putting an integer before the * weights that frame by that factor. "*,2*" would give 1/3 of the space to the first frame, and 2/3 to the second.

Example frameset with 3 columns, the first and last take up 20% each and the second takes up 60% of the page.

<frameset cols="20%, 60%, 20%"/>

Show me!

Example frameset with 3 rows, the first two a fixed height, and the remaining space allocated to the bottom frame. Note that in Netscape 3, the frame sizes still vary somewhat when resizing your window, while in Explorer 3 they don't.

<frameset rows="70,50,*"/>

Show me!

Additional FRAMESET appearance attributes are:

The FRAMESPACING and BORDER attributes perform the same function in Explorer 3 and Netscape 3, they set the width of the frame borders. In practice you can combine them to work with both browsers.

Show me!

Invisible Frame Borders. You can now hide frame borders in Netscape and Explorer 3. For non-nested framesets this creates a seamless look. Example:

<title>Frame Example 2</title><frameset cols="20%,*" frameborder="NO" border="0" framespacing="0"><frame src="white.html" mce_src="white.html"/><frameset rows="70,50,*"><frame src="blue.html" mce_src="blue.html"/><frame src="white.html" mce_src="white.html"/><frame src="red.html" mce_src="red.html"/></frameset></frameset>

Show me!

See Cool Site of the Hour for an example.

FRAME Syntax

The FRAME tag defines a single frame within a frameset. Each frame refers to a specific URL to display. That URL can be another FRAMESET page, so frames can be nested. In Netscape 3 the FRAME tag has 9 attributes 7 of which are common to Explorer. (SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE, FRAMEBORDER, [BORDER, and BORDERCOLOR Netscape-specific]). The key attributes are SRC=URL (displays the document corresponding to that URL in that particular frame) and NAME. The NAME attribute assigns a window name to a frame so it can be targeted.

Example without NOFRAMES:

<title>Simple Frame Example 1</title><frameset><frame src="left.html" mce_src="left.html"/><frame src="right.html" mce_src="right.html"/></frameset>

Unfortunately, users without a frame-enable browser users will see nothing when they load this page. To allow for older browsers, or users with FRAMEs disabled use the <NOFRAMES> tag.

Example with the NOFRAMES tag

&lt;title&gt;Simple Frame Example 2&lt;/title&gt;&lt;frameset&gt;&lt;frame src="left.html" mce_src="left.html"/&gt;&lt;frame src="right.html" mce_src="right.html"/&gt;&lt;noframes&gt; &lt;table&gt;&lt;tr&gt;&lt;td&gt;Left's content here&lt;/td&gt; &lt;td&gt;Right's content here&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt;&lt;/noframes&gt;&lt;/frameset&gt;

A common practice on the Web is to use the NOFRAMEs tag to scold people to get Netscape. A better use is to offer a non-frame alternative so everyone can see your page.

Target Practice

Targets control what content appears in what frame. To load a page into a frame, you simply refer to it in a link. The resource referenced by the URL displays in the targeted frame. The TARGET attribute can be added to a variety of HTML tags. The syntax is:

TARGET = "frame_name"

TARGET's can appear in A, BASE, AREA, and FORM tags. The A and AREA tags work identically. You simply add the TARGET="frame_name" to the link, i.e.,

&lt;a href="url" mce_href="url" target="frame_name"&gt;Targeted Anchor&lt;/a&gt; or &lt;area shape="shape" mce_shape="shape" coords="x,y..." mce_coords="x,y..." href="url" mce_href="url" target="frame_name"/&gt;

BASE Tag - Use the TARGET in the BASE tag when you want all (or most) of the links in your document to be targeted to the same window. The TARGET attribute establishes a default frame_name that all links within the document will be targeted to. The default is overridden by TARGETs in individual anchor tags. Example:

&lt;base target="frame_name"/&gt;

FORM Tag - Instead of viewing the results of a form submission in the same window, you can force it to appear within a frame. Example:

&lt;form action="url" target="frame_name"&gt; &lt;h3&gt;Reserved TARGET Names&lt;/h3&gt; &lt;p&gt;Frame names must begin with an alphanumeric character. This distinguishes them from special reserved TARGET names that begin with an underscore.&lt;/p&gt; &lt;dl&gt;&lt;dt&gt;TARGET = "_blank" &lt;/dt&gt;&lt;dd&gt;Loads the linked document into a new blank window. &lt;/dd&gt;&lt;dt&gt;TARGET = "_self" &lt;/dt&gt;&lt;dd&gt;Loads the linked document into the same frame as the anchor. Useful for overriding a global BASE target. &lt;/dd&gt;&lt;dt&gt;TARGET = "_parent" &lt;/dt&gt;&lt;dd&gt;Loads the linked document into the immediate parent frame of the frame containing the anchor. Acts like "_self" when the frame has no parent. &lt;/dd&gt;&lt;dt&gt;TARGET = "_top" &lt;/dt&gt;&lt;dd&gt;Loads the linked document into the entire window. Useful for breaking out of nested FRAMEs and for external links. &lt;/dd&gt;&lt;/dl&gt;&lt;p&gt;&lt;b&gt;Avoid Nesting:&lt;/b&gt; To ensure that external links will jump out of your frames use &amp;lt;BASE TARGET="_top"&amp;gt;. This avoids the nesting nightmares when a framed site links to another framed site. Local TARGETs override this global setting.&lt;/p&gt; &lt;h3&gt;Resizable Frames&lt;/h3&gt; &lt;p&gt;Netscape and Explorer default to resizable frames. This is a good idea for any frame that could have varying sized content. Fixed ad bannners or button bars have a known size and can safely use the NORESIZE and SCROLLING="NO" attributes to create a "shelf." Popups and other elements can vary in size on different platforms so give the user control to customize your framesets. For simple layouts just leave off the NORESIZE attribute. For more complex layouts where frames butt against each other you must nest FRAMESETs to allow resizing.&lt;/p&gt; &lt;p&gt;&lt;b&gt;Example:&lt;/b&gt; Web Headlines &lt;a href="https://www.webreference.com/headlines/" mce_href="https://www.webreference.com/headlines/"&gt;https://www.webreference.com/headlines/&lt;/a&gt;. &lt;/p&gt;&lt;p&gt;&lt;font color="BLUE"&gt;Netscape 3.0&lt;/font&gt; adds the FRAMEBORDER, BORDERCOLOR, and BORDER attributes to the FRAME tag. The FRAMEBORDER tag sets the presence of borders in FRAMES or FRAMESETs. The BORDER attribute sets the width of all borders within a frameset, and can only be used in the FRAMESET tag. The BORDERCOLOR sets the color of the frame border. (see &lt;a href="/headlines/" mce_href="/headlines/"&gt;Web Headlines&lt;/a&gt; for a complete example).&lt;/p&gt; &lt;p&gt;Here are some sites that have more information on FRAMEs.&lt;/p&gt; &lt;dl&gt;&lt;dt&gt;&lt;a href="https://www.webreference.com/dev/frames/" mce_href="https://www.webreference.com/dev/frames/"&gt;Framing the Web&lt;/a&gt;&lt;/dt&gt;&lt;dd&gt;A concise tutorial on using Frames, with examples. Submitted by Dan Brown. &lt;/dd&gt;&lt;dt&gt;&lt;a href="https://home.netscape.com/assist/net_sites/frames.html" mce_href="https://home.netscape.com/assist/net_sites/frames.html"&gt;Frames: An Introduction&lt;/a&gt;&lt;/dt&gt;&lt;dd&gt;Netscape's own notes on FRAMEs including source, syntax, and implementation notes. &lt;/dd&gt;&lt;dt&gt;&lt;a href="https://sharkysoft.com/tutorials/frames/" mce_href="https://sharkysoft.com/tutorials/frames/"&gt;Netscape Frames&lt;/a&gt;&lt;/dt&gt;&lt;dd&gt;A step by step tutorial on the use of frames by Charlton Rose. &lt;/dd&gt;&lt;/dl&gt; &lt;a href="similar.html" mce_href="similar.html"&gt;&lt;img src="/art/b_next.gif" mce_src="/art/b_next.gif" align="RIGHT" alt="next" border="0"/&gt;&lt;/a&gt;&lt;a href="table.html" mce_href="table.html"&gt;&lt;img src="/art/b_prev.gif" mce_src="/art/b_prev.gif" align="RIGHT" alt="prev" border="0"/&gt;&lt;/a&gt; &lt;br clear="RIGHT"/&gt;&lt;p align="CENTER"&gt;&lt;a href="/contact.php" mce_href="/contact.php"&gt;Comments&lt;/a&gt; are welcome&lt;/p&gt; &lt;p align="CENTER"&gt; &lt;br/&gt; Revised: Jan. 31, 1997&lt;/p&gt; &lt;p align="CENTER"&gt;&lt;small&gt;URL: https://webreference.com/html3andns/frame.html&lt;/small&gt;&lt;/p&gt; &lt;/form&gt;