Dreamweaver CS3: Navigation Menus

Should you use a JavaScript Navigation Bar or a Spry Menu Widget?

 

by Barbara Binder

 

Let's begin by saying that both the JavaScript navigation bars and Spry Menu Widget techniques can be used to create attractive, functional menu bar navigation systems.

 

Using menu commands built into Dreamweaver CS3, the creation process for either is both simple and straightforward. Of course, the code produced in the background is quite complex, but for those of you staying in Design view, who cares? The best part of Dreamweaver is that you get to produce very high-end coding with a point and click interface, and almost no typing-who doesn't love that?

 

So which one do you pick? I'd say go with the Spry Menu Widget, for one specific reason: we all want our Web pages to be picked up and indexed by search engines so that our sites will come up on a Web search. Search engines have a hard time with JavaScript-driven menus. Spry menus are just a fancy display of an unordered list, and so they are easy for the search engines to understand and index correctly.

For those of you spending time and money on Search Engine Optimization (SEO), this is a quick and easy way to get more bang for your buck. Here's how it works:

1. Place your cursor at the position where you would like to place your navigation bar
   
   
2. Choose Insert > Spry > Spry Menu Bar
   
   
3. Select a horizontal or vertical orientation
   
   
   
   
4. Click OK
   
   
5. Edit the navigation names directly on screen or, if you click on the blue Spry Menu Bar tab at the top right of the menu, you can edit in the Properties Inspector.
   
   You can add and delete menu levels, as well as edit the wording at any time.
   
   
   
   What was that about these being a fancy view of an unordered list? Click the Turn Styles Off button in the Properties Inspector and you'll see what I mean. You can edit the lists in this view as well.
   
   
   
   Wish they looked a bit prettier? After you click the Turn Styles On button to return to the menu view, edit the style with CSS.

Wow, functional navigation bars in just a few easy steps, and the links are accessible to the search engines. Pretty amazing.

 

Want more? Join our upcoming Introduction to Adobe Dreamweaver CS3 class on July 1-2, 2008. It will be held in a virtual classroom so you can attend this live, interactive class from anywhere in the country. All you need is a computer with fast internet access, a headset and a current version of the software. All virtual classes are led by a live instructor--this is not pre-recorded content. You will interact with me as I lead you through hand-on projects. You can ask all the questions you like. I hope to "meet" you in July! 

 

---

 

About the author: Barbara Binder is the president and founder of Rocky Mountain Training. Barbara has been a trainer for nearly two decades and was recently recognized by Adobe as one of the top trainers world-wide for 2007.