|
|
Introduction to Frames
This is a tutorial for frames. It assumes
that you already have some knowledge of basic HTML. If you do not, then try out
our Basic Html Tutorial to get you started.
This tutorial will guide you through the
different commands and design styles of frames.
Frames are an option within HTML that allow
you to take 2 or more pages and place them on one page.
First, before we get started, you will need
five different html pages to work with. You can type them up yourself.
testone.html
-
<html>
<head><title>This is page number one</title></head>
<body>
<font color="red">This is a test page</font>
<p>
<font color="orange" size="4">Not very exciting, just
text.</font>
</body>
</html>
testtwo.html
-
<html>
<head><title>This is test page number 2</title></head>
<body>
<font color="blue">This is another test page, but it is better
because it has a graphic!<p>
<p>
<image src="designer.gif">
</body>
</html>
testthree.html
-
<html>
<head><title>This is test page number 3</title></head>
<body>
<font color="grey"><big>This page is just about the best!
The image in this one is centered!</big></font>
<center>
<image src="htmlsmall.gif">
</center>
</body>
</html>
testfour.html
-
<html>
<head><title>This is test page number 4</title></head>
<body>
<center>
<font color="green" size="4">This has got to be the
best page because the text is centered as well as the picture.</font>
<p>
<img src="header2.gif">
</body>
</html>
testfive.html
-
<html>
<head><title>This is test page number 5</title></head>
<body>
<center>
<font color="purple" size="4">This is the best page,
it has links to all of the other pages, each doing something different! Plus the
graphic has a surprise link! It is not, however, a very good
surprise!</font>
<p>
<a href="http://www.freethemes.com"><img src="newlogo.gif"></a>
</body>
</html>
Alright, there are the five pages you need.
Place 1 clipart in each one of them.
Basic Structure
A frames page consists of one or more pages
placed on a controlling page. This is the
page we will create now.
The first command you must know is the <FRAMESET>
command. This is the command that actually creates the frames. You must tell <FRAMESET>
if you want columns or rows. You must also tell <FRAMESET>
how large each frame should be. So, first set up your basic code:
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
</HTML>
Notice that there is no <BODY> command.
This command is generally not used on a framed page.
Now it is time to add in the <FRAMESET>
command. Add it like so:
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
<FRAMESET COLS="50%,50%">
</FRAMESET>
</HTML>
Notice that the <FRAMESET>
command must be closed off.
Now, the Frames are set up to each take up half of the browser. Now for the
important part, the pages to add. This will use another command, the <FRAME
SRC> command.
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="testone.html">
<FRAME SRC="testtwo.html">
</FRAMESET>
</HTML>
Now take a look at what you done.
As you can see, each page has taken up half of the space on the page. Don’t
like that style? Try rows instead!
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="testone.html">
<FRAME SRC="testtwo.html">
</FRAMESET>
</HTML>
I can see your next question... can I use
more then two pages at the same time? Of course!
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
<FRAMESET ROWS="20%,20%,20%,20%,20%">
<FRAME SRC="testone.html">
<FRAME SRC="testtwo.html">
<FRAME SRC="testthree.html">
<FRAME SRC="testfour.html">
<FRAME SRC="testfive.html">
</FRAMESET>
</HTML>
Pretty confusing looking page isn't it?
Remember that when using frames. Too many frames can look confusing to anyone
trying to view your page.
Now, there is one problem with the above
examples. The effect you want is not what the person on the other end may see if
they use a different screen resolution then you. So, try using pixels instead.
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
<FRAMESET COLS="140, *">
<FRAME SRC="testone.html">
<FRAME SRC="testtwo.html">
</FRAMESET>
</HTML>
Not bad, eh? Looks a little more like a table
of contents page with a main page next to it. Now, the * that was after the 140
means that whatever space is left over should be taken by the other page.
Now it is time to fiddle around a little bit,
to get used to the different ways that you can set up frames. So, try this:
<HEAD><TITLE>This
is the Control Page</TITLE></HEAD>
<FRAMESET COLS="*,*">
<FRAMESET ROWS="*,50%">
<FRAME SRC="testone.html">
<FRAME SRC="testtwo.html">
</FRAMESET>
<FRAMESET ROWS="*,50%">
<FRAME SRC="testthree.html">
<FRAME SRC="testfour.html">
</FRAMESET>
</FRAMESET>
</HTML>
As you can see, that created four frames of
equal size. Using the columns and rows commands together can allow you to create
all sorts of effects. Always remember though, too many frames tend to be
confusing. Design suggestion: Use them as a table of contents or site map. Try
not to use them too much, or the site looks bad and becomes too difficult to
navigate.
Now what if you don't like those borders?
Well, let's get rid of them!
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
<FRAMESET COLS="*,*" >
<FRAMESET ROWS="*,50%">
<FRAME SRC="testone.html" FRAMEBORDER="NO">
<FRAME SRC="testtwo.html" FRAMEBORDER="NO">
</FRAMESET>
<frameset rows="*,50%">
<FRAME SRC="testthree.html" FRAMEBORDER="NO">
<FRAME SRC="testfour.html" FRAMEBORDER="NO">
</FRAMESET>
</frameset>
</HTML>
As you can see, there is a new command <FRAME
FRAMEBORDER="yes/no">.
The default with frames is that there is a
border, however with this command you can rid your page of the borders. So, you
must be wondering, why is there an option on <FRAMEBORDER>
that says "yes"? Using the "yes"
modifier will override any previous command. So, if you don’t want borders
except around a particular frame, you can use the combination of commands to get
what you want. Let's do an example now.
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
<FRAMESET COLS="*,*" >
<FRAMESET ROWS="*,50%">
<FRAME SRC="testone.html" FRAMEBORDER="no">
<FRAME SRC="testtwo.html" FRAMEBORDER="no">
</FRAMESET>
<FRAMESET ROWS="*,50%">
<FRAME SRC="testthree.html" FRAMEBORDER="yes">
<FRAME SRC="testfour.html" FRAMEBORDER="no">
</FRAMESET>
</FRAMESET>
</HTML>
Now, just one of the frames has borders,
while the rest are left empty.
However, it still looks real sloppy. Those scroll bars look strange just
floating there.
So, now it is time to get rid of those scroll bars. For this we will use the <FRAME
SCROLLING="yes/no/auto"> command. The "yes"
command always places the scroll bars in the frame, even if it doesn’t need
it. The "no" command leaves out the
scroll bars, even if it does need it, and the "auto"
command only puts them where they are needed. In this case, we want to get rid
of the scroll bars that are on the two frames that use them. We also want to get
rid of the borders that are still on. So.....
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
<FRAMESET COLS="*,*" >
<FRAMESET ROWS="*,50%">
<FRAME SRC="testone.html" FRAMEBORDER="NO">
<FRAME SRC="testtwo.html" FRAMEBORDER="NO" SCROLLING="NO">
</FRAMESET>
<FRAMESET ROWS="*,50%">
<FRAME SRC="testthree.html" FRAMEBORDER="NO" SCROLLING="NO">
<FRAME SRC="testfour.html" FRAMEBORDER="NO">
</FRAMESET>
</FRAMESET>
</HTML>
Now the scroll bars are gone. The
"auto" setting is the default, so if you put nothing, then that is the
one that will be used by the browser.
"Now what about those poor saps who own
old browsers that don't know what the heck a <frameset>
tag is?", you ask. Well, along with the creation of the frame tags, another
tag arose, the <noframes>
tag. The browsers that support the frame tags ignore all the content between the
<noframes> and </noframes>
tags. The browsers that don't support frames, on the other hand, don't know this
and simply ignore the tags, displaying the content between them. Below is an
example.
<HTML>
<HEAD><TITLE>This is the Control Page</TITLE></HEAD>
<FRAMESET ROWS="*,50%">
<FRAME SRC="testone.html">
<FRAME SRC="testtwo.html">
</FRAMESET>