How to Use the Related Files Bar in Dreamweaver CS4

Adobe Dreamweaver CS4 introduced the related files bar. It appears at the top of each document window and lists all CSS and JavaScript files that are related to the web page. Here is how to work with it.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Adobe Dreamweaver CS4 software

1. 
   related files bar

   In this example page (see image) there is only one related file. You see a link for source code (the HTML of the page) and style.css, the related file.

2. Notice in the image in Step 1 that another new feature in Dreamweaver CS4 is also shown. That is vertical split view. In this view you see code and design side by side.

3. If you click any one of the related files links (in this example, only styles.css) you see that on the code side of the vertical split view.

4. By making changes on the code side you see the results on the design side--so in this example you could change the CSS code and see the changes take place visually on the Design side of the split view.

Tips & Warnings

• If you’re using a server-side programming language like PHP you’ll see included server-side files listed in the related files bar.