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. If you’re using a server-side programming language like PHP, you also see included server-side files listed in the 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 styles.css, the related file. Notice in the image  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.

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.

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.

Related Posts: The Dreamweaver CS4 Application Bar, The Best New Features in Dreamweaver CS4

4 thoughts on “The Related Files bar in Dreamweaver CS4

  1. To disable the related files bar:
    * Select Preferences (under ‘Dreamweaver’ on Mac, or under ‘edit’ in Windows)
    * Uncheck ‘Enable Related Files’ in the ‘General’ section
    * Restart Dreamweaver

  2. Hello , my ‘Enable Related FIles’ is already checked but still the related files bar is missing, how can i see it in my dreamweaver

Leave a Reply