Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:gridlayout [2023-10-15 17:44] – hof
+++ gf_informatik:web:gridlayout [2023-11-07 10:22] (aktuell) – [Auftrag III (Kombination der beiden Websiten)] gra
@@ Zeile 3: / Zeile 3: @@
 Mithilfe des **Grid Layout Modules** kann man seiner Website ein Raster zugrundelegen, welches sich dynamisch anpasst, z.B. wenn man die Fenstergrösse des Browsers verändert oder die Website auf einem Smartphone anschaut. Einzelne Elemente der Website können dann den Zellen des Rasters zugeordnet werden:
-{{ :gf_informatik:web_sca:grid_layout.png |}}
+{{ :gf_informatik:web_sca:grid_layout.svg |}}
@@ Zeile 15: / Zeile 15: @@
      * Dazwischen links: Platz für eine Sidebar
      * Platz rechts davon, zwischen Header und Footer: Mehrere Rasterbereiche mit unterschiedlicher Grösse für Hauptinhalt.
-   * Arbeite in Chrome im [[gf_informatik:web:css#entwicklungsmodus|Entwicklungsmodus]].
+   * Arbeite in Chrome im [[gf_informatik:web:css_2022#entwicklungsmodus|Entwicklungsmodus]].
    * Die Website könnte etwa so aussehen:{{ :gf_informatik:web_sca:grid_layout_example_01.png?400 |}}
@@ Zeile 30: / Zeile 30: @@
    * Erstelle dazu eine neue Website mit einem Grid-Layout, welches zu deiner ersten Website passt.
    * Kopiere dann die Inhalte von dieser hinein.
-   * **Schicke** der Lehrperson per Teams Screenshots von Website im Browser, HTML- und CSS-Code bis am **kommenden Samstag 23.59**
 ==== Grid Einrichten ====
@@ Zeile 118: / Zeile 118: @@
    * https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
    * https://css-tricks.com/snippets/css/complete-guide-grid/