Accessibility
Murray R. Summers

Murray R. Summers

Great Web Sights

Table of Contents

  1. Introduction
  2. Getting started
  3. Adding regions to thumbnails
  4. Adding regions to the tour packages
Created:
20 July 2009
User Level:
Intermediate
Products:
Dreamweaver

Creating a product catalog using Dreamweaver and InContext Editing

Many web developers and designers are already familiar with the Adobe InContext Editing service and have started to use it to create editable pages that can be updated by content contributors. The Dreamweaver Developer Center offers tutorials, videos, and other resources to help you learn to use InContext Editing. If you're new to InContext Editing, you may want to start with my two earlier articles, Getting started with InContext Editing for end users and Getting started with InContext Editing for developers.

In this tutorial, I'll step you through an example using the fictional DoSomeTravel.com website. I'll show you how to create a product catalog site with editable content using Dreamweaver and InContext Editing. First, I'll focus on the developer's task—modifying existing catalog pages of a site so that they contain functional InContext Editing regions for use by the client. In this scenario, your client has requested the ability to edit both the catalog page and the index page of DoSomeTravel.com, to adjust the thumbnails and the tour descriptions as needed. To fulfill this request you will be adding InContext Editing capability to the index.html and worldwide-travel_catalog.html pages contained in the site. In the companion tutorial, Editing a product catalog using InContext Editing, I'll show you how easy it is to edit an InContext Editing enabled website from the client's perspective. All files related to DoSomeTravel.com are included in the sample files that accompany this article.

Note: I want to thank Project Seven for generously allowing me to use (and customize) one of their beautifully simple Page Pack layouts (Curvitude). The pages are pure CSS layouts, and should be easy to modify for your own use by following the steps outlined in this tutorial.

Requirements

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

Dreamweaver CS4

Sample files:

Prerequisite knowledge

Familiarity with HTML and the use of Dreamweaver to create web pages as well as the article, Getting started with InContext Editing for developers.

Page 1 of 4
Next Page

About the author

Murray R. Summers is an Adobe Certified Web Site Developer, Dreamweaver Developer, and Community Expert. He has contributed chapters to several books on Dreamweaver and co-authored a book on Dreamweaver Templates. He used to be a technical editor of Roadmap to Macromedia Contribute by Joseph Lowery (Macromedia Press, 2003) and a number of issues of The Missing Manual series for Dreamweaver, including the one for Dreamweaver CS4. He has served as an invited speaker at every TODCON (international) conference since 2001 (missing only 2008). His company, Great Web Sights, has been active in web development since 1998. Murray lives in the rural Philadelphia area with Suzanne, his wife, and Carly, his daughter, who is currently attending Clemson University (go Tigers!).