When working with frames, it pays to create notes to yourself and others which let you know exactly what the tags are doing. These notes will be ignored by the browser, as long as you enclose them in a PAIR of tags with the following syntax:
<!-- your note -->
If you don't use this EXACT notation, you will have problems.
If you've read the overview file I posted to my site which Doc Elsie sent around, then you're ready to go. If not, go read it now! Basically, you need to understand that there is always at least one more file than the number of pages you want to show in frames on a particular framed site. Also, there are no <BODY> tags used in the control files used to generate framed pages. Instead there is a <FRAMESET> and </FRAMESET> set of tags placed between the </HEAD> and </HTML> tags.
Starting Simple:
Let's create a page with 3 vertical columns. The "control" html file would look like the following:
<!-- FRAMES1.HTML. This file will create 3 COLUMNS OF DIFFERENT WIDTHS. The leftmost column will be 30% of the width of the browser window, the rightmost column will be 72 pixels wide, and the middle column will be the remaining width of the browser window after the left and right columns (frames) have been created. Notice we can mix the use of %, which is relative size, and pixels, which is an absolute size, within the same column (or row) specification. -->
<HTML>
<HEAD>
<TITLE>FRAMES1
</TITLE>
</HEAD>
<FRAMESET COLS="30%,*,72">
<FRAME SRC="A.HTML">
<FRAME SRC="B.HTML">
<FRAME SRC="C.HTML">
</FRAMESET>
</HTML>
The <FRAMESET> tag begins the definition of the framed page. Since we're creating columns, we add the COLS="" attribute. If we wanted rows instead of columns, we'd use ROWS="".
Once we've decided on the type of layout desired, we have to indicate the size of the rows/columns. This can be done 3 ways:
1. Numerical/Absolute format:
Type in the exact size desired in pixels (recall, 72pixels/inch for Mac; 96 for a PC). Example: a 2 inch wide (tall, if using rows) frame on a Mac would be typed in as the number 144.
2. Percentage/Relative format:
Type in a percentage of the screen. For example, if our column in #1 were to take up 15 percent of the width (height, for rows) of the browser window, it would be entered as 15%.
3. Flexible/Automatically determined by browser:
If you set one column to a designated size using method 1 or 2, and want the remaining column(s) (or rows) to use all the rest of the browser window, you simply type in an asterisk. Example, if column 1 was 15% and column 2 was all the rest, it would be entered as COLS="15%,*". If we wanted to used absolute sizing, it would be COLS="144,*".
One important thing to note: the size definition for the frame is place between two quote marks, and the size of each individual row/column is separated by commas with NO comma after the last column/row's size.
Let's pick apart the code above:
3 columns, left one will take up 30% of the width of the browser window, right one will be 72 pixels wide, and the middle one will be whatever is left over.
Suppose we wanted to create a file with 3 EQUAL WIDTH COLUMNS. The code would be:
<HTML>
<HEAD>
<TITLE>FRAMES1
</TITLE>
</HEAD>
<FRAMESET COLS="*,*,*">
<FRAME SRC="A.HTML">
<FRAME SRC="B.HTML">
<FRAME SRC="C.HTML">
</FRAMESET>
</HTML>
Suppose we wanted to create a file with 3 DIFFERENT HEIGHT ROWS. The code would be:
<HTML>
<HEAD>
<TITLE>FRAMES1
</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*,72">
<FRAME SRC="A.HTML">
<FRAME SRC="B.HTML">
<FRAME SRC="C.HTML">
</FRAMESET>
</HTML>
Suppose we wanted to create a file with 3 EQUAL HEIGHT ROWS. The code would be:
<HTML>
<HEAD>
<TITLE>FRAMES1
</TITLE>
</HEAD>
<FRAMESET ROWS="*,*,*">
<FRAME SRC="A.HTML">
<FRAME SRC="B.HTML">
<FRAME SRC="C.HTML">
</FRAMESET>
</HTML>
Okay. You've created these files, and dragged it into your browser. What shows up? A blank browser window with divisions in it. NO FUN! WHERE ARE MY LINKS?
Setting up links:
Notice the part of each of these files which have <FRAME SRC="Blah blah.html">? Well, just like using an IMG SRC="image.gif", you create the link using the <FRAME SRC="myfile.html"> tag. So, if you want to immediately see the results of creating your control file, you should have already created the files you will be calling up, or have jotted down the URL of the page you want to call up, if the page is already posted.
For example, the first FRAME SRC tag will call up file A.HTML and put it in the leftmost column (or top row, using rows), then FRAME SRC tag #2 will call up B.HTML and put it in the center col/row, and the last FRAME SRC tag will put C.HTML in the right column or bottom row, depending on how you've defined the frameset. If you wanted the left column to go to Yahoo, for example, the middle column to go to file B.HTML, and the right column to go to the class homepage, you'd code it in the following way:
<HTML>
<HEAD>
<TITLE>FRAMES1
</TITLE>
</HEAD>
<FRAMESET COLS="*,*,*">
<FRAME SRC="http://www.yahoo.com">
<FRAME SRC="B.HTML">
<FRAME SRC="http://5980.lelsie.com">
</FRAMESET>
</HTML>
Suppose I don't want to see the division borders between the frames.
It's the default to use a border width of 1. If you want to remove it, you can do so--but Internet Explorer won't recoginze this next command. Sorry folks! The command is intuitive: BORDER=0. The default is BORDER=1. The border command is added to the <FRAMESET> tag, NOT to each individual frame tag. Thus:
<HTML>
<HEAD>
<TITLE>FRAMES1
</TITLE>
</HEAD>
<FRAMESET COLS="*,*,*" BORDER=0>
<FRAME SRC="http://www.yahoo.com">
<FRAME SRC="B.HTML">
<FRAME SRC="http://5980.lelsie.com">
</FRAMESET>
</HTML>
Can we make the divisions bigger?
Sure-if you want. BORDER=desired number. For example, BORDER=3. Why do this though? They're ugly and tend to make your page look amateurish, in my humble opinion. There is ONE reason I can think of to use borders, and that is to emphasize something--such as feedback results, which we'll get to in a bit.
Can I have borders showing in some frames and not in others?
Nope. It's an all or nothing deal, because the attribute goes into the FRAMESET tag at the beginning of the page definition rather than into the individual FRAME tags which set up frame information.
(Actually, there is a work around to this, but it involves nesting frames--in other words, using a control file as the source of frame material--you'll see more on that later.)
I don't like the scroll bars, and don't need them if I size my columns/rows properly. How do I get rid of them?
The default is to have scroll bars appear if they are needed. If you don't want them, put the command SCROLLING=NO in each FRAME SRC tag you want to remove scroll bars from. If you do this, and find you need scroll bars, either simply remove the SCROLLING=NO tag or put SCROLLING=YES. Either will work. (BTW, be sure to resave your file after making such a change, and then repost it to the server.)
