
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.
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
Understanding the main Flexi CSS Layouts interfaces
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.
Tutorials
Output Compatibility














