Frames stuff you should know
One can divide a browser’s window into several "panes" and display a separate document into each "pane". These "panes" are called frames.
The properties of these frames, are defined in a “master” document called a frameset document.
It is the frameset itself that defines the layout of the browser Window.
One could think of a frameset as a “table” - every “cell” of the table is a frame that holds a document. A frame can also contain another frameset the same way that a cell can contain another table.
Since the browser is able to render multiple documents simultaneously, frames are often used to keep part of the Browser Window stationary [i.e., a document displayed in a frame stays static], while other frames content changes.
It is possible to achieve complex layouts using cols,rows and nested framesets.
i.e., my Layout Editor is made of more than 10 frames!
The code below creates a frameset that splits a Window into 4 different frames.
.
<html>
<head>
<title>My frameset</title>
</head>
<frameset rows="12%,*">
<frame src="blue.htm" name="banner" target="main">
<frameset cols="20%,*">
<frame src="yellow.htm" name="links" target="main">
<frameset ROWS="*,15">
<frame src="red.htm" name="main" target="main">
<frame src="green.htm" name="footer" target="main">
</frameset>
</frameset>
</frameset>
<noframes>
<body>
Some Content goes here for older browsers and Search Engines
</body></noframes>
</html>
To better understand what this code does, let's take a look at one line at a time:
<frameset rows="12%,*">
The browser splits the entire window into 2 rows.
The size of the first row is set to 12% of the available height - whatever remains goes to the second row [as specified by the asterisk].
We have our 2 first frames.
<frame src="blue.htm" name="banner" target="main">
That first frame is used to hold the document "BLUE.htm"; it is given a name [BANNER].
The target attribute is set to "MAIN", which means that every link clicked within that frame will - by default - open in a frame or window named "MAIN" [shown later].
<frameset cols="20%,*">
The second row [the one created with the asterisk in step #1] is then split into 2 columns.
The size of the first column is set to 20% of the available width - whatever remains goes to the second column [again see the asterisk].
We have our 3rd frame now.
<frame src="yellow.htm" name="links" target="main">
The second frame is used to hold the document "YELLOW.htm"; it is given a name [LINKS].
The target attribute is set to "MAIN", which means that every link clicked within that frame will - by default - open in a frame or window named "MAIN".
<frameset rows="*,15">
This time, the remaining column [created in step #3] is split into 2 rows.
The size of the 2nd row is set to 15 pixels, the size of the first row will be equal to whatever height was available minus the 15 pixels set aside for the second row.
We have our 4th frame now.
<frame src="red.htm" name="main" target="main">
The third frame is used to hold the document "RED.htm"; it is given a name [MAIN].
It is possible to leave out the target attribute because the default value is _self.
By default, the document loads into the window in which the link was clicked.
<frame src="green.htm" name="footer" target="main">
The last frame is used to hold the document "GREEN.htm"; it is given a name [FOOTER].
The target attribute is set to "MAIN", which means that every link clicked within that frame will, by default, open in a frame or window named "MAIN".
</frameset></frameset></frameset>
We complete the frameset file's code by closing all the tags.
Et voilà!
The most important thing to remember is that rows and cols define the number of frames and their size.
The value for these 2 attributes is a comma-separated list: the number of comma-separated items represents the number of frames while the value of each item determines the frame size.
frame and frameset tags have many more attributes/properties, take a look at the Layout Editor to find out more about syntax.
