mrwhiski
b74dd3744e
- Use absolute og:image URLs and add missing og:description on Impressum - Load Google Fonts via <link> instead of blocking @import - Prevent default on shop request button to avoid stray URL hash - Guard optimize-images.js against silent filename collisions - Add real Umsatzsteuer-Identifikationsnummer (UID) to Impressum - Correct README's shop description to match actual empty state - Stop tracking images/fotowebsite/ (raw, uncompressed source photos) since only images/optimized/ is served by the site
104 lines
4.5 KiB
Markdown
104 lines
4.5 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) – nicht in git, siehe unten
|
||
└── optimized/ # Generierte WebP/JPEG-Varianten (von optimize-images.js)
|
||
```
|
||
|
||
**Hinweis zu `images/fotowebsite/`:** Die unkomprimierten Rohfotos (oft mehrere MB pro
|
||
Bild) sind bewusst nicht in git getrackt (`.gitignore`), um das Repository klein zu
|
||
halten – ausgeliefert wird ohnehin nur `images/optimized/`. Rohfotos bitte separat
|
||
sichern (z. B. externe Festplatte/Cloud-Speicher), bevor sie lokal gelöscht werden.
|
||
|
||
### 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** | Leer bis Artikel ergänzt werden (siehe `shop-item-template.html`); jede Karte zeigt 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.
|