I am happy to get a chance to try out the Flexi CSS Layouts from ExtendStudio. In short, Flexi CSS Layouts is a Dreamweaver plugin that allows you to create CSS layouts without writing a single code from yourself. Sounds interesting? Let us move on!
Some designers have difficulties in using CSS to form up their web pages so they prefer using tables, which is much easier to visualize the final output. Flexi CSS Layouts now allow you to create CSS codes using a method similar to inserting tables. Here are the basic steps in making your own custom page.
Step 1: Open up your Dreamweaver after enabling Flexi CSS Layouts plugin with Adobe Extension Manager. Select the "Flexi CSS Layouts" tab below the main menu and choose "Insert Full Page Layout".
Step 2: An editor will pop up and ask you to fill in general information (such as width, height, background and etc) for the page to create.
Step 3: Insert number of rows and columns exactly the same way as you will do for tables. You can even set the properties for each row and column individually with the right side panels.
Step 4: Click "OK" when you are done with the insertion. The editor will then close and this is what you will get in Dreamweaver. You can then build your web page further using the methods that you are familiar with. To learn more, check out the video tutorials over here.
If you still find it is troublesome to create your own CSS using the editor, there are 55 editable CSS templates included to help you too. You will get fixed, liquid or elastic CSS layouts with 1, 2 or 3 columns and also web2.0 layout templates that you never seen in Dreamweaver before. Below are some of the templates available.
Ready to start? Head over to ExtendStudio now!