Inhaltsfolie für Präsentationen nur einen Klick entfernt (reveal.js – Teil 2)

29.04.2021

Wie man mit reveal.js tolle Präsentationen in HTML erstellt, habe ich grob schon Anfang des Monats vorgestellt. In diesem Artikel zeige ich, wie man eine klickbare Inhaltsfolie für umfangreiche Präsentationen erstellt, welche von überall nur einen Klick weit entfernt ist.

reveal.js bietet eine Vogelperspektive. Diese ist durchaus beeindruckend und zur Navigation schon ganz gut. Bei umfangreicheren Präsentation mit Kapiteln wäre es besser, eine Inhaltsfolie mit Verknüpfungen auf die jeweiligen Bereiche zu haben. Diese soll mit einem Klick von jeder Folie aus zugreifbar sein. Dabei möchte ich diesen Verweis natürlich nicht manuell auf jeder Seite einfügen müssen. Für eine interne Schulungspräsentation zum Thema „Java Exception Handling“ habe ich neulich genau dies umgesetzt.

Die Folien der Präsentation zeigen automatisch in der linken oberen Ecke einen Verweis auf die Inhaltsfolie an:

Die Inhaltsfolie mit Verknüpfungen zu den jeweiligen Kapiteln:

(Zurück zur ursprünglichen Folie geht es mit dem Zurück-Button des Browsers).

Um ein solches Inhaltsverzeichnis zu erstellen sind folgende Schritte nötig:

  1. Inhaltsfolie erstellen
  2. den Kapiteltitelseiten eine ID geben
  3. diese in der Inhaltsfolie verlinken
  4. einen Link auf die Inhaltsfolie definieren, der auf jeder Folie sichtbar ist z.B. in der Ecke links oben

Und hier der Code dazu:

<!--
 Das Listing zeigt zum besseren Verständnis nur die Codestellen, die für das Verständnis notwendig sind -
 ohne weitere Inhalte und den Setup-Code von reveal.js 
-->
<html>
...
<body>
   <div class="reveal">
      <div class="slides">

         ... 

         <!--------------------->
         <!-- Inhaltsfolie    -->
         <!--------------------->

         <!-- Hinweis: in reveal.js bedeutet section soviel wie Folie / Seite -->
         <section id="slide-overview">
         
            <h2>Überblick</h2>
            
            <ol style="font-size: 0.7em;">
               <li><a href="#slide-start">
                  Intro
               </a></li>
               <li style="margin: 0.5em 0 0.5em 0;"><a href="#slide-chapter-basics-title">
                  Grundlagen
               </a></li>
               <li><a href="#slide-chapter-prevention-title">
                  Vorsorge vor Nachsorge
               </a>
               <li><a href="#slide-chapter-goalOriented-title">
                  Zielorientiert
               </a></li>
               <li><a href="#slide-chapter-howtoLog-title">
                  Richtig loggen
               </a></li>
               <li style="margin: 0.5em 0 0.5em 0;"><a style="font-weight: bold;"href="#slide-handsOn-1u2">
                  Hands-On
               </a></li>
               <li><a href="#slide-chapter-howtoThrow-title">
                  Richtig werfen
               </a></li>
               <li><a href="#chapter-howtoCatch-title">
                  Richtig fangen
               </a></li>
               <li style="margin: 0.5em 0 0.5em 0;"><a style="font-weight: bold;" href="#slide-handsOn-3u4">
                  Hands-On
               </a></li>
               <li><a href="#slide-chapter-various-title">
                  Sonstiges
               </a></li>
               <li><a href="#slide-chapter-end-title">
                  Schluss
               </a></li>
               <li style="display: none; margin: 0.5em 0 0.5em 0;"><a href="#slide-chapter-appendix-title">
                  Anhang
               </a></li>
            </ol>
         </section>

         <!---------------------------------------------------------> 
         <!-- Ab hier kommen die weiteren Folien der Präsentation --> 
         <!--------------------------------------------------------->
         
         <!------------------------------>
         <!-- Kapitel "Grundlagen"     -->
         <!------------------------------>
         
         <section id="slide-chapter-basics-title">
            ... Inhalt der Titelfolie für das erste Kapitel ...
         </section>
         
         <!-- Grundlagen - erste Folie -->
         <section id="basics-1">
            ...
         </section>
         <!-- Grundlagen - zweite Folie -->
         <section id="basics-2">
            ...
         </section>
         ...

         <!------------------------------> 
         <!-- Kapitel "Zielorientiert" --> 
         <!------------------------------>          
         <section id="slide-chapter-goalOriented-title">
            ... Inhalt der Titelfolie für das zweite Kapitel ...
         </section>      
         ...
         
         ...
      </div>
   </div>
 
   ...
      
   <!---------------------------------------------------------------------------------------->
   <!-- Link zu Inhaltsfolie                                                               -->
   <!-- Hinweis: Optimalerweise lagert man die Styles in ein Stylesheet / Theme aus.       -->
   <!-- Um das Beispiel einfach zu halten habe ich diese hier direkt eingefügt.            -->
   <!---------------------------------------------------------------------------------------->

   <style>
      /* CSS-Klasse zur Darstellung von Texten im Header / Footer. */
      .headerfooter {
         font-size: 2vh;
         font-family: "Source Sans Pro", Helvetica, sans-serif;
         color: #00A5E1;
      }
      /* und Formatierung enthaltener Verknüpfungen */
      a.headerfooter {
         text-decoration: none !important;
         color: #00A5E1;
      }
      a.headerfooter:hover {
         text-decoration: none !important;
         color: #00A5E1 impo !important;
      }
      a.headerfooter:visited {
         color: #00A5E1;
      }
      /* Verküpfung auf die Inhaltsfolie in die linke obere Ecke positionieren */
      .overviewLink { 
         position: fixed; 
         top: 10px; 
         left: 10px; 
      }
      /* diese Verknüpfung nicht im PDF-Export anzeigen */
      @media print {
         .overviewLink,
         .overviewLink * {
            display: none !important;
         }
      }
   </style>

   <!-- Die eigentliche Verknüpfung auf die Inhaltsfolie -->
   <a href="#slide-overview" class="headerfooter overviewLink">Inhalt</a>
 
   <!--------------------------------------------------->
   <!-- und noch unser Logo in die linke untere Ecke  -->
   <!--------------------------------------------------->
   <img src="img/logo/ds-logo-b.svg" style="position: fixed; bottom: 20px; left: 20px; width: 10vw;">
   
</body>
</html>

 

 

Mehr über Softwareentwicklung erfahren

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*