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 in Dreamweaver from a PSD design

In this tutorial we will go through the steps of creating a CSS website starting from a layout received from the designer. 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 simply 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 directly in the easy to use interface.

Requirements for this tutorial:

Quick Steps

  • Installing the Flexi CSS Layouts Dreamweaver Extension
  • Understanding the layout structure
  • Using the Flexi CSS Layouts Dreamweaver extension
  • Creating the main Layout structure
  • Creating complex pieces of 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 download the Flexi CSS Layouts extension, 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.

Step 1. Understanding the layout structure

Before anything you need to understand how to build the page structure that holds the elements from the PSD layout. Most likely you will have some generic page elements like the header, the main content, and the footer. You should plan for the other elements that you might need, for example menus, flash slideshows in the header or a sidebar with ads, category lists, facebook badge, text and images as content. You should visualize each element on the layout received from the designer (as a best practice you can print the layout then mark each element with a pen). For each element you will need to create a cell from the interface, it's as easy as working with tables. Let's have a look at this templated provided for the tutorial by www.justdreamweaver.com (it's a free template so you can download it):


Smooth CSS Image Template

These are the elements we could identify in this layout:

    Wrapper

  • header
  • logo
  • Contact info
  • top navigation menu
  • main content
  • Optional left sidebar
  • Actual content: news, products
  • Optional right sidebar
  • footer
  • copyright notice
  • Optional sitemap

As in using a printed layout and pen, let's see below which are the elements of the layout and their position. First we need to define our header. Inside our header we need to have a div for the logo and another div for the contact details. And below these divs we will have a navigation div:


Creating the header

For the main part of the layout you need to define the main content div and the right sidebar div:


Creating the main content

For the lower section define the footer div. Inside the footer we will have a copyright div and a sitemap div just like in the picture below:


Creating the footer

 

Step 2. Using 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's page and download a free trial, or if you have bought the product you can find your download link in your account on our site. If you need help on how to download the Flexi Layouts extension you can follow this tutorial.

After you have downloaded the Flexi Layouts extension, you need to install it in Dreamweaver. Open the archive and double click the .mxp file and your Adobe Extension Manager should open and install it automatically. Or you can extract the archive, open your Adobe Extension Manager and select install. Then search the folder where you extracted the .mxp file and click open. If you need help on how to install a Dreamweaver extension you can follow this tutorial.

After you did these steps open Dreamweaver, go to the Insert Panel (press CTRL+F2), find the Flexi CSS Layouts tab and press Insert Full Page Layout. See the picture below:


Insert Full Page Layout

Step 3. Creating the main Layout structure

After the Flexi Layouts interface opens up you will see a popup window where you need to set up the main properties of the layout. To replicate the justdreamweaver.com layout we will center align the layout and add a background color. We will set the layout's width to 960px. Set the CSS rules to be written into an external CSS file.


Creating a new Layout

Press ok and let's get started. We need to add 3 rows that will form the header, content and footer. To create the rows: go to the Insert Rows tab, and select 3 rows:


Selecting 3 rows

A popup will open and we need to specify the height of the rows. The first row will be the header, set it to a height of 121px. The second row will have 1100px in height because it will contain the main content and the right sidebar. The last row will be the footer - set it to 76px height. Press ok. Don't worry about the warning (because the min-height was set to 800px and now we have created rows that have a total height bigger than 800px the extension will let you know). If you don't want to see this warning, modify the layout's min-height to 1350px and then add the 3 rows. After you have pressed ok, select the second row and go to Border & Background and set the background color to white.


Adding 3 rows

Now you need to add the two rows inside the header. Select the header and press the Insert Rows button and select 2 rows. The first row will have a min-height of 78px (where we will add our logo div and the contact div). And the second row will have a 43px min-height where we will add the navigation menu:


Adding rows inside the header

We need to split the first row into 2 columns. One column will contain the logo and the second column will contain the contact info:


Adding columns inside the header

After we have added these two columns we need to specify the alignment for each column and also the padding. Set the alignment for the first column to left and the alignment for the second column to right. Select the first column and set a padding of 15px. Set the font-family to Georgia and a size of 36px and set the color to white. Select the second column and set the padding to 25px for top, 35px for bottom, 25px for left, and 10px for right. Set the font-family to Arial, set the size to 12px regular, and set the color to white. If you have done everything like me you should get something like in the picture below.


First preview of the header

Rename the second row in the header to navmenu and I suggest to use the Creative DW Menus to build a cool flash drop down menu. But if you have another idea for your navigation menu feel free to test your own ideas.

Select the second row and go to the Insert Columns tab, and select 2 columns:


Adding 2 columns for the main content and the right sidebar

A new popup will open where you should set the width of the columns. Set the first column to 700px, the second column to 260px. You can set the content align to left, center, right and none. I have set it to left. If you set a column's width bigger than the available space, the Flexi Layouts interface will show a warning.


Adding 2 columns

Name the columns from left to right: main content, and right sidebar.

Select the footer and add 2 columns with an equal width: 480px. It's just like inserting 2 columns in the first row from the header. See the picture.


Adding columns inside the footer

At this point you should have the page structure containing the header with the logo div and the contact div, the main content and the right sidebar in the center, and at the bottom we will have the footer with a copyright div and the sitemap div. Press Insert to have the DIVs and CSS created and inserted in your page. Your new css layout should look something like in the picture below:


Full Page Layout

Step 4. Getting into details (creating complex layouts for the content area) - option A

As you can see from the sample layout above, you can get into details and make the columns for the text, make cells for the images. You can build some of these here, but it might be easy to create each content section as a "section layout". In the next steps I will show you how to add the main content structure by adding into the main content div 5 smaller divs. The first div will have a 280px min-height, the second div will have a 228px min-height, the 3rd div will have a min-height of 189px, the 4th div will have a min-height of 189px and the last div will have a min-height of 220px. Select the content div and press the insert Rows button to add 5 rows:


Explaining the 5 rows inside the main content

You can split the main content div into 5 rows like I explained above, or we can add one row at a time. The easiest way is to split the main content div into the 5 rows. If you prefer to add one row at the time, just split the main content into 2 rows. The first one will have 280px and the other one will have the remaining available space. When we want to add the second row split the bigger row again into 2 rows, one with a height of 228px (our second row) and another row with the remaining height.

Now for the first row, split this row into 2 rows. The first row will contain the title of the product and the second row will contain the picture of the product and the description for the product. The first row will have a min-height of 74px and the second row will have a min-height of 206px. Now select the first row and let's add some padding of 20px, set the font-family to Georgia, set the font size to 24px and set the color to black. Select the second row and insert 2 columns, one with a width of 200px and the second row with a width of 500px.

Now for the second row in the main content. Select the row and insert 2 rows, one for the title and one for the description and the photo. We need to set for the title row the padding to 15px, set the font-family to 24px and a black color. For the second row, we will insert 2 columns. The first column will be the description div, and will have a min-width of 500px, a padding of 20px, set the font-family to georgia with a size of 14px. The second column will contain the photo and will have a min-width of 200px. You should get something like in the picture below.


Creating the first 2 divs

Step 4. Getting into details using page section layouts - option B

By now you have an idea on how to create the layout structure from the interface. You can get into details if you want and create complex structures for your content as well. There is however a quicker way to create complex and detailed structures: using a Page Section Layout.

Section layouts can be inserted into full page layouts; using section layouts is preferred for very detailed structures because you can focus on details while ignoring the main layout. The section layouts can be inserted in any cell created in the main layout. In the JustDreamweaver layout example you can add a page section inside the main content div. Select the main content div (code view or design view in Dreamweaver) and go to the Flexi Layouts tab and click Insert Page Section Layout. Create a new page section layout with a width of 700px and a min-height of 183px:


Creating a Page Section Layout

After you have pressed ok, we need to create the rows and columns inside this new page section. Press Insert Rows, select 2 rows. The first row is for the title and will have a min-height of 42px, and the second row will be for the products and the photos. The second row will have a min-height of 141px:


Adding rows into a Page Section Layout

After we have added these rows, select the second row (the bigger row) and insert 2 columns. These columns will have an equal width of 350px:


Adding columns into a Page Section Layout

After we have added these columns, your new page section should look something like in the picture below.


Quick preview of a Page Section Layout

All we need to do now is to set the padding, font family, font size, and some sample content inside our new page section. If you want to edit later this page section just select it and press edit. The Flexi Layouts will recognize automatically your page section and you will edit only the page section and not the entire layout.

Moving on to the 4th div, select it and add a new page section. This time set the min-height to 189px and a width of 700px. Do the same steps like in the first page section and add 2 rows. The first row with a min height of 42px and the second row with the remaining min height available. In the second row insert 3 columns this time. Again the Flexi interface will try to split them equal and that is what we want. You should have something like in the picture below:


Quick preview of the second Page Section

We need to set the padding, font family, font size, and color for the second page section. Select the first row and set the padding like in the previous page section, to 10px for all sides. Set the font family to Georgia, set the font size to 22px and set the color to blue. Select the second row and set the padding to 5px for all sides, set the font family to georgia, set the font size to 12px and set the color to black.

Adding the last page section in the main content: create a new page section with a width of 700px and a min-height of 200px. Add 2 rows, the first row will have 42px min-height and the second row will have the remaining height. Split this second row into 4 columns with an equal width. After that set the padding for the first row to 10px on all sides and set the font family to Georgia, set the font size to 22px and change the color to blue. For each of the 4 column set the padding to 5px, font size 12px and color black. The last page section should look something like in the picture below:


Quick preview of the last Page Section

All you need now is to add some sample content for the right sidebar. Lets use some ul html tags with some css rules. Here is the sample for the right sidebar:

 
  <!-- Start right column --> 
    <DIV id="rightColumn"> 
      <DIV class="simplemenu"> 
        <H5 class="headerbar">SIMPLE Menu 
        <UL> 
          <LI> View with right sidebar</LI> 
          <LI>View with left sidebar 
          <LI>View 3-column layout</LI> 
        </UL> 
      </DIV> 
      <DIV class="styledmenu"> 
        <H5 class="headerbar">Styled Menu 
        <UL> 
          <LI>Navigation Item Here</LI> 
          <LI>Navigation Item Here</LI> 
          <LI>Navigation Item Here</LI> 
          <LI>Navigation Item Here</LI> 
          <LI>Navigation Item Here</LI> 
        </UL> 
      </DIV> 
<H3>Optional Sidebar Info </H3> 
      <P>Any information can be placed in the sidebar to help your website visitors navigate your site.</P> 
      <P>To make a boxed heading like the one above, simply apply the H3 tag.</P> 
      <P class="sidebarlt">To make a box like this, assign the "sidebarlt" class.<BR> 
        <BR> 
        You can do anything with a sidebar box. Insert images, ads or other web content.<BR> 
        <BR> 
        Here's a text link.</P> 
      <P class="sidebardk">To make a box like this, assign the "sidebardk" class.<BR> 
        <BR> 
        You can do anything with a sidebar box. Insert images, ads or other web content.<BR> 
        <BR> 
        Here's a text link.</P> 
</DIV> 
    <!-- End right column --> 

 

If you have any other questions, please use the product Support forum.

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