Home / DevNet / Dreamweaver Development Center /

Dreamweaver Article

Mark Fletcher
www.vtc.com
mark-fletcher.co.uk

Macromedia has always understood that developers spend some amount of time developing code by hand. Its tools respect the way code is created and incorporate technologies such as roundtrip editing—the ability to move back and forth between a text-based HTML editor and Macromedia Dreamweaver MX without dramatically impacting the content or structure of the source document—to help workflow.

While Dreamweaver 4 only included basic code editing features, Dreamweaver MX now raises the bar even higher by including a full-featured code editing development environment that is reminiscent of Macromedia HomeSite and ColdFusion Studio. Dreamweaver MX now colorizes the code syntax, adds Code Hints, the Tag Chooser, etc.—all of which make Dreamweaver MX a much more appealing package than before for developers who prefer to hand-code.

In this article, I explore how hand-coding purists can work comfortably in Dreamweaver MX.

Working in the HomeSite/coder-style workspace
The first time you launch Dreamweaver MX (this applies to Windows only), you are given the opportunity to select from three different types of workspace. Selecting, for example, the Coder-Style/HomeSite Style option displays a preview of what that workspace will look like, which I have highlighted with a red border below:

Selecting this option converts Dreamweaver MX into a workspace that both HomeSite and ColdFusion Studio developers will be familiar with. You can always change to the Coder-Style workspace at any time. To change your Dreamweaver MX workspace:

1.	Choose Edit > Preferences.
2.	Select the General category.
3.	Click on the Change Workspace button.
4.	Select the following options: Dreamweaver MX Workspace or HomeSite/Coder-Style.
5.	Click the OK button.
6.	Restart Dreamweaver MX.

Getting code hints
Dreamweaver's 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. Code Hints are compatible with HTML, CFML, ASP, ASP.NET, JSP, PHP, ActionScript, and WML. They are fully customizable and extensible for custom tags and objects. The tags you see are determined by the type of document you have chosen to create. To insert a tag using Code Hints:

1.	Type a start bracket (<) to display a list of tags.
2.	Scroll down the list and double-click a tag to insert it.
3.	If the tag supports attributes, 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 and values by repeating steps 3 and 4. Just make sure that you don't press the Spacebar between a value and its quotes ("). Press Escape to close the list. To edit a tag:

Use the Code Hints to edit an existing tag in Code view by placing the insertion point to the left of the tag's end bracket 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 here:

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

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 wish to check.
2.	Choose Edit > Select Parent Tag.

This will highlight the enclosing matching tags in Code view. If you continue to select this command, and your tags are properly balanced, Dreamweaver MX will eventually highlight the outermost <html> and </html> tags in your code.

Using the Reference panel
Dreamweaver MX comes with a comprehensive set of built-in reference information, including the following books:

•	Macromedia ColdFusion Markup Language reference
•	O'Reilly HTML Reference
•	O'Reilly CSS Reference
•	O'Reilly JavaScript Reference
•	Macromedia SiteSpring Project Site Tag Reference
•	UsableNet Accessibility Reference
•	Wrox ASP 3.0 Reference
•	Wrox JSP 3.0 Reference

You can access the Reference panel in either Design or Code view, as well as the Code inspector. To open the Reference panel:

When working in Design view, clicking on a tag in the Tag Selector and hitting 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 (Macintosh) 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, as shown:

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. See the illustration.

Inspecting tags
The Tag Inspector located in the Window menu offers a fast and easy way to edit tags via a properties sheet similar to the one found in HomeSite and ColdFusion Studio.

The Tag Inspector consists of two integrated tools: Structure View and Tag Properties Sheet. Using these tools, you can edit your code without having to work directly in the document window.

Structure View lets you quickly select a tag in either Code or Design view. From both the options menu and the context menu you can insert new tags, as shown in this illustration.

When working with an XML document, you can take advantage of the Insert Empty Tag command. For example, selecting this option and adding BR will add the following tag: <BR/>. Although most XML tags are container tags (for example, <container></container>), developers sometimes include empty tags as markers to indicate that something occurred, such as a line break. The "/" sign tells the XML parser that this is an empty tag.

Selecting a tag displays a list of all the attributes that are associated with that item. Dreamweaver MX 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 Dreamweaver's tag libraries. To insert a new tag:

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 on 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 on the folder node to display a number of categories, such as Page Composition, Page Elements, Formatting and Layout, Tables, etc. Selecting Page Elements, for example, displays three icons: General, Browser-specific, and Deprecated. Clicking on any of these displays related tags in the right panel, as shown in this illustration.

Having selected the appropriate tag, click on 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.

Hit 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 MX:

•	HTML
•	CFML
•	ASP
•	ASP.NET
•	PHP
•	JRun
•	WML
•	Dreamweaver MX Templates
•	SiteSpring Project Site 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. This illustration is an example of fine-tuning the <table> tag's appearance. To edit a 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 on the HTML Tags folder node.
3.	Select the "td" folder.
4.	Choose No Line Breaks from the Line Breaks pop-up menu.
5.	Pick 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 this illustration. To add new tag libraries:

1.	The Tag Library Editor gives you flexibility in adding tag libraries, tags, and attributes. 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 will now appear at the bottom of the scroll box.
3.	With the new folder still selected, now choose which types of documents the new library will be available in.
4.	Click on 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 in the example below:

6.	With the new tag folder selected, click on 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:

8.	Select one of the attributes and select the appropriate Attribute Case and Attribute Type as shown in this illustration.
9.	Once 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 now in place, you can now use them using the Tag Chooser, the Tag Inspector, or Code Hints, as shown below:

When Dreamweaver MX was developed, Macromedia 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 MX enables you to import the following:

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

You can import custom tags and integrate them as part of the authoring environment, typing a custom tag. To import custom tags:

1.	Open the Tag Library Editor (Edit > Tag Libraries).
2.	Click on the plus (+) button.
3.	Choose ASPNet, DTDSchema, JSP as shown in this illustration.

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.

To learn how to import custom ASP.NET tags, JSP tags from a file or server (web.xml), or JRun tag, consult the Dreameweaver MX documentation.

As you can see, Dreamweaver MX contains a wealth of new tools that enable code purists to work in an environment that is similar to that found in other hand-editing programs such as HomeSite and ColdFusion Studio. Thanks to Dreamweaver MX's flexibility, designers, developers, and programmers can finally work within one environment to create and manage any professional website easily. As you've seen in this article, the new code editing features ensure that you can write code faster than ever before.

About the author

Mark Fletcher is one of the most experienced authors at the Virtual Training Company, where he specializes in creating training CDs and online tutorials on Macromedia's products such as UltraDev, Fireworks, HomeSite, Sitespring, and Dreamweaver including Dreamweaver MX Fundamentals and Dreamweaver MX Web Applications. Mark also develops online tutorials for WebAssist.com, a Dreamweaver and UltraDev extension developer.