Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

18.3 Define Editable Regions

Your next project is to specify which parts of your template are locked, and which are
editable. By default, everything on a page is locked. After all, the main reason to use
templates is to maintain a consistent, unchanging design and structure between pages.
To make a template usable, you must define the area or areas you can change.

FREQUENTLY ASKED QUESTION
The Broken-Link Blues

Why aren't the links in my templates working?

When you created the link, you probably typed a path into
the Property inspector's Link fielda recipe for heartbreak.
Instead, always select the target Web page for a link by
clicking the folder icon in the Property
inspector, or by pressing Ctrl+L (-L).
In other words, when adding links to a
template, always link to pages within the
site by browsing to the desired file.

Dreamweaver saves templates in the Templates
folder inside the local root folder;
all relative links need to be relative to this
location. (Absolute links, like those to other
Web sites, aren't a problem; see Section 4.1
to learn the difference.) The reason you
should browse to, rather than type in, your
links is so that Dreamweaver can create a
proper relative link.

Imagine this situation: You create a template for your classi
fied ads. You store all classified ads for April 2001 inside a
series of folders like this: classifieds2001april, as shown in the site diagram here.

A link from a page in the april folder to the home page would
follow the path marked 1 here. So when you create a link in
your template, you might create a link to the home page by
typing the path ../../../indexl.

That's a logical choice if you're thinking
about the page (in the april folder) you'll
create from the templatebut it won't
work. Dreamweaver stores templates in
the Templates folder, so the correct path
would be path 2, or ../indexl. When
you create a new page based on the
template and save it in the april folder,
Dreamweaver, in its wisdom, automatically
rewrites all paths in the page so that the
links function correctly.

The beauty of Dreamweaver is that you
don't have to understand how all this
works. Just remember to use relative links in your templates
and create them by clicking the folder icon in the Property
inspector.

