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

Adding a Flexi CSS layout to a Dreamweaver template

In this tutorial we will go through the steps of adding some CSS columns and rows to an existing Dreamweaver Template using the Flexi CSS Layouts extension. We will explain how to understand the page structure and how to use the Flexi CSS Layouts to create and to customize a standard Dreamweaver template without coding.

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. You can build the page structure directly from the interface and the extension will automatically create the DIVs and CSS for your layout; you can further customize the layout with your own CSS rules for font, background, border, padding and margin.

Requirements for this tutorial:

Quick Steps

  • Installing the Flexi CSS Layouts Dreamweaver Extension
  • The standard Dreamweaver template
  • Creating the layout structure

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 downloaded the Flexi CSS Layouts kit, you need to install it in the Adobe Extension Manager. 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.

The standard Dreamweaver template

For this tutorial we will use one of the standard Dreamweaver templates as the main layout. Go to File->New and select html template and select 1 column fixed, centered, header and footer (of course this tutorial is applicable to any Dreamweaver template, including your own).

dreamweaver template
Select a DW Template

This template already has a header and a footer so you will add a page section inside the main content div. Remove the sample content from this div in order to add your page section.

Dreamweaver template
Dreamweaver template

Before you add the page section you need to add an editable region where you want the new CSS columns to appear. In Dreamweaver go to Insert -> Template Objects -> Editable region or simply press Ctrl + Alt + V. Save the editable region as mainregion.

dreamweaver template
Adding an editable region

Inside this editable region you can add the Flexi CSS page section. Go to the Insert Panel, find the Flexi CSS Layouts tab and click on "Insert a Page Section Layout". Set the page section width to 900px and the height to 700px. Save the page section as MainSection.

dreamweaver template
Adding a page section

Press OK and Insert 2 columns from the upper left menu. Make the first column 650px wide (this will host the main content for your css layout) and the second column will have a width of 250px. The second column will act as a sidebar where you can add a RSS feed, twitter news, facebook badge or anything else.

dreamweaver template
Adding 2 columns

Add 2 rows in the first column. Give the first row a height of 250px and the second row a height of 450px. You can use the first row for a product slideshow or banner ( if you want to create a flash slidehow in seconds you can take a look at Creative Image Show Pro that helps you create cool flash slideshows directly from Dreamweaver).

dreamweaver template
Adding 2 rows

You can add some sample content into the rows and the sidebar using the Content tab. When you're done with the template, you can add the real content from Dreamweaver itself.

dreamweaver template
Editable region with a page section

To preview your layout, press F12 in Dreamweaver. You can edit the rows and columns added with the Flexi CSS layouts at any time. Just keep in mind that this is a template and any modifications to this template will occur in any html files that were created based on this template.

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