Now that you have completed the home page of your website, it's time to create all the other pages. To do this, we will take advantage of the facilities provided by Dreamweaver to simplify the creation and maintenance of a multi-page website.
As implied by the previous paragraph, this article that you're currently reading is chapter 7 of the Dreamweaver CS6 tutorial. If you have arrived here from outside thesitewizard.com, I suggest that you start with chapter 1, otherwise you may find what I say confusing when I refer to things already covered. Those completely new to creating websites should, however, start at the very beginning: How to Create a Website: The Complete Guide.
By the end of this chapter, you will have created most of the pages on your website. You will also have learnt ("learned" in US English) how to use Dreamweaver's site management and template facilities to easily create, update and publish those pages.
Some of you may be wondering what's so special about creating the additional pages of your website. After all, you have successfully designed your home page and uploaded it to the Internet. How is the creation of the rest of the site any different?
On one level, you are right. If you can create one page, you can also create a zillion others using the same process. However, it is a tedious way of doing it, since you have to go through the same old steps over and over again for every page just to replicate your design on each one. And imagine the headache if you have a change of heart and decide that your site will look better with, say, a different colour scheme or a bigger font or whatever. You will have to go through every one of those pages again just to make that adjustment.
Dreamweaver provides 2 facilities to make life easier for webmasters maintaining a site with multiple pages. The first one of these is its template feature. As you might have expected from the use of the word "template", Dreamweaver lets you use your bespoke design as a template from which you create new pages, saving you the trouble of having to redo the procedure I described in chapters 1 to 6 for every single page. All you need to do is to design your site once, and derive all new pages from that template.
Even better, Dreamweaver actually tracks changes you make to the template and updates your site accordingly. For example, if you suddenly decide that you are better off with a blue background for the left column instead of its current colour, all you need to do is to change your template. Dreamweaver will then update every page that was based on that template.
The second facility that Dreamweaver provides is the ability to figure out which pages have changed and upload them automatically. You don't need to use "Site | Put" manually on every page. While this may not seem like much when you have only got a few pages, it will save you time when your site grows to have hundreds of pages.
If you have closed Dreamweaver since the previous chapter, start it again and open your home page. Since you have already put in a lot of effort designing that page, we will use it as the basis of the template for the rest of your site.
Click "File | Save as Template..." from the menu.
A dialog box with the title "Save As Template" will appear. By default, as you can see from the "Save as" field in the window, your template is called "index" (since your original filename was "index.html"). If this name is acceptable to you, click the "Save" button.
The name you type here merely serves as a way for you to identify the template. It will also be used as the template's
filename, with a ".dwt" extension automatically added to it. It's not actually
important what you call it. For example, you can even call it "The Best Design in the World"
although it will probably be a bit embarrassing for you if someone were to discover that name. The name is embedded
in all the web pages derived from it, and while it's not visible to the average visitor, someone who knows
HTML
can see it simply by using the "View source" function of their browser.
For simplicity, I will assume that you used the default name of "index" in the rest of this tutorial series.
Click the "Yes" button in response to the new dialog box asking "Update Links?". It is necessary to update the relative links on your page (if any) because the template file that Dreamweaver creates will be placed in a different directory (ie, folder) from your original file. If you don't allow the software to update the links, they will be broken in all the pages created from that template. In other words, your answer must always be "Yes" (which makes the question somewhat redundant).
A new directory called "Templates" will be created in your local website folder. You can see this in your Files panel.
Note that you're no longer looking at your home page in the editor. Although the page looks exactly
the same as your home page, the tab near the top of the window should now read "index.dwt" instead of
"index.html". The file extension ".dwt" means that you're working on a Dreamweaver template and not
your web page (which has a ".html" extension).
Unfortunately, the template cannot be used as it stands. Although it has the correct appearance, every bit of the page will be treated by Dreamweaver as part of the design. This is of course not correct. You only want the basic two column layout, the navigation menu and the top horizontal strip containing your logo to be standard across all your pages. The bulk of the right column (where your content lives) will probably vary from page to page (unless you actually want every page to be identical).
In order for Dreamweaver to know which region of your page is part of the site design, and which portion contains unique content, you need to specifically indicate it in your template. Otherwise, Dreamweaver, being unable to read your mind, will default to treating everything as the invariant part of the design.
Essentially, what you will be doing now is setting up what Dreamweaver calls "editable regions". These are the portions that will be different on every page of your site. You can have multiple editable regions on each page, and they can be separated by content that is part of the fixed design, or they can be contiguous with other editable regions.
To mark a region of your web page as editable, drag your mouse over that section to select it. For example, if you want all the paragraphs in the right column to be different on every page, move your mouse to the start of the section, hold down your mouse button and move the pointer to the end of the relevant part so as to highlight it.
With the section still selected, click "Insert | Template Objects | Editable Region" from the menu.
A dialog box entitled "New Editable Region" will appear. The "Name" field probably has a default value of "EditableRegion3" or some such thing (eg, "EditableRegion" but with a different number tagged onto it). Dreamweaver allows you to give a name to all your editable regions. Presumably, this is meant to jog your memory in the future so that you know what that region is supposed to contain. For example, if you have highlighted the bulk of your right column, you can always call that region "Content" or "Custom Content" or anything else you like. (Yes, spaces are allowed in that field.) In fact, you can even accept the default name if you can't be bothered to dream up a new one. The name you select will be displayed in Dreamweaver when you edit the page, but it will not be shown to a visitor when he reads it in his browser.
Like the name of your template file, the name of this editable region will also be inserted into your web page. It will just be invisible to your visitors when browsing your site normally. However, as before, if your visitor takes the trouble to use their browser's "View Source" facility, he/she can see the name you chose. In other words, don't put secret things (like your bank password) as the names of your editable regions. Things like "Content", "Product Description", "Price" or even "EditableRegion3" are fine. It should be obvious from your page that it's the "content" or "product description" or "price" (etc) that they're reading anyway, otherwise you have much bigger problems than worrying about the names of these fields.
To sum up, replace the default name with some descriptive word or words if you wish. Or leave it as it is if you are feeling lazy. Then click the "OK" button.
The moment you do that, Dreamweaver puts a light blue outline around the section that you previously selected. At the top of the section, there's a tag with the name you specified earlier. This blue outline and the name of your editable region will not be displayed on your actual web page when you view it on the Internet. Dreamweaver, however, shows it to you while you use the editor, so that you know where all your editable regions are and what they're for. Otherwise you'll have to work blind when you design your site.
Do the same with the other parts of your web page that should also be changeable. For example, if you have placed a copyright notice in the footer, you may want to make the year portion an editable region, since it's possible that you'll create a new page in some other year in the future. Yes, you can select a single word or number and make it an editable region if you like. Label the region "Copyright Year" (without the quotes) or leave the name at the default if you can't be bothered.
When you have finished designating all the editable regions in your template, click "File | Save".
This may (or may not) result in a message that says '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 "EditableRegion4" (or whatever it says in your case) is the name of one of your marked regions.
This message sounds alarming, but is actually not even remotely significant or useful. It merely means that somewhere on your page, you selected a word, number or phrase (such as your copyright year) instead of a huge block of text (like an entire paragraph). It's trying to say that when you work on your individual web pages, you can only replace that short phrase with another short phrase. You won't by able to replace it with multiple new paragraphs inserted right in the middle of your existing sentence. To do that, you will have to go back to this template and readjust your design. Don't worry if you don't understand either the message or my explanation. It's merely stating the obvious, sort of like saying "Warning: water is wet".
Anyway, if this message pops up for you, just click the "OK" button to dismiss it.
You now have a template from which you can easily derive new pages for your site. Even better, when you change the design of the fixed part of your template (the parts not marked Editable Region), Dreamweaver will go through all your pages and update them for you.
Before we make new pages however, we have to deal with your home page. The latter was created manually by you, before you even made your template. In view of this, as far as Dreamweaver is concerned, it is not actually derived from the template. As such, if you ever update your site design, Dreamweaver will ignore that page, since it will see it as independent of your template.
The simplest way to associate your home page with the template, is to replace your old "index.html"
file with a new one that is made from the template. This doesn't require much work, since when you created the
template, you didn't make any changes to its appearance. All you did was to mark certain sections as editable regions.
Any page made from it will therefore look exactly like your home page by default. This similarity, however, is only
skin deep. Under the hood, it has invisible markers that tells Dreamweaver that it was made from your
template, allowing it to manage it for you every time you update your design.
Click "File | Close All" to close all your files. This will reduce the chance that you end up working on the wrong file by mistake.
Click "File | New". You will be greeted by the "New Document" dialog box, which you saw in chapter 1.
Here's where we depart from the procedure taught in the first chapter. Instead of creating a page from a blank layout, we will use the template you made earlier.
Click the line that says "Page from Template" in the left column of the dialog box.
The name of your current site should appear 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. At the moment, since you have only got one website, it should be selected by default. If you are not sure it's selected, just click the name once to select it.
The name of your template should also appear in the next column, and also selected by default. Again, if you're not sure that it's selected, just click it once.
The final column should have a rough thumbnail picture of your site. Don't worry if the picture is not accurate; it probably isn't. It's just there to help you distinguish between different templates if you have created many of them.
Look for a field underneath that thumbnail that says "Update page when template changes". This box beside it should have a tick in it by default. If it doesn't, click it to enable it.
Click the "Create" button at the bottom of the dialog box.
A new page will fill your Dreamweaver window. This page will look exactly the same as your current home page (except for the blue outlines around your editable regions) and your template.
Click "File | Save As...".
Select "index.html" in the "Save As" dialog box that appears and click the "Save" button.
Click "Yes" in response to "The file you selected already exists. Would you like to overwrite this file?".
When you complete the above procedure, you will be left with a new home page that will look exactly like your old one (or at least, it will to your visitors). However, you should have no trouble telling the difference from within Dreamweaver, since you can see the outlines of all your editable regions.
In the future, if you want to update the content of your home page, simply open this file, and edit the stuff in the editable regions. You won't be able to change anything outside those regions. If you need to change the design, you will have to open the template file and modify it there. I will deal with changes to the design (ie, the non-editable regions) later in this chapter.
When you've finished marvelling at your page, close it with "File | Close All". That page is old news. We're moving on to the other pages next.
The steps to creating new pages for your site are similar to those for recreating your home page.
However, since this is your first time making brand new pages from a template, I will walk you through the steps of setting up your Site Map and About Us pages.
A site map is basically a comprehensive list of all the pages on your website. You can see an example of one by looking at thesitewizard.com's Site Map. As you can see, it comprises links to all the articles on thesitewizard.com, and is the web equivalent of an exhaustive table of contents that you find in a physical book. Visitors who are looking for something, but don't how to find it, can consult the site map. In other words, it serves as an aid to improve your website's usability. Another benefit is that it helps search engines discover all the pages on your site.
Incidentally, don't be distracted by the 3 columns that I used in my site map. Since I had hundreds of pages to list, I put it into multiple columns to make the page appear shorter. (It seemed a good idea at the time.)
I realise, at this point, you don't really have many pages to put into your site map. However, you should still create one, since you will eventually have more. (Unless you really plan for your site to be a one-page wonder.) If you don't do it now, when the job is easy, you'll keep putting it off till you have hundreds of pages, and at that point in time, you'll decide it's too hard to do. On the other hand, if you create the map at the very beginning, you can simply add a new link to it every time you add a page, making it a trivial and very doable task.
As a precaution, to make sure that you don't work on the wrong file by mistake, click "File | Close All" from the menu.
Click "File | New...".
Select "Page from Template" in the left column by clicking it. (It'll probably already be selected since you just recreated your home page earlier, and Dreamweaver remembered your previous choice. If you're not sure, just click it once. It will do no harm.)
Select your site in the "Site" column and the "index" template if it is not already selected.
Once again, make sure the "Update page when template changes" box is checked.
Click the "Create" button.
You'll now see a copy of your home page, which we will modify to become your site map.
First, update the "Title:" field to say "Site Map" (without the quotes) or, if you prefer, "Site Map : Example Co" (of course replacing "Example Co" with your site's real name). If you've forgotten where that field is, see the picture below.
Replace whatever page header you had previously with the words "Site Map". By "page header", I mean the large bold words that you previously had at the top of your home page. If your text does not appear in bold, because you accidentally deleted everything before reading this paragraph, just recreate the header using the instructions on how to make a sub-header in chapter 1.
Delete the rest of the content in the editable region of the right column. You can do it the usual way: drag your mouse over the text to select it, and hit the Backspace or Delete key.
Now create links to each page on your site, one per line. For example, put the link to your home page on one line, followed by the link to your Feedback Form, and if you're planning to have an About Us page, a link to the About Us page.
Since your Feedback Form and About Us pages don't exist yet, you can create those links as
"http://www.example.com/feedback.html" and "http://www.example.com/about.html",
replacing the "www.example.com" portion with your site's real
domain. Or if you
prefer to use
relative
URLs, just use "feedback.html" and "about.html".
Important: make sure you use "feedback.html" and "about.html" for the filename portions of the Feedback Form and About Us links, and no other names. Those filenames match the ones that you used in chapter 6 for your navigation menu, and will match the files you save later in this chapter (for the About Us page) and the next (for the Feedback Form). If you use a different name at this point, your links will not match the files you create, and your visitors will get 404 File Not Found errors when they click them.
Since hitting the ENTER key after each line creates a new paragraph, leaving far too much space between each link, you will want to use a different method for moving each link to a new line. One way is to use "Insert | HTML | Special Characters | Line Break" from the menu. Invoking this will move whatever you type next onto the next line. When you do this, the cursor will shrink to become a small blinking dot just underneath the first character of the current line. Don't panic. Just type the text that is supposed to go into the next line as though everything were normal, and Dreamweaver will automatically create a new line and display your words in the correct place.
For those who find using the menu to insert a line break too troublesome, you can also use Shift+ENTER to achieve the same effect. That is, hold down the Shift key while hitting ENTER. (I'm not sure if this Shift+ENTER shortcut works on the Mac.)
Once you have finished populating the page with links, click "File | Save As..." and type "sitemap.html"
(without the quotes) into the "File name" field. As before, don't use a different name, add spaces, or use
capital (uppercase) letters or your filename will not match the link in your navigation menu.
Click the "Save" button.
Remember to return here to add a new link every time you create a page. You will probably not appreciate this page much, since as the webmaster, you're already intimately familiar with your site, but your visitors will find it helpful, especially when your site grows to have many pages.
The "About Us" page is used by webmasters to tell their visitors a bit about the company or people behind the site. If you are running a business, selling either products or services, you will probably want to create one. The page is optional for people running personal or hobby websites. Whatever your situation may be, remember that the things you write here can be read by anyone, from lunatics and criminals living in your neighbourhood to your future employers, so be circumspect about what you reveal.
If you elect not to have an About Us page, just skip to the next section.
Close the "Site Map" file with "File | Close All".
Create a new page from your template, following the procedure you used to create the previous two pages.
Update the "Title:" field to say "About Example Co", "About Us", "About Me" or something to that effect. There are no fixed rules for this, so say whatever you want.
Modify the content in your editable regions to include the necessary information.
Save the file as "about.html". Again, don't change the filename to something else, since this
is the name you used in both your navigation menu and site map.
Now that you're familiar with creating new pages on your site from your template, having already done it 2 or 3 times, you should proceed to create the other parts of your site. Remember to set the title field of the new pages, otherwise they will all say "Untitled Document". You may also want to read my article on how to create good filenames for your web pages to avoid long term problems.
Note: do not create the feedback form yourself. I will deal with that at length in the next chapter. Forms are a bit more complicated than the usual web page.
If the page you are creating is an important one, consider putting a button on your navigation menu pointing to it. Whether a page is important or not depends on the purpose of your site. For example, if you're selling goods and/or services, the "Products" and "Order" pages are crucial, since they are the raison d'être of the site. However, since you probably didn't put the navigation menu in an editable region of your web page (for good reason), you will have to modify the template itself to insert the button. This is the subject of the next section.
If you're changing your website's design in some way, whether to accommodate a new button on the navigation menu or changing its colour scheme or some other thing, you will need to make your changes in the template itself.
Click "File | Close All" to close all open files.
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 which case you can skip this step.)
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.
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 or deleting a menu button, and have forgotten how to do it, see the instructions in chapter 6.
When you've finished making your changes, click "File | Save All".
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 change them so that they match the template.
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. The title is deceptive. 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.
Click "File | Close All" so that you don't accidentally modify the template later when you actually intend to work on something else.
Until now, you have been using "Site | Put" to upload your home page. This command is useful when you have only got a single page to publish, but it's cumbersome when you have many, as you do now. When you want to upload multiple pages in one fell swoop, Dreamweaver provides a facility where it will compare the copy of your website on your hard disk with that on your web server and synchronize them so that your web server's copy matches that on your computer. If your site has multiple pages, it will compare all of them.
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.
A dialog box with a title "Synchronize Files..." will appear. Click the "Preview" button.
At this point, Dreamweaver will connect to your website to compare the files on your computer with those already uploaded to your site. The procedure may take some time, depending on how many files you have, and the speed of your Internet connection. When it is done, a new dialog box entitled "Synchronize" will appear. This window will show you the files that Dreamweaver thinks needs to be published. 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 not really part of your website. It's an internal (administrative) file meant to make it easy for you (the webmaster) to create and maintain the site. As such it does not actually need to be on the Internet.
If you don't want your template to be uploaded, right click that line, then click "Ignore Selection" in the menu that pops up. Dreamweaver will then change the entry to say "Ignore Templates\index.dwt".
Personally, I never publish my template file for sites on which I use Dreamweaver. 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).
When you're through perusing the list of files that need to be synchronized, click the "OK" button.
Dreamweaver will display a dialog box to tell you that it is publishing the files to your website. The dialog box will disappear automatically when the uploading is done.
Now that your website is mostly complete, it is important to test all the internal links on its pages. By "internal links", I mean all the links that point to the other pages on your site. This includes the buttons on the navigation menu as well as the links listed in the site map. If you have placed links on your other pages, make sure to click them too. Don't assume that they will all work. Typing errors when creating links are very easy to make, even for experienced webmasters. And remember, you could not properly test any of your links or buttons before, because prior to this chapter, you only had one page.
The only internal links that should give you "404 File Not Found" errors are those that point to your feedback form, since you have not created that yet. All other buttons and links that point to pages within your site should lead to the correct destinations. If you are having trouble solving your broken links, see the section on how to solve a 404 File Not Found error in chapter 5.
If everything works perfectly, congratulations! You have nearly completed your website. In fact, as it stands, you already have a functional multi-page site.
In the next chapter, you will add a feedback form and its associated pages. This form will allow your visitors to contact you without having to leave your site.
Copyright © 2014 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 a 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 Create and Manage Multiple Pages on Your Website with Dreamweaver CS6
