Code editing in Dreamweaver

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):

• Application Developer
• Application Developer Plus
• Coder
• Coder Plus

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:

1. Launch Dreamweaver if you haven't done so already.
2. Download the code_exercise_files.zip archive that accompanies this article.
3. Extract the files and copy them to the a folder on your local computer.
4. Create a new site definition called DWCS4 Workspace. (For help with this task refer to Working with Dreamweaver sites.)
5. Select Window > Workspace Layout.
6. Select the desired coding workspace (Application Developer, Application Developer Plus, Coder, or Coder Plus).

To create a custom workspace:

1. Arrange the Dreamweaver panels to suit your requirements.
2. Choose Window > Workspace Layout.
3. Select New Workspace.
4. Enter the name for your new workspace and click OK.

Viewing code

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 split the document vertically, choose View > Split Vertically.
• To specify that the Design is over on the left hand side of the screen, choose Design View on Left.
• To split the code vertically choose View > Split code.

Working with the Related Files toolbar

Let's face it, the days of building web pages that consist of a single file is a dim and distant memory. To create a website that adheres to modern standards web designers and developers use a combination of CSS, JavaScript, as well as a whole host of other file types. In the past just keeping track of all these (never mind editing them) could be a laborious task. To simplify modifying all the documents that are associated with your web page(s) Dreamweaver provides the Related Files toolbar feature (see Figure 3).

To open a related file from the Related Files toolbar, located at the top of the document:

• Click the file name of the related file you want to open.
• Right-click the file name of the related file you want to open and select Open as Separate File from the context menu. (Note: When you choose this option, the main document does not remain simultaneously visible.)
• When working in the Code view, click on the Source Code button in the related Files toolbar to return to your source code.

Note: If for some reason you cannot see the Related Files toolbar, choose Edit > Preferences > General, select Enable Releated Files and click OK.

Code Navigator

Have you ever wished that you had a way to easily find and edit all the code sources that affect your current selection such as CSS, server-side rules, and external JavaScript functions? If the answer is an emphatic "Yes!" then you are going to love the Dreamweaver Code Navigator, shown in Figure 4.

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:

1. Alt-Click (Windows) or Command+Option-Click (Mac OS X) anywhere on the page. The Code Navigator displays links to the code affecting the area you clicked.
2. Click the CSS property, server-side include, or JavaScript function you want to inspect.

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.

Using Live view

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:

1. Make sure that you are in Design view or Code and Design view.
2. Click the Live View button.
3. If you have made changes in Code view or in a related file, click the refresh button in the Document toolbar or press F6 on your keyboard.
4. To return to the editable Design view click the Live View button again.

Using Live Code 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 activated Live Code view, enables you to see changes made by JavaScript within your code as they happen in real time. When working with Spry or other JavaScript frameworks, your CSS styles can be changed via JavaScript based on user interaction with an element such as hovering over it. Using the Live Code view, you can hover over any element causing the CSS style name to be dynamically applied, enabling you to pinpoint it in the code. By pressing F6, you can also freeze the code in its current state. Once frozen you can then use the CSS Styles panel to select the specific CSS style to edit it. Using the Code Navigator you can also view the entire path through the DOM (Document Object Model).

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.

Externalzing code

When developing your websites, you probably want to keep all your code (CSS, JavaScript, Spry and so on) in the pages that you are working on. Having the code at your finger tips whilst you are building is perfectly understandable as it makes it both more managable and easier to debug. However, once you have finished developing your code you are probably going to want to follow best practices and pull all your CSS, JavaScript, and other behavior (such as Spry attributes) out of the page and externalize it.

Separating your Behavior (JavaScript and Spry) and Presentation (CSS) from the page structure has a number of benefits. For example, including large amounts of JavaScript in your pages can affect the ranking of your pages with various search engine. Secondly, (as is the case with CSS) it also makes it much harder to reuse the same code on multiple pages. In short moving your CSS and behavior code is consider best practice and where possible you should always try to do this.

