Frame tutorials - Written by Matt |
The basic frameset In a frame definition document, the <BODY> tag is replaced by the <FRAMESET> tag. The <FRAMESET> tag will be ignored if any tags normally found within the <BODY> element are placed before it. The <FRAMESET> container holds the <FRAME> elements which describe the frames that will make up the page. A framed page layout is defined in terms of rows and columns using the <FRAMESET> and <FRAME> elements. The example below shows the web documents one.htm, two.htm and three.htm displayed side by side in columns on the screen. The first page is set to 80 pixels wide, the width of the second page is set to 25% of the available area and the third page should take up all the remaining space. <FRAMESET COLS="80,25%,*"> <FRAME SRC="one.htm"> <FRAME SRC="two.htm"> <FRAME SRC="three.htm"> </FRAMESET> To arrange your frames horizontally rather than vertically, use the ROWS attribute in place of COLS. These attributes define the shape of the frames as row heights or column widths contained in a comma separated list. They are described in terms of absolute height in pixels, percentage values from 1 to 100% or as relative values using an asterisk ( * ). The total height of all rows must equal the total height of the window, so the values may be normalised by the browser if necessary. For example: <FRAMESET ROWS="2*,*"> <FRAMESET COLS="50,*,50"> <FRAMESET ROWS="20%,60%,20%"> Nesting frames The example below shows how to nest frames by placing one frameset inside another. First we write a basic two row frameset: <FRAMESET ROWS="*,50%"> Add the code : There is no limit to the number of frames you can nest, although be wary of using more than three frames on the screen as they can begin to make things very complicated for your readers. |