Benefits of a Frame Web Site
by Herman Drost
Frame web sites are generally frowned upon by most
web site designers
because they not supported by all browsers, take longer to
load and are
not search engine friendly.
Why then would you want to create a frame web site or
In this article I will discuss what is a frame web site,
the pros and
cons of frame pages and give a practical example of how to
and design a frame page. I will also provide you with
resources should you decide to pursue frame web sites a
What is a frame web site?
This is when you combine several html pages in one browser
Pros and Cons of frame web sites
1. Easy navigation. The navigation bar remains stationary
while the other
framed web pages change. This enables you to always know
where you are.
2. Simple to design large web sites - if you create a web
site of 300 pages
your navigation bar can remain the same while the other
300 pages change.
3. Keep visitors on your web site - you can design a frame
page so that offsite
links appear in the larger frame instead of taking the
visitor off site. Here's a
This uses a small navigation frame at the top which
remains the same while
the main pages from another site appear in the larger
1. Difficult for search engines to index frame web sites
(although there are
ways around this).
2. Not supported by all browsers. The older browsers
especially don't support
frame web sites and newer browsers are more supportive of
3. Slow loading - because a frame web page consists of
several web pages
(frames), it takes longer to load than a single html page.
The main purpose of a frame page is to keep some
visible (ie navigation bar) while viewing other
information (main pages)
that is subject to change. This makes it easy for a
visitor to navigate say
300 pages of your site. The navigation menu or
advertisement remains in
front of your visitor at all times, instead of creating
one on each page.
How to design a frame page
Here's a very practical example of a frame page you can
The framed web page allows a visitor to access any page of
his web site
database and also be able to return to the original web
site at any time
from the links on the navigation bar. This is because the
remains constant while the main frame changes.
1. The best way to think of frames, is to treat each frame
as a separate file,
all controlled by a "main" file called a frameset (and in
reality, this IS the case).
2. Therefore, the framed page you create (a single page
consisting of two
frames, top and bottom) should consist of 3 separate HTML
Here's the file directory:
1. frameset.shtml - the main html file that contains the
other 2 frames.
2. topframe.shtml - the file that includes the navigation
(in this case it's the content of the index.shtml page
which includes the
navigation links - contactus.shtml and index.shtml)
3. bottomframe.shtml (in this case it's a link from
another web site that loads
into the bottom frame).
(I have used the .shtml file extension because I used
server side includes
(SSI) in this frame web site.
For most web sites you would normally use the .html file
Tip: Generally speaking, the files that make up frames
within a frameset should
be descriptive of what frame they are (such as
leftframe.htm, etc.), or named after their purpose (navframe.htm,
headerframe.htm, bodyframe.htm, etc.).
3. Within the index.shtml file (the top frame file), you
should see the two links
you're looking to code (contactus.shtml and index.shtml).
Add, in both of those links, the following code:
so that they should look similar to the following
[a href="contactus.shtml" target="topFrame"]Contact Us[/a]
This makes sure the link content is within the top frame.
Tip: Here's a little tip if you're using IE:
To view the source of a frameSET - select View > Source
To view the source of a frame WITHIN a frameset,
rightclick on a blank
section of the actual frame and select View Source.
The FINAL CODE of the FRAMESET PAGE
[title]Prince William County, Virginia[/title]
[frameset rows="165,*" frameborder="NO" border="0"
[frame name="topFrame" scrolling="NO" noresize src="topframe.shtml"
[table width="100%" border="0" cellspacing="0" cellpadding="0"]
[tr valign="middle" bgcolor="#0000FF"]
[td colspan="5" height="21" align="center" class="textsmall"
[p align="right"][font face="Arial, Helvetica, sans-serif"
color="#0000FF" class="navbar"][a href="index.shtml"
: [a href="contactus.shtml" target="topFrame"]Contact
[frame name="mainFrame" src="http://www.homesdatabase.com/
[noframes][body bgcolor="#FFFFFF" text="#000000"]
Sidebar: (When you create the html code on your web page
not  as I have done for publishing purposes only).
4. FRAMESET ROWS="165,*" - refers to the amount of space
you want the
top frame to reveal in the frameset page (you can also use
5. The NOFRAMES tag - The [noframes tag] follows the
[frameset] tag, and
is used to specify content to be displayed if the user's
browser is unable to
Here's the final frameset page consisting of the 2 frames:
The main purpose of showing you the above example, was to
create a solution
in which a visitor can remain on the main site while
visiting and searching
around another web site. This will quickly and easily
return him to the original site.
You have now provided a GREAT navigation system.
Designing with Frames - An Introduction
Frames and Frame Usage Explained
Frames in HTML documents
101 Highly Effective
Strategies to Promote Your Web Site