39 lines
2.0 KiB
Markdown
39 lines
2.0 KiB
Markdown
# Ferienwohnung "Wanderlust"
|
|
|
|
Webseite für die Ferienwohnung der Familie Frank
|
|
|
|
[Testseite](https://ferienwohnung.chrosey.de)
|
|
[Zielseite](https://www.ferienwohnung-friedrichroda.de)
|
|
|
|
|
|
## Neue Bilder zum Slider hinzufügen
|
|
1. das gewünschte Bild in der richtigen Größe hochladen (1500px Breite) und in den Ordner `bilder/1500px` ablegen
|
|
2. in der index.html nach `div.slider` suchen
|
|
3. innerhalb des Elements `div.slides` ein komplettes `li`-Element kopieren
|
|
4. das kopierte Element an die gewünscht Stelle schieben
|
|
5. in dem eingefügen Element den Dateinamen in `img[src]` ersetzen durch den der hochgeladenen Datei
|
|
6. die Bildbeschreibung `img[alt]` und die angezeigte Betitelung `div.caption>div.card-panel>h3` anpassen
|
|
|
|
## Parallax-Bild ausstauschen
|
|
1. das gewünschte Bild in der richgtigen Größe hochladen (2400px Breite) und in den Ordner `bilder/2400px` ablegen
|
|
2. den Parallax-Bereich suchen, der ausgetauscht werden soll
|
|
3. den Dateinamen in `img[src]` ersetzen durch den der hochgeladenen Datei
|
|
4. die Bildbeschreibung austauschen `img[alt]`
|
|
|
|
## Farben wechseln
|
|
1. die gewünschte Farbe bei [materialize.css](https://materializecss.com/color.html#palette) suchen
|
|
2. in der `index.html` nach der der alten Farbe suchen und durch die neue ersetzen (`.old-color.old-color-modifier`)
|
|
3. in der `style.css` nach `a:not([href^='#'])` suchen und durch den Farbcode der neuen Farbe ersetzen
|
|
|
|
## Pakettieren
|
|
1. Webserver im root-Verzeichnis starten (zB als localhost:5500)
|
|
2. `wget --recursive http://localhost:5500/ -P dist -nH` ausführen
|
|
3. `find dist/bilder/ -type f -name *.jpg | cut -c 6- | xargs -I{} cp "{}.webp" "dist/{}.webp"`
|
|
4. aus der `dist/index.html` den Bereich "code injected by LiveServer" entfernen
|
|
|
|
## Deployment
|
|
nur die Inhalte aus dem Ordner dist sind für die Webseite nötig, der Rest wird auf der Webseite nicht verwendet.
|
|
1. Verbinung zu Ziel-Server herstellen
|
|
2. zum DocumentRoot navigieren
|
|
3. Inhalte aus dem Verzeichnis `dist` in das entfernte DocRoot-Verzeichnis synchronisieren
|