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
Requirements: Basic knowledge of Dreamweaver 3 or 4. An existing page layout.
This tutorial was made using Windows 2000 professional.
Index:
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).
(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.
(S.02)
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.
(S.03)
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
document.
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
 developerWorks - FREE Tools!
|
Join this Rational Talks to You teleconference, featuring Paul Boustany and Mark Krasovich, to speak to the experts about becoming a Rational ClearCase power user. Get a chance to ask your questions and learn tips and tricks for using Rational ClearCase in Agile development
FREE! Go There Now!
|
|
|
|
As businesses grow increasingly dependent upon Web applications to provide services to customers, employees and partners, these complex applications become more difficult to secure. Although traditional security solutions protect Internet infrastructure layers, they do not guard against HTTP and HTML attacks. Many organizations that conduct security testing still deploy applications that allow attackers to manipulate their logic and wreak havoc on their business. To mitigate this risk, development and delivery teams must address Web application security throughout the lifecycle, addressing the many layers detailed in this paper.
FREE! Go There Now!
|
|
|
|
Learn to enable users to both rate existing animations and to combine existing animations into new snippets. This is the third in a series of three tutorials that chronicle the building of a site that enables collaborative discussion and animation building using Domino and OpenLaszlo.
FREE! Go There Now!
|
|
|
|
Visit IBM developerWorks to download a free trial version of IBM Rational Business Developer V7.1. Rational Business Developer offers rapid and simplified development of business applications and services through Enterprise Generation Language (EGL) tools, generating Java or mainframe solutions while shielding developers from technical complexities.
FREE! Go There Now!
|
|
|
|
Join this webcast to see how IBM Data Studio Developer and pureQuery can take the pain out of Java data access. uApplications developed using both Java and SQL have become a common requirement. Database connectivity using Java Database Connectivity (JDBC) to create an application is a multi-step tedious process, and tooling that covers both SQL and Java has been unavailable, until now. IBM Data Studio introduces the pureQuery platform: a high-performance, Java data access platform focused on simplifying the tasks of developing, managing, and optimizing database applications and services.
FREE! Go There Now!
|
|
|
|
Learn how to implement a build management system that uses and extends your existing automation technologies. This tutorial shows, step-by-step, how to install and configure IBM Rational Build Forge to manage builds for Jakarta Tomcat from source code.
FREE! Go There Now!
|
|
|
|
Portfolio Management is about effectively managing portfolio value by aligning portfolio investments with business goals. This complimentary e-kit provides a collection of materials that can help you understand how IBM Rational enables and automates best practices for improved governance and clear visibility into portfolio and project performance across the entire IT project lifecycle.
FREE! Go There Now!
|
|
|
|
Join this Rational Talks to You teleconference on December 6 at 1:00 pm ET to participate in an agile application development discussion and get your questions answered on using IBM Rational Method Composer in a distributed environment.Get your questions answered!
FREE! Go There Now!
|
|
|
|
Regression testing -- in which code is thoroughly tested to ensure that changes have not produced unexpected results -- is an important part of any development process. But many testing environments neglect the terminal-based applications that still form the backbone of many industries. In this tutorial, you'll learn how the Rational Functional Tester Extension for Terminal-Based Applications works with other Rational Functional Tester to help test terminal-based applications quickly and easily.
FREE! Go There Now!
|
|
|
|
The Eclipse community is constantly working to extend Eclipse's functionality. In this webcast, learn about some of the most important and feature-rich projects under development. From multi-language support to plug-in development, tune in to see what Eclipse is capable of now.
FREE! Go There Now!
|
|
|
|
All FREE IBM® developerWorks Tools!
|
