Internet - Sunday, August 10, 2008 22:51 - 2 Comments

Basic HTML frames howto

HTML basic frames

Where tables allow a web designer to create a miniature web page within a larger page, using HTML frames picks up and makes each of those pages operate independently, loading different information into each frame, and even calling that information to be changed from still a different frame.  Frames are commonly used to create sidebars, or cross-referenced information to the main page.  They are excellent for an HTML based catalog, such as using one frame for thumbnail pictures that can be enlarged in the main frame.  Remember, each frame is an independent web page, with the ability to call other frames, or web pages, all on the screen at one time–;-.

As you can imagine, frames can become confusing.  You must keep track of which frame is calling a page, and where that page should be displayed, and all of the details that make it work smoothly.  Use frames sparingly, and split individual frames into tables, which are easier to manipulate.  If you only have to keep track of 2 or 3 frames on a page, the task of information handling is greatly reduced, and by adding tables inside that page frame, you can split the contents into groups of information.  Additionally, it is difficult to print a particular section of a page laid out in frames, making them sometimes frustrating to users.

The <frameset></frameset> tag set contains the frames, and specifies how the frames are displayed.  Inside the <frameset> command, each frame is associated with a starting web page to display.  Below, we have set up a frameset with 2 columns, one taking up 25% of the page width, and the other using the remaining 75%.  These numbers can be automatically adjusted, set to a specific pixel width, or allowed to be adjustable.  By and large, setting the width with a percentage of the total page width is the easiest method. An asterisk (*) tell the browser to use all remaining space.

<frameset cols=”25%,75%”>
<frame name=”One” noresize=”noresize” src=”1.html”>
<frame name=”Two” noresize=”noresize” src=”2.html”>
</frameset>

Frames may be nested within other frames, but the method will quickly become difficult to manage.  A single nest is excellent for placing a menu at the top of the page, and then navigating to several frames beneath that, as follows:

<frameset rows=”100,*”>
<frame name=”MySite” noresize=”noresize” src=”mysite.html”>
<frameset cols=”150,*>
<frame name=”Menu” noresize=”noresize” src=”main-menu.html”>
<frame name=”Display” noresize=”noresize” src=”index.html”>
</frameset>
</frameset>

By experimenting with a basic frame layout such as the one shown above, you’ll quickly see the potential of frames for displaying a maximum of information, while keeping your information groups well sorted.

One VERY important thing to remember with frames is that anyone who arrives at the page outside of frames may not be able to use commands, or even navigate to a different part of the site.  Since each page displayed in a frameset is a valid url, it may be reached without first loading the top page(s).  This could severely affect page display and functionality, so use your frames carefully, and provide links to escape them to the fully functional framed site.

Article written by MyComputerAid.com