In this tutorial, we will use Contribute to insert a photo into a Web page.

1. Access Contribute and go the page you'd like to insert an image into.

2. Click the Edit Page button in the top toolbar.

3. Place your cursor in the area on the page where you would like to insert the image.

4. Go to the "Image" button in the top toolbar .

5. In the menu that appears, select the "From My Computer" option.

6. A dialog box will appear. Look for the text area labeled "File name." Type the following in the File Name text area:

   \\Pages\Courses\fall06\JR200\

   A list of folders should appear. Select the folder with your name (it will be Firstname_Lastname), then select the Contribute-Materials folder.

   What you should do if you can't access the Pages server If you are unable to access Pages, you can use the WebCT method. Log in to WebCT and go to: JR200 > Lab Materials > Web Lab > Contribute Materials > loretta-photo.jpg Right-click on the photo and select the "Save Picture As" option. Save the picture to your computer's desktop (or save it to a location where you can easily find it. Once you've saved the photo, you need to return to Contribute and start back at the beginning of this tutorial.

7. Find the file titled "loretta-photo.jpg" (it may appear as "loretta-photo"). Double click to open this file.

   

8. Contribute will insert the photo into your Web page. You will notice that the text in your page does not flow around the photo. We need to tell Contribute how to do this.

9. Right-click on the image. In the menu that appears, select the "Image Properties" option. Contribute will show you the following dialog box:

   

10. Look for the "Alignment" pulldown menu. Contribute sets this menu to "Default," but the "Default" option is what's causing the text to not wrap around the photo. Select "Right" from the menu.

    Also, look for the Horizontal Padding box. Type "10" into this box. Type "10" into the Vertical Padding box as well. (Note: You are telling Contribute to insert 10 pixels of white space above the photo and to the sides of the photo -- this prevents the text from running into the photo's borders).

    In the dialog box, look for the "Description (ALT text)" field. In this field type "A picture of a bulldog." (The ALT text field is used by special "reading" browsers. People with vision impairments rely on these browsers to access the Web, and ALT tags give the browser a verbal discription of a visual element).

    Click OK.

11. Contribute will do two things:
    • It will move the photo to the right-hand side of the screen.

    • It will add 10 pixels of white space around the photo.

12. Note: When you first change the photo setting, you may see a heavy black border around your photo. Simply click anywhere within your document to turn this black border off.

13. At this point, your document should look something like this:

    

14. Publish your page.

15. Congratulations! That's it!