Managing Multiple Files in Dreamweaver Using Sites and Templates

Introduction

In our tutorial on creating web-pages in Dreamweaver we created a single page with a color scheme and layout. Assuming that you have completed that tutorial, this tutorial shows you how to use the page you created earlier to build an entire web-site that has a consistent look and feel and is easy to manage. A web-site is a collection of web-pages collected together in the same way that a book is a collection of pages. It is important that all of the pages in the site have a consistent look and feel so that users know they are navigating your site no matter where in the hierarchy of pages they may be. The management problem has been that if you want to make a change to the layout of the site, such as add a new link to a section, or change the font in the banner, you would have to manually apply that change to every page in the site. Even with small sites consisting of only a few pages, this process becomes tedious very quickly.

The Solution - Templates

Dreamweaver has a very elegant solution to the problem of managing multiple files, and that is templates. A template is like a cookie cutter in that once you have designed it, you use it to create other pages that look identical to it. However, it is more than just a cookie cutter in that, even after you have used it to create other pages, any changes you make to the template will be made to all of the pages that were made with that template. In other words, instead of having to make a single change fifty times across every page in your web-site, you can just change the template, and Dreamweaver will do the dirty work of changing all of the pages for you.

However, this system would be completely pointless if you could only create pages that looked exactly like the template. You generally want each page to have the same look as the template, but you want it to have its own unique content. In other words, on our example site we have four pages - home, city, school and activities. Each of the pages looks like the template except that the city page has information about Philadelphia, the school page has information about Penn and so forth. In order to tell Dreamweaver that there is a certain part of the template that you want to be unique on each page, you place an Editable Region at that position in the template. This means that that region will be editable individually on each of the pages created from the template.

To give you an idea of what we are trying to achieve in this tutorial, take a look at the example web-site we will create by clicking on the link below. As noted above, it has four pages, each of which links to all of the others, and each of which contains unique content.

Example Site

Now that you have an idea of what we are trying to achieve, lets move on:

Step 1 - Define A Site In Dreamweaver

In order for Dreamweaver to be able to keep track of all of the pages and files in your site and make sure that all of your links between them work, you will need to tell it where you are going to store all of the files. Ideally all of the files (pages, pictures and others) should be stored together in the same folder. To tell Dreamweaver which folder you are going to use click Site:New Site... from the menu at the top of the screen:

picture of new site menu

This will bring up the Site Setup wizard that will walk you through creating the site. To start, give your site a name that will help you remember it. Secondly, tell Dreamweaver where on the internet your site will eventually be. If you are uploading this site to your own homepage on the SAS server then your homepage will be: http://www.sas.upenn.edu/~yourusername If you don't know where your site will eventually be hosted, you can leave this blank.

picture of site name

Next, Dreamweaver will ask if you would like to use any server technologies with your site. These technologies allow you to make sites that access information from databases, for example. For the purposes of this tutorial and most sites that you create, you will not need server technology:

picture of site technology

Next, you must tell Dreamweaver which folder you want to store your site in. Choose the first check box for "Edit local copies on my machine, then upload to server when ready." Next, click the small image of a folder to the right of the text box to locate the folder where you will store your files. In the dialog that appears, browse to the folder where you saved the web-page that you created in the last tutorial and select it.

picture of site location

Next, Dreamweaver will ask how you would like to connect to your server so that it can upload the web-site once you are finished. Unfortunately Dreamweaver doesn't support the technology that the SAS web-server requires to upload files*, so select "none" as the connection method:

*The latest version of Dreamwever (Dreamweaver 8) does support connecting to SAS. In this case you should select FTP as the connection method, enter "mail.sas.upenn.edu" as the hostname, enter "~/html" as the folder to store the files and then enter your email username and password. Finally, check the option to use "Secure FTP (SFTP)"

picture of site connection

Finally Dreamweaver will show you a summary of all of the settings that you made. Click "Done."

picture of site summary

Step 2: Open Your Previous Web-Page

On the right hand side of the screen in the file-browser Dreamweaver will now show you all of the files in the folder you selected as the folder for your site:

picture of file browser

Double click on the file for the web-page you created in the previous tutorial - mine was called "test.html" The page will open for you to edit it.

Step 3: Add An Editable Region

As described above, we have to add an Editable Region to the page. This is the part of the page that will be unique on each of the pages in our site. We want the main content area of each page to be unique, but everything else should be the same, thus, we are going to place the Editable Region into the large content cell on the bottom right of the table. To do this, click inside that cell to place your cursor there, then click Insert:Template Objects:Editable Region from the menu at the top of the screen:

picture of insert editable region

You will be asked to give the Editable Region a name. This region will contain the page content, so we will call it "content."

picture of editable region name height=

Dreamweaver will then insert the editable region into the cell:

