Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
lehrkraefte:blc:informatik:glf22:web-tech:layout [2023/05/08 19:07] Ivo Blöchliger created |
lehrkraefte:blc:informatik:glf22:web-tech:layout [2023/05/09 13:47] (current) Ivo Blöchliger [Entwurf im Raster] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Page Layout ====== | ====== Page Layout ====== | ||
+ | ===== Entwurf im Raster ===== | ||
+ | |||
<WRAP todo> | <WRAP todo> | ||
Erstellen Sie auf Papier (oder dem Tablet) eine Skizze Ihrer Webseite, mit mindestens folgenden Elementen: | Erstellen Sie auf Papier (oder dem Tablet) eine Skizze Ihrer Webseite, mit mindestens folgenden Elementen: | ||
+ | * Titel/Logo | ||
* Navigation | * Navigation | ||
* Inhalt | * Inhalt | ||
* Footer | * Footer | ||
- | Die Element | + | Die Elemente |
+ | |||
+ | 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:// | ||
+ | |||
+ | Ein extremes Beispiel dafür wird hier vorgestellt: | ||
+ | </ | ||
+ | |||
+ | ===== Start und Upload ===== | ||
+ | |||
+ | |||
+ | <WRAP todo> | ||
+ | * Erstellen Sie ein neues Verzeichnis (nur Kleinbuchstaben a-z, keine Leerschläge, | ||
+ | * Legen Sie im neuen Verzeichnis ein Verzeichnis mit Namen ' | ||
+ | * Öffnen Sie das neue Verzeichnis mit VisualStudio Code. | ||
+ | * Legen Sie eine neue Datei mit Namen ' | ||
+ | * 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, | ||
+ | <code bash> | ||
+ | scp * ofi:. | ||
+ | </ | ||
+ | * Testen Sie in dem Sie in Ihr Verzeichnis navigieren: https:// | ||
+ | </ | ||
+ | |||
+ | ===== Erstes Layout der Elemente ===== | ||
+ | |||
+ | <WRAP todo> | ||
+ | * Studieren Sie https:// | ||
+ | * Testen Sie Ihre Änderungen und laden Sie Ihre Seite auf unseren Webserver | ||
+ | * Erststellen Sie ein neue Datei '' | ||
+ | * Studieren Sie https:// | ||
+ | * Testen. | ||
+ | </ | ||
+ | ===== 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 (< | ||
+ | * Ü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 '' | ||
</ | </ | ||
- | https:// | ||