Posts By Date

« March 2017 »

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

XBox 360 Gamercard

RichAlot's Gamercard

Creating Advanced Dreamweaver Templates

I've spent a good portion of the last month creating Dreamweaver templates that are compatible with Adobe Contribute. Dreamweaver and Contribute are an inexpensive way to integrate content management into a site and, if done correctly, can function as well as any of the enterprise-level CMS solutions out there. I highly recommend the duo for small-to-medium-sized sites, especially if your company doesn't have the budget for a high-dollar CMS. I particularly like how the Dreamweaver templates preserve standards-compliant code when locked down, as well as how the templates seamlessly translate in the Contribute user interface.

In researching best practices for building Dreamweaver templates, I wasn't able to find very many advanced resources. As a result, I've put together some sample code for a template that gives you a few tips, which may prove to be useful in your Dreamweaver template creation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- TemplateParam name="City" type="text" value="CityName" -->
<!-- TemplateParam name="Property List" type="boolean" value="true" -->

<title><!-- TemplateExpr expr="City" -->, Florida Real Estate Listings</title>

<h1><!-- TemplateExpr expr="City" --><!-- TemplateBeginEditable name="description" -->, Florida Real Estate Property Listings<!-- TemplateEndEditable --></h1>

<!-- TemplateBeginIf cond="_document['Property List']" -->
<th>Listing Price</th>
<!-- TemplateBeginRepeat name="Properties" -->
<th><!-- TemplateBeginEditable name="Bed" -->#<!-- TemplateEndEditable --></th>
<th><!-- TemplateBeginEditable name="Bath" -->#<!-- TemplateEndEditable --></th>
<th><!-- TemplateBeginEditable name="Listing" -->$#<!-- TemplateEndEditable --></th>
<th><!-- TemplateBeginEditable name="Status" -->Available<!-- TemplateEndEditable --></th>
<!-- TemplateEndRepeat -->
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="_document['Property List']==false" -->
<p>There are currently no properties available in <!-- TemplateExpr expr="city" -->, FL.</p>
<!-- TemplateEndIf -->

So what does all the code mean? I'm going to assume you're familiar with the basics of editable, optional and repeating regions. If not, I highly recommend referring to the Help menu in Dreamweaver or Adobe's Dreamweaver Help Resource Center. What I want to draw your attention to is the TemplateParam.

The TemplateParam is a Dreamweaver template object that allows you to define a parameter in your template. By default every template object has a name, but not all objects have values. By defining the name, type (Boolean, number, color, URL or text) and value in a TemplateParam, you store its information for future use throughout the template. In the example above TemplateParam is used in two unique instances.

In the first instance, the TemplateParam named City is a text type parameter with a placeholder value of CityName. I have created this parameter because it allows the reuse of the value--which will be a city name--for each instance it appears in the document. I need only define the value once. For every other instance where I want the value of City to appear in the template, I can use the expression <-- TemplateExpr expr="City" -->. Now when a user logs into Contribute, they are given the option to define the value for the City TemplateParam. Let's say for example the Contribute user defines the City value as Orlando. Every instance where I have entered the expression in the template is now replaced with the text value Orlando. This not only saves the end-user from having to reenter the text numerous times, but it helps prevent against user error because it doesn't require the template regions where the expressions appear to be exposed for editing.

The second TemplateParm instance in the example above is a Boolean type. A Boolean parameter allows you to assign true and false values in your template. If you're creative, you can utilize this to create a bit of crude conditional logic and swap content based on the Boolean value. In the example above, there is a table that should appear if there are property listings on a given page. However, if there are no property listings on that page the table should be replaced with a text message. See the example below for a more concise understanding of how it works.

<!-- TemplateParam name="Property List" type="boolean" value="true" -->
<p>If Property list is true show this.</p>
<!-- TemplateEndIf -->

<!-- TemplateBeginIf cond="_document['Property List']==false" -->
<p>If Property list is false show this.</p>
<!-- TemplateEndIf -->

As you can see, the key to the swappable content is the evaluation of the TemplateParam named Property List. If the value of Property List is true, a certain set of content is displayed. Conversely, if the value is false a different set of content is displayed. Like with the City TemplateParam, the value for the Property List Param can be assigned by the end user when they log into Contribute. The template then adjusts itself accordingly.

In addition to the text and Boolean parameter types, there are also color, number and URL types, but I won't get into those at this time. Although Dreamweaver templates tend to be an underappreciated tool, they can be highly-efficient when combined with Contribute and the pair can do the work of a high-cost CMS for a fraction of the cost.