Dreamweaver CSS layouts and style sheets

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.

NSW DET 2010

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.

Here is a simple explanation of Div web design.

CSS layout example

Below is an example of a new Dreamweaver HTML document based on the layout 2 column elastic, left sidebar, header and footer. The CSS Styles panel is displayed on the right.

NSW DET 2010

Cascading style sheets (CSS)

CSS is a set of formatting rules that determine the appearance of content in a web page. For example you can define font and font size as well as the colour of text, links and backgrounds. You can also use CSS to format and position elements known as block-level elements (h1 tags, p tags, and div tags all generate block-level elements). You can set margins, borders, page position, background colour and other properties of a block-level element. You can layout pages by controlling block-level elements with CSS. Use CSS to maintain consistent appearance of the pages in your web site and when viewed in different browsers. CSS rules can be placed in the HTML file, usually the head section. More often they exist in an external file so the CSS rules can style multiple pages. A webpage can link to more than one style sheet. Style sheets can style a page for a particular media such as print or mobile device. Dreamweaver includes some sample style sheets (CSS Styles panel > Attach Style Sheet (link icon) > sample style sheets hyperlink).

CSS Styles panel

Using the CSS Styles panel is one way to work with CSS rules. When the All button is selected, the top pane in the panel lists all the rules relating to the current HTML document. CSS rules that reside in the head of the document are listed under <style>. CSS rules in external style sheets are listed under the relevant CSS filename. Select a CSS rule to display its properties in the bottom pane.

Modify a CSS rule

To modify a CSS rule, select the rule and redefine one or more of its properties in the bottom pane of the panel. You can set additional properties or remove existing property settings. In the example above, to change the font colour, select the body rule then click on the black square beside color and choose a new colour from the colour palette. There are three ways to view the properties of a rule:
1 2 3 1. Category view 2. List view 3. Show only set properties

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

NSW DET 2010

New CSS Rule or Edit Rule opens the rules definition dialogue box, another method of setting properties for a CSS rule.

Working with current styles

With the CSS styles panel in Current view you can work with CSS styles based on the selected item in your document. The panel has three panes of information: 1. Top: Summary for SelectionCSS properties, and their values, that apply to the item selected in the document. 2. Middle: content depends on the view selected at A: About view shows the CSS rule that defines the selected property and where it is located. Rules view shows a cascade of rules that apply to the property with the tags to which they directly apply on the right. 3. Bottom pane: Properties allows you to edit properties for the selected CSS rule. To work in Current view: 1. Ensure the Current button is selected at the top of the CSS Styles panel. 2. Click in the part of your webpage to restyle. If you dont select a tag in the tag selection bar the last tag will be the selected item.
Tag selection bar
A

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.

Moving CSS rules

You can move rules from one CSS file to another or from inside an HTML document to an external stylesheet. Drag rules between existing style sheets or do the following. 1. Select the button All at the top of the CSS Styles panel. 2. Select the rules you want to move. 3. Right click on any of the selected rules (or click on the button at the top right of the CSS Styles panel) and select Move CSS rules from the menu that appears. 4. In the next dialogue box, either select an existing style sheet to add the rules to or select A new style sheet. > OK 5. If you chose A new style sheet you will be prompted to save the new CSS file. Choose an appropriate location within your Dreamweaver site for this project. For a deeper look at CSS go to the Getting started tutorials section > Tutorials on HTML and CSS and Adobes online help.
NSW DET 2010