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

Generate a CSS layout in Dreamweaver using PHP & MySQL and the Flexi CSS Layouts 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.

But what if you want a section of the layout to be repeated with content from the database? In this tutorial I will show you how to create an article list using CSS for the layout and content from the database and insert the article list in an existing layout.

Installing the Flexi CSS Layouts Dreamweaver extension

Requirements for this tutorial:

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

Open Dreamweaver and go to the Insert Panel (press CTRL + F2) to find the Flexi CSS Layouts tab.


Insert Full Page Layout

 

Creating the database for the articles content

For this tutorial I have created a very simple database structure that holds the article's title, text and link to read more. You can create your own database with the content you need and the steps are the same. Here is the database structure SQL:

CREATE TABLE `extendstudio`.`article_list` (
`id_art` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`title_art` VARCHAR( 250 ) NOT NULL ,
`text_art` TEXT NOT NULL ,
`link_art` VARCHAR( 250 ) NOT NULL
) ENGINE = MYISAM;

and some dummy content:

INSERT INTO `article_list` (`id_art`, `title_art`, `text_art`, `link_art`) VALUES
(1, 'Article 1', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rutrum, leo ut commodo scelerisque, diam nunc rhoncus arcu, hendrerit viverra arcu leo eget nisi. Aenean quam urna, aliquet quis, varius tristique, porta id, tellus. Sed ligula. Vivamus sem. Vestibulum eu nisl sed eros convallis varius.', 'http://www.extendstudio.com'),
(2, 'Article 2', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rutrum, leo ut commodo scelerisque, diam nunc rhoncus arcu, hendrerit viverra arcu leo eget nisi. Aenean quam urna, aliquet quis, varius tristique, porta id, tellus. Sed ligula. Vivamus sem. Vestibulum eu nisl sed eros convallis varius.', 'http://www.extendstudio.com'),
(3, 'Article 3', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rutrum, leo ut commodo scelerisque, diam nunc rhoncus arcu, hendrerit viverra arcu leo eget nisi. Aenean quam urna, aliquet quis, varius tristique, porta id, tellus. Sed ligula. Vivamus sem. Vestibulum eu nisl sed eros convallis varius.', 'http://www.extendstudio.com');

Create the article layout

There are a few steps you should follow to successfully implement the article list. First you need to have an existing layout (I'm using a basic template to showcase the usage), create a basic article template, make the SQL that pulls the content from the database then use a repeated region Server Behavior to generate the list of articles from your article template. Here is the basic site template for the tutorial (it should be in a PHP file so we can use server side coding):

3 columns fixed layout

I'm going to replace the content below "Page title" with the article list. Let's create the layout for an article first. Delete the text below Page title and in the Insert Panel where you can see the Flexi CSS Layouts tab click on "Insert page section Layout".

This will open a pop-up window where you should set the main properties for the section:


Adding a Page Section

In the pop-up I will set the width to 500px and height to 200px and leave the other settings on default (you need know the available width and height for the article list in your layout, otherwise if the width is too big it will break the design). You need to add 3 rows (one will be for the article title, the second for the text and the third for a "Read more" link.

Adding 3 rows
Adding a 3 rows

In the next screen you need to set up the minimum height for each row (if you have more content the height will autoexpand so you don't need to worry about that). I've set the first row to 25px, last row 20px and the middle row to the remaining space (note how the interface calculates the remaining space):

Rows autocalculate
Rows height is autocalculated

You should do some CSS settings for the text in each row. I will add a 10 px padding left and right for each row (to do this, select a row, then in the CSS Styling panel on the right open the Border/Padding/Margin tab and change the padding values:

Set the Padding
Set the Padding

For the title row I want the text to be bold, so click on the top row and from the right CSS Styling panel go to the Text tab, deselect "inherited" and click on the Bold symbol:

Set the font to Bold
Set the font to Bold

 

Pulling the content from the database

To extract the content from the database you need to create a very basic SQL. Click on Bindings in the Dreamweaver interface and on the "+" sign, then select Recordset (Query).

Bindings
Click on Bindings

Don't worry, it's so basic that Dreamweaver will make the recordset for you. In the Recordset you don't really need to make any changes (if you have the connection well set), Select the article_list table and sort the records after id_art:

Recordset
Recordset

Click "OK" - this will create the SQL in the page. From the Bindings panel drag "title_art" in the first row of the section layout. Also drag the text_art in the midle row.

Drag
Drag from Bindings

For the bottom row, click inside and in the code window write the following code: <a href="">Read more</a> then drag link_art from the Bindings panel like this:

<a href="<?php echo $row_Recordset1['link_art']; ?>">Read more</a>

Displaying the entire list of articles

So far we have created an article, now we have to repeat it for all the records in the database. Switch Dreamweaver to Design view and select the article by clicking on the label just above the article section (in my screenshot the label is SectionLayout 176):

Article section
Select the Section Layout

Go to Server Behaviors panel in Dreamweaver, click on the "+" sign and select Repeat Region:

Server Behaviors
Server Behaviors

The next Pop-up is quite easy to use. From the first drop-down you have to select the recordset you have created earlier to retrieve the content from the database and select "All records":

Repeat Region
Setting the repeat region

Testing and deploying on the production server

If you have correctly set the testing server, testing the article list is easy: press F12 in Dreamweaver and this should open the default browser and show the page content. To deploy on the production server you need to copy the PHP file you are working on and the "includes folder" (the Flexi CSS Layouts extension creates a folder named "includes" in the site and place all needed files there).

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