Efficiently Manage a Multi-Page Website with Dreamweaver CS5.5

How to Efficiently Manage a Multi-Page Website with Dreamweaver CS5.5

Goal of This Chapter

By the end of this chapter, you will have created a custom Dreamweaver template for your website and have used it to create other pages for the site. You will also learn how to modify the design of your site by simply changing the template, and have Dreamweaver automatically update all the affected pages. Finally, you will use a new method of publishing your website, one where you let Dreamweaver figure out which pages of your site have been changed, and upload the relevant ones instead of the manual method you previously used.

Purpose of The Dreamweaver Template System

One of the things Dreamweaver is famous for is its template system. It allows you to tackle many of the problems a multi-page website brings to the table without substantially reducing your productivity.
Specifically, it allows you to do the following things.

1. Standardize the Appearance of a Website

   The first thing the template system allows you to do is to create new pages for your website based on your existing site design. Instead of creating everything from scratch, as we did from chapters 1 to 6 of this tutorial, you can simply reuse the same design that you have already laboured ("labored" if you use a different variant of English) on at length for your new pages.
   Don't think of this use of a standard design as the result of laziness. If you pay attention to the websites you visit on the Internet, you will have noticed that most websites sport a standard appearance across all its pages. For example, all the pages on thesitewizard.com have the same left column with its site logo, search field and navigation menu. A common design across all the pages of a site improves the usability of your site. The standardised ("standardized") appearance lets users become familiar with how your site works and thus be more efficient at finding things on your site.

2. Update Your Site's Design on Multiple Pages by Changing Only One Page

   In the last few chapters, whenever you tweaked the appearance of your page, you manually changed the page itself. This is fine when your site only has one page. But what happens if your site has, say, 100 pages? Does it mean that if you ever want to change the design, you have to go through every one of those pages manually and modify them all?
   Dreamweaver's templates have an additional feature that is not obvious from its use of the word "template". When you make changes to your design in the template, Dreamweaver will automatically go through your website and update the design on all the pages derived from that template.

Since Dreamweaver is only a simple web editor and not a complex creature like a human being, it cannot really tell which portion of your page is part of the site's design (which is supposed to be identical on all the pages of your site) and which portion contains content that is supposed to be different on every page. To enable it to do its automatic updating magic, we need to specifically indicate in our template which portion is to contain the stuff that is different on every page. We will do this in the next section.

How to Create a Custom Template Using Dreamweaver CS5.5

1. Start up Dreamweaver and open the home page that you've been working on since chapter 1. For example, you can open your home page by doubleclicking the "index.html" line in the FILES panel on the right side of the Dreamweaver window.
2. Click "File | Save as Template..." from the menu. That is, click "File" on the menu bar, followed by "Save as Template..." on the drop down menu that appears.
3. Click the "Save" button in the Save As Template dialog box that pops up.
4. Another dialog box, with the words, "Update Links?" should appear. Click the "Yes" button. This will allow Dreamweaver to modify all the relative URLs on your page so that they won't be broken when it changes your page into a template. It is needed because the template is saved in a different directory from your original file. Note that even if you don't use relative URLs in your links, you will still need to click "Yes", since your page links to images, such as your site logo, and the CSS file using relative URLs. In other words, for the ordinary webmaster, this dialog box asks a question to which you will always need to answer "Yes".
5. Dreamweaver then creates a new directory in your local website folder called "Templates". You can see this in the FILES panel. In addition, if you were to look at the tab just below the menu bar at the top of the Dreamweaver window, you will also notice that the filename of the page you're working on has changed from "index.html" to "index.dwt". In other words, you're no longer looking at your home page but your custom template. The template looks exactly like your home page at the moment because you used your home page as the basis of the template.
   By default, if you don't do anything else, Dreamweaver will consider the entire content of the page as being part of the fixed design of your website. That is, Dreamweaver will update all the pages of your website with any modifications you make to this page. This is obviously not correct, since there are portions of the page that are only relevant to your home page.
   What is needed at this point is for you to tell Dreamweaver the regions of this page that are actually editable content: that is, content that is different on every page of your site. To do this, we will select that portion of the page, and indicate to Dreamweaver that it is an "editable region".
   You can have multiple editable regions on your web page. They can be separated from each other by portions that are part of the fixed design on your web page, or they can be contiguous with other editable regions.
   For most people, the majority of the content in the right column of your web page will probably need to be marked as editable (unless you want every page on your website to be identical to each other). The date portion of your copyright statement at the bottom of your web page should also probably be marked as editable (unless you want all your copyright dates to read the same, no matter which year you create a new page).
   