picture of new editable region height=

Step 4: Add Text For Navigation Links

As noted, our site is eventually going to have 4 pages - home, school, city and activities. In the navigation cell on the left of the page, enter text for each of these sections:

picture of navigation names height=

Step 5: Convert The Page To A Template

Thus far we have just been working with our previous page. We are now going to save it as a template so that Dreamweaver knows it can be used as a mold for other pages. Click File:Save As Template... from the menu at the top of the screen:

picture of save template

You will be asked to give the template a name. In complex sites you can have many templates for different purposes. Thus, you should give it a descriptive name - I will call mine "maintemplate":

picture of template name

We are now finished with the template for now, so close it by clicking File:Close

Step 6: Create A Page From The Template

There are various ways to create a file from a template, my method is to click File:new... from the menu at the top of the screen, and then select HTML as the new file type. This will create a new blank page:

picture of new blank page

Next, we are going to apply the template to this page, which will make it look exactly like the template. Click Modify:Templates:Apply Template To Page... from the menu at the top of the screen:

picture of apply template

You will then be asked to select which template to apply. We only have one template at the moment, so select it and click "Select":

picture of select template

Your page will now look exactly like the template except you will notice that if you place your mouse over any part of it other than the Editable Region, your cursor will turn into a small no-entry sign and your will not be able to make changes. The only place you can make changes is inside the Editable Region.

Step 7: Enter Content Onto The Page

Now, to make this page unique, we are going to enter text into the editable region. This page will be the home page, so enter a heading such as "Home Page" and a little text into the Editable Region:

picture of enter content

Now, save the file in the same folder as all of your other files and call it "index.html" by clicking File:Save As... and then close it by clicking File:Close from the menu at the top of the screen.

Step 8: Create All Of The Other Pages

Now, repeat steps 7 and 8 to create the other 3 pages for the site and save them in the folder with the following names:

  • city.html - Has information about Philadelphia
  • school.html - Has information about the school
  • activities.html - has information about student activities

Your file browser on the right of the screen should now look something like this (without the word document):

picture of open template

As you can see, the four pages that we created are there(index.html, city.html, school.html, activities.html,) as well as the original page (test.html) and our template inside the templates folder.

Step 9: Linking The Files Together

We now need to link the files so that the navigation links on the left hand side of all of the pages actually point to the corresponding pages. As noted, without Dreamweaver we would have to manually make changes to each of the four pages that we have created. However, with Dreamweaver, we can have the changes automatically made to all of the files in our site simply by editing the template. Firstly, open the template file by double clicking its name in the file browser - it will be inside the "Templates" folder with ".dwt" as the extension. Mine is called "maintemplate.dwt":

picture of open template

With the template open you will notice that unlike all of the pages we just created, you will not be prevented from editing any part of it. Highlight the word "Home" in the left hand column of the page (The Navigation Cell.) To turn this text into a link, click the little folder icon next to the link box in the property inspector at the bottom of the window:

picture of select link

This will open a file browser window showing all of the pages in your site. Select "index.html" and then click "choose.":

picture of find page

You will see that "index.html" is added into the link box of the property inspector and the text "home" on the template turns blue and is underlined to indicate a link.

An alternative method for creating links, which is much faster, is to highlight the text you would like to turn into a link, then, right next to the link box in the property inspector you will see a small circle that looks like a cross-hair sight. Click and drag that cross-hair. You will see that it drags an arrow behind it. Whilst still holding the mouse button, move the mouse over to the file browser on the right of the window and place your mouse cursor over the file you want to link to - it will become highlighted. Then release your mouse. You will see that a link has been created to that file.

Now repeat the above process to create links for the other pages. For example: make "The School" be a link to "school.html"

Once you have made all of the links, your template's left hand navigation section should look something like below. Not that all of the pieces of text are blue and underlined indicating that they are links:

picture of links made

Finally, we have to tell Dreamweaver to apply these changes to all of the pages in the site. Click File:Save from the menu at the top of the screen. You will get a pop-up asking if dreamweaver should update the affected pages. Click "Update":

picture of update pages

Dreamweaver will then make the necessary changes and present you with a log describing the success of failure of its changes to each page. Note that the summary of my site states that it attempted to change 4 pages and succeeded it changing 4 pages. After reviewing the summary, click "close":

picture of update pages log

As a precaution, to make sure that the changes Dreamweaver just made are actually saved, click File:Save All.

Conclusion

Congratulations, you have just completed your first site in Dreamweaver. After completing these two tutorials you should now be able to:

  • Create the layout for a page using tables
  • Create a site so Dreamweaver can manage your files
  • Create a template so that Dreamweaver can apply changes
    to many pages in a site automatically and to maintain a consistent
    look and feel across your site.
  • Create pages from your template
  • Link pages together

 

Further Reading