Documentation

A. Installation and Registration

A.1 Installation

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

For Dreamweaver CS4 - open the "InContext_CMS_[version-no].mxp" file using Adobe Extension Manager CS4
- restart Dreamweaver

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) 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.
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 and the Extend Studio products should appear in the pop-up list.

A.3 Registration

A.3.1 How to register the extension
There are 3 types of InContext CMS licenses: for one website, for three sites and for an unlimited number of websites.
In order to license the CMS for a site you need to have a CMS inserted to your site.

Insert InContext CMS
Clicking on the "License this site" button inside Dreamweaver's Insert panel will open the registartion window. Insert the license number from your extendstudio account inside the serial input.
In the "Domain" input insert the domain name that you want to add the CMS to (be sure the domain is correct because this can't be undone!) and click on register.

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. Inserting, editing or removing the InContext CMS

B.1 Setting Up The Site

In order to add an InContext CMS to a site, you need to create an 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

B.2 Insert an InContext CMS

Once you have your site ready, open a page and click the "Insert InContext CMS" button from the insert bar.
The InContext CMS interface will appear - it includes 2 tabs: CMS Settings and Server settings.

Insert InContext CMS

B.2.a CMS Settings tab:

CMS Settings tab

- change the folder of the CMS - this is the folder where the CMS will be installed; you can only add characters from a to z and numbers 0-9 - there are no special characters or space allowed.

- choose the images folder - this is the folder where you keep images for this site (it's important that this matches your actual images folder as it's the only folder that will open inside the online CMS component when you're using the File Manager); you can only add characters from a to z and numbers 0-9 - there are no special characters or space allowed. You can browse for the images folder from your site by clicking the grey 'folder' icon from the right side of the input.

- choose a logo for the CMS - the image formats supported are .png, .gif, .jpg, .jpeg; It is recommended that you use as logo the actual logo of the site in a PNG format (it will show up in the online CMS app instead of the default logo of InContext CMS).

- add usernames and passwords for admin and editor accounts:
There are two types of users by default for the CMS: admin and editor.
The admin will be able to change any text and image from the site and can define editable regions for the editor.
The editor (client) account can only change texts and images from the site set as editable by the admin.
Inside the admin and editor username inputs, add a you can only add characters from a to z (no uppercase) and numbers 0-9 - there are no special characters or space allowed.
Inside the admin and editor password inputs, a default password is generated automatically. It can be changed and you can add characters from a to z (also uppercase) and numbers 0-9 - there are no special characters or space allowed.

B.2.b Server Settings tab:

CMS Settings tab

Here you need to choose your server type - FTP, FTP over SSL or Local testing server.

- Local Testing server: if you need to test the CMS app on your computer and not on the online server, or you want to set the editable regions while working locally, choose this option. To use this, you will need a local server application installed (recommended: XAMP or WAMP on Windows, MAMP on Mac).

You will also need to put the Dreamweaver site inside the public root of the testing server: C:\xampp\htdocs\ folder (For XAMPP), C:\wamp\www\ (for WAMP), Applications\MAMP\htdocs\ folder for MAMP.

After adding the CMS to the site you will be able to access it locally, in your browser, by following this path: http://localhost/cms (or the name you have chosen for cms folder)

- FTP server:
These fields are mandatory because the online InContext CMS app needs to connect through FTP to save changes made by the admin or editor. If you don't know this data, you can obtain the FTP address, username and password from the company hosting your site. The FTP port is usually 21 but you should check with your hosting company. Make sure that the "Path" is correct (some hosting providers require setting /public_html as path to your site). For example, if your site is located directly in the root of the FTP, you have to add the '/' character only. If the site is located inside a folder called test-site, you need to add the path '/test-site'.

- FTP over SSL:
Some hosting providers only allow secure connections to the FTP server. Choose this option if that's the case.

After completing all fields, click the "Insert" button and the cms will be created. Upload the site content to the FTP server. After uploading site’s files to your server, you can access the CMS by going to "name_of_your_site.com/cms".

B.3 Edit An InContext CMS

Click the "Edit InContext CMS" button to change CMS settings.

CMS Settings tab
You can change any setting except the location of the images folder. The passwords for admin and editor account are by default greyed out. If you need to change one of them, click on the pencil icon next to them.
After you finish editing, click the "Update" button and the changes will be applied.

B.4. Delete the CMS

If you want the CMS removed from the site, you can click the "Remove CMS" button from Dreamweaver's Insert panel. It will only delete the files related to the CMS (the ones from the cms folder).

CMS Settings tab

C. How to use the CMS after uploading it to the server

You can access the CMS by going to the name-of-your-site.com/cms address (or localhost/cms while working on a local testing server) in a browser. The login page will appear.

Flexi Menus 2 for Dreamweaver Property Inspector
Insert your username and password (either the one for admin or editor), then click the "Login" button in order to login to your cms.
If you insert an incorrect username and password 3 times a captcha input will appear.

Flexi Menus 2 for Dreamweaver Property Inspector

C.1. Top Toolbar

It has the following components:

Flexi Menus 2 for Dreamweaver Property Inspector
- the logo: includes the logo of your site, or the default InContext CMS logo if you haven't changed the path to site's logo inside the Dreamweaver extension interface
- the "editing name_of_page" dropdown: displays the page that you are currently editing; you can change the page by clicking on this dropdown
- the "Logout" button: it logs out the user
- the "Save Page" buttons: it saves the current page; if you try to leave a page where you have made changes, a prompt will appear asking you if you want to discard changes.
- the "Close" button: - it cancels whatever modifications you have made to the page.

C.2. Using the CMS as Admin

To use the CMS as an administrator, you need to login with the user and password set in the Dreamweaver interface for the administrator account. After login, you are able to change any text and image from the site and choose which areas will be editable by the editor.

C.2.a Changing texts


Flexi Menus 2 for Dreamweaver Property Inspector

When you click on a text from a web page, two buttons will appear on the top-left part of the text: "Make editable / non-editable" and "Edit text".
Clicking on the "Edit text" button will enter the "text editing" mode and a contextual toolbar will appear beneath the top toolbar, which will help you to style and format the text (font family, tag type, color, weight, link, add image and so on). To exit text editing you must click away from the text area or hit ESC on your keyboard or on the "x" button that appears over the text area.


Flexi Menus 2 for Dreamweaver Property Inspector

C.2.b Changing images



Flexi Menus 2 for Dreamweaver Property Inspector

As an admin, you can change any image from the site.

Flexi Menus 2 for Dreamweaver Property Inspector

To change an image, double click on it or select it and then click on the "change image" button that appears on top-left part of the image. The "File Manager" window will appear from where you can:
- choose an existing image from the "Images" folder (or what folder you have chosen inside the Dreamweaver extension interface)
- upload new images (they will automatically be placed in the "Images" folder)
- create new folders
- rename folders and images
- preview images
- delete images and folders
- move images and folders
- edit images with the Crop Tool

After you've chosen the image, click on the "Insert" button and the image will be added in page.

If the image you are changing has width and height set, when you'll try to replace it with an image that's bigger than the original, a prompt will appear with three options: "resize to the dimensions of the image you are replacing", "don't resize the image", and "edit image in crop tool".

The Crop Tool allows you to crop and resize images so they fit properly in your layout.

C.2.c Choosing what regions can be edited by your client (with the Editor account)

As an admin you must set what regions can be edited by your client (with the editor account). To do so, you must select elements from the page (texts, images or groups of texts and images) and click on the "Make editable" button (the one with the lock icon) from the top-left part of the selected element. Once you do that, you'll notice that the element will turn orange, indicating that it's editable with the Editor account.
If you want to change an element, to make it non-editable, select it and click again on the "Make editable / non-editable" button. You'll know that it's not editable when it has a blue overlay. After setting all editable regions, click on the "Save page" button.

C.3. Using the CMS as Edtitor

As an Editor, you can only change texts and images that were set as editable with the Admin account. When opening a page inside the CMS, all editable texts and images will have an orange overlay and an "Edit/Change" button. Editing of texts and changing of images is done in the same way as with the Admin account. After setting all editable regions, click on the "Save page" button

E. FAQ

1. Can I use the InContext CMS to edit the dynamic content of a website?
With the InContext CMS you can only edit HTML content inside a website.

2. Can I use the license for an unlimited number of websites?
There are 3 types of InContext CMS licenses: for one website, for three sites and for an unlimited number of websites. Check the pricing section from our website.