The Frameset

The basic code for a web page built with frames is shown below. Beside it is the code for a basic HTML page.

Frames Page	HTML Page
`<html> <head></head> <frameset> </frameset> </html>`	`<html> <head></head> <body> </body> </html>`

Notice that when building web pages with frames the body tag is replaced with the frameset tag.

For W3C compliance you should also replace the HTML doctype tag with a frameset doctype similar to the one shown below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

This doctype should only be used on frameset pages. Content source pages for the website will retain the normal HTML doctype tag.

Defining a Frameset

You need to specify the number of frames, their orientation and the size of each frame window.

Orientation

The orientation of your frameset can be either horizontal, specified with the rows attribute or vertical, specified with the cols attribute.

Two Equal Rows Two Equal Columns

Two Equal Rows	Two Equal Columns
`<html> <head></head> <frameset rows="50/, 50/"> </frameset> </html>`	`<html> <head></head> <frameset cols="50/, 50/"> </frameset> </html>`

<html> <head></head> <frameset rows="50/, 50/"> </frameset> </html>

2 rows

<html> <head></head> <frameset cols="50/, 50/"> </frameset> </html>

2 cols

Number and Size

The number and size of the individual windows within your frameset are specified as shown in the code examples above. Each of the examples is divided into 2 equal size windows specified by 50/ which is an abbreviated form of 50%.

If you wanted 3 cols or rows of equal size the code would be 33/, 33/, 34/. When using percentages, the total should add up to 100.

You can also specify absolute settings or specific dimensions in pixels.

A typical frameset with a 3 cols orientation, with absolute measurements might be defined as: 200, 600, 200 (1000 pixel fixed width). If these setting were used with a rows orientation, you would have a frames page with a fixed height of 1000 pixels.

If you wanted a fluid design, where the frameset adjusts to the size of the browser window you can use a wildcard (asterick ) as shown. 150, *, 150

Note: When defining rows the measurements are for height. When defining cols the measurements are for width.

Defining frames within frames

Let's call the first 2 code examples shown above, the main frameset. Your next step is to define the individual frame windows within your main frameset.

Individual frame windows are defined with either a second frameset tag for multiple windows or the frame tag for a single frame window.

The website that you are reading was built using a 3 row orientation.

The top row which contains the website header is a single frame window, 245 pixels in height.

The second row is a multiple frameset divided into 3 columns or windows.

The bottom row is the single frame footer, 35 pixels in height.

The basic code is shown below:
<html> <head></head> <frameset rows="245, *, 35"> <frame> */ top row single frame*/ <frameset cols="200, *, 200"> */ second row - 3 columns */ <frame> */ left column - 200 pixels wide*/ <frame> */ middle column - remaining browser width*/ <frame> */ right column - 200 pixels wide*/ </frameset> <frame> */3rd row - single frame footer*/ </frameset> </html>

Study the code shown above until you understand the concept of nesting framesets and defining frame windows within the framesets.

Note that each individual frame window will eventually be defined by a frame tag.

For an exercise, copy the code into NotePad or your HTML editor. Remove the comments and save the page as test-frames.html. Experiment with changing the sizes and orientation of the defined windows.

When you understand the concepts presented here, you are ready to move on to the next lesson on Source Pages.