Applying unobtrusive code refers to the practice of maintaining clean semantic HTML markup that is free of any attributes that introduce custom behaviors. Any custom behaviors that are introduced into your HTML page should be defined in a single place—inside a SCRIPT tag located in the head section of the page. This will enable the InContext Editing service to unobtrusively attach editing functionality to specific elements when the page loads in the browser. Using unobtrusive code has the following advantages:

• It helps you easily manage similar regions on the page when you need to modify their editing properties (that is, add/remove options). It also helps you avoid the duplication of similar regions' properties.
• Since the HTML mark-up is smaller and semantic, it is cleaner and easier to read.
• It provides the ability of reusing CSS classes or IDs in order to add editing functionality to existing tags.

In this tutorial, you'll complete the following tasks:

• Apply InContext Editing functionality to an existing web page.
• Identify InContext Editing standard mark-up.
• See the differences between the standard default mark-up generated by Adobe Dreamweaver CS4 and unobtrusive code.
• Learn the advantages and disadvantages of using unobtrusive code.
• Use the free Adobe InContext Editing Markup Extractor extension to easily convert standard code into unobtrusive code.

The estimated completion time for this tutorial is about 45 minutes, depending on your knowledge of Adobe Dreamweaver and InContext Editing.

To avoid potential problems, be sure to follow the sections of the tutorial in order.

Requirements

In order to make the most of this article, you need the following software and files:

Dreamweaver CS4

• Try
• Buy

Adobe InContext Editing Markup Extractor extension

• incontext_editing_markup_extractor.zip (ZIP, 64K)

A valid Adobe ID account

Sample files:

• ice_unobtrusive_code.zip (ZIP, 4K)

Prerequisite knowledge

You should be familiar with Dreamweaver CS4 and using the Adobe Extension Manager. You will be using the Insert panel, and work in Design and Code views.

Page 1 of 6

Next Page

About the author