Contribute Article

Part one of this two-part tutorial teaches you to use Contribute as a project contributor, not the site designer. The second part of the tutorial, "Administering Macromedia Contribute," will teach you to administer the site and create the site infrastructure, so your users can effectively use Contribute.When you complete both tutorials, you will be able to build a site that allows you to define participants' access in your site and what they can do, such as: edit or add pages and links, import Microsoft Word documents without your assistance, and more. In short, you won't need to hold their hands or fear that they might mistakenly damage the work you've created.

System requirements
To complete this tutorial you will need:

1. Macromedia Contribute. Install the program locally on your machine.
2. Microsoft Internet Information Server (IIS) Web Server installed locally on your machine. Your user will not need to install this, but you will need to install it for this tutorial. Typically, your user will connect to the website or a staging server, depending on your team's workflow.
3. The tutorial demo files. Download them (280K). Follow the steps in the next section to install the tutorial demo files.

Installing the tutorial demo files
Unzip the sample files on your desktop. The ZIP file will unzip the following two items:

• A folder named TrioNet, which contains files that you will use to complete the tutorial. Move the TrioNet folder to your webroot directory (for IIS, this is typically at: c:\inetpub\wwwroot).
  
  If you use another web server or have defined another webroot, you can place the folder there.
  
  Note: You will have to change some of the steps in this tutorial if you choose to place the folder outside the webroot directory.
  
  
• A connection key, named TrioSupplierProject-Users.stc. You can leave it on your desktop for now.
  
  Note: You can put the file anywhere on your system, as you can throw it away when you are done with it.
  

1. Open Contribute. If you are working without an Internet connection, a dialog box will appear, asking if you would like to connect to the Internet. Select "Try Again" to connect, and it will open locally.
2. On the application's left side, the Pages panel lists the pages and sites you can edit. (Initially there are no pages and sites you can edit; the Pages panel displays "Browser:Welcome" for now.) When you add sites to edit, they will show up here. You'll add one below.
3. Beneath the Pages panel, the How Do I panel includes help topics and tips.
4. The toolbar in the Contribute editor/browser is at the top of the screen. It is much like a regular web browser, with buttons for Back, Forward, Stop, Refresh,and Home Pages choices. When you select a page to edit, the toolbar options change to edit options.
5. The right side of the screen contains the Contribute editor/browser. Contribute is different from Dreamweaver; it is a full browser as well as an editor. You can browse your page to navigate to linked pages. While browsing, you can you can edit the page directly without switching between the Contribute editor and the Contribute browser.
   
   When you open Contribute for the first time, the Contribute browser displays a tutorial so you can learn more about Contribute, or you can start editing pages with Contribute immediately. Leave the Macromedia Contribute page displayed. Leave the checkbox "Don't show this page on startup." unchecked as you may want to explore the tutorials after going through this tutorial.

When you use Contribute, you must connect to a web server to specify pages you wish to edit. You can connect to a web server in two ways:

• You can create the connection to the site, much like you would in Dreamweaver MX.
• You can use Dreamweaver MX 6.1 or Contribute to create a connection key. You'll give the connection key to your users (by mail or they can download it from your intranet server). In this way, the administrator can set up users easily without giving them specific steps, explaining how a web server works, or how to use FTP. It means you can get down to business fast.

Setting up Contribute for the tutorial
This step will show you how to set up the connection key in Dreamweaver MX 6.1 so your users can set up a connection easily on their own. Typically, this is how a Contributor user will work as well.

1. Click the Start Editing button.
2. The Connection Wizard dialog box appears (see Figure 2) giving you a choice of opening a connection key (double-click it) or creating a new connection. Since this tutorial provides you with a connection key, go to the next step.

3. With the Connection Wizard dialog box displayed, open the TrioNet folder in your webroot directory and double-click the "TrioSupplierProject-Users.stcTrioSupplierProject-Users.stc" connection key.
4. In the Import Connection Key dialog (Figure 3), enter your name, e-mail address, and the connection key password.
   
   Note: This tutorial's connection key password is "triocontrib" (without the quotation marks).
   
   This dialog box imports the site settings into Contributor and sets you up to check-in and check-out pages. You won't mistakenly overwrite another person's work in this system. Since the connection key can contain the site's username and password for doing almost anything to the site, you must always present the connection key password; it prevents unauthorized users from accessing the site. In part two of the tutorial, "Administering Macromedia Contribute," you'll learn how to create connections that allow different levels of site access and features available in Contribute.
   
   Contribute uses the e-mail address for the e-mail review process when you create page drafts. You will learn more about the e-mail review process in part two of the tutorial, "Administering Macromedia Contribute."

5. Click OK. This displays the TrioNet site as the home page in the Contribute browser.

Editing a page in Contribute
Macromedia designed Contribute to function as a browser and editor at the same time. In the Contribute browser/editor, the TrioNet site displays. To navigate to a page you want to edit, simply click links in the site, browsing to the page exactly as you would in a browser. When you are ready to edit it, you click the Edit Page button to open the page in the Contribute editor.

1. Ensure that the TrioNet home page displays in the main window. If it doesn't, click the Home Pages button in the toolbar and select the Trio Supply Project. This is the Contribute browser, and the toolbar should look like Figure 4.

The toolbar has an Edit Page button, which switches the interface to the Contribute editor, so you can edit the page you're browsing. The New Page button opens a New Page dialog box, where you can create a new page in Contribute or from a Dreamweaver MX template.

Since the interface typically stays in the Contribute browser, there are also Back and Forward buttons that you can use to move through the browsing history, and Stop and Refresh buttons. Use the Home Pages button to select a home pages for each connection you've set up or imported.

Use the Choose button and the Address bar to enter or browse pages that may not be linked directly from your home pages. In Figure 4, the site is set to "hermes" which is the name of my computer. In your window, replace the Address with your machine name, or with 127.0.0.1, which is the local address for your web server on your machine.

2. Click the Edit Page button to change to the Contribute browser; note that the toolbar switches to edit options (see Figure 5).

3. Select different parts of the page.
   
   When you edit in Contribute, you don't get a Property inspector to change attributes as you do in Dreamweaver MX; you get a toolbar that works similarly to those in Microsoft Word or Excel, or in other office applications.
   
   Select the "News" text. You are going to change this to a Heading 1 in the next step.
   
4. With "News" selected, click the left-side blank pop-up menu in the Edit toolbar as shown in Figure 6. This pop-up gives you HTML paragraph style choices. Select Heading 1.

5. Explore the other options on the toolbar.

Contribute limits the set of available options to those a contributor would most commonly want to do. In part two, the Administration tutorial, you will learn how to change these options, or limit them more—if you don't want a contributor to have all the editing options available by default. You can also choose to enforce particular editing rules, such as enforcing accessibility information (for instance, adding alt text to image files) in inserted objects.

When you are done editing, click the Publish button. This saves the page on the server.

Note: In this case, since you are connected locally, the page will be saved to your local machine.

If you click the Save for Later button, this will save the page, but not on the web server. When you are working on a remote server, this allows you to keep the draft locally and continue working on until you are ready to publish it.

Creating a new page in Contribute
To create a new page, you can use the New Page dialog, which lets you select what sort of page to create. Macromedia designed Contribute to work with Dreamweaver MX, so you can allow your contributors to create new pages based on Dreamweaver MX templates. This protects your site's design effectively. Contributors can select the Contribute sample web pages, or create them from scratch. The following approach is my favorite, from an existing page.

1. From the toolbar, click the New Page button. This displays the New Page dialog box as shown in Figure 7.

2. In the New Page dialog box, click Supplier Template and name the page Ecco Supplier Datasheet in the Page title text box.
   
   The new page from the Supplier Template appears in the window in the Contributor editor.
   
3. Select Save for Later for the new page. This option saves a draft of the file locally. You can re-open the file as often as you like to edit it, but the remote side doesn't contain the page yet. To save the file and move it to the remote server, click the Publish button.

