How to Create a New Dreamweaver Template - dummies

How to Create a New Dreamweaver Template

By Janine Warner

You create a new template in Dreamweaver by using the same New Document dialog box that you use to create any other type of page. To create a Dreamweaver template, follow these steps:

  1. Choose File→New.

    The New Document dialog box opens.

  2. In the list on the left, click the Blank Page option.


  3. In the Page Type list, choose HTML Template.

  4. In the Layout area, choose <none> to create a blank page or select a predesigned CSS layout.

    Dreamweaver’s many CSS layout options provide a great head start to creating a new page design.

  5. Click the Create button.

    A new blank template is created and opens in the main work area, and the New Document dialog box closes.

  6. Choose File→Save.

    You get a warning (if you haven’t disabled it), stating that the template doesn’t have any editable regions and asking whether you really want to save it. Click OK to close the warning dialog box and continue. Dreamweaver gives you this warning because a template with no editable regions isn’t useful. You find instructions for creating editable regions in Step 9.

  7. Click OK to save the page as is for now.

    The Save as Template window appears with the Templates folder open. If you don’t already have a folder named Templates in your local site folder, Dreamweaver will create one for you when you create and save your first template.

    To work properly, Dreamweaver templates must be saved in a folder named Templates (with a capital T) in your local site folder, which is visible in the Files panel. If you change the folder name or move the Templates folder into a subfolder, your templates will no longer work properly.

  8. Create a design for the page by adding images, text, and other elements as you would in any other Dreamweaver file.

    Remember that you create a page design in a template just like you would in any other web page. Whether you include images and text that will be replaced in pages created from the template or just create the skeleton of a page is up to you.

  9. To create an editable region:

    1. Select any image, text block, or content area.

      Often the best option is to select an entire area of a page so that everything in that section becomes editable. If you’ve designed your pages with <div> tags and CSS, a good option is to select the <div> tag for an entire section, such as the <div> tag styled with the mainContent class style.

      A handy way to select a section surrounded by a <div> tag is to place your cursor anywhere in that area of the page, and then use the tag selector at the bottom of the workspace to select the <div> tag.

    2. Choose Insert→Template→Editable Region.

      The New Editable Region dialog box opens.


    3. Give the new editable region a name.

      Choose something that identifies the type of content, such as headline or main-content. The region you define as editable becomes an area that can be changed in any page created from the template. You can have multiple editable regions in one template. Each editable region must have a different name; names can’t use spaces or special characters, but underscores and hyphens are okay.

    4. Click OK.

      An aqua blue box (with an aqua blue tab at the top left of the box) surrounds the editable region. The name you entered into the New Editable Region dialog box appears on the tab.

  10. When you finish designing the page and add all the editable regions you want, choose File→Save to save your template.

    When you save a new template page or you save an existing page as a template, Dreamweaver automatically adds the .dwt extension and saves the file into the Templates folder.

If you save a template before you specify any editable regions, Dreamweaver gives you a warning because templates aren’t useful without editable regions. You don’t have to create editable regions before you save a template, but you can’t make any changes in any pages created from a template until you create one or more editable regions. You can always go back and add editable regions later.

Adobe added a new Templates Insert panel in Dreamweaver CC. You can use this new panel instead of the menu items when working with templates. The features work the same: Just click the corresponding icon in the Templates Insert panel, such as the Editable Region icon.