Adobe Dreamweaver tutorials -
Dreamweaver's Preset CSS Layouts

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

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

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

Dreamweaver's Preset CSS Layouts Screen 1

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.

Dreamweaver's Preset CSS Layouts Screen 2

As a general rule, it is normally preferable to place the CSS in an external file since this offers you greater flexibility in reusing the CSS rules contained in the file. If you don't have an existing CSS file then choose "Create New File" and then click the Create button. Dreamweaver will prompt you to choose a location for the CSS file and will suggest a cryptic name, such as " twoColElsLtHdr.css". Feel free to enter a more memorable name. When you click the Save button, Dreamweaver will create both the HTML and CSS pages.

Back to top

Macresource Web Design and Web Development Training Courses
ActionScript training | Apache training |  ASP training | ASP.Net training
ColdFusion training |  Director Lingo training |  Dreamweaver training | Flash training
FrontPage training | GoLive training | HTML training | IIS training | JavaScript training
MySQL training | PHP training | Programming training | UltraDev training
Web Design training | XML training | Free Dreamweaver tutorials
London computer training room hire

Macresource Multimedia Training Courses
Director training | Multimedia training |  Première training
London computer training room hire
Free Illustrator tutorials

 

Macresource Desktop Publishing (DTP) and Graphics Training Courses
Acrobat training | Coreldraw training |  Corel PhotoPaint training | DTP training |  Fireworks training 
Freehand training |  Illustrator training  | Indesign training | Pagemaker training
Photoshop training | Prepress training | Quarkxpress training | XML DTP training
Free QuarkXPress tutorials | London computer training room hire

Macresource Business SoftWare Training Courses
Access training | Excel training | Access VBA training | Excel VBA training
Project training | Visio training | Outlook training | Windows XP training
FileMaker training | MySQL training | PowerPoint training | Word training
Free computer software tutorials | London computer training room hire

© Copyright, Macresource 2011