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. Goals of This Chapter 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. Introduction to Dreamweaver's Template Facility If you look at all the article pages on thesitewizard. 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. 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. How to Create a Template for Your Website in Dreamweaver CS4 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: 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. Click "File Save As Template This opens up the "Save As Template" dialog box.
Click the "Save" button. When a message box appears, with the message "Update Links? 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.
As of this moment, we will be modifying the template file, index. 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. 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.
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. To do this, just select the year portion for example, select "" 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.
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.
Associating Your Home Page with Your New Template 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.
Close all files by clicking "File Close All". 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. All you did was to mark certain parts of the page as "editable". Click "File Save As In the "Save As" dialog box that appears, click the "index.
Dreamweaver will issue a warning that the file already exists, and asks you whether you want to overwrite the file. With this step, you have replaced your old "index. 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. 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.
Look at the "Title: 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.
Then select each line separately, and make them into links pointing to their respective pages. For your convenience, here are the links that you'll want to make: 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.
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.
Do not change the name, add spaces or change the capitalization: This is because you have already used "sitemap.
How to Create the About Us Page Optional 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.