Professional Documents
Culture Documents
Dreamweaver comes with several pre-designed layouts and style sheets to help get you started building webpages. To build a page from a Dreamweaver layout: 1. Go to File menu > New to open the New Document window.
2. Choose Blank Page and then HTML as the Page Type. 3. Under Layout, choose a Dreamweaver CSS page layout. Click on a layout to see a preview and explanation. 4. For DocType, leave the default selection. 5. Choose an option for Layout CSS (the options are available once a layout is selected). This tells Dreamweaver where to place the CSS rules which style the layout. a. Add to Head: adds the rules to the top of the new HTML page. b. Create New File: places the rules in an external document which the HTML page links to. c. Link to an Existing File: choose your own CSS file, for example if you already have a styled CSS file for this layout. 6. Click Create to close the dialogue box and create the HTML page. 7. If you chose Create New File under Layout CSS you will be prompted to save the CSS file. Choose an appropriate location within your Dreamweaver site for this project. Begin working in your new HTML document. Replace the default text with your own content. If the layout includes a sidebar, read the explanation in the first paragraph before deleting it. Dont forget to save your new HTML file.
Layout options
You can choose 1, 2 or 3 column layouts with or without a header and footer. Three-column layouts have a left and right sidebar. With two-column layouts, you can choose either a left or right sidebar. Column widths can be fixed, elastic, liquid or hybrid.
Column type Elastic Fixed Liquid Hybrid Explanation The design adapts if the browser text size changes but not if the size of the browser window changes. Column width is relative to the size of the text (ems). The column does not resize based on the size of the browser window or the text settings. Column width is specified in pixels (px). The design adapts if the width of the browser window changes but not if the text settings change. Column width is a percentage of the browser width (%). Columns are a combination of the above options.
Div tags
Dreamweavers pre-designed CSS layouts are based on div tags (shown by the pair of tags <div> and </div>). Dreamweaver CS4 user guide explains:
You can create page layouts by manually inserting div tags and applying CSS positioning styles to them. A div tag is a tag that defines logical divisions within the content of a web page. You can use div tags to center blocks of content, create column effects, create different areas of color, and much more.
From the bottom of the CSS Styles panel you can also do the following:
1 2 3 4 1. Attach Style Sheet 2. New CSS Rule 3. Edit Rule 4. Delete CSS Rule
New CSS Rule or Edit Rule opens the rules definition dialogue box, another method of setting properties for a CSS rule.
3. In Summary for Selection at the top of the CSS Styles panel, select the property you want to modify. 4. Change the setting in the Properties section of the panel. All other properties set by the same rule are also shown. Those with a strike-through line are irrelevant to the selection.