Los Medanos College header - takes you back to home page Jump to main content Future Students Current Students Alumni & Donors Business & Community Faculty & Staff Calendar of Events Library News A-Z index Staff Directory espanol blackboard Insite

Career Techinal Education Committee

Edit your own content with Adobe Contribute

Contribute is an inexpensive and very easy to learn program that allows you to make most of the edits necessary to keep your web site correct and current. To inquire about a copy, set up a training or to get a connection key please contact the LMC web administrator

Contribute Interface

The main areas of Contribute are outlined in the following table and serve as a legend for the image below.

Legend
1Pages Panel – Lists the current Web page open, drafts, and any messages sent to you for review. 3Toolbar – Shortcuts to some of the most common edit and browse commands.
2 How Do I Panel – Step-by-step instructions for performing common tasks in Contribute. 4Contribute Browser – Allows you to connect to a site, and find and edit a Web page.

Getting Started

Contribute allows you to connect to the server edit your web site instantly.  Once you have (published) your changes they are immediately available for the public to view.

To edit your site in Contribute you must first have a connection key that says what area of the site you are allowed access to. If you do not have one contact the web administrator to request one.

The workflow for editing your content is pretty simple. It starts with connecting, browsing, editing and publishing your content.

Important

You must connect to a web site before you can edit and publish pages on that site. The large button on the upper left will say one of three things: Connect, Edit or Publish. You will always start with connect.

Browse to a page

Contribute can simulate a web browser like Internet Explorer or Firefox is a web browser. Use the Contribute browser to find the web page you want to edit. The browser toolbar has the normal navigation buttons plus additional buttons specific to tasks in Contribute, such as Connect, Edit Page, Publish, and Choose. Some buttons appear only after you find a Web page and connect to that site.

    1. From the Contribute Start Page, click the name of your site to connect to it and to display the main Web page for that site in the Contribute browser.
    2. Browse until you get to the Web page you want to edit.
    3. If you want to edit a page that has no link to it yet, follow these steps:
        1. Click the Choose button on the toolbar.
        2. In the Choose File on Website window, locate the Web page you want to edit from the list of files and folders displayed.
        3. Click the name of the Web page to select it.
        4. Click OK. The Web page is now displayed in the Contribute browser.
Editing a web page

Before you can edit a Web page, you must first browse to it using the Contribute browser. Follow the steps in the previous section to browse to your Web page.

Click on Edit Page on the toolbar (or go to Select File > Actions > Edit Page) to change to the Contribute browser to the Contribute editor.

You cannot edit a page if the page is locked--that is, if someone else is currently editing it. When you browse to a page, the message area under the toolbar indicates whether you can edit that page.

You may now edit anything within the "editable regions," which is called Maincontent or Main body depending on the template. Text changes and the addition of graphics may be made in these areas that are labeled in light blue. If changes outside of the editable reagions are needed, please contact the webmaster.

Editing Text

This is the same as editing in a simple word processor.  Click on the text you want to edit and:

Highlight and press delete to remove text

Type to add text

Highlight text and click on appropriate button to embolden, use italics, justify, add bullets etc. Example: to make the text bold, highlight the text, then click on the "B" located on the toolbar.

Click on the text menu (drop menu to the left of the B) to choose from H1 - H4 headings with H1 being the biggest to H4 being the smallest.

alertNOTE there are two different templates shown below. Depending on which one you have you will have different text formatting options.

templates a and b

Differences between templates A and B

1Modern template – This template will be replacing template B but not all pages have been converted yet. Below is a description of how to recognize which template is which and what font styles to choose.

Template A has:

  • A search box and quick links button in the upper right
  • The audience specific buttons have a mega menu attached to them when you hover your house over them.
  • The whole page is centered rather than left aligned
  • The social icons (facebook & twitter etc.) are located in the footer
  • The page heading is a gray serif font
  • The H1 subheading is all upper case with a red line underneath
  • There is a gray pin-striped pattern at the top of the page that fades out as you scan down the page.

Font styles

