renephoenix.de

Präsentation mit HTML

Einfache und schlichte Präsentationen bekommt man nicht nur mit PowerPoint und Co hin, sondern dazu reicht auch schlichtes HTML — zusammen mit CSS. Leider funktioniert diese Möglichkeit derzeit nur mit Opera (bereits auch mit älteren Versionen), dennoch eine gute und einfache Alternative. Bei der Erstellung einer Folie ist allerdings einiges zu beachten.

Die Besonderheit der Präsentation gegenüber einer statischen Seite ist eigentlich nur eine Art Seitenwechsel. Der Inhalt läuft nicht fortlaufend, sondern soll Seitenweise angezeigt werden ...

[div class="projection"]<!--Inhalt Folie1-->[/div]
[div class="projection"]<!--Inhalt Folie2-->[/div]
[div class="projection"]<!--Inhalt Folie3-->[/div]

Die CSS bauen wir folgendermaßen: der Umbruch soll nur im Vollbildmodus geschehen — denn dieser geht letztendlich auf den Beamer. Die Kerneigenschaft heißt page-break-before. Alternativ ist auch page-break-after möglich. Der Unterschied besteht nur darin, daß das eine vor und das andere nach dem Element geschieht.

@media projection
{
 div.projection
 {
   page-break-before:always;
 }
}

Diese kann folgende Werte annehmen: always (immer), avoid (nie), left und right (beachtet dabei linke und rechte Seiten, nur im Druck interessant), inherit (Eigenschaft soll geerbt werden), auto (default). Wie benötigen always, schließlich soll die Aufteilung des Inhalts auf die einzelnen Folien noch in unserer Hand liegen.

Mit dieser Eigenschaft funktioniert nun die Präsentation. Allerdings gibt es noch ein paar Dinge, die zu beachten sind:

  • Schriftgröße (unter 20 — 25pt sollte man nicht unbedingt anfangen, möglichst alle anderen Schriftgrößen relativ angeben)
  • Listenpunkte (leider werden diese nicht gezoomt (Test mit Opera 7.11 und 7.23) — Abhilfe mit (k)Paint: Man malt einen Punkt, der etwa so hoch wie die Schriftgröße ist und fügt ihn so ein: ul {list-style-image:url(liststyle.png);}
  • Ränder — auch auf Beamern sieht es merkürdig aus. Man sollte body sowohl margin als auch padding auf 0 setzen, und dafür bei div.projection etwa 50 Pixel Rand lassen.
  • Bei der Betrachtung auf dem Bildschirm ist es nicht verkehrt, auf diese Präsentation hinzuweisen. Insbesondere sollte die F11-Taste (Wechsel in die Präsentation), wie PageUp/PageDown-Tasten zum Blättern erwähnt werden. In der Präsentation sollte der Hinweis nich auftauchen.

Als Beispielreferenz dient mein Vortrag zu Wissensmanagment mit WebLogs.

Bisherige Kommentare (12)

Kommentar von Phil

BildHoch und BildRunter.

Kenne die Methode und werde sie, sofern mal nötig umsetzen. So kann ich eine recht ansprechende Präsentation in meinem heimischen Coding-Gebiet machen.

Denn auch bei einer Präsentations stehen mir fast alle CSS-Spezifikationen zur Verfügung :)

Kommentar von Pablo

THX to Phil

»Ein Hinweis auf die Präsenation ist nicht verkehrt, insbesondere sollte die F11-Taste, wie PageUp/PageDown-Tasten zum Blättern erwähnt werden. Dies sollte allerdings nicht im projection-Modus zu lesen sein.«

Wurde das mit PageUp PageDown nacher noch eingefügt, oder habe ich es überlesen?

Kommentar von Silvio

schade, dass es nur im Opera funktioniert, es wäre eine tolle Sache, wenn das auch mit anderen Browsern funktionieren würde. Trotzdem eine tolle CSS Anwendung.

Gruss aus HH

Kommentar von daniel

hallo!
also es ist jänner und wie euch sicher bekannt ist gibt es immer recht viele Tests und Prüfungen. ich bräuchte eine Präsentation über CSS (Formatierungen)! Weiß vl jem. wo ich sowas herbekommen?
mfg

Kommentar von René

Wobei die einzige Präsentation zu CSS nichts aussagt ... spontan fällt mir nichts griffbereites ein, aber wozu soll ich googeln (im Sinne von mit einer x-beliebigen Suchmaschine suchen).

Was ich nur nicht verstehe: warum muß es eine Präsentation sein? Reicht selfhtml nicht?

Kommentar von daniel

nein unsere Proffesorin will eine Präsentation über die Formatierungen mit CSS und da ich im mom viele Prüfungen haben, wird das recht knapp ihr dokument mit 50 seiten zusammenzufassen. Aber egal vielen Dank. Muss halt jz durchbeisen

Kommentar verfassen

Freiwillige Angabe
Freiwillige Angabe
Der Text kann mit Textile formatiert werden, z.B. *fett* _kursiv_ "link":url. Wie das geht?
Wieviel ist 40 plus 2?

Bisherige Trackbacks (0)

Es wurde noch kein Trackback empfangen!