Advertisement
  1. Code
  2. JavaScript

Wie man Präsentationsfolien mit HTML und CSS erstellt

Scroll to top
Read Time: 10 mins

German (Deutsch) translation by Mehmet Kocak (you can also view the original English article)

Als ich die verschiedenen Softwareprogramme für die Erstellung von Präsentationsfolien durchstöberte, kam mir der Gedanke: Warum noch ein weiteres Programm lernen, wenn ich stattdessen die Tools verwenden kann, mit denen ich bereits vertraut bin?

Heutzutage gibt es ziemlich viele gute Möglichkeiten, um eine Präsentation zu erstellen. Wenn Sie ausnahmsweise mehr Zeit zur Verfügung haben oder nicht direkt zu Microsoft Office greifen möchten, um eine PowerPoint Präsentation erstellen zu können. Natürlich gibt es genügend PowerPoint Präsentation Downloads für jeden Zweck, wenn Sie es eilig haben. Wenn Sie aber etwas mehr Zeit hätten, mit Web-Technologien experimentieren wollen, und bedenken, dass eine Präsentation ziemlich ähnlich ist, wie eine einfache HTML Seite, dann ist dieser Artikel genau was Sie brauchen.

Mit HTML, CSS und JavaScript, den drei grundlegenden Webtechnologien, können wir ganz einfach schöne und interaktive Präsentationen erstellen. In diesem Tutorial verwenden wir modernes HTML5-Markup, um unsere Folien zu strukturieren, wir verwenden CSS, um die Folien zu gestalten und einige Effekte hinzuzufügen, und wir verwenden JavaScript, um diese Effekte auszulösen und die Folien auf der Grundlage von Klickereignissen neu zu organisieren.

Dieses Tutorial ist perfekt für diejenigen die neu in HTML5, CSS und JavaScript sind und etwas Neues lernen wollen, indem sie etwas aufbauen.

Hier ist die endgültige Vorschau auf die Präsentationsfolie, die wir erstellen werden:

Sie können auch den kompletten Quellcode im GitHub Repo finden.

Lassen Sie uns beginnen.

1. Erstellen Sie die Verzeichnisstruktur

Bevor wir beginnen, lassen Sie uns unsere Ordnerstruktur erstellen. Sie sollte recht einfach sein. Wir brauchen:

  • index.html
  • css/style.css
  • js/scripts.js

Dies ist eine einfache Basisvorlage. Ihre Dateien bleiben vorerst leer. Das werden wir in Kürze ändern.

2. Erstellen Sie das Starter Markup

Beginnen wir damit, das Basis-Markup für unsere Präsentationsseite zu erstellen. Fügen Sie den folgenden Ausschnitt in Ihre index.html Datei ein.

Aus dem Basis-Markup können Sie erkennen, dass wir Font Awesome Icons, unser Stylesheet (style.css) und unser JavaScript (index.js) importieren.

Nun fügen wir das HTML-Markup für die eigentlichen Folien innerhalb des <div>-Wrappers hinzu:

Wir haben insgesamt sieben Folien, und jede Folie besteht aus einem Überschriftenabschnitt und einem Inhaltsabschnitt.

Es wird immer nur eine Folie auf einmal angezeigt. Diese Funktion wird von der Klasse .show übernommen, die wir später in unserem Stylesheet implementieren werden. Mithilfe von JavaScript werden wir später die Klasse .show dynamisch zur aktiven Folie auf der Seite hinzufügen.

Unter den Folien fügen wir das Markup für den Zähler und den Tracker unserer Folie hinzu:

Später werden wir JavaScript verwenden, um den Textinhalt zu aktualisieren, wenn der Benutzer durch die Folien navigiert.

Schließlich fügen wir den Foliennavigator direkt unter dem Zähler ein:

Dieser Bereich besteht aus vier Schaltflächen, die für die Navigation nach links und rechts und den Wechsel zwischen Vollbildmodus und Kleinbildmodus zuständig sind. Auch hier verwenden wir die Klasse .show, um festzulegen, welche Schaltfläche jeweils erscheint.

Das war's dann auch schon mit dem HTML-Teil. Gehen wir nun zum Styling über.

3. Machen Sie es hübsch

Unser nächster Schritt findet in unserem Stylesheet statt. Wir werden uns hier sowohl auf die Ästhetik als auch auf die Funktionalität konzentrieren. Damit jede Folie von links nach rechts übersetzt werden kann, müssen wir die Klasse .show mit einem Stylesheet versehen, um das Element anzuzeigen.

Hier ist das komplette Stylesheet für unser Projekt:

4. Foliennavigation aktivieren

Wenn wir auf das linke oder rechte Symbol klicken, möchten wir, dass die nächste Folie oder die vorherige Folie angezeigt wird. Außerdem möchten wir die Möglichkeit haben, zwischen dem Vollbildmodus und dem Kleinbildmodus umzuschalten.

Außerdem möchten wir, dass der Folienzähler auf jeder Folie die genaue Foliennummer anzeigt. All diese Funktionen werden mit JavaScript aktiviert.

In der Datei js/index.js speichern wir zunächst Verweise auf den Presentation Wrapper, die Folien und die aktive Folie:

Als Nächstes speichern wir Verweise auf den Folienzähler und die beiden Foliennavigatoren (linke und rechte Symbole):

