Home > Creating your first panel > Create your own panel from a layout picture

Create your own panel from a layout picture - Workflow

FlexiPanels CSS 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. You can save the result as a new panel and add it to the gallery for later use.

Before going further, you need to install FlexiPanels on your computer (a free trial or a licensed version) - this will also install the FlexiSlicer tool. You can find Flexipanels on the Extend Studio Web site. More information about the extension installation and registering you can find in the Installation section of the documentation. You also need to have the page where you want to insert your panel as part of a Dreamweaver site, as Flexipanels creates a folder where its dependent files are kept.

To create your own panel from a design, follow these steps:

1. Open the FlexiPanels CSS Tab

  1. Open Adobe Dreamweaver and create a new file; the file has to be part of a Dreamweaver site.
  2. Create new page

    Create new page

  3. In the Insert bar, select the FlexiPanels CSS tab;

    FlexiPanels CSS Tab

    FlexiPanels CSS Tab

  4. In order to open the Insert bar, click Window, Insert from the top menu in Dreamweaver or use the Ctrl + F2 keyboard shortcut.
  5. Window/insert

     

     

  6. Click on the FlexiSlicer button in the Tab and in the new window start to cut the panel elements - header, content and footer using the cropping tool. See the detailed documentation about getting the Panel elements from a page layout.
  7. After you have all the design elements you should create the cutting points for the round corners and background picture. Repeat this operation for the header, content and footer as necessary. See the detailed documentation about Setting up the cutting points in FlexiSlicer
  8. FlexiSlicer cutting points

    FlexiSlicer cutting points

     

  9. After cutting all the design elements, switch to the Configuration tab to create the default style for the Panel content. The default style will be saved together with the design elements cut as a new panel in the gallery. The default style can be edited later for each site page.
  10. FlexiSlicer Configuration tab

    FlexiSlicer Configuration tab

     

  11. Click on Update preview to see your work and save the skin once you are satisfied. The new shin will appear in the Panels gallery, together with the readymade panels.
  12. Close the FlexiSlicer and open FlexiPanels CSS.
  13. In the Appearance tab we will give the panel a name and let you select the predefined panel and color schema from the gallery. From the right column choose the panel width and if it should fit to content or not. You can set the header, content or footer to display or not.
  14. FlexiPanels CSS Appearance tab

    FlexiPanels CSS Appearance tab

  15. Switch to the Configuration tab. From this new window, for each panel element (header, content, footer) you can:
    • Use the embedded classes or your own
    • Select background behavior: repeat or strech
    • Set the element height or fit to content
    • Set the content properties (font style, padding, height, color)
    • Set the content padding
  16. FlexiPanels CSS configuration Tab

    FlexiPanels CSS configuration Tab

     

  17. Click the Save button at the bottom of the interface to save the changes; following, click the Close button to add the panel to your page. As you can see, the panel was embedded in Design View as well as in Code View.
  18. In the File panel, click Preview in Browser and select a browser from the list or click F12 to preview the page in your default browser.