Page Layout

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 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

• 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, holen Sie das nach/.

scp * ofi:.

• Testen Sie in dem Sie in Ihr Verzeichnis navigieren: https://ofi.tech-lab.ch/2023/2hW/

• 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 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.