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


How to create a responsive slider in Dreamweaver

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

Video version (tutorial provided by Webucator):



Insert a jQuery Slider 2 into the page

In order to add a jQuery Slider 2 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. Place the mouse cursor into the container where you want the slider to be added.

Add a responsive slider to your page in Dreamweaver

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

Insert Photo Gallery in Dreamweaver

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

- go to skin 4;

- click the “Customize this template” button to get to the editor and define the slider settings ;

Power Slider Editor in Dreamweaver

4. Choose the slider resize type.

You can choose from 2 types of responsivevess: Auto-Responsive or Media Queries .

- Auto-responsive:

Enable the “Auto” module from the top toolbar. This option resizes the slider proportionally with the screen size. It works automatically without any configuration.

This module works great for simple, quickly made sliders, and dynamically adjusts the slider’s width / height

accordingly to the display / device that views it.

- Media queries:

For greater customization and control, use media queries type.In this mode, you have complete control over the look and feel of your slider, for each target device : mobile , tablet, desktop. Complete control on every aspect , at breakpoint and slide element level.

It allows you to customize each slider component or element, on each device type.

Components and elements can also be made visible or hidden for each device type.

Select the Media Queries option.

Power Slider Editor in Dreamweaver - Choose Resize type

Change the Power Slider settings

Inside the Slider Editor sidebar you can define its settings.

1. Change the slider width

- select the slider container;

- set the slider width to 100%;

- also, set the slider type to full width;

Power Slider Editor in Dreamweaver - Change slider width

2. Remove the slider background in order to add a transparent color – so that the image with the green grass that is applied on the page background is visible under the slider.

- make sure to have the slider container selected;

- open the background panel;

- go to the image tab and remove the background image;

Power Slider Editor in Dreamweaver

3. Add a solid color and make it transparent.

Power Slider Editor in Dreamweaver

- make sure to have the slider container selected;

- from the background panel go to solid color;

- define the color – in this tutorial we had used black;

- set a lower alpha value (alpha is set in percents) – in this tutorial we had used 40%;

Here is how the slider will look like.

4. If you want to add a different background image to each slide, here is what you need to do:

- select the slide – make sure to see the Slide selected in the element top left breadcrumb;

- in the sidebar make sure to be inside the Element Settings panel;

- Open the Background tab and go to Image;

- By clicking the folder icon near the input you can browse for the image in your computer;

Power Slider Editor in Dreamweaver

To switch between slides, use the slides manager from the bottom of the editor.

jQuery Power Slider - Slides manager

How to Create a Contact Form in Dreamweaver

Install and locate the Flexi Contact Forms Dreamweaver extension

You can download the Flexi Contact Forms Dreamweaver extension from here: 
http://www.extendstudio.com/product/contactforms-for-dreamweaver.html

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

For Dreamweaver CS4: 
– open the "Contact_Forms_version.zip.mxp" file using Adobe Extension Manager CS4; 
– restart Dreamweaver.

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 Contact Form to your page in Dreamweaver

1. Setting Up The Site:
Before adding a Contact Form in Dreamweaver, you need to create an html page and save it inside a Dreamweaver site. Here are the step by step instructions: :http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html 

2. Insert a Contact Form

Put your mouse cursor inside the element where you want the contact form to be added and click the "Create Contact Form" button from the Contact Forms "Insert" window.

After clicking the “Insert Flexi ContactForms” button, the ContactForms editor will appear. From here you can add elements to the form, modify its settings and choose a skin.

Customize the Contact Form

1. Set up the Form Elements

- choose the form elements that you want inside the form: “Name”, “Message”, “Email”, “Website” and “Phone”. You can add form elements by clicking the “+” (add) icon;
- choose what elements have to be mandatory, by enabling/ disabling the “Is required” option.
When the “Submit” button is clicked, a validation message will appear if the mandatory fields are not completed;
- set the number of characters allowed in each form field;
- preview the contact form before inserting it into the page.

2. Customize Form Sending Settings

- add the email address where you want the form data to be sent. Inside the "Send mail from" input you have to add an email address that is valid on your server – usually admin@domain-name.com;
- choose whether the message that you want to appear or if you want the user to be redirected to another webpage after the form content is sent successfully.
- click the “Edit Error Messages” button to open the page in Dreamweaver where the Contact Form validation messages can be edited.

3. Customize Form Design Settings

- set the form width;
- choose the position of the form inside the page – left, center or right.

- choose to have the label position at the top of the input, inside the input or in the left side of the input – click here to see the label options;
- the label width option activates when you set the label position to left. Make sure that the label width is not bigger than the form width;
- choose the label font from the font family selection list;
- set the vertical space between the form elements;
- set the label font size in px.
When the label position is set to be inside the input, the “Label font” option is disabled;
- the “text font” option represents the text that the user types inside the form inputs. Choose the text font family from the selection list.

4. Contact Forms predefined skins

Click on the “Form Design” tab to see the available skins. There are 11 form skins inside the Flexi Contact Form extension. Once you choose the desired skin, click the “Insert” button to add the form to your page.

Contact Form Message

After the contact form is successfully sent, the email recipient will get an email with all the data that has been sent. Flexi Contact Form has a default email format that looks like in the following screenshot:

You can download the Flexi Contact Forms Dreamweaver extension from here: 
http://www.extendstudio.com/product/contactforms-for-dreamweaver.html

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

Page 1 of 3012345102030...Last »