Framing Your Windows
Setting up Framesets
The key to using frames is setting up your frameset. A frameset is a way of grouping multiple Web pages together for display in a single window. Consider this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frames Example</title> </head> <frameset rows="70,*"> <frame src="fw_menu.html" name="menu" id="menu" /> <frame src="fw_red.html" name="main" id="main" /> </frameset> </html>
In the code above we see that a frameset page has a slightly different structure from a regular XHTML page. The first thing to notice is that the DOCTYPE for frames is different. This is because the W3C has recommend that frames have their own Document Type Definition, or rules sheet, to govern the use of frames.
The next thing to consider is that a frames document does not have a body it has a frameset. The frameset itself can be divided into as many rows or columns as you like. For each row or column you assign a size to it using either absolute pixels, percentages, or the * which is a special character that indicates the rest of the available space should be used. Here are the attributes you can use with the frameset tag:
| Attribute | Value | Description |
|---|---|---|
| cols | pixels % * |
Defines the number and size of columns in a frameset |
| rows | pixels % * |
Defines the number and size of rows in a frameset |
Within the frameset tag are frame tags. Each frame tag defines which XHTML document will be loaded into it. Like any XHTML element you should give the frame name and ID. You define the frames in the order in which they appear in the cols or rows attribute of the frameset. In our example we have page split into two rows. The first row is 70 pixels tall and contains the XHTML document named "fw_menu.html." the second row is set to take up the rest of the available screen space and contained the document named "fw_red.html." Let's look at the attributes you can use with the frame tag:
| Attribute | Value | Description |
|---|---|---|
| frameborder | 0 1 |
Specifies whether or not to display border around the frame |
| longdesc | URL | A URL to a long description of the frame contents. Use it for browsers that do not support frames |
| marginheight | pixels | Defines the top and bottom margins in the frame |
| marginwidth | pixels | Defines the left and right margins in the frame |
| name | frame_name | Defines a unique name for the frame |
| noresize | noresize | When set to noresize the user cannot resize the frame. |
| scrolling | yes no auto |
Determines scrollbar action |
| src | URL | Defines the URL of the file to show in the frame |
<frame noresize="noresize" src="fw_green.html" />
You can nest as many framesets as you like to create layouts that suit your needs. Consider this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Frames Example</title>
</head>
<frameset rows="100,*">
<frame src="fw_red.html" />
<frameset cols="25%,75%">
<frame src="fw_green.html" />
<frame src="fw_yellow.html" />
</frameset>
</frameset>
</html>
In this example we have two framesets. The first frameset divides the browser into two rows. The first row is 100 pixels high and contains the file named "fw_red.html". The second row takes up the rest of the available space and contains a frameset. Within that frameset we have two columns. The first column takes up 25% of the screen and contains the file named "fw_green.html." The second column takes up 75% of the screen and contains the file named "fw_yellow.html."
Take the time here to play with our example and change some of the attributes to see how they affect the layout of the page.
Now let's look at how we can use our pages in a real world scenario.
return to top