Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.
Not only that you can create fixed, liquid or elastic layouts in seconds, but you can generate custom website sections with unlimited DIV levels, following even the most detailed mock-ups from your designer.
Flexi CSS Layouts documentation
Creating multiple Flexi CSS pages for a site
In this tutorial we will explain how you can create multiple site pages re-using the CSS layouts created by the Flexi CSS Layout. To be more precise, we will show how to create a page home.html and a page articles.html with minor changes between.
Note: the basics of creating a Flexi CSS layout are covered here and we will assume you have a site defined in Dreamweaver.
Create the first HTML page (home.html)
Open Dreamweaver and create a new page: home.html. Find the Flexi CSS Layouts tab (here is a short tutorial on how to install and locate the extension in Dreamweaver) and open the Template Gallery. Find one template that you like and customize it the way you want. If you need any help on how to create a CSS layout or to customize a template you can check the full documentation for the Flexi CSS Layouts here.
Customize a web layout
Once you have customized the new layout, press Insert - this will create the DIVs and CSS code for your home.html page.
Create additional HTML pages starting from the home.html
Let's say you want to create a page articles.html that only has minor differences from home.html. There are 3 steps in creating additional pages:
- Save the layout created in home.html as a template in the Flexi CSS Layouts gallery
- Create empty HTML pages and insert the template from the gallery
- Customize each page
Save the home.html layout as a template
At the previous step we have created the page home.html. We now have to save the layout as a template so we can re-use it in other pages. Open home.html and press Edit in order to open the Flexi CSS Layouts Editor. To save the layout as a template for later use press the button Save in gallery.
Save in Gallery
A popup will appear when you press Save in gallery where you can choose the name for the template and you can even add a description for the template to help you remember more when you want to use this template.
The template will be saved under the "User Page layouts" in My Layouts category. (If the layout you are saving as a template is a page section, then the template will be saved in the User Section Layouts category).
Create new HTML pages with the layout template
Let's say you now want to create a page called articles.html that will look mostly like home.html with minor changes. Create a new page in Dreamweaver called articles.html. Open the Flexi CSS Layouts Template Gallery and navigate to the My Page Layouts. Select the template that you have previously saved then click on Insert. This will populate the articles.html page with the DIVs and CSS and this page will look like home.html for now.
Adding a saved layout
Customize the additional pages
Right now you have a page home.html and a page articles.html that are identical. To customize the articles.html page, open the page in Dreamweaver and click on Edit Flexi CSS Layout. You can make all the changes in the articles.html page without affecting the layout in the home.html page. If you need more pages to be cloned and customized starting from the home.html page, then you need to create more html pages in Dreamweaver, insert the template you saved when creating the home.html page and customize each page individually.
Note: if you save home.html as articles.html in Dreamweaver, changes in one page will overwrite the layout in the other page.