Another hobgoblin of web page design is frames. Want proof? Say "frames!" in a crowd of HTML newbies and watch: those who don't faint right off the bat will flee in terror.
Okay... I can see I have to show that frames are as harmless as forms (you did just come from the forms
page, where you learned that forms are our friends...right?).
Actually I can understand why most folks new to HTML would be put off by frames - I know I was: that stupid sizing thing:
Um...okay: let's make column 1 25%, row 2 200, row 3 "*" and row 4....
no, wait...make row 1 300 row 2 "*"...no, that's not right either...
oh...@#&$! I QUIT!!
Okay, I know this looks tricky, but as you'll see once I explain how it works, it's easy! Come on...has anything I've explained so far been too difficult to understand?
Any questions? Good...let's move on, then! Our next topic of discussion is
In order for frames processing to occur successfully your HTML must define at least two frames. More is okay, but fewer is not. You will have a main frame and one or more subordinate frames (the names I used to identify the frames - main and subordinate - are my own and not an HTML standard).
I'll begin by showing you the code for the frame page that I used as the opening graphic on this page. It's my Navy football page (how's that for shameless self-promotion?):
<HTML> <HEAD> <TITLE>Navpooh's Navy football page</TITLE> </HEAD> <!--frames--> <FRAMESET cols="25%,*"> <FRAME SRC="football_side.html" SCROLLING=auto NORESIZE base target="main"> <FRAME NAME="main" base target="_self" SRC="football_main.html"> </FRAMESET> </HTML>
That's it! Now there is a major difference between the frames page and a "normal" page - and that is (drumroll, please...) there are no <BODY>...</BODY> tags!; instead, we use the <FRAMESET>...</FRAMESET> tags.
Well... that's not exactly true...the <BODY>...</BODY> tags may be used within the
Here is the code for my current football page...the previous example was my original code - it didn't
include non-frame capability (arrghhh!!! fifty lashes with a wet poodle - I mean noodle!).
I'm sure you noticed the different colors used to seperate the sections of the code in the above example.
The part in black is the "guts" of the HTML - the parts you must have for the page to work, plus comments.
The red section is the frames part - this dictates what will show up on frames-capable
browsers. The blue code shows the placement of the <NOFRAMES>...</NOFRAMES>
tags (note that they are NOT contained within the <FRAMESET>...</FRAMESET> tags), and the green section is the code that dictates what will show up on non-frames-capable
broswers. NOTE that the green code is just a regular page contained within the
<NOFRAMES>...</NOFRAMES> tags. You can do anything here that you can do in any regular web page.
Looking closely at the section of code presented in red we see sevearl attributes for the FRAME
tag. (Psst...! The only attribute of <FRAMESET>...</FRAMESET> is <FRAME>!)
This link, the code for which is contained in the HTML document called football_side.html (see diagram and
red-colored code, above), specifies that the content of army_opponents.html be displayed in the frame named MAIN.
There's a neat option of the TARGET parameter called _parent that will open a second browser window where the content of the URL will be displayed on
the full screen rather than in a frame; this is used to help people with framophobia (hey, I don't know if that's a real word,
but it fits...) "break out" of frames. Just be sure to include the underscore BEFORE parent or it won't work.
I used this option in the football_main.html document of my football page to help people break free of the confines of frames:
Go here and check it out - look in the large frame to the right for the escape route.
See? Frames aren't as bad as everyone makes them out to be - you just need to know what all the parts are and how they work. Let's face it, if frames were difficult
there wouldn't be so many pages with frames. Granted, there are pages out there where the coder forgot something, or was just inconsiderate when designing the page, which makes
the frames-based page a horrible experience. But if coded correctly and used ONLY when their function can be exploited properly (such as my football page - or other similar pages - where
one frame serves as a table of contents and the other is the actual display), frames are useful and convenient to the viewer.
Be honest, now...would you rather navigate my football page with frames where you can keep clicking on a link on the left and see the contents on the right, or the noframes page,
where you have to keep bouncing back and forth between the table of contents and the desired page?
A final thought: speaking as a professional programmer, we always look for the easiest way to do things...and if frames were hard we wouldn't do them!
<HTML>
<HEAD>
<TITLE>Navpooh's Navy football page</TITLE>
</HEAD>
<!--frames-->
<FRAMESET cols="25%,*">
<FRAME SRC="football_side.html" SCROLLING=auto NORESIZE base target="main">
<FRAME NAME="main" base target="_self" SRC="football_main.html">
</FRAMESET>
<!--------- BEGIN NOFRAMES CODE ------->
<!-- Code for non-frame-capable browsers -->
<NOFRAMES>
<BODY BGCOLOR="#FFFFCC" BACKGROUND="gridiron.gif">
<CENTER>
<IMG SRC="football/ram1952.gif">
<P>
<H2>Oops...!</H2>
<FONT SIZE=+2> Your browser doesn't support frames; please
<P>
<A HREF="football_noframes.html">click here</A>
<P>
to go to the frame-free page!
<I>Last updated Tuesday, Novemebr 11, 1997</I>
</CENTER>
</BODY>
</NOFRAMES>
</HTML>
<FRAME> tag attributes and what they mean
BASE TARGET=
Specifies a named frame in which any linked-to page will appear.
If a named frame is specified the linked-to page will appear in that frame. For example, in
my football side frame definition I specified MAIN as the base target; that means that
whichever link a visitor clicks on in the side frame will be displayed in the frame named MAIN.
In addition
to a named frame, the following options are available for the BASE TARGET attribute:
MARGINWIDTH=
MARGINHEIGHT=
Specifies the size, in pixels, of the area placed around the frame. You cannot specify less than 1 pixel,
and you can't specify a size so large that it precludes (won't allow) displaying of the frame contents. Not to worry, though - if
you do specify an inappropriate value for either MARGINWIDTH or MARGINHEIGHT Netscape will display the frames as it best sees fit.
NAME=
Assigns a name to the frame for use in a TARGET tag (see below)
NORESIZE=
Prevents the viewer from resizing (moving the seperating bars around) the frame.
SCROLLING=
Indicates whether or not to insert a scroll bar in the frame.
YES will insert a scroll bar when the contents of the frame are larger than the frame itself.
If the contents of the frame
are smaller than the frame and you specify SCROLLING=YES the scroll bar will appear but will be light gray and will not work (why shuld it?
there's nothing to scroll!)
NO will NOT insert a scroll bar, regardless of the size of the content of the frame; in other words, you CAN
chop off the side and bottom of a page, so WATCH IT! :-)
AUTO has the same effect as not specifying the SCROLLING option - that is, Netscape will add scroll bars as
needed.
SRC=
Specifies the URL of the initial document to be displayed in the frame
TARGET=
This tag belongs in a discussion of LINKS as well as this dicussion of frames.
When used in the context of FRAMES, the TARGET parameter specifies a named frame into which the contents
of a URL will be displayed. As an example, take a look at this code, which is from the source document
for the side frame in the football page example:
<A HREF="football_noframes.html" TARGET=_parent>right this way...!</A>
in triplicate (just kidding - two copies will be fine :-))
clickable Image Maps...!
Get your OWN FREE HOME PAGE
Back to Navpooh's Home Port
Back to HTML tutorial index