How to Use Dreamweaver Templates
The template feature in Macromedia Dreamweaver is a very useful website programming tool, particularly for large sites. Templates allow a website programmer to change a whole set of web pages by editing just one file. For example, suppose you have a section of your business website called "About Our Company" that contains pages for each of your staff members, a web version of each of your company newsletters from the last year, a list of your company affiliations, resume, references, etc. That section alone may contain 15 or 20 individual pages. Now, you've decided to add a new sub-category which requires adding a new link to all the pages in that section. If all the "About Our Company" pages are governed by a Dreamweaver Template then you don't have to open and change code on 20 pages. You can simply make a change to the template file, and it is filtered throughout the site. The template feature is also helpful in maintaining a consistent look for your site when content is added or maintained by several people.The basic premise of the template feature is that certain areas of a page are defined as editable, while other areas remain consistent throughout the whole set of pages to which the template is applied. Here's how you can implement the template feature when programming a site using Dreamweaver:
Other People Are Reading
Things You'll Need
- Dreamweaver installed on the computer you'll be using for programming your site
- A general layout plan or sketch for your page
- An outline of your site that includes your plan for sub-links, etc.
- Any images or external files that you'll need for your general format (logo images, etc.)
Instructions
-
Steps for Using Dreamweaver Templates
-
1
Launch Dreamweaver and create your new site. Then, it is helpful to go ahead and set up a "dummy" directory/file structure. When looking at the "Files" window, click the icon in the upper right corner of the Local Files side. Highlight the "Files" submenu. You can create new folders and files there and type in their appropriate names. For example, if you want to create the above mentioned "About Our Company" section, you might first create a folder called "About_Our_Company," and then create files within that folder called "profile.html," "newsletter.html, "staff.html," and "affiliations.html." Once your file structure is in place, you will be able to link your menu items as you design your template.
-
2
Create a new HTML file by choosing File > New from the main Dreamweaver menu. When the dialog box appears, choose "Basic Page" and "HTML" from the two submenus. Then, click "Create." Your new file will open. You can go ahead and save the file immediately as a template file. Just choose File > Save As Template from the main Dreamweaver menu and name your file in the subsequent dialog box. Choose an intuitive name like "about_company" for our working example. Dreamweaver will automatically create a directory called "Templates" containing your new template file.
-
-
3
Now, it is time to create the template page layout according to your general layout sketch or idea, inserting images, etc to create a finished page. Since you established your file structure with "dummy" pages in Step 1, you can go ahead and link your menu items to the appropriate pages.
-
4
After your page layout is complete, you can designate your template's editable regions. You can select as many editable regions as you need. Look at your template and determine which areas will be unique for every site page. Areas for your page's specific text, heading, even photo locations are good candidates. Ideally, any areas of the layout that will remain consistent throughout the site pages that this template will govern should be uneditable.To designate an editable region, click within the chosen page area and select the appropriate HTML tag in the gray bar at the bottom of your page window. This will highlight the chosen region. For example, if you would like for a specific table cell to be editable, click within the cell and then click the <td> tag in the gray bar. Choose Insert > Template Objects > Editable Region from the Dreamweaver main menu. A dialog box will appear where you can name the region. Click OK and your first editable region has been designated.Remember that generally the specific HTML tag attributes as well as your general page attributes will be governed by the template. So in our table cell example, be sure to set your vertical and horizontal alignment attributes in the template as you want them to appear throughout your site pages. You will, however, be able to give each page a unique title regardless of the template application.When you are finished inserting all your editable regions, save your Template file and close it.
-
5
Now you are ready to apply the template to the appropriate pages. From your "Files" window, double-click the HTML page to which you would like to apply your template. An empty page should open. Choose Modify > Templates > Apply Template to Page from the Dreamweaver main menu. The name of your template should appear in the dialog box. Highlight it and click "Select." Dreamweaver will then import your template layout. Your editable regions will be tabbed throughout the page, and your cursor will show a "no" sign when you mouse over uneditable areas.You can update your editable regions with specific content for that particular page and save.
-
6
If you need to change the uneditable portions of your template throughout the site -- like adding a new link as in our introductory example -- start by double-clicking the template file in your "Files" window. When the page opens, you can make the necessary changes to the uneditable regions.To apply your changes throughout the site, save the Template page. Then, choose Modify > Templates > Update Pages. Select "Entire Site" from the drop down menu of the dialog box and make sure the box beside "Templates" is checked. Then, click Start. Dreamweaver will update the appropriate files and show them in the list. Then, close the dialog box and your changes are complete!
-
1
Tips & Warnings
It's easiest to set up your templates first before any of your other pages have been programmed. You can always apply a template to existing pages, but it will require some deleting, copying and pasting of existing content to get it into the correct editable areas.
