Contribute Tutorials

Contribute Tutorials

  1. Connect to your website
  2. Resetting your Contribute connection
  3. Edit a page
  4. Create a new page
  5. Create and edit anchor links
  6. Adding and editing images
  7. Save a draft for later
  8. Roll back a web page to a previous version
  9. How to properly format and style text
  10. Edit sidebars and other include files
  11. Create a link to a document or file
  12. Embed videos and other media

Create a connection to your website

Note: if you don't have Adobe Contribute CS5 installed on your computer yet, please contact the ITS Help Desk to request an installation.

Once you have Contribute installed, please contact us at web@callutheran.edu to request a Contribute account if you have not already done so. We need to know the names and CLU emails of everyone in your department who will be using Contribute on this computer.

When your account has been created, you need to create a connection to your website before you can begin editing. Here's how:

  1. Open Contribute
  2. In the Address bar near the top, copy and paste the following: connect:contribute.callutheran.edu
  3. Hit Enter
  4. The connection wizard will begin. If you are asked to login, please use your myCLU account. Click the "Trust this server" and "Remember my password" boxes.
  5. When the wizard finishes you are now ready to edit your website.

Resetting your Contribute connection

Sometimes your connection can become broken. The easiest way to fix it is to remove the connection and recreate it.

  1. Open Contribute
  2. Remove your existing connection
    • On a PC:
      1. Go to Edit > My Connections
      2. Select "Publishing Server"
      3. Click the Remove button
      4. Save and close the window
    • On a Mac
      1. Go to Contribute > My Connections
      2. Select "Publishing Server"
      3. Click the Remove button
      4. Save and close the window
  3. In the Address bar near the top, copy and paste the following: connect:contribute.callutheran.edu
  4. Hit Enter
  5. The connection wizard will begin. If you are asked to login, please use your CLUnet account. Click the "Trust this server" and "Remember my password" boxes.
  6. When the wizard finishes you are now ready to edit your website.

Edit a page

Contribute has two modes: browsing and editing. When you start Contribute, you will be in browse mode. Navigate to the page that you want to edit. Once there, click the "Edit" button near the upper-left. (If you see a "Connect" button instead, that means Contirbute isn't connected to the website yet. Click Connect, and then the Edit button should appear).

When you are in edit mode you can make changes to the text and apply formatting using the controls in the toolbar. When you are finished making changes, click the "Publish" button to publish the updated page.


Create a new page

This tutorial will teach you how to create a new web page using Contribute.

There are two main steps to create a new page:

  1. Create the page
  2. Create a link to the new page from another page (so that people will be able to find it)
Creating the page
  1. Navigate to an existing page in the same section that you would like the new page to reside in.
  2. Click the "New..." button in the navigation bar at the top.
  3. In the box that pops up, make sure to select "Copy of Current Page". This will create a duplicate of the page you are viewing so that we can use it as a starting point for the new page.

    copy.png
  4. In the lower right of the box, enter a Page Title. It's best to make this a short but descriptive name for what the page is about.
  5. Click OK. The new page will be created and and Contribute will go into edit mode.
  6. Replace the existing content with new content (text, images, etc.), making sure that the top of the page has a "Heading 2" page title (see the Page Styling article for more info).
  7. When you are ready to publish the page, click the "Publish" button at the top. If you want to save this page and finish it later, click "Save for Later".
  8. If a box pops up asking "Do you want to publish this page without linking to it?", click Yes. You can also click the "Don't warn again checkbox to prevent this box from popping up again.
  9. Choose a file name for this web page. Contribute will suggest a file name based on the page title you entered in step 4. (Use only lower case letters, numbers, and substitute dashes for spaces).  Then click "Publish".
  10. Contribute will publish the new page and take you into view mode. You are now looking at your new page! But remember, no one will find it until we link to it from another page...
Creating a link to your new page
  1. Most likely, you'll want to create a link in the sidebar navigation (list of links in the left column) for this section of your site. To browse to the correct sidebar file, select it from your Bookmarks menu, or click the "Choose..." button in the upper right. If you use the Choose method, find your site's "includes" folder and open the file sidebar file for the section of the site you're working on. (If you don't see an "includes" folder contact us to upgrade your website)
  2. Once you've found the correct sidebar navigation file, go into edit mode. Add a new line to the bulleted list, using the same name that you used for the page title in step 4. Then highlight the text, and click the "Link" button and choose "Drafts and Recent Pages..."
  3. In the box that pops up, select the new page you created (it should be the second page listed). Click OK. Then publish this page to save the changes to the sidebar navigation file.

