adobe dreamweaver cs5 on demand part 69 potx

18 18 What You’ll Do Introduce Templates Create a Template Open a Template Define Editable Regions Define Editable Attributes Create Repeating Regions Create Optional Regions Create InCo

Creating Templates

Introduction

A template is a common structure of a Web site design

Usually Web sites follow a standard structure, such as a

header, a navigation bar and a footer that are common to all

your pages Now, imagine that your site has 50 pages If you

need to make one small change, for example adding a new

link, you would need to go to each of those pages and

change it manually But using a template you only need to

change it in the template and all the pages will be updated

automatically

Think of Dreamweaver templates as really large library

items Instead of occupying a small part of a page, templates

control all areas of a page that are to be kept consistent

throughout the majority of a Web site Once created, areas

within the template are then made editable so new content

can be inserted from page to page

If nothing else, templates are a fantastic timesaving tool

They allow you to create pages that share the same design

but contain different content, and if you modify a template

document, you immediately update the design of all pages

that were created from that template

In this chapter, you'll learn how templates can streamline

your workflow

18

18

What You’ll Do

Introduce Templates Create a Template Open a Template Define Editable Regions Define Editable Attributes Create Repeating Regions Create Optional Regions Create InContext Editing Editable Regions

Create InContext Editing Repeating Regions

Create Nested Templates Create a Web Page from a Nested Template

Create a Web Page from a Custom Template

Update a Template Attach or Detach a Template Import XML into a Template Export Template Data as XML

Think of templates as really big library items

For example, an entire Web page can be

saved as a template You could have the

navi-gation built into the page; along with editable

areas for text or graphics Let's face it; large

and complex Web sites have many pages that

have a similar look and feel Think of a catalog

Web site where you would click to view items

in the catalog Let's say that the site has

hun-dreds of items, and the only difference

between the pages is the description of the

item and an image Instead of creating

hun-dreds of pages from scratch, you need only

create one template and have editable areas

for the description and image

Templates can be comprised of virtually

any Web design components They can

include graphics, images, CSS, Flash, just

about anything that you would place on a

normal Web page Since a template will

con-tain areas that are editable, and areas that are

locked, most templates are designed using a

series of tables, or AP elements As the

designer of the template, you decide what

areas of the template are editable and what

areas are locked out Of course, this means

lit-tle to your visitors; locked and editable areas

only define to the Web designer what areas

can be changed and what areas remain the

same

For example, you create a Web page that

emulates a newsletter The navigation, footers,

and the e-newspaper flag remain the same;

however, there are areas of the page that you

want to update with the latest news When

you design the template, the navigation,

foot-ers, and flag are locked, and the areas for the

news are editable

Templates don't control what visitors do

with the page; they control how other

design-the designer assigned to change design-the data can only access and change the areas you mark

as editable This prevents the accidental (or purposeful) changing of the page, except where you as the Template designer decide

Editable Regions

If you're a regular template user (and you should be), you'll find a lot of flexibility as you create editable areas for a template page

There are four types of editable areas on a template page: editable region, repeating region, optional region, and editable tag attributes Editable regions are unlocked areas that you can add content in a template page

Repeating regions are unlocked areas where you can add or delete copies of the repeating regions in a template page There are two types of repeating regions: region and table

With a table region, for example, you can increase or decrease the rows in a table while keeping the table structure intact Optional regions are unlocked areas that allow you to show or hide content in a template page In addition to using editable regions, you can also use editable tag attributes to modify spe-cific attributes related to an element You can make some attributes editable while leaving other attributes locked

The Internet is full of sites containing pre-designed templates Some are quite elabo-rate You can find templates for entire sites, such as shopping carts, and sites complete with Paypal pages Listed here are a few of the sites that carry templates:

http://allwebcodesign.com/

http://www.dreamweaver-templates.org/

http://www.adobe.com/products/dreamweaver

Introducing Templates

Creating a Template

Create a Template

Create a document (including

editable regions) that you want to

use as a template

Click the File menu, and then click

Save As Template.

Save the template using the

following options:

◆ Site Choose the site to save

the template (default: working

site)

◆ Existing Templates Choose to

save as an existing template

◆ Description Enter a meaningful

description of the template

◆ Save As Enter a file name for

the template

Click Save.

Click Yes as necessary to update

the site with any needed files

Dreamweaver saves the template

file with the dwt extension in the

default Templates folder within the

local root site folder

NOTE If you attempt to close a

template file without an editable

region, Dreamweaver warns you

5

4

3

2

1

Templates allow you to create pages that share the same design but different content, and if you modify a template document, you immedi-ately update the design of all pages that were created from that tem-plate One of the best ways to create a template is to actually design a Web page, place everything where you want it to be (navigation, text areas, image areas, footers, possibly a library item, etc.), and then con-vert (save) the page as a template Templates contain editable and locked areas, so they are typically enclosed within a table structure or

AP elements When you create a template, Dreamweaver saves the file

by default to the Templates folder for your site and manages any links,

so updates are properly maintained

4

3

Checking Template Syntax

