Halloween Offers
 

Flexi CSS Layouts for Dreamweaver

Download a free trial of   Flexi CSS Layouts for Dreamweaver
Buy Flexi CSS Layouts for Dreamweaver
Download Flexi CSS Layouts trial
See video Flexi CSS Layouts
 
box Flexi CSS Layouts for Dreamweaver

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.

 

Special offer

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.

Quick Steps

  • 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.

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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.

dreamweaver template 3 columns
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.

Download Flexi CSS Layouts for Dreamweaver trial
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6