Web Design Training courses, videos & tutorials at DigitalFamily.com
Web design & Internet trends
books, videos, training & consulting
  • Home
  • Store
    • Web Design Books
    • Dreamweaver Videos
    • Expression Web Videos
    • Products
    • Shopping Cart
    • Order Status
  • Consulting Services
  • Web Tutorials
    • Web Design 101
    • Mobile and Responsive Web Design
    • Social Media
    • Online Reputation
    • Dreamweaver
    • Expression Web
    • Cascading Style Sheets
    • WordPress
  • Dreamweaver
    • CS6 Tutorials
    • CS5 Tutorials
    • CS4 Tutorials
    • CS3 Tutorials
  • FAQ
    • Dreamweaver
    • CSS
    • Graphics
    • WordPress
    • Ask the Author
  • About Us
    • About DigitalFamily.com
    • About Janine Warner
  • Contact
Search the site...
Home» Tutorials » Dreamweaver CS5 » How to use the Widget Browser in Dreamweaver CS5 & CS6 to Add Slideshows, Drop-down Menus, & More

How to use the Widget Browser in Dreamweaver CS5 & CS6 to Add Slideshows, Drop-down Menus, & More

Posted by Janine Warner - September 3, 2012 - Dreamweaver CS5, Dreamweaver CS6, Graphics, Tutorials
0

Adobe provides a marketplace where you can fine easy tools (some of them are even free) to add cool stuff like interactive slideshows to your website.

You’ll find a growing list of widgets on the Adobe Exchange site that you can use to create slideshows, drop-down menus, and other Interactive features. The Widget browser makes it easy to download widgets and add them to Dreamweaver so you can add powerful features to your websites. Most widgets are created in JQuery or AJAX and are designed to work well in a variety of web browsers.

1. Launch the Widget Browser from the Extend Dreamweaver drop-down list

To access the Widget Browser, select Widget Browser from the Extend Dreamweaver drop-down list, which is located at the top of the workspace just to the right of the Help menu on Windows

Mac Hint: It’s just below the Dreamweaver menu on a Mac.

2. Search for Widgets on the Adobe Exchange Website

To get to the Adobe Exchange website, launch the widget browser (see Step 1) and then click in the Adobe Exchange link at the top left of the Widget Browser window.

You can then view all of the widgets available on the Adobe Exchange website.

To download a widget, click to select it, you have to first login with your Adobe ID (if you don’t have an Adobe ID, you can create one for free).

3. You can Download Widgets and Use Them to Add Features to Dreamweaver

You can download widgets even over a slow Internet connection. Most widgets are small so they download quickly.

After a widget is downloaded to your hard drive, it opens in its own widget browser window automatically.

Click the Add to My Widgets link at the bottom right corner of this window to add the widget to your local widget browser where it becomes available in Dreamweaver.

Click the Go To My Widgets link to open the local widget browser and view the new widget in your local collection.

4. To Use the New Features in Your Pages, Choose Insert > Widget

You can insert any widget that you have added to the Widget Browser into a page in Dreamweaver by clicking the Widget button from the Insert panel.

You can also use the menu, Insert > Widget and then select the Widget name from the drop-down list.

 

5. Customize the New Features to Fit Your Design

Each widget is different, but most come with default images or other content in place. To make them your own, just replace those images with your  own content.

In this example, I replaced the default images that come with the ShadowBox Widget by changing the image references in the HTML code to reference images in my main images folder.

You can also edit the CSS to change colors, fonts, and other style options.

dwcs5, graphics

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Share with your friends

Dreamweaver Tutorials

  • Creating websites with Dreamweaver HTML templates (.dwt)
  • What’s the difference between a website & blog?
  • Tracking web traffic: Google Analytics vs other traffic counters
  • Review: What’s the Best Way to Add eCommerce Or a Shopping Cart to a Website?
  • How to Test a Website in Different Browsers: Internet Explorer, Firefox, Safari, Chrome

Popular books & videos

  • Dreamweaver CS6 Video

    DW-Video-250
    Designing for Multiple Screens with Fluid Grid Layouts
    Discover how to create web designs that look great on large and small screens. From smartphones to tablets to desktops, the new Fluid Grid Layout in version CS6 makes it easier than ever to set up media queries and design websites with HTML5 and CSS3. More Info »
    $49.99$39.99

    View Cart / Checkout
  • Dreamweaver CS5 Part 3: The New Features

    Dreamweaver-CS5-whats-new
    Training Video DVD
    Upgrading to CS5? Get just the training you need when you upgrade. This video covers the hottest new additions to Dreamweaver's toolset with a focus on how to put these great new features to work right away. More Info »
    $24.99

    View Cart / Checkout
  • Dreamweaver CS5 Crash Course

    Dreamweaver CS5 Crash Course Part 1
    Dreamweaver video DVD
    Dip into web design and learn Dreamweaver fast with this engaging video. More Info »
    $24.99

    View Cart / Checkout
  • Dreamweaver CS4 Essentials

    Dreamweaver CS4 Training Video
    Training Video DVD
    Janine's delightful sense of humor (and The Chocolate Game website) make learning web design with Dreamweaver CS4 more fun in this comprehensive 5-hour course. More Info »
    $39.99

    View Cart / Checkout
  • Dreamweaver CS3 Essentials

    Dreamweaver CS3 Training Video
    By Janine Warner Created with TotalTraining Janine’s patience and delightful sense of humor make learning web design with Dreamweaver CS3 fun. Learn everything you need to build websites with Dreamweaver in this comprehensive 8-hour course. You’ll get up to speed fast with the basics of setting up a site and creating your first web pages, More Info »
    $24.99

    View Cart / Checkout
© 2001 - 2013 All rights reserved. DigitalFamiliy.com was created by Janine Warner | Terms & Conditions of Use | Privacy Policy
  • Home
  • Store
  • Consulting Services
  • Web Tutorials
  • Dreamweaver
  • FAQ
  • About Us
  • Contact