RG-Template

Einleitung

Das RG-Template ist das zentrale Website-Template für alle Angebote der RadioGruppe Deutschland (RGDE) – inklusive der regionalen Seiten (Nord, Ost, Süd, West). Es sorgt für ein einheitliches, modernes und wartbares Webdesign.

Warum ein Template?
Ein gemeinsames Template stellt sicher, dass alle Seiten gleich aussehen, einfach gepflegt werden können und neue Inhalte schnell integriert werden. Änderungen am Design oder an zentralen Funktionen müssen nur einmal im Template vorgenommen werden und gelten dann für alle Seiten.

Was bietet das RG-Template?

Grundprinzip & Aufbau

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: Verwende immer die vollständige CDN-URL, damit die Dateien unabhängig vom Speicherort deiner Seite geladen werden.

Neue Seite anlegen

  1. Neuen Ordner anlegen:
    Erstelle für dein Projekt einen eigenen Ordner, z.B. mein-projekt/.
  2. index.html erstellen:
    Lege darin eine Datei index.html an.
  3. Head-Bereich übernehmen:
    Kopiere den gesamten <head>-Bereich einer bestehenden Seite. Achte darauf, alle Meta-Tags, Stylesheets, CDN-Links und Scripte zu übernehmen.
  4. Body-Struktur einhalten:
    Im <body> müssen folgende Elemente enthalten sein:
    • <div id="header"></div> – Platzhalter für das Menü
    • <section class="hero">...</section> – Titelbild und Überschrift
    • <main>...</main> – deine Inhalte
    • <div id="footer"></div> – Platzhalter für den Footer
  5. Scripte für Header/Footer einfügen:
    Am Ende des <body> müssen die Scripte stehen, die Header und Footer automatisch nachladen:
    <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>
  6. Seite im Menü eintragen:
    Öffne static/header.html und füge einen Link zu deiner neuen Seite hinzu, damit sie im Hauptmenü erscheint.
    Beispiel:
    <li><a href="/mein-projekt/">Mein Projekt</a></li>

Beispiel für eine neue 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

Jede Seite folgt einer festen Struktur. Das sorgt für Übersichtlichkeit und erleichtert die Wartung. Hier ein vollständiges Beispiel: 

<!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 kann für jede Seite individuell gestaltet werden, z.B. mit einem eigenen Bild und Titel.

Best Practices

Weitere Tipps: