Macromedia Dreamweaver MX - Migrating from Macromedia HomeSite to Macromedia Dreamweaver MX: Using the Dreamweaver coding features

Home > Products > Dreamweaver > Support > Editing HTML in Dreamweaver

Using the Dreamweaver coding features

Many of the Dreamweaver coding features will be familiar to HomeSite users, and most even function the same in Dreamweaver as they do in HomeSite.

Using Code Hints
The Code Hints feature, like Code Insight in HomeSite, enables you to quickly insert and edit code as you type in Code view (or the Code inspector). When you type certain characters, a list appears, suggesting options to complete your entry. You can use this feature to insert or edit code, or just to see the available attributes for a tag, the available parameters for a function, or the available methods for an object.

To insert a tag using Code Hints:

1	Type a start bracket (<), then scroll down the list of tags, and double-click a tag to insert it.
2	If the tag supports attributes, press the Spacebar to display a list of allowed attributes for the tag, then select an attribute and press Enter.
3	Type the end bracket for the tag (>) after the last attribute-value pair.

Using the Tag Chooser
The Dreamweaver Tag Chooser works the same way as the HomeSite Tag Chooser. Use the Tag Chooser to quickly browse tags in the Dreamweaver tag libraries to insert in your page.

To insert a tag using Tag Chooser:

1	Place the insertion point in the code, right-click, and choose Insert Tag.
	Note: You can also choose Modify > Insert Tag.
	The Tag Chooser appears.
2	Double-click a tag from the list to insert it.
	Tags that don't require additional information (for example, <HTML></HTML>) are inserted into the document at the insertion point. You might need to reposition the Tag Chooser dialog box to see that Dreamweaver has inserted the tag. Tags that require additional information appear in their own tag editors.
	Tip: To view syntax and usage information for the tag, click the Tag Info button. To view reference information about the tag, click the <?> icon.
3	If a tag editor opens, enter the additional information, then click OK.
4	Close the Tag Chooser when you are finished.

Using tag libraries
The Dreamweaver Tag Library editor makes it easy for you to import and manage tag libraries. Tag libraries in Dreamweaver contain ASP, ASP.NET, CFML, JSP, and PHP tags.

Note: Dreamweaver stores VTML files in Dreamweaver/Configuration/TagLibraries, not in an Extensions folder as in HomeSite. The Extensions folder in Dreamweaver is used to download Macromedia extensions. For more information about adding extensions to Dreamweaver, see Dreamweaver Help (Help > Using Dreamweaver).

To open the Tag Library editor:

Select Edit > Tag Libraries.

For information about using the Tag Library editor, see Dreamweaver Help (Help > Using Dreamweaver).

Using the code Validator
You can use the Dreamweaver Validator to check your code for tag or syntax errors. The Validator supports many tag-based languages, including several versions of HTML, XHTML, ColdFusion Markup Language (CFML), JavaServer Pages (JSP), and Wireless Markup Language (WML). You can also validate an XML document.

Note: You can set preferences for the Validator, such as specifying the tag-based languages against which the Validator should check and the types of errors that the Validator should report. For information on setting Validator preferences, see Dreamweaver Help (Help > Using Dreamweaver).

To run the Validator:

1	Select a tag in the current document.
2	Do one of the following:
	For an XML (or XHTML) file, choose File > Check Page > Validate as XML.
	For a non-XML file, choose File > Check Page > Validate Markup.
	The Validation tab of the Results panel either displays a "No errors or warnings" message or lists the syntax errors it found.

Using the Tag Inspector
The Dreamweaver Tag Inspector, similar to the HomeSite Tag Inspector, enables you to edit tags in a property sheet interface. As in HomeSite, the top level of the Dreamweaver Tag Inspector displays a tag tree, and the bottom level displays tag attributes.

To edit a tag using the Tag Inspector:

1	Open the Tag Inspector if it isn't already open (Window > Tag Inspector).
2	In Code view, click anywhere inside a tag.
	If the tag supports attributes, Dreamweaver displays the attributes and their current values in the Tag Inspector's property sheet.
3	Make the changes to the tag in the property sheet.
	Click an attribute name to type a value or, if the attribute takes predefined values, to select from a list.
4	If the attribute takes a value from a source of dynamic content (like a database), click the lightning-bolt icon at the end of the selected attribute's row and select the source.
	For information on defining sources of dynamic content, see Dreamweaver Help (Help > Using Dreamweaver).
5	Click elsewhere in the panel to update the tag in your document.

Using the Snippets panel
Dreamweaver has added a Snippets panel for code, similar to the panel in HomeSite. The Snippets panel enables you to store content for quick reuse. You can create and insert snippets of HTML, JavaScript, CFML, ASP, JSP, and more. Dreamweaver also contains some predefined snippets that you can use as a starting point.

To use the Snippets panel:

1	Choose Windows > Snippets to open the panel.
2	Use the buttons at the bottom of the panel to create folders and insert, create, edit, and remove snippets. For more information, see Dreamweaver Help (Help > Using Dreamweaver).

Using the tag editors
In Dreamweaver you'll find familiar tag editors. These tag-specific dialog boxes enable you to specify or edit the attributes for a tag. You can open Tag Editor dialog boxes in Dreamweaver the same way that you do in HomeSite.

To open the tag editor for a tag:

In Code view, place the insertion point within a tag, right-click, and then select Edit Tag from the pop-up menu.

Note: You can also select Modify > Edit Tag to open the tag editor.

Using the Quick Tag Editor
The Quick Tag Editor makes it easy for you to find and edit code while you are in Design view or in Code and Design view. The Quick Tag Editor enables you to quickly inspect and edit HTML tags, insert new HTML code, or wrap tags around a selection.

To open the Quick Tag Editor:

1	Choose View > Design or View > Code and Design.
2	Do one of the following:
	Place the insertion point in the document.
	Select an object.
	Select unformatted text or an object in Design view.
3	Press Control+T or click the Quick Tag Editor button in the Property inspector.
	The mode the Quick Tag Editor opens in depends on your selection.

To cancel the Quick Tag Editor:

Press Escape to exit without making any changes.