How to Use Dreamweaver CS 3 Spry Menu Bars

Save

Dreamweaver CS3 came equipped with new functions labeled Spry, which are a WYSIWYG way to add AJAX to a web page. They automatically provide you with HTML, CSS and JavaScripts to perform certain interactive functions. In this article, you'll learn how to use the Spry menu bar widget.

Things You'll Need

  • Adobe Dreamweaver CS3 software
  • You probably already have a site started and know what links you need in your menu. The examples here use a basic built-in Dreamweaver CSS layout page. If you use a two-column layout like those shown in the image, you would want the menu bar in the sidebar on the left.

  • Position the cursor where you want the menu bar to go. Then click the menu bar icon on the Spry insert bar. A dialog opens asking whether to make the menu horizontal or vertical.

  • The menu bar appears in your specified location. It uses dummy text like Link 1 and Link 2 which you can customize.

  • While the menu bar is selected in the document window (see image in Step 3 where the highlighted blue indicates the menu bar is selected), you can change properties using the Property inspector. By highlighting the various Items in the menu bar, you can change the text, move Items up and down in the order they appear, add more links or remove unneeded links.

  • You can preview the menu in the browser to see how the menu works and to check the color scheme.

  • Look at the Code View in Dreamweaver and you'll see that the menu is a list styled for the browser with CSS.

  • A new stylesheet for the Spry widget was added to your site when you added the widget. To change the color scheme or any other appearance rules, go to the CSS panel and modify any colors, sizes or styles that don't match your site. Find the style you want to change and click the pencil icon to edit the style. Make any changes you want and Click OK.

  • When you are finished customizing the menu bar, remember to upload all the HTML, CSS and JavaScript that Dreamweaver generated for the Spry widget to the server.

Promoted By Zergnet

Comments

Resources

You May Also Like

  • What Is a Spry Menu?

    Adobe first introduced Spry in Dreamweaver CS3. Spry provides a means for novice web page developers to produce highly technical menus for...

  • How to Center a Spry Menu Bar

    Adobe Dreamweaver's Spry capabilities make it possible to add Ajax-powered web elements with just a few clicks of the mouse. The standard...

  • How to Use Spry Effects in Dreamweaver CS3

    Spry Effects were added to the available Dreamweaver behaviors in the CS3 version. They create visual effects such as highlighting particular parts...

  • How to Create a Menu in Dreamweaver 8

    How to Create a Menu in Dreamweaver 8. ... How to Use Dreamweaver CS 3 Spry Menu Bars. Dreamweaver CS3 came equipped...

Read Article

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!