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 a CSS layout with liquid header and footer
In this tutorial you will learn how to use the Flexi CSS Layouts extension for Dreamweaver to create a CSS layout with liquid header and footer. The header and the footer will have a background image that will be as wide as the screen and the content will have a fixed width. Using the Flexi CSS Layouts extension, this layout will look the same in all major browsers and can be done without writing code.
Requirements for this tutorial:
- Adobe Dreamweaver CS3, CS4 or CS5
- Flexi CSS Layouts Dreamweaver extension
Flexi CSS Layouts is an easy to use Dreamweaver extension that helps you create table-less HTML layouts without coding, in less than 5 minutes. You can simply create the page structure directly from the interface and the extension will automatically create the divs and CSS for your layout.
- Installing the Flexi CSS Layouts Dreamweaver extension
- Setting the layout main properties
- Adding the header, footer and content rows
- Adding background images for the header and the footer
- Uploading the page on the production server
- Suggested layout usage
Installing the Flexi CSS Layouts Dreamweaver extension
Before you open the Flexi CSS Layouts, you need to download and install this Dreamweaver extension. To download the extension, go to the product page and download a free trial, or if you have bought the product you can find the download link in your account on Extend Studio site.
After you have downloaded the Flexi CSS Layouts kit, you need to install the Dreamweaver extension. Open the archive and double click the .mxp file and the Adobe Extension Manager should open and install it automatically. Or you can extract the archive, open the Adobe Extension Manager and select install. Then search the folder where you extracted the .mxp file and click open.
After you done these steps so far, we need to open up Dreamweaver, go to the Insert Panel, find the Flexi Layouts CSS tab, and press Insert Full Page Layout.
Insert Full Page Layout
Setting the layout main properties
After the Flexi Layouts interface opens up you will see a popup window where you need to set the layout main properties. Name the layout "PageElastic", set the layout's width to 100% and the max width to 1800px. Set the layout's align to center and no background image. As a best practice, set the CSS rules to be written to an external CSS file.
Creating a new Layout
Press ok and let's get started. You need to add 3 rows: header, content and footer.
Adding the header, content and footer rows
First go to the Insert Rows tab, and select 3 rows:
Selecting 3 rows
A popup will open and you need to specify the minimum height of the rows. The first row will be the header, so give your header a height of 100px. If you have more content, the row height will increase automatically. Set the second row to 700px (should be larger because the content will come there). The last row will be the footer; set it to 100px height and press ok.
Setting the 3 rows height
Double click (on the right side of the interface)in the structure tab and name the first row as header and the 3th row as footer.
Adding background images for the header and the footer
Select the header and from the General tab, under the Background Image press the "Choose" button. Click the Browse button and locate your image. You should place the image inside the site folder. Under the repeat option select: repeat-x in order to repeat the image horizontal. If you need help in understanding how to use a background you can read more here.
Setting the header background
Here is a sample header background image.
Background image for the header
You need to repeat the steps for the footer background: go to the General tab, and under the Background image press the "Choose" button. In the popup window locate your footer background image and copy it in your site folder. Set the repeat-x option from the repeat drop down menu.
Setting the footer background
Here is the footer background image.
Background image for the footer
For the main content you need to select the second row with the height of 700px and add a fixed column and center it. Select the Insert columns tab and press 1. In the popup window set the width to 960px (this will create the fixed column) and set the column's align to center.
Adding a main content column
From the General tab you can add a background color for the column, or a background image and repeat the image horizontally or vertically or both. Just keep in mind the loading time of the web page will increase with each image. If you need some optimization tips for your layout you can see this tutorial.
Uploading the page on the server
Your new CSS layout should look something like in the picture below in the Flexi CSS layouts interface:
Full page layout
Once you click Insert, the Full Page Layout with liquid header and footer is inserted in the page. You need to fill the page with content and upload the file and the /includes folder to the testing server. Note: Before uploading the site on the production server you should set the Debug mode to off for all the files. To do this, click on "turn debug mode off" in the Flexi CSS Layouts panel in Dreamweaver.
Suggested usage of the layout
- In the header you can add your own logo and navigation menu. You can take a look at the Creative DW Menus to build a cool flash menus in seconds. Or if you like, you can add a cool flash slideshow in your header. Building a cool flash slideshow easy and fast can be done with Image Show Pro.
- In the third row (the footer) you might want a copyright notice, a sitemap link, some contact info, some tweets.
If you have any other questions, please e-mail for Support.