Layout

Lektion 3 - Pfade

Bestimmt kennst du das Wort "Pfad" aus der Umgangssprache, es ist ein anderes Wort für einen "Weg". Und diesen werden wir nun beschreiten: einen Weg quer durch deinen Webspace.

 

3.1 Ordnerhierarchie

Deine Seite index.html hast du mit deinem ftp-Programm nun ins Stammverzeichnis deines Servers geladen. Es ist das Verzeichnis, in das du gelangst, wenn eine Verbindung zu deinem Server herstellst. Wenn deine Webseite wächst, wird es auf deinem Server aber schnell unübersichtlich, wenn du alle Seiten und Bilder in dein Stammverzeichnis lädst. Deshalb sind Ordner von Bedeutung. Der Weg, den du von einzelnen Seiten in verschiedene Ordner und zurück einschlägst, nennt man einen Pfad.

"Ordnung ist das halbe Leben", also ist es ratsam sich beim Erstellen von Webseiten zu überlegen, wie viele Bereiche die Webseite haben soll, und was in welchen Ordner kommen soll. Wir werden zum Beispiel in der nächsten Lektion Bilder einfügen und Links zu anderen Seiten erstellen. Die Bilder können in einen eigenen Ordner und die Unterseiten deiner Webseite auch. Starte nun dein ftp-Programm und stelle eine Verbindung zu deinem Server her. Wenn du Total Commander benutzt, klicke einmal links in dein Stammverzeichnis, um es zu aktivieren. Jetzt findest du unten einen Button "F7 Neuer Ordner". Klicke dort drauf und gib als Namen "bilder" ein. Dein ftp-Programm wird nun für dich diesen Ordner erstellen. Anschließend klicke noch einmal auf diesen Button und erstelle einen Ordner mit dem Namen "seiten".
Gehe nun durch einen Doppelklick auf den Ordner "bilder" in das Verzeichnis "bilder". In diesem Verzeichnis erstelle noch einen Ordner, der "fotos" heißt und einen, der "gifs" heißt. Nun gehe in der Ordner mit dem Namen "fotos" und erstelle dort hinein einen Ordner, der "urlaub04" heißt, und einen, der "urlaub05" heißt. Deine Ordnerhierarchie auf deinem Server sollte nun folgendermaßen aussehen:

Stammverzeichnis
    bilder
        fotos
            urlaub04
            urlaub05
        gifs
    seiten
    index.html

Je weiter die Namen eingrückt sind, desto tiefer ist der Ordner gelegen. Ganz vorn im Stammverzeichnis, befinden sich die Seite index.html und die Ordner bilder und seiten. Im Ordner bilder sind wiederum die Ordner fotos und gifs und im Ordner fotos noch die Ordner urlaub04 und urlaub05.

Pfade durch ein Verzeichnis

Der Weg durch die Ordnerhierachie beginnt immer im Ordner der Seite, auf der er aufgerufen wird. In unserer index.html ist es also das Stammverzeichnis. Wollen wir von unserer Startseite nun eine Seite im Ordner 'seiten' aufrufen, nehmen wir den Namen des Ordners und setzen einen Schägstrich hintenan. Dies sagt dem Browser, dass wir uns in einem Unterverzeichnis befinden.

seiten/

Wenn wir auf unserer Startseite ein Bild aus unserem Urlaub 2005 anzeigen wollen, müssen wir schon etwas tiefer in der Hierarchie vordringen.

bilder/fotos/urlaub05/

Nun wollen wir aber auf einer Unterseite im Ordner 'seiten' ein Bild aufrufen. Der Pfad beginnt immer in dem Ordner, in der sich die Seite befindet, die den Pfad, nun ein Bild, aufruft. Um in den Ordner 'gifs' zu kommen, müssen wir erst einmal zurück ins Stammverzeichnis gelagen, um schließlich über den Ordner 'bilder' zu 'gifs' zu gelangen. Ein Ordner zurück durch die Hierarchie geht man durch zwei Punkte, wieder mit einem Schrägstrich versehen.

