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 the Flexi CSS Layouts template gallery

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. Flexi CSS Layouts comes with a set of embedded templates that are ready to use. Even if you use the embedded templates you can still customize the layout by adding more cells, changing sizes or with your own CSS rules for the content.

Quick Overview

  • Installing the Flexi CSS Layouts Dreamweaver extension
  • Understanding the gallery template system
  • Inserting a Full Page Template from gallery
  • Inserting a Page section template from gallery
  • Customizing templates
  • Creating or deleting a new template in the gallery

Installing the Flexi CSS Layouts Dreamweaver extension

Before you open the Flexi CSS Layouts, you need to download and install this 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 the Dreamweaver extension. 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.

After you did these steps, open Dreamweaver and go to the Insert Panel (press CTRL + F2) to find the Flexi CSS Layouts tab.

Insert Full Page Layout

Understanding the templates gallery system

You have more ways to create a website layout using Flexi CSS Layouts: use the embedded full page/page section templates that are ready to receive content or create your own layouts from scratch. Using the embedded templates is faster and you can still customize the layout.

Template types:

  • The full page templates contain the main layout elements that create a web page
  • The page section templates are more detailed and complex layouts for content sections that can be inserted in the full page layouts: article lists, product stores, image galleries sections and many more.

My category

The template gallery is not limited to the embedded templates that come with the product. You can create your own layouts and save them in the gallery for later use.

Inserting a full page template from gallery

There are many CSS layouts that you can choose from, in 3 categories: basic templates, Web 2.0 templates, complete templates. The basic layouts have 1 column, 2 columns and 3 columns with fixed or liquid sizes and a header or a footer. The Web 2.0 templates are polished templates that follow the most recent trends in designing websites. The complete templates are ready made templates with images, backgrounds and all the page elements pre-arranged.

To insert a full page template, create a new page in Dreamweaver and from the Flexi CSS Layouts panel click on "Insert Layout From Template". This will open the templates gallery:

Selecting a template

After you have selected a template you can change the color scheme (colors can also be customized manually from the Layout editor interface). When you are satisfied with your selection, click the "Insert" button.

Inserting a page section template from gallery

Adding a page section layout inside your layout can be done very easily with the Flexi CSS Layouts. Page section layouts can be inserted in any existing site layout. To insert a page section template, you need to know at least the available width; select where you want the section to appear in your existing layout (can be a table cell or Div) and from the Flexi CSS Layouts panel click on "Insert Layout From Template". You can choose from several section layouts categories:

  • Article Section Layouts
  • Product Section Layouts
  • Footer Section Layouts
  • Photo Gallery Section Layouts
  • Other Section Layouts

Page section layouts can also be customized as you need them:

Adding a Page Section

Customizing templates

All the templates can be customized; adding or deleting cells, changing sizes or the CSS rules for the content. To customize an element from a template, you need to select it in the Layout editor; you can add more columns or rows from the upper editor menu and you can change the CSS styles from the panel on the right.

Customizing the layout structure

For example, if you want to add 2 columns inside of an existing cell, select the cell and go to the Insert Columns tab, and select 2 columns:

Inserting 2 columns

A popup will open where you should specify the width of the columns. You can set the columns width in pixels, percentage from the parent or liquid. The interface will autocalculate the available space for each column depending on the parent size. In the example below, the first column will be the main content are, so we set the min-width to 700px. The second row will have 260px in width.

Adding 2 columns

If you want to add some rows into your template all you need to do is to select where you want the rows to appear, go to insert rows and start adding them.

Adding 3 rows example


Customize the CSS styles

You can customize the CSS styles for each cell from the interface. You can change font styles, line height, color, alignment for each text content that you might like. You can even add sample content from inside the interface:

Adding CSS Styles

Creating or deleting a template in the gallery

You can create your own templates for later re-use. To create a new template, after you're done editing the layout press "Save in Gallery" button from the bottom of the Layout Editor interface. All saved templates will appear in the gallery interface in the My Category section. The saved template will preserve the content you have added in the page.

Deleting templates is only possible for the user created templates. To delete a template, press the delete button next to the template name in the My Category section in the Layout gallery interface.

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