Skip to Page Content | Navigation for Module


Navigation for Module 3: Powerpoint
Page 19 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 Chart Slide to Webpage Template

Like all Microsoft Office applications, PowerPoint supports the creation of embedded charts. You can easily create bar, line, pie, and other type charts and edit the data of the charts.

A view of the chart editor in PowerPoint (see Image 33 ).


Description of Image 33: Demonstrating the Editing of a Chart

To convert an existing PowerPoint slide with a chart into an accessible HTML slide:

  1. Go into the BODY section at the location where this slides should be inserted; add this new slide to the end of the BODY section since it is the tenth slide, coming after all previous slides in our HTML presentation.

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


    Description of Image 34: Original PowerPoint Slide

  2. Begin by inserting the common elements of all slides - the image and the title:

    <!-- Slide 10 -->
    <img src="Slide10.jpg" alt="Slide 10">
    <H1>Historical Grade Distribution</H1>

  3. The next is to focus on is the chart itself. The chart is essentially an image, so we need to provide a textual equivalent for this chart. It is recommended that you create a table displaying the graph's data and then provide a paragraph summary describing the graph's message.

    Description of Image 35: Menu showing how to select the Chart Editing Feature



    Description of Image 36: Excel Data Grid


    In order to access the underlying data of the chart, simply right-click the chart and select the "Chart Object" and then "Edit" (see Image 35 ).

    This allows you to edit and view the numeric data of the chart. For this chart, the numbers are shown (see Image 36 ).

  4. Insert this data into an accessible HTML table. There are many ways to accomplish this, for this example make the letter grades be rows and the year to be the columns (making the columns the series in the resulting HTML).

    Note: In creating accessible HTML tables, you are required to provide the header, body, summary, and caption information and make sure that the table linearizes well and will make sense to screen readers.

  5. Save your work as an HTML file. For this example, save as presentation.htm. The completed code for converting a Chart Slide (i.e. Slide 10) of the PowerPoint presentation HCI.ppt should be as follows.

    Code Sample of Chart Slide:

    <!-- Slide 10 -->
    <img src="Slide10.jpg" alt="Slide 10">
    <H1>Historical Grade Distribution</H1>

    <table border="1" summary="This table shows the number of grades (A, B, C, D, and F) that students earned for the course in 2001 and 2002.">

      <caption>
        Number of Each Grade that Students Earned
      </caption>

      <thead>
        <tr>
          <th scope="col">Grade</th>
          <th scope="col">Number Earned in 2001</th>
          <th scope="col">Number Earned in 2002</th>
        </tr>
       </thead>   <tbody>
        <tr>
          <td>F</td>
          <td>15</td>
          <td>12</td>
        </tr>
        <tr>
          <td>D</td>
          <td>10</td>
          <td>4</td>
        </tr>
        <tr>
          <td>C</td>
          <td>34</td>
          <td>11</td>
        </tr>
        <tr>
          <td>B</td>
          <td>12</td>
          <td>10</td>
        </tr>
        <tr>
          <td>A</td>
          <td>29</td>
          <td>33</td>
        </tr>
      </tbody>
    </table>
  6. 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 37 ).


    Description of Image 37: Converted PowerPoint Slide

    You can also view the context of the Chart Slide in the complete conversion of the Sample PPT to HTML (, 520 KB).

    The table displays the grade information with the header row highlighted. The caption "Number of Each Grade that Students Earned" is also displayed above the table.

    Note: It might be beneficial to pivot the data (changing rows to columns and columns to rows) such that the resultant table is easier to read.

The next page will discuss how to convert a slide with non-outline text.

Top of Page arrow up
       Page 19
Next Page Next
Page 20:
Non-Outline Text Slide


 
-- END OF PAGE