|
Starting from Scratch
Plan Ahead
It is recommended that before you seriously delve into
building a website, you have at least a rough idea of
how many pages your site will contain and what you are
going to have on them. Making a list similar to the
one on the right (nav view 1) is an example of a good
start on a navigation structure of a basic website.
An alternative would be to draw the structure out as
a flow chart or family tree (nav view 2).
Hyperlinks = Links
Different word, same meaning. Links
are places to click to move to another part of a
page, a different page in a site, or to a different
website.
|
Navigation of a website should be a no-brainer for
the site visitor. Although most of your visitors will
be quite intelligent and able to eventually work out
complicated navigation structures or the meaning of
obscure icons, it is best to shy away from those things,
especially if your site is representing a business.
Business site visitors are looking for clearly presented
information. They are not there to play. If they cannot
easily and quickly move around in your site, they will
go elsewhere. As you plan the design of your site here
are some things to keep in mind:
A. Navigation should
appear in the same place, in the same order, on all
pages.
B.
Top level navigation should appear on every page.
It is inappropriate to force a site visitor to "back"
off a page using the back button of their browser. They
should have the feeling of moving forward in the site.
Top level navigation in the view 1 list would be for
the Home, About Us, Products, and Contact Us pages.
C. Secondary navigation
should also appear in the same place on every page,
even though its content may change from page to page.
For instance, in the nav view 1 list, secondary navigation
on the About Us pages would be Officers and Associates.
Secondary navigation for the Products pages would be
Airplanes, Boats, and Cars.
|
Relative links = Links within your website
These will have urls such as: about.htm.
Absolute links = Links to other websites
These will have urls such as: http://www.theirsite.com/.
Navigation bar = Nav bar = Menu
All the same thing.
|
D. You will probably
need navigation in more than one place on your pages.
It is important to have navigation near the top of each
page, either across the top, above the body of the page
somewhere, or in a column along one of the sides. If
your pages are longer than one screen height, you should
also include navigation at the bottom of the page. Often
this appears as rows of text links. Finally, the body
of your site will likely contain links within the text
to other pages on your site and possibly to websites
other than your own.
Consider Your Options
Navigational links can take on all kinds of appearances
from the humble text link to the button that does so
many tricks you wonder, "How'd they do that?"
Here are some of your options:
A. Text Links
Text links will almost always be the type of link you
use in the body of your website because they are simply
glorified text that work right in with their surrounding
textual content. They should be made a different color
so they will stand out. However, don't overlook them
as very good options for your main nav bar. Text links
load very quickly. They are easy to understand at a
quick glance. They can be made to change color in most
browsers as a cursor hovers over them, with CSS (Cascading
Style Sheets) applied. Search engines are able to follow
them with no difficulty. In fact, a textual top level
nav bar should appear somewhere on each page. If you
don't use one near the top of your page, you should
at least use one at the bottom.
B. JavaScript /
DHTML
If text just doesn't do it for you and you wish to
add a little pizazz to your navigation bar, JavaScript
is
the power of choice. JavaScript loads quickly and there
are various scripts that can accomplish different things
such as rollovers (graphics that seem to change appearance
as a cursor hovers over them), drop down menus, pull
down menus, etc. Dreamweaver and FrontPage, as well
as some graphics programs have mechanisms that will
write limited JavaScripts for navigational purposes.
We will discuss Dreamweaver and Frontpage later. There
are online generators that will produce JavaScripts
to be placed into your site, and there are websites
dedicated to providing free JavaScripts as well as
those
selling scripts. Be sure to take note whether or not
the script you like is cross-browser compatible. Some
are not. DHTML is a mixture of JavaScript and CSS.
Again,
be sure if you use a DHTML menu that it is cross-browser
compatible.
Java
and JavaScript are not the same thing.
JavaScript is a (usually) quick-loading client-side
script. Java is a full-blown programming language.
Ever play a Yahoo game? Those are mini-Java applications
called Applets. Java requires a good amount of available
RAM on one's computer and is generally slow-loading. |
C. Java
There are some very impressive-looking (and expensive)
Java Menus available for purchase online. They are sure
to wow your audience....IF your audience happens to
have a fast Internet connection. Besides the drawback
of being slow to download, Java menus are sometimes
blocked by firewalls and search engines cannot follow
their links. They are also notoriously difficult to
modify.
D. Flash / Swish
To Flash or not to Flash? Like Java, there are some
really smart-looking Flash navigation menus, and even
entire sites, online. Is Flash for you? The first thing
to consider are the general drawbacks, also similar
to Java. They can be blocked by firewalls and search
engines cannot follow their links. They can be slow
to download. However, you must also consider your audience
and the purpose of your site. If the above drawbacks
will not affect your viewers, and you wish to give it
a shot, go for it.
Lay Your Foundation
Once you have the tools and information gathered for
your navigation system, you can progress with the design
of your website. It's a good practice to draw your site
design on a sheet of paper. Be sure to use tables
and plan for cells to hold your nav bars. Utilizing
Dreamweaver templates or libraries, or FrontPage include
pages is recommended. By using these components, if
you make a change to your nav bar as you are building
your site, or in the future as your site grows and changes,
the update will only take place in one location but
appear throughout the site.
Build or Change Your Navigation Menu
Because Dreamweaver and FrontPage differ in their navigational
options and techniques, we will approach them separately.
- Dreamweaver Navigation
Bar Tutorial
- FrontPage Navigation Tutorial
|
