IT tutorials
 
Graphics
 

Dreamweaver CS5 : Create a Drop-Down Menu

10/8/2011 9:33:41 AM
- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
You can create many interactive features using Dreamweaver's Spry widgets. One of the most popular is a drop-down menu, which makes it possible to include a drop-down list of links in a navigation bar.

Create a Drop-Down Menu

Note: If the Insert panel is not open, click Window and then click Insert to open it.

1. Click to place your cursor where you want to add the menu.

2. Click .

3. Click Spry.



The Spry Insert panel appears.

4. Click Spry Menu Bar.

The Spry Menu Bar dialog box appears.

5. Click Horizontal ( changes to ).

6. Click OK.



A Spry menu bar appears in the workspace.

7. Click the blue Spry menu bar.



The menu bar properties appear in the Properties inspector.

8. Click Item 1.

9. Type a name for the menu item in the Text field.

10. Press ().

  • The name appears in the workspace and in the Properties inspector.

11. Click Item 1.1.





What are Spry widgets?

Spry widgets are a set of features designed to make it easy to add a variety of complex features to your Web pages. When you use Spry, you are adding Ajax, which is a combination of XML and JavaScript that can be styled using CSS. Think of a widget as a special feature that is more advanced than most dialog boxes and other features in Dreamweaver. With widgets, you can create complex features, such as drop-down menus, collapsible panels, tabbed panels, and more.




Using the Properties inspector, you can enter names for all the items and subitems in the Spry menu bar.

You can also add or remove items and subitems.



12. Type a name in the Text field.

13. Press ().

  • The name appears in the workspace and in the Properties inspector.

14. Repeat steps 11 to 13 for the other subitems of Item 1.



15. Repeat steps 8 to 14, replacing all the item and subitem names with the text for your navigation menu.

16. Click to add an item or subitem.



  • A new item or subitem appears in the Properties inspector and the workspace.

  • You can click to remove any selected item or subitem.

17. Click any menu item or subitem that you want to turn into a link.

18. Type the URL in the Link field.

19. Press ().

  • You can click to browse to find any page in your site and set the link.



    The item or subitem is linked, and the URL appears in the Link field in the Properties inspector when it is selected.

20. Click File and then click Save.

The page is saved, and Dreamweaver automatically creates a collection of special files that make the drop-down menu work.

Note: These files are saved in a folder named Spry that Dreamweaver creates in your local root folder. This folder must be uploaded to your Web server when you publish your site for the drop-down menu to work. Do not change the name or move the location of this folder.


What are Spry validation widgets?

The Spry validation widgets are designed to work with Web forms to add validation features, such as confirmation that a check box has been selected or that a password has been entered properly.



Can I add more widgets and extensions to Dreamweaver?

Yes. Adobe hosts a Developer's section on its Web site where programmers can offer widgets and other add-ons for Dreamweaver. Some widgets are free; others cost money. You can learn more about widgets and extensions and download add-ons for Dreamweaver at www.adobe.com/devnet/dreamweaver/.


 
Others
 
- Dreamweaver CS5 : Introducing Spry and Behaviors
- Getting Started with Photoshop CS5 : Working with Smart Objects
- Getting Started with Photoshop CS5 : Importing Raw Data from a Digital Camera
- Adobe InDesign CS5 : Arranging Document Windows & Changing Screen Modes
- Adobe InDesign CS5 : Customizing Your Workspace & Working with the Tools Panel
- Adobe InDesign CS5 : Managing Windows and Panels - Panel Controls & Organizing Panels
- Working with Illustrator CS5 Interface (part 2) - Using the panels
- Working with Illustrator CS5 Interface (part 1) - Working in the document window & Tools panel
- What is New in Illustrator CS5 ? (part 2)
- Dreamweaver CS5.5 : The Dreamweaver Test Drive (part 5)
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS