UCLACenter for Digital Humanities
   HOME  |  ECAMPUS COURSE SITES  |  INSTRUCTIONAL TECHNOLOGY RESOURCES

Student Help: Student Presentations Tool

The Presentations Tool allows students to upload files, usually webpages, to share with their class members. These files may be individual or group projects. Your instructor must add this tool before you can use it.

  1. How do I use the student presentations tool?
  2. How do I insert, display, and align images on my webpage?

1. How do I use the student presentations tool?

Click here to download these instructions in PDF

File Types:
You must upload web-compatible file types.  For most projects, you will upload HTML files (xxx.html or xxx.htm), JPEG image files (xxx.jpg), and GIF image files (xxx.gif) onto the Course Website.

File Names and Naming Conventions:
It is very important that you follow standard file naming.  Use only lower case alphabet and numbers in your file names and be sure to use the proper file extension (.htm, .jpg, .gif).  Do NOT include spaces, capital letters or punctuation characters in your file names.

HTML Files
The main page for your student presentation must be named and saved as: “index.htm” or “index.html”.  The title of your presentation must be put between the Title tags in the html code (<TITLE>Presentation Title</TITLE>) in order for the title to display correctly in the Student Presentation tool.  Additional web pages may be named anything, but stick to lower case letters, numbers, and replace spaces with underscores.

Image Files
Make sure that your image files (JPG or GIF) are named the way they are linked in your html pages. You also need to make sure that you use screen resolution, which is generally 72 or 96 pixels per inch (vertically and horizontally).  After setting the screen resolution, you can then set the image dimensions (in inches, cm or pixels) accurately for screen display.

Uploading Files in the Student Presentation Tool

  1. Login to the class website and click on the “Student Presentations” icon.
  2. Click the “Edit Files” link next to your name, which will take you to the “Manage Files” page.
  3. Click the Upload File button under File Options.
  4. Click the Browse button to find the file you want to upload.
  5. Select the file you want and click Open in “File name” dialog box (dialog box then disappears).
  6. Back in the Ecampus Upload File screen, click the Upload button.
  7. Your file is now uploaded into your own folder in the Student Presentation Tool of the course website.
  8. Repeat Steps 3-6 until all of your files are uploaded.
  9. To leave the “Edit Files” mode, click the link for “Homepage” or “Student Presentations” towards the top of the web page.
  10. When you are done, look at the presentations of you classmates.

Troubleshooting:  If you need to fix a file, edit it and upload the file again, overwriting the older version.  Or, if you are familiar with html code, you may edit the file directly using the edit command when you are in the student presentations tool.

To top

2. How do I insert, display, and align images on my webpage?

Click here to download these instructions in PDF

I. Getting Images and Setting Size:

  1. Scan your image OR Find it on the Internet.
  2. Save the image onto your computer or diskette using our file-naming conventions.
  3. To find the pixel dimensions of your image, open it in an image editing program or (on a PC) right click on the file: look at properties and summary tab.
  4. If you need to resize your image, use the following directions:
    In Photoshop, go to Image menu and click on "image size." Set the resolution to 96 (dpi) and then set the width and height in inches or pixels. Careful to keep a back-up copy of the file because you cannot increase image file size once you have downsized. Keep each image file under 50 KB, and smaller is better.
  5. Jot down the size of your image in pixels in order to insert it into your HTML document.

II. Displaying Images on your Web Page:

Images are displayed with the IMG tag. Valid image formats are GIF (Graphic Interchange Format) and JPG (Joint Photographer's Experts Group format). GIF is best for line art or images with just a few distinct colors; JPG is best for photographs.

A basic image tag looks like this: <img src="samplepic1.jpg" width="82" height="97">

The IMG tag has a number of attributes :

SRC - This specifies where to get the image to display. If the image is in the same directory as the HTML, all you need is the file name.

WIDTH (and HEIGHT )- How many pixels wide the image is. If you specify a number that is different from the image's actual width, the browser will scale the image; it is best not to do this unless you have a good reason. You can omit this tag, but it makes the browser work harder, and can delay how long it takes to display a page, since all processing must stop until the actual image is downloaded.

A more complex image tag looks like this: <img src="samplepic2.jpg" width="256" height="157" hspace="10" vspace="10" border="5" align="left">

This IMG Tag basically tells the browser that: This image, whose filename is samplepic2.jpg is 256 pixels wide by 157 pixels high, it has 10 pixels space around it (to keep text from getting too close), and it has a border of 5 pixels.

HSPACE, VSPACE - specified in pixels, puts an invisible buffer space above and below (vspace) and on the sides (hspace) around the image. The buffer space keeps the text from getting too close to the image.

BORDER - Places a border around the image in the same color as the default text color.

ALIGN - Places the image in the left, right, top, middle or bottom. Left and right allow text to wrap around the image; top, middle and bottom refer to how the image aligns vertically with the line of text on which it is placed.

To top