Moving CSS code is incredibly straightforward if you are working in either Design or Code view.

1. In the CSS styles panel select the rule or rules you want to move.
2. Right-click the selection and select Move CSS Rules from the Context menu. To select multiple rules, Control-Click (Windows) or Command-Click (Mac OS X) the rules you want to select.

   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.

3. In the Move To External Style Sheet dialog box, select the new style sheet and click OK.
4. In the Save Style Sheet File As dialog box, enter a name for the new style sheet and click Save.

Note: If you are just working in Code view, you can also move the CSS rules using the Coding toolbar.

Extracting JavaScript

Adobe Dreamweaver enables you to extract all or most of the JavaScript from your Dreamweaver document, export it to an external file, and link the external file to your document.

To use the JavaScript Extractor:

1. Open the page that contains the JavaScript.
2. Select Commands > Externalize JavaScript.
3. The Externalize JavaScript dialog box offers you two choices (see Figure 5):
   • Only externalize JavaScript: Select this option if you want Dreamweaver to move any JavaScript to an external file, and to reference that file in the current document. This option leaves event handlers such as onclick and onload in the document, and leaves Behaviors visible in the Behaviors panel.
   • Externalize JavaScript and attach unobtrusively: Select this option if you want Dreamweaver to move JavaScript to an external file and reference it in the current document, and remove event handlers from the HTML and insert them at runtime using JavaScript. (Note: When you select this option, you can no longer edit Behaviors in the Behaviors panel.)

4. In the Edit column deselect any edits you do not want to make or select the edits that Dreamweaver did not select by default.
5. Click OK.

   The summary dialog box provides a summary of extractions. Review the extractions and click OK.

6. Save the page.

Note: For more information on extracting JavaScript from your pages refer to Extract JavaScript in Dreamweaver Help and Understanding unobtrusive JavaScript in Dreamweaver CS4.

Getting code hints

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 :

1. Type a start typing bracket (<) for HTML tag names. If you are coding JavaScript you would type a period (dot operator) to display a list of tags or functions and objects
2. Scroll down the list and double-click the desired item to insert it.
3. If the item supports attributes or additional objects, press the spacebar to display a list of valid attributes. Select an attribute and press Enter.
4. Type the value for the attribute; if the attribute takes only a certain value, select a value from the list of allowed values.

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:

1. Start by adding the desired custom styles to an external style sheet or add them to the HEAD section of your web page.
2. Having inserted the first part of your tag (for instance, the paragraph tag), press the spacebar and select Class from the menu.
3. Press Enter (or Return) to display all the classes you've previously created, as shown in Figure 6.

4. After you have selected the desired class, simply press Enter (or Return).

To insert additional JavaScript objects or methods, simply enter period (.). Dreamweaver automatically introspects any libraries you include on a page and displays all the methods and properties that are associated with that object.

Balancing tags and brackets

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:

1. Position the insertion point inside the nested code you want to check.
2. Choose Edit > Select 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> and </html> tags in your code.

Using the Reference panel

Dreamweaver CS4 comes with a comprehensive set of built-in reference information, including the following books:

• Adobe CF Function Reference
• Adobe ColdFusion Markup Language reference
• O'REILLY ASP Reference
• O'REILLY ASP.NET Reference
• O'REILLY CSS Reference
• O'REILLY HTML Reference
• O'REILLY JavaScript Reference
• O'REILLY JSP Reference
• O'REILLY PHP Pocket Reference
• O'REILLY SQL Language Reference
• O'REILLY XML in a Nutshell
• O'REILLY XSLT Reference
• UsableNet Accessibility Reference

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:

1. Select a tag, attribute, or keyword.
2. Right-click (Windows) or Control-click (Mac OS X) and choose Reference from the context menu (alternatively, press Shift+F1).

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.

Inserting tags with the Tag Chooser

