Information Competency Gavilan College Spring 2006
Module 6
Beginning Contribute
blue separating line

What is Contribute?

Contribute is a program used to create basic webpages without a knowledge of html. These pages have been created with Contribute.

If you are interested in using Contribute to create your webpages, contact the Staff Resource Center to have the software installed and configured on your office computer. You also have the option of installing Contribute on your personal computer.

 

Installing & Configuring Contribute
Contact the Staff Resource Center to set up an appointment to have the software installed and configured on your office computer.
OR

Get the Contribute installation cd from the Staff Resource Center. Install the Contribute software following the on screen instructions. There is an install shell to walk you through the process. You should have received the license information to register the software.

Once the software is installed you will need to set up your connection to the server.

  1. Open Contribute
  2. Select Create a Connection (if you don't see this option on the opening screen select Edit -- My Connections -- Create from the menu)
  3. Using the connection wizard that comes up ... answer the questions
      a) Web address (url) of your site -- ie: http://hhh.gavilan.edu/username provided by MIS
      b) Click Next
      c) How do you connect to your server -- select SFTP
      d) Name of your SFTP server? -- hhh.gavilan.edu
         What is the SFTP username? -- username provided by MIS
         What is the SFTP password? -- password provided by MIS
      e) Click Next
      f) Complete your user information
      g) Click Next
      h) Review the connection information and use the back button to make any corrections you may need to make
      i) Click Done
  4. You should now see the connection on your opening page. This allows you to connect to the server and your 'site' to make changes and create pages using Contribute.

Basic Rules for Creating Webpages

Before you begin, make a plan. It is easier to construct a webpage from scratch based on a plan than it is to create it 'on-the-fly.'

List the basic information you want to convey. Is this a syllabus? Is this a lecture? What are your main points?

Gather any images you want to include. Keep in mind copyright issues when considering using images in your webpages.

Consider using tables to format your webpage(s). Tables will help you organize your information and aid in the readability of your webpage. If you are using a table, you will want to set the width of the table to about 80% of the page to ensure that it will display the page using 80% of the screen, no matter what the resolution is on your reader's monitor.


Create Your First Page

Open Contribute.

Select your 'website' from your Contribute Start Page.

Click the New button at the top of the page.  New button

Select Blank Web Page.

New Page Choices


Fill in the Title page blank. This will be the title users see in the window title bar in the upper left corner of the browser window when viewing your page. This should be a short description of the page. The title of this page is Beginning Contribute.

Click OK.

You are now in the Edit mode and can start constructing your webpage.

 

Add a Table


Add a basic table to your page:

  • Click Table from the toolbar. Table toolbar icon
  • Set the number of rows and columns you want to include. You can always add rows later.
  • Set the width of the table to 80% of the screen.
    Click on Specific width from the Table width options.



    Select percent from the dropdown box.
    Set the width to 80.
  • If you want to see a border, set the Border thickness to 1 or greater. This sets the width of the border in 'pixels'. If you don't want to see a border, set the Border thickness to 0.
  • Set the Cell padding to 5. This puts space between the edge of the table cell and your content.
  • Set the Cell spacing to 5. This puts space between the cells.
  • Click OK.

Complete your table by typing into your table. It will look something like this.

If you need to add rows, you can Tab from the last cell in the table. This will add a row below.

You can also add rows at any point in the table by using the Table menu.

Select Table from the menu.

Select Insert

Select Row above or Row below

If you want to add a heading to your table you can merge cells like this.

To Merge Cells.

  • Select the cells you want to merge. Left click your mouse and drag to select the cells. OR Place your cursor to the left of the row you want to merge until you see a solid right facing arrow, left click your mouse.
  • Place your cursor in the selected cells and right click. From the menu, select Merge Cells. OR Select Table from the menu and select Merge Cells.

Example of merging cells

Remember you can set the alignment of your text in each cell or all the cells by selecting the cell and using the Alignment icons from the toolbar.

Text alignment toolbar icons.

You can also use different fonts, font sizes and styles using the font icons from the toolbar.

Font toolbar icons

Note that there are only 6 basic font choices. These are the standard fonts that most browsers will be able to display. You want to make sure that what you see in the creation process will be what your end user sees once they are using their own computer and monitor.

Also note that you only have the option of Bolding and Italicizing text from the toolbar. This is because you want to limit your use of underlining to emphasize text since most users expect underlined text to be a link.


Add A Link

Link to an outside webpage.

  • Add text you want to be the link.
  • Highlight the text using your cursor and mouse.
  • Select the Link icon from the toolbar. Link toolbar icon.
  • Select Browse to Web Page.
  • Type or paste the web address into the Web address

  • Select New Window from the Target Frame dropdown box. When you click on the link a new window will open to the new webpage.
    Target frame dropdown box.
  • Click OK
Note: You won't be able to test the link in the Edit mode. In order to test your link you will need to Save or Publish the webpage or Preview in Browser (F12).


Add an Image

Now let's add an image to our page. You can add this in your table or you can create a new table, or you can add it outside your table. It's up to you.

In order to add an image you will need to have it on your computer or on a portable storage device like a 3.5 inch floppy disk or a USB drive. So do your searching ahead of time in order to find and save any images you want to use.

To add an image.

  • Place your cursor where you want to add the image.
  • Select the Image icon from the toolbar. Image toolbar icon.
  • Select From My Computer.
  • Browse to the image you want to add.
  • Click OK.
  • You should now see your image on your webpage.

To be accessible you will need to add a description for each image you use on your webpages.

To add a description.

  • Place your cursor on the image and right click on the mouse and select Image Properties.
    OR
    Select the image using the left click on the mouse and select Format from the menu and select Image Properties.
  • In the Image Properties dialog box, fill in the Description box with a description of the image. This will be read to visually impaired users.
  • You can also add a border to the image. The default is a 1 pixel border. If you don't want a border edit this to 0.

Image Properties dialog box.

 

Add Address Information

In order to properly evaluate a webpage we recommend that students look for an author, contact information and a date last updated. This is used to determine authority for the information and currency of the page and information. So let's add that information to your page.

At the bottom of your page:

  • Select the Right Alignment icon from the toolbar. Align Right Toolbar Icon.
  • Set your font size to 8. Font Size Icon from the toolbar.
  • Insert your information like this
    Address of this page:
    http://gavilan.edu/tlc/ic/contribute1.html
    For questions or comments, contact Jo Anne Howell at
    jhowell@gavilan.edu
  • Now set up the Last updated date. Type:
    Last Updated:
  • Select Insert from the program menu
    Select Date
    Insert Date Box
    Select the format you want to use
    Click Update automatically on save
    Click OK

Publish Your Webpage

To see the page on the Internet you will need to Save/Publish the webpage.


Click the Publish button at the top of the page. Publish button

You may be prompted with a message that your page is not linked. You will fix this later. Click OK.

Filename: The program assumes the title you gave the page at the beginning of this process will be the name of your page. We recommend that you follow a few basic rules when naming your file.

  • Use all the same case, all uppercase or all lowercase. If you mix cases, you will need to enter the name exactly that way in the browser address bar.
  • No spaces in the filename.
  • Use a short but recognizable name so you will be able to find it in the future. ie: lectures may follow the pattern week1.html, week2.html, week3.html. Remember the filename must be unique in this directory.
  • If you want the page to be the first thing people see in your directory you will want to name the file index.html. ie: hhh.gavilan.edu/instructorname/index.html. This would ensure if a student entered http://hhh.gavilan.edu/instrutorname in the address bar they would see the index.html page.

 

If you want credit for this module:

Create a basic webpage. Include a table, a link to an outside page, an image, an address and last updated information.

 

Address of this page:
http://gavilan.edu/tlc/ic/contribute1.html
For questions or comments, contact Jo Anne Howell at
jhowell@gavilan.edu
Last updated on 09/24/2006

Back to IC Modules