Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Adding a Widget to My Widget

  • We are going to download a widget and add it into the My Widgets area in the widget browser
  • We will be installing the Flex Slider, which will allow us to add a slideshow on our homepage of images from various destinations around the world to get people excited about travel
  • When you are deciding on a widget to use for your website, be sure to read the documentation about what is required in order to use the widget
  • To get started, you need to open the widget browser on your system, this will be located in the applications folder on the Mac, or the programs folder on the PC
  • I am on Windows 7, so I will do a search for it to open it
    • Once the Widget browser is open, you should see a listing of the various widgets that are available
    • Click on the FlexSlider widget to open it, and click add to my widgets in the lower right corner to Add this widget to the My Widgets area within the Widget Browser
    • Click the My Widgets link in the upper middle section & you should see the FlexSlider in the list
    • Click on the flex slider & you will see what this widget will do, there is a demo of the widget
    • Usually these widgets can be set up in a couple of different ways, not the developer presets in the left column
    • Choose Carousel 7 and you will see the images set up in a different way
    • Each widget has its own set of configurations and defaults to choose from
    • Once a widget is located in the My Widgets area, you can use it

Adding a Widget to My Widget

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Download Widget through Widget Browser 0:05
    • Installing the FlexSlider Widget
    • My Widgets Area
    • Save Widget Files
  • Preview Widget in Browser 5:19
  • Summary 6:17

Transcription: Adding a Widget to My Widget

We are now going to download a widget from the Adobe Exchange and, using our Widget Browser, we are going to get that set up within our Widget Browser.0000

So, we are going to move it from the Adobe Exchange into My Widgets, so I have it accessible for my web pages.0012

How do I go about doing that?0020

Well, first of all, you have to have the Widget Browser downloaded and installed on your system; and I explained how to do that in another lesson, so my assumption here is you have the Widget Browser available on your system.0022

I have also signed into the Adobe Exchange; you can see, here is my Sign Out button; so I have logged in using my Adobe ID.0038

Now, if you want access to these extra features or these extra widgets from Adobe, you do have to get an Adobe ID from the Exchange for this particular feature; I just want to state that up front.0047

But I have opened the Widget Browser; I am in the Adobe Exchange; and I have decided which widget I want to install.0063

I am going to use this FlexSlider; it is a jQuery slider plugin; so that is the widget I want to install.0073

How do I go about doing that?--well, I'll go ahead and click on the FlexSlider; it moves me into that specific widget's information.0081

Now, notice: it says, "Add this widget to My Widgets if you want to configure it or have access to it in Dreamweaver," and that is kind of the cool feature here: we can work with it directly within Dreamweaver.0092

That is the FlexSlider itself; now, I can preview it over here; so I'll give you an idea of what it is we are going to be working in.0108

Here is the demo and documentation; I would need to click that--let me click on Carousel instead.0119

This is one of the ways you can use this FlexSlider: you can see, you can click the arrows over here, or you can select it down here; that is the Carousel.0126

This other method is the thumbnail navigation method, where you have thumbnails at the bottom that you can choose, and what it does is show you the image larger up above.0138

Don't those look good and make you hungry?--a doughnut on top of your cupcake; there you go.0152

I am going to go ahead and select default here; and what I need to do is click this button in the bottom right corner, Add to My Widgets.0158

What that is going to do is take everything involved with this FlexSlider and pull it down to my system; that is Step 1--so, I'll click Add to My Widgets.0170

Now, this is the license for the widget; you can see, it's not too exciting; so I will click Accept...every widget has a license.0182

Now, it added it to My Widgets; now notice what it says: "The widget has been added to Dreamweaver. To insert it, select Widgets from the Insert menu or the Insert panel."0192

Now, you can also go to My Widgets, select the widget you want, drag it from the Widget Browser, and drop it onto your page; so you can see how this Widget Browser piece and these widgets have a hook within Dreamweaver, which makes it really easy for you to add these.0207

What I am going to do is go to My Widgets; I'll go ahead and click on that; you can see, I am now in the My Widgets area on my system.0225

And as you can see, I have downloaded all of these various widgets; they are on my system and available to me to use.0236

I can use any one of these really easily from directly within Dreamweaver; and this little note up here kind of fills you in on what to do that way.0245

That is how I can go ahead and work with my widgets.0257

Now, if I want to use it, I'll click on my widget; and notice, it says "Save Widget Files"; so I am going to save all of the files for this widget into a folder within my website.0261

I'll click Save Widget; on my C drive, I will scroll out to where Wanderlust Travel website is located; and I am going to create a new folder here to contain everything for this widget.0278

It is always a good idea to do that so we can find these files easily.0293

This one is known as the FlexSlider; I normally just create a new folder for that widget and name it the same thing.0300

I'll go ahead and select that folder; and when I do, all of those files are going to download into that folder.0310

It gives me a listing of where it's located; I'll click the Preview button, and it should go out, and here is that file.0320

Notice, this is located in my Wanderlust Travel website; so I am now on my system, in my site files.0330

You can see this image is fairly large; but what it is going to do is rotate every so often--it has given me the default options, which you can see; and I do have the little circles down here, so I can get to another image.0338

I am purposely making you very hungry right now; and look at that one...0356

Anyway, the FlexSlider comes with this default HTML file, so when you hit Preview, it is going to show you that particular feature on your system, just like it did within that widget area.0361

That is how you can download and install a widget from the widget browser; you need to download the files onto your system before you can actually use them.0378

What we did was: we just downloaded the FlexSlider widget and all of the files for that, so we can use it within our website and within Dreamweaver.0390