Tag Libraries and the Tag Library Editor

[ LiB ]

Tag libraries are at the heart of Dreamweaver functionality. A tag library is a database of information about a set of tagsHTML tags, ASP tags, ColdFusion tags, and so on. In that database is the information that Dreamweaver uses to perform most of its tag- related tasks , from populating code hint menus , to applying source formatting, to generating the information presented in the Tag Chooser and Edit tag editor boxes.

The Tag Library Editor is your window to the tag libraries, and your tool for editing and adding to the information stored there. Has the latest version of Internet Explorer started supporting a tag or attribute that Dreamweaver doesn't know about? Add it to the library! Do you hate how Dreamweaver indents table code, or where it inserts line breaks between tabs? Change the library! It's all done with the Tag Library Editor.

Using the Tag Library Editor Dialog Box

Before you can start tinkering with tag libraries, you need to know what information and options are available to you through the Tag Library Editor dialog box. To open the Tag Library Editor, choose Edit > Tag Libraries. You can also access it from the Preferences/Code Format and Code Hints windows . As Figures 27.22 and 27.23 show, the interface contains a wealth of nested information.

Figure 27.22. The Tag Library Editor dialog box showing all the tag libraries in the Dreamweaver database.

Figure 27.23. The Tag Library Editor dialog box showing settings for individual tags within a library.

The Tags List

The upper half of the dialog box is taken up by the tags list , an expandable tree structure showing all tag libraries, the tags they contain, and the tags' attributes. The tag libraries are shown in the order in which Dreamweaver searches them for tag information (refer to Figure 27.22). In other words, when Dreamweaver is determining how to handle a certain tag, only if that tag does not exist in the HTML library does Dreamweaver search for it in the ColdFusion and other libraries. Within each library, the individual tags and attributes are listed in alphabetical order (refer to Figure 27.23).

If you use Dreamweaver templates, note the library of template tags available here. These tags are written in Dreamweaver's template language. See Chapter 20, "Site-Wide Content with Templates and Libraries," for more on template language.

Tag Library Options

If you have a tag library selected in the tags list, the bottom half of the dialog box displays a list of document types that might contain tags in that library (refer to Figure 27.22). This doesn't mean that Dreamweaver allows only certain tags in certain document types, but it does mean that tags in a certain library are meaningful to Dreamweaver only within those document types. For instance, within a JavaScript document, HTML tags such as a and table are meaningless. Dreamweaver doesn't provide code hints or other code editing help for those tags in that context.

Tag Options

When a tag is selected in the tags list, the bottom half of the dialog box displays Tag Format options for that tag (refer to Figure 27.23):

• Line breaks Should Dreamweaver insert a hard return in the code before and/or after the tag, or between a tag pair and its nested contents? The options in this pop-up menu determine that.

• Contents Should any contents nested within a tag pair be indented beyond the tag's indentation, and should the contents be formatted? Choose from this menu to determine that.

• Case Should the tag be uppercase, lowercase, or mixed case? Or should it follow an application-wide default? (Click the Default link to establish the default case for all tags.)

The Preview area at the bottom of the dialog box shows the results of whatever formatting options have ben chosen for the current tag.

Attribute Options

When a tag attribute is selected in the tags list, the bottom half of the dialog box displays formatting options for that attribute, as shown in Figure 27.24:

Figure 27.24. The Tag Library Editor dialog box showing settings for an individual tag attribute.

• Attribute Case As with tags, case can be set to uppercase, lowercase, or mixed case for each attribute, or the attribute can use an application-wide default for all attributes. (Click the Default link to establish the default case.)

• Attribute Type The option selected from this pop-up menu determines what kind of help will be available to usersin the form of code hints and Tag Inspector options, for instancewhen working with this attribute. If Dreamweaver is expecting a text value, for instance, no code hint will be given; if a color value is expected, the color picker will appear; if an enumerated value is expected, a list of possible choices will appear in the Code Hint menu. Table 27.2 lists the attribute types and how they are treated in the Dreamweaver interface.

  Table 27.2. Possible Attribute Types for Entries in a Tag Library

  Attribute Type	Description	Code Hints
  Text	Any text can be entered	None
  Enumerated	Only select values are acceptable	Menu populated with comma-separated list entered in the Attribute Value field
  Color	Color name or hexadecimal color value	Color palette
  Directory	Absolute URL for a directory	Menu of protocols: ftp://, http://, and so on
  File Name	Absolute URL for a file	Menu of protocols: ftp://, http://, and so on
  File Path	Absolute URL for a file	Menu of protocols: ftp://, http://, and so on
  Flag	No value at all; the mere presence of the attribute is the flag (for example, the nowrap attribute for table cells )	None
  Font	One or more fonts	Menu of defined font lists
  Relative Path	Relative URL	Browse option
  Style	CSS or other style name	List of available classes

  
  

• Attribute Value If the attribute type is set to Enumerated, this input area should hold a comma-delimited list of possible values. These will become the entries in the Code Hint menu.

Editing Tag Library Entries

As you have probably figured out by now, you can change any setting for any library, tag, or attribute simply by selecting the desired item in the tags list and changing the settings that appear. Here are a few tips on making changes:

• You can't do much serious damage to Dreamweaver just by changing the line break or capitalization settings for tags, but you can make features such as code hints unusable for certain attributes if you aren't careful with your settings. Proceed with caution.

• Don't override the default case of tags and attributes unless you have good reason to. The application-wide default becomes meaningless when most of the elements involved override it.

• Try your changes to see how you like them! After you've changed a formatting option, try creating and editing some samples of the changed tags in Code view. How do the code hints work? What happens when you apply source formatting? If you don't like it, go back to the Tag Library Editor and change things back.

If you're interested in extending Dreamweaver, the Tag Library information is stored in the Dreamweaver Configuration/Tag Libraries folder. Each tag library is represented by a folder within this main folder. Within a library, each tag exists as an XML file with the .vtm filename extension. For more information on working with the Configuration folder, see Chapters 28 and 29.

Adding (and Removing) Entries

Adding and removing attributes, tags, and even entire libraries is a little more complex (and can be a lot more dangerous!) than editing existing entries. But it's also where the true customizable power of Dreamweaver tag libraries comes to your aid. All adding and removing can be done with the + and buttons at the top of the Tag Library Editor dialog box.

Adding a Tag Library

To create a new, empty tag library, do the following:

1. Click the + button at the top of the tags list, and choose New Tag Library from the pop-up menu.
   
   
2. In the dialog box that appears, give your new library a name. (This name is for your benefit only, so be descriptive and concise .)
   
   
3. Click OK to close the dialog box. You'll see your new library at the bottom of the tags list. (New libraries are like the new kids at schoolthey have to go to the end of the line.)
   
   
4. With your new library selected in the tags list, select what document types should support the tags in this library.
   
   

Your new library is ready to rock and roll! The next step is to add tags to the library so that it will have some functionality.

Adding a Tag

To add a new tag to a library, follow these steps:

1. Click the + button at the top of the tags list, and choose New Tags from the pop-up menu.
   
   
2. The New Tags dialog box appears, as shown in Figure 27.25. Specify what library the tag should be added to, and enter the tag's name. (The name is what appears between the opening and closing < > symbols. Don't include the symbols themselves .)
   
   

   Figure 27.25. The New Tags dialog box, part of the Tag Library Editor.

   

   
   
3. If the tag will consist of an opening and closing pair, select the Have Matching End Tags option. If the tag will be a single tag only (such as <img> or <hr> ), deselect this option.
   
   
4. When you're finished, click OK. Check out the tags list. Your tag appears as an entry in the library you specified. Select the tag in the list, and edit its formatting options as desired.
   
   

After you've done this, you can try it out! Open a document of a type that supports the library containing your tag, go to Code view, and type the first few characters of your new tag. If you have code hints enabled, a hint menu should appear, with your tag as one of the entries.

Adding an Attribute

To add a new attribute to a tag, do the following:

1. Click the + button at the top of the tags list, and choose New Attributes from the pop-up menu.
   
   
2. The New Attributes dialog box appears, as shown in Figure 27.26. Specify the library and tag the new attribute will belong to, and enter the attribute's name.
   
   

   Figure 27.26. The New Attributes dialog box, part of the Tag Library Editor.

   

   
   
