As web experiences become richer and more interactive, the files, code and assets that help build them become multi-layered and highly structured. One key element of modern websites is the abstraction of content from style and interactive code. To do this, web designers and developers isolate content in HTML, XML, CSS, and JavaScript files, combining them when needed in pages or elements.
A new feature in the Dreamweaver beta, called Related Documents, help keep the mystery out of finding the code you need in multiple files. This next post will give a short introduction.
When you are working with HTML, external files like CSS or JavaScript files can be loaded in the <head> of your document. In addition, Spry and other Ajax frameworks work with external XML data files. When designing or laying out a visual design in Dreamweaver, you usually need to jump from file to file to change settings in the CSS, JavaScript, or in the data sets. Doing this in the past was cumbersome, requiring you to know exactly which file had the code you needed and then load that page manually in Dreamweaver.
With the Related Documents feature, any CSS or JavaScript documents that are loaded with standard tags are visible at the top of the page:
In this example, an HTML page is using a Spry data set and displaying a Master/Detail table layout. To do this, the HTML loads external JavaScript files that are part of the Spry framework. In addition, the Spry Data Set is loading an XML file as the source of the data.
While you have the HTML page opened in Dreamweaver, you can quickly switch to any document that is related to it by clicking the name in the top of the window. For instance, you can switch to the XML data file by clicking the “betaData.xml” link at the top:
As you can see, the XML file is displayed even though you didn’t have to specifically find and load the file in Dreamweaver. You can return to the source HTML by clicking the “Source Code” link at the top of the window.
One of the new view modes added to the Dreamweaver beta is “Split Code”, allowing you to see two panes of code which can be set vertical or horizontal. You can combine this with Related Documents by displaying your source HTML in one pane, and your related documents in the other:
This can be a real time saver when you need to work with a lot of CSS or JavaScript files throughout your development and design process. Related Documents is the backbone of other new workflow features in Dreamweaver that I’ll cover soon.
