FlexiPanels CSS for Dreamweaver

FlexiPanels CSS for Dreamweaver is a CSS builder that helps you create table-less HTML code for side panels, menu containers or any content zones with a gradient background and rounded corners. Start from a layout picture from your designer or implement any of the 30 ready-made panels and the extension will create the standard compliant DIVs and CSS ready to be implemented in your site, without writing manual code!

FlexiPanels CSS main features

• It's a Dreamweaver extension that creates CSS boxes, containers and nuggets
• Generates rounded corners Css layouts with Table-less code
• 30 built in panels, 5 schema colors each
• Adobe Air based FlexiSlicer to create your own panels
• Store preset layouts and make individual settings for each site page
• Preview panels without updating the files
• Repeat or stretch gradient CSS background
• Set fixed width and height or fit to the content of the CSS table
• Set the content properties (font style, padding, height, color)
• Use the embedded classes or your own
• Dreamweaver inspector for on the fly changes
• Works with Dreamweaver CS3, CS4 and CS5

Tutorials

• How to create a CSS box with rounded corners
• Using FlexiSlicer Air application to cut a rounded corner CSS box
  

Watch the demo videos

Get up to speed quickly with the video tutorials:

 See more video tutorials and use cases

Requirements

PC:  OS: Windows 2000 (and above), Adobe Dreamweaver CS3, Adobe Dreamweaver CS4 and CS5, JavaScript enabled browser.

MAC: Mac OS X 10 (and above), Adobe Dreamweaver CS3, Adobe Dreamweaver CS4 and CS5, JavaScript enabled browser.

Adobe Air: for FlexiSlicer (optional)

FlexiPanels has been tested on the following browsers:

• Mozilla Firefox 3  -  3.5 
• Opera 9 – 9.6 
• IE 6, 7, 8 
• Chrome 1,2
• Safari 3,4

If you use the readymade panels

• The extension comes with 30 Predefined panels (5 or more color themes each)
• It’s very fast: select the panel  from the gallery and insert it in the page
• Creates a flexible DIVs + CSS structure that allows you to insert content and the resize of the panel elements (header/body/footer) without breaking the design
• Include or exclude panel’s header, content or footer
• Adjust the panel width and height and the content properties (font style, padding, height) 

If you start from a layout picture

• Comes with FlexiSlicer  - an Adobe Air based tool that helps you get the panel design from a layout, slice and  export all the necessary images that will be used in the CSS
• With FlexiSlicer you can crop sections from your layout and change the color of the graphical elements on the fly
• Creates a flexible DIVs + CSS structure based on your cutting points
• The panel elements (header/body/footer) can be resized from the extension interface without the need to create a new graphical design
• You can save the result as a new panel and add it to the gallery for later use