3Legacy template – This template is a carry over from our previous website. The heading has been swapped out to match the look and navigation of the new site but it still needs additional style changes to match the functionality of the new site in general. Below is a description of how to recognize which template is which and what font styles to choose.

Template B has:

  • A search box located in the left navigation under the button menu
  • The social icons (facebook & twitter etc.) are located under the search menu
  • The whole page is left aligned
  • The audience specific buttons do not have mega menus attached to them when you hover over them.
  • The page heading is a bulky blue font in sentence case

Font Styles

Check Spelling

Make it a common practice to check the spelling on all of your web pages. To check the spelling on a page click on Format > Check Spelling.

Creating Text and Image Links

In Contribute, you can make text or images in your web page act as links. When a visitor to your website clicks a link, specified text or an image, the browser takes the visitor to another web page or file, or starts their e-mail application.

To create a link, select the text or image that you would like to link and then click on one of the following option in the Link dropdown menu:

Drafts and Recent Pages: A current draft or a recently published page on your website

Create New Page: A new web page, which Contribute creates at the same time as the link

Browse to Web page: An existing web page on your website or on another website

E-mail Address: An e-mail address

File on My Computer: An existing file on your computer, such as a Microsoft Word or PDF file

If you don't know which option to select or change your mind during the process, the Insert Link dialogue box gives you the opportunity to change your mind. Notice when you select an option, the dialog box displays text boxes corresponding to each type of link.

Linking to a Place in a Page

You can place an invisible marker, called a section anchor, on your page to mark a specific topic or place. You can then create links to the anchor, which take web site visitors to the specified position on the page with the anchor.

To create an anchor:

In your draft, place the insertion point at the beginning of the section where you want the page to open when a web site visitor clicks the link to the anchor.

Select Insert > Section Anchor.

The Section Anchor dialog box appears

Enter a name for your anchor.

The name cannot begin with a number and cannot contain any spaces. You cannot have two anchors with the same name on a web page.

Click OK

To link to an anchor:

Highlight the text for the link

Click on the link button at the top of the page, choose Browse to web page

In the Insert Link dialog box, click the Advanced button to expand the dialog box, if it is not already expanded.

Select a named anchor from the pop-up menu

Click OK.

Title, Keywords and Description for Search Engines

The title of a web page appears in the top left corner of a browser. This is what search engines like google index and people bookmark so it's important that the title is descriptive.

To change the title of a page click on "Page Properties" located at the top righthand corner of Contribute while in editing mode. Type in the new title in the title field.

Under format > keywords and description is the option add invisible search engine friendly content. This is the area to include the most relevant keywords and description that people will be looking for. Google checks this content first before checking the rest of the pages for information to index.

Seperate keywords by commas and keep your description down to a couple of sentences.

Adding Images

Click on the image button

Navigate to your image and click select

Add alternative text that will help visitors who can not see the picture

Double click on the image to alter settings

Browse to change the image (and then reset size)

Click on Reset size if you have altered the image in anyway

Add horizontal and/or vertical padding to create space around the image

Choose alignment to make the text wrap round the image

Add a number to create a border of that width round the image

Change the alternative text if desired

Click on apply to see results before saving

The image will automatically be added to the images folder on the server

NOTE: Contribute is not an image editing program. It can do a little but it's best to use another program to size your images. If you do not have an image editing program there are many free applications available. An online version that is very similar to photoshop is http://pixlr.com/

 

Edit an Existing Table

Click in table cells to edit content

Click in table cell and then go to table on the top menu to add/delete/merge/split table cells.

Click in individual cell and then go to table > cell properties to change background color etc

Click in the table and then go to table > table properties to change background color etc for whole table

 

NOTE: By default the table borders are set not to show. Below is a way to trick the borders into showing.

  1. In table properties set the background color of the whole table to gray
  2. Set the cellspacing to around 5
  3. then click on the row properties and set the cell color to white. You can do this individually as well. This will give the appearance of a border.
Adding a New Table

  1. Click in the page where you want to insert the table
  2. Click on the table button next to the link button in contribute
  3. Choose the number of rows and columns
  4. Choose "top" to have a table with a header for data– important for accessibility
  5. Choose whether to add padding and borders
  6. Add content – text or images
  7. Edit your table as described in the previous section