All done!


Anchors are bits of code added to a webpage that allow users to jump to certain sections of the page without leaving the page.

Anchors and anchor links are very useful tools on pages with very large quantities of information and should only be used in situations where users are looking for a specific piece of data on a page loaded with information. If you're providing a step-by-step guide, for example, anchors should be avoided because you want the users to read all of the information on the page, not just a certain part. But a page of Frequently Asked Questions is ideal for using anchors and anchor links.

To create an anchor:
  1. Place your cursor where you want your anchor to appear. This is where the user will be sent when they click on the anchor link.
  2. From the "Insert" menu above the Contribute toolbar, select "Section Anchor"
  3. Type in a name for the anchor in the textbox. Use one, descriptive word with no capitals and no punctuation.
  4. Click "OK" and you will now see a small black flag that represents your anchor. You'll notice that this flag only appears while you are in Page Edit Mode.
  5. Repeat this process for each anchor you want to create.
To create an anchor link:
  1. Find or type the text you wish to use as the anchor link.
  2. Highlight the text.
  3. Click on the "Link" button on the Contribute Toolbar and select "Drafts and Recent Pages"
  4. On the left side of the dialog box you will find a list of all the pages you've worked on. Click on the title of the page you are currently working on.
  5. Click the button labelled "Advanced" located just below the file list.
  6. Select the desired anchor from the "Section Anchor" drop-down list that now appears just above the "Advanced" button.
  7. Click "OK"
  8. Repeat this process for each anchor so that every anchor has a corresponding link.
  9. Click "Publish" when you're finished editing.
To delete an anchor:
  1. Right-click on the anchor you wish to delete.
  2. Select "Cut"
  3. Right-click on the link corresponding to the anchor you just deleted.
  4. Select "Remove Link"
  5. Delete the text if you no longer want the text to appear.
  6. Click "Publish" when you're finished editing.
To edit an anchor:
  1. Right-click on the anchor you wish to edit.
  2. Select "Anchor Properties"
  3. Type the new name of the anchor.
  4. Right-click on the link corresponding to the anchor you just changed.
  5. Select "Link Properties"
  6. Click on the title of the page you are currently working on.
  7. Select the new anchor name from the "Section Anchor" drop-down list that now appears just above the "Advanced" button.
  8. Click "OK"
  9. Click "Publish" when you're finished editing.

Adding and editing images

You can easily insert a photo or image into a web page and format it's size and alignment.

  1. Place the insertion point in your draft where you want the image to appear.

  2. Do one of the following:

    • Click the Image button in the toolbar, OR

    • Select Insert > Image from the menu bar

  3. Choose the "From My Computer..." option.

  4. Browse to and select the image, and then click the Select button.

    Note: You must select a specific file. You cannot select a folder to insert in a Contribute page.

  5. If the Image Description dialog box appears, enter text to describe the image for users with disabilities or for users whose browsers are set to display text only, and then click OK.

    The image appears in your draft. (To make the image web-ready, Contribute reduces large images to the size pre-set by the Contribute administrator.)

After the image has been inserted you can resize, rotate, and align the image by right-clicking on it and selecting the desired property.


Save a draft for later

Did you know you can save a page you're working on as a draft and finish it later?

When in edit mode, click the "Save for Later" button at the top to save it as a draft.

It will be listed in your Pages tab in the upper left column. When you come back just click that draft to go into edit mode and continue editing.

Now you know!


Roll back a web page to a previous version

