An introduction to InContext Editing
with Adobe Dreamweaver CS4

by Tom Ortega II

Adobe recently announced a new feature in Dreamweaver CS4 — a hosted service called InContext Editing. This service should be of interest to web professionals who build HTML-based websites for their clients. In a nutshell, Adobe InContext Editing is a hosted online service that lets users make simple web content changes to Dreamweaver pages within a web browser. Web developers can now make new or existing web pages they're working on in Dreamweaver editable online with InContext Editing and designate the parts of the page they want clients or team members to be able to change, while keeping all other sections locked.

To change a web page, content contributors or clients simply browse to the page, log in to the InContext Editing service, and edit the page (see Figure 1). They don't need to know HTML or CSS to make changes — the browser editing works just like a word processor. And because they edit in their web browser, they don't need any additional software.

The InContext Editing website.

Figure 1. The InContext Editing website.

Now you can build a website for clients based on their initial content and then give them the power to safely edit that content themselves as it changes.

The InContext Editing service delivers three key benefits:

In this article, I look at a variety of content editing methods and examine the three benefits of InContext Editing in greater detail. With tight Dreamweaver integration, InContext Editing is quite possibly the tool many of you have been waiting for.

A brief history of content editing for websites

Since the dawn of the Internet, there has been one constant struggle: getting fresh content onto websites in a timely manner. Over the years, we've seen the following evolution in approaches.

Manual process

You create and edit HTML pages in one application and then use a separate FTP application to get your pages to the web server.

Content management system (CMS)

With a content management system, you have a one-stop shop to manage all the technical details of building the site, which lets you focus on the content itself.

Blogging platforms

With blogging tools such as Blogger and WordPress, you have the functionality of a stripped-down CMS.

For most of you, the fun part of your job is creating a wonderful design and then converting that design to your client's website. It would be great if you could just spend your days doing those two tasks. Sadly though, most of your time is spent updating content for clients on sites you finished long ago. Clients, in turn, don't make updates as often as they would like because it costs them money to do so. Adobe InContext Editing changes all that.

Simplify website editing for content providers

In the past when customers would call you with content updates for websites you had already finished, you may have directed them to Dreamweaver software and walked them through making their own updates. If you didn't, you probably wanted to. In fact, that scenario was so common that the Dreamweaver team built templates that were designed to help nontechnical folks distinguish between the content and the HTML code. But let's be honest: for a nontechnical person, editing content in Dreamweaver is intimidating (see Figure 2).

Editing content in Dreamweaver.

Figure 2. Editing content in Dreamweaver.

Everyone has a browser. And anyone who has ever used the Internet knows how to select text. Often users select, copy, and send you the old text along with the new text they want to replace it with. With InContext Editing, users can highlight the text the same way they always have. But now they can hit the Delete key (see Figure 3). They can overwrite the stale text. They can add a new entry in the Events section. They can tweak the content all day so you can focus on the more important duties of web design and development.

Editing content with ICE.

Figure 3. Editing content with InContext Editing.

The amazing thing about InContext Editing is that it's a hosted service and requires no additional software to be installed on the content editor's machine — not even a browser plug-in. By simply logging in to the InContext Editing website, users can directly edit website content from within their browser. By updating content themselves, they save time and money, and they can tweak copy anytime they want. In addition, you save time and money because you are now free to focus on the tasks that better utilize your skill set.

Create editable pages in minutes

While you can integrate InContext Editing markup into your website manually, the easiest and most intuitive way to do it is from inside Dreamweaver. You can take a new site or, more importantly, an old site and apply InContext Editing functionality. The only requirement is that your website use div tags because InContext Editing binds its editing rights to div tags.

Making a div editable in Dreamweaver.

Figure 4. Making a div editable in Dreamweaver.

In Dreamweaver, all you have to do to make a div editable is click the content (see Figure 4) and from the Tag viewer select the encasing div tag. Then choose Create Editable Region from the drop-down menu. In the background, Dreamweaver will create an HTML page and two JavaScript files (see Figure 5). Make sure these files get added to the web directory on the web server.

The necessary ICE files.

Figure 5. The necessary InContext Editing files.

In addition to these files, there's an InContext Editing administration process. You must log in to the Adobe InContext Editing site and assign rights to individuals (see Figure 6). InContext Editing has three roles for access rights: Editor, Publisher, and Administrator. An Editor role enables contributors to go in and modify content, but they can't push the changes live. The Publisher role should be granted to users who have final say over content — those who make sure the text is within the context of the brand or is approved for public consumption. Both Editors and Publishers log in the same way. You simply set up their rights differently within the InContext Editing Administration section. The Administrator role gives users Editor and Publisher privileges as well as the ability to modify website settings and users.

Inviting users and assigning privileges.

Figure 6. Inviting users and assigning privileges.

Preserve design integrity

But what about the design? Can clients who are modifying content accidently break your design? More importantly, if you have design elements within the content area that must maintain the same look and feel, can you ensure they stay consistent?

The advantage to InContext Editing working at the div level is that your clients cannot touch anything outside that div tag. They cannot access the CSS content. They'll never see, much less modify, any of your JavaScript or HTML. You no longer have to worry about the scare factor that is inherent when nontechnical folks modify website content and inadvertently modify (or break) your design.

Another great thing about InContext Editing is that it lets you selectively expose styling functionality. You can toggle functionality such as bolding, underlining, and spacing on and off (see Figure 7).

Setting editable options for users.

Figure 7. Setting editable options for users.

You can create one editable region for the header that allows nothing but text changes. Then, you can create another editable region for the content section that allows clients to make text bold and italic. You can even selectively expose styles from a CSS file to users. This way they can quickly choose Book Title or Author Name from a drop-down menu and apply a consistent style to snippets of text (see Figure 8).

The ICE user interface for styles.

Figure 8. The InContext Editing user interface for styles.

One exciting factor in this era of digital rights management (DRM) is image rights. How many times have you seen clients post an image to their site that they may not have the rights for? With InContext Editing, you can limit users' choices for images to a shared directory on the site itself. This ensures that the site contains only images it has the rights to use instead of images that the client simply found on the Internet.


As you can see, InContext Editing has the potential to save you and your clients a lot of time and effort. The one question that has not been addressed in this article is the price. Is this a free service, or will it cost money? I asked the InContext Editing product manager and got this response:

"While the final pricing for the InContext Editing service has not been determined, we are planning to offer the service as a monthly or annual subscription that will range between US$10–20 per month. Use of the service will likely be limited to five domains, and users will be able to add domains for an additional fee. The service may be bundled with other value added services for web professionals. It is up to the web professional how they charge their clients for the service."

As you can see, Adobe is planning to keep the price at a reasonable level. This should make the service accessible to everyone. Until the pricing is locked down, it is free to use.

Dreamweaver has always been about making life easier for web developers. Dreamweaver CS4 is no exception. From the code management side, you can now integrate with Subversion. From the content side, Adobe has addressed a big pain point for developers by implementing a simple and elegant solution. InContext Editing may just be the tool that ensures that you never make content updates again.

If you are ready to dive deeper into Dreamweaver and InContext Editing, there are plenty of hands-on tutorials on Adobe TV. Since it is currently a free service, this is a great opportunity to try it out with your clients and gauge their interest.

‹ Back

Tom Ortega II is a Principal at 360Conferences, where he coordinates low-cost, developer-friendly conferences such as 360Flex and 360|iDev. In addition, he keeps up his coding skills with projects at RapidNinja under the alias of "Ninja Debu".