Lesson 17

Frames

How to Use Frames

Frames work very well when you want to keep the viewer on your site while linking to other sites. If you setup a web site for restaurant and you want to offer links to movies but you don't want to loose them in the process. Some designers like to use frames to link to pages in their own site. In such cases it might work better to use a table. Some very old browsers don't support frames and some users don't like them. Frames are a nesseccery part of any HTML tutorial so we added them. However, I would suggest using frames only when necessary. That said let's get started.

To create a frames page we start by replacing the body tags with frame tags. Then we build the frames page inside the frame tags. Each frame is a separate document, the frame page just puts them together. Then we add frame columns and rows much like columns and cells in a table.

 

 

To begin start a new page from your template add the following to the body of your page.
<h1> My Frame Page Banner </h1>

Save the page as "headline.htm".

Then replace <h1> My Frame Page Banner with

<h1> My Frame Page Main </h1>

Save the page as "main.htm".

Next replace <h3>Contents</h3>

<h1> My Frame Page Contents </h1>

Save the page as "contents.htm".

Finally we're ready to start the frames page.

Remove everything from the body section of your page and replace the

<body . . . > </body> tags and everything in them with the following:

<frameset rows="100,*">
<frame name="banner" src="headline_frame.htm">
<frameset cols="150,*">
<frame name="contents" target="main" src="contents_frame.htm">
<frame name="main" src="main_frame.htm">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>

Save the page as "frames.htm" and view it in your browser.

Now to explain these tags:

<frameset rows="100,*"> sets up two rows, first row to 100 pixels and the second to whatever is left of the screen.

<frame name="banner" src="headline.htm"> sets the top frame to display the document "headline.htm"

<frameset cols="150,*"> set up two columns, first row to 100 pixels and the second to whatever is left of the screen.

<frame name="contents" target="main" src="contents.htm"> sets first column to show "contents.htm"

<frame name="main" src="main.htm"> sets second column to show

"main.htm"

</frameset> closes frames

<noframes> starts message for browsers the don't support frames

<body><p>This page uses frames, but your browser doesn't support

them.</p></body>

</noframes> closes message for browsers the don't support frames

</frameset> closes document

One final note on frames. When setting the size of a frame your can use the number of pixels or a percentage of the screen. If you use the number of pixels you should set one frame to * that way the page will adjust itself to fit whatever size screen or resolution the viewer is using.

So much for frame basic. The tags below will tell you more options you can use with frames.

Tags uses in this section
Frame Document <FRAMESET></FRAMESET> (instead of <BODY>)
Row Heights <FRAMESET ROWS=,,,></FRAMESET> (pixels or %)
Column Widths <FRAMESET COLS=,,,></FRAMESET> (pixels or %)
Borders <FRAMESET FRAMEBORDER="yes|no"></FRAMESET>
Border Width <FRAMESET BORDER=?></FRAMESET>
Border Color <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET>
Frame Spacing <FRAMESET FRAMESPACING=?></FRAMESET>
Define Frame <FRAME> (contents of an individual frame)
Display Document <FRAME SRC="URL">
Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top>
Margin Width <FRAME MARGINWIDTH=?> (left and right margins)
Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins)
Scrollbars <FRAME SCROLLING="YES|NO|AUTO">
Not Resizable <FRAME NORESIZE>
Borders <FRAME FRAMEBORDER="yes|no">
Border Color <FRAME BORDERCOLOR="#$$$$$$">
Unframed Content <NOFRAMES></NOFRAMES> (for non-frames browsers)
Inline Frame <IFRAME></IFRAME> (takes same attributes as FRAME)
Dimensions <IFRAME WIDTH=? HEIGHT=?></IFRAME>
Dimensions <IFRAME WIDTH="%" HEIGHT="%"></IFRAME>