Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support


How to create a CMS in Dreamweaver

Install and locate the InContext CMS Dreamweaver extension

You can download the InContextCMS for Dreamweaver from here:
http://www.extendstudio.com/product/incontext-cms-easy-content-editing-dreamweaver.html

For Dreamweaver CS5, CS5.5, CS6, CC:
– open the “InContextCMS_version.zip” file using Adobe Extension Manager;
– restart Dreamweaver.

For Dreamweaver CS4:
– open the “InContextCMS_version.zip.mxp” file using Adobe Extension Manager CS4;
– restart Dreamweaver.

Install InContext CMS for Dreamweaver using the Adobe Extension Manager

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

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.

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

Add a CMS to your site in Dreamweaver

1. Setting Up The Site:
Before adding a CMS in Dreamweaver, 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

After you have built all the pages and they are ready for upload, you can add the CMS to the site.

Dreamweaver Site

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.

InContext CMS for Dreamweaver Insert window

The CMS Editor will open in Dreamweaver. It has 2 tabs: the CMS Settings and the FTP settings

3. Setup the CMS:

From the CMS Settings tab you can edit the CMS info.

Edit the FTP settings inside the InContext CMS Editor in Dreamweaver

- change the folder of the CMS – this is the folder where the CMS will be installed;

- 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 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;

There are two types of users by default for the CMS: admin and editor.
- add usernames and passwords for admin and editor accounts:

1. The admin will be able to change any text and image from the site and can define editable regions for the editor.
2.
The editor (client) account can only change texts and images from the site set as editable by the admin.

4. Setup the FTP:

Choose your server type – FTP, FTP over SSL or Local testing server.

Edit the FTP settings inside the InContext CMS Editor in Dreamweaver

1. 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)

2. FTP server:
If you choose FTP server you will have to fill the mandatory fields in order to have the online InContext CMS application to connect through FTP and 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.
- FTP server address: fill the domain name of your site.
- username: fill in the username for logging in to the FTP server.
- password: the password used for logging in to the FTP server.
- port: the FTP port is usually 21 but you should check with your hosting company.
- test connection: in order to test the connection, the CMS application needs Internet access. Make sure that you are connected to the Internet. Also, make sure that the site where you want to upload the CMS is up and running.
When you click the “Test connection” button, the CMS tests the connection with your domain.

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

After filling all the inputs, 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” .

How To Use The CMS

1. Log in to the CMS

- 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 log in page will appear.
- insert your username and password (either the one for admin or editor), then click the “Login” button in order to log in to your cms.

InContext CMS for Dreamweaver login interface

2. Edit the site content using the CMS

After logging in to the CMS, usually the index page appears in the CMS Editor.

InContext CMS for Dreamweaver Editor

If you are logged in with the admin user you can:
- make regions editable;

InContext CMS for Dreamweaver editable regions

- edit text:

Edit text with the InContext CMS for Dreamweaver

- style the text using the top toolbar:

InContext CMS for Dreamweaver toolbar

- navigate through the pages within your site by using the Quick navigation menu:

InContext CMS for Dreamweaver navigation menu

When you (or your client) log in with the “editor” user you (or your client) will be able to edit the regions that were set as “editable” by the “admin” user.

You can download the InContextCMS for Dreamweaver from here:
http://www.extendstudio.com/product/incontext-cms-easy-content-editing-dreamweaver.html

How to Create a Slider in Dreamweaver

With the Extend Studio jQuery Power Slider extension you can create beautiful jQuery sliders. Here is the example that we will use for the following tutorial.

Install and locate the jQuery Power Slider in Dreamweaver

You can download the jQuery Power Slider for Dreamweaver from here: http://www.extendstudio.com/product/jquery-gallery-dreamweaver.html

For Dreamweaver CS5, CS5.5, CS6, CC:
– open the “jQuery_Slider_version.zip” file using Adobe Extension Manager;
– restart Dreamweaver.

For Dreamweaver CS4:
– open the “jQuery_Slider_version.zip.mxp” file using Adobe Extension Manager CS4;
– restart Dreamweaver.

Install extension in Adobe Dreamweaver using the Adobe Extension Manager

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

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.

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

Install The Design Editor AIR Application

The extension uses an additional AIR application for image editing and resizing. You will find the “PowerSliderEditor.air” installer file inside the extension package. You should install it in order for the extension to function properly.

Insert a jQuery Power Slider into a page

In order to add a jQuery Power Slider, 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

1. Put the mouse cursor into the element where you want the slider to be added.

Add a photo gallery to your page in Dreamweaver

2. Click the “insert slider” button from the Dreamweaver “Insert” window.

Insert Photo Gallery in Dreamweaver

3. The jQuery Power Slider for Dreamweaver Editor will appear.

- change the slider name;

- change the width to 1000 px;

- change the height to 300 px;

- select 3 slides.

When you’re done, click the “Insert” button.

