So, You Want Some Frames, Huh?

Quality Management ROI Calculator - Focus on Test Automation
The Rational Quality Management ROI calculator is intended to give you an idea of what return you can garner from implementing our functional testing solutions. Our quality management solutions offer tools to develop a continuous process, powered by automation to govern software delivery. »
Gartner MarketScope: Application Quality Management Solutions, 1Q 08
This Gartner MarketScope provides guidance for enterprises seeking to purchase tools to manage risk and software quality. We focus on tools fit for large-scale enterprise use and that are ready out of the box to manage quality requirements and functional testing. »
Whitepaper: Tips for Writing Good Use Cases
Writing a good use case isnt easy, but, fortunately, our experience can be your guide. The concepts and principles assembled here represent the works of many people at IBM, and they form a foundation of proven best practices. »
Whitepaper: The Role of Integrated Requirements Management in Software Delivery
Learn about the critical role integrated requirements management can play in helping ensure your business goals and IT projects are continuously aligned-whether you are sourcing, integrat-ing, building or maintaining your software. It also looks at ways that integration and automation can help ensure managing projects and the required changes can be executed using manageable processes that satisfy stakeholders and development teams. »

HTML GOODIES TO GO NEWSLETTER

Use these to jump around or read it all...

[What Are Frames Anyway?]
[Basic Frame Commands]
[Adding Rows To Columns]
[Naming Cells and Using Targets]
[Encountering Non-Frame-Ready Browsers]

What Are Frames Anyway?

Frames are a little different than anything you've done in html in that you are not writing a page in the traditional sense. What you are creating is a template where more than one page can sit. Here's an example using TABLE commands:

S'alright?

S'alright!

Above is a simple table. Read all about tables in So, You Want A Table, Huh?. In fact, I would strongly suggest you read it first. This will be much easier to understand if you do. That table is obviously sitting on the page you are looking at right now (frame1.html). I put up a few commands and, poof! up came the table.

Now imagine that little framed item above as being the entire viewing screen of your browser, the screen you're looking right now. Frame commands are used to do just that, break up the screen.

So, what goes in the frame cells? I'm glad you asked. Other pages go in the frame cells. Frame commands allow you to display more than one page at the same time, in the same browser screen. Let's do that illustration above as if it were your browser screen using frames:

PAGE_A.html

PAGE_B.html

If that table above were a browser screen using FRAME commands, there would be THREE pages involved: The frames page template that breaks up the page and "Page_A.htm", "Page_B.htm". The frame commands that would create a page like the example above would look like this:

<HTML>

<TITLE>First Frame Page</TITLE>

</HTML>

Look over the small program and then click here to see what it looks like on the browser. You'll be able to click back from the next page to continue the tutorial. So, go look and come back and I'll tell you what the commands are doing. See you in a moment...

Basic Frame Commands

Neat, huh? There were two pages displayed at the same time. I simply split the screen into two parts and placed a different page in each part. Look again at the small HTML frames program above; here's what the commands are doing:

FRAMESET starts any frame page. It alerts the browser that FRAMES are going here.
COLS denotes that I want columns. In this case, I want two; each 50% of the screen.
Can I do other percentages? Of course you can. Go nuts if you want, just separate the percentages by commas and get it all to add up to 99% or 100%. 99%?! Yes. You see, 33%, 33%, 33% adds to 99 and splits the screen three ways. The browser just distributes the final 1% over the three spaces. Dig?
FRAME SRC denotes the source of the frame. Frames read like you do, left to right. The first source offered will be hard left. I only have two frame sections so I need only 2 sources.
/FRAMESET ends the whole deal.

Some Quick Questions:

Q: Do I have to write pages skinny enough to fit in only one-half of the page frame?
A: Nope. The browser will cram it all in there, but it tends to look smooshy. (How about that word?) I'll offer examples in a moment.

Q: What if my page is taller than the screen? How do I put in a vertical scroll bar?
A: The browser will do it for you. Don't concern yourself with it. Write for content, not for frame.

Q: Columns are nice, but can I get rows too?
A: Yes. Here's how you do it...

Adding Rows To Columns

Okay, now it starts to get a little goofy. Here's the browser screen configuration I'm going to make. The table below is a pretty good representation, but not quite exact to scale. It's just for demonstration purposes.

Hey.htm down.htm
me.htm
PAGE_B.html PAGE_A.htm

Here's the FRAMES program I'll use to do it:
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="75%,25%">
<FRAME SRC="LINKPAGE.htm">
<FRAME SRC="PAGE_B.htm">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="LONGPAGE.htm">
<FRAME SRC="ME.html">
<FRAME SRC="PAGE_A.htm">
</FRAMESET>
</FRAMESET>

What is Happening Here?

Remember that frames read left to right like you do. I told the computer I wanted FRAMES by using the FRAMESET command. I then broke up the page vertically just as before.

Here's where the rows come in. I added a new FRAMESET command denoting ROWS. I asked for 75%, 25%. See above what I mean? What that did was break up the first column into two rows. I then offered two SOURCES for the two sections of the first column. The first frame to offer a source is always the top one. I then put in a /FRAMESET to denote that I was done with breaking up the first column. Still with me? Good... let's go on.

