The most popular use of frames is to allow a static navigation to stay on one part of the screen (in one frame)
while the content changes in another like so:
The user clicks the links on the navigation panel on the left and these bring up new pages of content on the right.
To acheive this affect in HTML you actually need three pages of code.
- The navigation page
- The content page
- A 'parent' page containing references to the two 'child' pages.
This is how frames work. The page the user types into their browser address bar actually only contains the frame page information - no actual content.
It will look something like this:
<HTML>
<HEAD><TITLE>My First Frame Page</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="/html/navigation_page.htm">
<FRAME SRC="/html/content_page.htm">
</FRAMESET>
</HTML>
|
|
The tag to produce your set of frame-based pages is, conveniently enough, called the FRAMESET.
Within the frameset tag we specify the size of each frame. If you want a traditional vertical frame, as in the
diagram above, use COLS="25%,75%" (or whatever percentage you like). If you want horizontal frames replace COLS with ROWS.
You can also user precise amounts in pixels. Another very common use is to specify one half precisely and leave the other to fill in any remaining space
(bearing in mind users' screens may have a variety of proportions. In this case, the FRAMESET tag looks something like this:
with the * here indicating 'fill all remaining space with this frame.
Whether it's vertical, or horizontal, within the FRAMESET we have two FRAME tags,
one for each of the frames specified in the frameset.
This refer to the two html pages we want to use.
To complete your framed page, all you need to do is create an html page to display
the navigation (long and thin if it's a vertical frame),
and a more proportioned page for the content frame. Save them in the same directory as the Frameset page and use
the names you specified in the Framset page. Type in the address of the framset page and you should see the
navigation and content pages appear in the correct place.
Next you might want to look at our specifying frames tutorial to see how to make
the links in the navigation frame change the content frame.
|
Useful Links
|
|
