Frames do exactly what they say they do. They frame an area of the screen. Frames can be embedded to create areas inside of areas. Objects in one frame can point to objects in other frames and call up data within themselves, or within others. You've probably seen many sites that are created using frames. Most common is to have your navigation housed in a skinny frame on the left of the page. When an item is clicked within this frame, the page it refers to is opened in the frame on the right. This can be a benefit to your viewers as it makes it easy to move throughout your site. The navigation is always in the same place. However, it can be an annoyance as well. One page is used to define the areas of the frames. The URL does not change as new pages are loaded into each frame. Therefore, the URL for a page built in frames is always the same. So if your viewer finds a page they like and try to bookmark it, they will always return to your first page. There are tricks around this, but not everyone will know them. Let's take a look at some code to better understand how frames work. The Code Instead of the <BODY> tag that begins most HTML pages, a frames page needs the <FRAMESET> tag to begin. This tag will tell the browser how to divide the page, what percentage of the page each frame will occupy, and what page to fill each frame with initially. We will begin with the easiest page we can create which has only two frames. The frames are defined using COLS and ROWS. COLS, or columns, divides the page vertically, and ROWS, or rows, divides the page horizontally. So, <FRAMESET COLS="25%,75%"> would divide the page into a skinny column on the left and a wider column on the right. Substituting either number with an asterisk (*) tells the browser to use the remaining space on the screen. Each page that exists within these frames needs its own <FRAME> tag. This will include its URL and NAME. We want our navigation to appear on the left, and a welcome message in the main frame. <FRAME SRC="navigation.html" NAME="nav"> <FRAME SRC="welcome.html" NAME="welcome"> Note that the placement of the frames is left to right and top to bottom. So switching the above tags would place the welcome message in the skinny left frame, and the navigation in the larger frame on the right. A frameset needs an ending tag: </FRAMESET> Place all this between your <HTML> and </HTML> tags and you have a page. (Oh, don't forget to make the navigation.html and welcome.html pages, or nothing will appear). Now you are ready to get a bit more complicated with nesting. Nesting and Linking Once you get the hang of dividing the page once, it isn't too hard to divide it again. You can nest a new frameset within an already determined frame. Here's how the code would look for a page with a column on the left and a horizontally split column on the right: <FRAMESET COLS="25%,75%"> <FRAME SRC="left_column.html" NAME="left_column"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="top_column.html" NAME="top_column"> <FRAME SRC="bottom_column.html" NAME="bottom_column"> </FRAMESET> </FRAMESET> The blue frameset tags define the vertical split and the red frameset tags define the nested frames in the right column. Note that within the first frameset you only need to define the frame that will not be nested. The second frameset acts as a definition for what would have been the other frame description. So why do we have to name each frame? Linking, that's why. If you add a normal link to one of your frames, you will notice that the page will open in the same frame. This won't work if you want to keep your navigation in a left frame and have your content open in the right. This is why each frame needs a unique name. You will add the attribute TARGET to your anchor link to direct the link to the correct frame. Here is a sample targeted link: <A HREF="some_other_page.html" TARGET="top_column">click to open a link</A> This will open some_other_page.html in the top column. Once in a frame, you might want to bounce out to a plain HTML page. Set target equal to _top within your link. Modify Your Frames You can control the margins of your frames as well as the space between the frame and your contents. In the frame tag, add marginwidth or marginheight and set them equal to a number. Experiment to see how you like the results. As all monitors and settings can differ, you have no way of knowing if all your content will fit on a page. You can add a scrollbar, choose no scrollbar, or set it to auto so that it can scroll if it needs to. Just add scrolling=(yes,no,auto) to the frame tag. You can also set the frame borders to zero. This produces a seamless effect and can look a lot nicer than the default border. Finally, you can choose to not allow your frames to be resized. Without adding the word noresize to the frame tag, you will notice that you can drag the frame borders with you cursor. Sometimes it is a good idea to leave this off as some content may get cut off on certain computers. This way, the viewer can resize frames as needed. No Frames Most modern browsers support frames, but some older ones do not. In order to not alienate your viewers, add the noframes tag. All you need to do is create a normal page within the <BODY> tags and place a <NOFRAMES> at the beginning and a </NOFRAMES> at the end. So a typical page might look like this: <HTML> <FRAMESET COLS="25%,75%"> <FRAME SRC="left_column.html" NAME="left_column"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="top_column.html" NAME="top_column"> <FRAME SRC="bottom_column.html" NAME="bottom_column"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY> This is the body of the noframes document. </BODY> </HTML>
You've probably seen many sites that are created using frames. Most common is to have your navigation housed in a skinny frame on the left of the page. When an item is clicked within this frame, the page it refers to is opened in the frame on the right. This can be a benefit to your viewers as it makes it easy to move throughout your site. The navigation is always in the same place.
However, it can be an annoyance as well. One page is used to define the areas of the frames. The URL does not change as new pages are loaded into each frame. Therefore, the URL for a page built in frames is always the same. So if your viewer finds a page they like and try to bookmark it, they will always return to your first page. There are tricks around this, but not everyone will know them.
Let's take a look at some code to better understand how frames work.
The Code
Instead of the <BODY> tag that begins most HTML pages, a frames page needs the <FRAMESET> tag to begin. This tag will tell the browser how to divide the page, what percentage of the page each frame will occupy, and what page to fill each frame with initially.
We will begin with the easiest page we can create which has only two frames. The frames are defined using COLS and ROWS. COLS, or columns, divides the page vertically, and ROWS, or rows, divides the page horizontally.
So,
<FRAMESET COLS="25%,75%">
would divide the page into a skinny column on the left and a wider column on the right. Substituting either number with an asterisk (*) tells the browser to use the remaining space on the screen.
Each page that exists within these frames needs its own <FRAME> tag. This will include its URL and NAME. We want our navigation to appear on the left, and a welcome message in the main frame.
<FRAME SRC="navigation.html" NAME="nav">
<FRAME SRC="welcome.html" NAME="welcome">
Note that the placement of the frames is left to right and top to bottom. So switching the above tags would place the welcome message in the skinny left frame, and the navigation in the larger frame on the right.
A frameset needs an ending tag: </FRAMESET> Place all this between your <HTML> and </HTML> tags and you have a page. (Oh, don't forget to make the navigation.html and welcome.html pages, or nothing will appear).
Now you are ready to get a bit more complicated with nesting.
Nesting and Linking
Once you get the hang of dividing the page once, it isn't too hard to divide it again. You can nest a new frameset within an already determined frame. Here's how the code would look for a page with a column on the left and a horizontally split column on the right:
<FRAME SRC="left_column.html" NAME="left_column">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="top_column.html" NAME="top_column">
<FRAME SRC="bottom_column.html" NAME="bottom_column">
</FRAMESET>
The blue frameset tags define the vertical split and the red frameset tags define the nested frames in the right column. Note that within the first frameset you only need to define the frame that will not be nested. The second frameset acts as a definition for what would have been the other frame description.
So why do we have to name each frame? Linking, that's why.
If you add a normal link to one of your frames, you will notice that the page will open in the same frame. This won't work if you want to keep your navigation in a left frame and have your content open in the right. This is why each frame needs a unique name. You will add the attribute TARGET to your anchor link to direct the link to the correct frame.
Here is a sample targeted link:
<A HREF="some_other_page.html" TARGET="top_column">click to open a link</A>
This will open some_other_page.html in the top column.
Once in a frame, you might want to bounce out to a plain HTML page. Set target equal to _top within your link.
Modify Your Frames
You can control the margins of your frames as well as the space between the frame and your contents. In the frame tag, add marginwidth or marginheight and set them equal to a number. Experiment to see how you like the results.
As all monitors and settings can differ, you have no way of knowing if all your content will fit on a page. You can add a scrollbar, choose no scrollbar, or set it to auto so that it can scroll if it needs to. Just add scrolling=(yes,no,auto) to the frame tag.
You can also set the frame borders to zero. This produces a seamless effect and can look a lot nicer than the default border.
Finally, you can choose to not allow your frames to be resized. Without adding the word noresize to the frame tag, you will notice that you can drag the frame borders with you cursor. Sometimes it is a good idea to leave this off as some content may get cut off on certain computers. This way, the viewer can resize frames as needed.
No Frames
Most modern browsers support frames, but some older ones do not. In order to not alienate your viewers, add the noframes tag. All you need to do is create a normal page within the <BODY> tags and place a <NOFRAMES> at the beginning and a </NOFRAMES> at the end. So a typical page might look like this:
<HTML>
<NOFRAMES>
<BODY>
This is the body of the noframes document.
</BODY>
</HTML>