Uh oh. Something went wrong. Maybe you accidentally deleted something and then published the page. No worries, you can always "roll back" to a previous version (up to 15 past versions). Here's how:

  1. Navigate to the web page you want to roll back.
  2. Under the File menu, choose Actions > Roll Back to Previous Version...
  3. The pop up box will list all the previous versions of this page that are stored in its history. Select a version to preview it. When you find the right version, click "Roll Back." That version will be published.

Phew.


How to properly format and style text

Most of our web pages have text on them that we want people to read. The problem is, people always seem to be in a hurry when they're browsing the web. It's in your best interest, and your reader's, to format the text on your page so that it is as easy to scan and read as possible.

Here are some general guidelines for designing the information on your pages.

  • Make sure you have a page title at the top, and that it is a Heading 2. The page title should accurately describe the purpose of  the page. You can make text  a heading by highlighting it and then selecting a heading type from the Style dropdown menu under the Publish button.
  • Heading 1 should never be used. We reserve that for specific parts of a web page template.
  • Heading 2 should only be used once at the top of the page.
  • You may use Heading 3 - 6 as much as you like.
  • Use headings to break up long passages of text and make it easier to scan. The heading should describe the section of text that follows it.
  • Use bulleted and numbered lists whenever possible. If you have a paragraph that lists may items separated by comma or semicolon, use a list instead - they are much easier to scan.
  • Break up long paragraphs. A paragraph should be no more than 3-4 sentences. People tend to scan the first few words of a paragraph in order to see if that paragraph contains what they're looking for. If not, they move on. Don't make them hunt for information buried in a large paragraph.
  • Omit unnecessary words. Say what you need to say with as few words as possible. Value your reader's time.

Edit sidebars and other include files

An "include" file is a section of a web page that exists in a file separate from the web page. Most include files are sidebars, or the list of navigation links in the right or left column of a page. When you edit the web page, the content of the include file will disappear from edit mode.

If you need to edit the content in a sidebar, you will have to navigate to the file and then edit it directly.

  1. To find the correct include file, click the "Choose..." button in the upper right.
  2. A dialog box will pop up that shows you the folder and file structure of your website. Double-click the folder named "includes"
  3. If you do not see a folder named "includes" contact the Web Communications team at web@callutheran.edu to upgrade your website.
  4. Inside the "includes" folder you will see a number of files. Look for a file that contains the word "sidebar" or "nav" as well as the section of the website that you are editing. Open that file.
  5. Click "Edit Page".

Make your changes. If you recently created a new page and need to add a link to it:

  1. Create a new line in the bulleted list, type the text for the link, highlight the text and choose "Drafts and recent pages..." from the Link button in the toolbar.
  2. Select the page you want to link to. It should be the second page listed. Click OK.
  3. Publish the include file.
  4. You can view your website in a browser to verify everything looks good.

If you want visitors to be able to download a PDF, Microsoft Office document, or some other kind of file, follow these steps.

  1. Highlight the text that you want to make into a link.
  2. Try to avoid using "click here." Instead, use the name of the document and make it a call to action, such as "Download the MBA Program Application."
  3. Click the Link button in the toolbar and choose "File on my computer..."
  4. Click the "Browse" button to locate the file on your computer.
  5. Click OK
  6. When you publish the page, a copy of the file will be uploaded to the server. If you need to make a change to the file or upload a different version, you will need to edit the page again, right-click the link and choose "Link properties" and select the file from your computer again.

Embed videos and other media

Advanced Contribute users can use Contribute to add custom HTML code snippets to Contribute pages. For example, you can insert code snippets that embed Youtube videos or audio files in your web pages. However, you can add code snippets only if the website administrator has granted the relevant permission to your user role.

  1. Browse to a web page.

  2. Click Edit Page.

  3. Place the insertion point in your draft where you want to insert the HTML code snippet.

  4. Select Insert > HTML Snippet.

    The Insert HTML Snippet dialog box appears.

    Note: If your website Administrator has not enabled the Allow HTML Snippet Insertion option for your user role, the HTML Snippet option in the Insert menu will be disabled.
  5. Paste the HTML code snippet you have copied from another source such as Youtube.

  6. Click OK.

The HTML code snippet is embedded in the draft. Publish the page to make sure it was embedded properly.

©