Documentation

A. Installation and Registration

A.1 Installation

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

Install Dreamweaver Infographics 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.

DW Infographics - Insert Tabs


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 Infographics

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

DW Infographics - Insert Menu

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 Dreamweaver Infographics - Registration

In the trial mode, when you load the page into the browser you will get the following Javascript alert: "This page contains DW Infographics created with DW Infographics . 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. Insert DW Infographics

B.1 Overview

In order to add a DW Infographics, 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 Dreamweaver Infographics

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

DW Infographics - Editor

 

B.2 Skins

Inside the Skins area you can choose from the 20 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 so that you can see the effect created.
Also you can replay the animation anytime by clicking the "Replay Animation" button from the bottom left side of the Editor.

DW Infographics - Skins

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 infographic items.
Use the (+) and (-) buttons to add and remove items. The up and down arrows allow you to move the tabs order.

DW Infographics - Items List

In the right side of each tab item there is the icon that corresponds to it.
By clicking the folder icon the icon gallery opens.
You can remove an icon by clicking the correspondent ('x') button.

DW Infographics - Items

The Icon Gallery allows you to choose the icon that represents best the message that the tab item represents.
You have a search option that allows you to find a specific icon name and also you can choose to browse over a certain icon category.

DW Infographics - Font Awesome Icons

 

B.3.c Items Settings

From the Items Settings section you can change the label text and also define the items' values and colors.

DW Infographics - Item Settings

To change an item name, select it inside the list and change the text inside the Label input.

DW Infographics - Item Names

Define the item value and total value.
The value represents the part that the infographic item will show from a total number (or equivalent to a percent value from 100%).
The total value represents the total number of the infographic (or equivalent to 100%).
Therefore the value will always be less than equal or equal to the total value.

DW Infographics - Values

From this section you can define the label color and the item color.

DW Infographics - Colors

B.4 Settings

B.4.a Name

The Infographics default name is Infographics[number]. You can insert any name inside the field.

Important: The name should not contain spaces or special characters and can include only letters and numbers, with no space between them.

DW Infographics - Name

B.4.b Dimensions

Inside the Dimensions section you can:

- set the infographics container width - in px or percents;
- define the circle diameter;
- define the circle line size;

Insert Dreamweaver Smart Tabs

The Play when visible parameter defines at which percent of the browser window should the animation start playing.

DW Infographics - Play When Visible Effect

B.4.c Animation

Inside the Animation section you can:
- enable animation;
- set animation type;
- set item delay - this will make the items from your infographics to appear one after another at an interval of x milliseconds.

DW Infographics - Animation

 

B.4.d Media Queries

Inside the Media Queries section you can:
- enable the mobile view;
- set the mobile break point;
- enable tablet and set the tablet breakpoint.

DW Infographics - Media Queries

 

B.4.e Effects

Inside the Effects section you can:
- set the effect duration;
- set the easing type;

DW Infographics - Effects

 

B.4.d Typography

Inside the Typography section you can:
- set the font family of the number;
- set the number font size, weight, letter spacing and style (italic, underlined, capitalized, or lined through);
- add a web font.

DW Infographics - Number Text Options

 

You can set the same for the label text.

DW Infographics - Label Text Options

 

By clicking the ADD WEB FONT blue button the web fonts gallery opens and you can choose a that you want to add to the text.

DW Infographics - Add Web Font

C. Edit DW Infographics

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

DW Infographics - Edit

You can change the infographics animation, color, style settings. Note that you cannot edit the Infographics name.
Note: When you change the skin, the design and content of the current Infographics will be replaced with the settings from the new preset.
After finishing editing the tabs, click the Update button.

DW Infographics - Edit

D. Add Existing DW Infographics

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

DW Infographics - Edit

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


E. Delete DW Infographics

DW Infographics - Delete

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


F. Requirements

1. The extensions works on PC or MAC on the following Dreamweaver versions: CS4, CS5, CS5.5, CS6, CC.
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.

G. 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.