Jonny's Frames Tutorial

Webhelp.org Presents:

Crashcourse in FRAMES

...Part One...

What is FRAMES?

FRAMES is the HTML extension that Netscape developed to divide a page up into several sub-pages. The subpages (aka Child pages) are NORMAL HTML documents. There is nothing special about any webpage that is loaded into a FRAMESET, only the ONE HTML document that actually draws the FRAMESET (aka, the Parent page) is unique. I have an exaggerated example of a FRAMESET.

What does the HTML look like for FRAMES?
Typically the parent document will look like this (You can see this for yourself if you're at a page that uses frames and, in Netscape, you go to VIEW at the top of the browser and then DOCUMENT SOURCE. This will show you only the HTML that makes the frames. The other documents are contained in other files loaded INTO the frameset):

<HTML>
< HEAD>
< TITLE>Title of Webpage</TITLE>
< META NAME="description" CONTENT="Example of Initial Frames Document">
< META NAME="keywords" CONTENT="HTML, frames, example, document">
< /HEAD>
< FRAMESET ROWS="55%,25%,20%">
        <FRAME NAME="blue" SRC="blue.html">
        <FRAME NAME="red" SRC="red.html">
        <FRAME NAME="green" SRC="green.html">
< /FRAMESET>
< NOFRAMES>
< BODY>
You're browser is not reading this FRAMESET!
< /BODY>
< /NOFRAMES>
< /HTML>

Right about now, you may be thinking, "HOLY COW! We're jumping into this with both feet!". Actually, if you don't know HTML, you will get lost. I suggest going to the HTML Tutorial. For those who understand the HTML portions of the above, I'll break this down for you. First, I will point out that the FRAMESET is neither in the HEAD nor the BODY. It does NEED to be AFTER the HEAD and BEFORE the BODY! The FRAMESET, as many HTML tags do, end with /FRAMESET. Once inside the frameset tag you will need to divide the browser into the rows (FRAMESET ROWS) or columns (FRAMESET COLS) you want. In the example, I used rows, which are horizontal divisions. The sizes are defined from top to bottom, or in the case of columns, left to right. The top most frame will take up 55% of the browser in my example. The next will take up 25% and the bottom most frame will take up only 20%. After their sizes are defined in that initial line, you want the next lines to define each individual section of the frameset. The top 55% is named "Blue" using the NAME tag and the HTML child file that will load into it is named "Blue.html", the middle 25% is named "Red" and will hold the child file "Red.html", and the bottom 20% is named "Green" with a child file named "Green.html" loaded into it. I made the HTML documents that load into these frames REALLY simple: Here's "blue's" HTML:

<HTML>
<BODY BGCOLOR="blue" TEXT="white">
<CENTER>BLUE</CENTER>
</BODY>
</HTML>

The "Red" file and "Green" file will have their obvious changes. Point is, you can have ANY HTML that you may already have done up loaded into a frameset. There is nothing special about the files that are loaded into frames. So let's take a look at what my frameset looks like.

If I had chosen to make the frameset like this: ....

<FRAMESET COLS="55%,25%,20%">
        <FRAME NAME="blue" SRC="blue.html">
        <FRAME NAME="red" SRC="red.html">
        <FRAME NAME="green" SRC="green.html">
< /FRAMESET>......

My frameset would look like this instead:

I only changed the ROWS to COLS, so my rows turn into columns, but with the same parameters and the same files loading into the frames. Let's leave the example divided into columns for now and put a ROW within a colummn. To do this you would essentially put a frameset in a frameset. Time to create a new file called "Orange.html" and I will split the first column in two and put Orange on top and Blue on bottom. Here's "orange's" HTML (again really simple, BUT can be anything):

<HTML>
< BODY BGCOLOR="orange" TEXT="white">
< CENTER>ORANGE</CENTER>
< /BODY>
< /HTML>

And now we'll adjust the frameset a little. Just like I said, you essentially will be putting a frameset in a frameset, just remember to put a /FRAMESET to end each FRAMESET.

<FRAMESET COLS="55%,25%,20%">
       <FRAMESET ROWS="60%,40%">
               <FRAME NAME="orange" SRC="orange.html">
               <FRAME NAME="blue" SRC="blue.html">
       </FRAMESET>
       <FRAME NAME="red" SRC="red.html">
       <FRAME NAME="green" SRC="green.html">
< /FRAMESET>

You see, essentially you define the three columns. The first column is given another frameset and is then divided. We then go into the aspects of this new frameset and divide it into two and load two files into it. Then we end that frameset and proceed to the other two frames loading files into them. This will look like this:

This method of putting frames within frames works in many combinations, JUST DON'T FORGET TO END EVERY FRAMESET WITH A /FRAMESET!!! or it won't work at all!

Additional tags for the FRAME tag line:

Here's some additional things to keep your frames clean looking:

<FRAME NAME="name" SRC="source.html" SCROLLING="no" NORESIZE MARGINHEIGHT="1" MARGINWIDTH="1">

To break this apart for you: SCROLLING is the little scroll bars on the side of the browser. NO is NO scrollbars regardless of document size. YES is scrollbars on bottom and side whether you need them or not and AUTO (the default) is only putting scrollbars if and where needed. NORESIZE means the frames sizes can not be moved from their defined position. MARGINHEIGHT is how far from the top and bottom the document is placed within the frame. You would want a margin of 1 (or less if you use %1, %2...) to butt the content of the frame all the way to the edges. MARGINWIDTH is how far from the left and right the document is placed within the frame. Some tags are also used in the FRAMESET tag to define the whole FRAMESET:

This breaks apart as this: BORDER (which is used in your FRAMESET tag) is how thick you want the borders of your frameset. FRAMEBORDER is a boolean yes or no. Fairly self explainatory. BORDERCOLOR can give your borders color. Keep in mind that BORDER=0 doesn't COMPLETELY remove the sign of a frame border in all browsers, so you may want to define the BORDERCOLOR as the same color as one of the document's background colors so it can blend in with the background.

These are the very BASICS of FRAME making. If you are wanting to do links in frames and find out about the TARGET tag, I've included all of that information in PART TWO of this Crashcourse In Frames. Peace, Jonny....

E-Mail Jonny Webhead