CSS is a considerably more complex technology than HTML and using CSS to control the layout of your pages requires experience. Fortunately for us, Dreamweaver contains a wide variety of CSS layouts which can be used for creating both individual pages and also templates which can then be used to generate multiple pages.
To use Dreamweaver's CSS layouts, simply choose New from the File menu. The New Document window shows you all the different types of web page that Dreamweaver is capable of creating. These are arranged in categories and the preset CSS layouts are available both in the Blank Page and Blank Template categories.
If you do not wish to use any of the preset CSS layouts when creating a new document, choose "None" in the Layout column and Dreamweaver will simply create a blank HTML or XHTML page. To get a preview of a layout, simply click on its name. These previews give you an idea of what the layout will look like. Dreamweaver offers single column, two column and three column layouts available. The names of the layouts contain terms that you may find confusing such as elastic, fixed liquid and hybrid. We will examine these terms in another tutorial. For the moment, let's just look at creating an HTML page which is driven by a CSS preset layout.
Having chosen a preset CSS layout, before you click on the "Create" button, you need to specify the way in which your CSS file will be linked to the HTML document. Next to the option labelled "Layout CSS", you will find a drop-down menu with three options: choosing "Add to Head" will place all of the CSS rules inside the HTML document in the head section; if you opt for "Add to New File", Dreamweaver will create a new external CSS file containing all the necessary rules; "Link to Existing File" will cause Dreamweaver to place the necessary CSS rules in an existing CSS file you designate. This final option is useful if you're adding the page to an existing site which 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. - 16492
To use Dreamweaver's CSS layouts, simply choose New from the File menu. The New Document window shows you all the different types of web page that Dreamweaver is capable of creating. These are arranged in categories and the preset CSS layouts are available both in the Blank Page and Blank Template categories.
If you do not wish to use any of the preset CSS layouts when creating a new document, choose "None" in the Layout column and Dreamweaver will simply create a blank HTML or XHTML page. To get a preview of a layout, simply click on its name. These previews give you an idea of what the layout will look like. Dreamweaver offers single column, two column and three column layouts available. The names of the layouts contain terms that you may find confusing such as elastic, fixed liquid and hybrid. We will examine these terms in another tutorial. For the moment, let's just look at creating an HTML page which is driven by a CSS preset layout.
Having chosen a preset CSS layout, before you click on the "Create" button, you need to specify the way in which your CSS file will be linked to the HTML document. Next to the option labelled "Layout CSS", you will find a drop-down menu with three options: choosing "Add to Head" will place all of the CSS rules inside the HTML document in the head section; if you opt for "Add to New File", Dreamweaver will create a new external CSS file containing all the necessary rules; "Link to Existing File" will cause Dreamweaver to place the necessary CSS rules in an existing CSS file you designate. This final option is useful if you're adding the page to an existing site which 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. - 16492
About the Author:
Author is a developer and trainer with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver training courses at their central London training centre.
