Operation Manual

Note:
To the top
Note:
Fixed
Liquid
Add To Head
Create New File
Link To Existing File
Note:
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>
The above example code is a simplified version of the code that creates the two-column fixed left sidebar layout when you create a new
document using the predesigned layouts that come with Dreamweaver.
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.
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.
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:
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.
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.
Adds CSS for the layout to the head of the page you’re creating.
Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the page
you’re creating.
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.
7. Do one of the following:
If you selected Add to Head from the Layout CSS in pop-up menu (the default option), click Create.
If you selected Create New File from the Layout CSS pop-up menu, click Create, and then specify a name for the new
external file in the Save Style Sheet File As dialog box.
If you selected Link to Existing File from the Layout CSS in pop-up menu, add the external file to the Attach CSS file text
box by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and clicking OK. When
you’re finished, click Create in the New Document dialog box.
When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file
contained within it.
When you put the layout CSS in a new file or link to an existing file, Dreamweaver automatically links the file to the HTML
111