SpydarGrafix³ Frames Lesson

Using Frames

Tags Covered
[<FRAMESET></FRAMESET>] - [<FRAME>] - [BORDERLESS FRAMES]
[<NOFRAMES></NOFRAMES>]

     Before we get started on this lesson, we would like to make note of a few things...First off, frames are not a choice of these webmasters, we feel they are more of a nuisance then necessary for anyone wanting to view and enjoy their trips on the internet. However, they do serve a purpose for some, by dividing their pages by priority.
     Second, people who are disabled have a hard time navigating a framed site, and your pages should be a luxury for ALL to view and enjoy.
     If you still want to continue and design your site with frames, do your viewers a favor, and give them a choice of how they want to view your site...with or without frames. Doing this means you have to design your site twice, and link the "no frames" site with all your "no frames" pages, and the "frames" site with all of your "frames" pages. This makes for a very large site, and doubling up on workload, but it's the only way that is fair to everyone. The choice is yours, our choice is...No Frames.

Now, to begin with, you'll need to open up NotePad or your favorite HTML editor and type in the following:

<HTML> <HEAD> <TITLE>Frames Page</TITLE> </HEAD> <BODY> Snuffy </BODY> </HTML>
Save this file, in your html folder (directory), as snuffy.html...

Now, to begin with, you'll need to open up NotePad or your favorite HTML editor and type in the following:
<HTML> <HEAD> <TITLE>Frames Page</TITLE> </HEAD> <BODY> Snuffy </BODY> </HTML>

Now, change the word "Snuffy" in this file, to "Smokey" and save it as smokey.html
It will look like this:

<HTML> <HEAD> <TITLE>Frames Page</TITLE> </HEAD> <BODY> Smokey </BODY> </HTML>
OK, GREAT WORK!!

Now, change the word "Snuffy" in this file, to "Smokey" and save it as smokey.html It will look like this:
<HTML> <HEAD> <TITLE>Frames Page</TITLE> </HEAD> <BODY> Smokey </BODY> </HTML>

Now we need to make a third page which will have two links to snuffy.html and smokey.html.

<HTML> <HEAD> <TITLE>Frames Page</TITLE> </HEAD> <BODY> Knickers <P> <A HREF="smokey.html" TARGET="RIGHT">See Smokey</A><BR> <A HREF="snuffy.html" TARGET="RIGHT">See Snuffy</A> </BODY> </HTML>
You TARGET the frame you want to change. We used: TARGET="RIGHT" so that the RIGHT side frame is the frame that changed when the link was clicked, and the Left frame stayed the same, to choose other links from as the page is viewed.
If you want to also TARGET to a Full Page View, use:

Now we need to make a third page which will have two links to snuffy.html and smokey.html.
<HTML> <HEAD> <TITLE>Frames Page</TITLE> </HEAD> <BODY> Knickers <P> <A HREF="smokey.html" TARGET="RIGHT">See Smokey</A><BR> <A HREF="snuffy.html" TARGET="RIGHT">See Snuffy</A> </BODY> </HTML>

<A HREF="name of page.html" TARGET="_top">. We have found that even though we believe is using Capital Letters for designing pages, that the TARGET="_top" will only work with the lower case letters. By using the TARGET="_TOP" another window opens.

FRAMESET

Now we make a master page. This page is what does all the work by defining our frames. You set your FRAMESET and FRAMES in this master.html and it is what guides the separate frames you have created.

Open a blank HTML file, and place the following into it:

<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML>

Open a blank HTML file, and place the following into it:
<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML>

Now that you know how to start your FRAMESET...there are a few attributes for the FRAMESET tag. You will include them within the Tag itself:

BORDER="..." Determines the WIDTH in pixels of the border drawn around the frame (Netscape).
COLS="..." Divides the FRAMESET into Columns, to the specified width, using pixels, percentage (%), or sizes relative (*) to the other columns.
FRAMEBORDER="..." Turns the border around all frames of the frameset on or off (Internet Explorer).
- 0 = no border
- 1 = default
FRAMESPACING="..." Allows you to set the spacing between frames.
ROWS="..." Creates the frames as rows and you specify the width of each row, using pixels, percentages (%), or sizes relative (*) to the other rows.
SCROLLING="..." Specifies if you want each frame to have a scrolling bar, so that the frame page moves up or down. The values used are: "yes", "no", or "auto".

We will begin framing with COLUMNS using the COLS="" attribute. Change your HTML to look like this:

<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> </FRAMESET> </HTML>

