Eine grundlegende Einführung in die Benutzung von S5

Für einen Anfänger könnte es beängstigend wirken eine Präsentation in S5 zu erstellen. Aber keine Panik! Das schreiben einer Präsentation ist leicht, sehr leicht. Um den Weg ein wenig zu ebnen gibt es nun diese Einführung über das, was zu ändern ist und das was man besser in Ruhe lassen sollte.

Erste Schritte

Zuerst solltest du das leere S5-Archiv herunterladen. Dies ist eine 21 Kilobyte großes ZIP-Archiv, das alles enthält um eine einfache Präsentation zu erstellen: Die Präsentationsdatei selbst, die Style Sheets, die für die Anzeige zuständig sind und das JavaScript, das die Präsentation steuert.

Wenn du das Archiv heruntergeladen und entpackt hast, solltest du zwei Dinge finden: Eine Datei mit dem Namen s5-blank.html und einen Ordner (Verzeichnis) mit dem Namen ui. In diesem Ordner sind alle CSS- und JavaScript-Dateien, durch die die Präsentation funktioniert. Damit werden wir uns nicht befassen, für weitere Informationen zu diesen Dateien beachte die Datei-Referenz oder denke über Folie Nr. 7 in der Einführungs-Präsentation nach. Die einzige Datei, die wir bearbeiten ist die s5-blank.html. Auf geht’s: Lade die Datei in deinen Lieblings-Editor, egal ob das Dreamweaver, GoLive, Notepad (der Windows-Editor), TopStyle oder BBEdit ist. Die Anzeige hier erscheint in Notepad 2.

Auf zum Kopf

Der Erste Abschnitt der Präsentations-Datei, zumindest der erste nach dem DOCTYPE und dem <html>-Tag, ist das <head>-Element, siehe Bild 1.

Bild 1. Der erste Abschnitt der Präsentations-Datei

Meist sollte es nicht nötig sein diesen Teil der Datei anzufassen. Wenn beispielsweise eines der <link>-Elemente geändern würde, kann das die gesamte Präsentation zerstören. Du wirst also diesen Teil überspringen wollen… außer einer Zeile!

Siehst du das <title>-Element? Ändere den Inhalt von ”[Titel der Präsentation hier einfügen]” zum Titel deiner Präsentation. Fals du also eine Präsentation über die Vorteile der Atmung machst könntest du sie “Frei Atmen: Weshalb Luft gut für dich ist” nennen. Los, ändere den <title> in genau diesen satz, wie in Bild 2.

Bild 2. Der Titel wurde hinzugefügt.

Außer dieser ist keine Änderung im ersten Abschnitt nötig. Auf zum nächsten Teil.

Kopf- und Fußzeile

Wenn du dich in der Datei nach unten bewegst erreichst du ein <div> mit einer id, die den Wert layout hat. In diesem <div> befinden sich eine Reihe von Layoutkomponenten, diese erscheinen auf jeder Seiteder Präsentation. Wir finden hier Kopf- und Fußleiste, Kontrollelemente und so weiter, wie man in Bild 3 sieht.

Bild 3. Kopf- und Fußleiste, andere Komponenten.

Hier gibt es eigentlich nur zwei Dinge um die wir uns sorgen müssen: Die beiden eingeklammerten Texte. Ersetze den ersten mit “Musterhausen • 20. Oktober 2004” (Du kannst natürlich auch das heutige Datum eintragen, wenn du möchtest – dies ist nur das Datum an dem ich diese Einführung geschrieben habe). Für das zweite setze einfach den Titel ein. Du kannst ihn vom <title>-Element kopieren, wenn du dir die Tipparbeit sparen willst.

Ein paar Wörter zur XHTML-Struktur, die du hier siehst: Vieles ist nötig, damit die Präsentation funktioniert und sollte deshalb nicht verändert werden. Ein Beispiel dafür ist <div id="controls"></div>. In Kopf- und Fußleiste (<div id="header"></div> und <div id="footer"></div>) kannst du aber alle mögliche XHTML-Inhalte einsetzen. Die einzige wirkliche Begrenzung ist, dass sie ziemlich klein sein sollten, denn je größer Kopf- und Fußzeile sind, desto weniger Platz bleibt für die eigentlichen Inhalte der Präsentation. Wenn du das Markup (XHTML-Code) innerhalb von Kopf- und Fußzeile veränderst musst du auch damit rechnen, dass du CSS-Dateien bearbeiten musst. Darauf gehen wir aber jetzt nicht ein. Lassen wir alles so wie es ist und machen mit unserer ersten Seite weiter.

Die Titelseite

Im Allgemeinen ist die erste Seite einer Präsentation eine Titelseite. Das muss aber nicht der Fall sein, man kann auch direkt in die Präsentation springen ohne eine Titelfolie zu haben. Meist wird aber eine Titelfolie angebracht sein. Die Vorlage enthält eine typische Titelseite die in Bild 4 hervorgehoben ist.

