Overview of CSS features in Dreamweaver CS3

Workflows to highlight features

I am going to veer from the practice I have used in the past of offering workflow recommendations, and instead am using sample workflows to highlight new features and workflow considerations.

Create a CSS test site

You will use this same site to house the files you create in the following workflows. This is also the same site I used in my CSS article for the previous version of Dreamweaver. So, if you diligently followed my previous article, use the same site. The file names for this article are different (so everything will live happily together).

1. Launch Dreamweaver CS3 and choose Dreamweaver Site from the Create New column in the Start Page menu. Alternatively, once you launch Dreamweaver, choose Site > New Site.
2. Click the Advanced tab if necessary.
3. In the Site Name text box, type CSS test site.
4. Click the file folder icon next to the Local Root Folder text box.
5. In the Choose local root folder dialog box, browse to an appropriate place on your hard drive and click the New Folder icon to create a new folder called css_test.
6. Select the css_test folder as the local root folder for your site.
7. Click OK to accept these minimal settings. If you came to the Site Definition dialog box from the Manage Sites dialog box, click Done from within the Manage Sites dialog box.

Now that you have your site defined, I will guide you through the workflows in the next few pages.

Letting Dreamweaver help you with overall design

In previous versions, I avoided the pre-made sample pages that are available to developers when they first launch the application (yes, I was being hard-core). In Dreamweaver CS3, however, developers can choose from an interesting array of pages in which the layout is generated from CSS. Hard-core or not, I recognize a leg up when I see it. The instructions below are written for HTML files, but the same instructions apply for dynamic application files.

Using a blank page layout from the new document dialog box

1. With the CSS test site active, create a new file by choosing New from the File menu.

2. Within the New Document dialog box, select the Blank Page tab, then choose HTML as the Page Type and "1 column liquid, centered, header and footer" as the Layout (see Figure 2).

   

   Figure 2. The New Document dialog box allows developers to choose starting layouts

3. Choose Create New File from the Layout CSS options (the other options are Add to Head and Link to Existing File).
4. Click Create. The Save Style Sheet File As dialog box appears because you chose to create a new file. By default, the css_test folder is selected.

5. Click the Create New Folder icon in the Save Style Sheet File As dialog box, and name the folder css.

   

   Figure 3. Create a css folder in the site within the Save Style Sheet File As dialog box

6. Double click the css folder to select it.
7. In the css folder, retain the style sheet file’s default name (oneColLiqCtrHdr.css) and click Save.
8. Save the newly-created untitled HTML file by choosing Save from the File menu and typing cs3.html. If necessary, click the Site Root button to make sure you are saving the file in the css_test folder.

Page 3 of 7

Previous Page

Next Page