Using Frames on Your Site
Making the FRAMESET command document:
When you make a frames site the first thing you have to do is to make a document for the FRAMESET commands that will set up the FRAMES design for the whole site. Its kind of a layout for the entire screen. It tells the browser how many ROWS and COLUMNS you will have and how big each one will be and what they will be named.
The frames are not numbered, instead, he browser will read the frames from top to bottom (in the case of ROWS) and from left to right (in the case of COLS). So you just list them in the order in which you want them to appear. Lets say you want to set up your site with:
The HTML commands would look like this:
- a frame down the left side to hold the navigation links
- a frame across the top to hold a header with the site or company name
- a big frame that will hold the actual body of the site
<TITLE>Name of Your Site</TITLE>
<FRAME SRC="frameA.html" NAME="links">
<FRAME SRC="frameB.html" NAME="header">
<FRAME SRC="frameC.html" NAME="main">
Notice that there are no <HEAD> or <BODY> tags like in other HTML documents. <FRAMESET> tells the browser that you will be using frames. COLS sets up your columns. In this case you are saying that you want one and that it will take 20% of the screen space and that the rest of the screen will be the other 80% of the screen. Then you listed the SRC of that frame (the name of it's HTML file), and you gave it a NAME (any name you choose....you will use this "name" later to denote in which frame you want a link to open). Next you used another FRAMESET command with your ROWS to set up your rows. In this case you are saying you want that column to now be split with two rows and that one will take up 10% and one will take 90% of the screen space. Notice that the percentages add up to 100% and they are separated by a comma. Then you listed the SRC for each row and gave them NAMEs. Then you closed the two FRAMESETs.
Now the Documents for each Frame:
Next you will need to make an HTML document for each of the frames. Do this just as you would for a normal page. Name each file the same as you notated in the FRAMESET document. If you have more on this page than can fit on the designated frame, then the frame will automatically produce scroll bars to accommodate it. If you want to force the frame to NOT have scroll bars no matter what, then see the section on no scroll below. But remember that in that case some of the material in the frame may not be visible. You have to remember that different size screens will accommodate different size frames and even the screen resolution will affect what will fit into a frame.
Making a Link in one Frame open in another Frame
Lets say that you have your navigation links in a frame that runs down the left side of the site...like in the example above. Now you want your visitor to click on a link in Frame A and have a page open in Frame C. Remember that you named each of the frames in your initial FRAMESET document. Now when write a link tag you will insert the TARGET command. For example if you now want all the links in Frame A to open in Frame C, you would write the tags for the links like this:
<A HREF="me.html" TARGET="main">About Me</A>
<A HREF="town.html" TARGET="main">My home town</A>
<A HREF="family.html" TARGET="main">My family</A>
Notice that a TARGET command has been used in each tag to tell the browser to not only open the page, but to open it in the frame named "main". Even if you are linking to a page that is not your own you can make it open within your frame. In this case, proper etiquette would insist that you make it clear that this page is not actually yours.
Leaving the Frames Altogether:
What if you want to open a page totally outside your frames. To do this you again use the TARGET command, but make the TARGET= "_Top". Be sure you include the line before the word Top and be sure you use a capital T in Top (the Netscape Browser likes it that way for some strange reason).
You can do away with the seam lines that separate the frames if you desire. This sometimes gives a nice clean look to the site. You do this in that initial FRAMESET document. In the <FRAMESET> tag you add FRAMEBORDER="0" and BORDER="0" commands. Like this:
<FRAMESET ROWS="10%,90%" FRAMEBORDER="0" BORDER="0">
If the background in your frames are all the same color, then the frames will appear to be just one big window. If the color of one of the frames is different, it would appear to be a colored border.
A frame will automatically produce a scrollbar if the material in the frame needs more space than the frame can hold. But you can control the scroll bars with a SCROLLING= command.
- If you put it in the <FRAMESET> tag, then it effects everything under that FRAMESET.
- If you put it in the <FRAME SRC> tag, then it only effects that frame.
There are 2 attributes possible:
and of course there is always the default which will let the browser decide if one is needed...maybe the best alternative!
- SCROLLING="yes" will give you a scroll bar whether you need one or not
- SCROLLING="no" will prevent a scroll bar even if one is needed
Can all browsers see the Frames?:
The answer is NO! Some older browsers are not compatible with frames and they will get an error message. If this bothers you, then you can offer an alternate site for those viewers. Another way around this problem is to use the <NOFRAMES> tags. In your FRAMESET document, right below the </FRAMESET>tag you write a <NOFRAMES> tag. Then under that you write a normal <BODY> tag with the pages text colors. etc. Then write some text with a message with something about an alternative site. Then close with a </NOFRAMES> tag.
more advanced extras
or go to:
[ HOME , lesson 1 , lesson 2 , lesson 3
extras , advanced extras , colors , graduation ]
visit Ladybug's Garden, my personal pages