|
A few years ago almost every document on the web contained frames, the frameset structure provided an easy way to create multiple scrollable areas in a browser window.
This provided a flexible mechanism to modify the content of the frames, however frames turned out to be a bit of a fad, you can achieve many of the benefits of frames by simply employing the infinitly more powerful CSS formmating methods in your document.
Having said that though frames still have their uses and they even have their own DTD to handle their tags and special needs, this page will introduce you to the basics of frames, and also show you how you can employ them in your html documents.
As I described above, html frames at their simplest level provid multiple scrollable areas within the browser window.
There are many none Web applications that use the concept of separate panes to assist with organizational control, a good example of this is Windows Explorer, the left hand pane in Explorer is used to display the folder or directory hierarchy, and the right pane is used to display the contents, ie drives, directories/folders, files, ect.
You will probably also have noticed that the panes in Windows Explorer can be manipulated and resized, this also applies to frames in html documents.
The screenshot below is of Windows Explorer on a PC running Windows XP Pro.
html frames are a little bit more complex to implement than a normal html document, this is because they require a separate document to define the frame layout, as well as the individual documents to actually occupy each of the frames.
 Top of page
In html a framset is created in just the same way as any other html document, except that its content is limited to the frame related tags, the example of code below is a skeletal document that illustrates a frameset document.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset Sample</title>
</head>
<framset attributes>
<frame attributes></frame>
<frame attributes></frame>
</frameset>
</html>
Consider the following aspects of the example of code above:
-
The document uses the Frameset DTD which is essentially the same as the Transitional DTD except for the addition of the frame specific tags ( and the replacement of the body tags).
-
There is no body element in the document, the <frameset> tag does this it provides the next level container under <html>
-
The actual <frame> tags that are nested between the <frameset> tags, define the content for the frames and the various other properties of the frame itself.
-
Other than the <frameset> and the <head> sections there is no other content in the document.
Top of page
The <frameset> tag defines the layout of the frames in the document, it does this by specifying whether the frames should be laid out in columns or in rows, and then what the width of each column should be.
The <frameset> tags format is illustrated in the code example below.
<frameset cols/rows = "column_or_row_size(s)">
The column or the row sizes can be specified as percentages of the user agent/browser window, or as pixels, or an asterisk (∗), this allows the user agent or browser to assign the size.
Where the ∗ asterisk has been specified for the rows or the columns the user agent will typically split the remaining space between them.
Usually the resulting frameset will occupy the entire browser window.
The number of entries in the document of the rows or cols attribute will also define how many frames will be used.
Each entry needs a corresponding <frame> tag within the <frameset> tags in the document.
Consider the examples of code below:
<frameset cols = "25%, 75%">
The frameset described in the code example above will have two columns, one column will fill 25% of the window, and the other column will fill the remaining 75% of the window.
<frameset cols = "25%, ∗">
The frameset described in the code example above will have two columns, one will fill 25% of the window, and the other column will fgill the remaining 75% of the window.
<frameset rows = "50%, ∗,∗">
The frameset described in the code example above has three rows, the first row will fill 50% of the window, the other two rows will each fill 25% of the remaining window.
<frameset rows = "100px, 200px">
The frameset described in the code example above will have two rows, the first will be 100px high, and then the second row is the size of the remaining window sapce in the browser.
In the last of the <frameset> code examples above the second row has been defined at 200px, however if the user’s browser window is larger than 300px high (total of rows defined) then the second row will expand to fill the available space in the browser window.
Top of page
You can find more information at the W3Schools web site on the frameset tags.
The <frameset> tag has responsibility for defining the layout of the entire page, ie the number of frames and their sizes.
The <frame> tag is responsible for defining the properties of each individual frame.
The code example below illustrates the <frame> tag using minimal syntax.
<frame name = "name_of_frame" src="url_of_content""></frame>
The name attribute can be used to give the frame a unique name that can be used to reference the frame using a url, or a script (JavaScript, VBScript), to control or manipulate the frames contents.
The src attribute of the <frame> tag is used to specify the url of the content that should be displayed in the frame.
Using just these two attributes will result in a frame with minimal margins, and no borders, and automatic scroll bars.
Top of page
You can find more information at the W3Schools web site on the frame tags.
In order to create a document we need to put the two sets of tags together in the correct manner the <frameset> tags are used to delimit the <frame> tags in the document.
The frameset tags role is to define the layout of the document, and the frame tags are responsible for the properties of each frame in the document.
In the code example below the <frameset> tags specify that the frames should be laid out in columns the left side fills 25% of the window, and the right frame fills the remaining 75% of the window.
The <frame> tags are named leftframe and rightframe and the src attribute of each frame tag points to the document that will be displayed in the respective frame.
I have created two documents to be displayed in each frame and they are named leftframe.htm and rightframe.htm in respect of the frame they will be displayed in so that something appears in each frame.
|
Downloads:
|
Download the basic frame example.
Download the source code in a text file.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http:////www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Basic Frame</title>
</head>
<frameset cols="25%, 75%">
<frame name="leftframe" src="leftframe.htm"></frame>
<frame name="rightframe" src="rightframe.htm"></frame>
</frameset>
</html>
To see the code example above rendered in a browser use this link basic frame example.
If you download the example you can experiment with the code, try changing the cols attribute to rows in the frameset tag to make the columns into rows in the basicframe.htm document.
Which frame will end up being the top or upper most frame the left or the right frame ???
Top of page
The <noframes> tags are used to display text for browsers that do not handle frames, the <noframes> element goes inside the <frameset> elements.
If the browser can handle frames, it will NOT display the text between the <noframes> elements.
The text between the <noframes> tags that is displayed must to be delimited by <body> </body> tags.
The code example below illustrates the <noframes> tags format and how to apply them to a <frameset>.
To see the code example below rendered in a browser use this link noframes example.
|
Downloads:
|
Download the noframe example.
Download the source code in a text file.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http:////www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Basic Frame</title>
</head>
<frameset cols="25%, 75%">
<frame name="leftframe" src="leftframe.htm"></frame>
<frame name="rightframe" src="rightframe.htm"></frame>
<noframes>
<body>
Your browser cannot handle frames.
</body>
</noframes>
</frameset>
</html>
Remember use the Frameset DTD to validate any documents containing frames,
the <noframes> tag is not allowed under the XHTML 1.0 Strict DTD.
Top of page
You can find more information at the W3Schools web site on the noframe tags.
The <frame> tag supports the attributes listed in the table below.
|
Attribute
|
Value(s)
|
Use
|
|
frameborder
|
0 = no border
(default)
1 = border
|
Determines if frame has a border or not.
|
|
longdesc
|
url
|
A URL of a document to use as a long description for the frame.(This is largely unsupported by most user agents).
|
|
marginheight
|
pixels
|
Sets the top and bottom margins for the frame–the distance the frames content is from its border.
|
|
marginwidth
|
pixels
|
Sets the left and right margins for the frame–the distance the frames content is from its border.
|
|
name
|
frame_name
|
Defines a unique name for the frame (to use in scripts).
|
|
noresize
|
noresize
|
When set to noresize the user cannot resize the frame.
|
|
scrolling
|
yes no auto
(default)
|
Controls whether the frame displays scroll bars to help scroll the content displayed in the frame.
|
|
src
|
url
|
Defines the URL of the file to show in the frame.
|
The longdesc attribute mentioned in the table above is not fully supported by most user agents (browsers), you can use it if you do need to specify a long description, but dont count on it’s functionality.
The margin attributes marginheight and marginwidth control the inside margin of the frame.
The margin attributes should be used to provide enough whitespace around the frames content to make the content clearly visible in the frame.
When you use images in a frame consider setting the margins to ‘0’ zero then the image or graphic will fill the frame entirely, so there is no superfluous white space around the image.
The frameborder attribute controls the visibility of the bounding border of the frame which can be either visible or not visible.
The scrolling attribute controls whether the frame has scroll bars or not the default setting is auto.
This allows the user agent to decide, if the frame contains too much content to be displayed, then the user agent will add scroll bars to the frame.
If on the other hand the content fits within the frame the user agent will not display scroll bars.
You can apply the scrolling attribute accordingly if you want scroll bars all the time or if you dont want scroll bars no matter how the content of the frame is displayed.
The noresize attribute when set will prohibit the user from modifying the size of the frame, the default setting allows the user to resize the frame.
It is very easy to resize a frame the user positions the pointer over the the frame division and then the pointer is in the correct position it will become a double headed arrow, then the user must press down the left mouse button and drag the pointer and then release the mouse button when the pointer reaches the new position.
Try it for yourself with the basic frame example above.
Top of page
In order to change a frames content you must be able to target the frame, and to do this you must use the name attribute to uniquely identify your frames.
You can then use the names in scripts and anchor tags to direct new content into the frame.
Scripting languages can use the documents frame collection to target a frame or its content for that matter.
For example we could use JavaScript to change the content of a frame named news with new content from the newsupdate.htm page the JavaScript refrence would look like the following:
parent.news.location.href=‘newsupdate.htm’;
The JavaScript reference above is like a URL pointing to both the location where the content is displayed and the new content, basically what the script says is in the parent frameset called news at the location the current page is displayed use this page newsupdate.htm instead.
You can employ other methods and properties to manipulate the frame and likewise its content and properties.
Also under the frameset DTD the <a> anchor tag supports the target attribute which can be used to target frames with new content.
Understanding the difference between the _parent and _top values of the target attribute you need to understand nested frames which are covered below in the next section on the page.
|
Downloads:
|
Download the navigation frame example.
Download the source code in a text file.
|
Using a frames name in the target attribute of an anchor is the easiest way to direct new content into a frame.
This technique is often employed to control frames independently, especially where one of the frames is used for navigation controls for the site, and another frame contains the page and its content.
To illustrate the this I have created a little web site called Acme.Stuff.com which has the navigation controls in the left frame in the browser window, and the right frame contains the content.
To see the example web site use this link Acme.Stuff.com
All the possible values for the target attribute are listed in the table below.
|
Value
|
Use
|
|
frame_name
|
Displays the content in the frame specified by frame_name.
|
|
_blank
|
Opens a new window to display the content.
|
|
_parent
|
Displays the content in the parent frameset of the current frame.
|
|
_self
|
Displays the content in the current frame.
|
|
_top
|
Displays the content in the current window, without frames.
|
Top of page
We have looked at how to create rows and columns using framesets, however what if you wanted a little of both?
In such a case you could nest one frameset inside another.
Consider the layout of the frames screenshot below.
The layout in the screenshot above is achieved by nesting a column–based frameset in the second row of a row–based frameset.
What this means in plain terms is that the second row of the top frameset becomes its own frameset.
The code example below illustrates how to achieve the layout illustrated in the screenshot above.
|
Downloads:
|
Download the nested frame example.
Download the source code in a text file.
|
<frameset rows="20%, *">
<frame name="banner src="banner.htm"></frame>
<frameset cols="20%, *">
<frame name="nav" src="navigation.htm"></frame>
<frame name="content" src="home.htm"></frame>
</frameset>
</frameset>
It would be possible to nest other framesets within the layout illustrated in the screenshot above, but using more than two or three frames tends to just clutter up the document and also it will probably confuse the user too.
To see what the example illustrated in the screenshot looks like in a browser use this link nested frames.
The _parent and the _top target attributes were mentioned briefly in the targeting Frames section of the page above.
The text and the web page example below should help to illustrate the effect of the two values on the target frame.
The _parent value of the target attribute causes the document to load within the frameset that is the immediate parent of the current frame in the frameset the content filling the user agent window.
In the example a link in the content frame in the column–based frameset using the _parent value causes the specified "new content" to load in it’s immediate parent frame, which in our example is the banner frame in the row–based frameset it is nested in.
|
Downloads:
|
Download the target lab example.
Download the source code in a text file.
|
The _top value of the target attribute causes the specified content to load in the top–most frameset taking up the entire the user agent window.
In the example a link in the content frame using the _top value causes the specified content to be loaded into the top–most frameset filling the user agent window, which is in the row–based frameset it is nested in.
All the links in the navigation frame use the _name value of the target attribute to specify the frame to load the the "new content" and the new banner into.
To see the example page in a browser use this link target Lab.
Top of page
Inline frames were concieved and introduced as a better method of incorporating content in scrollable containers within a larger document.
Although you could use regular framesets to create individually scrollable regions, the inherent stringent row and column layout design hampers the layout.
Inline frames are created using the <iframe> tag the code example below illustrates the tags minimal format.
<iframe src="url_of_content"></iframe>
The <iframe> tag supports the attributes listed in the table below.
|
Attribute
|
Value(s)
|
Use
|
|
align
|
left right top
middle bottom
|
Alignment of the frame to surrounding text.
|
|
frameborder
|
0 = no border
1 = border (default)
|
Whether the frame should have a visible border.
|
|
height
|
pixels %
|
The height of the frame.
|
|
longdesc
|
url
|
A URL to a document containing the long
description of the frame
|
|
marginheight
|
pixels
|
The size of the internal top and bottom
margins of the frame.
|
|
marginwidth
|
pixels
|
The size of the internal left and right
margins of the frame.
|
|
name
|
name_of_frame
|
The name of the frame (for use in scripting
and otherwise referencing the frame and its
properties)
|
|
scrolling
|
yes
no
auto (default)
|
Whether the frame should have scroll bars
or not
|
|
src
|
url
|
The URL of the content to display
in the frame.
|
|
width
|
pixels %
|
The width of the frame.
|
|
Downloads:
|
Download the iframe example.
Download the source code in a text file.
|
The attributes for the <iframe> function in exactly the same way as the frame–based type.
It is best to use as many attributes as possible to more closely specify how your <iframe> layout should be rendered by the browser.
The code example below illustrates how to insert an <iframe> into a document the syntax is identical to that used to insert an iframe in the example web page.
To see the example web page rendered in a browser use this link iframe example.
<iframe name="eulaframe.htm" src="enduser.htm"
height="280px" width="450px"
align="right" frameborder="1" marginheight="10px"
marginwidth="10px" scrolling="auto">
</iframe>
Inline frames are not fully supported by all user agents, and as such are only safe to use if you are relatively sure your entire audience are using <iframe> compatible browsers to view your documents.
If this is not the case you should avoid inline frames, or provide an alternative for incompatible browsers.
If you do utilize inline frames, remember that your documents will only validate against the frameset DTD’s just like other frame constructs.
You can find more information at the W3Schools web site on the iframe tags.
|
