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!
|
Informix Dynamic Server (IDS) Express Edition offers outstanding online transaction processing (OLTP) database performance, while helping to simplify and automate many of the tasks associated with deploying databases for small business applications. IDS 11 further extends the ease of management and applications integration with the Admin API and Scheduler, high availability with Continuous Log Restore for backup server recovery in case of a primary server failure, and column level encryption to protect personal and company private data.
FREE! Go There Now!
|
|
|
|
Discover how IBM Rational AppScan Standard Edition can help you detext vulnerabilities in your web applications in the Web Application Security eKit. IBM Rational AppScan is a leading suite of automated web application security solutions that scan and test for common Web application vulnerabilities. The new Web Application Security eKit provides you with valuable resources, including white papers, demos, and additional information on the benefits of testing your Web applications.
FREE! Go There Now!
|
|
|
|
<a href="http://zeus.developershed.com/shonuff.php?blackbird=3853&zoneid=442&source=&dest=http%3A%2F%2Fwww.ibm.com%2Fdeveloperworks%2Fspaces%2Fjazz%3FS_TACT%3D105AGY31%26S_CMP%3DDEVSHED&ismap="><img src="http://images.devshed.com/corp/img/news/jazz01.gif" alt="developerWorks Jazz space" align="left"></a>You've heard the buzz about Jazz... want to know more about it from a developer's perspective? Check out the Jazz space on developerWorks. This space is an up-to-date resource for developers, including technical information about Jazz and products built on Jazz, like Rational Team Concert Express. The Jazz space includes content from a wide variety of sources, including links, feeds, and comments from experts.
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!
|
|
|
|
Viper 2 brings a great value to developer communities including SQL, XML, PHP, Ruby, .NET and Java. You probably already know that DB2 Express-C is free for developers to develop, deploy and distribute. Viper 2 provides a variety of means that help move your application from the development stage to deployment more rapidly. This webcast shows how to best utilize the latest tools available for developing DB2 applications.
FREE! Go There Now!
|
|
|
|
Try the latest version of IBM Rational Manual Tester V7.0.1 by downloading a free trial from IBM developerWorks. This manual test authoring and execution tool promotes test step reuse to reduce the impact of software change on testers and business analysts and addresses the needs of teams performing at least a portion of their testing manually.
FREE! Go There Now!
|
|
|
|
Attend this launch webcast with Scott Hebner, Vice President of IBM Rational Marketing and Strategy, where he will overview Rational’s new offerings and programs to help customers accelerate software innovation on System z. He will discuss how these solutions help organizations extend their core business processes toward modern architectures such as SOA and web technologies to deliver business improvements that stand the test of time.
FREE! Go There Now!
|
|
|
|
This Fall, IBM Rational talks to you directly through a special teleconference series giving you access to the best minds in IBM Rational - product experts and market thought leaders who will answer your questions during these pre-scheduled telephone conference calls. Register today!
FREE! Go There Now!
|
|
|
|
As organizations integrate software into every aspect of business, they are constantly pressured to deliver faster, better, and cheaper results. Unfortunately, a “dis-integrated” software delivery approach reduces returns while increasing costs. This IBM Rational White Paper shows how Integrated Requirements Management aligns organizations around maximizing value and keeping pace with change.
FREE! Go There Now!
|
|
|
|
All FREE IBM® developerWorks Tools!
|
