Cascading style sheets (CSS) is a far more complex technology than HTML and using CSS to control the layout of your pages requires experience. Fortunately, Dreamweaver offers a wide variety of CSS layouts which you can use to create both individual pages and also templates which can then be used to generate multiple pages.

To gain access to Dreamweaver’s preset CSS layouts, simply choose New from the File menu. The New Document window gives access to all the different types of web page that Dreamweaver is capable of creating. These page types are arranged in categories and CSS layouts are available both in the Blank Page and Blank Template categories.

If you choose the option « None » in the Layout column, no CSS file will be created; Dreamweaver will simply give you a blank HTML or XHTML page. Clicking on the name of each of the preset layouts displays a preview on the right. This gives you a rough idea of what the layout will look like. There are three column, two column and single column layouts available. These layouts use certain jargon that you may find confusing such as elastic, fixed liquid and hybrid. We will discuss these terms in another tutorial. At the moment, we are just concerned with creating an HTML page which is driven by one of Dreamweaver’s CSS layouts.

Having chosen a CSS layout, before clicking on the « Create » button you need to specify the way in which the CSS file will be linked to the HTML document. Next to the option labelled « Layout CSS » is a drop-down menu with three options: « Add to Head » will place all of the CSS rules inside the HTML document in the head section; « Add to New File », as the name suggests, will create a new external CSS file containing all the necessary rules; while « Link to Existing File » will place the necessary CSS rules in an existing CSS file you designate. This last option is useful if you’re adding the page to an existing site that already has a CSS file which you want to keep using.

As a general rule, it is almost always preferable to place the CSS in an external file since this offers you more flexibility in reusing the CSS rules contained in the file. If you don’t have an existing CSS file, simply choose « Create New File » and then click the Create button. Dreamweaver will prompt you to select a location for the CSS file and will suggest a condensed, abbreviated name, such as  » twoColElsLtHdr.css ». Feel free to enter a different name. When you click the Save button, Dreamweaver will then create both your HTML page and external CSS file.

Find More CSS Articles