Tutorial Herbert Fritsche Design-Editor

Anleitung zum Erstellen und Bearbeiten von Website-Designs

1. Schnellstart

2. Überblick

Die Herbert Fritsche Website besteht aus mehreren Design-Versionen. Jede Version zeigt denselben Inhalt in einem anderen Layout:

• Original – Die originale Website, unverändert übernommen
• Bereinigt – Gleiches Aussehen, aber mit modernem HTML/CSS
• Frisch – Modernes, responsives Design
• Sauber – Saubere Trennung von Inhalt und Design, mit integriertem Editor

Die saubere Version dient als Basis für neue Designs. Sie können beliebig viele eigene Designs erstellen.

3. Anmelden

Nach der Anmeldung sehen Sie zusätzliche Funktionen: Design erstellen, Terminal, Admin-Panel.

4. Inhalte bearbeiten (WYSIWYG-Editor)

Jede Seite der sauberen Version (und aller davon abgeleiteten Designs) hat einen integrierten WYSIWYG-Editor.

5. Neues Design erstellen

Es passiert Folgendes:

• Ein neuer Ordner wird angelegt (Kopie der sauberen Version)
• Ein Browser-Terminal öffnet sich automatisch mit Claude Code
• Claude Code startet im Verzeichnis des neuen Designs

6. Terminal / Claude Code

Das integrierte Terminal ermöglicht Ihnen, Designs mit Hilfe von KI (Claude Code) zu bearbeiten.

Beim Erstellen eines neuen Designs

Nach dem Erstellen öffnet sich das Terminal automatisch mit Claude Code. Beschreiben Sie einfach, was Sie möchten:

Ändere die Farben zu einem dunklen Design mit blauem Akzent.
Die Schriftart soll Georgia sein. Der Header soll fixiert sein.

Oder verwenden Sie eine Vorlage:

Gestalte das Design wie die Website https://beispiel.de – modern,
mit großem Header-Bild und Karten-Layout für die Bücher.

Nachträgliches Bearbeiten

claude_edit mein_design

Beispiele für Anweisungen an Claude

• „Ändere die Hintergrundfarbe der Sidebar zu #2c3e50"
• „Mache das Design responsive für mobile Geräte"
• „Füge einen Schatteneffekt zu den Buchcover-Bildern hinzu"
• „Ersetze die Sidebar-Navigation durch ein horizontales Dropdown-Menü"
• „Gestalte die Startseite als Hero-Section mit großem Hintergrundbild"

7. Admin-Panel

Das Admin-Panel bietet Verwaltung von Seitenstruktur, Schriften und Bildern. Es gibt zwei Zugangswege:

Direkt-URL: /sauber/admin.php (bzw. /ihr-design/admin.php)

Das Admin-Panel hat vier Bereiche:

• Seitenstruktur – Seiten hinzufügen, bearbeiten (alle Felder), löschen, umsortieren per Drag & Drop
• Schriften – Eigene Schriftdateien hochladen
• Bilder – Bilder hochladen und verwalten
• Backup – Sicherungskopien erstellen, wiederherstellen, herunterladen

8. Seitenstruktur bearbeiten

Im Tab Seitenstruktur des Admin-Panels sehen Sie den Navigationsbaum der Website.

Seite hinzufügen

Die neue Seite bekommt automatisch eine leere Inhaltsdatei. Bearbeiten Sie den Inhalt im WYSIWYG-Editor.

Seite bearbeiten

Auf-/Zuklappen

Elternseiten mit Unterseiten (z.B. Gesamtausgabe) haben einen Pfeil-Button (▼) links. Klicken Sie darauf, um die Unterseiten ein- oder auszublenden.

Reihenfolge per Drag & Drop

Seite löschen

Klicken Sie auf das × neben der Seite. Es wird eine Bestätigung abgefragt. Die Inhaltsdatei wird ebenfalls gelöscht.

9. Schriften hochladen

Hochgeladene Schriften werden automatisch als @font-face in fonts/fonts.css registriert und auf allen Seiten geladen.

Schrift verwenden

Bearbeiten Sie css/style.css, um die Schrift einzusetzen:

body {
    font-family: 'Mein Font', 'Segoe UI', sans-serif;
}

10. Bilder hochladen

Alle hochgeladenen Bilder erscheinen in der Galerie. Klicken Sie auf ein Bild, um den Pfad in die Zwischenablage zu kopieren.

Bild im Inhalt verwenden

• Im WYSIWYG-Editor: Wechseln Sie zur HTML-Ansicht (</>) und fügen Sie ein: <img src="images/mein-bild.jpg">
• In pages.json: Setzen Sie "image": "images/mein-bild.jpg" bei einer Seite

11. Backup & Restore

Im Tab Backup des Admin-Panels können Sie Sicherungskopien erstellen und bei Bedarf einen früheren Zustand wiederherstellen.

Backup erstellen

Das Backup enthält alle Inhalte (content/), Styles (css/), Bilder (images/) und Schriften (fonts/) als ZIP-Datei.

Backup wiederherstellen

Backup herunterladen oder löschen

• Download – Lädt die ZIP-Datei herunter (z.B. als externes Backup)
• × – Löscht das Backup vom Server (nach Bestätigung)

12. PDF-Vorschau

Alle PDF-Links auf der Website öffnen automatisch eine Vorschau im Browser statt direkt herunterzuladen.

• Klicken Sie auf einen PDF-Link (z.B. „Inhaltsverzeichnis als PDF")
• Das PDF wird in einem Modal-Fenster angezeigt
• Klicken Sie auf Herunterladen für den direkten Download
• Schließen Sie die Vorschau mit Schließen, der Esc-Taste oder einem Klick außerhalb

13. Tipps & Tricks

Design-Erstellung mit Claude Code

• Beschreiben Sie Ihr gewünschtes Design in einfacher Sprache
• Verweisen Sie auf bestehende Websites als Inspiration
• Claude versteht CSS-Begriffe: Farben, Schriften, Abstände, Flexbox, Grid
• Sie können auch Screenshots beschreiben: „Großes Bild oben, Text darunter, Sidebar links"

Dateistruktur eines Designs

mein_design/
  index.php          ← Haupt-Template (PHP)
  admin.php          ← Admin-Panel
  css/style.css      ← Alle Styles
  content/
    pages.json       ← Seitenstruktur und Metadaten
    startseite.html  ← Inhalt der Startseite
    biographie.html  ← Inhalt der Biographie
    ...              ← weitere Inhalte
  images/            ← Bilder (Buchcover etc.)
  fonts/             ← Eigene Schriften
  pdf/               ← PDF-Dateien
  api/               ← API-Endpunkte

CSS-Variablen

Die saubere Version verwendet CSS Custom Properties. Ändern Sie diese in css/style.css:

:root {
    --primary: #000044;   /* Hauptfarbe (Navigation, Links) */
    --accent: #8b0000;    /* Akzentfarbe (Hover, aktive Elemente) */
    --text: #2a2a3a;      /* Textfarbe */
    --light: #fafaf8;     /* Hintergrundfarbe */
    --border: #e0ddd8;    /* Rahmenfarbe */
    --sidebar-w: 260px;   /* Sidebar-Breite */
}

Tastenkürzel

• Esc – Modals und Vorschauen schließen
• Enter – Formulare absenden (Design erstellen, Seite hinzufügen)

Backup

Nutzen Sie den Backup-Tab im Admin-Panel, um Sicherungskopien zu erstellen und wiederherzustellen. Für ein komplettes Server-Backup per Terminal:

cd /data/web/fritsche
tar -czf backup_$(date +%Y%m%d).tar.gz sauber/