Working without Templates

Although I'm pretty biased in favor of templates, I've seen circumstances where they just don't fit in the production workflow. Some companies have legacy systems in place that depend on their own custom tag(s). Dreamweaver has little problem accepting and working with third-party tags. It even has the ability to display custom icons in the Design view to represent a custom tag. Thanks to the power of the DOM in Dreamweaver extensibility, you can also incorporate third-party tags to generate static pages in much the same way demonstrated earlier in this chapter.

Let's assume, for example, that you're building a web catalog for several car models. The page layout is the same for each page, but the model name , image, description, and price are different. These different variables could easily be represented by custom tags (in bold), like this:

 <p class="modelHead">  <varModel>  </p>  <p class="modelBody">  <varDesc>  </p>  <p class="modelPrice">Only $  <varPrice>  !</p> 

Dreamweaver's DOM is robust enough to recognize third-party tags such as these. To reference a specific tag, use the getElementsByTagName() function:

 var theDOM = dw.getDocumentDOM();  var theModel = theDOM.getElementsByTagName("varModel"); 

The getElementsByTagName() function returns an array of all specified tags on a page. To reference the first ”and, in cases such as this example, the only ”tag, use the syntax theModel[0] .

Remember the two techniques used for replacing editable regions with data (discussed in the "Replacing Editable Regions with Data" section)? You can use the same basic techniques without templates with minor modification. Perhaps the easiest way to accomplish this is to create an array of the third-party tags used, like this:

 var theTags = new Array("varModel","varDesc","varPrice"); 

Then the first method would look like this:

 var theTags = new Array("varModel","varDesc","varPrice");  for (var j=0; j<theItems.length; j++) {     var theItem = theItems[j];     var theItemName = theItem.getAttribute('name');     if (theItemName == 'varModel')     {        theTags[0].outerHTML = theItem.innerHTML;     }     else if (theItemName == 'varDesc')     {        theTags[1].outerHTML = theItem.innerHTML;     }     else if (theItemName == 'varPrice')     {        theTags[2].outerHTML = theItem.innerHTML;     }  } 

Note that instead of replacing the innerHTML of an editable region, we're replacing the outerHTML of a non-empty tag ”in essence replacing the entire tag. The second method of looking for a match between data and third-party tags would look like this:

 var theTags = new Array("varModel","varDesc","varPrice");  for (i = 0; i < theItems.length; ++i) {     for (k = 0; k < theTags.length; ++k) {        if(theItems[i].getAttribute("name") == theTags[k]) {           theTags[k].outerHTML = theItems[i].innerHTML;           break;        }     }  } 

If you'd prefer to leave the third-party tags in the final output, use a tag pair, such as <varmodel></varmodel> , and replace the innerHTML of the tag.