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
Create a Blog like layout using CSS in Dreamweaver
In this tutorial we will go through the steps of creating a CSS blog like template in Dreamweaver using the Flexi CSS Layouts extension. Note: the tutorial is not about creating a blog template but about create a typical Dreamweaver site layout that looks like a blog. 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.
Requirements for this tutorial:
- Adobe Dreamweaver CS3, CS4 or CS5
- Flexi CSS Layouts Dreamweaver extension
- Installing the Flexi CSS Layouts Dreamweaver Extension
- Creating the layout structure
- Creating page section layouts
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
If you don't live under a rock probably you heard about Web 2.0 designs, or maybe your customers have requested to re-design their sites to look Web 2.0. Without entering into details about what is Web 2.0, blogs incorporate many layout elements that are modern, the new thing in town. The good news if you are a Dreamweaver user is that if your customer doesn't need an actual blog, you can make your regular sites look Web 2.0 like quite easily. Let me show you how to build a blog like layout using CSS, without tables and a little coding.
There are a few design elements that you should incorporate: header, pages menu, content area and sidebar, footer. In the sidebar you can have links to subscription services (RSS, Facebook), an area for sponsors (made out of 125x125 pixels banners) and links (categories, blogroll, latest tweets). In the design below we added an extra area on the top and put the RSS feed and Twitter follow there to make more room in the sidebar.
Create a new html file in Dreamweaver, save it and from the Flexi CSS Layouts panel select "Insert Full Page Layout". Set the width to 100%, set the min width to 1200px. Set the min height to 1010px and set the background color to #333333.
Full page Layout
You need to add 3 rows. One for the top links, the RSS Feeds and the Twitter Follow link. The second row will hold the actual blog layout, and the last row will hold the copyright notice.
Insert 3 Rows
Set the first row height to 50px, for the second row a height of 910px and for the last row 50px. Select the first row and set the background color to #003366. Go to padding and set the following: 10px for top, 10px for right, 10px for bottom, and 800px for left (this will place the links on the right of the layout). Now go to sample content and add the following code:
<a href="#link to RSS"> <img src="http://www.extendstudio.com/documentation/flexi-css-layouts/tutorials/images/rss.png" width="24" height="24" border="0"/> RSS Feed</a>
<a href="#link to Twitter account"><img src="http://www.extendstudio.com/documentation/flexi-css-layouts/tutorials/images/twitter.png" width="24" height="24" border="0"/>Follow blog on twitter</a>
(of course you need to find some icons for the rss and twitter, place them inside a folder called "images" and replace the links with the real ones).
Now select the second row and add 1 column fixed with a width of 960px and align center the column. This is where the header, content and sidebar should be created. So inside this column you need to add 5 rows. Set the following height: 20px for the first row, 120px for the second row, 50px for the third row, 700px for the fourth row, and 20px for the last row.
Adding 5 Rows
The first row with 20px height will act like a spacer between the top links and the layout. The second row will be the header and here you can add a flash slideshow, (but for now you will add just a background image): go to the General tab and under the Background Image press "Choose" and select your background image. Make sure the dimensions for your picture should be 960px in width and 120px in height.
Adding a background image
You need to set some CSS rules for your header because we will add some text. Select Border/Margins/Padding and set a padding of 20px on all sides. Now go to text and deselect inherit from parent and change the font to Trebuchet, set the font size to 18px bold and the color to white.
The next thing you need to create is the navigation menu placed under the header. If you want to add a cool flash menu directly from Dreamweaver you can take a look at the Creative DW Menus Pack. Building a menu take seconds and you can choose from a huge variety of flash custom themes.
Adding a Menu
For the next row you need to split it into 2 columns. Select the 700px height row and insert 2 columns. One column will have 660px width this will be the main content div, and the second column will have a 300px width and this will be the sidebar.
Set the background color for the main column to white and for the sidebar to #999999. Now you need to focus on the sidebar. In your sidebar you will add a subscribe div, a sponsors div and a latest tweets div. For this divs you will use section layouts. So for now, click on the "Insert" button to have the layout created in the HTML page.
Creating page section layouts
For the more complex and detailed sections of the layout, it's a best practice to create separate section layouts and insert them in the main layout. Click inside the sidebar area in Dreamweaver and press Insert Page Section Layout. Create a 300px width and 250px height page section.
Insert 2 rows into your new page section. One for the title: "Subscribe to our RSS Feeds" and the second row for the actual link and a image if you want to add a RSS image. So set the first row to have 50px in height and the second row to have 200px in height. Set the padding for the rows to 10px on all sides and for the first row set the bottom border to 1px grey.
Section RSS with 2 rows
Now let's create the second page section with the sponsors. Click after the first page section, and insert a new page section. This time set the dimensions to 300px width and 350px height. Create again 2 rows, one for the title and the second row for the ads. Inside this row you need to create 4 cells. You can create the cells by adding 2 rows and inside each row add 2 columns.
Now you need to add the last page section for the latest tweets. Create a new page section with 300px width and 300px height. Split the page section into 2 rows, the first row will have 50px height and the second row will have 250px height. Add a 10px padding on all sides for the first row. For the second row add 10px to left. Now select the second row and split it into rows. The number of the rows will represent the number of latest tweets you want to place, or the number of latest news that you want to share with your visitors.
Now you need to apply some CSS rules for the footer row. Select the last row, remember in the beginning we created 3 rows: one row for rss/tweets, another row for the layout, and the third row. This will act as your footer where you will add some copyright notice for your layout. Apply a background color #003366 and go to padding options and add the following settings: 10px for top and bottom, 20px for right and 500px for left. Change the font to Verdana, 12px bold and black color.
When your done, click insert. To preview your layout, press F12 in Dreamweaver and to deploy on the production server you need to upload the HTML page you are working on and the "includes" folder created in your site by the Flexi CSS Layouts extension.