mrwhiski
f2507033c3
- Impressum rewritten with real Austrian business data (ECG instead of German TMG references); UID, Gewerbeberechtigung and Firmenbuchnummer marked as pending until available - Real contact email/phone/address across footer and Impressum - Meta description, Open Graph tags and favicon on all pages - Gallery images now offer both 800w and 1920w srcset candidates - Lightbox traps focus while open and restores it on close - Header/footer extracted into partials/, pages now built from templates/ via `npm run build` (scripts/build.js) to remove duplication across the 4 pages
99 lines
4.1 KiB
Markdown
99 lines
4.1 KiB
Markdown
# 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:
|
||
|
||
```bash
|
||
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:**
|
||
```bash
|
||
# Ab Python 3.x
|
||
python -m http.server 8000
|
||
```
|
||
|
||
**Mit Node.js (npx):**
|
||
```bash
|
||
npx serve .
|
||
```
|
||
|
||
**Mit PHP:**
|
||
```bash
|
||
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.
|