Creating InContext Editing Repeating Regions Create an InContext Editing Repeating Region Open the Web page that you want to transform into an ICE editable region.. ◆ If you placed th
Trang 1Creating InContext
Editing Repeating
Regions
Create an InContext Editing
Repeating Region
Open the Web page that you want
to transform into an ICE editable
region
Do any of the following to select
the region that you want to make
editable:
◆ Select any of the following
tags: a, abbr, acronym,
address, b, bif, blockquote,
center, cite, code, dd, dfn, dir,
dive, dl, dt, em, font, h1, h2,
h3, h4, h5, h6, hr, i, img, ins,
kbd, label, li, menu, ol, p,
pre, q, s, samp, small, span,
strike, strong, sub, sup, table,
tbody, tr, tt, u, ul, and var
◆ Place the insertion point or
select content
◆ Select one editable region in a
template
Click the Insert menu, point to
InContext Editing, and then click
Create Repeating Region.
Based on your selection in Step 2,
take the appropriate action:
◆ If you selected a tag, you’re
done
4
3
2
1
In addition to creating an editable region, you can also create a repeat-ing region for use with Adobe InContext Editrepeat-ing (ICE), an online service that allows users to make simple edits to your web pages without any previous knowledge of HTML code or web editing An ICE repeating region creates an area on the page that a user can repeat and add content When you create an ICE repeating region, Dreamweaver adds
a pair of HTML tags that includes the ice:repeating attribute in the opening tab To edit a page, a user opens the page in a browser, logs in
to the InContext Editing service, and then edits the content in the ICE repeating region If you are creating an ICE repeating region to a tem-plate, the new ICE editable region must be placed within an editable region For details about using the Adobe ICE online editing service, see the Adobe web site at www.adobe.com
1
4
Trang 2◆ If you placed the insertion point
or selected content, select an
option to create a new editable
region, and then click OK.
◆ If you selected one editable
region in a template, click OK.
Click the blue tab of the editable
region to select it
Specify the editing options that
you want to make available to
users in the Properties panel
The options you select in the
Properties panel will be available
to users when they edit the page
in a browser
Click the File menu, and then click
Save.
If prompted, click OK for
Dreamweaver to add supporting
files to your site for ICE These
files need to be uploaded to your
server for ICE to work properly
8
7
6
5
7 5
6
Trang 3Creating Nested
Templates
Create a Nested Template
Create a normal template, the
same as any other template
This template will act as the
parent template There must be at
least one editable region in the
template (this is the area you will
insert your nested 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)
◆ 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
Click the File menu, click Close,
and then click OK as necessary to
the alert message
6
5
4
3
2
1
Nested templates are essentially templates within templates Nested templates allow for different levels of control on pages created from these templates For example, you create a Web site that has a similar overall appearance (navigation, logo, color scheme, etc.), yet also has sections that have a different appearance For the separate sections of the site, you can make nested templates that will have common ele-ments and layout features for that section The differences represent a different type of page in the site First, you create the navigation tem-plates; each with their own differences, and save them Next, you cre-ate the main body of the page (which will also be a templcre-ate), and
"nest” the navigation template into the main template The nested tem-plate is now defined as the "child" temtem-plate Now, any time you need to make changes to the navigation, you simply edit the child template, just like any other template, and the changes will be applied specifically to the pages that contain the child Nested templates do not increase the size of the Web page, nor do they create any additional complexity All they do is give you control over your site
5
4
3
Trang 4Now, you want to create a new
page based on the template
Click the File menu, and then click
New.
Select from the following options
in the New Document dialog box:
◆ Click the Page From Template
category
◆ Select the site where the
template is located
◆ Select the template you just
saved in step 4
◆ Click Create to open the new
document
Click to select the area of the
document that will contain the
nested template
Click the Window menu, and then
click Assets to display the Assets
panel
Click the Templates category.
Select your previously created
nested template (in this example, a
template that contains the
navigation)
Click the Apply button in the
Assets panel
Dreamweaver adds the nested
template to this new document
Click the File menu, click Save As
Template, and then follow the
instructions in steps 3 through 5 to
save this template
14
13
12
11
10
9
8
7
8
Dealing with Inconsistent Region Names
The Inconsistent Region Names dialog box appears automatically when Dreamweaver finds regions that do not match in a template and the document to which the template is being applied You can map the content in the document to any region in the template or discard the content
For Your Information
See Also
See “Setting Highlighting Color
Preferences” on page 66 for
informa-tion on setting highlight colors for
editable regions, nested editable
regions, and locked regions
Trang 5In addition to standard templates, you can create nested templates A nested template is a template whose design is based on another tem-plate By creating nested templates, you can control content in pages that share the same layout but also have slight design variations When you open and change a nested template, it modifies that section of all the files that use the nested template without changing any other areas
of the template or the pages to which they are attached This takes Web page customization and reusability to the next level
Creating a Web Page
from a Nested
Template
Create a Nested Template
Click the File menu, and then click
New.
The New Document dialog box
opens
Click the Page From Template
category
Select the site that contains the
template you want
Select the template you want to
use
Click Create.
Dreamweaver opens a new Web
page based on the selected
template
Add something to the new
template, such as a pre-existing
navigational system, an image, or
possibly some changeable text
Click the Insert menu, point to
Template Objects, and then click
Make Nested Template.
Enter a Description in the input
field (optional), and then enter a
name for the nested template into
the Save As input field
Click the Save button.
Dreamweaver now saves the
nested template
9
8
7
6
5
4
3
2
1
5
9
8
Trang 6Creating a Web Page
from a Custom
Template
Create a Web Page from a
Custom Template
Click the File menu, and then click
New.
The New Document dialog box
opens
Click the Page From Template
category
Select the site that contains the
template you want
Select the template you want to
use
Select the Update Page When
Template Changes check box to
instruct Dreamweaver to update
all pages when the template
changes (default)
Click Create.
Dreamweaver generates a new
document based on the selected
template
Edit and add content to all editable
areas of the page
Click the File menu, click Save,
select a location, specify a name,
and then click Save to save your
new page
8
7
6
5
4
3
2
1
After you create your own custom template, you can use it to create Web pages A document created from a template is known as an instance of that template When you create a page based on a tem-plate, it contains all the attributes of the template; however, it won't be
a template, it will be a Web page When you open a page based on a template, the editable regions in Design view appear with a rectangular 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 In addition, the entire page is surrounded by a different colored outline with the template name on the tab that reminds you the page is based on a tem-plate and you can only change editable areas
6
5