It's time to open Dreamweaver and begin exploring ways Dreamweaver supports CSS! Lets begin by looking at resources Dreamweaver supplies that can be useful to beginning and intermediate CSS users. These resources include pre-defined style sheets for formatting text, a number of complete page layouts styled with CSS, and an on-line CSS reference book.

Formatting Text with CSS

To see the style sheets Dreamweaver 8 supplies for formatting text, click File > New to bring up the New Document dialog box.

screen shot of the New Document dialog box

Click Page from Sample in the left-most column, then click CSS Style Sheet, and then choose any of the style sheet options in the third column. You will see how your chosen style sheet renders the background color, text, array items and h1-h6 headings in the right-most column. Find a style you like and then click Create; Dreamweaver will open your chosen style sheet as an untitled document which you can name, save and modify for use as the basis for your own style sheet.

CSS Page Layouts

Dreamweaver also provides several sample page layouts that are styled using CSS, including both two and three column layouts. To see these, click File > New to bring up the New Document dialog box, and then click Page from Sample then click on Starter Page (Theme) or (Basic). As before, the third column displays the designs that are available, and the right-most column displays information about each specific design you choose.

screen shot of New Document dialog box

If you now click Create, an HTML file containing the code for the page opens in Dreamweaver as an untitled document and you will be prompted about where to store both the .html file and the (linked) .css file. You can then open the .css file in Dreamweaver to see how the layout was created.

Note: Two and three column layouts are not difficult to understand, but beginning CSS users should understand the CSS box model before reading this code.

CSS Reference Manual

Dreamweaver contains a number of online manuals for your use, including a CSS Reference manual. To access this manual, first open the Results panel (below the Properties panel) and then click on the Reference tab. Expand the Book drop down menu and choose O'Reilly CSS Reference.

screen shot of Book drop down menu

Use the Style drop down menu to select the style you wish to learn about.

screen shot of font style definition

If the font size is too small for you to read comfortably, click on the options button (in the upper right corner) and choose a larger font size.

Be sure to check the rightmost section of the top grey bar -- this will tell you which version of CSS first recommended the style, as well as the versions of Netscape Navigator and Internet Explorer that first supported it. This style, for example, was proposed in CSS1 and is supported by the Netscape family of browsers starting with Netscape Navigator 6, and the Internet Explorer family of browsers starting with IE 4. Given this information, you can be confident that all modern browsers support this style.

A word to the wise: unless you are designing for a single platform, avoid any tag that is not supported by both families of browsers.

* click the link below to read your Assignment*
Lesson 2 Assignment