Draac.Com's Frames Course

• Html Course
• Tables Course
• Html Test Bed

Draac.Com's Frames Course

Page 3 - Frames Course
Keep Your Frames Site Simple,
Don't Add Too Many Frames.

• Creating The Frameset Document

The first step is to create a new HTML document
that contains the following tags.
<HTML>, <HEAD> and <TITLE>
Note: NEVER put a <BODY> line of code
in a frameset document.
<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
</HTML>

• Now add a pair of <FRAMESET> tags.

In more complex frames documents
you could have multiple tags to add frames
within frames but that is not necessary in
our sample.
<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>

• Adding the COLS= attribute.

Our sample we are creating will be set up
in columns. At the end of the course
I will show a sample frames document
created with ROWS.
For our sample frames document the first
column will be 21% of the pages width.
While the column (on the right) fills in
the remaining space.
The ( * ) symbol will tell the browser to fill in
the remaining space with the right side column.
A number value could be used in place of the ( * )
but that would mainly be used with a document
that has more than two frames.
In place of percentage, you can also use a pixel
value. An example would be COLS="125",*
We will be using percentage here for our document.
So lets add the COLS= attribute to our sample.
<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*">
</FRAMESET>
</HTML>

• Adding FRAMEBORDER, BORDER,
BORDERCOLOR and FRAMESPACING attributes.

We will only be adding a frameborder to our
sample document.
Experiment with the effects of the other attributes.
All these attributes are placed within the
FRAMESET line of code.
Also try BORDER=0 FRAMEBORDER=0
to remove the borders. (not on MSNTV)
Why use two tags for a frame border ?
One is for Netscape and one is for Internet Explorer.
The two standard browsers require special
accommodations.
Let's add the BORDER to our document.
<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
</FRAMESET>
</HTML>

• Add a pair of <NOFRAMES> tags

This is to accommodate browsers that
cannot display a page in frames.
<HTML>
<HEAD>
<TITLE>Frames Test Page</TITLE>
</HEAD>
<FRAMESET COLS="21%,*" BORDER=1 FRAMEBORDER=1>
</FRAMESET>
<NOFRAMES>
</NOFRAMES>
</HTML>
Provide a regular HTML code within the
NOFRAMES tags for readers with frame
incapable browsers to see.
In this code, include a clickable link
to your noframes HTML document.
<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>
That completes the structure of our
sample FRAMESET document.
In the next section we will set up the actual
frames within this frameset layout.

Back------Next

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