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


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.

How to create a website visually in Dreamweaver

How to create a website visually in Dreamweaver

In this tutorial you will learn how to create a site visually by using one of our very easy to use Dreamweaver extensions called Flexi Layouts 2 .

You can see a live version of the site that we will create here.

Flexi Layouts is a drag-and-drop site builder that works inside Adobe Dreamweaver and makes it incredibly easy to have your site up and running in few minutes, starting from scratch. Here are the steps to create a site by using a quick layout:

Create the Dreamweaver site


1. In order to use the Flexi Layouts 2 PRO, you need to create a html page inside a Dreamweaver site.

Open Dreamweaver and, from the main menu go to Site> New Site.

How to create a new Dreamweaver site

2. Choose your Dreamweaver site name and location. It’s recommended that you choose a suggestive site name so that it’s easier for you to navigate through sites – in case you will have more.

By clicking the “folder” icon you can browse for a folder location on your computer.

choose your Dreamweaver site location

3.After choosing your site location and name, click “Save”. Create a new page and save it within the Dreamweaver site. Open the page.

Create a new file in your Dreamweaver site

Locate the Flexi Layouts 2 PRO inside Adobe Dreamweaver

1. The Extend Studio products are available inside the “Insert” window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.

Click the “Create/ Edit Layout button.”

Locate the Flexi Layouts 2 PRO extension inside your Dreamweaver Insert Menu

2. The Flexi Layouts 2 PRO Editor will open.

You can choose to start a new layout from scratch, or a grid based layout.

Also, you can start with one of the quick layouts that are available in the extension.

Choose a new standard layout, a grid based layout or start from a quick template

Create the layout structure

1. The Flexi Layouts 2 PRO Editor will open in Dreamweaver and you will be able to create the layout visually.

start creating your first layout visually, using the Flexi Layouts 2 PRO Editor

2. Make the main wrapper 100% wide and add a background image to it. You can download the background image that has been used in this tutorial from here.

make the page wrapper 100% wide

3. Add 3 rows inside the wrapper and rename them: header, content and footer.

add the header, content and footer to your page

4. Add pading top 40px and padding bottom 25px to the header element.

add inner elements and align them to center

5. Add a 7px top border to the header area. The color of the border is: #525152.

insert a horizontal menu bar from the Flexi Layouts 2 PRO snippets sidebar

6. Select the content element and add 20px top margin to it.

edit the horizontal menu items using the Flexi Layouts 2 PRO Editor

7. Select the footer area:

– add white background color;
– add 5px top margin;

add border to the footer area using the color picker

- go to the border tab and add top and bottom grey border – color #CCCCCC.

add border to the footer area using the color picker

8. After styling the main layout structure, add an inner row inside each element:
– change their name to header-inner, content-inner and footer-inner;

– make the inner elements 960px wide;

– center the elements using the “Align” option from the Sidebar.

The layout should look like this:

save the page as a Dreamweaver template using the Flexi Layouts 2 PRO Editor

Add header and footer content

1. Select the header element and split it in 2 columns: logo-area and menubar-area.
Make the logo holder 225px wide.

add your template editable regions

2. Open the Flexi Layouts 2 PRO snippets sidebar and add an image.
After dragging the image element into the logo holder, the browse window will appear and you will be able to choose your logo image.

3. Open the Flexi Layouts 2 PRO snippets sidebar and go to header elements section. Select the horizontal menu bar and drag it into the menubar holder element.

4. Select the hmenubar1 element from the Structure tab:

-from the background color remove the blue gradient.

5. Customize the menu items:

– change the menu items color to grey #7D7D7D;

– make the menu items text bold.

From the “State” section, select the “hover” state and make the menu items text color for the hover state black.

6. Align the menu items to the right:

– select the hmanubar1_list item;

– from the toolbar align the imtems to the right.

7. Select the footer area and split it in 2 columns: the copyright-area and the social-area.


– open the Snippets sidebar and, from the “Footer elements” drag the copyright element inside the copyright area.

