Operation Manual

465
USING DREAMWEAVER
Using Adobe Online Services
Last updated 3/28/2012
Note: Adobe AIR does not support Adobe Business Catalyst InContext Editing. If you use the AIR Extension for
Dreamweaver to export an application that contains InContext Editing regions, the InContext Editing functionality will
not work.
Create an InContext Editing editable region
An InContext Editing editable region is a pair of HTML tags that includes the ice:editable attribute in the opening
tag. The editable region defines an area on the page that a user can edit directly in a browser.
Note: If you are adding an InContext Editing editable region to a page that’s based on a Dreamweaver template, the new
InContext Editing editable region must exist within a region that is already editable.
1 Do one of the following:
• Select a div, th, or td tag that you want to transform into an editable region.
• Place the insertion point where you want to insert a new editable region on the page.
• Select exactly one editable region in a Dreamweaver template (DWT file).
• Select other content on your page that you want to make editable (for example, a block of text).
2 Choose Insert > InContext Editing > Create Editable Region.
3 Your options vary, depending on your selection.
• If you selected a div, th, or td tag, Dreamweaver transforms the tag into an editable region without any further
steps.
• If you’re inserting a new, blank editable region do one of the following:
• Select Insert New Editable Region at the Current Insertion Point and click OK. Dreamweaver inserts a div
tag in your code with the
ice:editable attribute in the opening tag.
• Select Transform the Parent Tag Into an Editable Region if you want Dreamweaver to make the parent tag of
the selection the container element for the region. Only certain HTML tags are transformable:
div , th , and td .
Note: This second option is only available when the parent node meets the exact criteria for transformation. For
example, it must be one of the listed transformable tags, and it must not be subject to any of the errors listed in
“InContext Editing Error messages” on page 468.
• If you selected a Dreamweaver template editable region, click OK in the Create Editable Region dialog box.
Dreamweaver wraps the template editable region with a
div tag that acts as a container for the new InContext
Editing editable region.
• If you selected other content that you want to make editable, do one of the following:
• Select Wrap Current Selection With a DIV Tag and Then Transform It if you want to wrap whatever you
selected with a
div tag and turn it into an editable region. The div tag with which Dreamweaver wraps the
content acts as the container for the editable region.
Note: Adding div tags to pages might alter page rendering and the effects of CSS rules. For example, if you have
a CSS rule that applies a red border around
div tags, you would see a red border around your current selection
when Dreamweaver wraps it with a
div tag and transforms it. If you want to avoid this type of conflict, you can
rewrite the CSS rules that affect the current selection, or you can undo the transformation (Edit
> Undo), and
then select and transform a supported tag that Dreamweaver doesn’t need to wrap with a
div tag.
• Select Transform the Parent Tag Into an Editable Region if you want Dreamweaver to make the parent tag
of the selection the container element for the editable region. Only certain HTML tags are transformable:
div, th, and td.
4 In Design view, click the blue tab of the editable region to select it if it’s not already selected.