Applying unobtrusive InContext Editing code

Applying InContext Editing features to a sample page

Before you begin, be sure your set-up meets the following requirements:

• You must have a defined Dreamweaver site with a testing server or remote server. See How to define a site in Dreamweaver (TechNote 14028) for details on correctly defining your site. Your website does not need to use a server-side technology.
• The remote server should not be behind a firewall and should be accessible from the Internet using FTP or SFTP. (That is, it needs to be accessible from the Internet as well as from the Adobe InContext Editing server).
• The minimum system requirements for InContext Editing.

If your system meets the above requirements, follow these steps:

1. If you haven't done so already, download and unpack the ice_unobtrusive_code.zip archive to your site. After unpacking the files, the file structure should be as follows:

   • index.html: This is the web page to which you'll apply InContext Editing functionality.
   • styles.css: This CSS file contains a few class definitions that will make the web page look a little nicer.
   • userStyles.css: This CSS file defines the CSS rules that the end user has access to while editing the page in the browser.
2. Open the index.html page in Adobe Dreamweaver CS4 to start applying InContext Editing functionality.

3. Convert the first paragraph located just below the "ACME Company" text into an editable region. To do this, select the entire paragraph in either Code or Design view, and then click Create Editable Region in the InContext Editing category of the Insert panel.

   Note: Make sure that you select the opening <p> and closing </p> tags when you select the paragraph; otherwise you may get this error message: "The current selection cannot be transformed or wrapped with a DIV tag. Please select a parent tag instead." On the one hand Dreamweaver needs to add a DIV tag in order to make the selection editable; on the other hand DIVs are not allowed inside P tags. The best option is to select the <p> and </p> tags.

   Figure 1 shows what the Design view code looks like after you apply an editable region to the selection described above. Note the blue tabbed outline around the paragraph that says editable region.

   

   Figure 1. The first paragraph transformed into an editable region.

   Let's move forward and continue applying InContext Editing to the rest of the page. This time you'll transform each of the existing news articles into repeating regions.

4. Go to either Code or Design view and select the first DIV tag that has the class "news" applied to it.

5. Click Create Repeating Region in the InContext Editing category of the Insert panel. You'll see a message that informs you that Dreamweaver also added an extra DIV around the selected DIV. This extra DIV creates a repeating regions group.

   Note: Any repeating region must be contained inside a repeating regions group. The repeating regions group must be the direct parent of any contained repeating region from your page. The repeating regions group defines the set of options each repeating region will have, and also acts as a container. You cannot move any of the contained repeating regions outside of their group nodes. In most cases, the group node is a DIV tag.

   Figure 2 shows what the Design view looks like after you've applied the repeating regions group.

   

   Figure 2. The first news item transformed into a repeating regions group.

6. Perform the same steps for the rest of the news items, in the exact order that they appear on the page (that is, News #2, News #3, and so on). The order is important because each time you convert the next news item into a repeating region, Dreamweaver notices that a repeating regions group precedes it, and gives you the option of adding the new repeating region to that group (see Figure 3).

   

   Figure 3. The confirmation displayed when Dreamweaver detects a repeating regions group immediately before the currently transformed repeating region.

7. Leave the "Move current Repeating Region into the group that precedes it" option selected, and click OK to add the transformed region to the previous group.

   Note: If you change the order or if you choose the other option you will get multiple repeating regions groups and you will not be able to sort the news.

   Next, you need to create three different editable regions inside each of the news sections.

8. Create editable regions for all the DIVs that have the "title" class applied to them. Select each of those DIVs independently and click Create Editable Region in the InContext Editing category of the Insert panel. After the code is updated, go to the Property inspector and leave only the B (bold) and I (italic) options selected.

9. Repeat step 1 for the DIV tags that have the "date" class applied to them; for these DIV tags deselect all of the check boxes in the Property inspector.

   Note: Unchecking all options means that end users will not be able to format the text at all; nor will they be able to insert links and images. This is useful if you want to prevent users from changing a given format. The CSS here defines the desired format, CSS classes are applied to editable tags, and formatting options are disabled for the user.

10. The last tags from the news items that you need to convert are the DIV tags that have the "content" class applied to them. Select those DIV tags individually, and click Create Editable Region in the InContext Editing category of the Insert panel. Leave all formatting options selected in the Property inspector.
11. One feature of InContext Editing is the ability to format edited content in a browser using a set of CSS classes. To specify which CSS file(s) InContext Editing should use, click Manage Available CSS Classes in the InContext Editing category of the Insert panel, select the userStyles.css file, and click OK.

12. Save the page. Dreamweaver asks you to confirm that you want to copy three files to your web site (see Figure 4).

    

    Figure 4. The confirmation dialog box indicates that InContext Editing files were added to the local site.

13. Click OK and refresh the files in the File panel. At this point, a new folder called includes appears in the list of files.

Note: Don't forget to upload the includes folder to the live server when you post your pages.

Now upload the page to the live server and preview it in a browser. (Be sure you are using a supported web browser on a supported operating system.) After the page loads, press Ctrl+E (Windows) or Command+E (Macintosh), enter you Adobe ID and password, and start editing the page.

Note: If you want to save the page you will first need to configure the website. To complete the configuration process you will need to supply FTP details such as host name, user name, password, path on the FTP server folder, a list of default pages, and optionally, the uploads folder. For more details on configuring FTP settings refer to the section Register and configure a website in the InContext Editing documentation.

In the next topic, you will focus on identifying the actual InContext Editing code generated by Adobe Dreamweaver CS4.

Page 3 of 6

Previous Page

Next Page