Advertisement
  1. Web Design
  2. HTML/CSS

Wie man Präsentationsfolien mit HTML und CSS erstellt

Scroll to top
Read Time: 12 min

() translation by (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.

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
  <title>Document</title>
8
  <link rel="stylesheet" href="css/style.css">
9
10
  <!-- Font Awesome Icon CDN -->
11
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
12
</head>
13
<body>
14
  <div class="container"
15
    <div id="presentation-area">
16
       <!-- slides go here -->
17
    </div>
18
  </div>
19
<script src="js/index.js" type="text/javascript"></script>
20
</body>
21
</html>

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:

1
<section class="presentation">
2
3
    <!-- Slide 1 -->
4
    <div class="slide show">
5
      <div class="heading">
6
        Presentation on C#
7
      </div>
8
      <div class="content grid center">
9
        <h3 class="title">
10
          What is C# ? <br /> All You Need To Know
11
        </h3>
12
      </div>
13
    </div>
14
15
    <!-- Slide 1 -->
16
    <div class="slide">
17
      <div class="heading">
18
        Overview
19
      </div>
20
      <div class="content grid center">
21
        <h3 class="title">
22
          Introduction to C+
23
        </h3>
24
        <p class="sub-title">
25
          Basic and Advanced Concepts
26
        </p>
27
        <p>Lecture No. 1</p>
28
        <p>My Email Address</p>
29
        <p><a href="">ubahthebuilder@gmail.com</a></p>
30
      </div>
31
    </div>
32
33
    <!-- Add 5 more slides here -->
34
</section>

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:

1
<div id="presentation-area">
2
   <!-- <section class="slides"><-></section> -->
3
   <section class="counter">
4
    1 of 6
5
  </section>
6
</div>

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:

1
<div id="presentation-area">
2
   <!-- <section class="slides"><-></section> -->
3
   <!-- <section class="counter"><-></section> -->
4
   <section class="navigation">
5
        <button id="full-screen" class="btn-screen show">
6
          <i class="fas fa-expand"></i>
7
        </button>
8
9
        <button id="small-screen" class="btn-screen">
10
          <i class="fas fa-compress"></i>
11
        </button>
12
13
        <button id="left-btn" class="btn">
14
          <i class="fas fa-solid fa-caret-left"></i>
15
        </button>
16
17
        <button id="right-btn" class="btn">
18
          <i class="fa-solid fa-caret-right"></i>
19
        </button>
20
  </section>
21
</div>

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:

1
* {
2
  margin: 0;
3
  padding: 0;
4
  box-sizing: border-box;
5
  font-family: sans-serif;
6
  transition: all 0.5s ease;
7
}
8
9
body {
10
  width: 100vw;
11
  height: 100vh;
12
  display: flex;
13
  align-items: center;
14
  justify-content: center;
15
}
16
17
ul {
18
  margin-left: 2rem;
19
}
20
21
ul li,
22
a {
23
  font-size: 1.2em;
24
}
25
26
.container {
27
  background: #212121;
28
  width: 100%;
29
  height: 100%;
30
  position: relative;
31
  display: flex;
32
  align-items: center;
33
  justify-content: center;
34
}
35
36
#presentation-area {
37
  width: 1000px;
38
  height: 500px;
39
  position: relative;
40
  background: purple;
41
}
42
43
/* Styling all three sections */
44
#presentation-area .presentation {
45
  width: 100%;
46
  height: 100%;
47
  overflow: hidden;
48
  background: #ffffff;
49
  position: relative;
50
}
51
52
#presentation-area .counter {
53
  position: absolute;
54
  bottom: -30px;
55
  left: 0;
56
  color: #b6b6b6;
57
}
58
59
#presentation-area .navigation {
60
  position: absolute;
61
  bottom: -45px;
62
  right: 0;
63
}
64
65
/* On full screen mode */
66
#presentation-area.full-screen {
67
  width: 100%;
68
  height: 100%;
69
  overflow: hidden;
70
}
71
72
#presentation-area.full-screen .counter {
73
  bottom: 15px;
74
  left: 15px;
75
}
76
77
#presentation-area.full-screen .navigation {
78
  bottom: 15px;
79
  right: 15px;
80
}
81
82
#presentation-area.full-screen .navigation .btn:hover {
83
  background: #201e1e;
84
  color: #ffffff;
85
}
86
87
#presentation-area.full-screen .navigation .btn-screen:hover {
88
  background: #201e1e;
