close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Creating & applying Dreamweaver templates

Tutorial created by Team WebAssist

Categories: Design Extender, Design, Dreamweaver

rating

Dreamweaver templates allow you to have a consistent look and feel on all the pages in your site. Using a Dreamweaver template with your site allows you to easily modify and update all the pages in your site at once.

This tutorial shows you how to create a Dreamweaver template based on a page you have created and how you can apply your template to other pages in your site.

arrow downWhat you need to start

Dreamweaver 8 or newer

arrow downCreate your template

A Dreamweaver template can be generated from any HTML or PHP page. Once you have created the design of your site, whether using Design Extender's CSS tools or manually in Dreamweaver, follow these steps to create your template.

Or instead of creating a template, you can use one of our free Dreamweaver templates, create a folder in the root of your site called Templates and place it there. Then you can skip down to the next section, Define editable regions.

  1. In Dreamweaver, open the file that contains your design.
  2. If you intend to create PHP pages out of this template, but your file currently has a .htm or .html extension, you should choose File > Save As, and choose PHP to change the extension.
    If you don’t need to change the file extension, skip to the next step.
  3. Go to File > Save As Template.
  4. In the Save As Template window, enter a name for your new template.


  5. Click Save.


The template file you just saved will be stored in the Templates directory of the site you have open in the Files panel.

arrow downDefine editable regions

Editable regions are applied to various locations of your template to specify where content can be inserted.

You should only create editable regions for areas where content will change on a per page basis. For example, the header is likely to be consistent throughout your entire site, and should not be an editable region. Whereas, the content area of your page should be different for each page, and would require an editable region.

  1. Place your cursor within the area where you wish to create your editable regions.
  2. Then, from the Template Objects option under the Insert menu, select Editable Region.
  3. In the Name field of the New Editable Region window, enter a name for the editable region.


  4. Click OK.


An editable region is now displayed on your page defined by a blue border.

The name of each editable region you create is entered as placeholder text within the region. This text is overwritten by any content that exists on the page you apply this template to.

arrow downApply your Dreamweaver template

Once you have created your template and editable regions, you can apply it to any page in your site.

  1. Open the first page of your site.
  2. From the Assets tab, choose the Templates option.
  3. Right-click the .dwt file that you are using for your site.
  4. Choose Apply.


  5. Select the appropriate editable regions for each portion of your page.
  6. Click OK.


Repeat this process for each page in your website.

arrow downCreate a new file from a template

When creating a new page for your website you want based on the template, you should always create your new page from the template you are using.

  1. From the Assets panel, right-click on your template and choose New from Template.
    In newer versions of Dreamweaver, use the main Dreamweaver menu to click File > New, then select Page from Template.


  2. When the page is loaded in Dreamweaver, press Ctrl (Cmd) + S to save the page.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating

BeanPoleFatty: 1 Year, 3 Months, 3 Weeks, 7 Hours, 7 Minutes ago

Can you use repeating region in your dwt file if I was not using a dynamic website or is it just editable regions when use convert to a theme?

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.