<h1>Frames - A Generic Frame Pageh1>
<p>Frames are most typically used to have a menu in one frame, and content in
another frame. When someone clicks a link on the menu that web page is then
opened on the content page. Here is a classic example of a basic "index"
frameset with a menu on the left and content on the right.p>
<div class="codewrap"><h2 class="specialT">HTML Code:h2><pre class="code">
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
pre>div>
<h2 class="specialT">Frame Set:h2><div class="display">
Here's the example: <a href="http://www.tizag.com/pics/htmlT/frameindex.html">
Frame Indexa>
div>
<ul>
<li><b>framesetb> - The parent tag that defines the characteristics of this
frames page.
Individual frames are defined inside it.li>
<li><b>frameset cols="#%, *"b>- Cols(columns) defines the width that each frame
will have.
In the above example we chose the menu (the 1st column) to be 30% of the total page
and used a "*", which means
the content (the 2nd column) will use the remaining width for itself.li>
<li><b>frame src=""b> -The location of the web page to load into the frame.li>
ul>
<p>A good rule of thumb is to call the page which contains this frame information
"index.html" because that is
typically a site's main page.p>
<h1>Adding a Banner or Title Frameh1>
<p>Add a row to the top for a title and graphics with the code as follows:p>
<div class="codewrap"><h2 class="specialT">HTML Code:h2><pre class="code">
<html><head></head>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
pre>div>
<p><b>frameset rows="#%, *"b>- rows defines the height that each frame will have.
In the above example we chose the new title (the 1st row) to be 20%
of the total page height and used a "*", which means that menu and content (which are
the 2nd row) will use the remaining height.p>
<h1>FrameBorder and FrameSpacingh1>
<p>You probably noticed those ugly gray lines that appear between the frames.
It is possible to remove these and manipulate the spacing between frames with
frameborder and framespacing. These attributes appear within the <i>frameseti> tag.
p>
<p>Note: <i>Framespacingi> and <i>borderi> are the same attribute, but some
browsers only recognize one or the
other, so use both, with the same value, to be safe.p>
<ul>
<li><b>frameborder="#"b> - A zero value shows no "window" border.li>
<li><b>border="#"b>- Modifies the border width, used by Netscape.li>
<li><b>framespacing="#"b> -Modifies the border width, used by Internet Explorer.li>
ul>
<p>Here's an example of the same frameset without the borders.p>
<div class="codewrap"><h2 class="specialT">HTML Code:h2><pre class="code">
<html><head></head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
pre>div>
<h2 class="specialT">Frame Borders:h2><div class="display">
Here's a visual:<a href="http://www.tizag.com/pics/htmlT/frameindex2.html">Visuala>
div>
<h1>Frame Name and Frame Targeth1>
<p>How nice would it be to make each menu link load into the content page?
We do this by naming each frame and setting the correct <i>base targeti>
inside menu.html.p>
<div class="codewrap"><h2 class="specialT">HTML Code:h2><pre class="code">
<html><head></head>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</html>
pre>div>
<div class="codewrap"><h2 class="specialT">HTML Code:h2><pre class="code">
<html><br><head><br>
<base target="content"><br>
</head><br>
...<br>
</html>
pre>div>
<h2 class="specialT">Frame Target:h2><div class="display">
Here's the Visual: <a href="http://www.tizag.com/pics/htmlT/frameindex-target.html">
Visuala>
div>
<p>We first named the content frame "content" on our frame page and then we set
the base target inside menu.html to point to that frame. Our frame page is now a
perfectly functional menu & content layout!p>
<h1>Noresize and Scrollingh1>
<p>It's possible to further customize the <frame> tag using the <i>noresizei>
and <i>scrolling=""i> attributes.p>
<div class="codewrap"><h2 class="specialT">HTML Code:h2><pre class="code">
<html><head></head>
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
<frame src="title.html" noresize scrolling="no">
<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
<frame src="menu.html" scrolling="auto" noresize>
<frame src="content.html" scrolling="yes" noresize>
</frameset>
</html>
pre>div>
<h2 class="specialT">Noresize and Scrolling:h2><div class="display">
Here's the Visual: <a href="http://www.tizag.com/pics/htmlT/frameindex3.html">
Visuala>
div>
<ul>
<li><b>noresizeb> - Do not let the frames be resized by the visitor.li>
<li><b>scrolling="(yes/no)"b>- Allow scrolling or not inside a frame.li>
ul>
<p>We set the scrolling for our content frame to yes to ensure our visitors will
be able to scroll if the content goes off the screen. We also set the scrolling
for our title banner to no, because it does not make sense to have a scrollbar
appear in the title frame.p>
Comments