Adding CMS Tags Through Tag Libraries

Defining a page type has numerous benefits, including the ability to open and edit files with custom extensions. Perhaps the biggest plus, however, is defining custom tags to go with the custom page. As with page types, Dreamweaver has a multitiered support system that you can implement partially for quick coding of individual tags or completely for total integration. A key element of the Dreamweaver's tag extension layer is the Tag Library feature, where you can define custom tags with or without custom attributes and complete with formatting options.

In truth, you don't really need to do anything to use a custom tag in Dreamweaver. Nonstandard tags entered by hand are ignored, much as they would be in a browser. However, to my mind, the advantages to properly setting up custom code justify the time spent. Integrated code is easier to insert, modify, manipulate, and delete. Typographical errors are reduced to a minimum and flagged immediately. The learning curve for creating CMS-specific pages drops significantly.

Tag libraries represent one of the most far-reaching changes in Dreamweaver MX. Macromedia, in essence, placed all of the tag support within Dreamweaver in open source. Now you can modify any standard tag HTML, ASP, ASP.NET, CFML, JSP, PHP, and moreto fit the standard coding of any organization, right down to the attribute level. More importantly, particularly when it comes to integrating into a CMS, you can create new tag libraries and link them to one or more page types. This means that for the new JLowery content management system (shipping two weeks after you read this ^[*] ), I can define a JWL page type with a full complement of JWL tags and their attributes.

^[*] No, not reallly

All tag library management is handled through the Tag Library Editor (see Figure 1.3). Let's walk through the setup of a whole new tag library, establishing a couple of custom tags with attributes.

Figure 1.3. To add several tags at one time in the Tag Library Editor, use a comma-separated list.

1. Choose Edit > Tag Libraries to open the Tag Library Editor.

   First, we'll establish the new tag library.

2. Select Add (+) and choose New Tag Library.

3. Enter a name for the tag library.

   The new tag library is added to the bottom of the list. I tend to use meaningful abbreviations wherever possible to identify tag libraries; in this case, I'll use JWL as the name of my tag library.

4. With the just-defined tag library still selected, choose the associated page types.

   Most CMS pages are a mix of HTML and custom tags. Be sure to select the HTML option as well as any special page types. In cases where data-driven pages are used, select the appropriate server model as well.

5. If all of the tags in the new tag library start with the same characters , such as jwl: , enter them in the Prefix field.

   Dreamweaver automatically prepends any prefix to the tags in the tag library. This simplifies the management of custom tags because they're easier to identify.

With a new tag library established, we're ready to insert the custom tags:

1. Continuing in the Tag Library Editor, make sure the new tag library is selected and select Add (+), New Tags.

   If you forget to select the desired tag library, you can choose it from the Tag Library drop-down list.

2. Enter the name for the new tag.

3. To enter multiple tags, use a comma-separated list.

4. If the tag(s) are not empty, select the Have Matching End Tags option.

   After clicking OK, you'll find the new tags under the selected tag library.

5. To control a new tag's formatting, select the tag and choose which aspect to modify:

   • Line breaks Choose from No Line Breaks (default); Before and After Tag; Before, Inside and After; or After Tag Only.

   • Contents Options are Not Formatted; Formatted But Not Indented (default); or Formatted and Indented.

   • Case Choose from Default (default), Lowercase, Uppercase, or Mixed Case.

     The Default case is set in Preferences in the Code Format category or by selecting the Set Defaults link in the Tag Library Editor; only lowercase and uppercase options are offered in either place.

Tags can have one or more attributes. To add new attributes, follow these steps:

1. In the Tag Library Editor, select a tag you want to add attributes to and select Add (+), New Attributes.

2. Make sure that the proper tag library and tag are selected in the New Attributes dialog box and enter the name of the attribute.

   As with tags, you can create multiple attributes for a single tag by entering a comma-separated list of attributes rather than a single one.

3. To format a newly added attribute, select it and alter one or more of the following settings:

   • Case Again, you can choose from Default (default), Lowercase, Uppercase, or Mixed Case.

   • Type There are a wide range of attribute types: Text, Enumerated, Color , Directory, File Name, File Path, Flag, Font, Relative Path, and Style.

     Different attribute types display different controls in the Tag Inspector. For example, setting an attribute type to Color causes the color picker to appear when choosing a value in the Tag Inspector, as shown in Figure 1.4.

     Figure 1.4. Custom attributes defined in the Tag Library Editor are much simpler to use properly; here, a color attribute is being applied via the Tag Inspector.

     

4. If you choose Enumerated as the attribute type, enter a commaseparated list of the accepted entries in the Values text area.

As you might suspect, to delete any tag library, tag, or attribute, simply select the unwanted item and choose the Remove (-) button. Changes made in the Tag Library Editor are immediate; there's no need to relaunch Dreamweaver.

After you define tags in the Tag Library Editor, open any page of the custom tag's document type and go into Code view. Type an opening angle bracket , and all of the defined tags for that tag library appear.