Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:glf24:web:hello-css [2025/03/26 18:58] – [Weitere Formatierungen] Ivo Blöchliger
+++ lehrkraefte:blc:informatik:glf24:web:hello-css [2025/04/03 08:35] (current) – [Aber mit Style bitte] Ivo Blöchliger
@@ Line 9: / Line 9: @@
   * Öffnen Sie das entpackte Verzeichnis (Folder) ''style'' mit Visual Studio Code.
   * Öffnen Sie in VSCode ein Terminal und navigieren Sie mit ''cd ..'' in darüberliegende Vezeichnis
-  * Kopieren Sie das Verzeichnis style mit allen Dateien mit ''scp -r style ofi:.''  Lassen Sie das Terminal offen!
+  * Kopieren Sie das Verzeichnis style mit allen Dateien:
-  * Öffnen Sie Ihre neue Webseite im Browser
+     * Falls noch nicht erledigt: bitte erst die [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf24:web:scp-workaround|Datei ''upload.bash'' installieren]].
+     * In VSCode, öffnen Sie ein Terminal, und dann ein neues Terminal mit ''git-bash''. {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250403-095623.png}}
+     * Im git-bash Terminal von VSCode (im Ordner style!) können Sie dann folgdendem Kommando den ganzer Ordner ''style'' hochladen:
+<code bash>
+upload.bash
+</code>
+  * Öffnen Sie Ihre neue Webseite im Browser (passen Sie die Webadresse auf den Ordern style an)
   * Studieren Sie den HTML-Code und finden Sie die entsprechenden Element auf der Seite.
   * Studieren Sie die Datei ''style.css'', ändern Sie diese geringfügig und laden Sie Ihre Seite nochmals hoch (Pfeiltaste nach oben holt das letzte Kommando).
@@ Line 62: / Line 68: @@
 Um die Entwicklung zu Vereinfachen und zu Beschleunigen, installieren Sie die Visual Studio Code Extension «Live Server». Damit können Sie einen Webserver lokal auf Ihrem Computer starten, also Bonus wird die Seite automatisch neu geladen, sobald Sie eine Datei speichern.
-Benutzen Sie auch die Entwicklertools <key>F12</key>. Damit können Sie direkt auf der Webseite CSS-Einträge manipulieren und verschiedene Dinge noch schneller testen. Vergessen Sie aber nicht, die Änderungen in die Datei ''style.css'' zu übertragen und die Datei zu speichern.
+Benutzen Sie auch die Entwicklertools im Browser (<key>F12</key>-Taste). Damit können Sie direkt auf der Webseite CSS-Einträge manipulieren und verschiedene Dinge noch schneller testen. Vergessen Sie aber nicht, die Änderungen in die Datei ''style.css'' zu übertragen und die Datei zu speichern.
@@ Line 70: / Line 76: @@
   * Die Katzenbilder sollen alle gleich gross sein.
   * Die News-Einträge sollen wie die Katzenbilder als Kacheln erscheinen.
+  * Laden Sie am Schluss Ihre Webseite auf den Webserver.