Page Layout

This is an old revision of the document!

Erstellen Sie auf Papier (oder dem Tablet) eine Skizze Ihrer Webseite, mit mindestens folgenden Elementen:

Die Elemente sollen in einem Raster ausgelegt werden.

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.

Tipps zum Testen und Fehlersuche:

Fehlen Strichpunkte oder geschlossene geschweifte Klammern in der CSS-Datei?
Im Browser, öffnen Sie die Entwicklertools (F12) und nach drücken der 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.