Web Development

  Homes arrow Web Development arrow How to make site template using Macromedia Dr...
 Webmaster Tools
Base64 Encoding 
Browser Settings 
CSS Coder 
CSS Navigation Menu 
Datetime Converter 
DHTML Tooltip 
Dig Utility 
DNS Utility 
Dropdown Menu 
Fetch Content 
Fetch Header 
Floating Layer 
htaccess Generator 
HTML Encoder 
HTML Entities 
IP Convert 
Meta Tags 
Password Encryption
Password Strength
Pattern Extractor 
Ping Utility 
Pop-Up Window 
Regex Extractor 
Regex Match 
Scrollbar Color 
Source Viewer 
Syntax Highlighting 
URL Encoding 
Web Safe Colors 
Forums Sitemap 
Weekly Newsletter
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Contact Us 
Site Map 
Privacy Policy 
  >>> SIGN UP!  
  Lost Password? 

How to make site template using Macromedia Dreamweaver
By: Developer Shed
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 4

    Table of Contents:

    Rate this Article: Poor Best 
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article




    Introduction: This tutorial demonstrates how to make templates using Dreamweaver 4. You can use templates to create web pages that have a common structure and appearance. Templates are useful when you want to make sure that all of the pages in a site share certain characteristics.

    Once you apply a template to a group of pages, you can change information on the group of pages by editing the template and then reapplying it to those pages. While elements unique to each page (such as text or graphics) remain unchanged, common template elements (such as menu bars and links) are updated on all of the pages that use the template.

    Difficulty: Medium

    Basic knowledge of Dreamweaver 3 or 4. An existing page layout.

    This tutorial was made using Windows 2000 professional.


    1. Define your site.
    2. Create a template from an existing page.
    3. Modify your Template.
    4. Create a new page from Template.
    5. Editing a template-based page.

    1. Define your site.

    When you define a local site, you tell Dreamweaver where you plan to store all the files for a particular site. To work effectively in Dreamweaver, always define a local site for each Web site you create.

    a. Start up Dreamweaver and open your existing page.

    b. In the top menu choose Site > New Site.

    c. The Site Definition window will now open the Site Definition window (S.01).


    d. Type the name of your site in the Site Name field and locate your Local Root Folder by pressing the folder icon to the right of the Local Root Folder field.
    (Note: The Root Folder is the folder, which contains your existing page.)

    e. (Note: This step is optional) In HTTP Address field type in the URL to your homepage located on the Internet.

    f. After you have done that press the OK button.

    2. Create a template from an existing page.

    In this section you will learn how to create a template from an existing page and use it to create a new page.

    a. In the Site window's Local Folder list, double-click the icon for "your web page.html" to open the file.

    b. Choose File > Save as Template.
    At that point the Save As Template window (S.02) will appear.


    c. In the Save As field, type an appropriate name for the template. (I typed main)
    And click save.

    3. Modify your Template.

    At this point, the new template is the same as the page from which you saved the template. A template contains both locked and editable regions. Locked regions can be edited only inside the template itself. Editable regions are placeholders for content that is unique to each page the template is applied to. In your template the Title of the page is the only thing at the moment that is editable.

    Your first step is to create editable regions in the template.

    a. Select the table you want to make editable.
    (Note: Select the area that contains the content, which is unique for each page)

    b. Choose Modify > Templates > New Editable Region.
    The New Editable Region dialog box (S.03) appears.

    c. In the Name field, type e.g. "text area 1" as the name for this region of the template.


    d. Choose OK.

    A template region is created. Notice the tab that contains the template region's name. The placeholder is also surrounded by a light-blue line that identifies the boundaries of the editable area.

    e. Repeat step a - d for each table you want to be editable.
    (Note: Be sure to use different names for each editable region, otherwise you could end up with having problems)

    f. When you are done making all your editable regions choose File > Save Template As.

    4. Create a new page from Template.

    Now that you've set the editable regions in your template, you'll use the template to create a new page.

    a. Choose File > New from Template to open a new

    b. In the Select Template dialog box's Templates list, select
    your template (In my case "main"), then click Select to select the template you want to apply to the new page.

    The template is applied to the new document.
    (Note: If you move the mouse pointer to a non editable region of this template, such as the logo or navigation button areas, the mouse pointer changes to indicate that you can't acces sthe locked region.)

    c. Save your document, and name the file.

    5. Editing a template-based page.

    Now you'll update the page you just made, updating the editable regions with images and text that refer to it.

    a. Select one of the editable regions you want to edit. Type in the text, or insert the image you want to use and do the same thing with the rest of your editable regions.

    b. Then save your file.

    Now you should be able to create your web site by using templates.

    This web tutorial was submitted by www.b-man.dk


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    More Web Development Articles
    More By Developer Shed



    - On Page SEO for New Domains
    - Improve Your Site`s Speed
    - Safari Books Online Review
    - Creating an Estore From the Ground Up
    - Most Common SEO Mistakes Developers Make
    - Making the Most of Your Titles and Meta Desc...
    - Five Ways Using Flash Can Damage Your Site
    - A Web Designer`s Guide to Colors
    - Use Webstarts to Create a Free Site
    - More Than Just Looks. How Your Web Design C...
    - How to Design Content Pages
    - Mint Review
    - Make Your WordPress Website Look Professional
    - How to Create a Mobile Web Site
    - Meta Tags: Still Useful?

    Developer Shed Affiliates


    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap