THEPROOFINGSYSTEMS.COM

digital photo proof - www.theproofingsystems.com

Menu


Figure 3.57. The code is collapsed and temporarily hidden from view. [View full size image] 4. You can expand the code by choosing


the plus (+) icon that appears next to the collapsed code. Alternatively, choose the Expand All button in the Code View toolbar to expand all collapsed code. The Tag Inspector After you've created the tag structure, you can use the Tag Inspector to format all attributes of a tag through a visual panel. Part of the Tag panel group and available by choosing Tag Inspector from the Window menu, the Tag Inspector visually categorizes and lists all attributes supported by a tag. As you can see in Figure 3.58, the Tag Inspector displays all attributes and attribute values for the selected tag. Figure 3.58. The Tag Inspector visually displays attributes and attribute values for a selected tag.   Depending on the attribute value you select, the Tag Inspector either allows you to manually type a value or allows you to select from a list of values through a menu similar to Figure 3.59. Figure 3.59. Enter attribute values or select from a list of attribute values in some cases.   Although the Tag Inspector works in both Code and Design views, its inclusion and subsequent benefits are immediately obvious. Using the Tag Chooser The next major addition to the development interface is the Tag Chooser. The Tag Chooser, available by selecting the Tag option from the Insert menu, is a collection of HTML, CFML, ASP.NET, JSP, JRun, ASP, PHP, WML, and XSLT tags. To use this intuitive window, place your cursor in the <body> tag and choose Tag from the Insert menu. The Tag Chooser dialog appears similar to Figure 3.60. Figure 3.60. The Tag Chooser contains a complete collection of HTML, CFML, ASP.NET, JSP, JRun, ASP, PHP, and WML tags.   Choose the tag collection you'd like to explore; the tags are further organized within structural categories. For instance, the <a> tag is organized in the General option of the Page Elements category. Choosing the <a> tag from the elements pane also reveals the HTML reference for the <a> tag within the More Info pane similar to Figure 3.61. Figure 3.61. HTML tags are organized in categories. Selecting a tag opens the reference for the tag in the More Info pane.   To insert a selected tag, simply choose the tag and click Insert to launch the Tag Editor dialog (see Figure 3.62). Figure 3.62. The Tag Editor dialog allows you to format properties for a specific tag. [View full size image]   After you've formatted the attributes of the tag, click OK to insert the tag into the coding environment. You can either continue adding tags using the Tag Chooser or click Close to return to the coding environment. Working with Snippets The final development aid you can use in the Code view is snippets. Snippets are a clever way to save small blocks of prewritten code so that they are always available to you (and other developers) for use. Available from the Code panel