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.

FlexiPanels CSS Tab

FlexiPanels CSS Tab

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.

Window/insert

Window/insert

3. Working with FlexiPanels CSS

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

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.