Differences

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

--- lehrkraefte:blc:informatik:glf24:web:hello-css [2025/03/26 10:44] – [Direkte Kind-Elemente] Ivo Blöchliger
+++ lehrkraefte:blc:informatik:glf24:web:hello-css [2025/04/03 08:35] (current) – [Aber mit Style bitte] Ivo Blöchliger
@@ Line 4: / Line 4: @@
 Mit CSS kann das Aussehen bestimmter Elemente und ihrer Unterelemente (cascade!) festgelegt werden.
+  * Laden Sie folgendes Archiv herunter {{lehrkraefte:blc:informatik:glf24:web:style.zip}} und entpacken Sie es an einem geeigneten Ort.
+  * Stellen Sie sicher, dass nicht zwei verschachtelte Verzeichnisse ''style'' entstanden sind. Falls ja, korrigieren Sie.
+  * Ö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:
+     * 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).
+    * Hatten Ihre Änderungen die gewünschte Wirkung? Eventuell müssen Sie die Seite mit Ctrl-Shift-R (oder shift-Klick) neu laden.
+  * Für jeden der folgenden CSS-Code Abschnitte machen Sie folgendes:
+    * Fügen Sie den Code-Abschnitt der Datei ''style.css'' hinzu, speichern Sie, und laden die Datei(en) wieder auf den Server.
+    * Laden Sie Ihre Seite neu und überprüfen Sie, ob die Änderungen Ihren Erwartungen entsprechen.
 ===== Selektoren =====
 Elemente könne mit verschiedenen **Selektoren** ausgewählt werden.
@@ Line 43: / Line 62: @@
+===== Weitere Formatierungen =====
+Für einige der Aufgaben werden Sie nicht darum herumkommen, nach Informationen im Internet zu suchen. Verwenden Sie dazu unbedingt auch den Suchterm ''css''.
+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 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.
+  * Hinterlegen Sie alle Elemente der Klasse ''fake'' mit rotem Hintergrund.
+    * Bonus: ''fake'' soll mit der Schrift Comic Sans dargestellt werden.
+  * Die Katzenbilder sollen einen hellen Hintergrund und einen Rahmen mit Schatten erhalten.
+  * 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.