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


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.

Image HoverFX “Pulse” Effect

Many of our users had requested the code for the "Pulse" circle effect added on the images from the Hover FX for Dreamweaver sample page.

The "Pulse" circle can be easily added to all the images that have a Hover FX for Dreamweaver applied on them.

Here is an image that has the “Pulse” effect added on it.

You can add it to an image in just 3 steps:

1. Add the following 2 files inside your \includes\HoverFX folder:

- pulse.css – click here to download it.

- pulse.png – click here to download it.

2. Add the following path to the pulse.css file is added in the head tag of your page: <link rel="stylesheet" type="text/css" href="includes/HoverFX/pulse.css" />

There is no need to add the path to the pulse.png file in your page, as this file is added dynamically, from Javascript.

3. Add the following script to the bottom of your page, right before the body tag closes:

<script type="text/javascript">
(function(){

setTimeout(function(){
menus_jQuery(".hoverfx-effect").each(function(){
var e=menus_jQuery(this);
console.log(e);
menus_jQuery('<img class="pulse hide" src="includes/HoverFX/pulse.png" style="margin: 0 auto;display: block;position: absolute;border: 0;">').prependTo(e);
var t=e.find(".pulse");
e.hasClass("animate") ? t.addClass("pulse-animated"):null;
t.load(function(){
t.css({
"margin-top":Math.round(e.innerHeight()-t.innerHeight())/2,
"margin-left":Math.round(e.innerWidth()-t.innerWidth())/2
})});
t.css({"margin-top":Math.round(e.innerHeight()-t.innerHeight())/2,
"margin-left":Math.round(e.innerWidth()-t.innerWidth())/2});

t.removeClass(‘hide’);

e.on("tap",function(){
t.toggleClass("hide-important")});
e.hover(function(){
t.toggleClass("hide-important")})
})
},100);

})();
</script>

After adding the "Pulse", each image that has a HoverFX effect applied on it will have this effect added on it.

Page 2 of 29123451020...Last »