3. When you're finished, click OK. Check out the tags list. Your attribute appears as an entry for the tag you specified. Select the attribute in the list, and edit its formatting options as desired.
   
   

Exercise 27.2. Adding a Custom Tag Library and Elements

You want to get some practice working with tag library elements, but you probably don't want to risk upsetting the program's built-in functionality. So, in this exercise, you'll create a new tag library, populate it with a new tag, and assign various attributes to that tag. When you're finished, you'll remove the whole lot.

1. Choose Edit > Tag Libraries to open the Tag Library Editor.
   
   
2. In the tags list, contract all categories so that you see a list of libraries like the one shown in Figure 27.22.
   
   
3. Create a new library by clicking the + button and choosing New Library from the pop-up menu. Call the library Practice Tags.
   
   
4. In the tags list, select the Practice Tags library and make sure that HTML documents are selected as one of the document types where these tags may be found, as shown in Figure 27.27.
   
   

   Figure 27.27. The Practice Tags library set up so that its tags will be recognized when found in HTML documents.

   

   
   
5. The Practice Tags library needs a tag of its very own. With Practice Tags selected in the tags list, click the + button, and choose New Tags from the pop-up menu. In the dialog box that appears, make sure that the tag will be added to the Practice Tags library, as shown in Figure 27.28. Call the tag grin . This imaginary tag has no closing tag, so deselect the Have Matching End Tags option. Click OK to close the New Tags dialog box.
   
   

   Figure 27.28. Adding the grin tag to the Practice Tags library.

   

   
   
6. Back in the Tag Library Editor, select grin in the tags list, and set its options. Choose whatever formatting options you like. Use the Preview area to see how your choices will affect the code structure.
   
   
7. Try out your new tag! Click OK to close the Tag Library Editor, and open a new HTML document. Make sure code hints are enabled (select Edit > Preferences > Code Hints).
   
   Go to Code view, and between the <body> </body> tags, type <g. Unless your code hint delay is set to 0, pause a moment before continuing. The Code Hint menu appears, taking you right to your new tag! Press Enter to insert the rest of the tag: <grin> . Congratulations!
   
   
8. Add a few attributes to your tag. Select Edit > Tag Libraries to open the Tag Library Editor. From the tags list, find and select your grin tag. Click the + button, and choose New Attributes from the pop-up menu.
   
   
9. In the New Attributes dialog box, make sure your Practice Tags library and grin tag are selected. Call your attribute kind . Click OK, and go back to the Tag Library Editor.
   
   
10. In the editor, select the new kind attribute. Set its Attribute Type to Enumerated, and enter a comma-separated list of possible grins in the Attribute Value field ( sly , sneaky , crooked ). Figure 27.29 shows this happening.
    
    

    Figure 27.29. Adding the kind attribute to the grin tag.

    

    
    

    

    When defining an enumerated list in the Tag Library Editor, be sure not to put any spaces between your commas, or the list won't work.

    
    
11. Set whatever other attribute formatting you like, and click OK to close the Tag Library Editor. Try your attribute! In your open document, still in Code view, try entering a new grin tag. This time, type this much: <grin .
    
    A Code Hint menu showing your grin types appears! Choose one, and let Dreamweaver finish coding your grin tag for you. Figure 27.30 shows this happening.
    
    

    Figure 27.30. The grin tag in action in Code view.

    

    
    
12. See how the new tag behaves in the Tag selector and Tag Inspector. Open the Tag Inspector (select Window > Tag Inspector), and bring the Attributes tab to the front. Switch to Design view, and refresh if necessary (click the Refresh button in the Tag Inspector).
    
    In the Document window, switch to Code and Design view. In the Code portion of the window, make sure the cursor is within the grin tag. At the bottom of the window, grin shows up in the Tag selector. Select it and look in the Tag Inspector.
    
    There's your kind attribute and its value! Select the value. Note that the Inspector shows a triangle icon, indicating that there's a dropdown list of values for that attribute. If you click the icon, you're presented with your list of attributes.
    
    

[ LiB ]