We will begin framing with COLUMNS using the COLS="" attribute. Change your HTML to look like this:
<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> </FRAMESET> </HTML>

When you use the COLS="20%,80%" attribute in your FRAMESET tag, it designates the Left column to be 20% of the page width and the Right column will be 80% of the page width. Play with this to see what best suits how you are setting your frames. This can also be done in Pixels, such as COLS="120,380".

FRAME

The knickers.html is where you had the links to snuffy.html and smokey.html, the master page will tell the direction of the loads. IE: knickers.html will always load on the Left of the page and snuffy.html will always load on the Right of the page, snuffy.html is a default load, the links in knickers.html will guide which page you want to see. You need to have a default load for the main part of the page, you can make it whatever you choose. We could make the default load to smokey.html, however we chose to make it load snuffy.html.

Introducing the FRAME tag below, edit your file so it looks like this:

<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="knickers.html" NAME="LEFT"> <FRAME SRC="snuffy.html" NAME="RIGHT"> </FRAMESET> <HTML>

Introducing the FRAME tag below, edit your file so it looks like this:
<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="knickers.html" NAME="LEFT"> <FRAME SRC="snuffy.html" NAME="RIGHT"> </FRAMESET> <HTML>

This will create two frames side by side like this:

Knickers
See Smokey
See Snuffy
Snuffy

Save this file as master.html (or index.html - just be sure not to overwrite any of your previous work!)

Let's see what it looks like!

Check yours, too, by opening your master.html (or index.html) file in your browser.

Now that you know how to do your FRAME...there are a few attributes for the FRAME tag. You will include them within the Tag itself:

BORDER="..." Determines the width of the border around the frame (Netscape).

FRAMEBORDER="..." Turns the border around all frames of the frame on or off (Internet Explorer).

0 = no border
1 = default

MARGINWIDTH="..." Determines the WIDTH of the TOP and BOTTOM margins of the frame, in pixels.

MARGINHEIGHT="..." Determines the HEIGHT of the RIGHT and LEFT margins of the frame, in pixels.

NAME="..." The TARGET name for the frame.

NORESIZE="..." Prevents the user from resizing your frame.

SCROLLING="..." Specifies if you want each frame to have a scrolling bar, so that the frame page moves up or down. The values used are: "yes", "no", or "auto".

SRC="..." The source file for the frame.

Borderless Frames

If you choose to have borderless frames, which in our opinion are very attractive, in your <FRAMESET> tag, do the following:

<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET BORDER="0" FRAMEBORDER="0" COLS="20%,80%"> <FRAME SRC="knickers.html" NAME="LEFT"> <FRAME SRC="snuffy.html" NAME="RIGHT"> </FRAMESET> </HTML>

If you choose to have borderless frames, which in our opinion are very attractive, in your <FRAMESET> tag, do the following:
<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET BORDER="0" FRAMEBORDER="0" COLS="20%,80%"> <FRAME SRC="knickers.html" NAME="LEFT"> <FRAME SRC="snuffy.html" NAME="RIGHT"> </FRAMESET> </HTML>

NOFRAMES

After your <FRAMESET> tag, do the following, so as to allow people who use non-frame compatabile browsers, and handicap people to view your site easily.

<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET BORDER="0" FRAMEBORDER="0" COLS="20%,80%"> <FRAME SRC="knickers.html" NAME="LEFT"> <FRAME SRC="snuffy.html" NAME="RIGHT"> </FRAMESET> <NOFRAMES> <BODY> Place your non-frames page here </BODY> </NOFRAMES> <HTML>

After your <FRAMESET> tag, do the following, so as to allow people who use non-frame compatabile browsers, and handicap people to view your site easily.
<HTML> <HEAD> <TITLE>Master Page</TITLE> </HEAD> <FRAMESET BORDER="0" FRAMEBORDER="0" COLS="20%,80%"> <FRAME SRC="knickers.html" NAME="LEFT"> <FRAME SRC="snuffy.html" NAME="RIGHT"> </FRAMESET> <NOFRAMES> <BODY> Place your non-frames page here </BODY> </NOFRAMES> <HTML>

[ Back to the TOP ]

[ Back to Tutorial Page ] - [ Next Lesson ]

[ Home Page | HTML Bookstore | Free Web Graphics | Our Friend's Pages ]

[ E-Mail Us ]

This page hosted by

Get your own Free Home Page

This Site Created By JPWeb Consulting ©1996-2004 - All Rights Reserved

This Site Created By JPWeb Consulting
©1996-2004 - All Rights Reserved