The Templates category of the Assets panel
lists the name, file size, and location of each
template in the current local site. The Apply
button applies a template to the current open
Web page. The Refresh Site List button updates
the list of templates. (In general, Dreamweaver
does a very good job of keeping the list up to
date, so you'll rarely need this button.) The
New Template button creates a new blank template
in the Templates folder. Select a template
from the list and click the Edit Template button
to open the template for editing.

This page is based on a template
called Horoscope, as you can tell
from the little tab in the document
window's upper-right corner.
You can modify editable regions,
which are labeled with small
tabs. In this example, the editable
regions are called horoscope and
signImage. An additional editable
region appears within a repeating
regionlabeled repeatCelebrity
which lets you duplicate editable
regions to form a list of items. The
title of any page created from a
template is also editable. All other
parts of the page are locked; you
can only make changes to the
original template file.

18.3.1 Adding a Basic Editable Region

To add an editable region to a template, start by selecting the part of the page you
want to make changeable. You can incorporate anything in the document window
(any HTML between the <body> tags).

NOTE

The <head> of a page is always editable. You can add Custom Style Sheets, JavaScript and meta
tag information freely to any page created from a template. In fact, there's no way to prevent anyone
from messing around with the page's head.

Drag across your page to select the elements you wish to make editable, or, for greater
precision, use the tag selector (Section 1.2.2) to
make sure you select the exact HTML you want.

Now tell Dreamweaver that the selected elements are to be editable. You can use any
of these techniques:

In the Common tab of the Insert bar ( Figure 18-2),
select Editable Region from the Template menu.

Choose InsertTemplate ObjectsEditable Region.

Press Ctrl+Alt+V (Option--V).

Right-click (Control-click) the selection and choose TemplatesNew Editable
Region from the contextual menu.

POWER USERS' CLINIC
Under the Hood of Templates

Dreamweaver saves templates as HTML files in the Templates
folder inside your current local site folder (see Chapter 14 for information on local sites).
Each template bears the file name
extension .dwt to distinguish it from regular Web pages.

The program treats files in the Templates folder differently
than normal Web pages, so don't save anything but .dwt
files there. In addition, since Dreamweaver expects the
Templates folder to be in the local root folder of your site,
don't move the Templates folder, or change its name in any
way (don't even change the capital T in Templates, even if
you're a low-key type of person). If you do, your templates
won't work.

As with Library items, Dreamweaver uses HTML comment
tags to indicate the name of the template. If you inspect a
template-based document's HTML code (see Chapter 10),
you'll see that, immediately following the opening <html>
tag, Dreamweaver inserts a comment tag with the text InstanceBegin
template followed by the location and name of
the template. Additional comment tags indicate areas of the
page that you can modify, plus special template features like
template parameters used for optional regions. For instance,
the title of a page based on a template is always editable; its
comment tag might look like this:

<!-- InstanceBeginEditable name="doctitle" - <title>My New Page</title> 
<!-- InstanceEndEditable ->

The first comment indicates the editable region's beginning
and also includes the editable region's name. When editing
pages based on the template, you can change only the HTML
between these comment tags. Everything else on the page is
locked, even when you're working in Code view.

When the New Editable Region dialog box appears, type a name for the region (you
can't use the same name twice) and click OK. You return to your template, where
the name you gave the region appears in a small blue tab above the editable region
(see Figure 18-5).

If you use tables to lay out your pages (see Chapter 7), you'll often assign one table cell as the main
area to hold the primary content of the page. For example, in the pages shown in Figure 18-1, the Frequently
Asked Question and its answer appear in a single cell on the page. This cell makes a perfect editable region for
a template. In the tag selector, just click the <td> tag associated with that cell and use any of the techniques
discussed here to convert the contents of that cell into an editable region.

If you use CSS, on the other hand, you might create a separate <div> tag (Section 8.3.1.6) for the main content
area. In this case, select just the contents of the <div>, not the tag itself. If you turn the <div> tag into an
editable region, it's possible for someone modifying the page later to delete the tag entirely, which could
wreak untold havoc on your CSS-based layout.

Unfortunately, selecting all of the text inside a <div> frequently selects the <div> tag, too. You
may need to go into Code view (Section 10.2) and make sure that you've selected
only the content inside the tag.

FREQUENTLY ASKED QUESTION
Hindered by Highlighting

I'm distracted by the tabs and background colors that
Dreamweaver uses to indicate Library items and Templates.
How do I get rid of them?

When you use Library
items or Templates, you'll
see blue tabs and yellow
backgrounds to indicate
editable regions and
Library items. Although
these visual cues don't
appear in a Web browser,
they can still make your
page harder to read while
working in Dreamweaver.
Fortunately, you can alter
the background color of
these items and even turn
highlighting off altogether.

Choose EditPreferences or press Ctrl+U (-U). In the
Preferences Category list, click Highlighting. To change the background color for editable regions, locked regions, and
Library items, use the color box (see
Section 1.3.3) or type in a hexadecimal color value. To remove the highlighting,
turn off the Show box next to the appropriate item.

Oftentimes, it's useful to
keep highlighting on to
help you keep track of
Library items and editable
regions. If you want to turn
off highlighting temporarily,
simply choose View
Visual AidsInvisible Elements,
or use the keyboard
shortcut Ctrl+Shift+I (Shift--
I) to toggle these visual cues off and on. This technique
has the added benefit of hiding table borders, layer borders,
and image maps, as well as other invisible elements.

You may find that a single editable region is all you needfor example, a single table
cell containing the text for a product review. However, if you need to edit multiple
areas of a Web page, just add more editable regions to the template. For instance,
when you create a template for an employee page, you might create editable regions
for the employee's name, telephone number, and photo.

If you change your mind and want to lock a region again, select the editable region
and choose ModifyTemplatesRemove Template Markup. Dreamweaver removes
the code that makes the region editable. You can do the same thing with other types
of template regions, like repeating and optional regions.

A repeating region lets page authors add
multiple selections of repeating information.
Top: In this example, the template has
one repeating region, labeled repeatCelebrity
(circled).

Bottom: A complete page based on this
template includes three repeated editable
regions (circled in the lower right of the
page). If another page requires more
celebrity listings, you could easily add
additional rows to each list. However, the
template still controls the basic design.
Changing the star graphic of the repeating
region (an uneditable part of the region) in
the template page automatically changes
the same elements in all pages created
from the template. From a design perspective,
this strategy also means that page
authors can't tamper with the design of a
repeating regionjust the content marked
as editable.

You can rename an editable region by clicking the blue tab on the template page and typing a
new name into the Property inspector. However, if you've already built pages based on this template, it's not
a good idea. Because template-based pages use the name to identify editable regions, Dreamweaver can lose
track of where content should go when you rename a region. See
Figure 18-18 for a workaround.

18.3.2 Adding a Repeating Region

Some Web pages contain lists of items. A catalog page might display row after row of
product informationpicture, name, price, and description. An index of Frequently
Asked Questions might provide a list of questions and the dates they were posted.

If you were to make a template for either of these pages, you would add an editable
region to the area of the page where these lists appear. Just creating an editable region,
however, wouldn't give you any ability to enforce (or easily update) the design of these
lists, because everything within an editable region can be changed.

Fortunately, Dreamweaver provides a pair of template tools to overcome this problem:
repeating regions and repeating tables. Both let you create areas
of a page that
include editable (and uneditable) regions that can be repeated any number of times
(see Figure 18-6).

Adding a repeating region is similar to adding an editable region. Select the area of
the template page you wish to make repeatable, which usually contains at least one
editable region. Most often, this area will be a table row, so you could select the row
(<tr> tag) with the information to be repeated. You could just as easily select a paragraph
or a list item (<li> tag).

You can make a repeating region that doesn't include an editable region. For example, a template for
a movie review Web page could include a repeating region that's simply a graphic of a star. A page author
adding a new movie review could repeat the star graphic to match the movie's rating4 stars, for example.
(There's just one caveatsee the Warning in Section 18.6.2.)

Now tell Dreamweaver that the selected elements are part of repeating region. You
can use any of these techniques:

On the Common tab of the Insert bar (Figure 18-2), select the Repeating Region option from the Templates menu.

Choose InsertTemplate ObjectsRepeating Region.

Right-click (Control-click) the selection and choose TemplatesNew Repeating
Region from the contextual menu.

When the New Repeating Region dialog box appears, type a name for the region and
click OK. You return to your template, where the name you gave the region appears
in a small blue tab above the editable region (see Section 18.6.1 for a
discussion of using a repeating region when building a new template-based page.)

Dreamweaver MX lets you name a repeating region with a name already in use by an editable
region. But don'tmultiple template areas with the same name will cause Dreamweaver to act unpredictably.

18.3.2.1 Repeating tables

The new repeating table tool is essentially a shortcut to creating a table with one or
more repeating rows in it. If you had a lot of time on your hands, you could achieve
the same effect by adding a table to a page, selecting one or more rows, and applying
a repeating region to the selection. To use the repeat table tool:

Click on the template page where you wish to insert the table.

You can't insert a repeating table into an already defined editable, repeating, or
optional region, as explained in the box below. You must be in an empty, locked
area of the template.

On the Common tab of the Insert bar (Figure 18-2)
, select the Repeating Table option from the Templates menu.

Alternatively, you can choose InsertTemplate ObjectsRepeating Table. Either
way, the Insert Repeating Table window appears (Figure 18-7).

Fill out the basic properties of the table.

The top part of the window lets you set up the basic structure of the table: rows,
columns, cell padding, cell spacing, width, and border. Basically, it's the same information
you'd provide when creating any table, as described in Section 7.2.7
. You
usually start a repeating table with two rowsone for a heading, and another to
contain the information you wish to repeat.

FREQUENTLY ASKED QUESTION
Editable Regions, Repeating Regions, and Errors

When I try to insert an editable region inside a repeating
region, I get the following error: "The selection is already
in an editable, repeating, or optional region." What's that
about?

This error message essentially means you're trying to add a
template region where it doesn't belong. It most commonly
appears when you attempt to put a repeating or optional
region inside an editable tag. That kind of nesting is a nono;
anything inside an editable region can be changed on
template-based pages, and as such Dreamweaver can't
touch it.

However, you may get this error message seemingly in error.
For instance, it's perfectly OK to add an editable region
inside a repeating region, and even to add a repeating region
inside of an optional region, and vice versa. But one day you
select text inside a repeating region and try to turn it into an
editable region, and boomerror message. What probably
happened was, when you selected the text, Dreamweaver
actually selected part of the hidden code used to define a
template region (see "Under the Hood of Templates" in
Section 18.3.1) and thought you were trying to put an editable
region inside of it. To avoid confusion, use the tag selector
to select the tag you wish to turn into an editable region. For
example, click <p> in the tag selector to select the paragraph
inside the repeating region. Alternatively, go into Code view
(Section 10.2) and select whatever part of the code inside the
repeating region you wish to make editable.

In the Starting Row box, type the number of the row where the repeating region
should begin.

Often you'll just have one repeating row: one row of product information, for
example. You might want to use the top row for labels indicating the information
contained in the rows below. If that's the case, enter 2 at this step, leaving the first
row as an uneditable part of the template.

It's conceivable, however, that you might want each entry to take up two rows. The
first would list Name and Description; the second would contain a cell for a photo
and a cell for the price. You set up this effect in this step and the next.

The Insert Repeating Table dialog box lets
you kill three birds with one stone: It adds
a table to a page, turns one or more rows
into a repeating region and adds editable
regions into each table cell inside the
repeating region.

In the Ending Row box, type the number of the last repeating row.

If you only wish to repeat a single row, enter the same number you provided for
step 4. If you're creating a double repeating row, add 1 to the number you provided
in step 4. If you need three rows for each repeating entry, add 2 to the number
from step 4.

Type a name for this repeating region.

Don't use the same name as another template region. You'll run the risk of unpredictable
results on template-based pages.

Click OK.

Dreamweaver inserts a table into the page. A blue tab with the name of the repeating
region appears (see Figure 18-6), as do blue tabs in each cell of each
repeated row. These tabs indicate new editable regionsone per cell.

Since these new editable regions have uninformative names like EditRegion4, you
might want to rename them. Click the blue tab and type a new name in the Property inspector. (But do so
before you create any pages based on the templatesee the Warning in
Section 18.3.2.)

To remove a repeating region, select it by clicking the blue Repeat tab and choose
ModifyTemplatesRemove Template Markup. A more accurate way to select a
repeating region is to click anywhere inside the region and then click "<mmtemplate:
repeat>" in the tag selector. (See Section 1.2.2 for more on using the
tag selector.) If you want to rename a repeating region, heed the Warning in
Section 18.3.2.1.

18.3.3 Making a Tag Attribute Editable

An editable region lets you change areas of HTMLlike a paragraph, image, or entire
tableon new pages you create from a template. However, when you're creating a
template for others to make pages from down the line, you may want to limit these
page authors' editing abilities. You may want to allow budding Web designers to
change the color of a table cell without changing other properties like cell width or
paragraph alignment. You can use Dreamweaver's Editable Tag Attribute to specify
which tag properties your successors can change.

Before making a tag attribute editable, first set that property to a default value in the template. Doing
so inserts a default value and makes the attribute appear in the Editable Tag Attribute window (see steps 3
and 7 below).

To make a tag attribute editable:

Select the tag whose property you wish to make editable.

Using the tag selector (Section 1.2.2) is the most accurate way.

Choose ModifyTemplatesMake Attribute Editable.

The Editable Tag Attributes window opens (Figure 18-8).

Dreamweaver provides detailed control
for template pages. To make just a single
property of a single tag editable when pages
are later based on your template, turn on
the "Make attribute editable" checkbox. In
this case, the "class" attribute of the body
tag will be editable, allowing page designers
the freedom to apply different CSS styles to
the body of each template-based page.

Select an attribute from the menu or add a new attribute with the Add button.

Only properties you've already set for the selected tag appear in the Attribute
menu. In other words, if you've selected an image, you'll probably see the Src,
Width, and Height properties listed. But unless you've set the image's border, the
Border property won't appear.

To add a property, click the Add button. In the window that appears, type the appropriate
property name. For example, to make the path to a graphics file editable,
you'd set the <img> tag's Src attribute by typing src here. (If you're not sure of the
property's name, check out Dreamweaver's built-in HTML reference, described
in Section 10.5.)

If you want page editors to be able to change a CSS class applied to the <body> tag on template-based
pagesto apply different fonts, background colors, or any of the many CSS formatting options to each template-
based pageyou have to make the Class attribute editable. (See Section 6.1.3 for more on CSS classes.)

Make sure the "Make attribute editable" box is turned on.

If you decide that you no longer want to allow editing of this property, you can
return to this dialog box and turn off editing, as described in Section 18.4
.

Type a name in the Label field.

What you type here should be a simple description of the editable tag and property,
which will help page authors correctly identify editable properties. For example,
you could use Product Image if you're making a particular image's source (Src)
property editable.

Choose a value type from the menu.

Your choices are:

Text. Use this option when a property's value is a word. For example, the image tag's
Align property can be top, middle, baseline, and so on. Or, when using Cascading
Style Sheets, you could make a tag's Class property editable to allow page authors
to apply a particular custom style to the tagcontent, footer, and so on.

URL. Use this option when the editable property is a path to a file, like an image's
Src property or a link's Href property. Using its site management tools, Dreamweaver
will keep track of these paths and update them when you move your pages
around your site.

Color. If the property requires a Web color, like a page's background color, select
this option. It will make Dreamweaver's color box available to people who build
pages from the template.

True/False. You shouldn't use this option. It's intended for Dreamweaver's Optional
Regions feature (discussed in Section 18.4
), and it doesn't apply to HTML properties.

Number. Use this choice for properties that require a numeric value, like an image's
Height and Width properties.

Type a default value into the Default field.

This step is optional. The default value defines the initial value for this property,
when people first create a page based on the template. They can then modify this
value for that particular page. If you've already set this property in the template,
its value will appear automatically in this box.

Click OK to close the window.

Dreamweaver adds code to the template page that allows page authors control of
the attribute. Setting this attribute on pages created from the template is described
in Section 18.6.2.

If you later decide that you don't want a particular tag's property to be editable, Dreamweaver
can help. Open the template file, select the tag with the editable attribute, and
choose ModifyTemplatesMake Attribute Editable. In the window that appears,
turn off the "Make attribute editable" checkbox (Figure 18-8). Unfortunately,
doing
so doesn't remove all of the template code Dreamweaver added. Even after you turn
off editing for an attribute, Dreamweaver leaves behind the parameter used to control
the tag's property. To eliminate this extra code, see the box in Section 18.7.2.

Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی