The Framework behind Frames (*Rimshot*)

Site hosted by Angelfire.com: Build your free website today!

I've Been Framed!!

Often one of the most daunting tasks involved in creating a professional-looking website can be the use of frames. This tool is by no means required, and indeed many of the most famous websites out there don't use frames (Yahoo, for example).

The pros and cons of frames are many, and I could not hope to present them all to you; I will however, mention a few. The pages best suited to frames are instructional homepages and photo galleries. This is by no means a limiting factor....I've even seen search engines done in frames. Among other famous members of this category are cnet.com and joeexpert.com (A HTML Help Search Engine). Some people, this author included, like frames because they make keeping a large page organized musch easier. Frames also allow a much easier way of maintaining uniform format throughout an entire website.

In the camp that hates frames are the people who say it is far too easy to get stuck inside a frames page and not be able to get out. This is because there is actually very little data on a frames page. Instead of creating on large doccument, a group of frames is constructed, and then other pages can be loaded into those frames. Unfortunately, this includes external links as well, unless the creator of the page is willing to add a few attributes to his or her programming (people have a nasty habit of not doing this).

And so you see the various arguments both for and against frames. As the voice of reason, I like to present people with a third option; that is take both!! You have likely seen pages that offer both a frames and a no-frames version. If you take the time to do this, everyone stays happy.

The Basics of Frames

By this point, some folks may be asking, "What do frames do exactly?" This is a more informed question than many realize, and I would chastise anyone who laughs at another for asking it. Frames will divide your page into various sections (or windows, if you prefer), thus allowing you to load more than one HTML doccument in the same browser window. This most often manifests itself as a navigational tool that stays stationary while the information you are looking for is loaded into a separate frame.

To the best of my knowledge, almost every modern browser will support frames, including the AOL browser and even WebTV. Frames have created a dividing point in internet history to say the least. Many folks who do not wish to upgrage their browser software are finding themselves unable to view many pages, simply because of tags that are not recognized by outdated software.

Perhaps you recall that all the way back on the basics of HTML page I said that the format of an HTML doccument remains the same no matter how simple or complex. Well.....this is where HTML makes a liar out of me. Because there is no actual body containing information on a frames page, there is no need for a <body> tag. When you create a frames page, the format looks like this instead of the standard:

<HTML>

                <HEAD>

                <TITLE>Your title here</TITLE>

                </HEAD>

                <FRAMESET>

                Define Frame Values Here

                </FRAMESET>

                </HTML>

More About `<FRAMESET>`

This tag by itself is not enough to create frames; just like evrything else, you need to add attributes. Fortunately, the attributes used in this case are ones we have seen before. "Cols=" will create vertical columns. Lets say you want to split your page into two columns, one sligthly larger than the other. The attribute and it's values would be cols="40%,60%". This means that the left frame will take up 40% of the browser window, and the right one will take up the remainder, in this case 60%. Make sure that the values add up to 100%, or your page will be either too large ot too small; this can be very awkward for people navigating your site.

The other attribute is "rows=", and as the name implies, it will divide a page into horizontal rows. Just like columns, you can create as many as you wish, and in this case it is not as important to make the values equal 100%, as vertical scrolling pages are a normal find on the internet today.

The values of rows and columns can also be specified in pixels of you wish. This is a really good idea if you have a graphic (an image map menu bar, for example) that needs to fit exactly within a frame. I can hear your minds churning already, and you know that not everyone's monitor is the same number of pixels wide and/or tall, and that there are no guarantees that people will use a uniform resolution. Fortunately, there is a variable value that can be substituted; this will make a frame grow or shrink to match the viewer's settings, while your first frame (the one stated in pixels) remains uniform.

Let's say that the graphic you want in one frame is 100 pixels wide, and you need only one other frame that will take up all of the remaining space, no matter how large or small that may be. To do this, I would set the frame that will contain the graphic to about 105 pixels wide (this gives you a little breathing room). The full tag should look like this:

<frameset cols="105,*">

As you have likely already guessed, the asterisk is the variable value, and as you can see, it replaces any numeric value (pixels or percentage) for the second frame.

It is possible to have more than two columns (or rows) on your page, so long as the values fit within 100% of the screen width. Usually a page with more than two frames will have at least one variable value. If you wish to have both rows and columns on the same page, feel free, but every time you switch from rows to columns or the other way around, you must start a new <frameset>; also remember that like any other HTML statement, you must end this tag with </frameset>.

