Web Marketing FAQs

Home Questions & Answers Marketing Tools and Software Basing A Dreamweaver Page On A Preset CSS Layout

Basing A Dreamweaver Page On A Preset CSS Layout PDF Print E-mail
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.
by AndrewWhiteman


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 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 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 CSS layout, before clicking on the "Create" button you need to specify the manner in which the CSS code will be linked to the HTML document. Next to the option labelled "Layout CSS" is a drop-down menu containing three options: "Add to Head" will place all of the CSS code inside the HTML document in the head section; as the name suggests, "Add to New File", will create a new external CSS file containing all the necessary code; "Link to Existing File" will put the CSS code in an existing CSS file you designate. The final option is useful if you are adding the page to an existing site that already has a CSS file which you want to continue using.

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.

About the Author:

 

Resources

Who's Online

We have 2 guests online

Like it? Share it!

Add to: JBookmarks Add to: Facebook Add to: Mr. Wong Add to: Buzka Add to: Windows Live Add to: Digg Add to: Del.icoi.us Add to: Reddit Add to: Jumptags Add to: Upchuckr Add to: StumbleUpon Add to: Slashdot Add to: Netscape Add to: Furl Add to: Yahoo Add to: Blogmarks Add to: Diigo Add to: Technorati Add to: Newsvine Add to: Blinkbits Add to: Ma.Gnolia Add to: Spurl Add to: Google Add to: Blinklist Information

Login Form



Keyword Tags

Valid XHTML 1.0 Transitional