Creating a Template

• Digg
• Stumbleupon
• Delicious
• Facebook
• Myspace
• Google
• Technorati
• Newsvine

Written by Colin Welch – 16.03.09

Tweet This

Part 7.1: Creating a Template

This tutorial uses the same files that you have used in previous tutorials (if you have not already worked through these it would be sensible to do so before attempting these steps). All this is covered in our comprehensive Dreamweaver course.

1: Open the “index.html” page by double clicking on it in the files panel

2: From the main menu, select File > Save as Template

3: Click on “Save” in the box that appears, and say Yes to “Update Links?” when asked – Dreamweaver will now create a new Templates folder within your website and the file will be saved as “index.dwt” which is a Dreamweaver Template file. Your original index.html page will still exist, but we’ll now be working on the new template file.

4: To start with, Dreamweaver will make the whole of the new page un-editable as it will regard the whole design as the template for every page. What we need to do now is define the “editable regions” – that is those areas of each page that will have unique content.

5: Highlight the heading of the main content of your page by selecting it with the cursor. Now select Insert > Template Objects > Editable Region from the main menu. This will open a new box. In the Name section of the box, name the region “Main Title” and click OK – note that this now appears as a caption above the heading on the page

6: Now select all of the text that appears under the heading. Repeat the process again, and name the Editable Region “Main Content”

7: You can repeat the process for any other parts of the page that you think will need to be changed on each different page, leaving the areas that need to be the same on every page as non-editable regions. Areas you should leave as non-editable are likely to include the main banner at the top of your page including any company logos, and the main navigation elements.

8: Select File > Save from the main menu

Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver course.

Similar resources you may like

1. Templates in Dreamweaver CS4
2. Link your homepage to the template
3. Templates – Making more new pages
4. Publishing your web pages
5. Modifiying pages using the template

Tags

creating a dreamweaver template, Dreamweaver, dreamweaver templates

Share This Resource

• Digg
• Twitter
• Stumbleupon
• Delicious
• Facebook
• Myspace
• Google
• Technorati
• Newsvine