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

Files and folder structure created by Flexi CSS Layouts Dreamweaver extension

In this tutorial we will explain what files and folder structure is created by the Flexi CSS Layouts Dreamweaver extension and where they are located. We will also explain what files you could manually modify to customize the layouts.

Note: this is an advanced tutorial. If you need to understand the basics of using the Flexi CSS Layouts, you can follow this tutorial.

Depending on what type of layout you are creating (a full page layout, section page layout or a layout from the template gallery) the Flexi CSS Layouts extension will create a number of files and folders and reference to them in the page <head>

References to the files and folders in the generated DIVs and CSS

  • When creating a layout, the Flexi CSS Layouts Dreamweaver extension creates references to the standard files:

<link href="includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/CSSLayouts/debug_plus.js"></script>
<link href="includes/CSSLayouts/LAYOUTNAME.css" rel="stylesheet" type="text/css" />
<link href="includes/CSSLayouts/LAYOUTNAME_user.css" rel="stylesheet" type="text/css" />

  • Images and background images

When using layouts from the template gallery, the images are placed inside specific folders in the CSS Layouts folder. You can recognize these specific folders by their naming (with _assets).

Folders created by the Flexi CSS Layouts Dreamweaver extension

When you are inserting a Flexi CSS layout in a page, the extension will create (in the root of the site) a folder called includes and inside the folder includes, there will be a folder called CSSLayouts.
Here is how a typical includes folder will look like:

 

Files for a web 2.0 CSS layout
Necessary files for a Flexi CSS Layout

Inside the CSSLayouts folder are placed all the necessary files for the Flexi CSS Layouts. Let's explain the files that are placed and what is their purpose.

  • There are some internal configuration files
  • These files are called config.cfg and panels.cfg and are necessary for the Flexi CSS Layouts to work. When you create your own page layout there will be another configuration file placed inside the CSSLayouts folder and this file is called previewData.cfg. You don't need to edit anyting in these files.

  • There are some javascript files
  • These files are called debug_plus.js and debug_plus.preview.js. These files are necessary when using the debug mode and debug preview in your browser. You don't need to edit anything in these files. When you are turning the debug mode on or off, you have to upload these files to the testing server.

  • The CSS files
  • The first CSS file is called CSSLayouts.css and this the main CSS file for the CSS Layouts. Do not modify any CSS in this file.
    The second CSS file will have the name that you gave to your layout. For example, if you named the layout "test" when opening the Flexi CSS Layouts interface, a file test.css will be created. This file will hold all the rules for the divs inside the layout. Do not modify any CSS in this file.

    The third CSS file will have the name of the layout + "_user".css. In this file you can add your own CSS for the content divs inside the layout.

  • A png file
  • This file hold the debug icons that are used for the debug view.

  • The _assets folder which will include all the necessary images for the template if you are starting from a Web 2.0 template/Full template/Section Page template from the Gallery
  • This assets folder will have a name accordingly with the web template that you selected from the gallery.
    Note: if you want to save your own layout as a template in the Flexi CSS Layouts template gallery for re-use, you should manually create a folder LAYOUTNAME_assets and place the images used in the layout there, before saving the layout as a template. The images saved in the LAYOUTNAME_assets will be recognized by the template gallery, and each time you create a page based on the template, the images will be linked to their location in the LAYOUTNAME_assets folder.

     

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