| Free Tutorials |
| Internet |
 What is Internet |
| Internet Games |
| Learn TCP IP |
| HTML |
| Learn HTML |
| Learn DHTML |
| Learn CSS |
| Learn XML |
| Learn XHTML |
| Learn WML |
| Database |
| Learn Access |
| Learn Data-VB |
| Learn Oracle |
| Learn SQL |
| Programming |
| Learn ActiveX |
| Learn C++ |
| Learn CGI_Perl |
| Learn Interdev |
| Learn Java |
| Learn JavaScript |
| Learn Vbscript |
| Learn VisualBasic |
| Learn VC++ |
| Operating systems |
| Learn RedHat |
| Learn Unix |
| Learn Winnt |
Frames are separate "panes" within the browser window inside of which different pages can be displayed at the same time. A common setup is to divide the window into two frames. The left frame contains a menu of links and the right frame displays pages accessed through those links. A set of frames normally work like the generalized example shown below. Click the links in the left frame to view the linked documents in the right frame. An advantage of using frames in this manner is that it is not necessary to code the menu on every content page. It is always viewable and accessible in its separate left frame and does not have to be downloaded with every page. Plus, changing the information content of the screen is only a matter of changing the document appearing in the right frame. By creating these frames, you can provide a consistent look to your pages, an ever-present menu in the left frame, and a common format for the content pages in the right frame. The Frameset Document A frameset document describes the overall structure of a window subdivided into frames. This is an XHTML document in which <frameset> tags replace the <body> section. A <frameset> tag describes the number, locations, and sizes of component frames. Enclosed within a frameset tag are two or more <frame> tags which identify and characterize the frames and specify the original documents that populate the frames. The <frameset> Tag The <frameset> container tag divides the browser window into separate frames. The general format for the <frameset> tag is shown below.
The cols and rows attributes specify the layout of frames within the browser window. cols is used to divide the window vertically into two or more frames; rows is used to divide the window horizontally into two or more frames. A <frameset> tag can specify either cols or rows, but not both for the same frameset. The cols attribute specifies the number and widths of the frames as percentages of the width of the browser window or as a certain number of pixels in width. The rows attribute specifies the number and height of the frames as percentages of the height of the browser window or as a certain number of pixels in height. Normally, it is best to use percentages to express frame sizes so they remain proportional when the user resizes the browser window. The following frameset document establishes a window with two vertical frames, the first of which is 20% and the second of which is 80% of the width of the browser window. The resulting frameset is displayed below as two frames divided by a border.
<html>
<head> <title>Frameset Document</title> </head> <frameset cols="20%,80%"> ... </frameset> </html> 
When using the rows attribute the same rules apply except the frameset is created as horizontal rows with frames separated by borders.
<frameset rows="20%,80%">
... </frameset>
You can use an asterisk (*) rather than a measurement to permit the browser to determine frame sizes. This notation indicates "any remaining space." For example, the previous frameset could have been coded as: <frameset rows="20%,*">The browser calculates the second row as occupying the final 80% of the browser window. Frameset Borders. By default, framesets have borders between the frames. You can include the frameborder="1|0" attribute in the <frameset> tag to show (1) or hide (0) borders. The width of borders between frames can be set with the framespacing="n" attribute, specifying in pixels the width of borders. If you have visible borders between your frames, you can assign them a color with the bordercolor="color" attribute. Colors are specified as color names or hexadecimal values. The <frame> Tag While the <frameset> tag subdivides the window into frames, those frames are populated with XHTML documents through <frame> tags. There is one <frame> tag for each of the frames specified in the frameset. The <frame> tag contains attributes to indicate the original contents of the frame along with the frame's appearance and behavior. The <frame> tag is not a container tag, so it is not paired with a closing tag. Its general format is shown below.
Note that the <frame> tag uses the same
frameborder and bordercolor
attributes as does the <frameset> tag. These attributes
are set for the frameset as a whole in the <frameset> tag;
they can be overridden for particular frames in the <frame> tag.
Two frames that border each other, however, cannot have conflicting attributes.
The src Attribute.
A frame can be initially loaded with an HTML document by specifying its URL in the
src="url" attribute. Coding this attribute
ensures that the frame is not blank when the window is first displayed. The document that is preloaded
in the frame can be local to the site, or the URL can point to an external document. The following code shows a document named Menu.htm initially loaded
into the left frame of a frameset, along with a document named Title.htm
loaded into the right frame. The documents are in the same directory as the frameset page. The name Attribute.
Even though a frame is preloaded with a document through the src
attribute, it can display other pages by targeting the frame in links to those documents. This
linking technique is described later. Still, if you intend to load other documents into a frame,
it needs to have a name through which it can be referenced in associated hyperlinks. Frames
that will only contain the original document specified in the src attribute
do not need to be named. Frame names are assigned with the name attribute. In the
following example, the names "Frame1" and "Frame2"
are assigned to the two frames of a frameset. Again, we'll see later how to populate these frames with
other linked documents. The noresize Attribute.
When frame borders are visible they are also movable. When the mouse cursor is moved
on top of a border, its icon changes and the user can drag the border to resize the frame.
Normally, you will want your frame setup to remain fixed so that your pages appear as intended.
So, to prevent users from changing frame sizes, code the noresize
attribute in the <frame> tag as shown below. Setting noresize for the left frame has the effect of preventing
resizing of the right frame since they share the same border. The scrolling Attribute.
The scrolling="auto|yes|no" attribute creates a frame with or without
scroll bars. By default, frames permit scroll bars to appear if the document is too large to fit
within the frame. The default value is scrolling="auto". You
can change this setting to scrolling="yes" to always display
horizontal and vertical scroll bars even if the document fits within the frame.
You can also set scrolling="no" to suppress the display of
scroll bars even if the document is too large to fit within the frame. As a general rule you should
always permit document scrolling unless you have an overriding reason for not doing so. One case
of scroll suppression may be a top frame containing a banner without additional content to scroll to. The marginwidth Attribute.
As is the case with full-size browser windows, information is displayed across the entire
frame, running from the left border to the right border with only a tiny amount of white space
separating the text from the borders. You can help improve document readability by introducing
margins on either side of the text through use of the marginwidth="n"
attribute. The attribute value is given as the number of pixels of space to leave between the
document and the left and right borders of the frame. The marginheight Attribute.
In the same manner, margins can be introduced at the top and bottom of a document with
the marginheight="n" attribute. The pixel value indicates
the amount of space to leave between the document and the top and bottom of the frame. An alternative to using marginwidth and marginheight
is to use style sheets to set margins on the documents that occupy the frame. Nested Frames The above examples describe a single frameset containing two columns or two rows of
frames. You can, by nesting framesets within framesets, define more complex arrangements of
frames. A typical example is shown below. The top frame is available for displaying a banner logo
identifying the site, the left frame for a menu of links, and the right frame for the documents linked
from the menu frame. This arrangement of frames is produced by coding one frameset inside another frameset.
The "outer" frameset is composed of two rows. The top row contains the banner frame and the
bottom row contains the "inner" frameset of two columnar frames, the left frame displaying a
menu and the right frame containing a document. The coding to produce this frameset is
shown below. Of course, you can produce more complex arrangements of frames, but you need
to be cautious about doing so. You should create only as many frames as you need to
improve the functionality of your site, not to overload visitors with information or
complicate navigation between pages. |
|||||||||||||||
