Vorbereitung: Projekt

Bis jetzt hattes du viel Theorie und einige Grundlagen in HTML. All das Gelernte und das, was noch folgt, wollen wir nun an einem richtigen Webprojekt anwenden. Beim Projekt handelt es sich um eine Website für die die Gemeinde XY.

Im Anhang siehst du das Ziel des Projekts: Screenshots der einzelnen Seiten, die während den nächsten Tagen zu erstellen sind.

Nun geht es zuerst an ein paar kleine Vorbereitungsaufgaben.

Ziel(e)

• Ich kann eine sinnvolle Projekt-Ordnerstruktur anlegen.

• Ich kenne den Unterschied zwischen relativen und absoluten Links.

Aufgabe

Ordnerstruktur

Ein Webprojekt besteht aus vielen unterschiedlichen Dateien. Theoretisch könnte man alles in einen Ordner ablegen, dann wird es aber relativ schnell unübersichtlich. Aus diesem Grund sollte man bei einem (Web)-Projekt eine sinnvolle Ordnerstruktur anwenden. Bei einem Webprojekt eignet sich z.B. folgende Struktur:

• root-Ordner, z.B. projekt_gemeinde_xy
  • css
  • pages
  • img

Kannst du dir vorstellen, was in die einzelnen Ordner verstaut wird? Wenn nicht, dann recherchiere mal im Internet. Lege zusätzlich dann diese Ordnerstruktur in deinem Projektordner an.

Bei einem Webprojekt heisst die Startseite immer index.html. Kannst du erklären warum? Wo in der Ordnerstruktur soll diese Datei liegen?
Erstelle diese Datei - am besten aus dem Grundgerüst - und lege Sie am richtigen Ort ab.

Nun haben wir schon mal eine gute Basis für das Projekt.

Lade dir die Datei «web-grundlagen-anhang.zip» herunter um Bilder und Logos zu erhalten.

Relative und absolute Links

Aufgrund der Ordnerstruktur kannst du dir sicher vorstellen, dass du zwischen den verschiedenen Ordner hin und herspringen musst, um die eine oder andere Datei / Bild zu verlinken. Hierzu ist es wichtig, dass du mit relativen Links arbeitest, so dass die Website von überall her funktioniert.

Informiere dich im Internet den Unterschied zwischen relativen und absoluten Links und erkläre auch, was das Problem ist, wenn du mit absolutem Link arbeiten würdest.

Vergiss nicht, alle neu gewonnen Informationen in deinem Projektjournal festzuhalten. Verwende hierzu einen aussagekräftigen Titel im Bereich «freie Gliederung».