Julie Hallstrom

two dog development

The support of CSS in Dreamweaver has been full-featured for a couple of versions. When I approached this version, then, I wondered what could remain to change.

It turns out the devil is in the details. I opened a heavily-styled HTML file in Dreamweaver CS3, and it displayed perfectly (the same file in Dreamweaver 8 displays incorrectly). As I continued to use Dreamweaver CS3, I realized that subtle workflow improvements are the hallmark of its CSS support.

To highlight these changes, I will focus on workflow enhancements, and describe the user interface along the way.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver CS3

• Try
• Buy

Sample files

• overview_css_dwcs3.zip (ZIP, 3k)

Note: Many of the files referenced in this tutorial are from the CSS Zen Garden web site.

Prerequisite knowledge

You should be familiar with Dreamweaver.

Familiar features

The CSS implementation introduced in Dreamweaver MX 2004 and refined in Dreamweaver 8 remains substantially the same. Therefore, developers who have been using Dreamweaver 8 will find the move to Dreamweaver CS3 an easy one in terms of CSS production. Readers who are upgrading (and who are familiar with CSS in Dreamweaver 8) can jump ahead. New users will benefit from this overview and from any of the Dreamweaver Developer Center articles on CSS written for Dreamweaver 8.

Property inspector

The Property inspector has not changed since Dreamweaver 8, and has changed little since Dreamweaver MX 2004:

• When styling text using the Property inspector, Dreamweaver creates CSS style declarations (unless you deselect the default preference).
• When you style text with a tag selected, Dreamweaver creates the style declaration as a definition for the tag (as long as the tag does not already have a style definition). Otherwise, Dreamweaver creates the style declaration as a new class style.
• Available class styles (whether defined in the document or in a linked or imported style sheet) are listed in the Style pop-up menu.
• The Page Properties button opens the Page Properties dialog box, allowing the user to define styles that affect the page display.
• The Property inspector includes a CSS button, which gives the developer quick access to the pertinent definition in the CSS Styles panel.

Figure 1. Clicking the CSS button opens the CSS Styles panel to the hilite_text style definition

Page properties dialog box

The Page Properties dialog box allows a developer to assign settings that will affect the appearance of the entire page. As of Dreamweaver MX 2004, some of these settings are designated with CSS style declarations. By the way, assigning CSS properties using the Page Properties dialog box writes the code for the properties to the head of the HTML document, even if the document links to an external style sheet. That is fine for now; I show you how to migrate the style declarations to an external style sheet in the "Move styles and style properties among files" section later in this article.

• Choosing settings in the Appearance category will create CSS style declarations for details such as default page font settings, background color and image, and page margins.
• A user may create CSS style declarations for the appearance of each hyperlink state in the Links category.
• The Headings category allows a user to set the font size and color of each heading level, in addition to setting a single font face to be used for all headings.

CSS styles panel

The CSS Styles panel looks and acts very similar to the panel in Dreamweaver 8. I will describe the new functionality in the workflow section, but list the features below that have remained the same.

• The appropriately-named CSS panel grouping includes the CSS Styles panel.
• The CSS Styles panel includes two modes: All and Current. Each mode displays the corresponding style declarations:
  • All mode lists the declarations available to the entire document (in other words, all declarations available in any linked or imported style sheet, as well as declarations coded in the head of the document).
  • Current mode lists the declarations affecting the element selected on the page.
• In the Current mode of the CSS panel, developers can view information about each rule, including the properties defined in the rule. Or developers can view the cascade of rules affecting the selected element, and can negotiate the properties defined for each rule.
• In either All mode or Current mode of the CSS panel, developers can add, edit or delete properties directly within the panel.
• Clicking the Edit Style button in the bottom right corner of the panel will launch the CSS Editor.

CSS display features

Dreamweaver CS3 has improved CSS rendering capabilities that better display your CSS styles while working in Design view.

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.
8. Now that you have your site defined, I will guide you through the workflows in the next few pages.

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.

Investigating the CSS styles of this page

The steps below highlight some of the features of the CSS Styles Panel while investigating the CSS styles pre-defined for this page. I undocked the CSS panel group while creating the screenshots.

