Loading...

Knowledge Base
Save up to  70% off.  Start your website today!
Home 
 
/
 Using the Widget Browser - Dreamweaver CS5.5
Categories: Dreamweaver

Using the Widget Browser - Dreamweaver CS5.5

Add site functionality with ease by using the new Widget Browser. Set up and install the Widget Browser, explore Adobe Exchange, Adobe's new community-based online resource for widgets, and see a sample integration of a slideshow widget.
Widgets available in the Widget Browser are combos of CSS, HTML, and JavaScript, providing an advanced user interface controls like sliding panels, accordion widgets, or complex components lightboxes or slideshows. 

Access the Widget Browser

To access the widget browser:

  1. Go to the Application toolbar.
  2. Find the Widget menu.
  3. Choose Widget Browser.

There will be a prompt to download the browser. This browser is a separate Adobe Air application that you can install with or without Dreamweaver.

Note: To install the Widget Browser, an Adobe ID is required. To obtain an Adobe ID, users can go to the Adobe website or go through the installation process to create the ID.

Package Widgets

Once you installed the Widget Browser, users can then browse Adobe Exchange to see the available widgets. Widgets can also be packaged and shared with other users.

To package widgets:

  1. In the Widget Browser, click Options.
  2. Choose Enable Widget Projects.
  3. Select Widget Projects.

Widgets can then be packaged and uploaded to the Exchange!

Adding Widgets from Adobe Exchange

To add a widget to My Widgets from Adobe Exchange:

  1. In the Widget Browser, go to Adobe Exchange.
  2. Click on the desired widget. A pop-up box will prompt you for your Adobe ID.
  3. Once logged in, the selected widget will be downloaded and added to My Widgets.
    • In My Widgets, you will see the ratings, number of downloads, and license information for the widget.
  4. Click Preview in the top right corner to preview how the widget works and the code involved in creating the widget.
  5. Click Add to My Widgets in the bottom right corner.
  6. There will be prompt to agree to the licensing of the Widget. Click, I Agree to continue.
  7. Click Go to My Widgets.

Setting and Reviewing Widget Presets

To adjust widget presets:

  1. Under My Widgets, click on the desired widget to open and view the various presets.
  2. To create personal presets for the widget, click Configure. You will then be able to toggle various settings for the widget.
  3. Click Save Preset when finished.

Embedding a Widget

Non-Dreamweaver users can click Save Widget Files in My Widgets of the Widget Browser to save all JavaScript, CSS, and HTML to separate files, which can then be integrated into a site.

To embed a widget on a web page:

  1. Click onto the page to insert the cursor where the widget is to be placed.
  2. Go to the Insert panel.
  3. In the Common category, select the Widget icon. A widget pop-up menu will appear.
  4. In the Widget menu, select a widget and preset.
  5. Click OK.

The widget will be added to the page.

Widget Coding

To evaluate the coding of a widget:

  1. Go to Code View.
  2. Locate the widget code by the widget name. You can then make the desired edits to the page.
  3. Once changes are complete, go to File > Save to save your work.
  4. There will be a prompt with the option to copy dependent files. These files are often external JavaScript, HTML, or CSS that assist in the widgets' overall functionality on the page. Click OK.
Dreamweaver is a popular program for creating websites and applications from Adobe. It supports HTML5, CSS3, PHP, FTP, jQuery, and more, and works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the Dreamweaver Tutorials learning portal.
Did you find this article helpful?

 
* Your feedback is too short

Loading...