Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1
- open the "DWCarousel_[version-no].zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "DWCarousel_[version-no].mxp" file using Adobe Extension Manager;
- restart Dreamweaver.

Install Dreamweaver Reveal Effects using the Adobe Extension Manager

A.2 Where to find the extension in Dreamweaver


Extend Studio products are available in the "Insert" window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.
If the "Insert" window is displayed as Tabs, below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.

Insert DW Carousel for Dreamweaver


If the "Insert" window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the "Common" drop-down - marked with a down arrow.


Adobe Dreamweaver Insert Window - Dreamweaver Reveal Effects

The Extend Studio products should appear in the pop-up list.

Insert DW Carousel for Dreamweaver

A.3 Registration

A.3.1 How to register the extension

When you'll first start the extension, a registration pop-up will appear. Paste the code from the email that you have received from Extend Studio after buying the extension or click on "Use as trial" to use it free for 10 days.

Insert DW Carousel for Dreamweaver

In the trial mode, when you load the page into the browser you will get the following Javascript alert: "This page contains DW Carousel created with DW Carousel . Not for commercial use!".
After you register the extension, all you have to do is to edit one of the effects that were created with the trial mode and update it in order to remove the "Commercial use" Javascript alert.
After registering the extension, the "Commercial use" Javascript alert will not appear when you view the page in browser.

A.3.2 Registration Errors
The error messages could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.
301 : This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license - you would have to reset the license from the Extend Studio website - "My orders" section.
License Invalid: this implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.
If it still doesn't work, go to Account "My orders" section and from there you can obtain the correct license key.
If you need more assistance regarding registration, you can email us to support [at] extendstudio.com

B. Add a DW Carousel

B.1 Overview

In order to add a DW Carousel, you need to create a html page inside a site. If you don't know how to define a site in Dreamweaver, check this page for help: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

Insert DW Carousel for Dreamweaver

After clicking the "Add DW Carousel" button, the DW Carousel editor will appear.

Insert DW Carousel for Dreamweaver

 

B.2 Skins

Inside the Skins area you can choose from the 10 available skins. Here you can see a preview with each skin and the effects applied on it. All the changes that you make inside the editor are automatically applied inside the preview window, so that you can see the effect created.

Insert DW Carousel for Dreamweaver

Each skin has predefined settings that you can edit from the right sidebar.


B.3 Items

B.3.a Overview

Inside the Items section you can manage the carousel items.
Use the (+) and (-) buttons to add and remove items. The up and down arrows allow you to change the order.

Insert DW Carousel for Dreamweaver

 

B.4 Settings

B.4.a General Settings

 

Insert DW Carousel for Dreamweaver

Here you can:

- set the carousel width and height;
- select the items to show when the carousel is loaded;
- select the items to scroll when the user navigates through items;
- enable fade - this feature is usually used for carousels that have images - it creates a nice fade effect when the next item appears.
Also, you can enable fade only when you have 1 item to show;
- enable adapt to height - the content height is updated automatically when the items are changed and the item content differ;
- enable autoplay - this automatically plays the carousel when the page is loaded;
- select the autoplay speed;

Scroll down for more settings:

Insert DW Carousel for Dreamweaver

- enable pause on hover it stops the carousel when the user hovers it;
- enable infinite;
- enable center mode this feature will help you highlight the selected item;
- set the centered item scale and opacity;
Here is an example with a centered item:

Insert DW Carousel for Dreamweaver

B.4.b Tablet and mobile settings

 

Insert DW Carousel for Dreamweaver

Inside the Tablet and Mobile tabs you can:
- define the tablet and mobile break points;
- set the items to show for each viewport - tablet and mobile;

B.4.c Effects

 

Insert DW Carousel for Dreamweaver

Inside the Effects tab you can:
- choose the effect duration;
- select the easing type from the Easing dropdown.

 

B.5 Design

 

Insert DW Carousel for Dreamweaver

B.5.a Dots Section

From the Dots section you can edit dots design:

Insert DW Carousel for Dreamweaver

- enable/ disable dots;
- set the dots size;
- set the dots distance from bottom;
- select the dots color for all the 3 states -inactive (normal), hover and active;

Insert DW Carousel for Dreamweaver

B.5.b Arrows Section

Inside the Arrows section you can edit the arrows design:

Insert DW Carousel for Dreamweaver

- enable/ disable arrows;
- set the arrows size;
- select the arrows background color;
- change the icons, by clicking the folder icon to browse for another image from your computer.

 

B.5.c Background

Inside the Background section you can edit the background of the Carousel:
- change the content background: you can choose a solid color, a gradient or an image;
- set the background opacity.

Insert DW Carousel for Dreamweaver

- change the tabs box settings: set the margins, paddings borders and rounded corners;
- change the content text settings settings:
- font type;
- letter spacing;
- line height; - opacity: the Alpha property measured in percents;

B.5.d Box

Inside the Box section you can:

- change the tabs box settings: set the margins, paddings, borders and rounded corners;

Insert DW Carousel for Dreamweaver

C. Edit DW Carousel

In order to edit the DW Carousel you have to select it inside Dreamweaver.
Click on the "Edit Carousel" button to edit it.

Insert DW Carousel for Dreamweaver

After you finish changing the Carousel settings, click the "Update" button and the effect will be updated.
Note: When you change the preset, the content of the Carousel remains but the design settings will be replaced with the settings from the new preset.
After finishing editing the tabs, click the Update button.

Insert DW Carousel for Dreamweaver

D. Add Existing DW Carousel

The "Add Existing DW Carousel" function helps you insert an existing instance of Carousel on another page, so that you don't need to recreate it from scratch.
In order to add an existing instance of Carousel, you need to click inside the container where you want it to be added.

Insert DW Carousel for Dreamweaver

When you click the "Add Existing Carousel" button, a popup will appear where all the existing Carousel are listed (the existing instances that were added to the correspondent DW site). Choose the instance that you want to reinsert and click ok.

Insert DW Carousel for Dreamweaver

E. Delete DW Carousel

 

Insert DW Carousel for Dreamweaver

In order to delete a DW Carousel instance you have to select it inside the page and click the "Delete Carousel" button.

F. Changing the content

After adding the DW Carousel go back to the Dreamweaver design view to edit the content.

Insert DW Carousel for Dreamweaver

To switch between items click on the back / next arrows that appear in the top-left corner of the Carousel.


G. Requirements

1. The extensions works on PC or MAC on the following Dreamweaver versions: CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1.
2. The page where you use the form must have a HTML5 Doctype, because it has datatype attributes that are HTML5 specific. Click here for more information about the doctype and its importance.

H. FAQ

1. Can I use the license to add the extension in an unlimited number of websites?
Yes. This is an unlimited sites license, therefore you can use it for an unlimited number of websites.

2. Can I use the license to work on my both work and home computers?
We offer a secondary free license at the user's request. All you have to do is send an e-mail to support [at] extendstudio.com and ask for a secondary free license.

3. How can I move the extension to a new computer?
You will have to download the extension from your extend studio account and install it in on the new computer. Before registering, you will have have to reactivate the serial number by clicking the correspondent "Reset license" button from your account.