 |
  HTML Tutorials GuruSearch! Web Glossary LiveWire Forums |
 |
 |
  Getting Started Text Links Colors Backgrounds Images Tables Frames Image Maps |
|
|
|
|
 Design Guide Forms Meta Tags JavaScript Style Sheets SSI CGI Web Browsers |
|
|
|
|
 HTML Editors Free Web Hosting Domain Names Copyrights |
 |
Frames are yet another way to organize information on your web site. When you implement frames on your site, the web browser divides its display area into multiple sections, known as frames, and loads a different HTML document into each frame. This allows you to keep one frame constant and have it control the content that appears in the other frames. Many web sites use this technique by keeping a constant menu in one frame alowing the user to navigate through their content in a separate frame.
The basis of designing frames is the <FRAMESET> tag. The <FRAMESET> tag is placed in the header of your HTML document and is used to designate the format of the frames on your page. Two attributes are used within the <FRAMESET> tag: ROWS and COLS. Only one of these attributes may be used per tag. Both ROWS and COLS follow the same format and are used to specify the height of horizontal frames (ROWS) or the width of vertical frames (COLS). They also are used to specify the number of frames on a page. This is done by stating the attribute, followed by a list of the sizes of your frames. The sizes can either be in number of pixels or in the percentage of the browser window that it covers. You can also use a * to assign the remaining browser space to that frame. An example a propper frame set tag would be:
<FRAMESET COLS="20,50%,*">This creates a set of vertical frames, the first of these with a width of 20 pixels, the second taking up 50% of the browser window, and the third filling the rest of the screen. You can also add border="number" to your <FRAMESET> tag to specify the width, in pixels, of the borders between frames.
Once you have your <FRAMESET> tag established, you need to create the individual <FRAME> tags that specify which HTML file to insert in each frame. Since you have three frames in the frameset, you need three <FRAME> tags inside of the <FRAMESET> tag. Each <FRAME> tag is in the following format:
<FRAME SRC="path to HTML file" SCROLLING="YES, NO, or AUTO" NAME="name of frame">The scrolling attribute of the <FRAME> tag tells the browser whiether or not to display a scroll bar on the given frame. The default value for this is "AUTO" wherein the browser only displays a scroll bar if the content of the frame warants it. Each frame should also hae a name attribute so that you can set it as the target of a link. No two frames should have the same name.
The coding for an entire frameset might look like this:
<FRAMESET COLS="70,50%,*">
<FRAME SRC="left.html" SCROLLING="NO" NAME="Left">
<FRAME SRC="center.html" SCROLLING="YES" NAME="Center">
<FRAME SRC="right.html" SCROLLING="AUTO" NAME="Right">
</FRAMESET>The coding for a horizontal framset with no borderws looks like this:
<FRAMESET ROWS="70,50%,*" border="0">
<FRAME SRC="top.html" SCROLLING="NO" NAME="Top">
<FRAME SRC="middle.html" SCROLLING="YES" NAME="Middle">
<FRAME SRC="bottom.html" SCROLLING="AUTO" NAME="Bottom">
</FRAMESET>Aside from using just horizontal or vertical framesets, you can nest one type of frameset within another like so:
<FRAMESET ROWS="70,50%,*" border="0">
<FRAME SRC="top.html" SCROLLING="NO" NAME="Top">
<FRAMESET COLS="70,50%,*">
<FRAME SRC="left.html" SCROLLING="NO" NAME="Left">
<FRAME SRC="center.html" SCROLLING="YES" NAME="Center">
<FRAME SRC="right.html" SCROLLING="AUTO" NAME="Right">
</FRAMESET>
<FRAME SRC="bottom.html" SCROLLING="AUTO" NAME="Bottom">
</FRAMESET>The results of this code can be seen in Frames example #3
If you are going to use frames on your web page it is important to remember that not all older browsers will display frames. Because of this, it is a good idea to include a vervion of your page that does not require frames. This version is placed in the body of your HTML document and in enclosed within the <NOFRAMES> and </NOFRAMES> tags. This tag is ignored by older browsers and the content inside of it is displayed. Browsers that support frames do not display the <NOFRAMES> information unless the user has disabled frames in the browser's preferences.
For information on using the TARGET attribute of the link tag to point your links to different frames, check out our links tutorial.
| Tell a friend about NetaGuru | Comment on NetaGuru | Bookmark NetaGuru This page was last updated 12/12/03 Please read our disclaimer and legal notices. All editorial content and graphics copyright 2002 NetaGuru. Designed and maintained by David Jones and Reid Beels. |
