The Frameset

<body> <h1>The Frameset</h1> <p>The basic code for a web page built with frames is shown below. Beside it is the code for a basic HTML page.</p><br> <div align="center"> <table width="400" cellpadding="0" cellspacing="0" style="border: solid #afafaf 1px"> <tr><th style="border-right: solid #afafaf 1px;border-bottom: solid #afafaf 1px">Frames Page</th><th style="border-bottom: solid #afafaf 1px">HTML Page</th></tr> <tr valign="top"> <td align="left" style="border-right: solid #afafaf 1px"><code><html><br> <head></head><br> <frameset><br> <br> </frameset><br> </html> </code></td> <td align="left"><code><html><br> <head></head><br> <body><br> <br> </body><br> </html> </code></td> </tr></table> </div> <br> <p>Notice that when building web pages with frames the body tag is replaced with the <b>frameset tag</b>.</p> <p>For W3C compliance you should also replace the HTML doctype tag with a frameset doctype similar to the one shown below:<br> <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"></code> <p>This doctype should only be used on frameset pages. Content source pages for the website will retain the normal HTML doctype tag.</p> <h2>Defining a Frameset</h2> <p>You need to specify the number of frames, their orientation and the size of each frame window. <h3>Orientation</h3> <p>The orientation of your frameset can be either horizontal, specified with the <b>rows</b> attribute or vertical, specified with the <b>cols</b> attribute.</p> <div align="center"> <table width="450" cellpadding="5" cellspacing="0" style="border: solid #afafaf 1px"> <tr><th>Two Equal Rows</th><th>Two Equal Columns</th></tr> <tr valign="top"> <td align="left"> <code><html><br> <head></head><br> <frameset rows="50/, 50/"><br> <br> </frameset><br> </html> </code><br> <img src="images/2-rows.gif" width="117" height="65" alt="2 rows" border="0"> </td> <td align="left"> <code><html><br> <head></head><br> <frameset cols="50/, 50/"><br> <br> </frameset><br> </html> </code><br> <img src="images/2-cols.gif" width="117" height="65" alt="2 cols" border="0"> </td> </tr></table> </div> <h3>Number and Size</h3> <p>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 <b> 50/</b> which is an abbreviated form of <b>50%</b>. <p>If you wanted 3 cols or rows of equal size the code would be <b>33/, 33/, 34/</b>. When using percentages, the total should add up to 100. <p>You can also specify absolute settings or specific dimensions in pixels. <p>A typical frameset with a 3 cols orientation, with absolute measurements might be defined as: <b>150, 400, 150</b> (700 pixel fixed width). If these setting were used with a rows orientation, you would have a frames page with a fixed height of 700 pixels. <p>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. <b>150, *, 150</b> <p>Note: When defining <b>rows</b> the measurements are for <b>height</b>. When defining <b>cols</b> the measurements are for <b>width</b>.</p> <h2>Defining frames within frames</h2> <p>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. <p>Individual frame windows are defined with either a second <b>frameset</b> tag for multiple windows or the <b>frame</b> tag for a single frame window. <p>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. The second row is a multiple frameset divided into 3 columns or windows. The bottom row is the single frame footer ( It's empty and only 10 pixels high). The basic code is shown below:<br> <code><html><br> <head></head><br> <b><frameset rows="70, *, 10"></b><br> <br> <frame> */ top row single frame*/<br><br> <span style="color: #ff0000"><frameset cols="170, *, 180"></span> */ second row - 3 columns */<br> <frame> */ left column - 170 pixels wide*/<br> <frame> */ middle column - remaining browser width*/<br> <frame> */ right column - 180 pixels wide*/<br> <span style="color: #ff0000"></frameset></span><br><br> <frame> */3rd row - single frame footer*/<br> <b></frameset></b><br> </html> </code> <p>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 <b>frame</b> tag. <p>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. <p>When you understand the concepts presented here, you are ready to move on to the next lesson on <b>Source Pages</b>.</p> <br> <a href="http://www.create-a-website-with-frames.com/content-index.html">Create a Website With Frames</a> <a href="http://www.create-a-website-with-frames.com/content-definition.html">What are frames?</a> <a href="http://www.create-a-website-with-frames.com/content-frameset.html">The Frameset</a> <a href="http://www.create-a-website-with-frames.com/content-source.html">Frames Source Pages</a> <a href="http://www.create-a-website-with-frames.com/content-scrolling.html">Frames Scrolling and Stuff</a> <a href="http://www.create-a-website-with-frames.com/content-noframes.html">Noframes</a> <a href="http://www.create-a-website-with-frames.com/content-redirection.html">Frames Redirection</a> <a href="http://www.create-a-website-with-frames.com/content-kit.html">The Frames Kit</a> <a href="http://www.create-a-website-with-frames.com/content-resources.html">Other Frames Resources</a> <a href="http://www.create-a-website-with-frames.com/content-contact.html">Contact Questions on How to Create a Website With Frames</a> <a href="http://www.create-a-website-with-frames.com/">Create a Website With Frames</a> <a href="http://www.create-a-website-with-frames.com/definition.html">What are frames?</a> <a href="http://www.create-a-website-with-frames.com/frameset.html">Frameset Tag</a> <a href="http://www.create-a-website-with-frames.com/kit.html">Frames Kit</a> <a href="http://www.create-a-website-with-frames.com/noframes.html">Noframes Tag</a> <a href="http://www.create-a-website-with-frames.com/redirection.html">Frames and Redirection</a> <a href="http://www.create-a-website-with-frames.com/resources.html">Other Frames Resources</a> <a href="http://www.create-a-website-with-frames.com/scrolling.html">Frames Scrolling and other Attributes</a> <a href="http://www.create-a-website-with-frames.com/source.html">Frames and Source Pages</a> <a href="http://www.create-a-website-with-frames.com/contact.html">Contact Questions on How to Create a Website With Frames</a> Copyright © 2008<br> Net Success 2000 Plus Inc<br> Somerset, KY, USA<br> </body>