RadioGruppe Logo

Website-Template

Einleitung

Das Website-Template ist die Basis für alle Webseiten der RadioGruppe Deutschland. Es stellt sicher, dass sich alle Seiten optisch und technisch ähnlich verhalten, unabhängig davon, ob es sich um eine zentrale Seite oder eine regionale Unterseite handelt.

Ein gemeinsames Template erleichtert die Pflege, macht Updates einfacher und sorgt für eine klare Struktur. Das bedeutet: Änderungen an Design oder wichtigen Funktionen müssen nur einmal gemacht werden.

Wichtige Vorteile:

Grundprinzip & Aufbau

Wichtige Bausteine im <body>:

Beispiel für das Grundgerüst: 

<body>
    <div id="header"></div>
    <section class="hero" style="background-image: url('https://cdn.radiogruppe.de/files/images/hero.jpg');">
        <div class="hero-content">
            <h1>Mein Projekttitel</h1>
        </div>
    </section>
    <main>
        <!-- Eigene Inhalte hier einfügen -->
    </main>
    <div id="footer"></div>
</body>

CDN & zentrale Assets

Tipp: Nutze immer die vollständige CDN-URL, damit deine Seite unabhängig vom Speicherort funktioniert.

Neue Seite anlegen

  1. Ordner anlegen:
    Lege für deine neue Seite einen eigenen Ordner an, z. B. mein-projekt/.
  2. Datei erstellen:
    Erstelle im Ordner eine Datei namens index.html.
  3. Head übernehmen:
    Kopiere den <head>-Bereich von einer vorhandenen Seite. Das sichert einheitliche Meta-Daten, Styles und Scripts.
  4. Body-Struktur verwenden:
    Baue deine Seite mit den festen Bereichen header, hero, main und footer auf.
  5. Header und Footer einbinden:
    Am Ende des <body> müssen die Skripte stehen, die Header und Footer laden.
  6. Seite ins Menü aufnehmen:
    Füge einen Eintrag in static/header.html hinzu, damit deine Seite in der Navigation erscheint.

Beispiel einer neuen Seite: 

<!DOCTYPE html>
<html lang="de">
<head>
    <!-- ...Meta-Tags, Stylesheets, CDN-Links... -->
</head>
<body>
    <div id="header"></div>
    <section class="hero" style="background-image: url('https://cdn.radiogruppe.de/files/images/hero-projekt.jpg');">
        <div class="hero-content">
            <h1>Mein Projekt</h1>
        </div>
    </section>
    <main>
        <p>Hier steht der Inhalt deiner neuen Seite.</p>
    </main>
    <div id="footer"></div>
    <script src="/assets/js/main.js"></script>
    <script>
        fetch('/static/header.html').then(res => res.text()).then(data => document.getElementById('header').innerHTML = data);
        fetch('/static/footer.html').then(res => res.text()).then(data => document.getElementById('footer').innerHTML = data);
    </script>
</body>
</html>

Struktur einer Seite

Die Seitenstruktur folgt einem festen Muster. Dadurch sind neue Inhalte schneller erstellbar und die Seiten bleiben übersichtlich. 

<!DOCTYPE html>
<html lang="de">
<head>
    <!-- ALLE Meta-Tags, Stylesheets und CDN-Links -->
</head>
<body>
    <div id="header"></div>
    <section class="hero" style="background-image: url('https://cdn.radiogruppe.de/files/images/hero.jpg');">
        <div class="hero-content">
            <h1>Seitentitel</h1>
        </div>
    </section>
    <main>
        <!-- Eigene Inhalte -->
    </main>
    <div id="footer"></div>
    <button id="back-to-top"><i class="fa-solid fa-angle-up"></i></button>
    <script src="/assets/js/main.js"></script>
    <script>
        fetch('/static/header.html').then(res => res.text()).then(data => document.getElementById('header').innerHTML = data);
        fetch('/static/footer.html').then(res => res.text()).then(data => document.getElementById('footer').innerHTML = data);
    </script>
</body>
</html>

Hinweis: Die hero-Section kannst du für jede Seite individuell anpassen, zum Beispiel mit eigenen Bildern, Texten und Farben.

Best Practices

Zusätzliche Hinweise:

© RadioGruppe Deutschland. Alle Rechte vorbehalten.

Impressum | Datenschutz