Responsive Layout
Das folgende Layout ist von folgender Anleitung inspiriert: https://www.w3schools.com/html/html_responsive.asp
- Laden Sie dazu die Datei https://ofi.tech-lab.ch/2021/teach/d0571f1e/webdev/layout.zip herunter und entpacken Sie diese.
- Testen Sie die Seite auch mit den Developpertools (F12) im Browser und ändern Sie die horizontale Grösse der Seite. Beachten Sie die Umorganisation der Seite, wenn die Seite weniger als 620 Pixel breit ist.
- Überlegen Sie sich, zu welchem Thema Sie gerne eine Webseite erstellen würden.
- Passen Sie das Design entsprechend an.
- Befüllen Sie die Seite ein bisschen mit Inhalt für die Start-Seite.
Verteilen auf mehrere Dateien
Um das Folgende zu demonstrieren, gibt es eine kurze Demo als Video. Beachten Sie, dass ich im Video direkt auf dem Server die Dateien abändere und diese darum nicht mit FileZilla noch auf den Server laden muss. Sie werden wohl die Dateien lokal mit NotePad++ bearbeiten und müssen diese danach erst auf den Server laden. Eine Anleitung für das Hochladen finden Sie hier. Hier ist das Video.
Auf dem Webserver können Teile der Webseite, die immer gleich sind, wie z.B. das Navigationsmenü, in eigene Dateien ausgelagert werden und vor dem Ausliefern an der Browser wieder zusammengesetzt werden.
Dazu kriegt die Hauptdatei die Endung .php, um zu signalisieren, dass der Code auf dem Server ausgeführt werden soll. Mit
<?php include "externedatei.html"; ?>
können die Dateien eingebunden werden.
- Entpacken Sie die Datei https://ofi.tech-lab.ch/2021/teach/d0571f1e/webdev/verteilt.zip auf Ihrem Computer in einen neuen Ordner und studieren Sie die Dateien. Wenn Sie die Dateien verstanden haben, brauche Sie diese nicht mehr.
- Arbeiten Sie jetzt wieder mit Ihrer eigenen Webseite.
- Ändern Sie die Endung Ihrer html-Datei in
.php - Lagern Sie entsprechende Teile in separate html-Dateien aus wie im Beispiel. Beginnen Sie typischerweise mit den Links im Menu.
- Kopieren Sie diese Dateien mit FileZilla auf den Web-Server und testen Sie Ihre Seite (das Einbinden funktioniert lokal nicht). Anleitung zu FileZilla.
- Kopieren Sie Ihre Start-Seite in eine neue Datei
contact.phpund befüllen Sie diese Datei mit entsprechendem (evtl. fiktiven) Inhalt. - Fügen Sie den Link auf die
contact.php-Seite im Menu hinzu, z.B.<a href="contact.php">Kontakt</a>. - Laden Sie die Ihre Datei
contact.phpauf den Server und testen Sie diese. - Fügen Sie weitere Seiten an.