Cascading Stylesheets

Präsentation mit HTML (27.11.2004)

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.

[Trackback (1)] [Kommentar-RSS] [CSS]

Bisherige Kommentare

[Pablo] (28.11.2004)

Auf jeden Fall nicht schlecht. Wie geht man denn eine Seite weiter?

[Phil] (28.11.2004)

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 :)

[Pablo] (28.11.2004)

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?

[Silvio] (28.11.2004)

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

[René] (28.11.2004)

@Pablo -> Ich habe es nachträglich eingefügt.

[Pablo] (28.11.2004)

Das beruhigt mich :)

[S5] (05.03.2006)

Auf S5easy.com ist es möglich S5 Präsentationen online zu erstellen, speichern, downzuladen.

[daniel] (16.01.2007)

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

[Matthias] (16.01.2007)

S5 hat doch seine Seite verlinkt. Dort einfach mal in eine Seite reingucken und den Quelltext begutachten, das sollte schon helfen.

[daniel] (16.01.2007)

ich check das überhaupt nicht da sind tausend links. wie soll ich da zu einer präsentation kommen?
mfg

[René] (17.01.2007)

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?

[daniel] (17.01.2007)

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

Empfangene Trackbacks

[Präsentation im Browser] (18.02.2006)

Um eine Präsentation durchzuführen muss man nicht immer Powerpoint (Microsoft) oder Impress (OpenOffice bzw. StarOffice) bemühen. Mit Hilfe von (X)HTML und CSS kann man auch eine Präsentation erstellen. Benötigt wird ein Text-Editor um die Präsentation...

Kommentar verfassen