Home > Workspace > FlexiPanels CSS workflow

FlexiPanels CSS workflow

1. Create a Dreamweaver site and page

In order to add FlexiPanels CSS in a page, this page has to be part of a Dreamweaver site; in this site, FlexiPanels CSS will create the folder includes where it will store the necessary configuration and skin files.

2. Open the FlexiPanels CSS interface

You can find the buttons for creating, editing or deleting a panel in the Insert bar, the FlexiPanels CSS category.

In order to open the Insert bar, click the Insert option in the Window top-panel, or use the keyboard shortcut Ctrl+F2. As you insert a panel in your page, the FlexiPanels CSS interface automatically opens.

3. Working with FlexiPanels CSS

There are 2 ways to create a CSS panel with the FlexiPanels Css Dreamweaver extension:

• Start from the built in panels gallery
  • Select one of the panels from the gallery. By default, when it opens, the interface displays the first section - Appereance. In this section of the interface you can browse through the panels gallery and select the one which matches your Web site design.
  • Set the content properties (font style, padding, height, color). In the Configuration Tab you can set the content properties for each element fo the panel: header, content and footer.
  • Insert the panel in your page.
• Create your own panel from a layout picture
  • From the FlexiPanels CSS tab click on the FlexiSlicer image, or open the extension and from the Appearance window click on "Create". This will open the Adobe Air based FlexiSlicer where you can cut your layout picture.
  • Cut your header, content and footer from your layout picture. Alternatively, if you have these elements already cut, you can skip to the next step.
  • Create your cutting points. You should create cutting points for your rounded corners and background.
  • Save your work as a new skin and take a screenshot with the built in tool. This will automatically add your new skin to the panels gallery.
  • Insert your panel following the steps from the "Start from the built in Gallery"

4. Configure the content of the panel

In the Configuration Tab you can set the styles for the panel Content for all 3 elements (header, content and footer). Once everything is done, you can preview your settings or insert the panel in your site.

5. Add the panel in the page

Close the interface to add the panel in the page. Click File, Preview in Browser and select one of the available browsers or use the keyboard shortcut F12 to preview how the panel looks like integrated with the content of your Web page.