NOTE: By default the table borders are set not to show. Below is a way to trick the borders into showing.

  1. In table properties set the background color of the whole table to gray
  2. Set the cellspacing to around 5
  3. then click on the row properties and set the cell color to white. You can do this individually as well. This will give the appearance of a border.

Publishing and Previewing Your Edits

alertNOTE: Never use the "send or send for review" button below. It doesn't work in our environment. Instead follow option 3 below when you want someone to review your work.

Contribute gives you three options to finish your work session.

  1. If you are not quite ready to show the world, you can select Save for Later. Just as the option implies, Contribute will save the work to your computer and close the page, but it won't upload the page to the remote Web site. That way, you can work on the page later.
  2. If you're ready to show the public users, however, select Publish. Since you are already connected to the Web site, in just a few seconds a message will appear: Congratulations! You've published your page on the Web site.
  3. If however you have made a lot of changes and are unsure how it will look or need approval on the page you can go up to the menu bar at the very top of the application and choose File > Preview in Browser. This will place a temporary copy on the server and launch Internet Explorer for you to see what the page looks like before you publish. You will have a long web address that you can copy and paset into an email for someone to review. This link will work until you publish the page and the temporary copy will go away.

NOTE: Never use the "send" button above unless the person you are sending the link to has contribute access to the page themselves. This will lock the page and neither or them can edit it!

Creating a New Page from an Existing Page

Browse to an existing Web page and click the Edit Page button.

Click File > Actions > Publish as New Page.

Click Yes to publish the new page without a link to it at this time.

Enter a Page Title and Filename into the corresponding textboxes. You may also click the Choose Folder button if you want to select a destination folder for your new page. You may also create a new folder at this time.

Click Publish.

To edit your new web page, follow the steps in the Edit a Web Page section.

Go back to the browse mode and insert a link on another page to the document that you just created.

The page you just created will be listed under drafts and recent places under the link button.

Rollback to Previous Version
You can Rollback to up to 3 previous versions of any web page.  To do this select file >actions > rollback. You will see a visual representation of what the page looked like in the past. Pick the one you want to rollback to and click OK. Please note that newer work will be lost once you do this.
Deleting Files from the Server

Go to file > delete page

If you can't find the page or file but know it's on the server select the choose button under the Contribute logo to see the contents on the server.

Find your file there and open it to delete it as in the first step above.

Adding video, custom code and other media

The HTML Snippet allows you to add a small piece of HTML code inside the content area on your site. You can use this functionality to easily integrate Google AdSense, polls, calendars, videos and other media. More advanced users may also use HTML Snippet to integrate small custom-programmed functions inside their website.

Many free websites allow you create photo galleries, post videos and create polls and other custom applications that can be embedded into your website. Adobe Contribute allows you to take the embed code that is provided and insert it through the insert > HTML snippet command.

Below is an example of how to insert a youtube video. For a list of many other sites that offer web tools that provide embed codes visit this link.

Legend
1Click the share button – This will expand the various ways to share and isn't always located in the same spot in the page. Then you can click the "Embed" button to get the options for embedding. 3Click the size you want the video to be – Usually 640 x 510 is a good size but you may want it to be smaller
2 Click options for embedding – Make sure the showing of videos when finished is not clicked so only your video is shown. Then click enable privacy-enhanced mode. 4Copy the embed code –Once you are done with everything you can paste this code into the HTML snippet window as explained below

Go to insert > HTML snippet and paste the code


alertNOTE that after you click OK you will just see a big gray box indicating there is special content there. It isn't until you preview this in a web browser will you be able to test what you just did. (See panel on publishing and previewing your edits above)

Also note that this feature may not work will all content since we have no way of knowing how valid code is supplied from some other website. In some cases it can conflict with code that is on our site and not display properly or lock your page. The best way to know this is to test on as many machines and browsers as possible. If a bit of code does lock up your page please contact the LMC web administrator.