Web design Linkbut spacePrint design Linkbut spaceLogo Design Linkbut spaceTemplates linkbut spaceWeb Hosting linkbut spaceWeb Marketing linkbut spacetutorials linkbut spaceTips and Articles linkbut spacePartners linkbut gap
blue-box image-1 image-2 image-3
spaces

maa services

space

Dreamweaver Tutorials

» Dreamweaver Tips

» Define a Site in Dreamweaver

» Dreamweaver Behaviors

» Pop-Up Windows

» Jump Menus

» Play Sound

» Layers

» Show Hide Layers

» Dreamweaver Web Photo Album

» Dreamweaver Image Maps

» Using Templates in Dreamweaver

» Server Side Includes

» Making your site Live!

» Dreamweaver Form Tips

» Flash Text Rollover

» CSS Styles Tutorial

» CSS Text Rollovers

» Links without Underline

» Anchors and Mailto

 

» Fireworks Effects and Tutorials

» Flash Tutorials

» Photoshop Tutorials

 

Tips and Articles
» Advertising Ideas
» Templates Creating Ideas and Tips
» Dedicated Server Tips
» Domain Name Tips
» Ecommerce Tips
» Hosting Tips

» Logo Design Concept

» Emal Marketing

» Offset Printing Tips

» Website Design Tips

» Website Promotion

» Affiliated Program Tips

 

 

Maa Web Design
» Brochure Website
» E-Commerce Website
» Flash Website
» Web Template Customization
» CMS Development
» E-News Letter

 

Maa Print Design
» Press Advert Design
» Banner Design
» Brochures Design

» Copywriting Services
» Direct Mail Design
» Flyers Design
» Illustration Works
» Invitations Design
» Menu Design
» News Letter Design

» Packaging Design

» Posters Design
» Presentation Folders
» Signage Design

 

Maa Identity Design
» Logo Design
» Stationary Design
» Corporate Identity Design
» Logo Template Customization

 

Maa Templates
» Web Templates
» PSD Templates

» Low Cost PSD Templates
» Logo Templates
» Stationary Templates
» PowerPoint Templates
» Print Temples

 

Maa Web Hosting
» Domain Registration
» Web Site hosting
» Email
» Dedicated Server

 

Maa Web Marketing
» Search Engine Submission
» Search Engine Optimizing
» E-mail Marketing

» Website Content Writing

» E-mail Promotional Newsletter
» Live Chat Agent

 

space
Creating and Using Templates in DreamweaverMX

A tutorial on using Templates in Dreamweaver

 

What is a Template?


Most of the web pages that uses a common structure called a template.
Generally web sites follows a standard structure, that contain a header, a navigation bar and a footer which is common to all pages. If your site has 30 pages and if you want to make a small change, you will have to make changes in each of those 30 pages manually. Instead, if you use a template you only need to make changes in the template and all other pages get updated automatically. Following steps will help you to learn how to use templates in Dreamweaver.

Creating a Template in Dreamweaver


Step 1: Make a web page with basic structure of the site. This should be common to most of the pages in your site. Note: Don't put matchless content in this page.

 

Step 2: Once you created the structure go to File and click on Save As Template, and save it as a template.

 

Step 3: Notice the blue bar on top shows <<Template>>. Now you are in the Template. The template is automatically saved under a folder called templates.

 

Note: You can create as many templates as you like. If you are using different layouts for different sections of your site you can use different templates for each of the sections.

 

Step 4: You can make parts of the template editable so that you can put content and add information that is unique to parts of the site. The main content of the pages will keep changing, so make that area editable. For e.g. the white space in the middle of the site is clearly an editable area, as this content is unique to each page.

 

To make an area editable, locate your cursor on that area, then go to Modify/Template/New Editable Region, give a suitable name and you will notice a light blue with the name of the editable area in your cursor's location.

You can continue to make changes, try different layouts, add new stuff etc. in the Template.

 

 

Using a Template in Dreamweaver


Once you have made the Template, you need to make sure that all the pages are using the Template so that when you making changes in the Template the pages using the Template are getting updated automatically. Follow the steps to Apply a template to a page.

 

 

Step 1: Once you created a page which will have the same structure as the template then you can go to Modify/Template/Apply Template to page

 

Step 2: Once you applied the specified template to the page you can see a window 'Choose editable region for orphaned content', choose the editable region and click OK. You can see that the template is in yellow and cannot be edited. The editable region is the only region is editable, which specified in the template.

 

Note: You can apply the template before or after writing any content. But you have to choose an editable region if you need to do after writing the content.

 

Updating a Template in Dreamweaver


Once you have made the template and applied it to all the necessary pages, the last step you need to know is how to update a template. This is the magic of using Templates.

 

If you need to make any changes in the basic structure of the site, you have to do it in the Template. So you can make the changes and save it. If you applied the Template to any of your site pages then a message window will ask you to 'Update Templates used in the following files'. You must click on Update so that the Template will get updated.

 

 

Back to Tutorials Home Page


arrow

Maa Design Services
MAA offers high-quality website design services at affordable prices and fast turnaround time. We provide ready-made & custom website design solutions to global clients from London, UK. Take a look at our client testimonials from clients all over the world. Contact us today to get started on your website!

 

 

arrow

Client Testimonials

"If you want the QUICKEST service, the BEST web design, Logo and the FRIENDLIEST communication, DezineHub is the ONLY business to turn to. They far exceeded my expectations! I give them the HIGHEST recommendation! "
Dilip, Chemmen Ltd UK

 

space

packages

space

top

arrowMaa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>

bottam

space

top

arrowMaa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>

bottam

space

top

arrowMaa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>

bottam

space

top

arrowMaa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>

bottam

space

top

arrowMaa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>

bottam

space

top

arrowMaa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>

bottam

space

top

arrowMaa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>

bottam

space

spaces
bottam-left
Home | About | Services | Package | Portfolio | Testimonials | Free Downloads | Free Tutorials | Jobs | Privacy Policy | Terms & Conditions | Contact
Copyright © 2005 Maagraphics.com - All rights reserved. Site Designed and Developed by MAA Design Ltd. London, UK
bottam-right

Design services : Brochure Website | E-Commerce Website | Flash Website | Web Template Customization | CMS Development | E-News Letter | AD Design
Brochures Design | Flayers Design | News Letter Design | Posters Design | Invitations Design | Menu Design | Banner Design | Logo Design | Stationary Design
Corporate Identity Design | Animated Logo Design | Web Templates | 3D logo Design | PSD Templates | Logo Templates | Stationary Templates | Print Templates
PowerPoint Templates| Domain Registration | WebSite hosting | Email|Dedicated Server | SEO | E-mail Marketing | Live Chat Agent | Site Map