How to Use Code Navigator in Dreamweaver CS4

Adobe Dreamweaver CS4 includes a handy new feature for users with programming skills called Code Navigator. Code Navigator lets you open any page of code linked to your HTML page right in Dreamweaver. Here is how.

Difficulty:

Moderate

Instructions

Things You'll Need

• Adobe Dreamweaver CS4 software

1. Open a page in Dreamweaver. In Design View you choose View > Code Navigator to see the Code Navigator options.

2. Code Navigator Icon

   In Code View you click a little icon that looks like a ship's wheel to see the Code Navigator options.

3. Code Navigator Dialog

   Code Navigator connects you to all the code linked to a page. You can pull it up in a Dreamweaver window and edit it right there. Here's how it looks in Code View.

4. Code Navigator Dialog

   In Design View it looks like this image.

5. All the listed files are linked and clickable. It's contextual. Click in the appropriate spot and you can see JavaScript links. In addition, if you hover over a CSS rule, but don't click, you see all the properties for that selector.

6. You can see code related to all of the following using Code Navigator: CSS, server-side includes, JavaScript files, parent template files, library files and iframe source files.