Bild 4. Markup der ersten Seite.

Ersetze den ein eingeklammerten Text mit deinen Angaben. Für den Titel und Untertitel teilen wir den Titel in zwei Teile: “Frei Atmen” und “Weshalb Luft Gut Für Dich Ist”. Für den Präsentierenden benutze deinen eigenen Namen, für die “Weiteren Angaben” kann die die Firma oder Organisation, der man angehört eingetragen werden. In den Beispielen benutze ich meine eigenen Angaben, wie in Bild 5.

Sobald wir das getan haben schielen wir mal auf die Präsentation. Lade die Datei in einen Webbrowser wie Firefox, Safari oder Internet Explorer. Dies sind nicht die einzigen Browser, die funktionieren. Allgemein kann fast jeder Browser genutz werden, der im 21. Jahrhundert (im gregorianischen Kalender) veröffentlicht wurde. Eine verkleinerte Version der Titelseite findest du in Bild 5, inklusive ein paar Hervorhebungen.

Bild 5. Die Titelseite (mit Anmerkungen versehen).

Wir sehen unten links den Inhalt der Fußleiste, das erste, was in der Präsentationsdatei geändert wurde. In der Mitte ist der Inhalt der Titelseite, die gerade bearbeitet wurde. Wenn man mit der Maus in die untere rechte Ecke der Präsentation fährt wird automatisch ein Menü sowie die Kontrollelemente. Diese Dinge werden durch das JavaScript eingebunden, dem Kernelement von S5.

Ziemlich einfach soweit, oder? Warte ab: Es wird noch einfacher!

Eine Seite erstellen

Nochmal bewegen wir uns in s5-blank.html abwärts. Nach der ersten Seite, unserer Titelseite, findest du eine zusätzliche Seite. Siehe Bild 6.

Bild 6. Die erste Seite nach der Titelseite.

Nun hast du vielleicht selbst herausgefunden, was zu tun ist: Ersetze den eingeklammerten Text mit deinem eigenen Inhalt und schon hast du eine neue Folie. Der Titel könnte “Was ist Luft eigentlich?” sein und fünf Punkte könnten verschiedene Fakten über Luft sein – oder eine Zusammenfassung von dem was der Rest der Präsentation behandelt. Da die meisten Seiten aus ein paar Listenpunkten bestehen ist das naheliegendste eine “ungeordnete Liste” (<ul>) zu benutzen. Sie könnte natürlich auch mehr Elemente enthalten, aber beachte, dass sie zu lang werden könnte und dann hinter der Fußzeile verschwindet.

Nach der Liste siehst du nun ein <div> mit der Klasse handout. Das ist der Ort an dem zusätzliche Anmerkungen oder Informationen untergebracht werden können, die nicht in der Präsentation aber in den Handzetteln erscheinen sollen. Man könnte URLs hinterlegen oder Quelltext-Ausschnitte, oder etwas anderes, das jemandem nützlich erscheint, wenn er sich den Handzettel anschaut. Sollte die Seite keine zusätzlichen Druck-Informationen beinhalten, kann das <div> gelöscht oder leer stehen gelassen werden – es bleibt dir überlassen.

Nun schreibe etwas in den Handzettel-Bereich für die aktuelle Seite und lade die Präsentationsdatei in deinem Browser neu. Sobald die Titelseite erscheint, gehe zur nächsten Seite, indem du die Leertaste drückst (oder die Bild-Nach-Unten-Taste, die Pfeil-Nach-Rechts-Taste oder die Pfeil-Nach-Unten Taste; oder indem du irgendwo auf die Seite klickst). Du solltest etwas ähnliches wie in Bild Nr. 7 sehen.

Bild 7. Die neue Seite in einem Browser betrachten.

Beachte, dass das Handzettel-Material nicht auf der Seite erscheint. Wenn du aber die Datei s5-blank.html ausdruckst wird es am Ende der Seite erscheinen.

Um eine neue Seite zu erstellen kannst du entweder das Markup abschreiben oder (ewas praktischer) die vorherige Seite kopieren und es als letzte Seite eingefügen, und dann den Inhalt ändern. Es gibt keine bestimmte Anzahl an Seiten, es sollte also genug Platz da sein (Aber die Zuschauer könnten ein Problem mit 100-seitigen Präsentationen haben).

Sonstige Anmerkungen

Zusammenfassung

Wie du gesehen hast ist es ziemlich einfach eine eigene Präsentation zu erstellen. Meistens benötigst du nur eine kleine ungeordnete Liste auf jeder Seite, aber du kannst natürlich andere Materialien einfügen, wenn du willst.

Ich hoffe, diese Einführung half die eine eigene Präsentationen zu erstellen.