| |
http://www.diamondtemplates.com/
Diamond Templates - Design, Help & Advice
|
|
|
Dreamweaver Tip: Build Better Websites Faster with Templates
If you want to make money marketing products and services on the World Wide Web, you must have a consistent look and feel to the pages that comprise your web site. Dreamweaver templates make this easy.
Dreamweaver templates relieve you of much of the tedious job of editing individual web pages, because you create the template one time then apply it to initial pages in your site. If you want to make changes alter, you can make them to the template and they are automatically applied to all of the pages that are based on your template.
Using Templates is a two step process:
1. Create the template.
2. Instantiate the template into one or more actual web documents.
So when should you use a template? How do you create it? How do you apply it? How do you make changes to a template and update the pages it applies to? The following sections will answer these questions.
When to Use a Template
Use a template whenever you have a group of pages that share a basic common group of layout features, and well defined areas that need to be customized. For example, you might use a template to define a group of pages with a three column layout, a common background color, and common menu bar at the top of the page, possibly common links on both sides of the page, and only the center column of the page left available for customization.
How to Create a Template
Dreamweaver gives you two methods to create a template, but this article discusses only the second method. The methods are:
Create a template from an existing page.
Create a template from a new page.
Here are the steps to create a Dreamweaver template from a new page:
1. Click the File menu, then click New.
2. A "New Document" dialog box will pop up. In the left column (the Category column) of the dialog box select Template page and in the right column (the Template column) select "HTML template". Click the Create button in the lower right corner of the dialog box.
The template is created. Now save the template as follows:
1. Click the File menu, then click Save.
2. You may get a Dreamweaver message complaining that the template has no editable regions. Ignore it, and click OK.
3. Now a "Save as Template" box will pop up. Type the name you want for the template in the bottom entry field, which is labeled "Save as".
Dreamweaver will automatically create a Templates folder and save the template into it. The template will have a ".dwt" file extension.
Populate the Template
To populate a simple Dreamweaver template, follow these steps:
1. Add content
2. Mark content as editable where applicable
A detailed description of these two steps follows:
Adding content to a Dreamweaver template is the same as adding content to any other page -- except . . . you should think carefully about the fact your content will be replicated on all instance pages based on your template.
As an example, you might do a table based three column layout, where the first row of the table is just one cell containing a graphic, and the second row of the table contains three cells -- links on the left, links on the right, and an editable region in the center.
You create the table, and then add the top graphic and the links as you normally would. This leaves only the center cell of the second row of the table to be marked as editable. Do this as follows:
1. Select the center cell of the second row of the table.
2. On the "Common" Bar, click the Templates popup menu, then click the Editable Region command.
3. A "New Editable Region" dialog window should pop up. Type a name (for example "Content1") into the "name" text box, then click OK.
Now the template has an editable region. Save it.
Create a Page Based on the Template
This is where you get a return on the work you did creating your template. The following steps describe how to create a page based on a template.
1. Click the File menu, then click New.
2. A "New Document" dialog box will pop up. Select the "Templates" tab at the top of the dialog box.
3. Now there should be two columns at the top of the "Templates" tab in the dialog box. The first column is labeled "Templates for:" and the second column is labeled "Site [site name]". In the first column, select your site; then in the second column, select your template.
4. Select "Update page when template changes" in the lower right corner of the tab.
5. Now click Create in the lower right corner of the tab.
6. A new untitled page should now have been created. Save the page, giving it the name you want.
Now you can make changes in any of the editable regions of the new page.
At this point, making changes is very simple, because Dreamweaver will only allow you to edit regions of the page that were defined as editable in the original template. If you try to edit anywhere else, the editing cursor will turn into a little circle with a slash through it and you cannot edit or delete anything.
When you are done customizing the page, save it. If you make any changes to the template in the future, they will be automatically added to the page you just created.
Conclusion
If you would like to know more of the under-the-hood mechanics of how Dreamweaver implements templates, see my article "How Dreamweaver Templates Work".
Sam Mela does web design and runs a math tutoring business in Springfield Virginia. His web site is http://www.WeekendSuccess.com
|
|
|
|
| All
contents © copyright 2006. Win2Win Limited. All rights reserved. |
 |
|