The Tag Chooser lets you insert any tag that is part of the Dreamweaver tag libraries. To insert a new tag:

1. While working in Code view, right-click (or Control-click) and choose Insert Tag from the menu. (You can also show the panel by clicking the Tag Chooser icon found in the document toolbar.)

   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.

2. Having selected the appropriate tag, click the Tag Info button to display information about how to use this tag. Alternatively, clicking the reference button will bring up the Reference panel, which enables you to view information on all associated attributes, as well as the tag.
3. Click the Insert button to insert the tag into your code. If the code requires additional information, it'll display a tag editor.

Editing, adding, and importing tag libraries

The Tag Library Editor, located in the Edit menu, is used to manage all of the following tag libraries that come with Dreamweaver CS4:

• HTML tags
• CFML tags
• ASP.NET tags
• JSP tags
• JRun custom library
• ASP tags
• PHP tags
• Template tags
• WML tags
• XSLT tags

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:

1. Show the Tag Library Editor (Edit > Tag Libraries).
2. Click the HTML Tags folder node.
3. Select the td folder.
4. Choose No Line Breaks from the Line Breaks pop-up menu.
5. Select Not Formatted from the Contents pop-up menu.
6. Click OK to save your changes.

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:

1. In the Tag Library Editor click the Tags plus (+) button and choose New Tag Library. This brings up the New Tag Library dialog box.
2. Enter a title for the new library and click OK. The new library folder now appears at the bottom of the scroll box.
3. With the new folder still selected, choose the types of documents the new library will be available in.
4. Click the Tags plus (+) button and choose New Tags.
5. In the New Tags dialog box make sure the new library is selected and then enter your new tag name(s) as shown Figure 12.

6. With the new tag folder selected, click the Tags plus button again and choose New Attributes.
7. In the New Attributes dialog box, enter all of the attributes associated with the tag (see Figure 13).

8. Select one of the attributes and select the appropriate Attribute case and Attribute type as shown in Figure 14.

9. After all the tags and attributes have been added, click OK to save the changes you've made to the tag libraries.
10. With these elements in place, you can now use them with the Tag Chooser, the Tag Inspector, or code hints (see Figure 15).

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:

• XML DTD or Schema files
• ASP.NET custom tags
• JSP tag libraries (*.tld, *.jar, *.zip)
• JSP server tags (web.xml)
• JRun server tags

To import custom tags and integrate them as part of the authoring environment:

1. Open the Tag Library Editor (Edit > Tag Libraries).
2. Click the plus (+) button.
3. Choose ASPNet, DTDSchema, or JSP (see Figure 16).

To import tags from an XML DTD file or a schema:

1. Open the Tag Library Editor (Edit > Tag Libraries).
2. Click the plus (+) button and choose DTD Schema > Import XML DTD or Schema File.
3. Enter the file or URL of the DTD or schema file.
4. Enter the prefix to be used with the tags. The prefix is used to identify a tag on a page as part of a particular tag library.
5. Click OK.

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.

Validating your markup

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.

1. For XML for XHTML files, choose File > Validate > As XML.
2. For other file types, choose File > Markup.

   The Validation tab of the Results panel displays a "No errors or warnings" message or lists the syntax errors found.

3. Double-click an error message to highlight the error in the Code view.
4. To save the report as an XML file, click the Save Report button.
5. To view the report in your primary browser (enabling you to print out the report), click the Browse Report button.

Checking for browser compatibility

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:

1. Choose File > Check Page > Browser compatibility.
2. Once completed, Dreamweaver will list any issues in the Results panel (see Figure 17).

3. Double-click an error or warning message to highlight the error in the Code view.

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:

1. Choose Check Page > Settings in the Document toolbar.
2. Click the green arrow in the upper-left corner of the Results panel and choose Settings.
3. In the Target Browser dialog box, choose the minimum browser version for each of the browsers you want to check against.
4. Click OK to save your settings.

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.