Flexi CSS Layouts for Dreamweaver

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:

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:

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:

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.

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

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.

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.

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.

Buy it now!

$99.99