Frames are a way to include multiple pages together within the same browser window. In fact, that is exactly what you will have to do, create a separate page for each frame in your window. Your frames page, or frameset, will act as a template that will load these separate pages into their specified positions or frames. Each page will load independently from every other page.
The use of frames is a convenient way to manage and edit your site's table of contents or index. In fact, most frames are used exactly for this purpose. If you used to use a navigation button or link system on every page, every time you changed this you would have to go through and change every page. With frames you would only have to change the page your index is on. Kinda neat!
Your frame that holds the index or table of contents is usually the smaller of the two frames. It can be run down the left side of the screen, which is where most are, the right side, or the top or bottom of the screen. This frame will hold the links to your other pages, your email address and any other contact information. You can also display small banners to other sites here.
There are several ways you can set up your frames. My homepage is set up as a frame, but this is the only way you will see the frame displayed. What does that mean? :o] If you click on any of the links on the left frame (the index side) the new page will automatically open up into a new browser window, remember Targets in Advanced Lesson 2? These come in handy with frames. I added the target="_blank" onto every web address to create this effect. I know, it kinda defeats the purpose of the frame, right? But, I wanted every page to open up into a new window! And I still have my index.
Remember this when you add a link to a web site that is NOT your own, you should really encode it this way and let the page open up into a new browser window. If you do not and that site also has frames it would open up into the right side of your screen and still have their frames...what a mess!!
If you want your pages to open up in the right side of the screen, or main section of the screen, you will have to use the target="main" on every link. This is how most index frames are set up. If you do not code them with one of the above targets the new window will open up in the same frame and will be kinda small!
OK...we will now attempt to create some frames. Let's create the normal frame set. One smaller frame along the left side of the screen and one larger frame on the right side of the screen.
We will have to create three web pages for this one frame set. Yes, three! Some framesets have more than three pages.
Let's code the index.htm page first. On this page we can specify how large or small we want our frames to be by using a percentage. The norm is usually 20% for the left side and 80% for the right side (main side). Here is the code for this page, with my notes in red italics...
<HTML>
<HEAD>
<TITLE>frameset</TITLE>
You can still put your Meta tags inside the Head tags.
</HEAD>
<FRAMESET COLS="20%, 80%">
Here is where you specify the percentage of your frames. You can also use an asterisk in place of the last number to be used for whatever is left of the browser window. Example: cols="20%, *"
<NOFRAMES>
The noframes code prompts an error message to any user whose browser does not support frames, which will only be older browsers.
There is NO body tag.
</NOFRAMES>
<FRAME SRC="left.htm" NAME="left" SCROLLING="auto" MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>
<FRAME SRC="main.htm" NAME="main" SCROLLING="auto" MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>
</FRAMESET> Closes out the frame set.
</HTML>
Explanation of the two long codes above.
One nice thing about the index page...once it's coded the way you like it, you usually don't have to go back and do anything to it. And the hard part of frames is over! Yeah!!
Now let's code the left.htm and main.htm pages.
The left.htm document is the smaller side of the screen, on the left. Remember this when putting in words for your links....keep them SHORT or use smaller fonts! Same with graphics...keep them SMALL! Because you put a value on the left side of the screen it should show up the same in every browser window that is to your resolution (most of us use 800x600).
LINKS....should always have a target attached to them. Either main or blank, see above explanation.
The right side of the screen, main.htm, is where the main part of your page will be displayed. You will have to watch the size of your graphics a little on this side too. If they go off the page, you will know they are too large. Trial and error!
If you should choose to have your smaller frame on the right side of the screen just change the numbers around...80%, 20%, it's as easy as that.
To create a row across the top or bottom you would change the code: frameset COLS="20%, 80%" to frameset ROWS="20%, 80%". Notice COLS (columns) was changed to ROWS. Neat!
You can choose to have more than two divisions on your window by adding more percentages to the list, example: frameset cols="20%, 40%, 40%", just make sure you add up to 100% or use the asterisk for the last value. You will also have to name and create a new document for this new frame.
The FRAMESET syntax is similar to that used by tables. You add the rows or columns and their values to it. You can also tell your frames not to put a border around the scroll bars by inserting FRAMEBORDER=0 inside the FRAMESET code. The default is to add a border.
