Skip to Page Content | Navigation for Module


Navigation for Module 3: Powerpoint
Page 17 of 25

  1. *Introduction
  2. *Tools You Need
  3. *Methods to Put Online
  4. *Make Webpage Method
  5. *Save Slides as Images
  6. *Template of Webpage
  7. *Title Slide
  8. *Bullet-List Slide
  9. *Multiple Column Slide
  10. *Embedded Video Slide
  11. *Table Slide
  12. *Image Slide
  13. * Drawing Shapes Slide
  14. *Notes Slide
  15. *Chart Slide
  16. *Non-Outline Text Slide
  17. *Sound Slide
  18. *Animation Slide
  19. *Publish to Blackboard
  20. *Publish to WebCT
  21. *Resources

Adding Drawing Shapes Slide to Webpage Template

Many PowerPoint presentations contain text art, boxes, arrows, and other drawing objects. Each of these items on the slide needs to have a textual, accessible equivalent in the HTML version of the slide.

To convert slides with drawing shapes:

  1. Go into the BODY section at the location where this slides should be inserted; in this case, insert this next slide between slides 7 and 9, since it is the eighth slide.

    From the sample "Human-Computer Interaction" presentation, the original PowerPoint slide 8 (see Image 29 ).


    Description of Image 29: Original PowerPoint Slide

  2. Begin with the slide's image and title: <!-- Slide 8 -->
    <img src="Slide8.jpg" alt="Slide 8">
    <H1>Assignments</H1>

    Now provide the HTML for the content of the slide. The major difficulty with creating a textual equivalent of this slide is that the diagram represented by all of the drawing shapes is a bit complex. You have a directed graph with a cycle that shows how the students should tackle their assignments. You must come up with a unique solution to provide an accessible, textual equivalent for the diagram and/or drawing objects on the slide.

    In this example, you can use a paragraph explaining the slide's intention as shown in the following HTML.

  3. Save your work as an HTML file. For this example, save as presentation.htm. The completed code for converting a Drawing Shapes Slide (i.e. Slide 8) of the PowerPoint p.resentation HCI.ppt should be as follows.

    Code Sample of Drawing Shapes Slide:

    <!-- Slide 8 -->
    <img src="Slide8.jpg" alt="Slide 8">
    <H1>Assignments</H1>

    <p>
      The process of doing assignments in this class works like the following process:
    </p>

    <ol>
      <li>Skim the material before coming to class</li>
      <li>We will discuss the material in class</li>
      <li>After class, do another, in-depth reading</li>
      <li>Write an essay on the material</li>
      <li>We will then discuss the "best" essays</li>
      <li>At the end of the term, your final exam tests your knowledge of these "best" essays</li>
    </ol>

    Here, a paragraph was given to introduce the diagram and then an ordered list (<ol>) was used to enumerate the steps in doing the assignments for the class.


    Description of Image 30: Original PowerPoint Slide

  4. Open your HTML file in a web browser. The file should display with the slide image, followed by the title and then the slide content (see Image 30). You can also view the context of the Drawing Shapes Slide in the complete conversion of the Sample PPT to HTML (, 520 KB).
     



Note: While this is just one example of the many possible ways one could provide an accessible version of this slide, it does demonstrate that there are always ways of providing some form of textual equivalent to drawings. If it helps, you can think of text boxes, arrows, word art, and other similar drawing items as images; then you can just provide a textual equivalent to the drawing "image."

The next page will discuss converting slides with notes.

Top of Page arrow up
       Page 17
Next Page Next
Page 18:
Notes Slide


 
-- END OF PAGE