Find out how to add an animated nav bar to your site using the popular Web design program.

Page 1  2
On today's show I'll demonstrate how easy it is to create a professional-looking navigation bar with Dreamweaver MX.

What is Dreamweaver MX?

Dreamweaver MX is the latest version of Macromedia's Web design program. Over 2 million people use Dreamweaver to design and develop websites, from beginners putting up pictures of their cats to professionals coding dynamic database-backed Web applications.

What is a navigation bar?

A navigation bar (also called a "nav bar") is a strip of clickable buttons running horizontally near the top of a webpage or vertically down the side (usually the left side). Navigation bars are appealing, easy-to-use user-interface aids to help people get around your website.

A button in a nav bar is called a rollover if animation take place when you point your mouse at the button or click the button. These buttons appear to "roll over" when the original graphic is swapped out for a different one, creating a simple animation.

Coding rollovers, buttons, and navigation bars by hand can take a long time, requiring many lines of markup or JavaScript code that then has to be debugged and checked for typos. Dreamweaver makes it a cinch to pull together a dynamic navigation bar in a matter of minutes.

Overview

There are two main steps to creating a nav bar:

  1. Create the graphics used for each state of each button (using your favorite graphics program).
  2. Construct the nav bar in Dreamweaver.


Read on to find out about each step.


Page 1  2