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

Create a CSS image gallery layout with 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. With the "Insert page section layout" functionality, you can create more detailed and complex CSS layouts for content sections that can be inserted in the full page layouts: article lists, product stores, image galleries and many more. In this tutorial you can learn how to create the layout for an Image gallery.

Requirements for this tutorial:

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 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 did these steps, open Dreamweaver and go to the Insert Panel (press CTRL + F2) to find the Flexi CSS Layouts tab.


Insert Full Page Layout

Adding a image gallery layout inside the site layout can be done very easily with the Flexi CSS Layouts Dreamweaver extension. First, you need to know the available width and height for the gallery. In your website layout, click where you want to have the gallery structure created and go to Insert Page Section Layout. Once you have set the width andf height you can start building the structure for the image gallery.


Adding a Page Section

Creating an image gallery layout

As with any other layout, you will have to visualize the structure needed for displaying images: how many images will be placed inside the gallery and how many images you want on a row. Note: as a best practice, it's easier to create columns inside rows. So think how many images you will have on a row and then think how many rows you will need; take into consideration the size of the image and the space between the images.


Grid Photos

For example if you want to add 12 photos, then you will have 3 rows with 4 columns. Create a new page section with a width of 600px and a height of 375px.


This is how our page section would look in the end

Go to the Insert Rows tab and select 3 rows. Give each row a min-height of 125px. After you have added the rows you need to add the columns.


Inserting 3 rows

Select the first row and go to the columns tab and select 4 columns. Make each column with a min-width of 150px. Select the other rows and add 4 columns in each, just like in the first row.


Inserting 4 columns

After you have created 4 columns for each row you need to add padding for each cell. So go to padding settings and add 10px for left and right, 12px for top and for bottom 13px. After you have added the padding go to the content tab and add the img code for the thumbnails. Create a folder for your thumbnails, name it "slides" and put the thumbnails inside the folder. Here is an example code for your first picture:

<img src="slides/picture1.jpg" width="130" height="100" alt="picture" style="border:1px solid #000;" />

 

You need to modify this code to add all your thumbnails. Change the picture1 with picture2, picture3 and so on. Just remember to place one line of code in each cell. If you place two lines then you will have two images inside a cell.

Note: you can also add the images to the layout from the Dreamweaver Design view interface, with drag and drop.

Uploading on the production server

When you're done with creating the gallery structure, click on the Insert button. This will insert the gallery DIVs in your existing layout. Flexi CSS Layouts also creates a folder called "includes" (inside this folder there is a folder called CSSLayouts which will contain all your CSS files). You need to upload the "includes" folder on the production server, together with the thumbnails folder.


Inserting 3 rows

This is how to create a layout for an image gallery with Flexi CSS Layout; if you want to learn more about the Flexi CSS Layouts you can see more tutorials here.

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