Introduction to Frames

This lesson will just give a brief introduction to frames and their use. Frames can be used to divide browser screen so it actually displays multiple web pages at one time. They were used in this tutorial a couple of times when showing how to create headers and tables. By using frames, I was able to give you one web page that allowed you to change settings on an HTML tag, and then display the results on the second page. You may wish to use frames to give your users a menu bar on the left or right side that doesn't change, while displaying the pages they choose in the other frame.

In order to effectively use frames, you must first decide how you want your web page divided. Do you want the page divided into rows or columns, or maybe both. Once you have a basic idea, you will use one web page as the "controlling" page. This page will be loaded in the browser first and will control the division of the window and what other pages to load. There are three tags that are used to create frames and are usually placed in the HEAD section of a web page.

A window will be divided into at least two frames. These frames are contained within a frameset. The frameset defines whether the window divides the page horizontally (Rows) or vertically (Columns). You can think of the rows and columns as being similar to tables. Except in this case it's the entire browser window we are talking about. The <FRAMESET> tag has a few attributes that control the appearance of your frames.
  • COLS= if dividing your page vertically, you will set the COLS attribute. The value set contains at least two values and is enclosed in quotes. The first value is the width of the first column, the second value is the width of the second column and so forth. The values can be in pixels, a percentage of the browser window or an asterisk (*) to indicate all remaining space. For example, if you want to display two frames with the first one being 100 pixels wide and the second one taking up the rest of the remaining window, you would use COLS="100,*".
  • ROWS= is used to divide a page horizontally. The value of the ROWS= attribute is used the same way as a column. If you wanted to split the page horizontally with 10% of the browser window containing one page, and the second page using the rest of the available space, you would use ROWS="10%,*".
  • BORDER= The border attribute controls whether or not the frames will have a border between them. Unfortunately browser's are not created equal so for Internet Explorer the value of BORDER= would be "YES" or "NO". Netscape however wants the BORDER= to be a Pixel value, so to eliminate the border the attribute needs to read BORDER="0". It's common to see <FRAMESET> tags with both BORDER="NO" and BORDER="0".
  • FRAMESPACING= is a pixel value for the width between the frames. If trying to eliminate borders, the FRAMESPACING must also be set to "0".