Modul 2.3: Arbeitsschritte zur Webseitenerstellung und Site-Management

Der Inhalt dieses Moduls umfasst: Arbeitsschritte der Webseitenerstellung (Pfade, Vorbereiten der Struktur, Erstellen von Bildvorlagen, offline-Erstellung der Webseiten mit Webeditor oder Texteditor, offline-Test derSeiten, Übertragung auf Server, online-Test, Arbeitsschritte zur Änderung von Seiten usw).

Dies ist nur eine kleine stichwortartige Einleitung, die ausschließlich technische Aspekte berücksichtigt. In Modul 4 finden Sie weitere technische sowie inhaltliche Überlegungen zur Erstellung Ihrer Websites.

Struktur einer Website:

• Die Projektstruktur auf Arbeitsrechner (offline-Version) und Webserver muss gleich sein.
• Die Struktur eines Ordners mit evtl. Unterordnern bedingt die zu verwendenden relativen Pfade.

Für einfache Websites ist eine flache Struktur möglich, dies bedeutet:

• alle Dateien (html, Bilder, ggf. sonstige Dateien) liegen in einem Projektordner, der keine Unterordner beinhaltet.
• Nachteil: eine flache Struktur wird schnell unübersichtlich;
• Vorteil: keine lokalen Pfadangaben für Links und Bildeinbau nötig, Angabe von Dateinamen in Links und Bildeinbettungen genügt

Für komplexere Webseites ist jedoch eine hierarchische Struktur notwendig. Dies bedeutet, der Projektordner wird durch viele Unterordner untergliedert, welche ihrerseits weitere Unterordner beinhalten können.

Vgl. Abbildung unten: Dateien im Projektordner sind identisch, nur unterschiedlich strukturiert.

Webprojekt 1 mit flacher Struktur	Webprojekt 1 mit hierarchischer Struktur

Der Einbau von Abbildungen sowie die interne Verlinkung erfolgt normalerweise mit sogenannten relativen Pfaden, die die Lage der Struktur im Webprojektordner abbilden.

Beispiele für Einbau von Links und Abbildungen in Webprojekt1 mit flacher Struktur (keine Pfadangaben notwendig)

1. In index.html soll auf die drei Kapitel verlinkt werden. Die jeweiligen html-code auf der index.html-Seite lauten hierfür

<a href="kapitel1.html">hier geht's zu Kaptitel 1<a/> (entsprechend für Kap. 2 und 3)

2. In index.html soll Bild hampelmann.gif eingebaut werden. der code hierfür lautet (ohne Größenangabe und alternativen Text) <img src="hampelmann.gif">

3. auf den jeweiligen Kapitelseiten sollen jeweils Foto 1 bzw. 2,3 eingebaut werden, auf Kapitel 1 soll auch noch die Abbildungen budget.gif eingebaut werden. Für alle Abbildungen auf der Seite kapitel1.html lautet der code <img src="foto1.jpg"> bzw. entsprechend (z.B. <img src="budget.gif"> )

4. Von den Kapiteln soll auch wieder ein Link rückwärts zur Index-Seite gebaut werden. Ebenfalls trivial: Alle links auf den Kapitel-Seiten lauten: <a href="index.html">zur&uuml;ck zur Eingangsseite</a>

Nun aber die gleichen Beispiele für Webprojekt1 mit hierarchischer Struktur (wie auf Bild oben rechts, relative Pfade notwendig)

1. Der Code von der Index-Seite 'index.html' auf Kapitel 1 lautet: <a href="htmlfiles/kapitel1.html">hier geht's zu Kapitel 1</a> bzw. analog für die anderen Kapitel.

2. Der Einbau der Abbildung 'Hampelmann' auf die Indexseite lautet: <img src="zeichnungen/hampelmann.gif">

3. Beispiel für Abbildungen in kapitel1.html: <img src="fotos/foto1.jpg"> sowie <img src="zeichnungen/pic_haushalt/budget.gif">

4: Links von den Kapitelseiten zurück zur Indexseite: <a href="../index.html">zur&uuml;ck zur Eingangsseite</a>

Wichtig: relative Pfade rückwärts lauten folgendermaßen: zurück vom Unterordner in den Ordner des Unterordners: ../

Dies kann auch mehrfach verschachtelt sein: Nehmen wir an, dass stadt.html in einem Ordner home liegt, welcher ebenfalls einem Unterordner hauser beinhaltet. Dieser enthält z.B. den unterordner wohnzimmer enthält , der ein file mein_wohnzimmer.html enthält (siehe Abbildung links).

Ein link vom file stadt.html auf mein_wohnzimmer.html enthält als relativen Pfad diese Struktur (vgl. mit roten Pfeilen links):

<a href="haeuser/wohnzimmer/mein_wohnzimmer.html">zum Wohnzimmer meines Hauses</a>

Will man umgekehrt vom File mein_wohnzimmer.html auf das file stadt.html verlinken, heißt der relative Pfad (vgl. blaue Pfeile in Abbildung):

<a href="../../stadt.html">zur Stadt</a>.
Diese Pfadanweisung bedeutet: Verlasse den vorliegenden Ordner und gehe in den Ordner nächsthöherer Hierarchie (also verlasse Ordner wohnzimmer und gehe zu Ordner haeuser), verlasse auch diesen Ordner (also verlasse nun Ordner haeuser). Du müsstest nun in einem Ordner sein, in dem ein File stadt.html liegt (genau: wir sind nun im Ordner home). Rufe dieses File mit Namen stadt.html auf.

Beispiel für die Struktur dieser Website zum Zeitpunkt der ersten Erstellung dieser Seite (Anfang Nov. 2001) (nicht alle Ordnerinhalte sind zu sehen, zum Stand der letzten Überarbeitung dieser Seite im März 2003 sind über 1500 Dateien vorhanden):