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!

Obtaining the FlexSlider Widget Files

  • Open the Widget Browser to the My Widgets area
  • Be sure the FlexSlider widget has been added and opened
  • Click the Save Widget Files button to download all the code files needed in order to create this on your website
    • Create a new folder in your site root called flex slider and download the files into this area
  • Each widget is a bit different, so be sure to look them over before you download them
  • It is always best to put the widget files into their own folder as there are usually quite a few of them

Obtaining the FlexSlider Widget Files

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
  • Working with a Widget 0:25
    • Configure a Widget
    • Save Widget Modifications as Presets
    • Import/Export Widget Presets
  • Widget Files in Files Panel 4:51
  • Summary 6:10

Transcription: Obtaining the FlexSlider Widget Files

We are now going to take a look at working with a specific widget from the Adobe Widget Browser; and as you can see, I am in the FlexSlider widget.0000

What I have done is: I have installed the Widget Browser; I have also included that widget as one of My Widgets within the Widget Browser; so that is right where I am.0012

Once I have added it to My Widgets, I can do a couple of things: I can use the Import Widget down in the bottom right corner, and what that does is download a complete .zip file of all of the files that I need in order to use this widget.0025

That is one way to work with the widget.0043

The other method is to click on the widget; and I can click Save the Widget Files--that is what I did previously; so all of my widget files are located in a specific directory that I assigned.0046

I tend to prefer this approach, because it puts them into a folder; sometimes, depending upon how you use these widgets, you can have scattered files through your root folder, and then you aren't quite sure which files go with the widget and which don't.0061

That is why I like to put them into a .zip file and keep them there (so I always have the originals), or I just download them using the Save Widget Files here, and I specify a folder for all those files to go into.0077

But I want to show you a different method, because this allows you to configure the widget before you use it.0094

Right now, I am in the Developer presets for this widget; but what I can do is take a look at those presets and modify them.0102

So, if I click Configure--the Configure button down at the bottom--what it does is move me into the Settings area for the widget itself.0111

Now, what that is going to do is allow me to modify these things; you can see, instead of fading in and out, I can slide in and out; I can slide (if I choose that) horizontally or vertically.0122

And you can see, these cupcakes are a little distracting; so I'm going to move into the Code View.0136

You can also change the speed, the animation speed; there are quite a few different settings here--this one even allows users to scroll using a mouse wheel, if their mouse has a wheel on it.0142

So, quite a few different ways to work with this: just go down the specific settings and modify as you need.0157

Now, if you have decided you do a lot of modifications, what you are going to want to do is save those as presets; so I am going to say, "Canvas Preset."0165

In other words, let's assume I have modified a whole bunch of settings within this particular widget: I could add a description here of what I have changed within the widget so I understand what the differences are.0178

I'll skip that, so you don't have to watch me sit and type; and I'm going to click Save Preset.0192

Now you can see, within my presets, I have created my own; and that allows me to save those so I can use those with my widget.0200

Now, notice: there is an Import or Export feature here; if I click on Import, you will see what happens--it allows me to choose a preset widget file.0210

So, this area here is really just referencing modifying the settings of the widget, using this little thing, and being able to export that Presets file; in other words, those are the settings for the widget.0225

I tend to go about it a little bit differently; but when you are first working with a widget, it might be easier to use the Preset feature; so I wanted to show that to you.0241

Now, if I click the Export feature, what that is going to do is take my presets and save them into an XML file, and I can add them to this new folder that I created when I downloaded all the files.0251

I'll go ahead and save; what that does is allow me to save these--every time I open My Widgets, I have this preset available as an XML file storing my information.0266

That doesn't really affect how I am going to use the widget; I still need to save the files in some manner, and I have already done that piece.0281

If I close this up (that was the Widget Browser), what I have done is opened up, within the FlexSlider folder where I have downloaded those files--I have this one here, which is an HTML file.0291

Basically, this is the page that shows me how to work with the widget.0305

Now, if you notice, I also have my presets right here set up as the XML file; that was that extra file I just created and configured.0311

The idea now is to begin to replace the information within this widget with my own images and work with it the way I want.0322

I will show that to you in another lesson.0334

We can go ahead and use this file to work with it and create it, so that it doesn't have any additional information on the page; so everything you look at, you know is associated with this particular widget.0337

This is a good way to start working with these widgets; there are a lot of features in these; these are a bit more of an advanced feature.0351

You can see, there are all of these Javascript and CSS files that are being pulled in to create this widget feature.0359

We will look at that in another lesson; I just wanted to show you a few things about the Preset pieces within some of these widgets, and also make you aware that there is an HTML file for this specific widget.0367

And what I need to do is go out and modify this, because if I preview this default HTML file, you can see, it looks identical to their file.0382

What I am going to do is customize it so I can have my images inside of here and use it as my page; I also don't need this hyperlink up at the top.0394

We'll take a look at how to customize this FlexSlider default HTML file in another lesson.0406

But that is how to configure and check for some of the presets within some of these widgets within the Widget Browser, and also show you that the widget does provide you with a page to use as a base for using the widget files.0414

That is the FlexSlider presets and where the HTML file is located that I am going to customize in order to make this widget my own, within Dreamweaver.0431