Flexi CSS Layouts for Dreamweaver

Download a free trial of   Flexi CSS Layouts for Dreamweaver
Buy Flexi CSS Layouts for Dreamweaver
Dreamweaver CS6
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

Applying CSS styles to content areas

With Flexi CSS Layouts Dreamweaver extension you can change without coding the CSS styles for the content inside a cell (DIV): paragraphs, links, h1, h2 and more. Depending on the content you are planning to have in a cell you will need to set more or less CSS parameters. For example if you will have a H1 title and some content text in a cell you need to select that cell in the working area, then set both the H1 and P styles from the Text styling panel on the right column.


Selecting a cell in the working area

 

What can you style via the CSS styling panel in Flexi CSS Layouts?

When we designed the Flexi CSS Layouts functionalities we decided that setting the most important CSS styles (than can be applied to the content inside DIVs) should be done without coding from the interface. You can style: text, <p>, a:link, a:hover, a:visited, a:active, h1, h2, h3. If these tags are repeated inside the same DIV, then the styles will apply on each instance. But what do these tags mean?

  • text - styles text inside a DIV, that is not included between any other tags, for example:
    <!-- column_3 Content Starts Here --> text styled <!-- column_3 Content Ends Here -->
  • <p> - styles the text inside <p></p> tags, for example:
    <!-- column_3 Content Starts Here --> <p>text styled</p> <!-- column_3 Content Ends Here -->
  • a:link - styles the un-visited links, HTML code looks like a regular link:
    <!-- column_3 Content Starts Here --> <a href="http://www.mysite.com">text styled</a> <!-- column_3 Content Ends Here -->
  • a:visited - styles the links that have been visited, HTML code looks like a regular link:
    <!-- column_3 Content Starts Here --> <a href="http://www.mysite.com">text styled</a> <!-- column_3 Content Ends Here -->
  • a:hover - styles the look of the links on mouse over, HTML code looks like a regular link:
    <!-- column_3 Content Starts Here --> <a href="http://www.mysite.com">text styled</a> <!-- column_3 Content Ends Here -->
  • a:active - styles the look of the selected links, HTML code looks like a regular link:
    <!-- column_3 Content Starts Here --> <a href="http://www.mysite.com">text styled</a> <!-- column_3 Content Ends Here -->
  • h1, h2, h3 - styles the HTML headings, for example:
    <!-- column_3 Content Starts Here --> <h1>Title styled</h1> <!-- column_3 Content Ends Here -->

Typical content zone inside a DIV
You can have content inside a cell anyway you like and while there isn't a "good or bad" way, this is a typical content HTML sample:

<!-- column_3 Content Starts Here -->

<h1>Title goes here</h1>
<p>This is a sample content that you can have inside of a layout cell. You can see more following this <a href="http://www.yoursite.com">link</a>.</p>

<!-- column_3 Content Ends Here -->

Adding CSS styles to text

If you want to add custom CSS rules to the text in a cell, go to the text tab and uncheck the "inherit from parent" button.


Default CSS settings

Once you have unchecked the inherit option, you can apply custom CSS rules on your content. You can choose the font family (the default font family is set to Arial, Helvetica and sans-serif), but you can choose any other fonts from the drop down list.


Change the font family

You can change the font's size by choosing the type: pixels, percentage or elastic. And you can use any size you might want. You can have a 32px font or a 75% font size. You can even set the line height of the text. You can set a pixel, percentage or elastic size.


Change the size

You can change the style of your content. You can have bold, italic or underline text content. You can choose where to align your content: to left, center or right.


Change the style

You can change the color of your text content. You can select a color with the eyedropper tool or you can add your own color by entering the hex code for that color.


Change the color

Adding CSS styles to links

If you want to add custom CSS styles for your links. deselect the inherit button. You can choose a different font family for your links, or a bold style, or you can remove the underline style. You can also choose a different size and color for your links.


Apply CSS Styles

Adding CSS styles to headings

If you want your headings to have custom CSS rules, deselect the inherit option and apply the same CSS rules as for the standard text. You can change the font family, you can set a custom size, custom style, alignment or a custom color.


CSS Styles for Headings

Understanding the Inherit concept for the Full Page Layout

As described above, for each cell you can have the text CSS settings inherited. This means that the same CSS rules are applied as for the parent cell (and this goes up to the <BODY> CSS if all the cells have inherited on):


Inherit uses the CSS from the parent cell

This means that if you set a text CSS style on the Page Body, it will apply to all cells unless you make custom settings for that cell. So you should make some text CSS settings at least on the Page Body. You can use the interface, or if you feel like writing your own code, you can add CSS styles in the LAYOUTNAME_user.css file (you can read about the files and folders structure) or in the head of your page if you choose to have the CSS "in head". For example, to change the CSS style for h1 tags you should add this code:

body h1{

font:Verdana, Geneva, sans-serif;
color:#F00;

}

Understanding the Inherit concept for the Page Section Layout

Inheriting works the same way for page section layouts: if for a cell you have checked "inherit from parent" then the parent styles will be applied. The upper-most element is the "layout_wrapper" - you can make settings here that will be used by all inheriting cells or, you can have the "layout_wrapper" to inherit from the main CSS of the page. If you have created the main CSS for the page manually, then the cells will inherit your CSS. If the section layout is inserted in a Full Page Flexi CSS Layout, it will inherit these settings.


Inheriting from the main layout CSS settings

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