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

Understanding the main Flexi CSS Layouts interfaces

Flexi Layouts CSS has 2 main interfaces: the "Template Gallery" and the "Layout editor". The Template Gallery interface is available when you click on "Insert Layout from Template gallery" and the Layout Editor is available when you customize a layout from the gallery, when you create a Page or Section layout from scratch or when you edit a previously created layout in a page.


Accessing the Flexi CSS Layouts Interfaces

The Flexi CSS Layouts Template Gallery

The Template Gallery is used to manage the Flexi CSS Layouts templates. Here you can find the embedded templates that come with Flexi CSS Layouts, switch between the available color themes and can preview them in real time:

Template Gallery
Accessing the Flexi CSS Layouts Interfaces

Legend:

  • 1 full page layouts category - embedded layouts for full sites layouts; you can see the list of available templates for each category on the right column, select from the available color themes and insert the template in page or click on the blue button and customize the layout.
  • 2page section layouts category - embedded layouts for product listings, articles, photo galleries; you can see the list of available templates for each category on the right column; you can insert them in existing pages or click on the blue button to customize them.
  • 3 my layouts - list of your own templates saved in the gallery; you can see the list of available templates on the right column; when you are working on a layout you can save it in the gallery for later re-use; click on the blue button to customize them further before inserting in a new page.
  • 4 layouts - list of templates for each category
  • 5 preview - real time preview window for the templates; when previewing your own saved templates only the layout structure and background images will be visible
  • 6 select color themes - the majority of the embedded layouts come with various color themes; after selecting the color theme, you can insert the template in page or click on the blue button and customize the layout.

 

The Layouts Editor interface

The Layouts Editor is the main Flexi CSS Layouts interface; here you can generate your own layouts or customize the embedded templates by adding rows and columns, setting their width and height, padding margin and borders, and the CSS for the content.

Editor Interface
Default margin settings

Legend:

  • 1 editing window - here you can add rows and columns from the upper menu (Insert Columns/Insert Rows); to further customize a cell, select it in the editing window and on the right panel you have the available options for CSS styling.
  • 2CSS styling panel -for each selected cell you can edit various CSS settings: padding and margin; border; content (text) CSS.
  • 3 structure - the structure of the created rows and cells; you can browse through the cells parents and children easier in this tree structure.

 

The CSS styling panels in the Layout Editor

In the Layout Editor, on the right side you have several smaller panels where you can manage the CSS settings for each selected cell (this area is marked with 2 in the Layout Editor screen above). We have 3 CSS styling panels available:

General panel

In the "General" panel you can make the major settings for each selected cell: width, height, expand the height to all available space, background color, background image, z-index, children align.


Adding a background color

Margin/Padding/Borders panel

In this panel you can set for each selected cell the padding, margin and border for each side of the cell or for all at once. Usage of this panel is detailed here.


Default margin settings

Text Panel

In the Text panel you can make the most important CSS settings for the cells content. Usage of the Text panel is detailed here.


Default CSS settings

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