Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CS6, CC
- open the "SmartTabs_[version-no].zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "SmartTabs_[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 Dreamweaver Smart 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 Reveal Effects

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

Insert Dreamweaver Smart Tabs

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 Smart Tabs

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

B.1 Overview

In order to add a DW Smart Tabs, 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 Smart Tabs

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

Insert Dreamweaver Smart Tabs

 

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.

Insert Dreamweaver Smart Tabs

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


B.3 Tab Items

B.3.a Overview

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

Insert Dreamweaver Smart Tabs

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.

Insert Dreamweaver Smart Tabs

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.

Insert Dreamweaver Smart Tabs

 

B.4 Settings

B.4.a Name

The Smart Tabs default name is SmartTabs[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.

Insert Dreamweaver Smart Tabs

B.4.b Dimensions

Inside the Dimensions tab you can:

- set the tab width and height;
- the tab area width and height;
- the content area height;
- enable adapt to content size - the content height is updated automatically when the tabs are changed and the tabs content differ;
- set the mobile break point - set the max-width of the rendering surface of the output device (mobile);
- enable the mobile friendly feature - this automatically makes the tabs responsive and the swipe gestures will activate;

Insert Dreamweaver Smart Tabs

B.4.c Effects

Inside the Effects tab you can:
- choose to change the tab on click on on mouseover;
- choose the effect that plays when the tab is changed;
- choose the effect duration;
- choose the effect that plays when the height of the tab content is automatically changed - this is available for tabs with different content that imply different height.

Insert Dreamweaver Smart Tabs

 

B.5 Design

B.5.a Tab Area

The Design tab allows you to edit the tabs style appearance: colors, margins, paddings and text settings.

Insert Dreamweaver Smart Tabs

Inside the Tab area section you can edit the style of the tab area - the container that holds the tab items:
- change the tab area background: you can choose a solid color, a gradient or an image;

Insert Dreamweaver Smart Tabs

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

Insert Dreamweaver Smart Tabs

B.5.b Tabs

Inside the Tabs section you can edit the settings of the tab items:
- add a different style for each state - normal, hover and active;
- change the tabs background: you can choose a solid color, a gradient or an image;

Insert Dreamweaver Smart Tabs

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

Insert Dreamweaver Smart Tabs

- change the tabs text settings settings:
- font type;
- letter spacing;
- line height;
- opacity: the Alpha property measured in percents;
- add web font;

Insert Dreamweaver Smart Tabs

- change the icons settings:
- icon color;
- icon opacity; the Alpha property measured in percents;
- icon size;
- icon position - you can place it in the left side or right side of the text ;
- distance from the text;

Insert Dreamweaver Smart Tabs

 

B.5.c Content Area

Inside the Content section you can edit the style of the tab content - the container that holds the title, text and other information that you add inside the tab content:
- change the content background: you can choose a solid color, a gradient or an image;

Insert Dreamweaver Smart Tabs

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

Insert Dreamweaver Smart Tabs

- change the content text settings settings:
- font type;
- letter spacing;
- line height; - opacity: the Alpha property measured in percents;

Insert Dreamweaver Smart Tabs

- add web font;

Insert Dreamweaver Smart Tabs

The web font gallery allows you to add any free web font, choose the font weight and also search for a desired web font that you would like to use.

Insert Dreamweaver Smart Tabs

C. Edit DW Smart Tabs

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

Insert Dreamweaver Smart Tabs

You can change the name, the effect type and edit its parameter values. After you finish changing the SmartTabs settings, click the "Update" button and the effect will be updated.
Note: When you change the preset, the content of the Smart Tabs 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 Dreamweaver Smart Tabs

D. Add Existing DW Smart Tabs

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

Insert Dreamweaver Smart Tabs

When you click the "Add Existing SmartTabs" button, a popup will appear where all the existing Smart Tabs 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 Smart Tabs

Insert Dreamweaver Smart Tabs

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

F. Changing the content

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

Insert Dreamweaver Smart Tabs

To switch between tabs click on the "eye" icon that appears inside the correspondent tab.

Insert Dreamweaver Smart Tabs

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

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.