8. Double click on the text from the copyright area to edit it.

9. Change the copyright text color to black from the toolbar.

10. Split the social area in 2 columns:
– in the right column drag a text element;
– align the text to the right;
– add a 23px top margin to the text element;
– inside the social area element drag the “social icons” element from the Snippets sidebar.

Save the page as a template

1. Ater you finish editing all the details save the page as a template. From the Flexi Layouts 2 PRO Editor go to File> Save as template.

save the page as a Dreamweaver template using the Flexi Layouts 2 PRO Editor

2. Inside the right sidebar you can choose the regions that you want to be editable in your site:
– make the content region editable;
– click the “Done” button from the top-right corner when you are ready.

add your template editable regions

3. After you click the “Done” button, a popup will open asking you to add a name to the template page.
After adding the name click “Ok” and the template will be created.

save the page as a Dreamweaver template

The template is saved inside the “Templates” folder that is automatically generated inside the Dreamweaver site once you create the template.
Also, the template instance is automatically applied to the index page. So next step is to open the index page and start adding content to it.

Add content to the index page

1. Open the index page inside the editor and start to add content to it using the Flexi layouts 2 PRO Editor:
– split the content row in 2 rows – one for the image and another for the image description;
– from the snippets sidebar add an image inside the image holder;

add the image inside your index page

– add 10px padding to all image sides;

– add 1px border to the image and make it grey #CCCCCC.

add the image inside your index page

2. Drag a text inside the image description area:
– make the text black #000000;
– center it using the top toolbar.
Then save the page and close the Editor.

add the image description and center the text using the Flexi layouts 2 PRO Editor toolbar

Use the page as a template for the rest of the pages

1. Back to Dreamweaver, create a new page inside your site and name it “about”.

create the about page inside the Dreamweaver site

2. Edit it with the Flexi Layouts 2 PRO Editor and apply the main-template file to it.

Apply the Dreamweaver template to the about page

3. Start adding content to the about page:
– split the inner content in 2 columns – the content and the sidebar;
– add 20px right padding to the content area
– drag a header and then a text element from the snippets sidebar to the content area;

add content to the about page using the Flexi layouts 2 PRO Editor

– add 25px padding to the sidebar area;
– and an image to the sidebar area;
– add a grey #CCCCCC border to the sidebar area element.
After you finish editing, save the page and close the Editor.

add content to the about page using the Flexi layouts 2 PRO Editor

4. Back to Dreamweaver, create the portfolio page and open it. Click the Create/ Edit Layout and apply the main-template to it.

create the portfolio page inside the Dreamweaver site

5. Inside the portfolio page you can create a list with images that represent your photo categories.

add content to the portfolio page using the Flexi layouts 2 PRO Editor

6. Back to Dreamweaver, create the contact page and open it. Click the Create/ Edit Layout button to open the Editor and add the template to the page.

create the contact page inside the Dreamweaver site

7. Start adding content to the contact page:
– split the content area in 2 columns;
– a dd the contact information inside the right column – drag a header element and a text element from the snippets sidebar;
– and a quick contact form inside the left column.

add content to the contact page using the Flexi layouts 2 PRO Editor

8. When you are ready save the page.

save the page inside the Flexi layouts 2 PRO Editor

You can see a live version of this site here.

Create a 2 columns elastic CSS layout with Flexi CSS Layouts Dreamweaver extension

A liquid layout is percentage based. In other words, a 100% width layout will span to the entire screen, regardless of the user’s resolution. When using a liquid layout the content will take advantage of all the available space which is good if you have a lot of text. As a best practice for keeping the layout readable, you should set a max width and min width: for example the min width 960px means the layout will not shrink below the 1024×768 resolutions and the max width 1260px will not let the layout get bigger than the 1400px screen resolution. If you started the layout as a liquid layout and want the rows inside also liquid (adjust themselves to the screen resolution and keep proportions) then all the divs inside are calculated as a percentage of their parents. You can as well mix fixed columns with liquid columns.

Page 3 of 3012345102030...Last »