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" />
3. Add the following script to the bottom of your page, right before the body tag closes:
menus_jQuery('<img class="pulse hide" src="includes/HoverFX/pulse.png" style="margin: 0 auto;display: block;position: absolute;border: 0;">').prependTo(e);
e.hasClass("animate") ? t.addClass("pulse-animated"):null;
After adding the "Pulse", each image that has a HoverFX effect applied on it will have this effect added on it.
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:
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.
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.
3.After choosing your site location and name, click “Save”. Create a new page and save it within the Dreamweaver site. Open the page.
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.”
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.
1. The Flexi Layouts 2 PRO Editor will open in Dreamweaver and you will be able to create the layout visually.
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.
3. Add 3 rows inside the wrapper and rename them: header, content and footer.
4. Add pading top 40px and padding bottom 25px to the header element.
5. Add a 7px top border to the header area. The color of the border is: #525152.
6. Select the content element and add 20px top margin to it.
7. Select the footer area:
– add white background color;
– add 5px top margin;
- go to the border tab and add top and bottom grey border – color #CCCCCC.
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:
1. Select the header element and split it in 2 columns: logo-area and menubar-area.
Make the logo holder 225px wide.
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.
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.
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.
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.
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.
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 10px padding to all image sides;
– add 1px border to the image and make it grey #CCCCCC.
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.
1. Back to Dreamweaver, create a new page inside your site and name it “about”.
2. Edit it with the Flexi Layouts 2 PRO Editor and apply the main-template file to it.
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 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.
4. Back to Dreamweaver, create the portfolio page and open it. Click the Create/ Edit Layout and apply the main-template to it.
5. Inside the portfolio page you can create a list with images that represent your photo categories.
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.
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.
8. When you are ready save the page.
You can see a live version of this site here.
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.