Flexi CSS Layouts for Dreamweaver

Download a free trial of   Flexi CSS Layouts for Dreamweaver
Buy Flexi CSS Layouts for Dreamweaver
Download Flexi CSS Layouts trial
See video Flexi CSS Layouts
box Flexi CSS Layouts for Dreamweaver

Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Not only that you can create fixed, liquid or elastic layouts in seconds, but you can generate custom website sections with unlimited DIV levels, following even the most detailed mock-ups from your designer.


Special offer

Flexi CSS Layouts documentation

1. How do I install the Flexi CSS Layouts Dreamweaver Extension?

To download the extension, go to the product page and download a free trial, or if you have bought the product you can find the download link in your account on Extend Studio site.

After you have download the Flexi CSS Layouts extension, you need to install it in Dreamweaver. Open the archive and double click the .mxp file and the Adobe Extension Manager should open and install it automatically. Or you can extract the archive, open the Adobe Extension Manager and select install. Then search the folder where you extracted the .mxp file and click open.

2. Where to find the extension in Dreamweaver?

The Extend products should appear on the right side of the Tabs

Tabbed Insert window

Tabbed Insert window

If the Insert Window is displayed as Floating Panel

Locate the Insert floating panel (should be on the left or right of the working area, depending on the Workspace settings: developer, designer etc)

Click on the "Common" drop-down - marked with a down arrow:

"Common" down arrow

The Extend Studio products should appear in the pop-up list.

Extend Studio products

3. How to align the content in a cell?

If you want your content (images, text, flash files or other) to be aligned in a cell, open the CSS Styling panel on the right side, go to Text panel, un-check the "Inherited" option and set the alignement you need.

Note: you can specify different kind of alignment inside a cell manually. For example you can have 2 paragraphs aligned differently inside a div: add for the first paragraph the css rule <p style="text-align:left"> and for the second paragraph: <p style="text-align:right">. For the links all you need to do is to add align to the <a> tag: <a align="center">

4. I got an error message when I tried registering Flexi CSS Layouts for DW. What do I do?

The error message could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.

  • 661: The serial number entered is incorrect. Make sure you are entering the correct license key. If it still doesn't work, login in your account on Extend Studio site and go to Account > MyProducts page to copy paste the correct license key.
  • 301: This message indicates that the license key which you have entered is already in use. Login in your account on Extend Studio site and go to Account > MyProducts page; hit the reset license button next to the license number.
  • 701: This message indicates that your internet connection is unavailable. You cannot activate the product without an internet connection.

5. Debug mode appearing on the production site

Before uploading the site on the production server you should set the Debug mode to off for all the files. To do this, click on "turn debug mode off" in the Flexi CSS Layouts panel in Dreamweaver.

6. How to add a background image and repeat it

If you want to add a background image on the new layout popup window select choose under background image. A new popup window will appear where you can set the settings for your image. First you need to load the image and save it in your site root. If your image is not as big as the layout you can use the repeat options. You can use repeat-x for the horizontal axis, you can use repeat-y for the vertical axis. The default option is repeat which means you can repeat your image on both axes. Or if you prefer to see only one instance of your image you can use the no-repeat option. You can position your background image by using the position x and position y options.

css align content

Using a background image

7. Debug Mode

If you preview your layout in your browser (press F12 in Dreamweaver) you'll notice that the debug mode is enabled. The Flexi CSS Layouts has this cool feature to help you view better the layout in the browser and debug any potential problems. You can view all the layout divs and shows the width and height for every div inside the layout. When you're done testing your new layout just press disable debug from the Flexi CSS Layouts tab and then upload your file on the ftp.

Debug Mode On

Download Flexi CSS Layouts for Dreamweaver trial
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6