How to Use Dreamweaver CS 3 Spry Menu Bars
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.
- Difficulty:
- Moderate
Instructions
-
-
1
The menu bar can be put in the sidebar on the left.
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.
-
2
Decide whether to use a horizontal or vertical menu.
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.
-
3
The basic menu bar on the Dreamweaver document window
The menu bar appears in your specified location. It uses dummy text like Link 1 and Link 2 which you can customize.
-
4
Use the Property inspector to customize the links.
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.
-
5
The uncustomized menu in a browser
You can preview the menu in the browser to see how the menu works and to check the color scheme.
-
6
The menu HTML is just a list.
Look at the Code View in Dreamweaver and you'll see that the menu is a list styled for the browser with CSS.
-
7
Change any appearance rules for the menu bar using the CSS panel
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.
-
8
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.
-
1
Related Searches
Resources
Comments
-
Great!^^
-
alonsokari1
Nov 06, 2008
In dreamweaver 8 I was able to create a drop down menu using the behaviors tool. I cannot figure out for the life of me, how to do the same in this version. All I want to do is to be able to move over the About Us tab, and have a menu appear...Anybody?
-
alonsokari1
Nov 06, 2008
In dreamweaver 8 I was able to create a drop down menu using the behaviors tool. I cannot figure out for the life of me, how to do the same in this version. All I want to do is to be able to move over the About Us tab, and have a menu appear...Anybody?
-
alonsokari1
Nov 06, 2008
In dreamweaver 8 I was able to create a drop down menu using the behaviors tool. I cannot figure out for the life of me, how to do the same in this version. All I want to do is to be able to move over the About Us tab, and have a menu appear...Anybody?
-
alonsokari1
Nov 06, 2008
In dreamweaver 8 I was able to create a drop down menu using the behaviors tool. I cannot figure out for the life of me, how to do the same in this version. All I want to do is to be able to move over the About Us tab, and have a menu appear...Anybody?