1. Click the Ecco Supplier Datasheet page to switch to the Contribute editor.
2. Select the placeholder text "Include Company DataSheet here" and select the Insert Microsoft Word Document option from the Insert Menu. Navigate to the Microsoft Word file located at:
   
   <web_root>\TrioNet\Documents\Documents\SupplierDataSheets\EccoPart.doc.
   
   Highlight the file EccoPart.doc and click OK.

Figure 8 shows how your Word file is inserted into your page in Contribute, preserving the Microsoft Word document's text styles, formatting, and table formatting. You can also link your pages to larger Microsoft Word files, or the original Word files. This reduces your page size and a user browsing the page can click a link and open the page in Word, which can be handy. You can also drag and drop Word files from the desktop to the page instead of using the buttons in Contribute. Contribute lets you choose how to link or import the file.

3. Publish the page.
   
   You may receive an alert dialog box indicating that a page is not linked; if this occurs, you won't be able to browse or edit in Contribute. Macromedia plans to fix that; for now, use the next step to fix it. Normally users will work from existing pages and create new pages as they need links, rather than creating pages and then linking them together.
   
   a) Click through the alert dialog box.
   
   b) In the Save dialog box, name the file "EccoSupplierDatasheet.htm" and save it to the "suppliers/ecco" folder in your site root.
   
   c) Click through the Congratulations dialog box.
   
   You've saved and published your draft. The main window displays the last page you browsed.

You need to edit one more page. Now that you have a detail page for Ecco Auto Parts, you need to link that new page to the Suppliers page which you haven't looked at yet.

1. If you're not in the Contribute browser, publish the page you are currently working on. This will move you to the browser. Browse the index page for the site; select the Trio Supplier Site from the Home Page's pop-up menu.
2. Click the "Read More" link in the TrioMotor Supplier Evaluation Project news item to browse to the Supplier Project page.
3. Click the Edit button to edit the page in the Contribute editor.
4. Scroll down the page to the Supplier List table and select the text for "EccoParts."
5. Click the Link button in the toolbar.
   
   You can link this text to an e-mail address, a new page that you can create, or a file. Select the option "File on My Computer...". You will see the Insert Link dialog box as shown in Figure 9. (The dimensions of this screen shot were edited to fit this tutorial.)

You can select several objects to link to, but you should link to the file that you created in the last step. Therefore, select the option "File on My Computer" and click the Browse... button to navigate to the EccoSupplierDatasheet.htm file in the suppliers\ecco folder in your TrioNet site.

If you click the Preview option, a preview of the page will show in the preview box. Click OK.

6. An alert dialog box may appear, stating that you should browse to the file in the Contribute main interface to edit the file. This can be confusing, since it doesn't apply to this dialog box (when making the link); you can ignore this warning.
7. You now have a link to the EccoSupplierDatasheet.htm in the table.
   
   If you want to add an e-mail link or a link to the URL for Ecco Parts, you can do that the same way, using some of the other options in the Link pop-up menu and the Link dialog box.
   
8. Click Publish to publish the Supplier Page.

Where to go from here
In this tutorial, you learned how to set up Contribute as a user and edit pages, create new pages, link to pages, navigate in Contribute, how to insert and link to Microsoft Word files, how to save drafts, and how to publish your files. This introduced you to Contribute from a Dreamweaver MX user's point-of-view. You can also visit the Macromedia user-to-user Contribute Online Forum. Team Macromedia members and other Contribute users can help you and answer your questions.

In the second part of this tutorial, you'll learn how to administer a site from within Contribute and Dreamweaver MX 6.1, how to set up a Contribute site, how to save a connection key for your user (so they can connect to the site without having to know how to go through the site setup wizard), how to set up user groups, and how to control access to the different features for different users.

Be sure to visit the DevNet regularly for articles and examples.

About the author
Matt Brown was formerly a Community Manager for Macromedia. He has served as technical editor for more than a dozen software books. Matt has taught courses at Foothill College and San Francisco State's Multimedia Studies Program and is a regular speaker at conferences and User Groups.