Consistent Page Layout
Frames Versus Tables
The presentation of a website is one of the most important things when planning a site. One of the first decisions is whether or not to use frames.The most common use of frames layouts is a navigation bar, typically a vertical pane on the right of the screen, containing links to various parts of the site. This is possibly the most obvious application of frames, as the links are visible to the visitor regardless of where they may go within the site. Each pane is capable of scrolling independently, allowing the main content pane to be scrolled as needed while leaving the links in the navigation pane in view at all times.
In a typical frames based site, (see Fig 1) the visitor is actually looking at two different documents; in this example, the blue left pane and the white main pane. Note that the blue left hand column has both vertical and horizontal scrollbars. In this instance, that column could be scrolled leaving the white right hand pane unaffected, but this could just as easily apply the other way round.
To achieve this, you need to create the two main documents - in this example, the blue page that will appear on the left and the white page to go on the right. Having done that, you must create a "frameset" page which calls these two documents when it is loaded into a browser and defines how they appear.
The first two documents are straightforward HTML files, and would look something like this for the main white page:
<HTML>
<HEAD>
<TITLE>Main
Pane</TITLE>
</HEAD>
<BODY
BGCOLOR="#FFFFFF">
<CENTER>
<H1>This
is the main pane, which would typically contain the content of the
site.</H1>
</CENTER>
</BODY>
</HTML>
and for the blue "nav" pane:
<HTML>
<HEAD>
<TITLE>Navigation
Pane</TITLE>
</HEAD>
<BODY
BGCOLOR="#0000A0" TEXT="#FFFFFF">
<CENTER>
<H1>This
is the nav pane which would contain links to other pages.</H1>
</CENTER>
</BODY>
</HTML>
The next step is to create the frameset document which will define how and where these two files appear in the visitor's browser when they arrive at the site:
<HTML>
<HEAD>
<TITLE>Frames
Example</TITLE>
</HEAD>
<FRAMESET
COLS="20%,*" BORDER="0">
<FRAME
SRC="navbar.htm">
<FRAME
SRC="main.htm">
</FRAMESET>
</HTML>
The <FRAMESET>…</FRAMESET> tags are all the details of how you want the two other documents to appear. In this case, COLS="20%,*" defines the left column as 20% of the browser window and the character * is used as a "wildcard" to indicate that the right hand column should be displayed in the remaining available space, ie 80%. BORDER="0" indicates that there should be no border between the two panes other than any scroll bars as required. The two FRAME SRC= attributes define which pages are to be displayed in the two columns.
A site layout which doesn't use frames (see fig 2) is more straightforward to prepare, but the contents of the entire browser window will be replaced when a link on the page is clicked. Consequently, any constant content which should appear on each page must be replicated on each page. While this may seem unnecessarily long winded, it is often simply a matter of copying and pasting.
The code needed for the simple non-frames based page is the same as that of the two pages in the frames based site, and would look like this in this example:
<HTML>
<HEAD>
<TITLE>Non-frames
layout example</TITLE>
<BODY
BGCOLOR="#FFFFFF">
<H1>This
is an example of a non-frames based site. This page will be entirely replaced
when a link on the page is clicked.</H1>
</BODY>
</HTML>
The use of frames allows the webmaster to force visitors to enter via a fixed point of entry as the frameset page is the document to which the URL or website address points, though the browsers are increasingly equipped with a command to "open frame in new window" which allows the visitor to escape from the frameset.
However, a trade off here is one of increased download time. In order to load a navigation bar and main page in this typical frames site, the browser must download three documents: the frameset and the two pages - the last two with their associated images and applets (an applet is a set of commands which run when the page is loaded, often using a language such as Java or JavaScript).
Figure 3 illustrates the three documents involved in displaying the frames site on screen. A and B are the pages that will make up the left column and the main pane, and C is the frameset which is the file that the website address (highlighted) refers to.
Additionally the use of frames makes the construction of the site more complex, as typically a link in the navigation bar opens a new page in the main pane. This requires that a target frame be specified in each link. More code risks more errors. While the vast majority of today's browsers support frames, not all do. A site which uses frames will not be accessible to a browser which does not, so additional non-frames based links must be provided as well as a home page, again adding to the code required by the site.
Possibly the most annoying error that can arise as a result of the use of frames is the failure to break out of the frameset when leaving the site via a link. Unless the site's builder has targeted the link correctly, the new site will be downloaded into the frames rather than a full browser window. Occasionally this is a deliberate ploy, but more often than not, sloppy coding.
This is probably best illustrated using two frames based sites, the second downloaded into the first one's frameset.
Another common complaint about frames based sites is that the URL of the site is always that of the outer frameset, regardless of the page being viewed. Consequently, the visitor bookmarks the site and not the document. While this may be advantageous to the webmaster - visitors now enter via the page with the counter and the cookie for instance - it can be infuriating to the visitor who cannot jump straight to the page that interested them without going via somewhere which didn't.
While people more experienced with the ways of the web may be able to follow the route into the site which took them to the page that interested them, others newer to the Internet may not find it so easy to retrace their steps and may never find that page again.
Most well presented frames and non-frames sites use tables in some form or another. Tables will allow the structuring of a page into areas, much as with a DTP package. The main difference here is that a webpage is dynamic, in that the author does not have absolute control over how it will look to the viewer. Different screen sizes and resolutions, default fonts and sizes… all these things will change the way a page appears. However, what can be defined is where things appear relative to each other and their relative proportions on-screen.
As an alternative to frames, tables can be employed to create sites which, with the exception of the non scrolling navigation bar, can be identical. A full width two column table with the navigation links in the left hand column is as effective as the navigation frame, and although it does mean these links need to be coded to each page, it requires no target attributes to the links themselves. Less code means less errors.
Visitors can now bookmark any page within the site that they may wish to visit again. It is good practice to treat every page as a potential point of entry into a site anyway, and provide enough links to allow full access to the whole site from any page without the use of the browser's back button.
So, in conclusion, to frame or not to frame? The answer is a resounding no. Frames, while not difficult, are more complex and therefore more prone to errors. Visitors are unable to check back quickly to a given page as individual pages can't be easily bookmarked. Tables are quicker to download and simple to create. But perhaps most importantly, the majority of people using the net simply don't like frames.
Want to know more about tables?
Check out the tutorial on Nested Tables - http://www.webpr.co.uk/practical/nestedtables.asp[Note, in these examples, we have assumed that all three files will be stored together, ie in the same directory. There is no need to use the full URL or web address of a file which is within the same site. Relative URLs can be used which greatly reduces the opportunity for errors to creep into the code. For example, if the navbar.htm file was in a folder called navigation which itself was in the same folder as the frameset page, it could be called with <FRAME SRC="navigation/navbar.htm">. Alternatively, if it were up one level, then <FRAME RC="../navbar.htm"> would indicate that. The ../ indicates "Up one level".]
http://www.webpr.co.uk/practical/frames.asp
|
Previous page... |
© 2002 Ashley Preston