Lernfabrik

💻 Anleitung: Webseite „Vier Jahreszeiten“ mit Bootstrap & CSS – ohne JavaScript

Schritt 1: Neues Projekt anlegen

Erstelle auf deinem Computer einen neuen Ordner, z. B. vier_jahreszeiten. In diesem Ordner legst du folgende Dateien und Unterordner an:

  • index.html – die Hauptdatei
  • bilder/ – Ordner für deine Bilder (Herbst, Winter, Frühling, Sommer)

Lege in bilder/ z. B. folgende Dateien ab:

bilder/
 ├── herbst1.jpg
 ├── herbst2.jpg
 ├── herbst3.jpg
 ├── herbst4.jpg
 ├── winter1.jpg
 ├── winter2.jpg
 ├── fruehling1.jpg
 ├── sommer1.jpg
 └── ...

Schritt 2: HTML-Grundgerüst erstellen

Öffne deinen Editor (z. B. VS Code) und schreibe folgendes Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vier Jahreszeiten</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <header>
    <h1>Die vier Jahreszeiten</h1>
  </header>

</body>
</html>

Speichere die Datei als index.html.

Schritt 3: Grundstruktur der Seite

Im <body> fügst du vier Abschnitte ein – einen für jede Jahreszeit:

<main class="container">
  <section>🍂 Herbst</section>
  <section>❄️ Winter</section>
  <section>🌸 Frühling</section>
  <section>☀️ Sommer</section>
</main>

Schritt 4: Karussell für den Herbst

Füge ein Bootstrap-Bilderkarussell ein. So können die Schüler die Bilder durchklicken:

<div id="herbstKarussell" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#herbstKarussell" data-slide-to="0" class="active"></li>
    <li data-target="#herbstKarussell" data-slide-to="1"></li>
    <li data-target="#herbstKarussell" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="bilder/herbst1.jpg" class="d-block w-100" alt="Herbst 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>🍁 Herbst – Szene 1</h5>
        <p>Goldene Blätter im Sonnenlicht</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="bilder/herbst2.jpg" class="d-block w-100" alt="Herbst 2">
      <div class="carousel-caption d-none d-md-block">
        <h5>🍂 Herbst – Szene 2</h5>
        <p>Bunte Wälder und ruhige Wege</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="bilder/herbst3.jpg" class="d-block w-100" alt="Herbst 3">
      <div class="carousel-caption d-none d-md-block">
        <h5>🌰 Herbst – Szene 3</h5>
        <p>Kastanien und Nebelstimmung</p>
      </div>
    </div>
  </div>

  <a class="carousel-control-prev" href="#herbstKarussell" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Zurück</span>
  </a>
  <a class="carousel-control-next" href="#herbstKarussell" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Weiter</span>
  </a>
</div>

💡 Tipp: Schüler können eigene Bilder einsetzen, indem sie die Pfade in src="bilder/herbstX.jpg" anpassen.

Schritt 5: Bootstrap-Galerien

Für die anderen Jahreszeiten nutzt du Bootstrap-Spalten:

<div class="row g-3 season-gallery">
  <div class="col-6 col-md-3"><img src="bilder/winter1.jpg" class="img-fluid rounded" alt="Winter 1"></div>
  ...
</div>

Schritt 6: Einfaches CSS hinzufügen

Im <style>-Bereich deiner HTML-Datei kannst du dein Grunddesign einfügen:

.carousel-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 10px;
}

.season-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

Schritt 7: Seite testen

  1. Öffne index.html im Browser.
  2. Klicke auf die Pfeile oder Punkte im Karussell.
  3. Die Bilder sollen flüssig wechseln, ohne Verzerrung.

Schritt 8: CSS-Design & Denkaufgaben

Hier findest du das wichtigste CSS für dein Projekt. Lies die Kommentare genau und überlege, was jede Regel bewirkt.

<style>
/* Grunddesign */
body {
  background: #f8f9fa;
  font-family: "Segoe UI", sans-serif;
  color: #333;
}

header {
  background: linear-gradient(135deg, #ff9966, #ff5e62);
  color: white;
  text-align: center;
  padding: 2rem 1rem;
}

section {
  padding: 2rem 0;
  text-align: center;
}

/* Bilder in Galerien */
.season-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.season-gallery img:hover {
  transform: scale(1.05);
}
</style>