Frames Course

 

Setting Up The Frames

Between the <FRAMESET> tags, the <FRAME> tags are placed to actually create the frames themselves.

One <FRAME> tag per column or row. For our sample frames document we will need two <FRAME> tags plus their attributes. Below are the tags and attribute used in creating a frame.

All the attributes are place within the <FRAME> tag.

Tag Or Attribute
Description

<FRAME>
Establishes a frame.

BORDER="#"
Specifies width of border in pixels.

FRAMEBORDER=#
Specifies border (1) or No Border (0)

NAME="___"
Provides frame name.

NORESIZE
Prevents reader from resizing the frame.

SCROLLING="___"
Specifies whether the frame can scroll
in terms of YES, NO or AUTO

SRC="URL"
Identifies the file that will be set into the frame.

Here is our <FRAMESET> layout document we created on the previous page. This is where the <FRAME> tags will be placed.

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
</FRAMESET>
<NOFRAMES>
<H1>Welcome To My Page</H1>
<A HREF="noframes.html">
This Is The No Frames Version</a>
</NOFRAMES>
</HTML>

First let's add the <FRAME> tag.

We will also add the SRC= attribute to fill in the first column we created with our navigation links. The html document was called navigation.html.

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
<FRAME SRC="navigation.html">
</FRAMESET>
<NOFRAMES>
<H1>Welcome To My Page</H1>
<A HREF="noframes.html">
This Is The No Frames Version</a>
</NOFRAMES>
</HTML>

Now let's add the NAME= attribute.

This will name the frame so that you can refer to it later when you target the links to a particular frame.

You can name a frame anything you would like. For our sample we will name the frame "navigation".

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
<FRAME SRC="navigation.html"
NAME="navigation">
</FRAMESET>
<NOFRAMES>
<H1>Welcome To My Page</H1>
<A HREF="noframes.html">
This Is The No Frames Version</a>
</NOFRAMES>
</HTML>

Add the SCROLLING= attribute.

This attribute will determine whether the reader can scroll the frame or not.

The options are YES, NO or AUTO(matic). For our navigation frame I will choose "NO" this will not give the reader a scrollbar to scroll the navigation frame.

Note to MSNTV Users: MSNTV does not have this option to scroll a frame. On MSNTV both frames will scroll together. You should put this attribute in for computer users.

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
<FRAME SRC="navigation.html"
NAME="navigation" SCROLLING=NO>
</FRAMESET>
<NOFRAMES>
<H1>Welcome To My Page</H1>
<A HREF="noframes.html">
This Is The No Frames Version</a>
</NOFRAMES>
</HTML>

You may want to add the NORESIZE attribute. This will prevent the reader from resizing the frame. This is not used in our sample here but I will show how it would be placed within the <FRAME>tag.

MSNTV Users: Again, this is not an option on MSNTV.

<FRAME SRC="navigation.html"
NAME="navigation" SCROLLING=NO NORESIZE>

Adding the second <FRAME> tag.

Lastly, we will add the second frame. This is our content html document that we created already.

The html document was called content.html

The attributes used are the same as above with the exception of the SCROLLING=. In this frame I will allow the frame to be scrolled (YES).

Also this frame will have a new NAME= I will name this frame "content".

<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
<FRAME SRC="navigation.html"
NAME="navigation" SCROLLING=NO>
<FRAME SRC="content.html"
NAME="content" SCROLLING=YES>
</FRAMESET>
<NOFRAMES>
<H1>Welcome To My Page</H1>
<A HREF="noframes.html">
This Is The No Frames Version</a>
</NOFRAMES>
</HTML>

Now your frames are complete. This document is ready to be viewed.

Click here to see our sample frames page Click here for the html code for this sample page. MSNTV users click here to see the code.

All that is left to do is talk about the TARGET tags. This will be covered in the next section.