89
}
90
/* End full screen mode */
91
92
/* Buttons */
93
.navigation button {
94
  width: 30px;
95
  height: 30px;
96
  border: none;
97
  outline: none;
98
  margin-left: 0.5rem;
99
  font-size: 1.5rem;
100
  line-height: 30px;
101
  text-align: center;
102
  cursor: pointer;
103
}
104
105
.navigation .btn {
106
  background: #464646;
107
  color: #ffffff;
108
  border-radius: 0.25rem;
109
  opacity: 0;
110
  transform: scale(0);
111
}
112
113
.navigation .btn.show {
114
  opacity: 1;
115
  transform: scale(1);
116
  visibility: visible;
117
}
118
119
.navigation .btn-screen {
120
  background: transparent;
121
  color: #b6b6b6;
122
  visibility: hidden;
123
}
124
125
.btn-screen.show {
126
  opacity: 1;
127
  transform: scale(1);
128
  visibility: visible;
129
}
130
131
.btn-screen.hover {
132
  color: #ffffff;
133
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
134
}
135
/* End Buttons */
136
137
/* content */
138
.presentation .content {
139
  padding: 2em;
140
  width: 100%;
141
  height: calc(100% - 100px);
142
  z-index: 11;
143
}
144
145
.presentation .content.grid {
146
  display: grid;
147
}
148
149
.presentation .content.grid.center {
150
  justify-content: center;
151
  align-items: center;
152
  text-align: center;
153
}
154
155
.content .title {
156
  font-size: 3em;
157
  color: purple;
158
}
159
160
.content .sub-title {
161
  font-size: 2.5em;
162
  color: purple;
163
}
164
165
.content p {
166
  font-size: 1.25em;
167
  margin-bottom: 1rem;
168
}
169
/* End Content Stylesheet */
170
171
/* Slide */
172
.presentation .slide {
173
  position: absolute;
174
  top: 0;
175
  left: 0;
176
  width: 100%;
177
  height: 100%;
178
  background: #ffffff;
179
  opacity: 0;
180
  transform: scale(0);
181
  visibility: none;
182
}
183
184
.slide.show {
185
  opacity: 1;
186
  transform: scale(1);
187
  visibility: visible;
188
}
189
190
.slide .heading {
191
  padding: 2rem;
192
  background: purple;
193
  font-size: 2em;
194
  font-weight: bold;
195
  color: #ffffff;
196
}

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:

1
let slidesParentDiv = document.querySelector('.slides');
2
let slides = document.querySelectorAll('.slide');
3
let currentSlide = document.querySelector('.slide.show');

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

1
var slideCounter = document.querySelector('.counter');
2
var leftBtn = document.querySelector('#left-btn');
3
var rightBtn = document.querySelector('#right-btn');

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

1
let presentationArea = document.querySelector('#presentation-area');
2
var fullScreenBtn = document.querySelector('#full-screen');
3
var smallScreenBtn = document.querySelector('#small-screen');

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

1
var screenStatus = 0;
2
var currentSlideNo = 1
3
var totalSides = 0;

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:

1
leftBtn.addEventListener('click', moveToLeftSlide);
2
rightBtn.addEventListener('click', moveToRightSlide);
3
4
fullScreenBtn.addEventListener('click', fullScreenMode);
5
smallScreenBtn.addEventListener('click', smallScreenMode);

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:

1
function moveToLeftSlide() {
2
  var tempSlide = currentSlide;
3
  currentSlide = currentSlide.previousElementSibling;
4
  tempSlide.classList.remove('show');
5
  currentSlide.classList.add('show');
6
}
7
8
function moveToRightSlide() {
9
  var tempSlide = currentSlide;
10
  currentSlide = currentSlide.nextElementSibling;
11
  tempSlide.classList.remove('show');
12
  currentSlide.classList.add('show');
13
}

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:

1
function fullScreenMode() {
2
  presentationArea.classList.add('full-screen');
3
  fullScreenBtn.classList.remove('show');
4
  smallScreenBtn.classList.add('show');
5
6
  screenStatus = 1;
7
}
8
9
function smallScreenMode() {
10
  presentationController.classList.remove('full-screen');
11
  fullScreenBtn.classList.add('show');
12
  smallScreenBtn.classList.remove('show');
13
14
  screenStatus = 0;
15
}

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:

1
function hideLeftButton() {
2
  if(currentSlideNo == 1) {
3
    toLeftBtn.classList.remove('show');
4
  } else {
5
    toLeftBtn.classList.add('show');
6
  }
7
}
8
9
function hideRightButton() {
10
  if(currentSlideNo === totalSides) {
11
    toRightBtn.classList.remove('show');
12
  } else {
13
    toRightBtn.classList.add('show');
14
  }
15
}

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:

1
function getCurrentSlideNo() {
2
  let counter = 0;
3
4
  slides.forEach((slide, i) => {
5
    counter++
6
7
    if(slide.classList.contains('show')){
8
      currentSlideNo = counter;
9
    }
10
  });
11
12
}

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:

1
function setSlideNo() {
2
  slideNumber.innerText = `${currentSlideNo} of ${totalSides}`
3
}

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:

1
init();
2
3
function init() {
4
5
  getCurrentSlideNo();
6
  totalSides = slides.length
7
  setSlideNo();
8
  hideLeftButton();
9
  hideRightButton();
10
}

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

1
function moveToLeftSlide() {
2
  // other code

3
4
  init();
5
}
6
7
function moveToRightSlide() {
8
  // other code

9
10
  init();
11
}

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 Web Design 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.