Accessibility

Table of Contents

  1. Introduction
  2. Getting started
  3. Combining Spry, Dreamweaver, and InContext Editing
  4. InContext Editing with Spry widgets

Using Dreamweaver, InContext Editing, and Spry to build a dynamic site

Getting started

Ok, so how about a demo? Follow my lead:

  1. Create a new site in Dreamweaver, and within that site, create a new HTML file named test1.html.

  2. Enter the following code between the <body> tags: 

    <h2>All About Me</h2>
<div></div>

    The <h2> tag is simply a title for the page. I created a simple <div> that will contain some content later on. Now for the fun part.

  3. Click inside the first div tag and then switch to the Insert menu in Dreamweaver. In the pop-up menu, select InContext Editing (see Figure 1).

    Insert menu set to the InContext Editing section.

    Figure 1. Insert menu set to the InContext Editing section.

  4. Click Create Editable Region. Dreamweaver may (and it should only do it once) ask if you want to copy some dependant files (see Figure 2)

    The first time you use InContext Editing for a site, Dreamweaver will copy a few files.

    Figure 2. The first time you use InContext Editing for a site, Dreamweaver will copy a few files.

  5. Click OK. You will see a slight change to the div tag:
<div ice:editable="*"></div>

The div tag now has an ice attribute added to it. This is going to be used later on by the InContext Editing service to identify the region for editing work. Dreamweaver also added a JavaScript tag to the top of my page:

<script src="includes/ice/ice.js" type="text/javascript"></script>

(For folks worried about proper HTML validation, note that Dreamweaver also added an xml namespace to the top of the document.) At this point you have to deploy the file to the server.

As I mentioned above, I set up a web server at http://icedemo.coldfusionjedi.com. I used my FTP tool to push the file to the server. (Dreamweaver has nice support for this as well, but I haven't played with it yet!) After I put the file online, I verified I could target the URL: http://icedemo.coldfusionjedi.com/test1.html. Since I had only set up an H2 tag and an empty div there really isn't much to see.

So how do you edit? Remember when Dreamweaver inserted code into the page? When it did it enabled a keyboard command. On Windows machines, that key combo is Ctrl+E; on the Mac, it is Command+E. (If you want to dig into it, you can see this in the include folder in a file called ice.conf.js.)

  1. Press Ctrl+E (or Command+E) and you will be prompted to log in (see Figure 3)

    The login prompt

    Figure 3. The login prompt

    Note that you are asked for your Adobe ID. This is not something you have to set up for the client. This is your regular Adobe ID that is used in a variety of services at Adobe.com.

    What's nice about this is that I can use the same ID to log in to any InContext Editing enabled site. Now, before you freak out (I did!), this does not mean that anyone with an Adobe ID can edit your content. Remember that I mentioned that you need a FTP server setup?

    After you log in, a new toolbar will appear on top of the page (see Figure 4).

    The InContext Editing toolbar.

    Figure 4. The InContext Editing toolbar.

  2. Now click the Edit button. You will now notice a region where our div tag had been set up (see Figure 5).

    The page with the editable content highlighted.

    Figure 5. The page with the editable content highlighted.

    Nice and obvious, isn't it? You can click in the box and start typing, using any of the editing tools above. I did some basic typing and played a bit with the look and feel of the text (see Figure 6).

    I'm very creative when I need to write some quick text.

    Figure 6. I'm very creative when I need to write some quick text.

  3. Click Save Draft, then Done. You will be presented with a Draft version of the page (see Figure 7).

    Figure 7. The draft version of the page.

    As you can see, the draft provides a realistic view of the content. This is a much better experience for clients. They can use editing tools they are already comfortable and see the results right away. The last step is to publish the draft.

  4. Click the Publish Draft button, and when prompted, confirm that you really do want to publish. (It would be nice if Adobe provided a "Don't bug me with prompts, when I say Publish I mean Publish" advanced mode!)
  5. Since this is the first time you are saving a change to your site, InContext Editing needs you to set up information about the site. You will only be asked to go through this once.

  6. Enter a name for your site. The URL is prepopulated (see Figure 8).

    The Site Address URL text box is prepopulated.

    Figure 8. The Site Address URL text box is prepopulated.

  7. Click Next. You will be prompted to enter your FTP information. This is required so Adobe can save files to your server (see Figure 9).

    Enter your FTP information.

    Figure 9. Enter your FTP information.

  8. The next page of the wizard is optional. If you need to specify a root folder for the FTP connection, you can set it here. Otherwise, just click Save.

InContext Editing will work for a few seconds, FTP-ing your changes over the original and then you're done! Hopefully you can see how powerful this feature is. By simply marking a region as editable, clients get a simple way to update the content on their websites. All without bugging you or needing to create an Admin site.

Let's take it a step further and look at how you can mix both Spry and InContext Editing for powerful Ajax applications with the ease of InContext Editing.

Page 2 of 4
Previous Page
Next Page