dreamweaver templates | responsive designs | frontpage templates | expression web templates | wordpress templates | css templates | website templates

Home > Help files >> Navigation tutorial

Naviagtion tutorial

General Information

- Dreamweaver Navigation Bar Tutorial
- FrontPage Navigation Tutorial

The navigation of, or ability to move around in your website is one of the most vital aspects of it. It is well worth your time to plan and design it carefully.


Starting from Scratch

Note 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).

note 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

My Website

1. Home
2. About Us
a. Officers
b. Associates
3. Products
  a. Airplanes
  b. Boats
  c. Cars

Contact Us

nav view 1


Navigation structure
nav view 2


Frontpage CSS Templates

New section with 100% CSS based XHTML valid Frontpage templates.

Microsoft Expression Web Templates

New section containing templates Microsoft's new Expression Web program.

Dreamweaver CSS Templates

New section with 100% CSS based XHTML valid Dreamweaver templates.

Microsoft Expression Web Templates

New section containing templates Microsoft's new Expression Web program.

Website Templates

We now have a selection of website templates with full PSD source files.

CSS Templates

New range of 100% CSS layouts and XHTML compatible.

read more

Check out our reseller program and earn 20% commission on all templates sold through your site - that's over $30 per sale for our ecommerce plus templates.

read more

Affiliate program
5% discount promo

Find us on Twitter

Follow us on twitter

We accept credit card and Paypal paymentsFind us on FacebookFollow us on twitterJoin us on Linkedin

Frontpage Templates | Dreamweaver Templates |  Website Templates |  Expression Web Templates
License + Terms | Privacy Policy | Contact us | Help | Shopping Cart

© 2001 - 2024 The Template Store - All Rights Reserved
Shopping cart software by ecommercetemplates.com