|
|
|
Learning how to create frames
Frames have been around for a long time now, supported by
every known browser. While some consider them annoying, nicely designed,
frames could be
very helpful when navigating a site. In this tutorial, we will talk about how to implement
frames, and finish up with how to create borderless frames, and how to create links that
load content into another frame.
 Everything
you need to know to create frames
All frames are created using the <frameset> tag. This
essentially makes up the "master" page, which will "contain" the pages
that users actually see. The "master" page, with the <frameset> tag,
replaces the <body> tag, meaning you DO NOT use the <body> tag anywhere inside
this master page. This master page is than fitted with the individual pages that are
"put" inside it. Ok, lets have a look at how exactly this is done: The following
example creates a page with two frames:
//master page
<html>
<head>
<title>My example</title>
</head>
<frameset cols="30%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</html> |
|
Page1.htm and Page2.htm are created
separately as "normal" html pages, and are contained within this master page. We
used the keyword "cols" to indicate that we want to define column frames. To
create rows instead, simply use the keyword "rows":
<html>
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</html> |
|
In both of these examples, we used percentage as the width
measurement. You could also use pixels, with some caution, however:
<html>
<frameset cols="100,200,340">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
</html> |
|
If you add up the total width
(100+200+340=640), this will equal the width of a screen at resolution 640*480. Most 14'
screens are set as such, but how about people using screen resolutions of (800*600)? If
they come along, how will your frame page be displayed? Well, the browser will have no
choice but to stretch the width to exceed 640, in order to accommodate this larger screen.
(All frames defined using percentage will be stretched, (or shrunk) depending on the
user's screen resolution). This could lead to headaches for developers, since you never
know how you frames will be displayed. Does that mean that you should never use pixels
than? Absolutely not. Lets see how we can get over this:
<html>
<frameset cols="100,200,*">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
</html> |
|
We used a special keyword "*", which means
undefined. By using this, only this part will be stretched, if necessary. The other two,
100, and 200, will not be inadvertently stretched. That way, you can keep all pages with
layout that do not want to be stretched on the left two frames, and the one that's ok with
it, on the right frame.
Creating complex frames:
So far, we've only created simple, either all columns, or all rows,
frames. Now lets march on to ones with both, shall we?
The key to defining frames with both columns and rows is to place
multiple pairs of <frameset></frameset> tags in your master page, each pair
enclosing a "cols" or "rows" declaration. This can get a little
tricky, so I'll try to explain using multiple examples. Let's start slicing
<html>
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
</frameset>
</html> |
|
Ok, what the heck is going on? First, in
blue, we defined two columns. Then, for the first column, we sliced that even more-into
two rows. As you can see, the rows and columns "chunk" all end with a
</frameset> tag, two to be exact. Like I said, we started out the
"framing" by defining cols="50%,50%". Lets see what happens if we
defined the rows first, instead of the other way round:
//master page
<html>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
</frameset>
</html> |
|
As you may see, totally different outcomes! Confused?
Here's a good rule to remember: Whenever you slice a frame, either into columns or
rows, your slice will keep slicing until it hits a "wall".
Complex frames step-by-step
example:
Lets put the above rule into good use. Remembering this rule will save
you a lot of trouble. Ok, assuming we want to create a frame like this:
This may look overwhelming, but if you keep that sushi rule firmly in your head,
you'll be fine. How shall we go about doing it? Start with rows? Columns? Well, first take
out our knives, and remember, this knife will keep slicing until it hits a
"wall". If we started with rows, we would have something like this:
This sushi knife keeps cutting until it hits an obstacle, in this case, the edge
of the page. As you can see, starting off using rows would make it impossible to achieve
our desired goal.
Ok, lets begin with columns then:
<html>
<frameset
cols="33%,17%,17%,17%,17%">
</frameset>
</html>
|
|
So far, so good. Now we need to split the first column into two
rows. Remember, this swiss knife isn't really sharp, so it wont cut through the walls of
the first column.
<html>
<frameset
cols="33%,17%,17%,17%,17%">
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</frameset>
</html> |
|
As you can see, the "rows" part is nested within the
"cols" part, since the rows are a "subpart" of the columns
declaration.
Lets continue our sushi chopping, shall we?
<html>
<frameset
cols="33%,17%,17%,17%,17%">
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
<frame src="page4.htm">
</frameset>
</html> |
|
And finally:
<html>
<frameset
cols="33%,17%,17%,17%,17%">
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
<frame src="page4.htm">
<frameset rows="50%,50%">
<frame src="5.htm">
<frame src="6.htm">
</frameset>
<frame src="7.htm">
</frameset>
</html> |
|
I know this may be VERY confusing,
but the best way to learn it by playing around with it yourself...so open your editor, and
try something out! Ok, we've learned the overall structure of frames-lets move on to look
at some attributes we can add to frames, plus master the art of linking and loading
contents from one frame to another.
|
