Dreamweaver CS4's template system not only allows the web designer to create multiple pages on your website using the same basic design, but it is also provides the webmaster an easy way to manage and update a multi-page site. Whenever you modify the design of your template, whether to add new things, remove elements or modify the page in other ways, the web editor will automatically, with your permission, update all the pages on your site to that new design. This makes the arduous task of changing the design of a site extremely simple, since Dreamweaver does all the tedious work.
This chapter deals with how you can use that template system to manage your site.
By the end of this chapter, you will have accomplished the following:
You will have created a template for your site based on the design that you've been working on so far in this Dreamweaver CS4 Tutorial series.
You will have created a website with multiple pages, including the Home page (which you created in the previous chapters), the Site Map and the About Us page. All your pages will be linked to each other through the navigation menu bar that you inserted in chapter 6.
Note that if you have not been following this tutorial series, you may find this chapter a bit bewildering, since the information and skills presented here are built upon things taught in the earlier parts. If you're new to Dreamweaver CS4, you may find it easier to start with the first chapter.
If you look at all the article pages on thesitewizard.com, you will probably have noticed that every page bears basically the same design. There is a logo on the top left corner, a navigation menu spanning the left column, and the article itself occupying the right column. The only thing different about each page is the content of the article itself. In fact, this similarity between pages is not unique to thesitewizard.com: just about every website on the Internet has a basic design that most (or all) pages of that site share.
The fact that most (or all) of the pages of a typical website share the same design is not accidental. Nor is it due to laziness. It has to do with usability.
Once your visitors have figured out how to find things on a single page on your site, such as where to find the navigation menu bar, where to find the product description and "Order" button, and so on, they will also know how to use the other pages on your site. Such a familiarity with your site means that they will be able to easily locate the things they need from your site, making the site appear more user-friendly to them.
Since we want all the pages of our site to share the same basic design, it stands to reason that we will save time when designing new pages if we simply create a template for the site. Every time we need a new page for the site, we can just base our new page on that template, and only modify the parts that are different for that new page.
This is where Dreamweaver's template tools come into play. In fact, Dreamweaver goes beyond simply allowing us to create a template from which we can base other pages. Since most webmasters also change their website design from time to time, Dreamweaver also has the ability to automatically update all the pages based on a particular template every time you change that template.
To facilitate this auto-updating feature, Dreamweaver requires that you designate which portion of your template is part of the fixed design that you want on all pages, and which portion has content that will be different on every page. That way, when you modify the fixed design portion in your template, Dreamweaver will be able to update all the pages on your website to the new design.
To make it easier for me to refer to different parts of your web page in this tutorial, I shall use the page pictured below as reference. Your web page will of course not look like that: you will have probably placed a logo, written text appropriate to your site, included pictures, photos, background images and also made some colour changes.
When I refer to, say, the "Header" item later, simply look at the picture above and find the equivalent item on your web page. The same goes to the other items on the page, like the "Main Content" item, the paragraph under the "Main Content", the subtitle "Subheading", etc.
Start up Dreamweaver CS4. Doubleclick the "index.html" file in the FILES panel to open it.
Click "File | Save As Template..." from the menu. This opens up the "Save As Template" dialog box. Click the "Save" button. When a message box appears, with the message "Update Links?", click "Yes". Dreamweaver then proceeds to create a "Templates" folder in your website's directory. If you look at the tab at the top of the Dreamweaver window, you will see that it has changed from "index.html" to "index.dwt". As of this moment, we will be modifying the template file, index.dwt, instead of your home page, index.html.
The template file that you're looking at has, by default, no editable regions. That is to say, if you create a new web page using this template as it stands, Dreamweaver won't let you change any part of the new web page, since it regards the entire page as part of the fixed design for your website.
What we need to do now is to tell Dreamweaver which portion of the page is editable.
Select the equivalent of the bold "Main Content" words (see picture above) on your web page. We want to make this title portion modifiable so that in the subpages on your website, you can replace it with the title of that page.
Click "Insert | Template Objects | Editable Region" from the menu. A dialog box, called "New Editable Region", will appear. The "Name" field will be pre-filled with some default name like "EditRegion3" or the like. Delete the default name and type "Page Title" instead. Click OK.
Notice that the "Main Content" words now have a caption "Page Title" above it.
Select all the paragraphs under the "Main Content" title If you have one or more "Subheading" subtitles and paragraphs below that, include them in your selection as well. We will mark this entire region as editable, so that you can change the content for your other pages (unless you want all the pages on your site to say exactly the same thing).
With that entire region selected, click "Insert | Template Objects | Editable Region" from the menu again. When prompted for the name of this region, type "Page Content", and click "OK".
The section should now have a caption "Page Content".
There are only 3 sections left on your web page that are currently not marked as editable. The "Header", which should contain your website's name and logo, the side navigation menu bar and your "Footer", which probably currently contain your copyright notice.
You will probably not want to mark the "Header" portion as editable, since your site name will be the same no matter which page on your site your visitor happens to be on. Likewise, the navigation menu bar in your side panel should probably also be the same throughout your website.
If your footer contains a copyright notice like "Copyright © 2009 Christopher Heng", you may want to select the year portion of the copyright notice and make it editable, since there is a chance that you may still want to add new pages next year or on some future date. To do this, just select the year portion (for example, select "2009" if that is the year you typed before), click "Insert | Template Objects | Editable Region" from the menu, and enter something like "Copyright Year" into the "Name" field.
Save the template by clicking "File | Save" from the menu. You will probably get a verbose dialog box popping up, informing you that putting an editable region (like the "Page Title"), inside a block tag will prevent users from creating new blocks in the region. Click "OK".
If you have heavily customized your web page, so that you have even more sections that I did not mention above, you can make those sections editable using the same method described above. Give each section a different name, but make it descriptive of what it contains. The name is not displayed in your "live" website, but is shown in Dreamweaver CS4 when you edit your site, so the more descriptive the name is, the more help it will be to you when you maintain your site.
Before you go on to create a new page using the template, you will need to re-create your home page. (Don't groan -- it's very easy this time.) We need to do this because your current home page is not regarded by Dreamweaver as being created from the template you just made. Since we want Dreamweaver to handle all the mundane and tedious job of updating all our pages every time we change the design of our site, we need to associate the page with the template.
The least troublesome way to do this is to overwrite your old index.html file with a new file created from the template.
Close all files by clicking "File | Close All".
Click "File | New". The dialog box that you saw when you first created your website in Chapter 1 appears. This time, however, look for the item "Page from Template" in the leftmost column, and click it. You should now see the name of your site in the second column, the "Site" column, and the template you made previously in the third column ("index"). A preview picture of your template appears in the window on the right.
Make sure that there is a tick in the checkbox "Update page when template changes" in the rightmost column. Then click the "Create" button.
A new unnamed web page, based on your template this time, will appear. This page should be identical to your index.html file, since you did not make any changes to your index.html when you created the template. (All you did was to mark certain parts of the page as "editable".)
Click "File | Save As..." from the menu. In the "Save As" dialog box that appears, click the "index.html" file, followed by the "Save" button. Dreamweaver will issue a warning that the file already exists, and asks you whether you want to overwrite the file. Click "Yes".
With this step, you have replaced your old "index.html" with a new "index.html" created from your template. As far as your visitors are concerned, your home page will not look any different in a web browser. However, internally, Dreamweaver will have inserted certain invisible markers so that it will be able to update the page whenever you make a design change in your template.
We will now proceed to create another 2 pages for your website: the "Site Map" and the "About Us" page. If you're not sure what these pages are for, please return to chapter 6, How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS4, to learn more about these pages. Unlike the creation of your Home Page in chapters 1 to 6, however, making these 2 pages will be much easier, since we've already done most of the hard work.
Click "File | New..." again and select "Page from Template" if it has not already been preselected for you. Then click "Create".
Look at the "Title:" field of the Dreamweaver window, just above your web page (see the picture below, copied from chapter 1, if you've forgotten where to find it).
Replace whatever text you have in that field with "Site Map". Alternatively, if you want the name of your website in the title as well, call it "Site Map - Example Company" (where "Example Company" should be replaced by the real name of your site). Actually, you can call it what you want, but it's best to have "Site Map" somewhere in that title, since it's the name used by practically everyone for such a page.
Change the text in the "Page Title" editable region to "Site Map".
Replace the text and pictures in your "Page Content" section with a list of links to the rest of your site. The easiest way is to select the existing content, hit the DEL or backspace key to remove it, then type every page name on a separate line. Hit the ENTER key (or RETURN key on the Mac) after each name to make a new paragraph. Then select each line separately, and make them into links pointing to their respective pages. If you've forgotten how to make a line of text into a link, please see chapter 5, How to Make Pictures and Text into Clickable Links using Dreamweaver CS4.
For your convenience, here are the links that you'll want to make:
I realise that at this point in time, since you have so few pages, a site map probably seems very silly to you, especially since every page listed in the map is already linked to from your menu bar in the left column. However, the site map will become more useful (to your visitors) as you add more pages to your site. It also adds professionalism to the site, and makes it easier for search engines to locate all the pages of your website.
If you find that hitting the ENTER (or RETURN) key creates too much blank space in between each filename, and you prefer that the filenames be more closely spaced, do this instead of hitting the ENTER key. After you type a line, say the word "Home", click "Insert | HTML | Special Characters | Line Break" from the menu. (If you are using Windows, you can hold down the Shift key and hit the ENTER key to accomplish the same thing.) Nothing will appear to happen visually, but if you immediately type "Feedback" after that, you'll see that "Feedback" is placed in a new line below "Home" without an intervening blank line.
For the curious, the reason for this is that the ENTER key creates a new paragraph, hence the extra blank line, while "line break" merely moves what follows to the line below.
Click "File | Save As..." and type "sitemap.html" (without the quotes) into the "File name" box. Do not change the name, add spaces or change the capitalization: type the name as-is. This is because you have already used "sitemap.html" to link to this page in your navigation menu, so if you give this file some other name, your links to this page will be broken.
Click the "Save" button.
Note that this section is only optional if you have decided in the previous chapter not to insert an "About Us" item into your navigation menu bar. If you already have an "About Us" menu item, you should go ahead and make your "About Us" page now.
By this time, you should have no trouble creating new pages for your website from your site template. Create another one now.
In the "Title:" field (above your web page), enter "About Us: Example Company", replacing "Example Company" with the name of your website. Alternatively, you can use "About Example Company", "About Me", "Resume", "C.V" or anything that you feel best describes the page you're making.
In the "Page Title" editable region, enter "About Us" or "About Me" or "Curriculum Vitae" or whatever you wish. Replace the "Page Content" editable region with whatever information you wish to publish about your company or yourself. If this is a personal website, be circumspect about what you put here. You don't know who's going to be reading your website. It may be your future employer or some nutcase living in your neighbourhood.
Save the page as "aboutus.html" (without the quotes). Again, this is the filename you used in your navigation menu and site map, so you should not get creative and use another name or your links will point nowhere.
Now that your website is nearly complete, with multiple pages, it is no longer efficient to use the old "Site | Put" method to publish your website. That method was useful when you only had one page to upload. When you have multiple pages, you will prefer Dreamweaver to automatically figure out which pages have been modified, and publish them for you without your having to manually open and publish every single one.
To do this, click "Site | Synchronize Sitewide..." from the menu.
A dialog box, "Synchronize Files", appears. The "Synchronize" field should read something like "Entire 'Example Company' Site" (where 'Example Company' is replaced by the name of the site that you gave Dreamweaver in chapter one). The "Direction" field should read "Put newer files to remote". If any of these is not the case, click the down arrow key in the appropriate drop down box to select the correct option.
Click the "Preview" button.
Dreamweaver will immediately attempt to connect to your website to check the files that have previously been published. When it is complete, it will show a dialog box with a list of files that need to be uploaded. Unfortunately, this list of files includes your website template, which does not actually need to be published, so we will have to remove it from the list before we allow Dreamweaver to proceed.
Right-click the "Templates\index.dwt" line in the dialog box. That is, click the right mouse button when your mouse cursor is directly over the "Templates\index.dwt" line. A menu will appear. Click the "Ignore Selection" item in the menu.
The "Action" column for the "Templates\index.dwt" line will now show "Ignore" instead of "Put".
Click the "OK" button.
When Dreamweaver has finished uploading your pages, test your website using your web browser. This time, be sure to click the "Home", "Site Map" and "About Us" buttons in your menu bar to make sure that they lead to the correct pages.
Congratulations! Your website is nearly complete. All it lacks is the feedback form, which we will create in the next chapter.
If at some future point in time, you feel the urge to redesign your website, you will need to do it by loading your template file and modifying it from there. Let's briefly go through the steps for this, so that when you need to do it, you will know how to.
Close all the files that are currently open in Dreamweaver. To do this, click "File | Close All" from the menu.
In your FILES panel on the right side of Dreamweaver, click the "+" (plus) box beside the "Templates" folder to expand it. You should see the "index.dwt" file that you created earlier.
Doubleclick "index.dwt". Dreamweaver will now open your template.
Modify the template the normal way that you would any web page.
For example, if you want to add a line "Thanks for thesitewizard.com's help in creating this site" to your footer, just click somewhere in the footer and type those (or other) words. Select "thesitewizard.com" and enter "https://www.thesitewizard.com/" into the "Link" field in the PROPERTIES panel to make it into a link. (Don't get upset. This is just an example. Make whatever modifications to your template you wish.)
When you click "File | Save", Dreamweaver will pop up the same message box you encountered earlier, about placing the editable region "Page Title" inside a block tag. Just click "OK".
Since you have made a change to your template that affects multiple pages on your site, Dreamweaver will now show a new dialog box entitled "Update Template Files". Here's where the beauty of the template tools come into play. When you save a modified template, Dreamweaver searches through all the files created from that template and offers to update all of them.
The dialog box should list the three files (or two files if you did not create the "About Us" page) affected by the change in design, namely "index.html", "sitemap.html" and "aboutus.html". Click the "Update" button.
Another dialog box, "Update Pages", will appear. Click the "Close" button.
If you want to be sure that Dreamweaver has done its job properly, doubleclick any of your web pages in the FILES panel to open them in Dreamweaver. They should all reflect the change you made.
Upload your modified files using the "Site | Synchronize Sitewide" procedure described above.
In the next chapter, you will add the final set of pages to your website, namely the feedback form and its associated pages.
Copyright © 2009-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
The Beginner's A-Z Guide to Starting/Creating Your Own Website » List of All Dreamweaver Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Use Dreamweaver CS4's Templates to Manage and Auto-Update Multiple Pages on Your Website
