Frames is one of the more complicated parts of HTML, but once you get the idea, they are easy to write, they just take some time.
The purpose of frames is to allow the Web designer to divide a single Web page in to multiple "frames" that can each be manipulated separately. Frames were created with Netscape Navigator 2.0 and were added to the HTML Specification with HTML 4.0.
The first thing you should realize when you create a framed Web site is that every "page" on your site will have n+1 HTML pages to write. Where n is the number of frames on your page. For a page like the image, you would have to write 3 separate HTML pages. Or 2 frames plus 1 container.
I usually write the content first and then write the container HTML page. This is the HTML for the top and bottom frame:
navigate.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Navigation Frame</title>
</head>
<body style="background-color:#fc0;">
<p><a href="http://webdesign.about.com/od/frames/a/aa010598.htm" target=_top>Return to Frames Tutorial</a> |
<a href="http://webdesign.about.com/cs/frameshelp/ target=_top>More Frames Info</a> |
<a href="http://webdesign.about.com/" target=_top>Home</a></p>
</body>
</html>
body.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Main Body Page</title>
</head>
<body style="background-color:#66f;">
<h1>This is My Web Page</h1>
I wrote it with my own hands.
</body>
</html>
The last page you write is the frames container page. You tell the browser that this page is a FRAMESET and you define the size and number of the frames. Then you tell the browser where to find the first FRAME and subsequent frames. Then you specify what should be done with non-frame compliant browsers with the NOFRAMES tag. This is what this page looks like:
frame.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>A Sample Framed Page</title>
</head>
<frameset rows="50,*">
<frame src="/tmc/navigate.html" />
<frame src="/tmc/body.html" />
<noframes>
<p>This is a framed page, please go to <a href="/tmc/body.html">the body page</a> for more information.</p>
</noframes>
</frameset>
</html>
Some things to note:
- Neither of the frames are named
- Frames are named so you can specify where to open links
- I used target="_top" to tell the links to go to the top level of the browser rather than opening in the same frame
