Halloween Offers
 

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

Setting a background color or image in Flexi CSS Layouts

Using the Flexi CSS Layouts interface you can add background colors or images on DIVs (cells) or on the page body without coding. If you are using images for background then you can set the repeat property so they cover the entire available space.

Understanding the background color interface

If you want to choose a background color for your layout you can use the typical color picker:


Adding a background color

Legend:

  • Color picker color picker: if you need to copy the color from a different cell, use the color picker
  • Color preview color preview; shows the color you choose from the color palette or you inserted in the type in field
  • type in text field type in color code: if you know the color code you can type it directly
  • Cancel background color no background color: if you decided you don't need a colored background

 

Understanding the background image interface

The background image interface helps you define the path and the settings for the background image. If the image is already uploaded on a public server, you can paste the URL to it; otherwise you have to browse your local machine; if the image is not placed inside the site folder, Dreamweaver will ask you to copy it inside the local site.


Adding a background image

 

Legend:

  • 1 url, browse and delete: browse&upload for the background image, paste the URL to an image uploaded on a public server or delete the path to the image
  • 2 repeat: repeat x or y will repeat the background image on the x or y axis to cover the entire available space in the DIV; repeat will repeat the image on both x and y axis to cover the entire DIV space; no-repeat will use the background image only once
  • 3 position x: the background image will be positioned on the x axis to the predefined positions or to a custom position in pixels
  • 4 position y: the background image will be positioned on the y axis to the predefined positions or to a custom position in pixels

How to add a background color or image on a DIV (cell)

To setup a background for a DIV (cell) in the layout structure, you need to select it in the working area:


Select cell

Then in the right side panel click either on the background color button or choose a background image:


Adding a background color or image

How to add background on the entire page body

Whenever you start a new layout from scratch or you just need to change the main settings of a layout you need to use the Layout Properties interface. If you start a new empty page or section layout, the Layout Properties interface will pop-up when opening the interface. If you are already working on a layout but need to get back to the main layout settings, you can click on the "Layout Properties" button on the upper menu of the Editor. Read more about The Layout Properties Window here.

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