lehrkraefte:blc:informatik:glf20:webtech-basic-layout [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Responsive Layout ======
Das folgende Layout ist von folgender Anleitung inspiriert: https://www.w3schools.com/html/html_responsive.asp

<WRAP todo>
  * 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.
</WRAP>

====== 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 [[https://web.microsoftstream.com/video/afd4f6c0-03d2-4e54-bc8e-d8764891bd69|hier]]. Hier ist das [[https://web.microsoftstream.com/video/7fdce2af-bb97-4a9a-b3ab-58581a3d8eb9|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
<code html>
<?php include "externedatei.html"; ?>
</code>
können die Dateien eingebunden werden.

<WRAP todo>
  * 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). [[lehrkraefte:blc:informatik:glf20:webtech-filezilla|Anleitung zu FileZilla]].
  * Kopieren Sie Ihre Start-Seite in eine neue Datei ''contact.php'' und 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=<nowiki>"</nowiki>contact.php<nowiki>"</nowiki>>Kontakt</a>''.
  * Laden Sie die Ihre Datei ''contact.php'' auf den Server und testen Sie diese.
  * Fügen Sie weitere Seiten an.
</WRAP>