Draac.Com's Frames Course

• Html Course
• Tables Course
• Html Test Bed

Draac.Com's Frames Course

Page 4 - Frames Course
Building In Frames Brings
Your Web Sites To You !

• 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
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.

Back------Next

Draac.Com Is Hosted By ValueWeb
Register UK domain names at Domain Names UK