Web Design Articles:
1 2
|
Navigation and frames
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
|
|
