• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Editing Code > Using the Edit Tag Dialog Box

Using the Edit Tag Dialog Box

The Edit Tag dialog box (which Macromedia also calls the Tag Editor dialog box) provides a handy place to examine and set every possible attribute for a tag, all at once.

To use the Edit Tag dialog box

In Code view, Split view, or the Code inspector, right-click (Ctrl+click) on any tag opener, and from the context menu that appears, select Edit Tag <tag name>.

The Edit Tag dialog box will appear (Figure 4.47).

Figure 4.47. The Edit Tag dialog box for the TD tag.

The General panel of the Edit Tag dialog box includes all common attributes of the tag. This panel differs depending on what tag you're editing (Figure 4.48). Make any changes you like to the attributes of the tag.

Figure 4.48. The attributes of the FONT tag in the Edit Tag dialog box.

See below for more about the other sections of the dialog box.

Tags that take no attributes, such as <strong>, will omit the General category in this the dialog box.

When you're done editing the tag, click OK to close the dialog box and return to the Document window. You may have to click within the Document window or select View > Refresh Design View from the menu bar to see your changes applied.

✓ Tip

  • Selecting Edit Tag produces different results, depending on which view you're using. For instance, if you select Edit Tag from the context menu in Code view, Split view or the Code inspector, the Edit Tag dialog appears, as indicated in the previous task. But if you select the same in Design view, you'll see the Quick Tag Editor instead (see Figure 4.37 and Using the Quick Tag Editor for examples).

More Edit Tag options

Tag Info Click the expander arrow at the bottom of the Edit Tag dialog box to display information from Dreamweaver's Code Reference (see Using the Reference Panel, earlier in this chapter).

Browser Specific Select this option on the left side of the Edit Tag dialog box to view information about how browsers vary in their treatment of attributes for a tag. You can easily check browser versions and apply proprietary attributes (Figure 4.49).

Figure 4.49. Tag info for the FONT tag.

Style Sheet/Accessibility The least user-friendly of the Edit Tag components offers you space to apply CSS styles and Accessibility attributes (Figure 4.50). (When applying CSS styles using this dialog box, type the name of the class or ID in the appropriate text box; see Chapter 11.) The Style attribute allows you to type shorthand for CSS style and apply it directly to a tag instead of applying a style class. Accessibility attributes allow you to add titles for indexing to nearly any attribute, and additional parameters for elements such as tables and frames. (For more on accessibility, see Appendix C on the Web site for this book).

Figure 4.50. The <a> tag has the most text boxes in the Style Sheet/Accessibility area of the dialog box.

Language (Figure 4.51) allows you to set the lang="nn" attribute. This attribute's theoretical uses include indexing by specific-language search engines and displaying characters available only in the set language. This attribute's relevance depends on whether you have found a use for it. Applying it to specific tags is at this point discretionary—see the Web site for this book for links to more information.

Figure 4.51. The language attribute can be set for any tag, although its usefulness depends on the tag and whether a device will use the information. The direction attribute can be set for right-to-left languages such as Arabic or Hebrew.

Content (Figure 4.52) For block and block-type elements such as P, DIV, SPAN, TD, CODE, and PRE, you can view and edit the content of the tag, which may include child tags. For H tags, the content is shown in the Header text box on the General panel of the dialog box.

Figure 4.52. The content area of the Edit Tag dialog box for tags such as P, shown, lets you view and edit any and all text and code within that tag.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint