Differences

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

--- lehrkraefte:blc:informatik:glf22:web-tech:layout [2023/05/09 05:50] – Ivo Blöchliger
+++ lehrkraefte:blc:informatik:glf22:web-tech:layout [2023/05/09 11:47] (current) – [Entwurf im Raster] Ivo Blöchliger
@@ Line 1: / Line 1: @@
+====== Page Layout ======
+===== Entwurf im Raster =====
+<WRAP todo>
+Erstellen Sie auf Papier (oder dem Tablet) eine Skizze Ihrer Webseite, mit mindestens folgenden Elementen:
+  * Titel/Logo
+  * Navigation
+  * Inhalt
+  * Footer
+Die Elemente sollen in einem einfachen Raster ausgelegt werden.
+Wer eine Herausforderung sucht, kann das Raster auch komplizierter machen, so dass sich einzelne Inhaltsblöcke über mehrere Zeilen und/oder Spalten erstrecken. Schauen Sie sich dazu kurz die Bilder auf [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung|dieser Webseite]] an, um einen Eindruck zu kriegen.
+Ein extremes Beispiel dafür wird hier vorgestellt: https://webdesign.tutsplus.com/tutorials/create-a-broken-grid-layout-using-css-grid--cms-30870
+</WRAP>
+===== Start und Upload =====
+<WRAP todo>
+  * Erstellen Sie ein neues Verzeichnis (nur Kleinbuchstaben a-z, keine Leerschläge, Umlaute etc.)
+  * Legen Sie im neuen Verzeichnis ein Verzeichnis mit Namen 'img' an (dort werden dann die Bilder für die Webseite gespeichert).
+  * Öffnen Sie das neue Verzeichnis mit VisualStudio Code.
+  * Legen Sie eine neue Datei mit Namen 'index.html' an. Das wird die Seite, die standardmässig aufgerufen wird.
+  * Füllen Sie die Seite mit einem Titel und ein bisschen Text (z.B. «Lorem ipsum...»).
+  * Speichern Sie die Seite
+  * Kopieren Sie alles auf den OFI-Server (auf der Kommandozeile im neuen Verzeichnis, kann auch direkt in VSCode geöffnet werden!). Ein entsprechender Eintrag in der Datei ''~/.ssh/config'' wird vorausgesetzt. Andernfalls, [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:ffprg1-2023:hello-online#ssh_config_und_remote_shell_mit_ssh|holen Sie das nach]]/.
+<code bash>
+scp * ofi:.
+</code>
+  * Testen Sie in dem Sie in Ihr Verzeichnis navigieren: https://ofi.tech-lab.ch/2023/2hW/
+</WRAP>
+===== Erstes Layout der Elemente =====
+<WRAP todo>
+  * Studieren Sie https://wiki.selfhtml.org/wiki/HTML/Tutorials/Seitenstrukturierung und übernehmen Sie jene Elemente in Ihre Datei ''index.html'', die auch zu Ihrer geplanten Webseite passen. **Achtung**: Die Anordnung und Platzierung der Elemente wird erst später festgelegt und wird jetzt noch nicht ihrem Entwurf entsprechen.
+  * Testen Sie Ihre Änderungen und laden Sie Ihre Seite auf unseren Webserver
+  * Erststellen Sie ein neue Datei ''stil.css'' und verlinken Sie diese in Ihrer html-Datei (siehe [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf22:web-tech:css#csshtml_mit_stil|hier]]).
+  * Studieren Sie https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung und übernehmen Sie jene CSS-Formatierungen, die zu Ihrer geplanten Webseite passen.
+  * Testen.
+</WRAP>
+===== Tipps zum Testen und Fehlersuche =====
+<WRAP info>
+Tipps zum Testen und Fehlersuche:
+  * Fehlen Strichpunkte oder geschlossene geschweifte Klammern in der CSS-Datei?
+  * Im Browser, öffnen Sie die Entwicklertools (<key>F12</key>) und nach drücken der {{:lehrkraefte:blc:informatik:glf22:web-tech:pasted:20230508-201047.png}} Schaltfläche, wählen Sie ein Element aus. Dann werden alle Infos zu diesem Element (insbesonder CSS-Formatierungen) angezeigt und können auch direkt verändert (aber nicht gespeichert) werden. Das ist praktisch, um Dinge auszuprobieren.
+  * Überprüfen Sie, dass die Seite, die Sie im Browser betrachten auch genau jene ist, die Sie gerade bearbeiten.
+  * Fügen Sie in der CSS-Datei Formatierungen wie ''background-color: pink;'' hinzu, damit sieht man sofort, ob die Formatierungen auch übernommen wurden und welche Elemente davon betroffen sind.
+</WRAP>