Beginning with Frames

12. Beginning with Frames

FRAMES are not unknown to you. I have mentioned them in several of these lessons, and what you are looking at now on the screen uses FRAMES. There is a frame on the left which contains the Table of Contents and a frame on the right which contains this lesson.

When you have scrolled to the bottom of the page and clicked on "If you want to see my answers, . . .," that converts this "right hand frame" into two frames. In these lessons, you have been able to take the bar above the bottom frame, and move it up. That is only one of the "attributes" of frames.

When you have FRAMES on a page you have more than one HTML file displayed. On this page, you have this file, which is named "Frames1.html" and the Table of Contents file, which is named "TOC.html." Each one in its own frame. Notice that they scroll indenpendently of each other, both vertically and horizontally.

Since the HTML files displayed in the frames contain the content contained in the frames, a FRAMES file doesn't have to be a strict HTML file. By that I mean that the "boiler plate" for the HTML doesn't always need to be there. For example, there is--usually--no BODY to a frame file, so the tag is left out. An exception to this is when you include code in a frame file, which will appear when someone is using an old browser that doesn't support frames.

My suggestion is to put in the <HTML>, <HEAD>, and< TITLE> tags just for reference. The title of the FRAME file will appear in the titlebar of the browser if you type one between the TITLE tags.

The most basic FRAMES file divides the page either vertically in columns or horizontally in rows. It begins with a <FRAMESET> tag and at the end of the definition of the FRAMES the </FRAMESET> tag. In between is a <FRAME> tag for each frame. Don't get to anxious to start. There must be minimally some "definers" in both types of tags, and there are a host of "attributes" which may be included. However, the basic setup will look like this:

<HTML>

<HEAD<TITLE>Frame Setup</TITLE></HEAD>

