Creating & Using Templates with Adobe Dreamweaver CS4
Templates are both powerful & flexible for two reasons:
- They speed up site development, by allowing the rapid creation of web pages based on a preformed (uniform) structure .. so all your pages have the same look & feel.
- They facilitate site maintenance, by enabling structural changes site-wide via the editing of a single-file .. similar to how CSS works. This aspect of templates is considerably more significant than item #1.
What suks is that you still have to re-up EVERY file that changes. Unlike CSS, which lets you get by up'ing only one.
The following are notes I made for myself while researching how to create and use templates in Dreamweaver CS4. Perhaps you might find them helpful. This guide was created 20.May.2009.
Update: 10.May.2010 - I have upgraded to Dreamweaver CS5, and will see if these instructions remain valid. So far I can't see any differences where templates are concerned.
This guide was created using a template I created in Dreamweaver .. as a learning exercise on how to use templates.
Step.01 » Prepare Web Page for Template Creation
- Create or select a web page that will serve as the basis for the template.
- Delete everything that changes and keep everything that remains the same.
- Leave an empty paragraph element in all areas that will change.
- Look at navigation and make sure no class attributes are set for 'current' .. to make the page more generic (less page-specific).
- Take extra time when preparing templates. Think thru how each page will be structured, because it's easier to make adjustments AS you create the template than it is later in the process .. after many web pages have been created, based on the template.
- Save this web page as an *.html file that will serve as basis for the template.
Step.02 » Create New Template
Creating templates in Dreamweaver is a 2-step process. First Save the preparatory *.html file AS a template, then create its Editable Regions, Editable Attributes and Repeating Regions.
When a web page is saved based on a template, everything is initially locked down. Without defining editable regions, templates can't be used to create any new web pages.
- Open *.html file saved in Step.01 and select File > Save As Template. This opens a dialogue box.
- Name the template and give it a 'description.' (Description is optional, but good idea, especially if you have multiple templates.)
- Put check in box labeled "Do you want to update links?" (usually 'Yes')
- New template gets a *.dwt file extension.
- Templates are automatically saved in /Templates folder, located in te site's Root directory (which Dreamweaver will automatically create if it does not already exist). Do not move or rename the /Templates folder because it will break the templates. Nothing but templates go in /Templates folder.