Nearly all websites have more than one page. Creating multiple pages for a website is a relatively simple task; things only get troublesome when you want to make a design change that affects all the pages of your website. Imagine having to go through every page on a site with hundreds of pages, just to (say) add a new button to your navigation menu. Here's where Dreamweaver CS5 shines in helping you automate the task of creating and maintaining a multi-page website.
Since this is chapter 7 of the Dreamweaver CS5 Tutorial series, you will probably need to start with chapter 1 if you aren't already very familiar with Dreamweaver CS5. I will assume knowledge of all the things I've mentioned in the previous chapters. In addition, for those who are completely new to making a website, I strongly recommend that you read How to Make / Create Your Own Website: The Beginner's A-Z Guide first.
By the end of this chapter, you will have created nearly all the pages of your website. You will also learn how to use Dreamweaver CS5's template system to create new pages based on the custom design and layout that you've been working on in the previous chapters as well as to automate the updating of all the pages of your site when you make a design change. Finally, you will also learn how to get Dreamweaver to automatically figure out which pages of your site to upload without your having to manually open and upload every one of them.
If you look at all the pages on thesitewizard.com using a desktop browser, you will probably have noticed that practically every page shares the same basic layout. There is a logo and a navigation menu in the left column, and the content specific to each page is housed in the right column. This common design is the result of my basing all my pages on a template containing all the above elements (logo, navigation menu, 2 column layout, etc). Using a template makes the job of adding new pages to thesitewizard.com much easier than it would otherwise have been: any time I want to add a new article, all I need to do is to use that custom template and insert my article content into the right column.
Not only does Dreamweaver allow you to create such a customised ("customized" in other variants of English) template for your website, its template system also includes additional features meant to make a webmaster's typical tasks more productive. In particular, if you ever decide to change the design of your website, all you need to do is to modify the template, and Dreamweaver will automatically update all the pages on your site derived from that template. You do not need to manually go through every page to make those design changes.
To facilitate this auto-updating feature, Dreamweaver requires that you indicate which portions of your page constitute the fixed part of your design and which portions contain the content that varies from page to page. We shall do this below.
Start up Dreamweaver CS5 and open the "index.html" file that you've been working on in the previous chapters. For those who have forgotten how to do this, doubleclick the "index.html" line in the FILES panel (found on the right hand side of the Dreamweaver window).
Click "File | Save as Template...". As you will recall, this is my shorthand notation for clicking the "File" item on the menu bar, and when the drop-down menu appears, click the "Save as Template..." item in that menu.
A dialog box entitled "Save As Template" will appear. Click the "Save" button.
Another dialog box saying "Update Links?" should pop up. Click the "Yes" button.
When you do this, Dreamweaver will create a new subfolder, called "Templates", in your website directory. You should be able to see
this new folder in your FILES panel. The page you see displayed in Dreamweaver is also no longer "index.html" but a file
called "index.dwt". This is your template file. It looks exactly like your home page at the moment because you used
your home page as the basis for this template (via "File | Save as Template..."), but you can verify that you are
indeed no longer working on your "index.html" file by looking up at the tab under your menu bar in Dreamweaver (near the top
of the Dreamweaver window). The tab should say index.dwt instead of index.html.
Now you'll have to decide which part of your web page is going to be invariant across your site, and which portions will contain content that will be different from page to page. On most websites, the site logo and left column (containing your navigation menu) are usually considered part of the fixed design for the website. (If you're not sure what I mean, take a look at the part of thesitewizard.com's left column containing my site logo, search field and navigation menu. It's exactly the same on every page of the site.) It's usually only the right column that contains variable content.
By default, Dreamweaver regards the entire template as part of your fixed design. If you want any part of your page to contain information different from what you see in your template now, you will need to mark that portion as "editable". You can have as many editable regions in your template as you wish, and your editable regions can be interspersed with the invariant content. Your editable region can be as small as a single word on your page (or even a letter or digit if you like), or as large as the content of the entire column (probably even the whole page, but that will defeat the whole purpose of using a template). In other words, it's up to you to decide what to make editable and what to leave as fixed.
To make sure that you are clear about what I'm talking about here, let me draw out the implications of the fixed and editable regions in your template. When you decide that a section of your web page is to remain part of the fixed design, Dreamweaver will not let you change that portion in the individual web pages that are derived from this template (since it's supposed to be fixed). But you're still in control here. Any time you want, you can still modify the design of the fixed portion in the template itself. If you do that, Dreamweaver will assume that you want to change the appearance of your whole website, and proceed to go through every web page based on this template and update it to your new design.
As such, if you want to put unique content in certain sections of your web page, you will need to mark those sections as "editable". Let me suggest that this probably include huge swathes of your right column, and the date portion (or more accurately, the year) of the copyright notice in your footer.
To mark an area as editable, drag your mouse over that area to select it. As I said earlier, you're not limited in what you can select. If you like, you can even select all the titles, sub-headers, and paragraphs in your right column in one go.
Click "Insert | Template Objects | Editable Region" from the menu.
A dialog box, entitled "New Editable Region", will appear, asking you to name that editable region. This is just an internal label for your personal reference: the name you give will not be displayed in the visible portion of your actual website. While you can accept the default name given by Dreamweaver (probably some unhelpful name like "EditRegion3" or the like), if you can think of a more meaningful name, use that instead. Examples of useful names: "Page Title", "Page Content", "Copyright Year", "Product Description", "Product Name", etc. Anyway, it's just an internal label, so don't lose sleep over it. Even if you label it with some cryptic name like "Section 1", it's unlikely to hinder you in any way in the future. Most webmasters know what they want the various portions of their web page to contain, whether or not they label it with a relevant name.
Click the "OK" button. The section you marked will now be outlined in a blue box, and a small label containing the name you gave will appear on the top left of that box. Don't worry. As I said earlier, you will only see this box and label within Dreamweaver itself. (It's meant to help you find all the editable regions.) It will not appear when you view your website in a web browser.
Go ahead and repeat the above steps for any other region of your web page that you want to make editable, giving each region a different name. The regions do not have to be contiguous or anything like that.
When you've completed marking the editable regions of your template, click "File | Save".
Depending on what you selected when you created your editable regions, you may get a dialog box appearing with a message like 'You placed the editable region "[Some-name-or-other]" 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 [Some-name-or-other] is the name of one of your editable regions. Just click the "OK" button.
Now that you've created a template for your website, you can easily create new web pages for your site without having to go through everything you did in chapters 1 to 6 all over again. However, before you do that, you will need to associate your home page with this new template you made. Remember that your home page was created before you made this template. As such, at this point, if you change the design in your template, Dreamweaver will not update your home page since it will not realise that the two are connected in any way.
There are many ways to do this, but the least troublesome way is to simply overwrite your old "index.html" file with a new page created from your template. Since you have not actually modified your template in any way (other than to add the editable regions), you'll end up with a new "index.html" that will appear identical to your old "index.html", but one that Dreamweaver will regard as having been derived from your template.
Close all files by clicking "File | Close All". Although this step is not strictly necessary, my experience working with newcomers is that if you don't do this, you may accidentally end up working on the wrong file later if you click something wrong by accident.
Click "File | New". You will be greeted by the old familiar "New Document" dialog box that you met in chapter 1.
Look in the left column of that dialog box and click the line "Page from Template".
You should now see the name of your website in the "Site" column, and the name "index" in the adjacent 'Template for Site "[your-site-name]"' column. A thumbnail picture of your template should also appear on the right side of the page. (Don't worry if the thumbnail picture is not very accurate in its representation of your site.)
Make sure that the box "Update page when template changes" is checked. (It should be by default, but make sure anyway.)
Click the "Create" button.
You should now see a page identical with your home page. Click "File | Save As...".
The "Save As" dialog box should appear. Click the "index.html" filename in the window to select it. The filename "index.html" (without the quotes) should appear in the "File name" field. Click the "Save" button.
A message box with the text "The file you selected already exists. Would you like to overwrite this file?" will appear. Click "Yes".
Your original home page has now been overwritten by a new version. While this new version appears identical to your old one in a web browser, it actually contains some invisible markers that will allow Dreamweaver to automatically update it if you ever make a design change in your template.
At this point you are ready to create other pages for your website. You should at least create the "Site Map" page which you have previously linked to in your navigation menu. If you have also created a button pointing to your "About Us" page, you will need to create that page too.
A site map is a comprehensive (or perhaps even exhaustive) list of all the pages on your website.
If your home page is still open, close it by clicking "File | Close All". Again, this is optional, but it's good to do it to avoid careless mistakes later on.
Click "File | New..." again, and select "Page from Template" in the left column, if it's not already selected.
Make sure that the "index" template for your site is selected, and the "Update page when template changes" box is checked. Then click the "Create" button.
Change the Title field in the Dreamweaver window to "Site Map" or "Site Map - Example Co" (where "Example Co" is the name of your site). For those who have forgotten where the Title field is, please refer to the picture below, taken from chapter 1.
You'll need to remember to change this title field every time you create a new page from your template, or all your web pages will have the same title. Don't worry that you did not mark this Title field as editable in your template. The Title field is always considered an editable field by Dreamweaver.
Now replace the content of your editable region(s) on the page with a list of links to all the pages on your website. For example, click to put your text cursor into one of the editable regions, and use the DEL or Backspace key to remove the existing content. Then type the name of each page on your site on a separate line, and make it into a link the way you were taught in chapter 5.
For those who are not sure what a site map looks like, check out thesitewizard.com's Site Map. It's basically just a list of links to all the pages on my site. (Don't be distracted by my use of 3 columns on that page. The reason I used 3 columns there is because I have so many pages on thesitewizard.com that if I use my default layout, that page will be excessively long.)
I realise that, at this point in time, your website contains so few pages that you probably feel silly creating a site map. However, your site map will become useful, over time, as your site grows. The site map has the dual purpose of improving the usability of your website, as well as helping the search engines locate all the pages on your website. You may want to read my article on Appearance, Usability and Search Engine Visibility in Web Design if you're not convinced.
If you find that hitting the ENTER (or RETURN) key creates too much blank space in between each line, and you prefer that the lines 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" field of the dialog box that appears. Do not use capital letters (uppercase), insert spaces or otherwise change that filename. If you do, your filename will not match the URL you previously set in your navigation menu, and you will get a 404 File Not Found error when you click your Site Map button later. (I'm assuming here, of course, that you've actually followed my instructions in chapter 6 and created a button for the "Site Map" pointing at "sitemap.html" or its absolute URL equivalent.)
Click the "Save" button.
Remember to return to your Site Map to add a link to any new page you create for your website. This includes the pages you create later in this chapter.
If you have not created a button to an "About Us" page in chapter 6, feel free to skip this section. It is meant only for those who want an About Us page.
By now, you should be quite familiar with creating new pages from your template, having already created two. Create another one now.
Replace the "Title" field in the new page with something like "About Us: Example Co", where "Example Co" is the name of your site. Alternatively, you can use "About Example Co", "About Me" or "About [Your Name]" if you wish. (Actually, you can use whatever title you want. There are no fixed rules about your page titles. I'm merely giving suggestions.)
Replace the content of your page with whatever you wish to reveal about your company or yourself. As with all things on the Internet, be circumspect about what you say, since the information will be publicly accessible. You don't know who is going to be reading your site: it may be a future employer, or some crank living in your neighbourhood.
Save the page as "about.html" (without the quotes), again assuming that you used the filename I suggested in chapter 6 for your navigation menu button.
Create the other pages of your site the same way. When giving filenames to your new pages, it's best to use small letters (lowercase) for all your filenames, with no spaces in between, to avoid problems. Please see the article How to Create Good Filenames for Your Web Pages for more information.
Do not create your Feedback Form (or Contact Form) page yet. You will do this in the next chapter. There's more involved in creating a form than just designing an ordinary web page.
For important pages, you may also want modify your navigation menu to add buttons to them. What constitutes an important page? It depends on the nature of your site. If you're selling things on your website, the "Order" or "Buy Now" page (where your customers can place an order), the "Price List" page (where you list the prices of your products), and "Products" page (where you list all the products you're selling) should be considered important pages. They should always be in your navigation menu. See my article Is Your Website Design Driving Away Your Customers? Some Basic Usability Tips for Commercial Websites for a discussion of this if you're creating such a site. On the other hand, if you're creating a personal site, put whatever you think visitors will want to access into that menu.
Since your navigation menu is probably not in an editable region of your web page, you will need to modify your template to include these new buttons. Which brings us to the topic of the next section.
If you find that you need to change something in the fixed portion of your website, for example, to modify an existing button or to add a new button to your navigation menu, do the following:
Close all files using "File | Close All". (This is just a precaution. You can actually leave them open if you know what you're doing.)
Open your template. To do that, doubleclick the "Templates" folder in your FILES panel (on the right side of the Dreamweaver window). This will expand the folder and show you the "index.dwt" file. If doubleclicking causes the Templates folder to collapse and hide the files instead, just doubleclick it again.
Doubleclick the "index.dwt" file in that folder.
Modify your template the way you would any ordinary web page. That is, everything that you've learnt in the previous chapters about editing a web page applies to your template.
When you've completed your changes, click "File | Save".
The same dialog box telling you that you have placed some editable regions inside a block tag may appear again. Just click the "OK" button to dismiss it.
A new dialog box, entitled "Update Template Files", will appear. The dialog box will list all the web pages derived from this template and ask you whether Dreamweaver should update all those files.
Click the "Update" button. This will update all your individual web pages with the changes you've just made.
Another dialog box, entitled "Update Pages", will appear. By the time you see this dialog box, Dreamweaver will already have modified all your other web pages to include the changes you made in the template. The message is shown merely to report to you that the job is done. If you want to see a list of files that it updated, put a check in the "Show log" box by clicking it. When you're done, click the "Close" button to dismiss the dialog box.
Now click "File | Close" to close your template. (This is to protect you from accidentally working on the template when you mean to work on some individual web page. You can always open it again at a later time when you really mean to change something in the template.)
I know that I sound like a broken tape recorder, repeating the same old thing over and over again, but you won't believe the number of email messages I get from users facing problems because they tried to edit the template when they meant to edit an individual web page, or vice versa.
Now that you have learnt how to edit both templates and normal web pages, and you have more than one web page to manage, always look at the tab under the menu bar to make sure that you're editing the right thing. Your current template file has a filename of "index.dwt". If you see that on the current active tab, it means you're editing the template. If the tab shows a filename ending in ".html", you're editing a normal web page.
(And if you don't know what I mean by a "tab", doubleclick the "index.html" file in your FILES panel to open it. You should be able to see an "index.html" tab, together with an "x" for closing the tab, just under the menu bar near the top of the Dreamweaver window.)
Any time you see multiple tabs at the top, it means that you have a few files open at the same time. Learn to recognise the colour of the active tab, the one that indicates which file you're currently working on. This way, you won't accidentally modify the wrong file. There's nothing wrong with having many files open at the same time; most of us do it all the time. You just need to be careful about what you're editing, especially when you're new to working this way.
Now that your website has many pages, it's no longer efficient to use "Site | Put" to upload your site. That method was useful when you only had one page to publish. With multiple pages to upload, what we want is a way to get Dreamweaver to figure out which pages have been modified (or are new) and automatically upload these changed or new files.
Click "Site | Synchronize Sitewide...".
A dialog box, "Synchronize Files", will appear. Leave the default options of "Synchronize: Entire '[Your-Website-Name]' Site" and "Direction: Put newer files to remote", and click the "Preview..." button.
Dreamweaver will then connect to your website to find out which files have been previously published (and probably also their date of publication). When it is done, you will see a new dialog box, "Synchronize" with a list of files that need to be uploaded to your website.
By default, Dreamweaver will also publish your template file, "Templates/index.dwt". This file is actually not needed for your website to function properly, and if you don't want it to be uploaded, right click the line containing that file (that is, move your mouse pointer over that filename and click your right mouse button). In the menu that appears, click the "Ignore Selection" item. When you do this, the "Action" column will show "Ignore" instead of "Put" for "Templates/index.dwt".
The Dreamweaver template file does not actually form part of your website. It is not linked to from any of your web pages (nor should it be), nor do web servers require or expect it to be present on a website.
If you upload your template, your visitors will be able to retrieve your template by typing
"http://www.example.com/Templates/index.dwt" into their browser, where www.example.com is replaced
by your real domain name. This may or may
not be what you want. As far as I can tell, from my limited testing, the template file doesn't appear to contain secret information
like your FTP password or FTP user name. Even so, I personally dislike the thought of having extraneous files that are not part of
my website in a public area of the site. Indeed, since I don't control the file format of the Dreamweaver template, even if the file
appears harmless at this time, I don't know if the Dreamweaver developers will change the format in the future and include things that
you might not want revealed to the world.
So is there any compelling reason to let Dreamweaver upload the file at all? Some webmasters don't actually back up their computers (that is, make a copy of the contents of their computer and put it in a safe place). As a result, when their system breaks down or becomes badly corrupted with a virus or something like that, they lose everything, including their local copy of their website.
In such a situation, they often resort to using my instructions for How Do I Import an Existing Site into Dreamweaver to get the online version of their website back into Dreamweaver. I think you can probably see where I'm going with this. If they don't upload their template file to their site, they can only recover their web pages from their online site. The web pages will no longer be associated with any template, since they won't have a copy of the template.
If you want my personal opinion on the matter, the best solution is to really back up your computer on a regular basis, instead of relying on a template file dumped on your public website as a sort of second-rate backup. It seems to me to be almost like storing your dirty linen in public (if I may be allowed to mangle a metaphor). There are many free hard disk backup programs around, so even if you can't afford to buy a commercial program to do the job, there is little excuse not to keep an up-to-date backup of your work yourself.
Click the "OK" button to let Dreamweaver "put" the files it deems to have changed. When it has finished uploading everything, the dialog box will disappear on its own accord.
Load your website in your browser. Now that your website is practically complete, you should check everything on your site to make sure it works. Click the links on your pages to test them; remember to also check those in your navigation menu as well as those in your Site Map.
If all goes well, congratulations! You have not only completed most of your multi-page website (only the feedback form remains), but you have also learnt most of the common features of Dreamweaver that a webmaster typically needs for designing and maintaining a website.
In the next chapter, we will add the final set of pages to your website, namely the feedback form and its associated pages. This form will provide an online interface for your visitors to contact you without leaving your site.
Copyright © 2010-2017 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 »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » 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 Manage and Auto-Update Multiple Pages on Your Website with Dreamweaver CS5's Template System
