Ferienwohnung "Wanderlust"

Webseite für die Ferienwohnung der Familie Frank

Testseite
Zielseite

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 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