Reviewing the styles

The CSS style sheet and HTML page rely heavily on "container" DIV tags that are styled according to the ID property of the DIV tag. To see what I mean, click the All mode in the CSS Styles panel.

Figure 4. The All mode of the CSS Styles panel provides a snapshot of how the styles are defined

1. In the Design view of cs3.html, click in the word Header (the same word highlighted in Figure 4).

2. With the All mode chosen in the CSS Styles panel, click .oneColLiqCtrHdr #header.

   Note: this style definition applies only to an element with an ID of "header" contained within another element to which the class ".oneColLiqCtrHdr" has been applied. The Properties sheet below the rule list shows the following attributes:

   • Background: #DDDDDD
   • Padding: 0 10px 0 20px
3. Click to highlight the #DDDDDD in the Properties sheet, then replace it by typing #CCBBBB. The box containing the word "Header" now looks purplish.

4. Click .oneColLiqCtrHdr #header h1.

   Note: this style definition applies only to an H1 tag within an element with an ID of "header" contained within another element to which the class ".oneColLiqCtrHdr" has been applied. Yeah, it’s easier to decipher in the CSS Style panel.

5. Click the Add Property link in the Properties sheet.
6. From the drop-down menu, choose the color property.
7. Click the color box and choose #330000 (dark purple along the top row of colors).

Let’s see what we’ve changed. By this time, the CSS file should already be open in Dreamweaver. Because the change we just made affects the code of the CSS file, Dreamweaver opens the file and shows its edited status by appending an asterisk to the file name.

1. Click the .oneColLiqCtrHdr #header h1 rule in the CSS Style panel.
2. In the Properties sheet, right-click (Windows) or ?? (Mac) the color property we just added to that rule.
3. Choose the Go to Code menu item. Selecting this opens oneColLiqCtrHdr.css to the color property we added to .oneColLiqCtrHdr #header h1.
4. Type the following CSS comment code to the end of the line describing the color property: /* used to reinforce the color scheme considered for the page */.

Move styles and style properties among files

The simple flow we just reviewed is a common enough approach: take something that exists, and modify it directly to change the appearance. The disadvantage of this approach is that development changes affect all files using this style sheet.

Dreamweaver CS3 introduces features that enable developers to migrate styles, appealing to a workflow that was not previously smooth. Therefore, this workflow walks you through the process of migrating properties from one file to another.

Modify CSS styles in a test file

1. Open cs3.html if not already open.
2. Choose Page Properties from the Modify menu.
3. In the Appearance category, set the following values:
   • Text color: #330000
   • Background color: #000000
4. Click OK.
5. Click in the phrase "Main Content."

6. Open the Current mode of the CSS Styles panel and review the cascade of rules. Notice that the BODY tag is redefined in three places: in the original CSS style sheet, and twice more in the head of this file.

   

   Figure 5. Current mode for the selection indicates the cascade of rules

7. Switch to All mode in the CSS Styles panel and select the .oneColLiqCtrHdr #container rule.
8. Right-click (Windows) or ?? (Mac) the rule and choose duplicate from the contextual menu.
9. In the Duplicate CSS Rule dialog box, select the option for This document only, and click OK.
10. In the All mode of the CSS Styles panel, select the .oneColLiqCtrHdr #container rule under the <style>. It may help keep you organize to collapse the oneColLiqCtrHdr.css category (see Figure 6).
11. Click to highlight the border setting in the Properties sheet for the Background property, then replace it by typing 2px solid #CCFFFF. There is a green outline surrounding the content defined by the DIV with an ID of container, but the line is hard to see because of a CSS visual aid. Let’s turn that off.
12. Click the Visual Aids item from the View menu, then select CSS Layout Outlines. This option is checked by default, so choosing it now will uncheck the option. The green border is now more visible.
13. Click the New CSS Rule button in the bottom right corner of the CSS Styles panel.
14. Choose the Advanced Selector type, and type #mainContent p:first-line. This will affect the first-line pseudo-element of any paragraphs contained in the mainContent DIV.
15. Leave the Define in option to This document only, and click OK.
16. In the CSS Rule Definition dialog box, set the Case option to Uppercase in the Type category.
17. Click OK.
18. Save cs3.html and leave it open.

