Tutorials: Frames
One of the things that can make your site so organized and easy to
follow are frames. But... they can make or break your site. Frames
need to be "well crafted" to really do a site well, so you must make
your frames pleasing to the eye. Not only do frames make your site
easy on the viewer, they make it easy on your too. All of the links
to the different pages on your site are on one page, you don't have
to put them on every page!
A set of frames are made of a minimum of 3 pages: The index page,
a main or home page, and a buttons page. This is what each page does:
Index: This is where your frame code is, and holds the other
pages together. When people access this URL, they see the frames.
Main or Home: This is your main page, which we prefer to call
main.html. This is where you can keep updates, etc.
Buttons page: This is where you keep your links to different
pages around your site. You don't need to call this buttons page,
you can call it left.html, right.html, top.html, bottom.html, or
anything else that strikes your fancy. Making it easy for YOU to
remember is best.
Frame Code
Below is everything you could possibly need in your frames. we will go over and
explain each part of it below, and you can remove any pieces that
you don't need in your frames. This code is what you put into your
index page, and that's all. You don't put anything else there besides
this code:
<html>
<head>
<title>PAGE TITLE</title>
</head>
<frameset cols=200,* border=0 frameborder=0 framespacing=0>
<frame src="buttons.html" name="buttons" noresize>
<frameset rows=200,* border=0 frameborder=0 framespacing=0>
<frame src="top.html" name="top" noresize>
<frame src="main.html" name="main" noresize>
</frameset>
<body>
</body>
<noframes>
<a href="MAIN PAGE.html">Main Page Here</a>
</noframes>
</html>
Many people don't understand frames at first, but we are going to piece
through all of the code slowly, Read all of this!!!
The frame code starts where it says "Frameset" for the first
time. Right next to the frameset you see "cols". That means columns,
meaning the frames are going vertically. Notice the second frameset,
where it says rows. Rows means the frames are going horizontally.
Because the frameset code with columns comes first, that means the
frame closest to the left will be a vertical.
Now next to the the "cols" you see an equals sign, the number 200
and an asterik. That determines how wide your frames are. The number
200 is how many pixels wide you want your frame to be (you can also
use percentages, so the code looks like this: cols=50%,50% , but
obviously you can change the percentage to fit your needs). The
asterik is simply a space filler, so that it fills up all the space
that isn't defined the number before it. You can put the asterik on
either side of the comma, so if you wanted your defined frame to
be on the right, you could change your code to this: cols=*,200, or
whatever number you want your pixels to be. Change the number of
pixels to fit a certain background or picture you want to put in the
frames, it makes the art of frames more exact and makes your site
look better.
Next you see this:
border=0 frameborder=0 framespacing=0
This code removes those horrible grey borders for your frames.
Please, if you want a decent looking site, KEEP THIS CODE IN YOUR
FRAMECODE! We will love you forever for making your site look 100%
better than it would with those grey borders!
Next you see the frame src code. Notice are there are 3 of them
in the code, one for each frame page. See where you put the name
of your page? Where it says "buttons.html" or whatever else, that's
where you put your own pages so that your page shows up there.
After the "buttons.html" or whatever, you see name="buttons". That
is the name of the frame, and is used for targeting. This has to do
with linking, which is touched on below. But DON'T take naming your
pages lightly, if you want your links to show up in the right page
you MUST pay attention to what you name your frames!!
Finally, there is code that says noresize. This prevents people
from accidently distorting your frame sizes on your site. It's not
required, but keeps all you frames all of the same size.
That covers the first part of the frame code, and you should be able
to work through the rows code too. Then you get to the Noframes
tag in the body of your page. This is for anyone who vists your site
and has chosen to not view frames. This is simply a link directly to
your main page.
And that's it! That is the just of framing!! But you aren't
done yet, read carefully through the rest of the page for more
helpful aspects of framing.
Variations in frames:
The above framecode is not the only framecode you can use! You can
adjust the code to fit your needs with just some simple copying and
pasting.
This is a frameset without the rows. All you would need to do is
delete the rows tag from your code, and move the main page code to
go underneath the cols code. This is how it would look:
<html>
<head>
<title>PAGE TITLE</title>
</head>
<frameset cols=200,* border=0 frameborder=0 framespacing=0>
<frame src="buttons.html" name="buttons" noresize>
<frame src="main.html" name="main" noresize>
</frameset>
<body>
</body>
<noframes>
<a href="MAIN PAGE.html">Main Page Here</a>
</noframes>
</html>
Here's another variation:
That frameset is without the columns code, so the code with look
like this:
<html>
<head>
<title>PAGE TITLE</title>
</head>
<frameset rows=200,* border=0 frameborder=0 framespacing=0>
<frame src="top.html" name="top" noresize>
<frame src="main.html" name="main" noresize>
</frameset>
<body>
</body>
<noframes>
<a href="MAIN PAGE.html">Main Page Here</a>
</noframes>
</html>
There are several other ways to vary your frames. Please note that
you can also flip flop your "cols" and "rows", so that the rows code
comes before in the columns code.
Linking within your Frames
This section is VERY important! Linking is what confused the hell out
of most of us when first starting to use frame code, and here we are going to try
to explain it so that you will understand, so read carefully.
Above we noted the name section of your framing code. We have underlined
what section of the code we are talking about below:
<frame src="main.html" name="main" noresize>
If you have read the other html pages, you know how to link pages
by using html. And you should also know how to target your link
so that it opens up in a new page. (If you don't know this, go to
the Text and Images page now).
What most people do with their frames is put all their links on
the buttons page, and then want to have the pages open up in the main
frame, so that they don't have to put the links on each and every
page of their site.
And that aspect is what we are dealing with, putting a link on one
page of a frameset and making it show up on another page. This
technique is called "targeting". This is what targeted link html
looks like:
<a href="URL HERE" target="TARGET NAME HERE">LINK NAME HERE</a>
Where it says Target is what is most important. The target bit tells
your website where to send the page to. Targets listen to page names,
not urls. So look back at the frame code. Let's say you named your
main.html page "main". Now on your buttons page you want to put
links to pages that you want to open up in the main frame. So
in the links, you would target them to your main page. Your html
would look like this:
<a href="URL HERE" target="main">LINK NAME HERE</a>
That would send that link, although the actual text that the viewer
sees is on the buttons page, to the main frame.
And that's framing, not in a nutshell!
|
|
