Flexi CSS Layouts for Dreamweaver

Download a free trial of   Flexi CSS Layouts for Dreamweaver
Buy Flexi CSS Layouts for Dreamweaver
Dreamweaver CS6
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

Getting started tutorials

Using Flexi CSS Layouts for the first time
Requirements, download and installation of the Dreamweaver extension and locating the interfaces

Fixed, elastic and liquid CSS layouts. Which one is right for me?
Understanding the 3 types of CSS layouts and their best usage

Creating a 3 columns fixed CSS layout
Create a basic site layout with Flexi CSS Layout

Using the Flexi CSS Layouts template gallery
Quick layout creation starting from the gallery of ready-made templates

Adding a CSS Layout for a Page Section in Dreamweaver
Understanding the concept of page section layout

Create multiple pages for a site using the Flexi CSS layouts
How to create home.html and articles.html in a site

How to create a site quick using the full templates in the Flexi CSS Layouts gallery
Changing the links from the menus, creating several pages using the templates
 

 

Advanced tutorials

Files and folder structure created by Flexi CSS Layouts Dreamweaver extension
The structure created by the extension and files where you can add your custom CSS or make changes

CSS3 rounded corners and gradient background color
Starting version 1.1.276, Flexi CSS Layouts comes with rounded corners and background color gradient - CSS3 features.

Creating a CSS layout in Dreamweaver from a PSD design
A step by step guide to understand the Flexi CSS Layouts workflow

Creating a Blog like layout using CSS in Dreamweaver
The basics of Web 2.0 layouts

Create a CSS image gallery layout with Flexi CSS Layouts Dreamweaver extension
Using the page section layouts to create an image gallery

Generate a CSS layout in Dreamweaver using PHP & MySQL
Using the Flexi CSS Layouts extension with dynamically generated content

Adding a Flexi CSS layout to a Dreamweaver template
Adding more rows and columns to a standard Dreamweaver template

Creating a CSS layout with liquid header and footer
How to build a layout where the header and footer expand to the full screen size

Create a CSS layout for an e-commerce site
Setting up a complex product shopping cart structure

Insert Page Section layout inside a Wordpress Post
How to create a layout and make it work inside a Wordpress post

 

FAQ and documentation

Common issues and FAQ

Understanding the main Flexi CSS Layouts interfaces

The Layout Properties Window

Setting a background color or image

Adding Margin/Padding/Borders to the Flexi CSS Layouts

Applying CSS styles to content areas in Flexi CSS Layouts

Note: 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.

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