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


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.

How to create a responsive navigation menu in Dreamweaver

With the new Extend Studio Flexi Menus 2 extension you can create beautiful responsive navigation menus in Dreamweaver. Here is the example that we will use for the following tutorial.

Install and locate the Flexi Menus 2 in Dreamweaver

You can download the Flexi Menus 2 for Dreamweaver from the overview page: http://www.extendstudio.com/css-responsive-menus-dreamweaver-extension/overview.html

For Dreamweaver CS5, CS5.5, CS6, CC
- open the “FlexiMenus_v2.zxp” file using Adobe Extension Manager
- restart Dreamweaver

For Dreamweaver CS4 – open the “FlexiMenus_v2.mxp” file using Adobe Extension Manager CS4 – restart Dreamweaver

Install extension in Adobe Dreamweaver using the Adobe Extension Manager

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.

Locate the extensions inside Adobe Dreamweaver

Insert a Flexi Menus 2 into the page

In order to add a Flexi Menus 2 to a site, 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 menu to be added.
Usually inside the header of the page.

Insert a Flexi menus 2 responsive navigation.

2. Click the Insert Horizontal Menu button from the “Insert” window.

Insert a Flexi menus 2 responsive navigation.

3. The Flexi Menus 2 Editor will appear.
- you can choose a “dark” or “light” theme. For this example we had used a “light” theme;
- there are 21 skin templates that you can choose. For this tutorial we had chosen skin 2;
- you can choose from more color schemes;

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

Insert a Flexi menus 2 responsive navigation.

Change menu settings

After inserting the menu into the page the Flexi Menus 2 Property Inspector will appear.

Flexi menus 2 responsive menu Property Inspector

1. From the Property inspector go to Main Menu > Container add a white background to the menu container.

Add background color using the Flexi menus 2 Property Inspector

2. In the Main Menu > Container tab use the right arrow to slide to the other options.
- align the menu to center from both “Align” and “Align Menu” option;
- from the “Positioning” option enable the Stick to top and the Full width.

Align menu to center and make it sticky

3. Change the menu items text settings from the Main Menu > Text. Make sure to change the text options for all the 3 states: Normal, Over and Selected.
- change the font size to 15 px for all states;
- change the text color for the normal state to #333333;
- disable the bold text style and make sure that you also add a lighter font weight. In this example we had added font-weight 300.

change the menu items text settings

4. From the Property Inspector go to the “Mobile Settings”. Make sure to have the "enable mobile version" option selected.
- change the menu preset to “push”;

mobile responsive navigation settings

After all is done, save the page and preview it in your browser. Here is the example presented in this tutorial.

Page 2 of 3012345102030...Last »