|
Search Engine Articles
Navigation 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 frame page?
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 utilize and design a frame
page. I will also provide you with advanced resources should you decide to
pursue frame web sites a little deeper.
What is a frame web site?
This is when you combine several html pages in one browser window.
Pros and Cons of frame web sites
Pros
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 good example: http://www.virginia-real-estate-homes.com/frameset.shtml. This
uses a small navigation frame at the top which remains the same while the main
pages from another site appear in the larger frame.
Cons
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 Cascading Style Sheets
(CSS).
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 information permanently 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 design:
http://www.virginia-real-estate-homes.com/frameset.shtml
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 navigation frame 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 files.
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 bar (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
extension).
Tip: Generally speaking, the files that make up frames within a frameset should
be descriptive of what frame they are (such as topframe.htm, bottomframe.htm,
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:
target="top"
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
[html] [head] [title]Prince William County, Virginia[/title] [frameset
rows="165,*" frameborder="NO" border="0"
framespacing="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" bgcolor="#F6BE29"] [div align="center"]
[p align="right"][font face="Arial, Helvetica, sans-serif"
size="3" color="#0000FF" class="navbar"][a href="index.shtml"
target="topFrame"] Home[/a] : [a href="contactus.shtml"
target="topFrame"]Contact Us[/a] [/font][/p] [/div] [/td] [/tr]
[/table] [frame name="mainFrame" src="http://www.homesdatabase.com/
lennharley/state/VA2963.shtml"] [/frameset] [noframes][body bgcolor="#FFFFFF"
text="#000000"]
[/body][/noframes] [/html]
Sidebar: (When you create the html code on your web page use <> 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 percentages).
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 display
frames.
Here's the final frameset page consisting of the 2 frames:
http://www.virginia-real-estate-homes.com/frameset.shtml
Final Note: 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.
Advanced Resources
Designing with Frames - An Introduction
Frames and Frame Usage Explained
Frames in HTML documents Subscribe FREE to Marketing Tips Newsletter
Receive your FREE trial download of this ebook for subscribing:
Name
Email
--------------------------------
NEW Ebook 101 Highly Effective Strategies to Promote Your Web Site
------------------------
Hosting from $30/year
----------------------------------
*********************************************************************
Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of http://www.iSiteBuild.com
Affordable Web Site Design and Low
Cost Web Hosting
Subscribe to his “Marketing Tips” newsletter for more original
articles. subscribe@isitebuild.com.
You can read more
of his in-depth articles at: http://www.isitebuild.com/articles
***********************************************************************
Article reproduced with kind permission from Hermna Drost
|
|