When you insert a region in a template, Dreamweaver uses HTML comment tags, known as template tags, to specify the region in the code to make sure it remains valid HTML For example, <! TemplateBeginEditable name =” .” > There are a few important rule to be aware of: (1) white space can be any length; (2) attributes can be in any order; (3) comment and attribute names are case sensi-tive; and (4) all attributes need to be in quotation marks, either single

or double quotes When you save a template, Dreamweaver checks the template syntax However, you can also check it whenever you want Open the template you want to check, click the Modify menu, point to Templates, and then click Check Template Syntax If there are problems, an error message appears, describing the problems

For Your Information

Opening a Template

Open a Template File Using the

Assets Panel

Click the Window menu, and then

click Assets to display the Assets

panel

Click the Templates category.

Open the template using one of the

following options:

◆ Select the template in the

Names window, and then click

the Edit button in the Assets

panel

◆ Double click on the name of the

template in the Assets panel

3

2

1

After you create and save a template, you can open it using several dif-ferent methods in Dreamweaver You can use the Assets panel or the Open dialog box When you save a template file, the default location is typically in the Templates folder of the local root site folder When you use the Assets panel to open a template, the default location automati-cally appears displaying the current templates When you use the Open dialog box, you need to navigate to the Templates folder If you have recently saved or opened a template, you can also open it again quickly using the Open Recent submenu on the File menu When you open a template file, the title bar in the Document window contains the word

<<Template>> followed by the name of the template along with the dwt file extension for templates

1

Edit button

3 2

See Also

See “Creating a Web Page from a

Blank Template” on page 22 for

infor-Did You Know?

You can create a blank template from

the Assets panel Open the Assets

panel, click the Templates category,

click the New Template button, type a

name, and then press Enter (Win) or

Return (Mac)

Open a Template File Using the

Open Dialog Box

Click the File menu, and then click

Open.

TIMESAVER Press Ctrl+O

(Win) or A+O (Mac)

Click the Files Of Type list arrow

(Win) or Popup (Mac), and then

click Template Files (*.dwt).

Locate and select the template file

you want to open

The default location is typically in

the Templates folder of the local

root site folder

Click Open.

4

3

2

1

2

4 3

Did You Know?

You can open the template file

attached to the current page file Open

the Web page based on the template

you want to open, click the Modify

menu, point to Templates, and then

click Open Attached Template

You can rename a template Open the

Assets panel, click the Templates

cate-gory, click the name of the template,

click the name again, enter a new

name, and then press Enter (Win) or

Return (Mac)

You can delete a template Open the

Assets panel, click the Templates

cate-gory, click the template you want to

delete, and then click the Delete button

in the Assets panel

Defining Editable

Regions

Define Editable Regions

Open the template you want to add

editable regions

Select the content (including

tables, table cells, or AP elements)

in the template you want to make

editable, or click to place the

insertion point

NOTE If the area is going to

contain text, make sure you apply

any formatting options, using

HTML or CSS to the area before

making it an editable area

Click the Insert menu, point to

Template Objects, and then click

Editable Region.

The New Editable Region dialog

box opens

Enter a unique name for the new

region

Click OK.

The editable region appears with

the name in the tab

5

4

3

2

1

When you first create a template, the entire page is locked and uned-itable to the designer Without eduned-itable areas, you would not be able to make any changes to the page To correct this problem, you need to create editable areas in the template Editable areas are for the design-ers who want to use templates to create Web pages Web pages based

on a template enable Dreamweaver users to edit parts of a Web page within the editable regions without the risk of accidentally changing the locked regions Editable regions in Design view appear with a rectan-gular outline and a small tab in the upper-left corner with the name of the region You can click the tab to select the editable region

4

5

Did You Know?

You can remove or relock an editable

region Select the area you want to

change, click the Modify menu, point to

Templates, and then click Remove

Defining Editable

Attributes

Define Editable Attributes

Open the template you want to

define editable attributes

Select the tag or object that you

want to make editable

Click the Modify menu, point to

Templates, and then click Make

Attribute Editable.

Select from the following options

in the Editable Tag Attributes

dialog box:

◆ Attribute Select the attribute,

or click the Add button and

enter the attribute manually

◆ Make Attribute Editable Select

to make this attribute editable

◆ Label Enter a unique name for

the editable attribute

◆ Type Select a type from the

available options: Text, URL,

Color, True/False, or Number

◆ Default Enter the initial default

value for the attribute

Click OK.

5

4

3

2

1

In addition to making regions of a page editable, you can also make specific HTML tag attributes editable (for example, the background color of the page) This combination not only gives you control over a general area such as a table, individual cell, or an AP element; you now have control over specific elements You can use this option to allow contributors to the Web page the ability to duplicate the region For example, when creating a table that holds customer comments, the contributor needs the ability to add more rows to the table In addition, you can also create template variables, such as boolean, text, number, color or URL, for use in template expressions

5

4

Did You Know?

You can modify the properties of an

editable attribute Click the Modify

menu, click Template Properties, select

the attribute or variable you want,

make any changes, and then click OK