Generate SEO-friendly, 2-column layouts in Dreamweaver

The predefined CSS layouts in Dreamweaver CS3 and CS4 are stored in the program's main configuration folder. If you want to change the default settings for any of the layouts, all you need to do is to edit the layout in Dreamweaver, and then replace the version in the configuration folder with your amended one. First of all, though, it's a good idea to back up the originals in case you change your mind at a later date.

Backing up the original CSS layouts

The predefined CSS layouts can be found at the following locations:

Windows: C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\BuiltIn\Layouts.

Mac OS X: Macintosh HD:Applications:Adobe:Adobe Dreamweaver CS4:configuration:BuiltIn:Layouts.

They're in a similar location for Dreamweaver CS3. Just substitute the version number in the path.

Make a copy of the Layouts folder, and store it somewhere safe.

Editing a layout file

Some operating systems prevent you from editing program files, so the best way to work is to create a copy of the file in Dreamweaver, and then copy it to the program's configuration folder using administrative privileges.

In Dreamweaver, open the New Document dialog box, and select the CSS layout that you want to customize. For the sake of this example, I'm going to use "2 column fixed, left sidebar, header and footer". Make sure that the Layout CSS pop-up menu is set to "Add to Head", and click Create.

Open Split view to find the class name that Dreamweaver uses as a prefix for all style rules in the page. In the case of this example, it's twoColFixLtHdr. Save the file with the class name followed by an .htm file name extension, for example, twoColFixLtHdr.htm.

Select the sidebar1 div, cut it, and paste it below the mainContent div, just before the following line:

<br class="clearfloat" />

Delete the following property from the .twoColFixLtHdr #sidebar1 style rule:

float: left;

Add the following properties to the .twoColFixLtHdr #mainContent style rule:

float:right;
width:510px;

Change the value of the margin property from this:

margin: 0 0 0 250px;

to this:

margin: 0;

Make any other changes you want to the page, and save it.

Make sure you are logged into your computer with administrator privileges, and copy the file to the Layouts folder in the Dreamweaver configuration folder. The next time you create a page using that layout, it will reflect the changes you have made.