8 February 2009
In this day and age the vast majority of web designers and developers spend at least some amount of time writing or modifying code. Ever since Dreamweaver was first released, the application has respected the way code is written and the Dreamweaver team has always incorporated technologies that ensure coders are provided with a responsive, flexible editor capable of handling a wide range of programming languages.
With Dreamweaver CS4, Adobe has now gone even further to accommodate web coders' workflows. Dreamweaver CS4 offers coders and programmers a tool set that not only simplifies the process of writing and editing code, but also provides true browser rendering without having to leave the Dreamweaver workspace.
With Adobe Dreamweaver CS4 you can set up the coding environment to suit your workflow. You can change the way you view code, configure different keyboard shortcuts as well as import your favorite or custom tags libraries.
Using the workspace switcher (located on the Application bar) you can choose from four workspaces that will provide you with a rich coding experience (see Figure 1):
All of the workspaces listed above show the Dreamweaver Code view by default and include panels that will be docked on the left-hand side of the screen. In addition the Application Developer, Code, and Coder Plus workspaces will remove the Property inspector from the default view.
If none of the default workspaces hits the right note, don't worry. With Dreamweaver CS4 you can create your own layout by opening and docking panels where you want them and then save the workspace as a custom workspace.
To choose a coding workspace:
To create a custom workspace:
Dreamweaver offers a variety of ways to view your source code: Enabling the Code view can display it in the Document window, splitting the Document window can display both the page and the associated code. Using the Code inspector you can display the code in a separate window.
If, like me, you have been working with Dreamweaver for many years you will know that displaying both the page and the code in the same document window is something that we have been able to do for many years. Nothing new there I hear you say. However, many Dreamweaver users (myself included) now have dual workstations, which can be configured to split applications across multiple monitors. Only having the option of spliting the design and code horizontally, prevented us from being able to take advantage of this dual screen functionality. To address this limitation, Adobe Dreamweaver CS4 includes the ability not only to split the design and code (or just code) vertically (see Figure 2), but also enables you to choose whether you are lefty or righty whether you want the design on the right (the default) or the left hand side of the screen(s).
This seemingly minor feature is incredibly useful, especially if you are working with large documents and when working in Code view.
To open a related file from the Related Files toolbar, located at the top of the document:
Note: If for some reason you cannot see the Related Files toolbar, choose Edit > Preferences > General, select Enable Releated Files and click OK.
In Dreamweaver CS4, if you place your insertion point on a line or in an area that you know is affected by a related file, you will notice a ships wheel icon appear. This is the Code Navigator indicator and believe me when I say that this is something you are going to find indispensable. The Code Navigator (also available by pressing Ctrl+Alt+N [Windows] or Cmd+Option+N [Mac OS X] as well as on the context menu), enables you to see more information and modify a particular CSS property in both the currently open web page or any other external file that is associated with this document.
To inspect a CSS property using the Code Navigator:
The Code Navigator groups related code sources by file and lists the said files alphabetically.
Note: If you hover over links to CSS rules, the Code Navigator displays tool tips of the properties in the rule. These tool tips are extremely useful when you want to distinguish between the many rules that share the same name.
Click a CSS rule in the Code Navigator and Dreamweaver will display that rule in Split view. Click a rule that is an external file and Dreamweaver opens the file and displays the rule in the Related Files toolbar.
As well as being able to edit all the files that are related to web pages, you are definitely going to want to see what the page will look like once all the associated files have been rendered and executed. To do this you can turn to the Dreamweaver Live view. Unlike the traditional Dreamweaver Design view, Live view provides you with a non-editable, more realistic rendering of what your page will look like in a web browser without having to leave the Dreamweaver workspace. This is a great feature since it guarantees that once you are in Live view Dreamweaver won't manipulate your code in any way.
To enable Live view:
Historically, one pain point that many coders experienced is that Dreamweaver didn't provide any way of seeing what the code was going to look like once the page had been rendered in a web browser. Typically developers would end up having to preview the page in a web browser, take a snap shot of the code (in using view source) and then bring that code back into Dreamweaver so that they could see the way the code was behaving.
When used together, Live Code view and Code Navigator provide an incredibly powerful set of tools enabling you to track down and modify code effortlessly.
Moving CSS code is incredibly straightforward if you are working in either Design or Code view.
In Code view, select the rule or rules you want to move, right-click the selection and choose CSS Styles > Move CSS Rules from the context menu.
Note: If you are just working in Code view, you can also move the CSS rules using the Coding toolbar.
onloadin the document, and leaves Behaviors visible in the Behaviors panel.
The summary dialog box provides a summary of extractions. Review the extractions and click OK.
Dreamweaver code hints offer a quick and error-free way to write and edit your code. In either Code view or the Code inspector, they parse what you type and automatically display a menu of appropriate tags, attributes, function parameters, or object methods. Dreamweaver supports code hinting for the following languages and technologies:
Code hints are fully customizable and extensible for custom tags and objects. Code hints are available for several kinds of code. To use code hints :
You can now continue to add more attributes, parameters values, objects, and methods by repeating steps 3 and 4. When working with markup just make sure that you don't press the spacebar between a value and its quotes ("). Press Escape to close the list.
Use the code hints to edit existing code in Code view by placing the insertion point, for example, to the left of the tag's end bracket of a markup tag and pressing the Spacebar. This displays a list of the tag's supported attributes. To style a page with code hints and CSS classes:
Dreamweaver offers a great way for you to check whether your tags are correctly balanced—that is, have matching start and end tags—in the form of two commands: Select Parent Tag and Select Child Tag. These are useful when working with multiple levels, such as a nested table layout scheme. To select a parent tag:
This highlights the enclosing matching tags in Code view. If you continue to select this command, and your tags are properly balanced, Dreamweaver CS4 will eventually highlight the outermost
</html> tags in your code.
Dreamweaver CS4 comes with a comprehensive set of built-in reference information, including the following books:
You can access the Reference panel in either Design or Code view, as well as the Code inspector.
When working in Design view, clicking on a tag in the Tag Selector and then clicking the reference button opens the panel and displays information about the tag you selected. When working in Code view or the Code inspector, do the following:
Adjust the size of the text in the Reference panel by clicking on the small arrow at the top-right of the panel (see Figure 7). The Reference panel is also linked to the Accessibility Reports. Selecting an entry in the Results panel and clicking the Info button will automatically display the WAI (Web Accessibility Guideline) guideline for the currently selected problem.
The Tag Inspector located in the Window menu offers a fast and easy way to view and edit every attribute associated with a given tag. Using this tool, you can edit your code without having to work directly in the document window.
Selecting a tag displays a list of all the attributes that are associated with that item. Dreamweaver CS4 always adds the attribute to the end of the tag.
The Tag Chooser lets you insert any tag that is part of the Dreamweaver tag libraries. To insert a new tag:
The left panel contains a list of supported tag libraries and the right panel shows the individual tags in the selected tag library folder.
You can also click the folder node to display a number of categories, such as Page Composition, Page Elements, Formatting and Layout, Lists, and so on. Selecting Page Elements, for example, displays three icons: General, Browser-specific, and Deprecated. Clicking any of these displays related tags in the right panel, as shown in Figure 9.
The Tag Library Editor, located in the Edit menu, is used to manage all of the following tag libraries that come with Dreamweaver CS4:
The tag libraries are at the heart of the application and are referenced by all the tag editors. The Tag Library Editor lets you add and delete tag libraries, tags, and attributes; set properties for a tag library; and edit tag attributes.
One of the great features of the Tag Library Editor is that it allows you to determine how your code appears in your document window. For the first time, developers can now visually set line-break, contents-formatting, and case options. Figure 10 shows is an example of fine-tuning the
<table> tag's appearance.
Suppose you want to make your table cell tags (
<td>) for each table row to appear on the same line in your code. Here's how you can make that work:
Now when you insert a table, all
<td> tags will appear on one line rather than on separate lines, as shown in Figure 11.
The Tag Library Editor gives you flexibility in adding tag libraries, tags, and attributes.
To add new tag libraries:
When Dreamweaver CS4 was developed, Adobe recognized that many web developers would need to work with custom tags, such as XML tags. To accommodate this type of user, the Tag Library Editor is able to import custom tags that become part of the authoring environment. This ensures that when you start typing a custom tag (in Code view), code hints will automatically list all your custom tag attributes.
Dreamweaver CS4 enables you to import the following custom tags:
To import custom tags and integrate them as part of the authoring environment:
To import tags from an XML DTD file or a schema:
Note: To learn how to import custom ASP.NET tags, JSP tags from a file or server (web.xml), or JRun tags, refer to Managing tag libraries in Dreamweaver Help.
Whenever you hand code or edit your web pages it is always advisable to check the markup for tag or syntax error and CSS for browser compatiblity issues. Dreamweaver includes both a built-in Validator and a CSS browser compatibility checker.
For code validation, Dreamweaver can validate many of the most common markup languages such as HTML, XHTML, ColdFusion Markup Language (CFML), JavaServer Pages (JSP), Wireless Markup Language (WML), and XML.
You can set preferences of the Validator, such as specifying the tag-based languages against which the Validator should check, specific problems as well as the types of errors the Validator should report. To validate your document.
The Validation tab of the Results panel displays a "No errors or warnings" message or lists the syntax errors found.
The Dreamweaver browser compatiblity checker (BCC) enables you to locate combinations of HTML and CSS that can trigger browser rendering bugs. When you run the BCC feature, Dreamweaver also tests the code in your documents for any CSS properites or values that are unsupported by your target browers.
To run a browser compatibility check:
Once Dreamweaver has generated its report you might want to change the minimum browser versions your page is checked against.
To do this you can either:
In addition to the built-in browser compatibility checker, Dreamweaver also includes a link to the online CSS Advisor. This powerful resource enables you to find the solutions to the very latest CSS and browser compatiblity issues. Comment on and improve on existing solutions and share any solutions you have discovered with the community.
As you have seen Dreamweaver CS4 contains a wealth of tools that meet the needs of today's web professional. Enabling designers, developers, and programmers to work within one environment to create, edit, and manage any web standard websites or web applications easily.