Tischlerei Staffenberger – Kleine Firmenwebsite

Kleine, statische Website für einen selbstständigen Tischler (Ein-Mann-Betrieb).
Technik: reines HTML, CSS und JavaScript ohne Frameworks.

Ordnerstruktur

Tischlerei-Staffenberger/
├── index.html          # Generiert von scripts/build.js – nicht direkt bearbeiten
├── pictures.html        # (dito)
├── shop.html            # (dito)
├── impressum.html       # (dito)
├── templates/           # Editierbare Quelldateien der obigen Seiten
├── partials/            # header.html / footer.html, in alle Seiten eingebunden
├── shop-item-template.html  # Vorlage für einzelne Shop-Artikel (manuell kopieren)
├── README.md
├── css/
│   └── style.css       # Ein zentrales Stylesheet
├── js/
│   └── script.js       # Navigation, Galerie-Filter, Lightbox, Shop-Anfragen
├── scripts/
│   ├── build.js             # Baut templates/ + partials/ zu den Root-HTML-Dateien
│   └── optimize-images.js   # Erzeugt WebP/JPEG-Varianten aus images/fotowebsite/
└── images/
    ├── fotowebsite/     # Original-Fotos (Rohmaterial, unkomprimiert)
    └── optimized/       # Generierte WebP/JPEG-Varianten (von optimize-images.js)

Seiten bearbeiten (Templates + Build)

Header und Footer sind identisch auf allen Seiten und liegen daher nur einmal in partials/header.html bzw. partials/footer.html. Die eigentlichen Seiteninhalte liegen als Quelldateien in templates/ und enthalten an der Stelle von Header/Footer nur eine Markierung wie <!-- include:partials/header.html -->.

Wichtig: index.html, pictures.html, shop.html und impressum.html im Hauptverzeichnis sind generierte Dateien – Änderungen daran gehen beim nächsten Build verloren. Bitte immer in templates/ bzw. partials/ bearbeiten, danach:

npm run build

Das schreibt die fertigen, statischen HTML-Dateien ins Hauptverzeichnis. Diese generierten Dateien werden weiterhin mit committed – der Webhost braucht keinen eigenen Build-Schritt, es wird nach wie vor nur reines HTML/CSS/JS ausgeliefert.

Lokal ausführen

Die Seite besteht nur aus statischen Dateien. Sie können sie so starten:

Option 1: Direkt im Browser öffnen

• Doppelklick auf index.html oder
• Datei in den Browser ziehen

Hinweis: Einige Browser blockieren bei file:// das Laden externer Ressourcen (z.B. Google Fonts, Platzhalter-Bilder von picsum.photos). Dann Option 2 nutzen.

Option 2: Mit lokalem Webserver (empfohlen)

Im Projektordner in der Kommandozeile:

Mit Python 3:

# Ab Python 3.x
python -m http.server 8000

Mit Node.js (npx):

npx serve .

Mit PHP:

php -S localhost:8000

Anschließend im Browser aufrufen: http://localhost:8000

Von dort aus funktionieren alle Links, Schriftarten und Platzhalter-Bilder.

Anpassungen

• Impressum & Kontakt: In templates/impressum.html und partials/footer.html die Angaben (Name, Adresse, Telefon, E-Mail, UID-Nummer) pflegen, danach npm run build.
• Shop-Anfragen: In js/script.js die E-Mail-Adresse in der Zeile mit mailto: anpassen.
• Bilder: Eigene Fotos nach Kategorie in images/fotowebsite/{kitchen,outdoor,custom}/ ablegen, dann npm run optimize-images ausführen, um die WebP/JPEG-Varianten in images/optimized/ zu erzeugen. Anschließend in templates/pictures.html das neue <figure class="gallery-item">-Element ergänzen (nach vorhandenem Muster kopieren) und npm run build ausführen.

Seitenüberblick

Seite	Inhalt
Start	Banner, Willkommenstext, Über mich, Leistungen (Möbel, Küchen, Außen), CTA „Kontakt“.
Bilder	Galerie mit Filter: Alle / Küche / Außenbereich / Sonderanfertigung.
Shop	6 Beispielprodukte mit Bild, Beschreibung, Preis und Button „Anfragen“ (öffnet E-Mail).
Impressum	Anbieter, Kontakt, USt-ID, Verantwortlichkeit, Haftungsausschluss (Platzhalter).

Navigation ist auf allen Seiten gleich; die aktuelle Seite wird hervorgehoben.