Differences

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

--- lehrkraefte:blc:informatik:glf24:web:hello-css [2025/03/26 10:30] – [By tag] 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 16: / Line 35: @@
 ==== By class ====
 <code css>
-.wichtig {  /* Alle Elemente mit dem Attribut class="wichtig" */
+.wichtig {  /* Alle Elemente mit dem Attribut class="wichtig", z.B. <div class="wichtig">...</div> */
-    font-weight: bold;
+    font-weight: bold;  /* Fette Schrift */
 }
 </code>
@@ Line 23: / Line 42: @@
 <code css>
 #catpics {  /* Das (einzige!) Element mit id="catpics" */
-    border-radius: 5px;
+    border-radius: 5px;           /* Abgerundeter Rand */
-    border-style:solid;
+    border-style:solid;           /* Durchgezogener Rand */
-    border-width: 2px;
+    border-width: 2px;            /* 2 Pixel breiter Rand */
     background-color:orange;
-    margin:20px;
+    margin:20px;                  /* 20px Platz ausserhalb vom Element */
-    padding:10px;
+    padding:10px;                 /* 10px Platz innerhalb vom Element */
 }
 </code>
@@ Line 35: / Line 54: @@
 <code css>
 #catpics > div { /* Alle Div-Elemente, die direkt innerhalb des Elements mit id="catpics" sind. Aber nicht verschachtelte Unterlemente */
-    display:flex;
+    display:flex;                      /* Flexible Anordnung der Element innerhalb */
-    align-items: center;
+    align-items: center;               /* Elemente innherhalb vertikal zentrieren */
-    justify-content: space-evenly;
+    justify-content: space-evenly;     /* Elemente horizontal gleich verteilen */
-    flex-wrap: wrap;
+    flex-wrap: wrap;                   /* "Zeilenumbruch", wenn zu viele Elemente */
 }
 </code>
+===== 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.