Do one of the following:
Utoljára frissítve:
2021. máj. 20.
Use Dreamweaver with Adobe Online services, including BrowserLab and Business Catalyst InContext Editing.
Adobe online services are hosted web applications that work similarly to traditional desktop tools. The advantage of online services, however, is that they are always up to date because they are hosted on the web, as opposed to on your computer.
Dreamweaver integrates directly with Adobe® BrowserLab and Adobe® Business Catalyst InContext Editing. Help for working with those services is included in the Help sections that follow.
Dreamweaver also integrates with Adobe® CS Live online services (which includes BrowserLab). For more information on working with CS Live, see Using Adobe CS Live.
For information on managing Adobe online services, see the Adobe website at www.adobe.com/go/learn_creativeservices_en.
BrowserLab
Adobe BrowserLab lets you preview local web content from within Dreamweaver, without requiring you to post it to a publicly-accessible server first. You can preview files from your local Dreamweaver site, or from a remote or testing server.
For information about using the BrowserLab online service, including information about using BrowserLab with Dreamweaver, see www.adobe.com/go/lr_abl_en.
Business Catalyst InContext Editing
Business Catalyst InContext Editing
Adobe Business Catalyst InContext Editing is an editing component of Adobe Business Catalyst that lets users make simple content changes within a web browser. To change a web page, users simply browse to the page, log into InContext Editing, and edit the page. The editing options are simple and elegant, and using them requires no previous knowledge of HTML code or web editing.
Before you enable users to make live changes on the web, however, you use Dreamweaver to make your HTML pages editable. You do this by specifying regions on the page that you want to allow users to edit. For example, you might have a news page with titles and blurbs for articles. You can select this content and then transform it into an InContext Editing editable region so that when a user logs into InContext Editing, they can edit the titles and blurbs directly in a browser.
This documentation tells you how to work with InContext Editing editable regions in Dreamweaver; but Adobe also provides other resources to help you work with InContext Editing:
For documentation on using InContext Editing to edit pages in a browser, see www.adobe.com/go/learn_dw_incontextediting_browser_en.
For documentation on working with the InContext Editing Administration Panel, see www.adobe.com/go/learn_dw_incontextediting_administration_guide_en.
For more information about Adobe Business Catalyst, visit www.businesscatalyst.com.
Megjegyzés:
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.
Megjegyzés:
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.
-
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).
-
Choose Insert > InContext Editing > Create Editable Region.
-
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.
Megjegyzés: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.
- 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.
Megjegyzés: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.
-
In Design view, click the blue tab of the editable region to select it if it’s not already selected.
Megjegyzés:If you are working in a Dreamweaver template, be sure to select the InContext Editing editable region (the container region), and not the Dreamweaver template editable region.
-
Select or deselect options in the Editable Regions Property inspector. The options you select will be available to a user when they edit the contents of the editable region in a browser. For example, if you select the Bold option, the user will be able to make text bold; if you select the Numbered List and Bulleted List option, the user will be able to create numbered and bulleted lists; if you select the Link option, the user will be able to create links; and so on. Hover over the icon of each option to see a tooltip of what the option enables.
-
Save the page.
If this is the first time you’re adding InContext Editing functionality to a page, Dreamweaver informs you that it is adding InContext Editing supporting files to your site: ice.conf.js, ice.js, and ide.html. Be sure to upload these files to the server when you upload your page, otherwise InContext Editing functionality will not work in a browser.
Create an InContext Editing repeating region
An InContext Editing repeating region is a pair of HTML tags that includes the ice:repeating attribute in the opening tag. The repeating region defines an area on the page that a user can “repeat” and add content to when editing in a browser. For example, if you have a heading and a paragraph of text that follows it, you can transform these elements into a repeating region that a user can then duplicate on a page.
In addition to adding repeating regions based on the original region, you can also give the user the option to delete regions, add completely new regions (not based on the content of the original region), and to move the regions up or down.
When you create a repeating region, Dreamweaver wraps it in another container called a repeating regions group. This container—a div tag with the ice:repeatinggroup attribute added to the opening tag—acts as the container for all of the editable repeating regions that a user might add to the group. You cannot move repeating regions outside of their repeating regions group containers. Additionally, you should not manually add repeating regions group tags to your page. Dreamweaver adds them for you automatically when necessary.
Megjegyzés:
When creating a repeating region from a table row (tr tag), Dreamweaver applies the repeating regions group attribute to the parent tag (for example, the table tag), and does not insert a div tag.
If you are working on a page that already contains a repeating regions group, and you try to add a repeating region immediately after the existing group, Dreamweaver detects that a repeating regions group precedes the region you are trying to add, and gives you the option of adding the new region to the existing group. You can choose to add the new repeating region to the existing group, or create an entirely new repeating regions group.
Megjegyzés:
If you are adding an InContext Editing repeating region to a page that’s based on a Dreamweaver template, the new InContext Editing repeating region must exist within a region that is already editable.
To create a repeating region in Dreamweaver, follow these steps.
-
Do one of the following:
Select a tag that you want to transform into a repeating region. The list of possible tags is extensive: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, 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.
Megjegyzés:Only div tags can contain the editable region and repeating region attributes simultaneously.
- Place the insertion point where you want to insert a new repeating region on the page.
- Select exactly one repeating region in a Dreamweaver template (DWT file).
- Select other content on your page that you want to make repeatable (for example, a heading and a block of text).
-
Choose Insert > InContext Editing > Create Repeating Region.
-
Your options vary, depending on your selection.
If you selected a transformable tag, Dreamweaver transforms the tag into a repeating region without any further steps.
If you’re inserting a new, blank repeating region, do one of the following:
Select Insert New Repeating Region at the Current Insertion Point and click OK.
Select Transform the Parent Tag Into a Repeating 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: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, 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.
Megjegyzés: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.
- If you selected a Dreamweaver template repeating region, click OK in the Create Repeating Region dialog box. Dreamweaver wraps the template repeating region with a div tag that acts as a container for the new InContext Editing repeating region.
- If you selected other content that you want to make repeatable, 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 a repeating region. The div tag with which Dreamweaver wraps the content acts as the container for the repeating region.
- Select Transform the Parent Tag Into a Repeating Region if you want Dreamweaver to make the parent tag of the selection the container element for the repeating region. Only certain HTML tags are transformable: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, 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.
-
In Design view, click the blue tab of the repeating region to select it if it’s not already selected. Notice that Dreamweaver actually forces you to select the tab for the repeating regions group. This is because all repeating regions exist within a repeating regions group, and you must set options for repeating regions by setting options for the entire group.
-
Select or deselect options in the Repeating Regions Group Property inspector. Two options are available: Reorder and Add/Remove. When you select Reorder, users will be able to move repeating regions up or down when editing in a browser. When you select Add/Remove, users will be able to add or remove repeating regions when editing in a browser. Both options are selected by default, and you must always have at least one of them selected.
-
Save the page.
If this is the first time you’re adding InContext Editing functionality to a page, Dreamweaver informs you that it is adding InContext Editing supporting files to your site: ice.conf.js, ice.js, and ide.html. Be sure to upload these files to the server when you upload your page, otherwise InContext Editing functionality will not work in a browser.
Delete a region
It’s best to delete a region by using the region’s Property inspector. Using the region’s Property inspector ensures that you delete all of the code associated with the region.
Select an editable region, a repeating region, or a repeating regions group.
In the region’s Property inspector, click the Remove Region button.
Specify CSS classes for formatting
The InContext Editing Manage Available CSS Classes feature has been deprecated as of Dreamweaver CS5.
InContext Editing Error messages
Cannot apply InContext Editing to tags containing script tags or server-side block(s) of code
If your selection contains server-side code, Dreamweaver does not allow you to transform it into an editable or repeating region. This issue has to do with how InContext Editing saves editable pages when the user is working in the browser. When a user saves the page after editing, InContext Editing removes server-side code from the region.
Current selection cannot be transformed or wrapped with a DIV tag because the parent node doesn't allow DIV as child tag
When the selection you want to transform on your page can’t be transformed directly, Dreamweaver needs to wrap the selection with div tags that will act as the container for your new editable or repeating region. For this reason, the parent tags of what you want to transform must allow div tags as children. If the parent tag of the tag you’re trying to transform doesn’t permit child div tags, Dreamweaver will not allow you to perform the transformation.
Current selection already contains or is inside of an Editable Region. Nested Editable Regions are not allowed.
If your selection is inside an editable region, or if there is an editable region within the selection, Dreamweaver does not allow you to perform the transformation. InContext Editing does not support nested editable regions.
Editable Regions should not contain Repeating Regions or Repeating Regions Groups
InContext Editing editable regions cannot contain any other InContext Editing functionality. If you try to add a repeating region or a repeating regions group to an editable region, Dreamweaver does not allow you to perform the transformation.
Repeating Regions should not be inside Editable Regions or contain Repeating Regions Groups
InContext Editing editable regions cannot contain any other InContext Editing functionality. If you try to add a repeating region or a repeating regions group to an editable region, Dreamweaver does not allow you to perform the transformation. Additionally, Dreamweaver will not transform an element into an editable or repeating region if it already contains a repeating regions group.
Current selection already contains or is inside of a Repeating Region. Nested Repeating Regions are not allowed.
If your selection is inside a repeating region, or if there is a repeating region within the selection, Dreamweaver does not allow you to perform the transformation. InContext Editing does not support nested repeating regions.
Selection must contain exactly one Dreamweaver template editable/repeating region, or be inside any Dreamweaver template editable region
When working with Dreamweaver template files (.dwt files), you must follow certain rules. To transform a Dreamweaver template editable/repeating region into an InContext Editing editable/repeating region, you must select exactly one Dreamweaver template editable/repeating region on the page and then transform it. To transform another selection on the page (for example, a block of text), the selection must be within a Dreamweaver template editable region.
Only DIV tags can have both Editable Region and Repeating Region functionality applied at the same time
If your selection is not a div tag, and already has a repeating region attribute applied to it, Dreamweaver will not allow you to apply the editable region attribute to that tag as well. Only div tags can have the editable region and repeating region attributes applied simultaneously.
Dreamweaver detected that a Repeating Regions Group tag precedes the Repeating Region
All InContext Editing repeating regions must exist within a repeating regions group. When you add a new repeating region to a page, Dreamweaver detects if there is already a repeating regions group immediately before it. If there is, Dreamweaver gives you the option of adding the new repeating region to the repeating regions group that is already there, or creating a new repeating regions group to contain the new repeating region.