Web Design & Development

Creating Frames-Based Pages

The Basic Frameset Structure

As noted, with frames you are displaying more than one HTML document on the window. Somehow you have to tell the Web browser how to lay everything out. This is where the frameset comes in. The frameset defines how the window is to be divided up based on rows and columns.

Fixed Top Fixed Left

The most common of frame sets has a main body, a left menu, and a header. This type of page actually consists of four pages, not one. The four pages as shown in the demo are:

frame_demo1_left.html
frame_demo1_header.html
frame_demo1_body.html

and then the page that wraps it all together, frame_demo1_frameset.html

Note: the names can be whatever you want, I just named them this way so it was easier to tell what went where.

The frameset code would look like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<frameset rows="80,*" cols="*" frameborder="NO" border="1" framespacing="0">
<frame src="frame_demo1_header.html" name="topFrame" scrolling="NO" noresize>
<frameset cols="80,*" frameborder="NO" border="1" framespacing="0">
<frame src="frame_demo1_left.html" name="leftFrame" scrolling="NO" noresize>
<frame src="frame_demo1_body.html" name="mainFrame">
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

Fixed Top

A more common use nowadays is to have a frameset consisting of only two areas, such as a fixed navigation bar across the top. This way you have more of the page real estate to use for the body.

This type of page consists of three pages, not one. The four pages in the demo are:

frame_demo2_header.html
frame_demo2_body.html
frame_demo2_frameset.html

The frameset data would look like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">
<frame src="frame_demo2_header.html" name="topFrame" scrolling="NO" noresize>
<frame src="frame_demo2_body.html" name="mainFrame">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

Targeting Areas Where Links Open

Sometimes you don't want a link on a frames based page to open in the same frame. For example perhaps you want a link to open in a new window, or replace the entire frameset. In this case you specific a "target" where you want the link to open. Here are the reserved words for targeting areas where links open:

_blank - opens in a new window
_self - opens in the same frame
_parent - replaces the parent frameset
_top - replaces the full original window

The code would look something like this: <a href="http://www.google.com" target="_blank">

Inline frames

Inline frames, otherwise known as Iframes, are used to add frames "inside" a regular HTML document. Here is a sample of an Iframe:

The source code for the above looks like this:

<p style="align:center"><iframe src="demo_iframe.html" width="300" height="100"></iframe></p>

As you can see, we simply specify what we want to appear in the inline frame and then specify the parameters of the frame.