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.

Article Source: http://EzineArticles.com/?expert=Samuel_Mela

More Web Site Design Articles:

Free Website Templates

Useful Links
Web Designer in Philippines
Web Design Resources


	Free Website Design Templates view actual page \| download view actual page \| download view actual page \| download Dreamweaver Tip: Build Better Websites Faster with Templates By Samuel Mela 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. Article Source: http://EzineArticles.com/?expert=Samuel_Mela More Web Site Design Articles: 8 Specific Ways to Avoid Common Web Design Mistakes Handy Hints For Web Designers How to Create a Website - The Basics Website Design Tips For Site Appearance Your Website Layout The Basic Skills Needed to Become a Web Designer - Simple Programs You Can Teach Yourself XHTML Equals to Browser Compatibility Information About Web Design Training You Can Have a Bright Career in Web Design Taking Your First Steps Toward Creating a Personal Website Inspiring Designs For Your Website How to Design a Successful Website - A Practical Guide! Choose Colors While Designing Web Pages Remarkable Tips For Freelance Web 2 Graphic Design Templates Dreamweaver Vs FrontPage Review What is the Best File Format For Saving Images on the Web? Barack Obama's Website is Web 2.0 at Its Best Role of Site Structure in Web Designing and Traffic Modern Web Design Techniques 7 Must Know Rules For Website Designers Web Designing For Your Home Page Eight Tips to Enhance Online Profits Website Design the Latest Trends What Do All These Graphics File Extensions Mean? The Psychology of Colour in Web Design How to Create a Successful Web Page Layout Website Templates - Build Your Own Website Benefits of Using a Website Template Website Designing – Things To Keep In Mind A Website Checklist 8 Must Have Graphic Design Skills in Today's Market Freelance Web Designer - Why You Should Use One! The Importance Of Getting The Best Web Design Team Involved In The Project Finding and Using a Free Web Site Template 7 Tips for Improving Your Website Design How To Think Like A Web Designer Planning An Effective Web Site Design Web Site Design: Setting the Wrong Backgrounds and Reducing Readability The Best Home Pages Establish Identity and Purpose in a User-Friendly Interface Website Creation Checklist Considering A WebSite Or Unhappy With The One You Have? Don't Trust This Kind Of Web Designer Web Design-Impact Beyond Measure User-Friendly Web Design The Powerfully Attractive Webpage Template No More Font Tags! Seven Reasons to Hire a CSS Web Designer Why Should One Use Web Templates Dreamweaver Tip - Build Better Websites Faster with Templates Some Of The Crucial Components Your Web Site Needs To Be Customer Friendly Benefits of Web Site Templates Advantages of Having a Website How Do You Choose a Web Designer? Website Templates - Who Benefits? Build Websites Easier with Premade Templates The Newbie's Guide to Small Business Web Design Pages to Include in Your Website Do You Really Own Your Web Site? Maybe Not Designing Your Website's Directory Structure 7 Web Site Design Mistakes That Will Lose You Clients Optimal Website Design Becoming A Website Designer How to Design a Search Engine Friendly Website 6 Reasons Why Using Flash is a BIG Mistake
Free Website Templates Web Design Articles Math Calculators Java Programs Site map Contact Us Useful Links Web Designer in Philippines Web Design Resources