Operation Manual

148
USING DREAMWEAVER
Creating pages with CSS
Last updated 3/28/2012
Create a page with a CSS layout
When creating a new page in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver
comes with 16 different CSS layouts that you can choose from. Additionally, you can create your own CSS layouts and
add them to the configuration folder so that they appear as layout choices in the New Document dialog box.
Dreamweaver CSS layouts render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5, 2.0,
and 3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0, and 8.0; Opera (Windows and Macintosh) 8.0, 9.0, and 10.0; Safari
2.0, 3.0, and 4.0; and Chrome 3.0.
For an informational article that explains how to use the CSS layouts that come with Dreamweaver, see the
Dreamweaver Developer Center.
There are also more CSS layouts available on the Adobe Dreamweaver Exchange.
More Help topics
“Create a blank page” on page 58
“Set default document type and encoding” on page 63
“Link to an external CSS style sheet” on page 137
Create a page with a CSS layout
1 Select File > New.
2 In the New Document dialog box, select the Blank Page category. (It’s the default selection.)
3 For Page Type, select the kind of page you want to create.
Note: You must select an HTML page type for the layout. For example, you can select HTML, ColdFusion®, PHP, and so
on. You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML, XSLT, or ColdFusion Component page with
a CSS layout. Page types in the Other category of the New Document dialog box are also restricted from including CSS
page layouts.
4 For Layout, select the CSS layout you want to use. You can choose from 16 different layouts. The Preview window
shows the layout and gives a brief description of the selected layout.
The predesigned CSS layouts provide the following types of columns:
Fixed Column width is specified in pixels. The column does not resize based on the size of the browser or the site
visitor’s text settings.
Liquid Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor
makes the browser wider or narrower, but does not change based on the site visitor’s text settings.
5 Select a document type from the DocType pop-up menu.
6 Select a location for the layout’s CSS from the Layout CSS in pop-up menu.
Add To Head Adds CSS for the layout to the head of the page you’re creating.
Create New File Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the page
you’re creating.
Link To Existing File Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. This
option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a
single file) across multiple documents.