Dann speichern Sie Verweise auf den gesamten Präsentationscontainer und die beiden Schaltflächensymbole für den Wechsel in den Vollbild- und Kleinbildmodus:

Nun, da wir mit den Referenzen fertig sind, werden wir einige Variablen mit Standardwerten initialisieren:

screenStatus stellt die Bildschirmausrichtung dar. 0 steht für einen Vollbildmodus und 1 für einen Kleinbildmodus.

currentSlideNo steht für die Nummer der aktuellen Folie, die erwartungsgemäß die erste Folie ist. totalSlides wird mit 0 initialisiert, aber dies wird durch die tatsächliche Anzahl unserer Folien ersetzt.

Wechseln der Präsentation auf die nächste und vorherige Folie

Als Nächstes fügen wir Click-Event-Listener für die linke Schaltfläche, die rechte Schaltfläche, die Vollbild-Schaltfläche und die Schaltfläche für den Kleinbildmodus hinzu:

Wir binden entsprechende Funktionen, die ausgeführt werden, wenn das Click-Event auf das entsprechende Element ausgelöst wird.

Hier sind die beiden Funktionen, die für den Wechsel der Folie verantwortlich sind:

In der Funktion moveToLeftSlide greifen wir im Grunde auf das vorherige Geschwister-Element (d.h. die vorherige Folie) zu, entfernen die Klasse .show auf der aktuellen Folie und fügen sie zu diesem Geschwister-Element hinzu. Dadurch wird die Präsentation auf die vorherige Folie verschoben.

Das genaue Gegenteil davon machen wir in der Funktion moveToRightSlide. Da nextElementSibling das Gegenteil von previousElementSibling ist, erhalten wir stattdessen das nächste Geschwisterteil.

Code für die Anzeige der Präsentation im Vollbild und im Kleinbild

Erinnern Sie sich daran, dass wir auch Click-Event-Listener für die Icons des Vollbildmodus und des Kleinbildmodus hinzugefügt haben. Hier ist die Funktion, die für das Umschalten des Vollbildmodus verantwortlich ist:

Erinnern Sie sich, dass presentationArea sich auf das Element bezieht, das die gesamte Präsentation umhüllt. Indem wir die Klasse full-screen zu diesem Element hinzufügen, lösen wir das CSS aus, das es so erweitert, dass es den gesamten Bildschirm einnimmt.

Da wir uns jetzt im Vollbildmodus befinden, müssen wir das Symbol für die Rückkehr zum Kleinbildmodus anzeigen, indem wir ihm die Klasse .show hinzufügen. Schließlich aktualisieren wir die Variable screenStatus auf 1.

Für die Funktion smallScreenMode machen wir das Gegenteil - wir entfernen die Klasse full-screen, zeigen das Symbol der Schaltfläche zum Erweitern an und aktualisieren screenStatus.

Ausblenden der linken und rechten Icons auf der ersten und letzten Folie

Nun müssen wir einen Weg finden, um die linke und rechte Schaltfläche auszublenden, wenn wir uns auf der ersten bzw. letzten Folie befinden.

Dazu verwenden wir die folgenden beiden Funktionen:

Beide Funktionen erfüllen eine sehr einfache Aufgabe: Sie prüfen die aktuelle Foliennummer und blenden die linke und rechte Schaltfläche aus, wenn die Präsentation auf die erste bzw. letzte Folie zeigt.

Aktualisierung und Anzeige der Foliennummer

Da wir die Variable currentSlideNo verwenden, um die Schaltflächen für die linke und rechte Seite ein- und auszublenden, brauchen wir eine Möglichkeit, sie zu aktualisieren, wenn der Benutzer durch die Folien navigiert. Außerdem müssen wir dem Benutzer anzeigen, welche Folie er gerade sieht.

Wir erstellen eine Funktion getCurrentSlideNo, um die Nummer der aktuellen Folie zu aktualisieren:

Wir beginnen den Zähler bei 0 und erhöhen den Zähler für jede Folie auf der Seite. Wir weisen den aktiven Zähler (d.h. mit der Klasse .show) zu der Variablen currentSlideNo zu.

Damit erstellen wir eine weitere Funktion, die einen Text in den Folienzähler einfügt:

Wenn wir also zum Beispiel auf der zweiten Folie wären, würde der Folienzähler lauten: "2 von 6".

Alles zusammenfügen

Um sicherzustellen, dass all diese Funktionen harmonisch ablaufen, führen wir sie in einer neu erstellten init-Funktion aus, die wir am Anfang des Skripts, direkt unter den Referenzen, ausführen:

Wir müssen außerdem init() am Ende der beiden Funktionen moveToLeftSlide und moveToRightSlide ausführen:

Damit wird sichergestellt, dass die Funktion init jedes Mal ausgeführt wird, wenn der Benutzer in der Präsentation nach links oder rechts navigiert.

Zusammenfassung

Ich hoffe, dieses Tutorial hat Ihnen geholfen, die Grundlagen der Webentwicklung besser zu verstehen. Hier haben wir eine Präsentations-Slideshow von Grund auf mit HTML, CSS und JavaScript erstellt.

Mit diesem Projekt sollten Sie einige Grundkenntnisse in HTML, CSS und JavaScript erlernt haben, die Ihnen bei der Webentwicklung helfen werden.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.