Dreamweaver tutorial: In the Code view in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Using the Code view
  • Working with the Code Navigator

This tutorial provides you with a foundation for working with Adobe Dreamweaver Code View. It is the fourth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: In the Code view in Dreamweaver

CSS rules can also be created and modified directly in the Code view. Editing CSS in Dreamweaver’s Code view offers a great degree of control and is often called hand-coding. Many coders and designers prefer hand-coding because of this control. However, this precise control also has its downsides. For example, when you work in the Code view the potential for error increases dramatically, and misspellings or an incomplete knowledge of CSS syntax can easily break a page.

1 Click in the second paragraph if you are not currently inside it. Press the Code View button to view your page in Code view. If you haven’t worked with code previously, see if you can locate the second paragraph. On the left side of the screen, notice the line numbers running from top to bottom; when working with code, each line has its own number, making it easy to refer to and locate objects.

2 On line 10, select the value red in the color property and then delete it. Now type #CE1A30. Ignore the Color picker that appears.

Modifying the CSS color property in Code View.

3 Press the Design view button. The text is still red, however it is using a hexadecimal color instead of a keyword. The danger of adding CSS properties by hand of course, is that if you mistype the value you may get a different color or no color at all.

Working with the Code Navigator in Dreamweaver

The Code Navigator allows you to view the CSS properties directly in the Design view through a small pop-up window. Additionally, it allows you to click on a property and edit it directly in the Split view.

1 Press Ctrl+Alt (Windows) or Command+Option (Mac OS) and click on the third paragraph. A small window appears, listing the properties of the CSS rule applying to this paragraph. The window lists the name of the style sheet, as well as the rule .greenText.

2 Place your cursor over the .greenText class, and the properties appear in a yellow pop-up window. This feature allows you to quickly view the properties without needing to move to the CSS Styles panel or go into Code view.

The Code Navigator displays the CSS rules applied to a paragraph.

Continue to the next Dreamweaver Tutorial: Understanding Style Sheets in Dreamweaver >