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

Using Flexi CSS Layouts Dreamweaver extension for the first time

Flexi CSS Layouts is an easy to use Dreamweaver extension that helps you create table-less HTML layouts without coding in less than 5 minutes. You can start from a layout picture and simply create columns and rows directly from the interface and the extension will output W3C compliant DIV and CSS code. Or you can choose from a wide range of layouts from the template gallery then customize the layout by adding more cells and your own CSS rules.

1. Flexi CSS Layouts requirements

Flexi CSS Layouts requires an internet connection to activate and works on:
Dreamweaver CS3 Dreamweaver CS4 Dreamweaver CS5

2. Downloading the Flexi CSS Layouts Demo version

Flexi CSS Layouts is very easy to install on both Mac and PC. The Demo version can be downloaded from our site from the product pages. Click on the "Free trial" button as shown in the screenshot below:

Site pages

If you have purchased a Flexi CSS Layouts license, you should download your commercial version from your control panel on our site. Click on Login in the upper section of the site:

Login

and fill in your account details to login.

Note: the system will create an account based on the email you used when purchasing. If you used a Paypal email account, then the license will be added to an account where you need to login with the Paypal email address.

Login form

 

3. Installing Flexi CSS Layouts (PC & MAC)

To Install the Flexi CSS Layouts component on a PC or Mac, you need to unzip the file you have downloaded, and double-click on the .MXP file(s) included in the ZIP. If you have any problems installing the component, please refer to the "How to install an extension tutorial".

Note: if you have previously installed the demo version and you want to switch to the commercial version, un-install the demo version from the Adobe Extension Manager prior to the installation of the commercial version.

4. Locating the easy to use interfaces

To use and customize a css layout with the Flexi CSS Layouts extension, you need to open the Insert Panel (press CTRL + F2 to enable it) and search for Flexi CSS Layouts for DW. The extension is located together with the other Extend Studio products:

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:

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:

'Chartlimits' panel
"Common" down arrow

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

'Chartlimits' panel

5. Basic usage of the Flexi CSS Layouts extension

When you are installing the Flexi CSS Layouts, the extension will be available in the Dreamweaver environment: create a new html file in a site and save it; locate the extension menu as described above. You can choose a template from the Layouts Gallery or you can Insert a Full Page Layout or Page Section Layout and start from an empty page. You can edit a template by pressing the edit button and you can make any change that you might like for your design.

Open the Flexi Layouts

 

Uploading on the server

The Flexi CSS Layouts creates the DIV and CSS for your layout and inserts the code in the page. The external CSS files and layout assets (images) are saved in a folder called "includes" (inside this folder there is a folder called CSSLayouts which will contain all your CSS files and a folder for the assets). Once you're done with editing the layout, upload the "includes" folder on the server.

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