How To Do Just About Everything
The Dreamweaver CS3 Spry Insert Panel displaying the Spry menu bar icon
Rate: (4 Ratings)
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.
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.
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.
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.
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.
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.
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.
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.
eHow Expert: Virginia DeBolt
How to Save a Page in Dreamweaver
By:
eHow Computers Editor
How to Create a Web Page With Dreamweaver
By:
eHow Internet Editor
How to Customize the Dreamweaver Favorites Insert Bar
By:
eHow Computers Editor
How to Add a Jump Menu With Dreamweaver
By:
eHow Internet Editor
Comments
Veesites said
on 4/11/2008 MarkfromOZ -- that URL didn't work. Try this:
http://redmelon.net/tstme/box_model/
Veesites said
on 4/11/2008 MarkfromOz said "thank you for your input, when i enter auto in the properties you suggested, the menu items shorten. As the main width is 955px, setting 136px for each menu item results in a gap of 3px at the right side end of my menu items. Could someone please correct me where i am going wrong or should i use a 3rd party menu builder to work in with my DreamweaverCS3 web software?"
I had the idea that you wanted each of the menu items to expand or contract to fit the size of the words that were there. Sorry, I guess I misunderstood. Width: auto would make each item size individually.
955 divided by 7 is 136.4. You may not be able to set the item width exactly for that, however, because you need take into account padding and borders. I don't see a how to about the box model at eHow (guess I should write one :) ), but you'll find an explanation here http://redmelon.net/tstme/box_m
MarkfromOz said
on 4/10/2008 thank you for your input, when i enter auto in the properties you suggested, the menu items shorten. As the main width is 955px, setting 136px for each menu item results in a gap of 3px at the right side end of my menu items. Could someone please correct me where i am going wrong or should i use a 3rd party menu builder to work in with my DreamweaverCS3 web software?
Veesites said
on 4/10/2008 linoz, Spry is the WYSIWYG tool Dreamweaver uses to automate some functions that use AJAX. You don't really learn AJAX using Dreamweaver to do this. It just gives you some help with certain things.
Here's the definition of AJAX:
Ajax (Asynchronous JavaScript and XML) is a method of building interactive applications for the Web that process user requests immediately. Ajax combines several programming tools including JavaScript, dynamic HTML (DHTML), Extensible Markup Language (XML), cascading style sheets (CSS), the Document Object Model (DOM), and the Microsoft object, XMLHttpRequest.
Veesites said
on 4/10/2008 MarkfromOz, The style selector to control the appearance is ul.MenuBarHorizontal a, and ul.MenuBarHorizonal a.MenuBarItemHover. The Dreamweaver style only comes with color and background color, but you are free to add any additional styles you want, such as background images or border lines. If you want varying widths on the menu items, set the width to auto.
The main width is set in ul.MenuBarHorizontal. The width of the pop ups is set in ul.MenuBarHorizontal ul li.