Another New Tag

Now that you have learned how to create a frameset, you need to know how to define the attributes that govern the individual frames. The tag for the job is, oddly enough, <frame>. There are many different attributes that go with this tag, so in the interest of saving space I present the following list:

"SRC=" - This attribute specifies the file that will be displayed in the frame. Remember to use the correct filepath, just like creating a link.
"NAME=" - Just like the tag of the same name in a form, this attribute gives a unique identity to each frame, which in turn makes linking and opening of HTML files much easier.
"SCROLLING=" - The values for this are "yes", "no", or "auto" and they tell the browser wether or not it can make the frame scrollable. If you select yes, the frame will always have a scrollbar, but it will only be active if it is needed. If you select no, then the frame will never scroll, even if there is too much data to fit inside the frame. Selecting auto lets the browser add a scrollbar when it needs one, and remove it if it is un-necessary.
"BORDER=" - This will create a very ugly border around your frame (but my oppinion's not biased....) I never use borders on my frames, and suggest you do the same. For no border, the value is "0" (zero).
"FRAMEBORDER=" - This is the Netscape version of the above attribute. Again, I never use it, and recommend setting it to zero.
"FRAMESPACING=" - This attribute adds empty space between your frames. Why in heaven's holy name someone would want to do this is beyond me, but you can if you really want to. This is a Netscape-only attribute.
"MARGINWIDTH=" - This is the Internet Explorer version of the above attribute, it sets the width of the left and right margins or a frame, thus adding empty space if set to anything other than zero. Remember....empty space is a tool of evil....I say avoid it!!
"MARGINHEIGHT=" - The same as marginwidth, but this modifies the top and bottom borders of the frame (*hisssssss*).
"NORESIZE" - As the name implies, adding this attribute stops viewers from manually resizing your frames to their liking. There is some debate as to wether using this attribute is sporting or not, but I recommend at least employing it for frames that must be a certain size (A menu bar, for example). There is no value attached to this attribute.

The Complete Tag

Based upon the above section, here is a complete <frame> tag:

Now let's see what the HTML for a complete frame structure would look like. This frameset will create a page with a horizontal row at the top, and two columns below it (one for a menu, and one for the main body of pages).

<html> <head> <title>Dave's Example Frames Page</title> </head> <frameset rows="15%,*" border="0"> <frame src="toppage.html" name="topframe" scrolling="no" border="0" frameborder="0" framespacing="0" marginwidth="0" marginheight="0"> <frameset cols="15%,85%" border="0"> <frame src="menubar.html" name="menu" scrolling="auto" border="0" frameborder="0" framespacing="0" marginwidth="0" marginheight="0"> <frame src="index.html" name="main" srcolling="auto" border="0" frameborder="0" framespacing="0" marginwidth="0" marginheight="0"> </frameset> </frameset> </html>

Click here to see an example of this frameset. This link opens in a new window.

A Word About Linking Within Frames

Linking within your frames is the single largest stumbling block people seem to have. Fortunately, it's an easy one to overcome. Remember that nifty little attribute I introduced you to a couple sections ago; the one called name=? This is where that name becomes important. When you are typing a link, there is another attribute you should know about -- target=.

This can get a little confusing, please bear with me. This is sort of like teaching someone to tie their shoes....very hard to do.

Example One:
You have a link in your menubar, and you want that link to open in the next frame over (your main frame). Let us suppose you named the main frame "main" (creative, huh?) All you need to do is add the target= attribute to your link, as follows: <a href="filename.html" target="main">: Example Two:
You have a link in your main frame, and you want it to open in the same frame as the link: <a href="filename.html" target="_self">: Example Three:
You have a link in your main frame, and you want it to open in a new window: <a href="filename.html" target="New_Window"> -or- <a href="filename.html" target="_blank">: Example Four:
You have a link in any frame, and you want it to open in the same window, but not in frames: <a href="filename.html" target="_top"> Example four details the single most important target you can know about if you use frames. A thousand times please insert it into all of your external links. Webmasters who fail to do this are the cause of many people hating frames. Remember how I said it can be all to easy to get stuck inside a frames page? Faliure to use this target is the cause of this problem. Also, if you are not using frames for your own page, but would like a little insurance against people viewing your page while stuck in some other madman's frames, add a link to your own site with target="_top" inside the tag. Clicking this link will refresh your page outside of frames. Enjoy!!