Templates in Dreamweaver

• Your goal for today
• Planning and setting up a new curriculum web
  • Using Telnet
  • Setting up new site
  • Site map
• Creating a template
• Updating pages

Your goal for today

• Prepare a new web site that could be used for a curriculum web (no content necessary)
• Prepare a template and assign it to your curriculum web pages.
• Upload your new "site" to the server, and then show your mentor.

Back to the top.

Planning and setting up a new curriculum web

• Today, I'm going to set up the web site you'll find here. You will create a similar structure.

• We'll create a new site now. Remember, you can have multiple sites defined in Dreamweaver.

Using Telnet

• First, use Telnet to create a new directory in your www directory on the CUIP server. Click Start|Run and type "telnet cuip.uchicago.edu" into the field. Click okay. A new window opens, and after a few seconds you'll see a login prompt. Type your CUIP username. Then the password prompt appears. Type your password. You will automatically be located in your user directory.
• The key commands are cd (change directory), mkdir (make directory), and pwd (present working directory). You might also want to use ls (short listing) and ls -l (long listing; there's a space in there).
• Type "cd www" to switch to your www directory (this is the directory that must contain all of your web pages, or folders containing those web pages).
• To create a new directory (say "curriculumweb"), type "mkdir curriculumweb".
• To make sure this works, type "cd curriculumweb" then type "pwd" (for present working directory). You should get a response which indicates you are in the ~/www/curriculumweb directory. (The tilde, or ~ indicates your home directory. "www" is a subdirectory of your home directory, and curriculumweb is a subdirectory of your www directory.
• Here is the sequence as it should appear in your telnet application:

• Now type "logout" and click "ok" when it says you've been disconnected.
• Now, returning to Dreamweaver:

Setting up new site

• Go to the Site Files view by clicking on
• Then, click on the down arrow next to the site names:
• Then, choose "Define Sites..." and "New"
• Call the site "Curriculum Web."
• Create a new local folder (on the Desktop, call it "curriculumweb") and define the site in the Local and Remote windows. (For reminders of how to do this, click here.)
• NOTE: to indicate the "host directory" on the remote info dialog box, you can EITHER use the long string we used before, starting with /home or /home2 OR you can use www/curriculumweb (with no leading slash). Leaving out the leading slash tells Dreamweaver the directory's path from your home directory. Putting in the leading slash tells Dreamweaver the path from the server's root.
• Test the new setup by clicking "Done" and then clicking the "connect" button in the Site View window.
• If the connect doesn't work, check your Define Sites dialog and make sure the "host directory" is the same as the new directory you created a few moments ago. Make sure you haven't put any spaces in the directory names and that you were consistent in your use of upper and lower case. If you have trouble, ask your mentor.

Back to the top.

Site map

• Let's use the site map to set up the structure of the new site.
• To do that, we must create and specify a home page for this new site.
• Right-click in Local window. Choose New File, then rename it "index.htm." Then, go back to Define Sites... and choose Site Layout, and click the folder icon to specify the new file as your home page, thus:

• Let's suppose we're creating a curriculum web that contains a home page, 5 ten-minute demos, 5 mini activities, a final activity, and a list of useful links.
• Open the site map view by clicking here:
• Your home page should show up. To create new files, right-click on a file icon, and choose Link to New File.
• The resulting site would look like this:

• And in the local folder view:

• If you wish, you can use the Site Map view to add additional links (from each activity back to the home page, and to a new file called rubric.htm), like this:

• You'll notice that any given page within your site will have no content so far except any links you've added. For example:

• Once you're done setting up your new site like this, you're ready to set up a template for this site.

Creating a template

• Templates are files that control the layout of a number of HTML files in your site. You can use multiple templates per site and even have files that do not rely on a template.
• Templates and Library Items perform similar functions, although templates are better for controlling the layout of multiple pages, while Library Items are better for adding identical content to multiple pages. (Difference is that templates include entire page layout; libraries only affect portions of the page.)
• Templates contain "locked" and "editable" regions. (These are both editable in the template file, but in the documents to which they are applied, only editable regions can be changed.)
• You can create a template at any time (before or after individual pages are created). However, if you do it BEFORE, then you'll save an additional step (that of modifying each page to use the template.) But I'll demonstrate the process AFTER you have created individual files.
• To create a template file, you just create a new file, and then save it as a template.
• In the Site View, click on File|New Window. A new page layout window opens.
• Save it immediately as a template by clicking File|Save as Template. Give it a name that makes sense. I've called mine curriculumwebtemplate. Notice (in the Site View) that a new folder (Templates) has been created and stored the new file as a *.dwt (for Dreamweaver Template).
• Saving it immediately as a template will spare you the problem of accidentally saving it as a regular document later.
• The KEY THING about template files is that they are just like other HTML files except they have "editable regions."
• Editable regions are the areas of a template file that contain variable information, depending on the particular page. Everything that isn't in an editable region is only editable on the template, and not in the individual files to which it is assigned.
• Generally, your template files will have at least two editable regions: doctitle and body. The doctitle region is created automatically. The body will be manually created later.
• Here, I'll take you through the creation of the following template file:

Steps

1. Open a new page editing window. (Click "File|New Window" or "File|New")
2. Click File|Save as template. Give it a name that makes sense, like "curriculumweb". If you get an error that no editable regions have been created, ignore the message for now.
3. The file will automatically be saved into a new folder called Templates and will receive the file extension ".dwt" for "DreamWeaver Template."
4. Insert a table with 3 rows and 7 columns, 100% of window, border = 0.
5. Merge the cells in the top row of the table into one. To do this, hold the mouse just to the left of the top row. When the cursor looks like a right arrow, click. (Or, click and drag over the top row.)
6. To merge the cells, click the "merge cells" button on the property inspector:
   
7. This will turn the top row into one cell. Type a title into the cell, for example "How to Make a Curriculum Web Using Dreamweaver." Center it in the cell by clicking the middle of these buttons:
8. Now merge the center 5 cells of the middle row. Click and drag to select the five cells, and then use the merge button.
9. Type some suitable text into this new merged cell, for example "A Curriculum Web produced by YOUR NAME in WIT 2001."
10. To change the background colors of cells, select them and use the Bg field to select a color.
11. In the third row of the table, type text corresponding to the areas of your sample curriculum web, for example:

    Demo 1

    Demo 2

    Demo 3

    Demo 4

    Demo 5

    Final Activity

    Links

12. Add links to the text you just typed.
13. At the end of the table, put in a series of blank lines (press Enter four or five times.)
14. Save the template file. (Since you already saved it as a template, you should choose File|Save, NOT File|Save as... or File|Save as template....). If you get an error message that you haven't created any editable regions, just ignore the message for now.
15. Now it is time to add the main "editable region" of your template. So far, everything we added into the page will be the same on all the pages of the site. These are "locked regions."
16. To make a new editable region, select several of the lines at the bottom of the page. Then click Modify|Templates|New Editable Region. Give the new region the name "body" (or something else descriptive). This will be the area of the page that will alter in each page in the site.

Notes:

• To create the navigation links to each of the demos, simply create a link to that file. Templates are smart enough that they will work even if actual files using the template are scattered among various folders in the site.
• It is a good idea to put a blank line before the BODY region.
• To add a new editable region, place the cursor where you want it and use Modify|Templates|New Editable Region..., or, select the area you want editable and choose Modify|Templates|New Editable Region...
• When you give names to your editable regions, use names that make sense to you, like "body" (if there is one major one), "contents," or (for more than one) "leftregion" and "rightregion."
• You cannot define multiple cells of a table as one editable region. You can, however, define an entire table or just one cell as editable.
• When you save your template, Dreamweaver will ask if you want to update the pages in your site that use the template. You'll usually choose "yes," unless there are no such pages.

Back to the top.

Applying the template to pages

• To apply the template to each page in your site, you need to open each file individually, then choose "Modify|Templates|Apply Template to page." Select the new template from the list (if you have multiple templates). You will then be asked where to put the content of the page. Choose the "Body" region. When you save each document, it will be linked to the template.
• If, after you apply the template to your page, you want to edit the non-editable regions of the page, you can either open and edit the Template (Modify|Templates|Open Attached Template), or you can choose "Modify|Tempates|Detach from Template." The template's look and content will remain with the document. (However, if you detach the template, new changes to the template will not be reflected in any pages with detached templates.)

Activity: Create a template for your curriculum web site. Include links to major files in the site, and a "Body."

Updating pages

• Open your template. Change it. Save it. You'll now be asked if you want to update all the pages in your site that use the template. Choose Yes. Make sure it worked.

Once you've created your template and applied it to all the pages in your "site," upload the site to the server. Show your mentor.

Back to the top.

Your goal for today (again)

• Prepare a new web site that could be used for a curriculum web (no content necessary)
• Prepare a template and assign it to your curriculum web pages.
• Upload the new "site" to the server. Show your mentor.

Back to the top.

Next Lesson.