 |
|
 |
|
What Are Frames? |  |
|
|
What are frames? Frames provide a way for you to divide the browser viewing area into multiple windows. You specify additional web pages that are to be displayed in each of these windows. With frames, you can have a non-moving (static) advertising banner or logo, and you can also have a navigation area in a small frame that displays linked pages in a larger, main frame.
Frames = Tables: Framed pages are created by using three basic components: the FRAMESET tag, the FRAME tag, and the SRC documents that get displayed in each frame. Frames are similar in concept to tables. With tables, you create table cells within which you display text or images. Frames do the same thing, they kind of divide a web page up into different "cells" (frames). Each of these frames, rather than displaying merely text and images, contains an entire web page, which in turn contains the text and images that are to be displayed in a specified frame.
The FRAMESET tag is used to define the container for your frames. It's similar to the TABLE tag, and like tables, multiple FRAMESETs can be nested one within another to further subdivide your page. Some attributes of FRAMESET are:
COLS="n|%|*" or ROWS="n|%|*" : Used to define how your frames should be arranged (whether in columns or rows) and defines the size of each frame in either pixels, percentage, or use remaining space (the asterisk). You must use either COLS or ROWS for your FRAMESET, it is a required attribute.
BORDER="n" : For Netscape Navigator, specifies the width of the separators between frames. When "n" is set to zero, the separators will not be displayed.
FRAMEBORDER="1|0 or yes|no" : For Microsoft Internet Explorer, specifies whether the FRAMESET should display 3D borders. If not specified, the default value is 1 (or yes), which will display borders. If 0 (or no) is specified, no borders will be displayed (borderless frames).
FRAMESPACING="n" : Specifies the amount of spacing, in pixels, that will appear between the contents of each frame and it's borders. For borderless frames, a width of "0" should be specified.
Also, if you like the look of borderless frames, and want to insure that your borderless frames look the same with both Navigator and Internet Explorer, you should be sure to specify not only FRAMESPACING, but both BORDER and FRAMEBORDER as well.
The FRAME tag defines a window where a page is to be displayed, and the SRC attribute of the FRAME tag specifies what page is to be displayed in the FRAME. Some attributes of FRAME are:
SRC="url" : This attribute is required and is used to identify the URL of the page that is to be displayed in the FRAME, where "url" represents the URL or name of the page that is to be displayed.
NAME="frame name" : Assigns a name to the frame so that it can be used to TARGET links into, where "frame name" can be any meaningful name that you make up.
NORESIZE : An optional flag that specifies that the FRAME cannot be resized by clicking an dragging i\on it's borders. If not specified, frames can be resized.
SCROLLING="yes|no|auto" : Designates whether a FRAME should have scrollbars or not. If not specified, "auto" is the default, which means the browser will determine whether scroll bars should be displayed or not. If "yes" is specified, scroll bars will always be visible, and if "no" is specified, no scroll bars will be displayed (which means that if the page you're displaying to a FRAME doesn't fit within that FRAME, your visitor will not be able to scroll to see the rest of the page).
NOFRAMES : Not all browsers support frames. For this reason, it's a good idea to include the NOFRAMES container tag, which can be used to provide a message to your visitors who do not have a frames capable browser. Visitors that do not have a frames capable browser will see only the HTML code you've put between the beginning and ending NOFRAMES tag.
PUTTING IT ALL TOGETHER:
Now that we've got some of the basic tags and attributes defined, let's put them all together and look at the code for a sample framed page. For the sake of brevity, I've left out the HTML and HEAD tags. The code for frames should go immediately after the </HEAD> tag:
<frameset rows="50,*" border=0 frameborder="no" framespacing=0>
<frame src="linktop.htm">
<frame src="linkbot.htm" name="bottom">
<noframes>
Put something here (like a link to a non-framed page) for those visitors who do not have a frames capable browser
</noframes>
</frameset> |
This example creates a framed page that divides the browser into two windows, one below the other (as specified by the ROWS attribute). If you prefer to divide the browser into side by side columns, you could simply change ROWS to COLS. In this example, the top frame will be 50 pixels high, and will display a page called "linktop.htm". "linktop.htm" could be a page that has links that, when clicked on, will display the linked pages in the bottom frame (by using the TARGET attribute for the A HREF link command). The bottom frame will take up the remaining space in the browser, will display a page called "linkbot.htm", and is give a NAME ("bottom") so that links can be TARGETed to it.
TARGETING LINKS:
One of the most powerful uses of frames is the ability to TARGET links from one frame (like a navigation bar) so that the linked pages get displayed in a different frame. If a TARGET for a link is not specified, the linked page will be displayed in the same frame that contained the link. In the example above, we created a page that is broken up into two frames, a small one on top that displays a page called "linktop.htm", and a larger frame on the bottom that displays "linkbot.htm" when the framed page is first loaded. Assuming that "linktop.htm" is to be used as a navigation bar, and that we want any link in "linktop.htm" to be displayed in the bottom, larger frame, the links in "linktop.htm" should look something like this:
|
<A HREF="nextpage.htm" TARGET="bottom">Click Here!</A> |
Now... when a visitor clicks on "Click Here!" in the upper frame, the page "nextpage.htm" will be displayed in the lower frame (which we NAMEd "bottom" in the FRAME tag).
In addition to using the NAME of a FRAME to TARGET a link, there are some special reserved words that can be used for TARGET. Two of the most useful are "_top" and "_blank" (these must be in lower case, and must be preceded by the underline character "_"). "_top" is used for TARGET when you want a linked page to *not* be display within a frame. "_blank" is used when you want a linked page to be displayed in a new browser window (it will open up another instance of the browser).
ADDITIONAL FRAMES INFORMATION:
This tutorial has been a brief introduction into frames and should be enough to get you started. However, if you need more detailed information on using frames as well as examples of framed pages, be sure to check out our How to Use Frames and Frames Examples pages.
Some other excellent resouces for frames information can be found at:
Frame Tutorial (http://www.spunwebs.com/sites2c/frmtutor.html)
The Netscape Frame Tutorial (http://www.newbie.net/frames/)
|
|
