Working with Tag Libraries

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:

  • Tags: Displays a hierarchal list of tag libraries, tags, and attributes. Expand and collapse the tree to get a better idea as to the collection of tag libraries, tags, and attributes Dreamweaver supports out of thebox. You can also create your own custom tag libraries, tags, and attributes by selecting the appropriate options from the Add menu, represented by the Add (+) icon. Furthermore, you can delete a tag library by selecting the Remove () icon.

  • Tag format: Line breaks: Choosing options from this menu formats the line breaks before, within, and/or after the tag. Experiment with these options and observe the sample in the Preview pane to get an idea as to what your code will look like and what you feel most comfortable with.

  • Tag format: Contents: Changes the formatting of the content within the enclosed tag. Options include Not Formatted, Formatted But Not Indented, and Formatted and Indented.

  • Tag format: Case: Allows you to set the case in which attributes should be written. Options include Default, Lowercase, Uppercase, and Mixed Case. The Default option depends on the value set in the Default Tag Case menu in the Code Format category of the Preferences window. Choosing Mixed Case opens the Tag Name Mixed Case dialog, which allows you to explicitly set the case of the tag. For example, you may choose to have the first letter uppercase with the remaining letters in lowercase.

  • Preview: Displays a simple preview of the formatted tag based on values set in the previously mentioned menus.

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:

  • Used in: Check the technologies in which you want your tag library to be available.

  • Tag prefix: Technologies such as ASP.NET and JSP rely on precompiled controls written with tag prefixes. As a rule of thumb, the ASP.NET tag prefix is asp: while the JSP tag prefix is jsp:. As you will see later in the book, a text box is represented in ASP.NET as <asp:textbox> where asp: is the tag prefix and textbox is the tag name. This tells the ASP.NET runtime to render a text box, available from the ASP web control library. If your custom tag library is based on a tag prefix, enter that prefix here.

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:

  • Attribute type: Choose one of ten options from this menu to assign a specific type to the selected or custom made attribute. For instance, choosing the Color option exposes the color picker when the attribute is added; choosing Font displays a list of selectable web-based fonts.

  • Values: Selecting the Enumerated option from the Attribute Type menu enables this text box which allows you to enter comma-separated values. With the target attribute selected and the Enumerated attribute type option chosen, the four targets discussed in Chapter 3 become available.


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:


Start by minimizing any open tag libraries so that you can see your new tag library at the bottom of the list. Click the Add (+) button and select the New Tag Library option from menu.


When the New Tag Library dialog appears, enter a unique name and click OK. I'll enter Vehicle Tags. The new tag library is added to the bottom of the list.


Let's add a tag to the library. With the Vehicle Tags library selected, I'll choose the New Tags option from the Add (+) menu. The New Tags dialog appears.


In the dialog, make sure that the Vehicle Tags option is selected from the Tag library menu. Now enter a new tag name in the Tag Names text box. I'll enter car. Ensure that the Have Matching End Tags check box is checked. This guarantees that after you've added the closing > symbol in Code view, the end tag is automatically added. Click OK.


As you can see from Figure 5.31, the new tag is added to the Vehicle Tags library. Use the options exposed in this interface to format how the tag is added and formatted in Code view.

Figure 5.31. The new tag is added to the tag library.


Now you'll want to add attributes for the new tag. To do this, select the tag from the list and choose the New Attributes option from the Add (+) menu. The New Attributes dialog appears.


Enter the attribute types in the Attributes Names text box (see Figure 5.32). Click OK.

Figure 5.32. Enter a unique name that describes the attribute of the tag.


With the attribute still selected, choose the Enumerated option from the Attribute Type menu. Follow that up by entering comma-separated values (for example, Acura,BMW,Honda,Toyota) in the Values text box as shown in Figure 5.33.

Figure 5.33. Enter a list of comma-separated values in the Values text box.

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.

Macromedia Dreamweaver 8 Unleashed
Macromedia Dreamweaver 8 Unleashed
ISBN: 0672327600
EAN: 2147483647
Year: 2005
Pages: 237
Authors: Zak Ruvalcaba © 2008-2017.
If you may any questions please contact us: