WebCT Login | Faculty Resource Page | Faculty Tutorial Page

Tried and True PowerPoint conversion steps...

Purpose: To convert a PowerPoint Presentation (PPT) into graphic images and then associate these images within a Content Module.

Note: These directions are written for PC but Mac methods are very similar in terms of the required steps, the only difference is in the programs used to get the results.

I. Overview

Why convert PPTs?

WebCT CE 4.1 will accept the use of PowerPoint files in Content Modules but using that method requires that students have the PPT application on their computer (to view the slides) or secure a PPT viewer from out on the web if they don't already have it on their local machine. PPT files are also typically larger files which may take a long time to download if the student does not have a fast connection. To eliminate these hurdles, MSU WebCT recommends transforming the PPT into a series of images which are then associated within a Content Module.

There are other ways to do this conversion (software programs specific to the problem; using the "save as html" feature inside PowerPoint) but the methodology explained here works very well and requires a modicum of effort. Remember- once you've converted a PowerPoint and have the pieces saved digitally, you shouldn't need to do the conversion again.

back to top

Two Methods

Method One:

Use PPT slides saved as GIF or JPG images and associate the individually created images (slides) within a Content Module.

• In the WebCT Content Module, the display shows each separate slide as a unique entity.
• When the slides are added to a Content Module, the Content Module Action Menu can be used by students to move through the slides.
• When printed using the WebCT Content Compiler tool, each image can be selected separately. This facilitates the selection of individual images as opposed to the "all or nothing" characteristics of Method Two.

Method Two:

Use PPT slides saved as GIF or JPG images. Create an html file to call to the images and associate the html file within a Content Module.

• In the WebCT Content Module, the display is one long html document with horizontal lines placed between each slide.
• When printed using the WebCT Content Utilities Compile tool, the print will feature the entire file-- all slides.

*Note: There are many methods that can be used but MSU WebCT can recommend these two without reservation. You may wish to research, learn about, and purchase software that might help accomplish this task in an easier fashion or just try to use the "Save As" html function inside of PowerPoint. The methods described here work very cleanly with a minimum of code concerns. You are the master of your own vessel.

back to top

Overview

Basic Overview of both methods:

1. Using the PowerPoint application, save the slides as JPG or GIF format.
2. Create a folder on your local computer named after the course the PPT will be put in and direct the "PPT conversion to .jpg or .gif" save into this folder.
   • Note: When saving the PPT as JPG or GIF formats, PPT automatically creates a folder based on the file name of the PPT presentation and saves the image files (.jpg or .gif files) into it. Thus, using this method will automatically create a sub-folder schema.
3. Upload the slides (and/or html template) into the WebCT course "Manage_Files" area.
4. Add a Content Module to the course (if one hasn't already been created).
5. Associate (add) the file(s) to the Content Module.
6. "Update Student View".
7. MSU WebCT recommends that instructor/designers add a Compile tool into the course to facilitate printing the file(s) (Add Page or Tool).
   • Number of pixels, in conjunction with dpi, has effect on printing characteristics. For instance, if you specify image size to be 6.667 inches x 5 inches (480 x 360 pixels) then you can virtually assure prints of 2 slides per page when using Method Two.

• Important Note: The JPG or GIF print/screen viewing size (width and height) is determined by the size you select while in "Page Setup" in the actual PPT document. All image files are saved at 72 or 96 dpi. "Page Setup" is in inches-- so, to choose the size you want, you select File/Page Setup/"Custom" (from the dropbox available) and specify the size that you need by typing information in as inches in the width and height boxes. Leave "Number slides from: "1" (the default) and leave "Orientation" at "landscape".

Here are some common conversions (72 dpi):

back to top

Using the Content Compiler tool

Content Compiler allows you, your students, and your teaching assistants to create a custom collection of course notes from the topics in a content module. After compiling the notes, you can view them on screen, save them to a file on your computer, or print them from your browser.

MSU WebCT recommends using Content Modules in courses and adding the Compile tool to the course to make content easily accessible for your students.

To add the tool to your course, go to "Add page or tool", select "Compile" from under the "Content Utilities" area. After making the tool available it is best to educate the students on how to use it.

How to print or save the compiled file using the Compile tool:

1. Select the compile tool.
2. Select "List pages" button for the corresponding content module containing material or image(s) you wish to print out.
3. Select individual pages or image(s) you wish to print by selecting the corresponding checkbox or choose "Select all".
4. Select "Finish Compile". A new browser window pops open.
5. Select File/Print or File/Save.

back to top

Step by Step PowerPoint Conversion - Method One:

Use PPT slides saved as GIF or JPG images and associate the individually created images (slides) within a Content Module.

1. Create a folder on your computer with the name of the course the PPT belongs in. This will be the folder to hold all of your PPT conversions for the course.
2. Open the PPT presentation and go to File/Page Setup. Select "Custom" from the drop-down menu. Size your picture accordingly (conversion chart above)-- default is usually 10" x 7.5" (720 X 540 in pixels).
3. Save the slides as jpg's (or gifs) [File / Save As / JPEG File Interchange Format (*.jpg) or GIF Graphics Interchange Format (*.gif)].
   • TIP: Direct the save (under "Save As" dialogue box) so that it is going into the course folder you created earlier in Step 1.
     • Note: When saving the PPT file as a jpeg or gif, PPT automatically creates a folder based on the file name of the PPT presentation and saves the image files (.jpg or .gif files) into it. So, if you created a folder for the course with the purpose of holding all of your PPT conversions, and you save the PPT .jpg or .gif slides into it, you now have a file structure that has the "top level" as the course folder created in Step 1 and then a sub-folder that is named after the PPT that you are converting.
   • TIP: The default name for the slides (for example: in a 10 slide .jpg presentation) that are saved is: "Slide1.jpg; Slide10.jpg; Slide2.jpg; Slide3.jpg; Slide4.jpg..." and so forth...
     • Optional-- Use a batch renaming program (like "Irfanview") to rename the Slide1.jpg, Slide10.jpg etc. images at this step before zipping the images together in Step 4.
   • TIP: When the file names of the images are listed, they list alphabetically (that is the default). So, if you have 11 slides it will list in this order: Slide1; Slide10; Slide11; Slide2; Slide3 and so forth-- this is a consideration if you are trying to keep the slides in some sort of order (like the order of a PPT presentation for instance). Renaming before uploading will assure control over the order that the slides are presented in.
4. Use WinZip to zip the folder(s) containing the images from your presentation. Name the WinZip file.
5. Access your WebCT course. Upload the zip file you just created into the Manage Files area of your WebCT course.
6. Unzip the folder into an appropriately named sub-folder in your "My_Files" area.
   • TIP: Creating a file structure of your choosing within the "My_Files" area of your WebCT course (hierarchically arranged sub-folders) is recommended-- it helps you keep track.
7. Add a Content Module to your course (Add Page or Tool/ Content Module).
8. With the "Designer Options" tab forward select the "Add Files" button located under "Options: Table of Contents".
9. On the resultant screen, make sure that the "Show all files in the My-Files folders in Manage Files" radio button is selected so that you can see all of the files (not just html files) in the "Manage Files" area.
10. Select an image to add to the Content Module.
    • TIP: To select a range of images: Select the first image, hold down the shift key and scroll down (if necessary) to select the image at the end of the range. To select images not in a range but scattered about, select an image, hold down the control key, select another image (left click), select another image (left click) etc. while still holding down the control key until all the images you want have been selected.
11. Select the "Add" button. All selected images will be added into the Content Module.
12. Rename the titles of the images by selecting the "Edit Titles" button located under "Options: Table of Contents".
13. Select "Update student view" button located under "Options: Content Module". Select your type of update and select "Update". After it is done working, select the "View" tab and check your work-- adjust as necessary.
14. Add a Compile tool to your WebCT course (Add Page or Tool/ Content Utilities/ Compile).
    • TIP: Put it under the "Course Menu" for easy access. Note: The compile tool allows easy printing of the converted PPT images that you just uploaded and associated in a Content Module.
      

back to top

Step by Step PowerPoint Conversion - Method Two:

Use PPT slides saved as GIF or JPG images. Create an html file to call to the images and associate the html file within a Content Module.

1. Create a folder on your computer with the name of the course the PPT belongs in. This will be the folder to hold all of your PPT conversions for the course.
2. Open the PPT presentation and go to File/Page Setup. Select "Custom" from the drop-down menu. Size your picture accordingly (*See conversion chart above)-- default is usually 10" x 7.5" (at 72 dpi-- 720 X 540 in pixels).
3. Save the slides as jpg's (or gifs) [File/Save As/JPEG File Interchange Format (*.jpg)] or GIF Graphics Interchange Format (*.gif).
   
   • TIP: Direct the save (under "Save As" dialogue box) so that it is going into the course folder you created earlier (Step 1). (Remember: When saving the PPT file as a jpeg or gif, PPT automatically creates a folder based on the file name of the PPT presentation and saves the image files (.jpg or .gif files) into it. So, if you created a folder for the course with the purpose of holding all of your PPT conversions, and you save the PPT .jpg or .gif slides into it, you now have a file structure that has the "top level" as the course folder created in Step 1 and then a sub-folder that is named for your PPT that you are converting.)
   • TIP: The default name for the slides (for example: in a 10 slide .jpg presentation) that are saved is: "Slide1.jpg; Slide10.jpg; Slide2.jpg; Slide3.jpg; Slide4.jpg..." and so forth...
4. Use WordPad to open the "template_jpg.wri" (for .jpg image files) or "template_gif.wri" (for .gif image files). Modify to fit the number of PPT slides that you have in the presentation or the size (width and height) of images you'll be using. (*See modification directions below)
5. Select "Save As" and save "template_jpg.wri" or "template_gif.wri" as "template_jpg.html" or "template_gif.html" into the folder that the images (.jpg or .gif image files) reside in.
   • TIP: simply change the extension on the file by replacing ".wri" with ".html"
   • TIP: rename the whole file to reflect the title of the presentation you are working with, replete with appropriate .html extension
6. Check your work by opening the folder and then selecting the .html file that you just created. The file should open with all of your images (former PPT slides, now .jpg or .gif image files) displaying on one scrollable page.
   • TIP: Sometimes it is best to open a browser and then open the file from within the browser.
7. Troubleshoot as necessary. (HTML code or image files)
8. Use WinZip to zip the folder containing both the html document and the images from your presentation. Name the WinZip file.
9. Access your WebCT course. Upload the zip file you just created into the Manage Files area of your WebCT course.
10. Unzip the folder into a sub-folder in your "My_Files" area.
    • TIP: Creating a file structure of your choosing within the "My_Files" area of your WebCT course (hierarchically arranged sub-folders) is recommended-- it helps you keep track.
      • If you have left all your image files as the PPT default, and you just keep unzipping folders containing these images into the "My_Files" area, the html documents will not know which "Slide1, Slide2, etc." images to associate with-- the html document will associate randomly-- you'll get images but they will most likely be the wrong ones.
11. Add a Compile tool to your WebCT course (Add Page or Tool on the Nav Bar). Put it under the "Course Menu" for easy access.
    • Note: The compile tool allows easy printing of the converted PPT file that you just uploaded.
12. Add a Content Module to your course (Add Page or Tool on the Nav Bar).
13. Associate the html file that you uploaded and unzipped with the Content Module.
14. Select "Update Student View!" to update the Content Modules in the course.
15. Check your work using a student view account that you have established in your course. Troubleshoot as necessary.

About WordPad:

You can find WordPad on most PC machines by left-clicking the "Start" area, opening "All Programs" or "Programs" and then opening the "Accessories" folder-- WordPad typically resides in this area. If you can't find WordPad, just double-left-click the ".wri" file and WordPad will open it if WordPad is on your machine.

back to top

• You don't have to use the templates... they are provided as a service.
  • If you are relatively handy with html code you can build your own templates.
• The templates are very basic-- nothing fancy.
• HTML templates are set up in 2 sizes for either GIF or JPG images.
  • templates use the PPT default naming system (Slide1.jpg; Slide10.jpg; Slide2.jpg; Slide3.jpg; Slide4.jpg... and so forth)
• All templates are 50 slides long and specify image width and height.
• The provided downloadable templates (below) are WordPad files (".wri" extension). If using the templates, to make the procedure work properly, please use WordPad to open them so that the html code that comprises the text of the template appears.
  • Note: Using another program to open the templates will force the html code written in the template to become active and as a result you'll see nothing but a blank html page that contains image boxes (missing the images) and horizonatal bars.
• Though the templates are WordPad files (".wri" extension)-- you can save the templates (prior to -or- post modification) as html just by opening them using Wordpad, selecting "Save As", and then changing the extension of the file name from ".wri" to ".html".
  • Note: You can always completely rename the files at this stage to help facilitate identification.
  • Note: After downloading and using WordPad to open the file, if you save the file with a ".txt" file extension, you can then easily use other programs (like Notepad) to manage and make changes to the files.
• Templates are easily modified by editing the code contained on the page.

• You may find it beneficial to experiment. It may be that you'll need a "mix and match" scenario sometimes or that slides with photographs will look fine under a .gif format... .gif generally are smaller image files which is advantageous in a web environment.

• GIF format: Pronounced jiff or giff (hard g) stands for graphics interchange format, a bit-mapped graphics file format used by the World Wide Web, CompuServe and many BBSs. GIF supports color and various resolutions. It also includes data compression, but because it is limited to 256 colors, it is more effective for scanned images such as illustrations rather than color photos. (definition from http://www.webopedia.com)
• JPG (or JPEG) format: Short for Joint Photographic Experts Group, and pronounced jay-peg. JPEG is a lossy compression technique for color images. Although it can reduce files sizes to about 5% of their normal size, some detail is lost in the compression. (definition from http://www.webopedia.com)
• PNG format: Short for Portable Network Graphics, and pronounced ping, a new bit-mapped graphics format similar to GIF. In fact, PNG was approved as a standard by the World Wide Web consortium to replace GIF because GIF uses a patented data compression algorithm called LZW. In contrast, PNG is completely patent- and license-free. The most recent versions of Netscape Navigator and Microsoft Internet Explorer now support PNG. (Definition from http://www.webopedia.com)
• JPG vs. GIF vs. PNG: Following are the most commonly used graphics file formats for putting graphics on the World Wide Web and how each differs from the others:
  • JPEG/JPG
    Short for Joint Photographic Experts Group, the original name of the committee that wrote the standard. JPG is one of the image file formats supported on the Web. JPG is a lossy compression technique that is designed to compress color and grayscale continuous-tone images. The information that is discarded in the compression is information that the human eye cannot detect. JPG images support 16 million colors and are best suited for photographs and complex graphics. The user typically has to compromise on either the quality of the image or the size of the file. JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so the image loses clarity and sharpness.
  • GIF
    Short for Graphics Interchange Format, another of the graphics formats supported by the Web. Unlike JPG, the GIF format is a lossless compression technique and it supports only 256 colors. GIF is better than JPG for images with only a few distinct colors, such as line drawings, black and white images and small text that is only a few pixels high. With an animation editor, GIF images can be put together for animated images. GIF also supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page to show through. The compression algorithm used in the GIF format is owned by Unisys, and companies that use the algorithm are supposed to license the use from Unisys.*
  • PNG
    Short for Portable Network Graphics, the third graphics standard supported by the Web (though not supported by all browsers). PNG was developed as a patent-free answer to the GIF format but is also an improvement on the GIF technique. An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not degrade its quality. PNG does not support animation like GIF does.
  *Unisys announced in 1995 that it would require people to pay licensing fees in order to use GIF. This does not mean that anyone who creates or uses a GIF image has to pay for it. Authors writing programs that output GIF images are subject to licensing fees. (explanation from http://www.webopedia.com)

back to Modifying the HTML template

1. Select "Save As" from the file menu and rename the document. Replace "template" with a short name for the PPT you have converted (or just leave "template"). Don't rename the ".wri" extension yet. Direct the save into the folder that contains the image files associated with the template you are using.
2. Scroll down the template document until you come to the number of slides that the converted PPT contains. Select the unnecessary code (code that is calling to slides you don't need) and delete it. Be sure to leave the closing html tags in the document (</body></html>) so that the html document functions properly.

1. Scroll down until you see <br><img SRC="Slide19.gif" height=360 width=480> line.
2. Left click and hold just before the <Br> that is directly beneath the above statement.
3. Drag down until you have selected all of the code from the <Br> (above) to the end-tag </body>. (DO NOT DELETE the </body> tag!)
4. Delete.
5. Save As ".txt"
   • or save as ".wri" if you wish to continue using WordPad for the modification procedure.
6. Save As .html.
7. Test the .html file.
8. Adjust if necessary.

1. Select "Save As" from the file menu and rename the document. Replace "template" with a short name for the PPT you have converted. Don't rename the ".wri" extension yet. Direct the save into the folder that contains the image files associated with the template you are using.
2. Scroll down the document until you come to the statement <Br><img SRC="Slide50.gif" height=360 width=480> which is just above the document end-tags </body></html>
3. Select the correct snippet of code and copy/paste it into the document multiple times (or enough code to cover the amount of images you need to add). Rename the image source code (<img SRC="Slide...">) to reflect the names of the added slides (image files). Be sure to leave the closing html tags in the document (</body></html>) so that the html document functions properly.

1. Scroll down until you see <Br><img SRC="Slide50.gif" height=360 width=480> line.
2. Select the following code:
   <Br>
   <hr WIDTH="100%">
   <Br>
   <Br><img SRC="Slide50.gif" height=360 width=480>
3. Copy.
4. Place your cursor just below the <Br><img SRC="Slide50.gif" height=360 width=480> line. (Hard return if necessary.)
5. Paste.
6. Rename the portion of the code "...Slide50.gif..." as "...Slide51.gif...".
7. Repeat as necessary.
8. Save As ".txt"

   • or save as ".wri" if you wish to continue using WordPad for the modification procedure.
9. Save As ".html".
10. Test the ".html" file.
Adjust if necessary.

1. In the code where it says height=360 replace the 360 with the appropriate pixel dimension. Do the same for the height=480 sections.
   • you can use a "Find and Replace" program to do this-- it is faster and eases up on the carpal tunnel issues.
2. Save As ".txt"
   • or save as ".wri" if you wish to continue using WordPad for the modification procedure.
3. Save As ".html".
4. Test the ".html" file.
5. Adjust if necessary.
   • if slides look squished or distorted, chances are that they have been saved at one size and the html code that calls to the slide includes pixel dimensions that are of another size. Adjust the image size or the html code image size.
     

back to Modify top