The following code will add a Frames Page to your Web Site. In a Frame you will be able to hypertext link to each page of the site without leaving the home screen. For a lot more information about frames, please look at my PowerPoint presentation on Frames, it will be time well spent!
Begin by typing in the following code, then save this page as frameset.html. Notice that the <BODY> tag has been replaced by the <FRAMESET> tag. After you build this page, you will have to make three (3) additional pages to fill the frames.
< HTML>
< HEAD>
< TITLE>My First Frames Page</TITLE>
< /HEAD>
< FRAMESET ROWS="15%,*">
< FRAME NAME="frame1" SRC="frameset1.html" MARGINWIDTH=10>
< FRAMESET COLS="19%,*">
< FRAME NAME="frame2" SRC="frameset2.html" TARGET="frame3">
< FRAME NAME="frame3" SRC="frameset3.html">
< /FRAMESET>
< /FRAMESET>
< /HTML>
In the above code, the FRAMESET ROWS="15%,*" tells the frames browser to make the first row or top portion in this case, 15% of the screen then devote 85% of the screen to the bottom of the page.
The FRAMESET COLS="19%,*" tells the frames browser to make the lower 85% of the page into two columns, the left side of the page should be 19% wide and the right side of the page should be 81% or the balance of the page.
The frames are named "frame1" which is the top third of the page. Then "frame2" the lower left side, and "frame3" the lower right side.
The following small amount of code will add the top portion of your Frames page. When you are finished keying-in the text in Notepad, save this file as frameset1.html. (You can click on this link to see what the top of the Frames screen will look like. Click the Back Button on your Browser to return to this screen.)
< HTML>
< HEAD>
< TITLE>My Top Frame</TITLE>
< /HEAD >
< BODY BGCOLOR="BLACK">
< P ALIGN="center">
< FONT SIZE=5 FACE="Arial Black" COLOR="#00cccc">
This is my Frames Header!
</FONT>
</P>
</BODY>
</HTML>
The following code will add a left-side frame, which is the second page of your frames site. In this frame will be all the links you need to navigate the site.
This code will make a small one column wide table, each cell of the table is color coded to match the site map you made on page one of the Web site.
Just to jog your memory, I'm using Hexadecimal color codes that Netscape recognizes. These are written as: BGCOLOR="#ffcc99"
| ORANGE |
< HTML>
< HEAD>
< TITLE>This is My Second Frame</TITLE>
< /HEAD>
< BODY BGCOLOR="BLACK" ALINK=RED VLINK=BLACK LINK=BLACK>
< TABLE BORDER=2>
< TR>
< TD BGCOLOR="#00cccc">
<A HREF="frameset3.html" "frame3">Start Page< /A>
< /TD>
< /TR>
< TR>
< TD BGCOLOR="#cc66ff">
<A HREF="index.html" TARGET="frame3">Site Map< /A>
< /TD>
< /TR>
< TR>
< TD BGCOLOR="#00cc99">
<A HREF="index2.html" TARGET="frame3">Placing Images< /A>
< /TD>
< /TR>
< TR>
< TD BGCOLOR="#99ccff">
<A HREF="index3.html" TARGET="frame3">List Page< /A>
< /TD>
< /TR>
< TR >
< TD BGCOLOR="#9999ff">
<A HREF="index4.html" TARGET="frame3">Background Page< /A>
< /TD>
< /TR>
< TR>
< TD BGCOLOR="#9966ff">
< A HREF="index5.html" TARGET="frame3">Tables Page< /A>
< /TD>
< /TR>
< TR>
< TD BGCOLOR="#cc9999">
< A HREF="index6.html" TARGET="frame3">Nested Tables< /A>
< /TD>
< /TR>
< TR>
< TD BGCOLOR="#cccc99">
< A HREF="index7.html" TARGET="frame3">Digital Clock< /A>
< /TD>
< /TR>
< TR >
< TD BGCOLOR="#ccff99">
<A HREF="index8.html" TARGET="frame3">Music Page< /A>
< /TD>
< /TR>
< TR>
< TD BGCOLOR="#cc66ff">
< A HREF="index9.html" TARGET="frame3">Search Engines< /A>
< /TD>
< /TR>
< TR>
< TD BGCOLOR="#ffcc99">
< A HREF="index11.html" TARGET="frame3">Fun Forms< /A>
< /TD>
< /TR>
< !--The following line of code will get you out of frames-->
< A HREF="index.html" TARGET="_parent">
< FONT COLOR=RED>HELP Get Me Outta Here!</FONT> < /A>
< /TD>
< /TR>
< /TABLE>
< /BODY>
< /HTML>
The following code will add the lower right-side frame, which is the third page of your frames site. This is the frame that will display every page from your site, one at a time, as you click the names in the left column.
All we are doing here is creating a simple page that will be replaced as soon as you click upon one of the links on the left side of the page. After this exercise is concluded, you may replace any of the data found in the top or right panes with whatever you like.
Save this file as frameset3.html.(You can click on this link to see what the center portion of the Frames screen will look like. Click the Back Button on your Browser to return to this screen.)
< HTML>
< HEAD>
< TITLE>This is My Third Frame< /TITLE>
< /HEAD>
< BODY BGCOLOR="Black">
< P ALIGN="center">
< FONT SIZE=7 FACE="Times New Roman" COLOR="#00cccc">
< B> < I>HEY LOOK AT ME!!< /I> < /B> < /P>
< P ALIGN="center">
I Know How to Make Frames!
< BR>
This is Too Cool!
< /P>
< /FONT>
< /BODY>
< /HTML>
Now that you have concluded the exercise on Frames, let's go take a look at what you just built. The name of this file is called frameset.html. (You can click on this link to see what the whole Frames screen will look like. Click the Back Button on your Browser to return to this screen.)
I hope you enjoyed this exercise! And, I bet it wasn't as hard to do as you thought it might be! There are many different combinations of rows and columns that can be used for a frames view. I wouldn't get too carried away if I were you and keep it at two or three frames per page. You might also have a non-frames view available for your visitors too, just in case they don't have a frames-capable browser.