Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CC 2015, download the extension installer from here: http://www.extendstudio.com/extension_manager/download
For Dreamweaver CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1
- open the "DWOffScreenMenu_[version-no].zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "DWOffScreenMenu_[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 Offscreen Menu 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 Offscreen Menu 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 Offscreen Menu 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 Offscreen Menus created with DW Offscreen Menus . 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 Offscreen Menu

B.1 Overview

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

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

Insert DW Offscreen Menu 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 Offscreen Menu for Dreamweaver

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


B.3 Menu Items

B.3.a Overview

Inside the Items section you can manage the Offscreen Menu items.
1. Use the (+) and (-) buttons to add and remove items.

2. The left and right arrows allow you to move the item to the parent menu or submenu.

3. The up and down arrows allow you to change the menu items order.

Insert DW Offscreen Menu for Dreamweaver

You can add an icon to each menu item. Click the grey folder icon that corresponds to the item and the Icon Font Awesome gallery opens.

If you don't want to have icons to your menu items, click the "x" button and it will be removed.

Insert DW Offscreen Menu for Dreamweaver

To add a link to the menu item, select the link and add the link to the Page URL input.

To make the menu item scroll te page to a section add the ID of the element where you want the page to be scrolled to.

If the page opens in new tab, enable the Open in new tab option.

Insert DW Offscreen Menu for Dreamweaver

 

B.4 Settings

B.4.a General Settings

 

Insert DW Offscreen Menu for Dreamweaver

Here you can:

- set the menu container dimensions;
- set the open button dimensions;
- set the close button dimensions;
- ser the open and close buttons position using the offset x and offset y parameters;
- choose the button position - top or bottom;
- choose the container position - left, right or floating;

Scroll down for more settings:

B.4.b Tablet and mobile settings

 

Insert DW Offscreen Menu 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;
- also you can disable the mobile friendly feature.

B.4.c Effects

 

Insert DW Offscreen Menu for Dreamweaver

Inside the Effects tab you can:
- choose the desired effect;
- set the effect duration (measured in milliseconds).

These are the available effects:

Insert DW Offscreen Menu for Dreamweaver

 

B.5 Design

 

Insert DW Offscreen Menu for Dreamweaver

B.5.a Container

Inside the Container section you can set the container background color. Follow the green color to see what section does this parameter affect.

You can set a solid color, a gradient or a background image.

Insert DW Offscreen Menu for Dreamweaver

In the screenshot below you can see how to edit the background image settings.
Clicking on the Advanced Settings button, the backgroud image settings panel will open.

Insert DW Offscreen Menu for Dreamweaver

B.5.b Menu Container

Inside the Menu Container section you can set the container background color. Follow the green color to see what section does this parameter affect.

You can set a solid color, a gradient or a background image.

Insert DW Offscreen Menu for Dreamweaver

Inside this section you can aslo:

- set the box settings: paddings, margins, borders or set rounded corners.

 

B.5.c Menu Items

Inside the Menu Items section you can edit the menu items separately:
- edit the settings on each state - normal, hover and selected;

Insert DW Offscreen Menu for Dreamweaver

Change the Typography settings of the menu items.

- font type;
- font size;
- font color;
- font weight;
- text align;
- font font style - italic, underline, uppercase;
- letter spacing;
- line height;
- opacity: the Alpha property measured in percents. The smaller the alpha value the more transparent will be the text;

Insert DW Offscreen Menu for Dreamweaver

- to add a web font click the Add web font button and the web fonts gallery will open:

Insert DW Offscreen Menu for Dreamweaver

Inside the Icons section you can edit the menu item icons settings.

Insert DW Offscreen Menu for Dreamweaver

- icon color;
- icon opacity: the Alpha property measured in percents. The smaller the alpha value the more transparent will be the item;
- icon size;
- icon position;
- icon distance from text;

Inside the Background section you can edit the menu items background color. You can have a solid color, a gradient or a background image set to the menu items.

Insert DW Offscreen Menu for Dreamweaver

The Back button icon represents the icon that allows the user to navigate through the menu items. You can set a text or upload an image that representa a back button.

Insert DW Offscreen Menu for Dreamweaver

The Submenu icon represents the icon added to a menu item that has submenus. To add a submenu icon click on the folder button and browse for an image in your computer.

Insert DW Offscreen Menu for Dreamweaver

From the Box Settings you can edit the menu items paddings, margins, borders and add rounded corners.

Insert DW Offscreen Menu for Dreamweaver

B.5.d Overlay

The Overlay represents the section that appears on the background when the offscreen menu is active. You can set a solid color, a gradient or a background image.

You can also set the opacity of the overlay. The Alpha property measured in percents. The smaller the alpha value the more transparent will be the item;

Insert DW Offscreen Menu for Dreamweaver

B.5.d Open / Close Button

From this section you can edit the open and close buttons style. In the example below, both open and close buttons have background images. From this section you can:

- edit the style for both normal and hover states of the 2 buttons;
- edit the buttons background settings - you can add a background color, gradient or image;
- edit the buttons paddings, margins, borders and add rounded corners.

Insert DW Offscreen Menu for Dreamweaver

B.5.d Custom HTML

Inside the Custom HTML section you can:

- enable the custom HTML option - the html content that you add can be visible on the top of the menu, on the bottom section of the menu or both sides;

Insert DW Offscreen Menu for Dreamweaver

C. Edit DW Offscreen Menus

In order to edit the DW Offscreen Menus you have to select it inside Dreamweaver.
Click on the "EditOffscreen Menus" button to edit it.

Insert DW Offscreen Menu for Dreamweaver

After you finish changing theOffscreen Menus settings, click the "Update" button and the effect will be updated.
Note: When you change the preset, the content of theOffscreen Menus 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 Offscreen Menu for Dreamweaver

D. Add Existing DW Offscreen Menu

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

Insert DW Offscreen Menu for Dreamweaver

When you click the "Add ExistingOffscreen Menus" button, a popup will appear where all the existingOffscreen Menus 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 Offscreen Menu

 

Insert DW Offscreen Menu for Dreamweaver

In order to delete a DW Offscreen Menus instance you have to select it inside the page and click the "DeleteOffscreen Menus" button.


F. Requirements

1. The extensions works on PC or MAC on the following Dreamweaver versions: CS4, CS5, CS5.5, CS6, CC, CC 2014, CC 2014.1, CC 2014.1.1, CC 2015.
2. The page where you use the form must have a HTML5 Doctype, because it has data-type 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.