John Corb is the Managing Partner for NCR Corporation's Infrastructure Services Consulting team in the UK, focused on networking, security and project management for large organizations. Outside of his day job John provides occasional consultancy, design and development services for small businesses and some non-profit organizations.



Search the site:
(New search engine!!)


The Adobe Co-Author tutorial


Introduction

GoLive's Co-Author feature provides you with the capability to allow your client, or other users, to make changes to site content through a simple form-based editor - the Co-Author editor.

As well as changing the content of static pages, Co-Author can also create and automatically link-in entire new pages.

The editor is available at relatively low cost for Mac and Windows platforms. Copies of both binaries and one user licence are supplied with GoLive itself, additional copies/licences can be purchased separately.

A site that has been designed using GoLive on a Mac can be managed using the Co-Author editor on a Windows system (and vice versa).

This tutorial shows how to set up a basic page with some simple Co-Author managed content, once this has been understood it is straightforward to go on to add multiple fields and use Co-Author's image handling features.

If you've read Adobe's GoLive manual chapter for Co-Author but not succeeded in using it, then once you've got things working with the tutorial you should find that the manual makes a lot more sense.

After the first version of this tutorial was posted I received some excellent feedback and explanation from John Donaldson of Adobe. This has greatly improved my understanding of Co-Author and allowed me to make many corrections and improvements, my thanks to John for this. Any errors in this tutorial are entirely mine.

Explanatory Notes

Co-Author manages content in chunks called sections, each section defines the characteristics of one or more regions.

It is the regions that are the containers for each piece of managed content, such as a string of text or an image.

Each section also contains one or more templates, these control how the regions are incorporated into web pages, and also determine what type of page is generated. There are two types of template: list templates, and page templates.

  • List templates generate a single static web page, they can be populated with content from regions, and also with automatically created links to pages generated from page templates.
  • Page templates generate a uniquely-named page for each story, populated with content from regions. They can also be automatically linked into a previous-next chain.

Lynn Grillo's Co-Author tutorials provide a detailed example of using these two types of template together, a brief example is also given below.

An instance of a section with regions containing content is called a story, there may be multiple stories in a section.

Sections, templates and regions are defined by the site developer using GoLive.

Stories are created, edited, published, and deleted by the end-user using the Co-Author editor.

The site developer can also create stories using the Co-Author editor that is built into GoLive. Warning: Do not attempt to install the stand-alone Co-Author editor on a system that has GoLive installed.

In the example in this tutorial the region of a section that is to be displayed on a web page is in an HTML table cell, and a single list template is used, the table can also have cells that contain content other than Co-Author regions.

It is possible to use other HTML containers for regions, and there are many more options controlling the behavior of Co-Author than those shown in this tutorial.

The table containing the content is included in the web page using a GoLive component, but other ways of including or referencing an HTML file can also be used.

It is not necessary to actually use all regions of a section on a web page, in particular the content of one region in a section is required by the Co-Author editor for use as the story name, so it is often best to use that region just for an easy to use name rather than for actual content.

When the user is managing content they can create multiple stories in a section, this is useful if the section is defining a catalogue item for instance. Co-Author can be used to place all the stories on a single page, or to automatically create and link-to a new page for each story.

When setting up a section there are various options for controlling the order in which multiple stories will be rendered. If you cannot get the order you want from the 'real' regions a useful trick it to add an extra region and use it just to hold a two or three digit number (with leading zeroes) that can be used as a sort key to control the order.

Making a Page

Create a new site with just one page index.html.

Choose Special>CreateCo-AuthorSection, the section set-up window appears.

Give it a one-word title, mysection for instance.

Close (and save) the Co-Author section set-up window, by default your new section has just a single text region called name.

The new section is contained in a folder called mysection.section, with the settings held in the section file section.aglsec within this folder.

At this point take a minute or two and use the GoLive site browser to examine the file structure that exists under your new section, note the many sub-folders, you will need to access some of them later. During the rest of the tutorial look to see where new files are created in setting up the section and also when you add stories with the editor.

Create a new page called mytemplate.html in the Templates sub-folder of your new section's folder (this is not the site templates folder).

Add a simple one-cell table to this page, with just some text sometext in the cell, save it.

Open your section.aglsec file again.

Drag the PreviewPage point and shoot to the template file mytemplate.html in the site browser. (The Co-Author editor will then use this file to show a preview when a story is added).

Close/save the Co-Author set-up window.

Make sure the Co-Author palette is displayed (Window>Co-Author).

Open your template file, in Layout view, select the cell, in the Co-Author palette choose name from the ApplyRegion drop-down.

Select the whole table, you can tell when the selection is correct because in the Co-Author window the Repeat checkbox will be tickable and the legend to the right of the checkbox will read Defines a table, tick the checkbox.

Switch to Source view, at this point the body of the section template should contain a table like this...

<table repeat="all"><tr><td>
<!-- #BeginEditable "name" -->
<p>sometext</p>
<!-- #EndEditable -->
</td></tr></table>

If the template does not look like this then go back to Layout view and repeat the template set-up until it is correct.

Close/save the template file.

Do Special>Co-AuthorEditor, this opens up GoLive's built-in version of the CoAuthor editor.

At top left the Section: drop-down should have your section name (if you had multiple sections the drop-down would list them all), click on NewStory at the bottom, a field called name will appear, put some text in it, click Generate some progress windows should pop-up/vanish, click OK.