<FRAMESET  (definers and  "attributes)>
      <FRAME (definers and "attributes")>
      <FRAME (definers and "attributes")>
      <FRAME (definers and "attributes")>
      <FRAME (definers and "attributes")>   
       .
       .      (one <FRAME ...> for each frame you want)
       .
      <FRAME (definers and "attributes")>
</FRAMESET>

</HTML>

Of course, you should be very careful about the number of frames you have on a page. They can get confusing to the viewer. You should use frames if there is a good reason to use them. In the case of these lessons, the Table of Contents allows you to jump back and forth between lessons and bring up the RESOURCES as you work. Also, dividing the right frame into two frames for the answers allows you to refer to the lesson while you are analyzing the answers. That is my "rationalization." You should have one, if you plan to use frames.

What is meant by "definers" above? Well, you have to have something to let the computer know if the frames are going to be horizontal or vertical and how they are going to be sized. That will all go in the <FRAMESET> tag.

The frames in themselves need names, so an HTML file can be directed to them and there also needs to be the (pathway) and name of the HTML file, which will orginally be there when the frames page is activated. We will look at each of these in turn.

First, after the word FRAMESET there will be a space and then either COLS= or ROWS= to tell the browser whether the frames are vertical (Columns) or horizontal (rows). After that inside of "quotes" is an indication of the size of each frame. There is a size for each frame, so there is no need put in the number of frames explicitly. The browser will figure it out by the number of sizes you put in.

the "sizes" can be done in several ways. Typically, you can use "pixels" to exactly define how wide or tall you want the frame to be. Another way is to use "percent" to indicate how much of the page you want each frame to take up. Or you can put in an "*" for the size of each frame and let the browser set the sizes depending on what is needed to display the HTML file in the frame.

Now if that isn't confusing enough, you can also use a mixure of these, and that is really the way you should go, for reasons to be explained now.

Setting the exact size of a frame may cause what is displayed there to be distorted, so it may be that you want to give the frame size some flexibility. In other cases, you may want to restrict a frame to a certain size, so you will always know roughly how much space you have left over to display files in the other frames. That is the case in what you are looking at. The left frame is 120 pixels wide and the right one is defined with an "*", so will be as wide as it needs to be.

Often, you may want to have frames that are flexible, but which are multiples of one another. For that, you can use a number with an "*" to indicate how many times that frames is to be of another flexible frame. That is all a lot of words, so let's look at and example.

<FRAMESET COLS="120,*,2*>

This says the page will have 3 vertical columns. The first will be 120 pixels wide and the other two will be such that the one on the right will be twice the size of the one in the middle, but both will be flexible.

Or you could do something like:

<FRAMESET ROWS="*,30%,50%">

the second two rows would take up 80% of the length of the screen and the first row would take up the rest. This allows for variable lengths.

OK, now you have the idea of the <FRAMESET> tag, let's move on to the <FRAME> tag.

The <FRAME> tag uses the "src=" of the IMG tag, and the "NAME=" attribute to give the frame a name. After the "src'" goes the name of the HTML file to be put in that frame. Here is an example.

We will use the last <FRAMESET> tag from above. That means we will have to NAME three frames, since there are going to be three rows, let's call them TOP, MIDDLE, and BOTTOM. It is a good idea to name your frames something that indicates their position on the screen. We will pull into the three frames respectively the files BodyTagTestLINK.html, BodyTagTestTEXT.html, and BodyTagTestBACKGROUND.html which were used as illustrations in the <BODY> tag attributes lesson. The whole thing will be in a new page. The code would be as follows.

<HTML>
<HEAD> <TITLE> Frame Example</TITLE> </HEAD>

<FRAMESET ROWS="*,30%,50%">
<FRAME src="BodyTagTestLINK.html" NAME="TOP">
<FRAME src="BodyTagTestTEXT.html" NAME="MIDDLE">
<FRAME src="BodyTagTestBACKGROUND.html" NAME="BOTTOM">
</FRAMESET>
</HTML>

When you click below to see the example, it should look like the horizontal frames are the ratio 20%:30%:50%. You would expect that from the FRAMESET tag. The "*" defines the other 20%. You should see that they are independently scrolling vertically and that there is no scroll bar along the bottom. Also, there is a bar between the frames, and you can use your mouse to move that bar up and down. After moving the bars, reloading or refreshing doesn't necessarily put the frames back to the same ratio. If you close the window and click the link again, when the window appears the frames will be back to the way they are defined in the original settings.

Try it here!

Now shrink the window vertically. You should see them in the same ratio, but all shrunk down to be in the right ratio in the shorter window.

Shrink the window horizontally. You should see all the tables and text shrink and wrap to fit the window.

Close that window, and we will look at the two attributes that can be set in the <FRAMESET> tag. They are FRAMEBORDER (YES or NO) and BORDERCOLOR (Color name or "hexnumber"). Making FRAMEBORDER="NO" removes the borders around the frames, but the scroll bars are still there. Look at the homepage at newton.uor.edu to see an example of this.

As for BORDERCOLOR, it just colors the border with the usual colors. When we move onto the <FRAME> tag, I will give you examples of both of these attributes.

OK, the attributes of the <FRAME> tag are FRAMEBORDER (YES, NO), BORDERCOLOR (The usual colors, but if you conflict colors, the browser will do what it wants.) NORESIZE (doesn't take a value, just prohibits the moving of a border with the mouse. May affect frames bordering on a frame with a NORESIZE attribute), SCROLLING (YES, NO, or AUTO, which will put in the scrolling if it is needed.).

Let's take the original example and do some things to it.

<HTML>
<HEAD> <TITLE> Frame Example2</TITLE> </HEAD>

<FRAMESET COLS="*,20%,25%,30%">
<FRAME src="BodyTagTestLINK.html" NAME="LEFT" BORDERCOLOR="ORANGE">
<FRAME src="BodyTagTestTEXT.html" NAME="MIDDLELEFT" BORDERCOLOR="GREEN" SCROLLING="NO">
<FRAME src="BodyTagTestBACKGROUND.html" NAME="MIDDLERIGHT" FRAMEBORDER=NO NORESIZE SCROLLING="NO"> <FRAME src="BodyTagTestBACKGROUND.html" NAME="RIGHT" FRAMEBORDER=NO >
</FRAMESET>
</HTML>

OK, here are the changes.

You should expect to see 4 vertical frames, beacause of the COLS="*,20%,25%,30%" in the <FRAMESET> tag. The "*" entry should be 25% of the vertical space in the window, since the other three add up to 75%.
The names of the FRAMES have been changed to better describe their position on the page.
The LEFT frame is to have an ORANGE border.
The MIDDLELEFT frame is to have a GREEN border an not allow scrolling.
The MIDDLERIGHT frame is to have no border and you are not allowed to resize it. Also, there is NO SCROLLING in that frame.
The RIGHT frame should not have a border, and SCROLLING is set to AUTO.

So click here to look at the example. It will appear in a new window.

Notice that the LEFT and MIDDLELEFT frames share a border. The borders were defined to be different colors (ORANGE and GREEN), and the border between the two frames is ORANGE and the one on the right of MIDDLELEFT is GREEN. The different colors have priorities, and you can learn about those if you wish, but what that means is that if there are two options, the color displayed will be the one with the highest priority. In this case ORANGE must be higher than GREEN. The best bet is to experiment. I don't recommend using border colors anyway.
There are no scrollbars in MIDDLELEFT, MIDDLERIGHT, and RIGHT frames. Note in the code, that MIDDLE LEFT is defined not to allow scrolling and RIGHT has scrolling as AUTO. If you see a scrollbar in RIGHT, it means that your window is small, and there is a need to scroll to see the entire page. That is what AUTO does.
MIDDLERIGHT will not let you resize it. That you should expect, since the NORESIZE attribute is in the definition of that frame. Resizing RIGHT would require MIDDLERIGHT to be resized, so it is automatically not "resizable."
Using the ORANGE border, you can resize the LEFT frame. That of course resizes the MIDDLELEFT frame too. The minute you do that in Netscape, you may see a scrollbar appear in MIDDLELEFT. The SCROLLING="NO" only works in Netscape on the original size of the window or if the browser thinks there is nothing to scroll to.. In Explorer is seems to retain its "No Scrolling" setting after resizing. Reloading should restore the size and non-scrolling features.
If you shorten and lengthen the window, you will see the AUTO scrolling choice work. When the window is long enough there is no scrollbar, and when you shorten it up a scrollbar appears.

OK, I've exhausted what I want to say about a page that has only vertical or horizontal frames. Now it is your turn to try it out. Remember, you can always copy the code for a frame page from this window in your browser and paste it into your text editor, to avoid all that typing. Then all you do is "edit" the various tags to your requirements.

Exercises 12

Create 4 pages with different background colors or background files. Put some identifying text on the pages, such as PAGE 1, PAGE 2, PAGE 3, and PAGE 4. Make that in a large font of a color that will show up well on your background. Add other things if you like.
Create a frames page called FramesExercise1.html with 4 horizontal frames of equal size. Name the frames FRAME_1, FRAME_2, FRAME_3, and FRAME_4. Put the pages you created into the fame with the same number. Test it.
Create a frames page called FramesExercise2.html with 3 vertical frames with the first taking up 50% of the page, the second 20%, and the third the rest. Name the frames FRAME_1, FRAME_2, FRAME_3. Put the first three pages you created into the fame with the same number. Test it.
Save your FramesExercise1.html file as FramesExercise3.html and make the following changes to it.
1. Make the first frame 300 pixels wide, the second 200, and the third twice the size of the fourth.
2. Put into <FRAMESET> a border color of ORANGE.
3. Make FRAME_4 non-resizable with automatic scrolling and no border.
4. Make FRAME_3 have a border color of GREEN.
5. Make FRAME_2 non-scrolling.
6. Play with the window by making it smaller and larger thus changing the size of frames whose sizes may be changed. What is different about the non-bordered frame?
Save your Frames Exercise2.html file as FramesExercise4.html and make the following changes to it.
1. Give FRAME_1 a border of ORANGE, FRAME_2 a border of BLUE, and FRAME_3 a border of PINK.
2. Make FRAME_1 non-resizable and non-scrolling.
3. Make FRAME_2 resizable and scrolling.
4. Make Frame_3 non-scrolling.
5. Play with the window and the frames by resizing them where possible.
  1. Observe what happens with scrolling in non-scrolling frames with resizing.
  2. Observe which border colors have preference.

If you want to see my answers , click here.

You may "expand" the answers window by lifting the bar to make the window larger in order to see the answers better.

After reading the answers, to put things back the way they were, use the BACK button or scroll down to the link at the bottom of the "Answers" page.