I have been working on the front end for a CMS website where the end user will use Adobe Contribute to easily update their website.

I am a big fan of CODA for writing my code and the thought of having to go back into dreamweaver was unappealing, to ease the path I upgraded to CS4 so that I could pretend it would somehow be nicer to work with, and actually it is.. mainly because of the new “Live View” feature. I am also working locally via MAMP which makes everything much quicker.

My mission was to create a number of template (.dwt) files and nested templates. The final number of templates would be around 30 but I wanted to create a good strong nesting throughout so that there was minimal updation needed when the back end folks put in their php.

I created one base template (A) which held the head region and base styling such as menu buttons etc. Then (B) which came straight from (A) and (C) which came off from (B). I then had a number of final templates that just used B and others that came off from C. B was to contain just keys that helped the back end work and basic editable regions that would be included in every template, like a page title for example. C would then hold a the various other editable elements, like pictures and text fields in a number of optional regions so I could select which regions I wanted to use in my final templates.  

I also wanted to include a number of repeating regions to hold images so the end user could include more than one image should they require, however Dreamweaver will not allow repeating regions inside optional regions so this idea could not happen, and therefore templates requiring repeating regions had to be implemented in the final template.

When I started to style my templates with CSS and XHTML I came across another problem, this was that on styling optional regions, because my actual editable region was inside my html, only this actual element was not brought through if the optional region was set to OFF. It did however bring through all the surrounding XHTML mark up, so it was essentially styled and shown to the browser but with no editable region inside. To overcome this I created a number of extra stylesheets that I included in an editable region inside the header which was included in template A. Many of which just needed section wrapping DIVS to be set to display:none to overcome this.  Others were more complex as you will see from below.

Because I wanted my end templates to look so different but all be based on the C template for ease of updation I used the optional regions to include a number of background images inside a single div (see below picture), I could then only set the images I wanted in the final template to TRUE, this gave me huge felxibility with my styling of templates using essentially the same information.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

So for example the two templates below are based on the same C template, they simply have different styling and include different optional regions.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

It seemed to work pretty well until I came to testing in Adobe Contribute, I found that Contribute was not picking up the second stylesheet, after some testing I found that it was because the second stylesheet was being imported further down in my head section than my first stylesheet, to overcome this I had to make sure this editable region was immediately under the first CSS import.

So there you have it, my experience with creating Dreamweaver templates. I decided to blog about this because when I was looking around the net I could not find all that much information about it. I hope that this may help others in their template adventures!