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 for an e-commerce site
In this tutorial we will go through the steps of creating an e-commerce CSS Layout with Dreamweaver using the Flexi CSS Layouts extension. We will explain how to understand the page structure and how to use the Flexi CSS Layouts to create the CSS layout without coding.
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 build the page structure directly from the interface and the extension will automatically create the DIVs and CSS for your layout; you can further customize the layout with your own CSS rules for font, background, border, padding and margin.
- Installing the Flexi CSS Layouts Dreamweaver Extension
- Creating the layout structure
- Adding content to the layout
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 extension, you need to install it in the Adobe Extension Manager. 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.
Creating the layout structure
When you think about an e-commerce layout you probably have in mind a dynamic website. We have covered the dynamic generation of a CSS layout here, and in this tutorial you will learn the details of creating the CSS layout elements for an e-commerce template without coding. First you need to set some grounds for the CSS layout, like the width of the layout, the product cell, the photo, some text and a price tag. Let's have a look at the sample layout below and see how this was done.
CSS e-commerce layout
For starters, you need to have 4 or 5 product on a single line, meaning a row, and depending on how many products you want to display on your website a number of rows.
Setting the dimensions for a product
You need to think about the dimensions of the cell holding a single product. As you can see in the picture the height of the div is 216px. If you want to add padding then you need to increase the height of the div. You need to set a width of 146px for the cell. Each cell needs two rows. One row will hold the image and the other row will hold the description and the price tag.
Creating the Layout Structure
Adding a page section
In the Insert Panel, find the Flexi CSS Layouts tab and press Insert Page Section Layout. Set the dimensions for your new page section. Set the width to 730px and the height to 864px. In order to recreate the e-commerce design you need to add 4 rows and inside the rows you need to add columns. Each row will have 216px in height.
Adding 4 rows
After you have added the rows you need to select the first one and add 5 columns. Give each column 146px wide.
Adding 5 columns
Each column represents a product containing div. You need to split each column into 2 rows, one row will have 130px in height and will hold the product image, and the second row will have 86px in height and will be the product description and the price tag area.
Adding 2 row inside a column
You need to repeat the steps and add the 2 rows for each column. Select each column from the layout and start adding the two rows for the product image and for the product description.
Creating the CSS layout
Once you have created the layout you need to add the product images (first insert the layout in the page). Because the layout has a white background, you can save the product images as jpeg and drag them to their divs. If you need help in optimizing a web page I have written an article on optimization tips. You can find it here.
A product image example
Tip: create the product images with a width of 140px and a height of 126px. The remaining pixels up to 146px width are for setting a 3 px padding left and right. And for the height, the 4 remaining pixels mean you should add a 2px top and bottom padding.
Padding for the image product
Once you have added some photos into your layout you can start editing the product descriptions. Add a 5px padding on all sides to the content divs. And add some CSS rules for the link and for the paragraph html tags.
CSS rules for the links
Change the font family for the a:link to Arial, change the size to 15px and the color to #666666. Also remove the underline option. Next you need to add CSS rules for the paragraph.
CSS rules for the paragraph
Change the paragraph font size to 12px, change the color to #333333. Make sure the font family is set to Arial.
You need to add a link for the product, and set some CSS settings like margin and padding to 0px. Next you need to add a price tag that will be placed inside a paragraph tag. The last two links are the details and a add to cart link. From now on is pretty simple you need to repeat the steps for all the cells you have created. Remember you have 5 products on a row, and there are 4 rows. That means you have 20 products displayed on your web page. You can follow the dynamic layout tutorial to find out how you could replicate each product layout using records from the database.
5 products displayed on a row
To preview your layout, press F12 in Dreamweaver. Now you have your own CSS e-commerce template. You can edit at any time this template by adding more content or page sections inside this layout and save it for later use.