6. To mark a section of your page as editable, drag your mouse over the area to select it. For example, if you want to mark all the words in your right column as something that will be different on every page, drag your mouse over those words so that they become highlighted. You are not restricted as to what you can select: feel free to select multiple paragraphs along with their section headings in one go, if that's what you want.
7. Now click "Insert | Template Objects | Editable Region" from the menu.
8. A dialog box with the title "New Editable Region" will pop up. The "Name" field in the dialog box will probably contain some default name like "EditableRegion3" (or some other number). This dialog box allows you to name your editable region with some meaningful name if you wish. For example, if you have selected practically everything in your right column, you may want to name this region "Page Content" (without the quotes). Or if you have only selected the top header for the page, you can name it "Page Title" (without the quotes). Actually, you can name your editable regions anything you like, or even leave it at the default name if you can't be bothered. The name is just an internal label, supposedly to help you figure out what each section of your page contains. I say "supposedly" because most webmasters don't really need the label to figure this out since it's usually obvious to them.
   In any case, replace the suggested name if you wish, or leave it alone if you can't be bothered. The name you choose (or don't choose) has no impact on the final visual appearance of your page. Then click the "OK" button.
9. You will notice that Dreamweaver now puts a blue outline around the section you marked. At the top of that section, there is a tag with the name you typed earlier. (Of course if you didn't replace the default name, the tag will just say "EditableRegion3".)
   Don't worry. You will only see this blue outline and tag in Dreamweaver. They will not be displayed in a web browser when you view your site on the Internet. Dreamweaver displays them to help you find the editable regions on your page, otherwise you'll be operating blind when you design your site.
10. Repeat the same procedure with the other portions of your page that you want to make editable. For example, select the year in your copyright notice in the footer, and make it editable too. Yes, you can select a single word or number and make only that word or number an editable region if you need to. Label that region "Copyright Year" (without the quotes) or leave it at the default label if you don't feel like labelling anything.
11. When you've completed marking all the editable regions of your web page, click "File | Save".
    You may (or may not) be greeted with a dialog box that says something like 'You placed the editable region "EditableRegion4" inside a block tag. Users of this template will not be able to create new blocks in this region. Move the region outside the block tag if you want users to be able to do this.' where the word "EditableRegion4" will be substituted with whatever label you gave that particular editable region.
    Don't worry about this message. It only appears frightening because it's cryptic to the newcomer. For the curious, the message only pops out if you have marked a word (or number) or some small portion of a larger block as an editable region. For example, if you've made the year portion of your copyright notice into an editable region, and not the entire paragraph, the message tells you that when you want to update the year in your individual web pages, you'll only be able to replace the year with another year or some other sentence. Dreamweaver won't allow you to replace the year with multiple new paragraphs. To do that, you will need to return to the template to adjust your design. Don't worry if you don't understand either the message or my explanation of it. It's merely stating the obvious.
    Just click the "OK" button to dismiss the message (if it appears).

Associating the Home Page with Your Template

At this point, you have successfully created a template on which you can base the rest of your website. However, before we work on the other pages, we will need to do something about your home page. If you will recall, you created your home page before you made your template. Since it was not actually made from your template, Dreamweaver will not consider the page as being derived from the template, even though they share the same appearance. If you leave things in this state, and change the design in your template, Dreamweaver will not update your home page with the new design since it will not realise that the two are connected in any way.
We must thus associate your home page with the template before we go on to create the other pages of your site. The easiest way to do this is to replace your old "index.html" file with a new one that is created from the template. Since you have not actually modified your template in any way except to add editable regions, this new page will have an identical appearance to your original home page. This identical appearance is, however, only skin deep. Internally, it will have invisible markers that will let Dreamweaver know that it is derived from your template, allowing the web editor to automatically update it every time you change your site design.

1. Close all files by clicking "File | Close All". While this step is optional, it helps to avoid the situation that some newcomers experience where they accidentally end up working on the wrong file.
2. Click "File | New". The "New Document" dialog box, which you met in chapter 1, should appear.
3. Here's where we depart from the procedure used in chapter 1. Instead of creating a new page from a blank layout, we will create it from the template you made earlier.
   Click the line that says "Page from Template" in the left column of the dialog box.
4. You should now see a representation of your page in a thumbnail picture on the rightmost side of the dialog box. Don't worry if the picture does not accurately reflect your page design. Chances are that it will not; but it should have enough elements from your page to help you recognise it. The thumbnail is there in case you have created multiple templates and are not sure which is which.
   The name of your current site should be selected in the column labelled "Site:". In the future, when you have created other sites with their own templates, those sites will be listed here too. The name of your template should be selected and displayed in the third column. Again, in the future, should you create multiple templates for this site, they will all be listed here too, and you'll have to click the line containing the template you want to use.
   In any case, if you have multiple sites and/or multiple templates, make sure you select the right one. For now, however, you probably only have one template for one site, so the correct template should already be selected for you. (That is, you don't have to do anything for this step.)
5. Make sure that the "Update page when template changes" box in the rightmost column of the dialog box is checked. If it is not, put a tick in the box by clicking it.
6. Click the "Create" button at the bottom of the dialog box.
7. A new page will appear, identical to both your home page and your template.
   Click "File | Save As...". The "Save As" dialog box will appear. Click "index.html" to select it. Yes, we will be replacing your existing home page with this visually identical copy.
8. Click the "Save" button.
9. A message saying "The file you selected already exists. Would you like to overwrite this file?" will appear. Click the "Yes" button.
10. Dreamweaver will then overwrite your original home page with the current page. If you were to look at the tab at the top of the Dreamweaver window (just below the menu bar), you should see that the page you're working on is now called "index.html".
    This "index.html", in contrast with your old one, is considered by Dreamweaver to be associated with your template file. Dreamweaver is able to tell the difference because the new file contains some invisible information embedded in it that specify which template it is based on as well as which portions of the file are editable. The difference should also be visible to you in Dreamweaver since you will be able to see the editable region outlines in your document.

How to Create a New Web Page from Your Template with Dreamweaver CS5.5

With a template in hand, creating new pages for your website is now substantially easier than creating your first web page. The basic idea is the same as what you did when you recreated your home page earlier, except that this time, you'll need to change the page title and content.
Since this is your first time creating brand new pages from a template, we'll walk through the procedure of creating your Site Map and About Us pages.

Creating the Site Map

A Site Map is just a list of links pointing to every page on your website. It is the equivalent of an exhaustive table of contents in a physical book. It's meant to help visitors find a particular page on your site should they be unable to do so via the usual set of links on the normal pages. A site map increases a website's usability, and also has the additional benefit of helping search engines locate all the pages on your website. If you have never seen one before, take a look at thesitewizard.com's Site Map before continuing. (Before you ask, I use 3 columns for that page to avoid it appearing excessively long. There's no rule that site maps must have 3 columns or anything like that. For example, the site map for HowToHaven.com, a much smaller site at this time, is formatted in the usual 2 columns.)
Although your site only has a few pages at this time (or rather, it will only have a few pages by the end of this chapter), it's still a good idea to create a site map in preparation for the new pages that you will create in the future.

1. Close all files with "File | Close All" from the menu. Again, this step is not strictly necessary, but is mentioned here so that you don't accidentally end up working on the wrong file.
2. Click "File | New...".
3. As before, make sure the correct template is chosen and that the "Update page when template changes" box is checked.
4. Click the "Create" button near the bottom of the dialog box.
5. The first thing you need to do (before you forget) is to modify the page title. If you will recall from chapter 1, the page title field can be found below the menu bar and row of tabs (see picture below).
   Type "Site Map" or "Site Map: Example Co" (where "Example Co" is the name of your site) into the title field, replacing the default title.
6. Replace the section header (the large bold words that represent the visible title on your web page) in your right column with the words "Site Map". If the text you type does not appear in the large bold font that was there originally, review my instructions on howto make a sub-heading in Dreamweaver.
7. Delete the rest of the default content in your right column (the stuff specific to the home page) so that you can fill it up with the links you need for your Site Map. You can do this by clicking your mouse somewhere in that section, and using the DEL or Backspace key to get rid of the original text.
8. Now type the title of each of the pages on your site on a separate line, and make each title into a link. Since you haven't actually created any other pages yet, if you're at a loss for what to type, put things like "Home", "Site Map", "Feedback" and "About Us", since these are the pages you'll be creating in this chapter and the next. If you already know what other pages you want to place on your site, type those titles there as well. For those who have forgotten how to turn wordsinto links, please review chapter 5 again.
   Since typing the ENTER (or RETURN) key after each line creates a new paragraph, resulting in a lot of space between each line on your page, you may prefer to click "Insert | HTML | Special Characters | Line Break" from the menu after each line instead of hitting ENTER. For example, type "Home" (or "Home Page"), then click "Insert | HTML | Special Characters | Line Break". Nothing will appear to happen at this point, but if you type "Site Map" immediately after that, the words "Site Map" will appear on a new line. Those using Windows can alternatively use Shift+ENTER (that is, hold down the Shift key and type the ENTER key) instead of using "Insert | HTML | Special Characters | Line Break" to achieve the same effect. (I'm not sure if this Shift+ENTER shortcut works on the Mac as well.)
9. Click "File | Save As..." and type "sitemap.html" (without the quotes) into the "File name" field of the dialog box that appears. Do not use another name. Do not use capital (uppercase) letters. Do not add spaces. If you deviate from this name in any way, the "Site Map" button in your site's navigation menu will lead to a "File Not Found" error page when you test your site later. That's because you used this exact name, "sitemap.html", when you created the menu buttons in chapter 6.
   Click the "Save" button in the dialog box.

Whenever you add a new page to your website, you should return to this Site Map to add a link to it.

Creating the (Optional) About Us Page

The "About Us" page is used by websites to provide visitors some information about the people behind the site or company. You should always have an "About Us" page if you are running a business site. It's optional if you have a personal or hobby site. Feel free to skip this section if you don't want such a page. (Note: if you have already created an "About Us" button in your navigation menu, and have now changed your mind about creating such a page, remember to delete that button otherwise it will lead to an error page when it is clicked. Return to the previous chapter for instructions on how to delete a button.)

1. Create a new page from your template, using the procedure you've been using to create the previous 2 pages.
2. Replace the title field with something appropriate, like "About Us: Example Co", "About Example Co", "About Me", or "About [Your Name]". There are no fixed rules about this, so call it what you like.
3. Change the right column to contain information about your company or yourself. If you are writing about yourself, be circumspect about what you reveal here. Remember that this is a public website, which may be read by anyone, including future employers and psychos living in your neighbourhood.
4. Save the page as "about.html" (without the quotation marks), the name you used in your navigation menu in chapter 6. If you use a different name now, your navigation menu button will lead to a File Not Found error.

Creating Other Pages

At this point, you've finished most of the standard website pages (with the exception of the feedback form). Before moving on to the final chapter of this tutorial, create the other pages on your site using the same method. Remember to change the title field to reflect the content of the page. When saving those pages, use the suggestions given in my article on creating good filenames for web pages to avoid problems in the future. In particular, don't put spaces in your filenames or use capital (uppercase) letters.
If the page you're creating is an important page on your site, you may want to consider putting a button linking to it in your navigation menu as well. Whether a page is important or not depends on the purpose and nature of your site. For example, on a site selling things, the Products page and Order form are very important pages, since they are the raison d'être of the site. Since the navigation menu is probably not in an editable region of your web page, you will need to modify the template itself to include it. This is the topic of the next section.

Note: Do not create the feedback form yourself. The next chapter will lead you through it. There's a lot more to a web form than a normal web page.

How to Modify Your Template in Dreamweaver CS5.5

You may on occasion need to modify your template, for example, to update the design of your site, to add new buttons to your navigation menu, to create new editable regions or some other task. Here's how you can do it.

1. Click "File | Close All" to close all existing files. Again, this is just a precaution. If you are accustomed to working with multiple open files in Dreamweaver, feel free to skip this step.
2. Expand the "Templates" line in the FILES panel in the rightmost column of the Dreamweaver window. To do this, click the "+" icon preceding the line that says "Templates". (If you don't see a "+" icon, but instead see a "-" icon, it means that the item has already been expanded. In such a case, you can skip this step.)
3. The "+" should now change into "-", and a new line saying "index.dwt" should appear below. This is the template file you created earlier. Doubleclick "index.dwt" to open it.
4. Look at the tab immediately below the Dreamweaver menu bar. It should say "index.dwt", indicating that the file you see in the window is your template file. If it says something else (like "index.html"), it means you've doubleclicked the wrong line. Use "File | Close All" and try again.
   Make whatever changes you want to the page. If you're adding a new menu button, and have forgotten how to do it, see the instructions in chapter 6.
5. When you've finished making your changes, click "File | Save All".
6. A dialog box entitled "Update Template Files" will appear. This dialog box will list all the files derived from this template. Click the "Update" button to allow Dreamweaver to replicate the changes you made in those files.
7. After a while (it may be immediate if you don't have many pages on your site), a dialog box with the title "Update Pages" will appear. Don't be deceived by the title. When this dialog box appears, it means that Dreamweaver has finished updating all the affected pages and is reporting to you that the work is done. If you want to examine the list of files it modified, put a tick in the "Show log" checkbox. This will expand the dialog box to give you a detailed report of what it did. When you're satisfied, click the "Close" button to dismiss the report.
8. Click "File | Close" to close the template, so that you don't accidentally modify it when you intend to work on something else.

How to Use "Site | Synchronize Sitewide..." to Publish Multiple Pages

While "Site | Put" is a useful tool when you only have a single page to upload to your site, it is a bit unwieldy to use when you have multiple pages. Now that we have so many pages to manage, what we want is something that can automatically detect which pages have been modified, and publish only those to the site without our having to manually check and publish each one individually. This facility is provided by the Dreamweaver "Site | Synchronize Sitewide..." menu item.

1. Click "Site | Synchronize Sitewide...". If this menu item is disabled, or greyed out, it means that you didn't follow the instructions in chapter 1 to configure your site. (This may happen if, for example, you dived straight into this chapter from outside thesitewizard.com.) If so, go back to the section on configuring the FTP settings for your website in chapter 1 before returning here.
2. A dialog box with a title "Synchronize Files..." will appear. Click the "Preview" button.
3. Dreamweaver will connect to your website to compare the files on your computer with those already uploaded to your site. From this, it will compile a list of things that need to be published. When it is done, a new dialog box entitled "Synchronize" will appear. This dialog box will show you the files that Dreamweaver thinks need to be uploaded. For example, it should show (at the very least) lines that say "Put index.html", "Put sitemap.html" and "Put Templates\index.dwt". If you have other files (like an About page), they will be listed as well.
   Click the line "Put Templates\index.dwt" to select it. As you probably already know, this is your template file. Dreamweaver lists this because it lists every file that it cannot find on your current website. However, this file is, strictly speaking, not really part of your website. It's an internal file meant to make it easy for you (the webmaster) to create and maintain your website. As such it doesn't actually need to be published onto the Internet. Your online website does not link to it, nor does it require it to be present.
   If you don't want your template to be uploaded to your site, right click that line. Click the line "Ignore Selection" in the menu that pops up. Dreamweaver will then change the line to say "Ignore Templates\index.dwt".
   Personally, I never publish my template file for sites that I use Dreamweaver on. That is, I always select "Ignore Selection" for that file. Having said that, as far as I can tell, publishing the template doesn't help or harm your site in any way. That is, if you're too lazy to deselect the template file, your site won't implode or anything like that. However, your visitors will be able to access your template file using "http://www.example.com/Templates/index.dwt" if they wish (after, of course, substituting your domain name for the "www.example.com" portion).
4. When you're through perusing the list of files that need to be synchronized, click the "OK" button.
5. Dreamweaver will display a dialog box to tell you that it is publishing the files to your website. The dialog box will disappear on its own accord when the uploading is done.

Testing Your Website

Now that your site is mostly complete, you should do a thorough test of your site. Start up your web browser and click the buttons and links on your page to make sure that they lead to the pages they should. The only link that should give a "404 File Not Found" error at this time should be your feedback form page, which you will create in the next chapter. All the other links should work perfectly. If you find any of the buttons or links to result in errors, return to Dreamweaver to check that the links have the correct URLs. Use the tips I gave in chapter 5 on howto solve a 404 error if you can't figure out where the problem lies.
If all goes well, congratulations! You've completed most of your website. In fact, you now have a multi-page website, and have learnt how to use the common features in Dreamweaver to create and manage such a site.

Next Chapter

In the next chapter, you will complete your site by adding a feedback formand its associated pages. The form will allow your visitors to contact you online without leaving your site.