Wir befinden uns im Ordner 'seiten' und gehen einen Ordner zurück

../

nun sind wir im Stammverzeichnis

bilder/

bei den Bildern

gifs/

Und an unserem Ziel, den gifs.

../bilder/gifs/

Was passiert, wenn wir eine Unterseite mit unserer Fotogalerie im Ordner 'urlaub05' gespeichert, und wir wollen sie mit einer Seite im Ordner 'seiten' verlinken? Wir gehen zurück in den Ordner 'fotos', von dort zurück in den Ordner 'bilder' von dort zurück ins Stammverzeichnis und von dort aus in den Ordner 'seiten':

../../../seiten/

Wir wollen auf einer Seite im Order 'urlaub04' ein Bild aus dem Ordner 'gifs' einfügen. Wir gehen zurück in den Ordner 'fotos', zurück in den Ordner 'bilder' und von dort in den Ordner 'gifs'

../../gifs/

Die Galerie im Ordner 'urlaub04' soll mit einer Seite im Ordner 'urlaub05' verlinkt werden. Zurück zu 'fotos' von dort in den Ordner 'urlaub05'.

../urlaub05/

 

3.2 Dateien hochladen

 

3.2.1 Bilder

Damit du nicht durcheinanderkommst, erstelle auf deiner Festplatte die gleiche Hierarchie, wie auf deinem Server. Speicher folgende Bilder in die jeweiligen Ordner (durch Rechtsklick auf das Bild - Bild speichern unter...).

In den Ordner bilder/

img

In den Ordner bilder/fotos/

img

In den Ordner bilder/fotos/urlaub04/

img img

In den Ordner bilder/fotos/urlaub05/

img

In den Ordner bilder/gifs/

img img img img img img

 

Lade die Bilder anschließend in die jeweiligen Ordner auf deinen Server hoch.

Stammverzeichnis
    bilder
        fotos
            urlaub04
                urlaub04_1.jpg
                urlaub04_2.jpg

            urlaub05
                urlaub05_1.jpg

        gifs
            3.gif
            23.gif
            13.gif
            1.gif
            schoki_acaralolli.gif
            stoff_grundobaby.gif

        passfoto.jpg
    gruen2.jpg
    seiten
    index.html

 

3.2.2 Seiten

Erstelle folgene HTML-Seiten, wie es dir von der Seite index.html bekannt ist, schreibe eine Überschrift als Inhalt und lade sie in die jeweiligen Ordner hoch

In den Ordner seiten/

lektion05.html
uebermich.html
vorhaben.html

In den Ordner bilder/fotos/

galerie1.html
galerie2.html

In den Ordner bilder/fotos/urlaub04/

galerie.html

In den Ordner bilder/fotos/urlaub05/

galerie.html

Stammverzeichnis
    bilder
        fotos
            urlaub04
                urlaub04_1.jpg
                urlaub04_2.jpg

                galerie.html
            urlaub05
                urlaub05_1.jpg

                galerie.html
        gifs
            3.gif
            23.gif
            13.gif
            1.gif
            schoki_acaralolli.gif
            stoff_grundobaby.gif

        passfoto.jpg
        galerie1.html
        galerie2.html

    gruen2.jpg
    seiten
       lektion05.html
       uebermich.html
       vorhaben.html

    index.html


hr

3.3 Übungen

3.3.1 Lege diese Ordnerhierarchie mit allen Dateien auf deinem Server an.

3.3.2 Beschreibe folgende Pfade

img

1. Aus dem Stammverzeichnis in den Ordner 'ordner2a'.
2. Aus dem Ordner 'ordner2a' in den Ordner 'ordner1a2'.
3. Aus dem Ordner 'ordner1a2' in den Ordner 'ordner1a1a1'.
4. Aus dem Ordner 'ordner1a1a1' in den Ordner 'ordner4'.
5. Aus dem Ordner 'ordner4' in den Ordner 'ordner1a1b'.
6. Aus dem Ordner 'ordner1a1b' ins Stammverzeichnis.

« zurück Inhalt | Fragen       Kurs weiter »
Layout