Specifying editable regions

Your first task is to create editable regions in the news-start.html file:

1. With the news-start.html page open in Dreamweaver, click anywhere in the first blurb's headline ("Sousa revives Noir with sultry thriller") and then click the <div.title> tag on the Tag selector so that the container for this title headline is selected (see Figure 2).

   

   Figure 2. Selecting the parent tag on the Tag selector.

2. Next, select Insert > InContext Editing > Create Editable Region to create an editable region around this container (see Figure 3).

   

   Figure 3. Creating an editable region for the title.

   When you do this, you will see two things happen:

   • The region will be surrounded with a blue border, which has a tab identifying it as an editable region.
   • The InContext Editing Region Property inspector is displayed (see Figure 4).

   

   Figure 4. The InContext Editing Region Property inspector. Note that you can also use this to remove an InContext Editing Region.

   Note: In the event that you forget to select the container tag before applying the repeating region to your content, Dreamweaver will prompt you to determine what you want to do (see Figure 5). Don't worry, you are covered either way. You can either insert a new editable region at the current insertion point, or you can wrap the current insertion point's parent tag with an editable region.

   

   Figure 5. Creating an editable region without selecting the parent tag.

3. The InContext Editing Property inspector allows you to set permissions for your editors, thus limiting the extent to which they can change this title's appearance. In this case, you only want the editors to be able to change the content and none of the presentational qualities of that content, so click on the Uncheck all button to limit the editing scope. If you have been doing this in Split view, you will see that after inserting the InContext Editing Region, the <div class="title"> container's tag was changed to this:

   <div class="title" ice:editable="*">

   The editable property defines the exact permissions allowed for this region. In this case, the asterisk means that all edits are possible, both content and presentation. When you use the InContext Editing Property inspector to de-select the permissions by clicking the Uncheck all button, that markup is changed to this:

   <div class="title" ice:editable="">

   This means that there are no presentational attributes that are editable within that region. Next, you will add an editable region around the posted date container.

4. Click in the date content below the title Editable Region you just added, select <div.posted> on the Tag selector, and again add an InContext Editing editable region. After adding this region, click again the Uncheck all button to deselect all permissions.

   You now have two editable regions with restricted editing defined: the title for the blurb, and the date posted. Next, you will add a third, more robust editable region around the content for the blurb.

5. Click anywhere within the content, select <div.text> on the Tag selector, and add an InContext Editing editable region. In this case, you will leave all permissions enabled so that editors can change not only the content, but also add formatting, images, and hyperlinks to it.

At any time, you can return to any region's InContext Editing Property inspector by clicking within the region, then clicking the blue tab identifying that region, just the same way you would do for Spry regions. This enables you to check or change permissions. Of course, you can enter the code manually as well.

It is instructive to see how those individual permissions are called out in the code. For example, click in the region you just created around the blurb content, click the blue tab to select the region and display the InContext Editing Property inspector, and deselect a single attribute. For this example, click the enabled check box for background color. The markup changes from this:

<div class="text" ice:editable="*">

to this:

<div class="text"
ice:editable="bold,italic,underline,align_justify,align_right,align_center,align_left,font_face,font_size,indent,outdent,ordered_list,unordered_list,paragraph_styles,font_color,css_styles,media,hyperlink">

That's quite a mouthful. However, it shows clearly how these individual permissions are set in the code (by the way, the background color attribute is enabled with the background_color value). A comma-separated value list does the job. But for now, you revert this region to its original state by clicking the Select all button on the InContext Editing Property inspector.

Page 3 of 7

Previous Page

Next Page