Web Design & Architecture -- LIS 9723 logo

Here's a page we can use for today's tutorial.

Building a Website in 7 Easy Steps

  1. Design your layout (this is composed of many other steps)
  2. Build your file structure (using files panel)
  3. Link your navigation
  4. Save as template
  5. Add editable region(s)
  6. Apply template to blank pages
  7. Populate pages with content


To create a template:

    1. Layout the template as you would like it to look.
    2. When you're done designing, save it as a regular html file as a backup.
    3. Now save it as a Template: Go to File..> Save As Template
    4. The file is now a Template file, and you will have to mark a div or selection as editable.
    5. Click on the div you want to be editable (Note: if using HTML5, you'll need to go the code view and put your cursor into the tag you're making editable, eg., <article id="sidebar">
    6. Go to the Insert panel ... >
    7. Choose 2nd button from the bottom (or from the left, if set horizontally), and click on the pulldown..>
    8. Choose "editable region"..>
    9. Give this a name that makes sense (I usually use the same name as my div ID)
    10. Save again. (You don't have to Save as Template again, as it's already a template (.dwt) file.)

Tips and Troubleshooting

    • Missing a panel? Got to Windows..>.
    • You can also make a selection (highlighting) editable.
    • .dwt stands for Dreamweaver Template
    • Use a sensible name for your editable areas so that you can remember what you called them later
    • You can't mark a section/selection as editable until you have saved the file as a Template file.
    • Be careful not to "nest" Template files. (Never save a Template file using "Save As Template". If you want to base a new Template on a pre-existing file, just Save As.)
    • Also, be careful not to "nest" editable regions (putting one editable region inside another).

    [back to top]

Using a Template File (3 options)

1. Apply to a blank page:

  • Open the file you want to alter in the files panel.
  • Go to Modify ..> Templates ..> Apply Template to Page.

2. Open a new page based on a template:

  • File ..> Page from Template
  • Choose the site & template you want
  • Click create

3. Assets panel (tab next to the files)

  • Open the file you want to alter in the files panel.
  • Click on the assets tab
  • The second Icon from the bottom will show you the Templates.
  • In the Templates panel, click on the template you want to apply (just once)
  • Now, in the Templates panel, click on the "Apply Template" button on the right side of the panel.
  • You can also drag the preview over to the blank page.


    [back to top]


Back to Top
Last updated:

Course Outline | Assignments | Exercises | Schedule | Resources & Links | Lab Tutorials

About the Site | Site Map | About Mark | ©2013-2014 Mark A. Rayner