Altering the Start Page

To the first-time user, the Contribute Start page might appear to be little more than a nicely designed, standard Web page. Across the top stretches a header logo with a series of links on the right leading to tutorials and other assistance. More links on the left open the home pages for your connectionsagain, looking like traditional Web site home pages.

But a great deal more is going on under the hood than is obvious. The links under the "Begin editing my websites" heading, for example, are dynamically inserted according to the connections available. Although this integration of external data and Web page is usually not possible outside of an application server environment, Macromedia engineers developed a novel approach that capitalizes on Dreamweaver's template technology, making this kind of functionality possible while keeping the page customizable.

If you've done any extensibility work with Dreamweaver, you're no doubt familiar with the Configuration folder. Contribute, too, has a Configuration folderfor the system as well as the individual user. The key to understanding how the Contribute Start page works is realizing that what the user sees when opening Contribute is a child page stored in the user Configuration folder, which is based on a template found in the system Configuration folder. All Start page customization work is applied to the template file, not the child page.

When customizing Contribute's help system, you'll find yourself frequently returning to Contribute's system Configuration folder; the easiest way to navigate within this folder is to create a Dreamweaver site pointing to its location.

1.	Make sure that Contribute is not running. In Dreamweaver, choose Site > Manage Sites. When the Manage Sites dialog box opens, click New > Site. In the Site Definition dialog box, enter Contribute 3 System in the Site Name field. Click the folder icon next to the Local Root Folder field. When the Choose Local Root Folder dialog box opens, navigate to the Contribute 3 Configuration folder. On Windows systems, you'll typically find the folder at this location: c:/Program Files/Macromedia/Contribute 3/Configuration. On Macintosh systems, you'll find it at [System]:Applications:Macromedia Contribute 3:Configuration, where System is the name of your primary hard drive. Choose Select (Choose) when Configuration is the chosen folder. Leave the rest of the options at their default state and click OK to create the site. When you return to the Manage Sites dialog box, click Done. If you've never before encountered the Contribute Configuration folder, you'll be amazed at the sheer number of folders and files. Contribute's Configuration folder follows the same structure as Dreamweaver's, although it has certain sections specific to Contribute. Any folder that begins with a "CC" is a Contribute-only folder.
2.	In Dreamweaver's Files panel, first expand the Content folder and then the CCWelcome folder. Within the CCWelcome folder, double-click welcome.dwt to open it for editing. Notice that in the CCWelcome folder, there are several style sheets as well as various image and asset folders. Any dependent files appearing on the Start page must be at the same directory level as welcome.dwt or within a subfolder. Tip For a special treat, expand the Ringo folder, select CPSwizards.htm, and press F12 to preview in your system browser. Click the central image that appears to get a behind-the-scenes look at the team behind Contribute and Contribute Publishing Services; be sure to roll over any available link to see the real Easter Egg surprise. (An Easter Egg is a feature hidden within a program by the developing engineers and known only to a select few.)
3.	Take a moment to examine the structure of the page. If necessary, enable View > Visual Aids > Invisible Elements so you can see the various template regions. The first aspect to note is that something is missing: There are no overall editable regions. The entire template is modifiable; if desired, you could replace the page completely with your own design. But waitbefore you change anything, there are numerous special features on this page that are very helpful. Note the repeating region, Site, which contains the list of available connections. Surrounding this area is an optional region labeled HasSites; if the user has one or more connections defined, the template parameter HasSites is set to true and this optional region is shown. If not, the region immediately below it, marked !HasSites, is displayed. A similar arrangement governs whether the "Don't show again" checkbox is checked. Let's keep these special features of the Start page and add a customizing touch by replacing the Contribute logo with one from the organization.
4.	In the upper-right corner of the page, double-click the Contribute C logo to open theSelect Image Source dialog box. Navigate to your local Design Deploy site. From the images folder, choose logo_start.gif; if necessary, click OK. When Dreamweaver notifies you that thefile is outside of the current site root and asks whether you want to copy it there, click Yes. In the Copy File As dialog box, open the Content folder first, followed by the CCWelcome folder, and then finally the images folder within CCWelcome, and then click Save. Next, you'll change one of the helper links in the right-hand column to personalize it for Bounty General.
5.	Select the text "Create a connection to a website" and delete it. In its place, enter the following text: E-mail the Help Desk or call (x5545). Select the word "E-mail" and, in the Link field of the Property inspector, enter mailto:[e-mail]. Place your cursor before the word "Help" and press Shift+Enter (Shift+Return) to insert a break (<br>) tag. Insert another break before the word "or" and then press F5 to refresh the table. Adding the <br> tags ensures that the original design is adhered to, but you've also created an easy way for users to contact the Bounty General Help Desk. The remaining step is to replace the image that accompanies the new text.
6.	Double-click the image placeholder to the left of the newly added help message. Navigate to the local Design Deploy site again and choose helpIcon.gif from the images folder; if necessary, click OK. When Dreamweaver notifies you that the file is outside of the current site root and asks whether you want to copy it there, click Yes. In the Copy File As dialog box, locate the images folder as before and click Save. Why is the original image displayed as a placeholder? If you noticed the src attribute for the image before it was replaced, you saw this pathimages/@@(ConnIcon)@@. This path indicates a template parameter (as discussed in Lesson 9). Here, Contribute changes the connection icon depending on whether the user has any available connections. Your design work in Dreamweaver is doneit's now time to enjoy the fruits of your labors in Contribute.
7.	Choose File > Save in Dreamweaver. Launch Contribute. When the Start page is displayed, click the E-mail link. When you're designing a custom Start page for your organization, remember to balance access to general Contribute resources with access to resources specific to your organization. You probably want to keep the automatically generated link for connecting to your sites, for example; other elements (such as the Flash movie at the bottom of the page) might be less helpful to your users.