Next, we are going to learn to make a navigation bar so that the
Web site becomes "navigable", and then we learn to present
point-wise information in the form of "Bulleted Lists".
A proper navigation is the backbone of your Web site's success
on the Net. If you want the visitors to be able to access all
the information you want them to be able to access, you got to
provide them with a consistent modus operandi for doing it. And
that modus operandi has to be present throughout the web site.
A navigation bar can be on the top, at the bottom, on the left,
on the right, or in the middle, in whichever way it suits the
look of your entire design.
The ideal is, either on the top, or on the left hand side.
What we generally do is, after inserting the logo etc. at the
top, we define a table of two columns.
<table width="100%" border="0" cellspacing="3"> <tr> <!-- Left
hand side navigation section --> <!-- This section generally
remains the same for the entire --> <!-- Web site. --> <td
width="20%" align="left" valign="top">
<!--#include file="leftnav.inc" -->
< d> <!-- Below is the portion that has content unique to the
particular <!-- page. --> <td width="80%" align="left"
valign="top>
< d> < r> < able>
The above portion should be saved as a template file, so that
you make the desired changes in the template, keep the common
code intact, and save the modified file as your own file.
Make ample use of the comment tag <!-- Comment… --> so that you
know where you are putting what, especially if you are working
with multiple table and column definitions.
"leftnav.inc" can be the included file that has the following
HTML code:
<a href="index.shtml">Home Page</a> <a href="profile.shtml">My
Profile</a> <a href="contact.shtml">Contact Me</a>
You can have as many links as the number of pages you want to be
seen
You don't need to use the Server Side Includes if your Web site
consists of merely 6-7 pages because then you can just keep on
copying and pasting the navigation bar code at:
<td width="20%" align="left" valign="top">
<!--#include file="leftnav.inc" -->
< d> in this way:
<td width="20%" align="left" valign="top">
<a href="index.shtml">Home Page</a> <a href="profile.shtml">My
Profile</a> <a href="contact.shtml">Contact Me</a>
< d>
For a live example, check out
http://www.hearthealthanalyzer.com, where I have used such a
navigation system using tables and the SSIs.
Bulleted Lists: If you have gone to
http://www.hearthealthanalyzer.com, you must have noticed there,
a list of benefits of the heart health analyzer. There is a
special tag used to achieve such a mesmeric feat. In fact, there
are two tags, namely, <ol> </ol> and <ul> </ul>.
<ul> is for a bulleted list, and <ol> is for a numbered list.
You do this in the following manner:
<p>We provide the following services:</p> <ul type="disk">
<li>Woodwork</li> <li>Oil Painting</li> <li>Furnishing</li>
<li>Fitting</li> </ul>
<li> </li> is for individual bulleted components.
The type attribute of <ul> tag decides what sort of bullet is
going to be visible. Generally, there is this disk, a circle,
and a square. You can define the <ul> tag in your Cascading
Style Sheet so that whenever you display the bulleted list, it
appears in the same manner.
About the author:
Amrit Hallan is a freelance web designer. For all web site
development and web promotion needs, you can get in touch with
him at http://www.bytesworth.com. For more such articles, visit
http://www.bytesworth.com/articles and
http://www.bytesworth.com/learn You can subscribe to his
newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks
by sending a blank email at Bytesworth-subscribe@topica.com