Note I did another FRAMESET command again denoting ROWS, but this time I set the rows at 33%, 33%, 33%. Then I denoted SOURCES for those three rows in column two. I then added a /FRAMESET to end those rows and another /FRAMESET still to end the whole deal. Please note that I am going to show 5 different pages on the same browser screen. Still with me? Good.

Here's what the item above looks like. Please note:

...the scroll bar that appears on the "LONGPAGE.htm" frame cell. It reads "DOWN" again and again to show the scroll bar.
...how squished some pages look.
...the directions in the TOP LEFT block.
--It has to do with the next section of this tutorial.
Click here to see the frames in action.

Naming Cells and Using Targets

Okay, so now we know how to break up the screen through FRAMESET percentage commands. Now the question is how to control page changes (hypertext links) in your frames. There are three basic methods of changing data within cells:

1. Click on a link in a frame -- just that frame changes pages (you just saw that).
2. Click on a link in a frame -- another frame on the screen receives the information (you haven't seen that yet).
3. Click on a link in a frame -- the frames go away and you get a full page (you saw that first).

Here's how you do all three!

1. Click on a link in a frame -- just that frame changes pages.

This is the default. It just happens without you doing a darn thing. So, if that's all you want to happen, do nothing more than what you already know. Browsers are programmed to handle frame clicks just that way. The other two methods require a little more work.

2. Click on a link in a frame -- another frame on the screen receives the information.

Now it's time to talk about two new commands, "NAME" and "TARGET."

. Let's say I'm doing a very simple frame page with only three frame cells. It'll look something like this:

Frame Cell One	Frame Cell Two
	Frame Cell Three

In order for me to ask the computer to send data to another frame cell, I have to make a point of naming each of the cells. "Ah Ha! That's the NAME deal above," you say. Bingo. Name them whatever you want, but it's my suggestion to keep it simple -- like capital letters. Here's what the FRAMESET command will look like, with NAMES, to create the illustration above:

<FRAMESET>

</FRAMESET>

Okay, great... you've named the cells. See the "NAME=" commands I snuck in the FRAME SRC commands above? Good. Now that you have the cells named, you can make any hypertext link inside of them targeted. Basically, you're going to add a TARGET command to the usual <A HREF>. Let's say this example hypertext link is in cell_a above:

<A HREF="http://www.cbs.com" TARGET="C">

You can guess what will happen. When you click on the link, cell_a will remain the same and cell_c will receive the information.

Leaving a Frames Page Completely

So now you can send information from any cell to any cell. The problem is you're still on the frames page -- and some of the larger pages are squished. Say you want to have someone click on a frame and have the link to pop up as its own page, in a full browser window. Well, you have to tell it to do that. Remember! Default is to have the information stay in the same frame.

You need to TARGET the hypertext link to be its own page. Easy enough. Just follow the format above but make the TARGET, "_top." Note the underline before the word "top." It looks like this:

<A HREF="http://www.cbs.com" TARGET="_top">

Ok, enough explanation. Click Here for examples of the NAME and TARGET commands above.

Encountering Non-Frame-Ready Browsers

That's a problem. Most browser today accept frames, but many still don't, text-only browsers for example. The "browserly-challenged" will get an error code if they attempt to log into a page with frames. Either that or they will receive a blank page. That's the reason there are no frames on this main page. There are a couple of ways around it.

1. Don't do frames. (Oh, I could have guessed that one, Joe.)
2. Write a page without any frames (like this one) and offer a choice to go to a framed page or to a non-framed page. But that means you have to write two pages--bummer.
3. Use <NOFRAME> and </NOFRAME> commands.

Ooooooo... tell me more about the NOFRAME command. Well, it's simple. You write a basic frame page like any of the three above -- but -- immediately following the first FRAMESET command you put in a <NOFRAME> command and write a message to the browserly challenged. Like so...

<FRAMESET COLS="50%,50%">

<NOFRAME>

Greetings "Browserly Challenged". The page you are attempting to enter has frames and if you're reading this message, you don't have the ability to see it. I suggest you go <A HREF="page.html">Here</A> for a non-frame version of this page.

</NOFRAME>

</HTML>

Get What's Happening?

The person who can't see frames gets the message and the person who can read frames will get the frame page. Isn't technology wonderful? You know, you could just put the text page code in there rather than a message. That way, the user would see the page and be none the wiser.

Well I guess that about wraps up the tutorial on frames. There are other commands you can use when creating frames. These will create different margin sizes and such... but this tutorial was becoming a monolith. If you use Explorer as your browser, go here for commands that alter the frames of Explorer only. The commands are not supported by Netscape just yet.

If you'd like to gather more about frames, head to my Advanced Frames tutorial. It contains a few more little tricks and tidbits of knowledge. Plus it's sugar free and low in fat.

Until then, help yourself to any of my other tutorials. I wrote them just for you... and everyone else.

[What Are Frames Anyway?]
[Basic Frame Commands]
[Adding Rows To Columns]
[Naming Cells and Using Targets]
[Encountering Non-Frame-Ready Browsers]

Enjoy!