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 CSS Layout for a Page Section in Dreamweaver

In this tutorial we will go through the steps of creating a CSS layout for a page section. Page sections can be article lists, product shopping pages, image galleries and any other detailed structure you might need to insert your site content. We will explain how to understand the section structure and how to use the Flexi CSS Layouts to create the CSS layout 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 simply 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 directly in the easy to use interface.

Here is the template for the page section that you are going to create, it's a simple product presetation layout:


Page Section Template

For this template we need to create two rows, one row for the title and the second row for the picture and the product description. In the second row you will have two columns.


Page Section Template

Quick Steps

  • Installing the Flexi CSS Layouts Dreamweaver extension
  • Inserting a Page Section
  • Adding content to the Page Section layout

Step 1. Installing the Flexi CSS Layouts Dreamweaver Extensions

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 download the Flexi CSS Layouts extension, you need to install the Dreamweaver extension. 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.

When you're done, open Dreamweaver, go to the Insert Panel (press CTRL+F2), find the Flexi CSS Layouts tab and press Insert Page Section Layout.


Insert Page Section Layout

Step 2. Inserting a Page Section Layout

After the Flexi Layouts interface opens, you will see a popup window where you have to set section layout main properties. Set the width for the page section to 700px and a height of 300px and press ok.


Adding a page section

You now need to add two rows, so go to Insert Rows tab and press the two rows button:


Insert 2 rows

A new popup will appear where you need to set the min-height for the rows. Set the first row with a 50 px min height and the second row with a height of 250px.


Adding 2 rows

Once you have added your rows you need to add two columns inside the second row. Set the first column's width to 200px and for the second column set a width of 500px:


Adding 2 columns

Now you need to specify the CSS rules for the title row. Select the first row, then in the right CSS Settings panel set the padding to 10px on all sides.


Adding 2 columns

Select the text tab from the flexi interface and find the h1 from the drop menu, deselect inherit and set the font family to Georgia. Set the size to 24px and set the color to black. Select the a:link from the drop down and set the font to verdana, with a size of 12px and a blue color.


Setting the CSS rules

Now all you have to do is to add some sample content to the row. Place this sample content:

<h1>Creative DW Image Show Pro</h1>
<a href="#">Get more information</a>

On the second row you need to add an image.


Sample Image

Copy the image inside the folder where you have created the html page, or if you have a folder for your images place the image there and keep in mind to write the correct path when adding the following sample code:

<img src="sample-image.jpg" width="144" height="177" alt="Sample product"  />

Set the padding for the first column to 20px on all sides and for the second column a padding of 10px on all sides; set the font to Arial with a size of 14px and set the font color to black. Here is the sample content that you should place in the second column:

<p>Creative DW Image Show PRO is a Dreamweaver extension that enables the user to create remarkable eye-catching Flash banners, Flash slideshows and any other multimedia presentations without the need for Flash. Moreover it offers support for Flash Text Effects.</p>
<p> Packed under the easy-to-use GUI you will find over 20 transition effects (+ pan & zoom effects), over 15 text effects, soundtrack support, background enhancements and many, many other features.</p>
<p> Everything can be tailored to suit your needs, including the font, because Creative DW Image Show PRO enables you to use any font you wish.</p>

These are all the steps for inserting a page section with some sample content. After you have done all these steps, click on Insert to have the code generated and inserted in your HTML page.

If you have any other questions, please send an e-mail to Support.

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