Create a new file for comparison

1. 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.
3. Choose Link to Existing File from the Layout CSS options.

4. Click the Attach Style Sheet button (the button looks like a chain link).

   

   Figure 6. The Attach Style Sheet option allows you to link to an existing style sheet when creating a new file

5. In the Attach External Style Sheet dialog box, click the Browse button.
6. In the Select Style Sheet File dialog box, navigate to the oneColLiqCtrHdr.css file located in the css folder and click OK. You will likely see a message indicating that the file must be saved before a correct link can be established. Click OK in that error message as well.
7. In the Attach External Style Sheet dialog box, select the Link option and click OK.
8. In the New Document dialog box, click Create.
9. Save the newly-created untitled HTML file by choosing Save from the File menu and typing cs3a.html.

Migrating development styles to the rest of your site

What we’ve set up in the previous section is a really little website, consisting of two HTML files and a CSS file. For our purposes, we are assuming the new file (cs3a.html) is the default appearance for the website. The original file (cs3.html) is our development test HTML file. That particular file has a different appearance because of the styles we defined in the head of the document. Now let’s migrate those styles to the main CSS style sheet file.

1. Open cs3.html.
2. In the All mode of the CSS Styles panel, right-click (Windows) or ?? (Mac) the "body,td,th" rule and choose Move CSS Rules from the context menu.
3. In the Move To External Style Sheet dialog box, choose the existing CSS file (oneColLiqCtrHdr.css) and click OK.
4. Repeat steps 2 and 3 for the "#mainContent p:first-line" rule.
5. Repeat steps 2 and 3 for the "body" and ".oneColLiqCtrHdr #container" rules. You will see a Rule with Same Name Exists message. Note that in addition to displaying the conflicts, the message explains that the new rule will not replace the old rule, but will simple be appended to the CSS style sheet. Click Yes.
6. Switch to or open cs3a.html, and notice that both files now look the same.
7. Switch to or open oneColLiqCtrHdr.css.
8. Using the All mode of the CSS Styles panel, navigate to the duplicate code by clicking each rule.
9. Select the first ".oneColLiqCtrHdr #container" rule (this should be the original code, which defines a different border).
10. Click the Delete CSS Rule button in the bottom right of the CSS Styles panel.
11. Save all files by choosing Save All from the File menu.

Check your CSS decisions

CSS code is easy to code, but hard to get right. Dreamweaver CS3 offers features that help developers be aware of potential problems.

Check browser compatibility and the CSS advisor

The CSS Advisor originates from that wellpool of frustration that web designers face when trying to code for different browsers.

1. Open cs3.html.

2. Click the Check Browser Compatibility button.

   

   Figure 7. The Check Browser Compatibility button shows results of browser compatibility issues

   The results of the check appear in the Results panel. There are two lines reported, but the issue is the same for both lines. Disconcertingly, there is nothing in the code of the HTML file that causes concern, but instead the style properties defined in the CSS style sheet.

3. Select either of the First Line/Text Transform bug entries in the results panel, and read a description in the right hand of the panel. Click the View Solutions link. This link will open a browser window and navigate to the adobe.com website, so this step requires internet access. The CSS Advisor post about this issue appears. Note that there is no solution to this issue as of this writing.

Now that we are at the CSS Advisor, dig around. The CSS Advisor is organized according to CSS properties (useful if a customer has a question about how a given property works) and browsers (useful if a customer has a question about how a certain browser will treat their code).

Customers can post issues and solutions using these categories. The power of this site, though, is that other customers can rate the post and can leave comments on the post.

The posts are ordered by most recent, but customers can see all posts in a certain category, filter according to tagwords, or search on a certain keyword. RSS feeds of the posts (and of edits to the posts) are also available.

Where to go from here

The CSS support in Dreamweaver CS3 is tight and intuitive. Therefore, once you get up to speed on the features, I urge you to explore methods of coding CSS differently. In addition to the layouts available in Dreamweaver, check out the CSS resources like CSS Zengarden.

About the author