In previous installments, I have explored how to configure the Adobe InContext Editing Server for a client site, and how to create a catalog site for a fictitious Travel Agency, Do Some Travel. In this article, you will see how clients might use the editable catalog and pages on the site to adapt it to their changing travel business by adding or removing tours, images, and descriptions. All files related to DoSomeTravel.com are included in the sample files that accompany this article.

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 Getting started with InContext Editing for end users and Getting started with InContext Editing for developers.

Requirements

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

Dreamweaver CS4

• Try
• Buy

Sample files:

• incontext_editing_client.zip (ZIP, 22K)

Prerequisite knowledge

Only an understanding of how to work with the InContext Editing tools in editing your web pages.

Getting started

Note: You need an instance of the dosometravel.com demo site uploaded and available on the Internet so that you can follow along. If you do not have this, then you will first have to step through Creating a product catalog using Dreamweaver and InContext Editing to set up your demo site. For your convenience, the sample files include a zip archive of the completed site (dosometravel_site.zip).

After your demo site is set up, follow these steps:

1. Browse to the dosometravel site's home page and press Ctrl+E to enter InContext Editing. (I'm assuming you have already configured the InContext Editing Server for access to this site as described in my companion tutorial.)

2. Log in to the InContext Editing with your email address and password at the prompt (see Figure 1).

   

   Figure 1. The InContext Editing Login prompt.

   After logging in, you will see the familiar landing screen shown in Figure 2.

   

   Figure 2. The InContext Editing Login landing page

3. Click the Edit Page button.

You're now ready to begin the tutorial proper.

Editing the sidebar tour image thumbnails

Do Some Travel offers attractive tour packages for budget-minded travelers. From time to time, the offering changes due to changing trends or new partnerships. The client has decided to discontinue the Haleakala tour but at the same time, she wants to add a tour to Costa Rica. The simplest way to do this is to replace the thumbnail for Haleakala with one for Costa Rica.

1. Select the Haleakala thumbnail image in the left sidebar of the home page (index.html).

2. Click the image icon shown circled in red in Figure 3

   

   Figure 3. Select the Haleakala thumbnail image (note the red circled icon in the upper left).

   The tooltip will read "Insert and manage images", and then adjust the Media location (shown circled in blue in Figure 4) to My Computer (so that you can upload the new image file).

3. Click the Change button shown circled in red in Figure 4.

   

   Figure 4. Click the Change button shown circled in red, and browse to and select the replacement thumbnail image

   As soon as you select the image called "costarica-waterfallTH.jpg" (included in the ZIP archive that accompanies this tutorial), the upload of the image begins. You will see the image change to one of a gentle tropical waterfall (see Figure 5).

   

   Figure 5. The Haleakala thumbnail has been replaced with the Costa Rican waterfall.

   Because this is a new tour, the client wants to move that thumbnail image to the top of the stack.

4. With the image still selected, click the up arrow three times to bring that thumbnail to the top of the sidebar images. You will have to remember to repeat this process on the catalog page as well (see the next section).

   The client also wants a mouseover of this thumbnail to describe the image

5. Click the Advanced button on the upper, right-hand corner of the screen (see Figure 6).

   

   Figure 6. The Advanced button (outlined in red) allows you to edit the image's tooltip, alignment, or horizontal/vertical spacing.

6. In the pop-up menu, in the Tooltip text box, enter Costa Rican Waterfall for the image's title attribute (see Figure 7).

   

   Figure 7. Setting the title attribute (tooltip) for the waterfall thumbnail image.

   After entering this new tooltip content, it is important to "set" it in place: Click another field, or use the tab key before clicking away from that menu and closing it.

7. To save the changes to this page, click Save Draft (this is important; do this first), and then click Done (see Figure 8).

   

   Figure 8. To complete editing this draft, click Save Draft (red outline) and then Done (red arrow).

   So far, you have only created a draft page (as shown on the lower left of the landing page which you've reached after clicking Done). To make these edits live, the draft must be published. Clicking the Publish Draft button will do exactly that. Figure 9 shows both the page status and the Publish Draft button.

   

   Figure 9. The page status is shown on the left (outlined in red), whereas the publish draft option is indicated by the red arrow.

8. Click Publish Draft, and respond to the confirmation prompt by clicking again on Publish (see Figure 10).

   

   Figure 10. Click the Publish button to push the edited page live.

   At this point, half of the changes are done. The client must now remove the Haleakala tour from the catalog page, and adjust both the text content and the images. When publication of the page is confirmed, you return to the Edit Site landing page.

Next, you need to navigate to the catalog page (catalog.html) to begin the tasks outlined below. You can do this either by clicking the new waterfall thumbnail (although the link still specifies the Costa Rica content on the catalog page; since that anchor is not yet in place, this click will just take you to the top of the page), or by clicking the Catalog menu option on this page.

Editing the tour details on the catalog page

In summary, the following tasks must be performed:

1. Click Edit Page to begin the editing session.
2. Select the Haleakala thumbnail and replace it with the Costa Rica one. (Note that since this thumbnail file has already been uploaded, you do not need to upload it again; just select My Site from the location list, and find the thumbnail image in the default image folder, costarica-waterfallTH.jpg.)
3. Add the "Costa Rican Waterfall" tooltip using the Advanced button.
4. Complete the editing of the thumbnail in this page's sidebar by moving it to the top of the stack.
5. To be safe, click Save Draft.

Now the client can turn to the main tour section, replace the image, edit the content, and relocate the tour to the top of the stack.

1. To begin this process, select the enlarged image of Haleakala, and use the same process as used for the thumbnail image to replace it with an enlarged waterfall image.

2. Browse to and select the enlarged costarica-waterfall.jpg image from the media location on your computer.

   

   Figure 11. Replace the enlarged Haleakala image in the tour catalog content.

3. Move this tour to the top of the tour catalog by clicking the up arrow on the editable region three times.

   The entire tour container is editable, which will allow you to change both the headline for the tour, as well as the details.

4. Select the words "Mount Haleakala on Maui" and replace them with A Gentle Costa Rican Waterfall, and because this is the featured tour, edit the price from $999 to an irresistable $850. At this point your content region should appear as shown in Figure 12.

   

   Figure 12. Edit the tour's contents.

5. Finish this process by editing the tooltip on the enlarged waterfall image: select the image and then click the Advanced button.
6. Enter Enjoy this lush scenery in Costa Rican rain forests as the tooltip.
7. To complete the task, save the draft, click the Done button, and publish the draft.

Quick and easy–the site now reflects the latest tour information, all done by the client using the capabilities of Adobe InContext Editing.

Where to go from here

In this article, I have described how the Do Some Travel client might edit the company's website, DoSomeTravel.com. The process is simple and straightforward. Introduce it to your clients and see what they think.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author