Another powerful customization feature built into Dreamweaver is that of libraries. Tag libraries serve as the foundation for code hints, the Tag Chooser, and the Quick Tag Editor. Towards the end of Chapter 3, we looked at various coding options including code hints. You saw that code hints appear as you author your HTML (or whatever language you use) in Code view. When you typed the < symbol and pressed the Spacebar between attributes, the code hints menu appeared, allowing you to choose from a variety of tags and attributes supported by specific tags. This organization of tags, attributes, and attribute values is stored in a tag library located in Dreamweaver's Configuration folder. Although the storage mechanism is irrelevant at this point, what is important is the fact that Dreamweaver allows you to access these tag libraries using a unique and easy-to-use dialog. The question comes up, "Why would I want to modify a tag library?" For the most part, if you're working with HTML, you wouldn't. Dreamweaver's organization of tags, attributes, and attribute values are such that they conform to HTML, XHTML, Accessibility, and W3C specifications exactly. You would, however, want to create your own custom tags if you were working with a tag-based technology such as ASP.NET that supports the development of third-party tags (also known as user controls). If you're not familiar with user controls, don't worry, we'll briefly cover them in the ASP.NET chapter in Part V, "Dynamic Web Page Development." In the meantime, let's review the power and flexibility offered by the Tag Library Editor so that you can begin to familiarize yourself with the customization of tags, attributes, and values that appear in the code hints menu. You can open the Tag Library Editor by choosing the Tag Libraries option from the Edit menu (see Figure 5.28). Figure 5.28. Dreamweaver gives you access to modify and create new tags in the Tab Library Editor dialog.The Tag Library Editor dialog features three editing modes for customizing tag libraries, tags, and attributes. From Figure 5.28, you can see that the editor opens in the default attribute editing mode with the <a> tag selected from the HTML tag library. This mode exposes the following functionality:
The tag library editing mode becomes visible when you select a tag library. Selecting the HTML tag library changes the interface, as shown in Figure 5.29. Figure 5.29. The tag library mode allows you to customize the technologies that the tab library can be used in.Aside from the same Tags option mentioned previously, the following two editing options are exposed in tag library editing mode:
Finally, you can see the features exposed by the attribute editing mode by expanding a specific tag from the tree. To demonstrate this, I'll expand the <a> tag. Doing so displays a list of attributes supported by the <a> tag (see Figure 5.30). Figure 5.30. Expand a tag from the tree to see all the attributes supported by the tag.Most of the features in this interface are similar to the previous two. The one difference is the Attribute type and Values options. These features are highlighted with more detail below:
NOTE The four targets are _top, _blank, _self, and _parent. Again, you probably won't find yourself making too many changes, if any, to the HTML tag library. In reality, the Tag Library Editor dialog makes the most sense when you're working with your own custom tags. To create your own tag library complete with tags, attributes, and values, follow these steps:
That's it! You've successfully created your own tag library complete with one tag and an attribute for that tag. Click OK to close the Tag Library Editor and return to the Document window. To test your new tag, switch to Code view. In the <body> tag, type the < symbol. The code hints menu immediately becomes available, displaying your <car> tag within the list (see Figure 5.34). Figure 5.34. Your newly created tag appears in the code hints menu.When you find the tag in the list, highlight it and press Tab to insert it. Now press the Spacebar to open the code hints menu again, revealing the attribute (types) supported by the tag. Press the Tab key again to insert the types attribute; immediately, the list of attribute values is revealed as shown in Figure 5.35. Figure 5.35. Adding the attribute and pressing the Spacebar reveals the list of custom attribute values.Select a value and press the Tab key again. Enter the </ characters to have Dreamweaver automatically close the tag for you. Of course, under the HTML context, this tag won't do much. It will come in handy, however, when working with technologies such as ASP.NET and JSP that support the development of custom tags such as the one we've created here. |