This should create the file mytemplate.html in the Pages sub-folder of your section's folder (the content of this file will be different from the file with the same name in the Templates folder).

Notes:

  1. The Publish button does the same as Generate, but also uploads the new pages to the site's publish server, which is probably not what you want at this point. The OK button simply saves the story, it does not generate or publish the pages.
  2. If you make any change to a section's template you can use the Special>CreateCo-AuthorPages menu option to re-create the pages for each story rather than going into the Co-Author editor. You need have selected, or have open, one of that section's files otherwise this menu option will be greyed out.
  3. If you are familiar with HTML then once you understand how things work you may find it easier to edit the files in Templates at source level rather than via the menus. But do not make manual changes to the file in the Pages sub-folder, you will lose them when pages are next generated.

Now that the section has been set up it can be linked to the actual web page where it is to be used.

Open index.html, in layout view drag a component Smart Object onto it, click on the component, then in the Inspector palette drag the point and shoot to the mytemplate.html file in the section's Pages sub-folder.

Close/save index.html.

Open your index.html file, if all is well you should see the text you typed in the Co-Author editor has now appeared in the table cell. Piece of cake, eh!

Now open the Co-Author editor and add a new story, type some content, click Generate, you should find that the new story has been added as an extra table when you view your index.html page. This works because we used a list template.

Pages and Lists

The difference between a page template and a list template is that the list template has the Co-Author repeat attribute on the containing HTML tag.

In this example the attribute was applied to the <table> tag, so the entire table is an element of the list and is repeated for each story. The attribute could instead have been applied to the <tr> or <td> tags, in which case that part of the table would be repeated instead. The attribute need not be applied to the container for every region in the section.

The default repeat="all" was used in this tutorial and applied to the whole <table> container, the Co-Author palette provides other options, these are described in the GoLive manual.

What Next

Section Set-Up Options

Once you've got the basics working the rest is fairly straightforward, you can experiment by adding extra fields to the section and try the different field types. Also try the different Sort and List Item options provided by the section set-up editor.

Linking List Pages to Dynamically Generated Pages

Create a new section, give it two regions, call the first pagetitle, call the second mycontent, add a list template with a body like this:

<table>
<tr repeat="all"><td>
<a href="mypage.html">
<!-- #BeginEditable "pagetitle" -->CA will put the page title here<!-- #EndEditable -->
</a>
</td></tr></table>

Add a page template called mypage.html, with a body like this:

<p><!-- #BeginEditable "pagetitle" -->CA will put the page title here<!-- #EndEditable --></p>
<p><!-- #BeginEditable "mycontent" -->CA will put the page content here<!-- #EndEditable --></p>

Add a story and generate pages, your Pages folder should now contain two pages, open the one with the same name as your list template, it should have a table with one row containing a link to the dynamically generated page for the story.

Add another story, generate pages, now your list page should have two links to the two story pages.

Images

The Co-Author editor's image handling has the useful feature that if the target <img> container has height/width specified in pixels then uploaded images that exceed these dimensions will be scaled to fit (smaller images will not be increased in size), again it is useful to experiment with this to see how it behaves on a test page.

Beware of using very large images and relying on Co-Author to reduce them in size, as a copy of the original image is cached in the section. This can eat up a lot of space.

Site Management

To grant a user of the Co-Author editor access to edit a site you must export the Site Locator file (File>Export>SiteLocator...) and give a copy of it to them. When they use the editor for the first time it will prompt them for this file, when they select it they will then be able to download the site and use the editor to manage the content in the sections that you have created.

Once a user has assumed responsibility for managing content then you must take care not to overwrite or delete their changes if you subsequently update the site.

To avoid this follow a manual protocol of notifying them that you will be making changes, so they should not make any until you advise them. Then you can download their changes, make your changes, upload the revised site, then advise the user to use the editor to download the site again, after this they can again safely make changes.

The Site Locator file includes the password (encrypted) and other details required to connect to the publish server, if any of these details change it will be necessary to supply the user with a new Site Locator file, so bear this in mind as an ongoing support task for every Co-Author site you create.

Using the Co-Author Editor

The Adobe documentation for the editor is fine, but for non-technical users the best option is to give them a demonstration of how to use it, or talk them through a practice session over the telephone, providing them with a simple 'cheat-sheet' might also be a good idea.

As of 12/2004 there are some problems with the Co-Author editor:

  1. on both Mac and Windows platforms it can create spurious <b/> and <i/> tags (this can happen if you use the styled text area's bold or italic attributes), the bug may be linked to what, if any, Doctype and/or DTD has been used. This problem typically strikes if the text area's content is altered anytime after a text attribute has been applied, for instance if a single word was bold then suddenly all text after that word will also be in bold. The way to repair this is to select all the text in the field, click the bold or italic button until all the text has the attribute, then unset the attribute to revert everything to plain text, deselect the text, then after all other changes have been made you can re-apply the required attribute(s) as required.
  2. on Windows (at least) there is a problem with the entry window for styled text if the region specified a size larger than about 100px. The window will render correctly but when you try to edit, only the upper 100px (approximately) of the window is active. The simplest workaround is to keep the field height less than 100px, if more space is needed the entry area will scroll correctly (and on the actual page the table cell will simply get taller to fit the text).