Photo Gallery Editor in Dreamweaver

Change the Slider design settings

After inserting the slider into the page the jQuery Power Slider Property Inspector will appear.
We will make some edits here, to get to a simpler design, that fits properly in this page by keeping the image, the title and text elements, and the 3 bullets for the navigation.

Change Photo Gallery Settings in Dreamweaver

1. From the Property Inspector > General settings align the slider to center.

Align Photo Gallery to Center

2. Move the image to the right. From the Property Inspector change the image settings:
- add 200 x 200 width and height;
- change the offsets to: offset X:720 and offset Y:45.

Align Photo Gallery to Center

3.Change the Slider background color:
- select the slider and from the Property Inspector go to the “Design” tab;
- clear the “Bg. image” input;
- set the “#f2f2f2″ background color to the slider.

Align Photo Gallery to Center

4.Change the slider image:
- select the Dreamweaver Split view, so that you can see both the code and the design;
- select the image.

Align Photo Gallery to Center

- browse for the image on your computer:
- remove the image path and browse for a new image from your computer.

Align Photo Gallery to Center

The new image will be updated in Dreamweaver design view:

Align Photo Gallery to Center

5. Remove the subheader text:
- select the subheader text of the slider;
- after the blue rectangle appears, press the "Delete" button from your keyboard in order to remove it.

Photo Gallery Thumbs Bar

6. Set header style:
- select header text of the slider;
- go to the Property Inspector> Text tab;
- remove the bold style;
- click on the blue text icon to set the text to be uppercase;

Photo Gallery Thumbs Bar

7. Resize the text area:
- select the text of the slider;
- after the blue rectangle appears, drag it to the right to enlarge it.

Photo Gallery Thumbs Bar

8. Style the other 2 slides:
To visualize each slide in Design view, you can browse between slides. You can switch between slides by pressing using the next/previous slide buttons on top of the slider.

Photo Gallery Image Area

Preview the page in browser

Here is how the slider will look like.

How to Create a Photo Gallery in Dreamweaver

With the Extend Studio jQuery XPOSE Gallery extension you can create beautiful jQuery photo galleries in Dreamweaver. Here is the example that we will use for the following tutorial.

Install and locate the jQuery XPOSE Gallery in Dreamweaver

You can download the jQuery XPOSE Gallery for Dreamweaver from here: http://www.extendstudio.com/product/jquery-gallery-dreamweaver.html

For Dreamweaver CS5, CS5.5, CS6, CC:
– open the “jQuery_XPOSEGallery_PRO_version.zip” file using Adobe Extension Manager;
– restart Dreamweaver.

For Dreamweaver CS4:
– open the “jQuery_XPOSEGallery_PRO_version.zip.mxp” file using Adobe Extension Manager CS4;
– restart Dreamweaver.

Install extension in Adobe Dreamweaver using the Adobe Extension Manager

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

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.

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

Install The Design Editor AIR Application

The extension uses an additional AIR application for image editing and resizing. You will find the “XPOSEGalleryImageManager.air” installer file inside the extension package. You should install it in order for the extension to function properly.

Insert a jQuery XPOSE Gallery into a page

In order to add a jQuery XPOSE Gallery to a page, 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

1. Put the mouse cursor into the element where you want the gallery to be added.

Add a photo gallery to your page in Dreamweaver

2. Click the “insert gallery” button from the Dreamweaver “Insert” window.

Insert Photo Gallery in Dreamweaver

3. The jQuery XPOSE Gallery for Dreamweaver Editor will appear.

- change the gallery name;

- change the width to 1000 px;

- change the height to 500 px;

- the pictures and text can be chosen from here, or later, from the Property Inspector.

When you’re done, click the “Insert” button.

Photo Gallery Editor in Dreamweaver

Change the Photo Gallery settings

After inserting the gallery into the page the jQuery XPOSE Gallery Property Inspector will appear.
We will make some edits here, to get to a simpler design, by keeping only the preloader, the image area and the thumbnails bar – that will be sliding from bottom at mouseover.

Change Photo Gallery Settings in Dreamweaver

1. From the Property Inspector go to the Photo Gallery and align the gallery to center.

Align Photo Gallery to Center

2. Select the “Controls bar” from the Property Inspector:
- remove it, by pressing the “Delete” button from your keyboard.

Photo Gallery Controls Bar

3. From the Property Inspector select the Thumbs bar:
- Set the “Offset X” property value to 0;
- After adding the changes, click the “Apply changes” green button;

Photo Gallery Thumbs Bar

4. Select the Image Area:
- Change its height to 500px;
- After adding the changes, click the “Apply changes” green button;
- Whenever you change the “Image Area” dimensions the images need to be resized to that they fit in. The “Regenerate Images” button will appear.

Photo Gallery Image Area

Preview the page in browser

Here is how the photo gallery will look like.

Page 2 of 3012345102030...Last »