With frames, a web page can be divided into multiple, scrollable regions therefore, information can be presented in a more useful fashion. Framesets are similar to tables. Each frame can display independent documents. If a frame contents include a hypertext link the user selects, the new documents contents can be displayed in that same frame, another frame, or an entirely new browser window. Each region or frame has several features:
1. It can be given an individual URL, so it can load information
independent of the other frames on the page;
2. It can be given a NAME, allowing it to be targeted by other URLs, and;
3. It can resize dynamically if the user changes the window's size.
Frames are generated by three tags and one object; Frameset tags,
Frame tags, Noframes tags, and Frame documents.
A FRAMESET is simply the collection of frames that make up the browser window. The <title> tag of this document is static. Any hyperlinks will be loaded into the proper frame but the title of this document does not change. A good design idea would be to make any documents which are referenced with this frameset should be related to this frame document. Column- and row-definition attributes for the <frameset> tag let you define the number of initial sizes, much like tables. The <frame> tag defines what document initially goes into the frame within those framesets, and is where you may give the frame a name to use for hypertext link targets. The frame document is very similar to a standard HTML document but differs by replacing the BODY tag with the FRAMESET tag. Netscape is currently the only frame-capable browser at the time of this writing. To ensure that all browsers be able to render your HTML, the use of the NOFRAMES tag should exercised. The non-frame browsers will skip over the FRAMESET tag and thus, will not render the HTML. Within the NOFRAMES block should be the code for a similar document that does not rely on frames. The skeleton form that will make up the page;
<html>
<head> <title> .......... </title> </head>
<frameset>
<noframes>
Standard HTML code without frame dependance.
</noframes>
</frameset>
</html>
This is the main container for the frame. You express each value in the rows or cols attribute
in one of three ways: as an absolute number of pixels, a percentage of the
total width of height of the frameset, or as a portion of the space remaining
after setting aside room for the adjacent elements.
As with tables, Netscape Will match the size specs. you give a frameset as
closely as possible. Netscape allocates space to a particular frame relative
to all other frames in the row and column a resolutely fills the entire
document window.
For example;
Expressing rows and columns as a percentage of the window is more sensible.
Netscape designers included a very nifty asterisk (*) option for
<frameset> rows and cols valuse. It tells the browser to build the
adjacent frames into the frameset and then size the respective row or column
to whatever space is left over.
If you precede the asterisk with an integer value, the corresponding row
or column gets proportionally more of the available space. For example;
Netscape also allows the user to manually resize the frames. Should you
want to make your frameset static, use the noresize
attribute for the <frame> tag.
Let's render our first frameset.
Notice a few things in this example and it's rendered image. First, the order
in which the frames are filled. They are filled in across each row. Second,
frame 4 has a scrollbar because the code specified one, even though the
contents may otherwise fit without scrolling. (Scrollbars will automatically
appear if the contents overflow the frame's dimensions, unless explicitly
disabled.)
Another item of interest is the name attribute for frame 3. Once
named, you can reference a particular frame as where to display a hypertext-
linked document. To do that, you add a target attribute to the anchor
tag of the source hypertext link. For example, to link a document called
"new.html" for display in our example window frame 3, which has been given the
name "fill_me", the anchoe looks like this,
If the user chooses the link, say in frame 1, the "new.html" will replace
the original "frame3.html" contents in frame 3.
You can create some elaborate browser displays and create staggered frames
with multiple <frameset> tags nested within a top-level <frameset>
in the frame document. For example, create a layout of two columns, the first
with two rows and the second with three, by nesting two <frameset> tags
with row specs. within a top-level <frameset> that specifies the
columns. For example:
Note that the noresize attribute is set for the first column which prevents any
modification of the whole column.
View this example!
The <frame> tag only appears within a <frameset> tag. Use it to
set, via it's src attribute, the URL of the document content that
initially gets displayed inside the respective frame.
Frames are placed into a defined frameset column by column, from left to
right, and then row by row, from top to bottom, so the sequence and number of
<frame> tags are important.
The value of the src attribute for the <frame> tag is a URL
of the document that is to be displayed in the frame. There is no other way
to provide content for a frame.
The document referenced by the src attribute mat be any valid HTML
document or displayable object, including images and multimedia. In particular,
the referenced document may itself be be composed of one or more frames. The frames
are displayed within the referencing frame.
Since the source may be a complete HTML document, all the features of HTML apply
within a frame, including backgrounds, colors, tables, and fonts.
The optional name attribute for the <frame> tag labels that frame for
later reference by Netscape's target attribute for the hyperlink anchor <a>
tag. This way, you can alter the contents of a frame differently from one that contains
the link. Further details are later in this document.
This attribute is especially useful for frames that contain fixed images
serving as a button bar (image map), or a logo. By fixing the sixe of the
frame to contain just the image and setting the noresize attribute,
you guarantee the image will be displayed in the intended manner.
Netscape normally displays vertical and horizontal scrollbars with frames
whose contents exceed the alloted window space. If there is sufficient
room for the content, the scrollbars disappear. This attribute for the <frame>
tag gives you explicit control over whether scrollbars appear or dissappear.
Netscape adds scrollbars as needed by default.
Netscape normally places a small amount of space between the edge of the frame and
it's contents. You can change those margins with the marginheight and
marginheight , each including a value for the exact number of pixels to place
around the frame contents.
As above in the <frame> tag description, you can label a frame by adding the
name attribute to its <frame> tag. Once named, the frame may become the
destination display window for a hypertext-linked document selected within a document
displayed in some other frame. You can accomplish this redirection by adding a special
target attribute to the anchor that references the document.
If you include a target attribute within an <a> tag, Netscape will load
and display the document named in the tag's href attribute in a frame or window
whose name matches the target. If the named frame or window does not exist, Netscape will
open a new window, give it the target's name, and load the new document into that window.
Thereafter, any future documents will load into the new window.
A simple table of contents document, for example, might direct documents into a seperate
window:
The first time the user clicks on one of the table of contents hypertext links,
Netscape will open a new window, name it "view_window", and display the desired document's
contents inside of it. Any other selections will replace the previous document with the
current selection.
Throughout the whole process, the window containg the table of contents is always in
view. In other words, you can place the table of contents in it's own frame of a two
frame document and use the adjacent frame for display of the selected documents:
Netscape has reserved four target names for special document redirection actions.
They are:
_blank -Netscape always loads a target="_blank" linked document into a newly
opened, unnamed window.
_self -This target value is the default for all <a> tags that do not specify a
taarget, causing the target document to be loaded and displayed in the same frame or
window as the source document. This target is redundant unless used with the <base>
tag in a documents head.
_parent -This is equivalent to the _self target if the reference is in a top-level frame.
Consider a link in a frame that redefines the current unique single frame into a three-column
frameset. This frameset is a row in the top level frameset being
displayed in the browser window. If no target is specified for the hypertext link, it would
be loaded into the containing frame or in one out of the three-column frameset. If a target
of _parent were specified, the document is loaded back into the unique single frame. Thus,
removing the three-column frameset.
_top -This target causes the document to be loaded into the complete browser window,
removing any frames currently displayed in the window.
It can be tedious to specify a target for every hypertext link in your documents, especially
when most are targeted at the same window or frame. To alleviate this you can add a target
attribute to its <base> tag.
The target attribute in the <base> tag sets the default target for all hypertext links
in the current document that does not contain an explicit target attribute. As example:
It is a good idea to to make sure that every hypertext link that references a remote document,
one that is not pertaining to your unique site, has a target of _top.
This way, when someone selects a link that takes them away from your site, the remote document
will replace the contents of the entire window.
Created by Mouse with suggestions by Merrill This has been called times.
<frameset rows="150,300,150">
creates three rows of frames, each extending across the window. The first and
last frame are set to 150 pixels tall, the second to 300 pixels. Netscape
automatically stretches or compresses the first and last frame to occupy one
quarter of the browser space, thus leaving the remaining half of the browser
space for the second frame.
<frameset cols="10%,3*,*,*>
creates four columns: the first column occupies 10 percent of the overall
width. Netscape then gives the second column three fifths of the remaining
space, and the third and fourth frame occupy one fifth each.
<html>
<head>
<title>Frames Layout</title>
</head>
<frameset rows="60%,*" cols="65%,20%,*">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html" name="fill_me">
<frame scrolling=yes src="frame4.html">
<frame src="frame5.html">
<frame src="frame6.html">
<noframes>
Sorry, this document can be viewed only with Netscape
Navigator version 2.0 or later.
<a href="frame1.html">Take this link</a>
to the first HTML document in this set.
</noframes>
</frameset>
</html>
View this example!
<a href="new.html" target="fill_me">
<frameset cols="50%,*">
<frameset rows="50%,*">
<frame noresize src="frame1.html">
<frame src="frame2.html">
</frameset>
<frameset rows="33%,33%,*">
<frame src="frame3.html">
<frame src="frame4.html">
<frame src="frame5.html">
</frameset>
</frameset>
<frame>
>The src attribute
>The name attribute
>The noresize attribute
>The scrolling attribute
>The marginheight and marginwidth attribute
Named Frame or Window Targets
>The target attribute for the <a> Tag
<h3>Table of Contents</h3>
<ul>
<li><a href="pref.html" target="view_window">Preface</a>
<li><a href="chapt1.html" target="view_window">Chapter 1</a>
<li><a href="chapt2.html" target="view_window">Chapter 2</a>
<li><a href="chapt3.html" target="view_window">Chapter 3</a>
</ul>
<html>
<head>
<title>Useful Code</title>
</head>
<frameset cols="150,*">
<frame noresize src="toc.html">
<frame name="view_window" src="pref.html">
</frameset>
</html>
View this example!
>Special Targets
>The <base> Default Target
<html>
<head>
<title>Table of Contents</title>
<base target="view_window">
</head>
<body>
<ul>
<li><a href="pref.html">Preface</a>
<li><a href="chapt1.html">Chapter 1</a>
<li><a href="chapt2.html">Chapter 2</a>
<li><a href="chapt3.html">Chapter 3</a>
</ul>
</body>
</html>
View this example including the above frameset!
A Final and Useful Suggestion