Volksbildungswerk Klarenthal e.V.

Kurs 232/Herbst 2002:
Workshop: Wir erstellen eine Homepage!

Zusammenfassung Doppelstunde 3 (16.09.2002)

[zurück] Vorherige Doppelstunde  Index Nächste Doppelstunde [weiter]

  1. Verzeichnisstruktur eines Web-Servers
    Empfehlung: Ihr PC sollte die gleiche Struktur haben wie der Server. Dies erleichtert das Hochladen der Webpräsenz.
    Z.B. bei Strato:
    Domain: www.klarenthal.org
    Subdomain: www.vbw-klarenthal.de
    Die Hauptdomain wird unter / (root) angesprochen.
    Die Startseite sollte index.htm oder index.html heissen.
    Darunter gibt es /vbw/ als Verzeichnis und index.html als Hauptseite. Die Subdomain zeigt direkt auf das Verzeichnis /vbw/ und somit direkt auf /vbw/index.html. Im Browser sind die Angaben http://www.vbw-klarenthal.de/ und http://www.klarenthal.org/vbw/ bzw. http://www.vbw-klarenthal.de/index.html und http://www.klarenthal.org/vbw/index.html identisch und zeigen die gleiche Seite.
    Unter /vbw gibt es ein Verzeichnis verein/, in dem Informationen zum e.V. gespeichert werden sollen.
    Alle Formulare müssen auf der Hauptdomain ausgeführt werden. Daher gibt es ein Verzeichnis /forms/.
    Das Shopsystem verlangt zwingend ein Verzeichnis /shop/ in der Hauptdomain.
    Unter /vbw/ gibt es ein Verzeichnis für alle Graphikdateien: /vbw/img/.
    Somit ergibt sich folgende Struktur auf dem PC und auf dem Strato Web-Server: 
    /index.html    allgemeine Startseite
/vbw/          Verzeichnis des VBW
/vbw/verein/   Seiten des e.V.
/vbw/img/      Graphiken
/forms/        Formulare wie vbw_mail.htm
/shop/         Buchungssystem
    Empfehlungen:
  2. Links
    Der <a>-Tag. wichtigstes Attribut: href="..." (und eigentlicher Inhalt des Tags!).
    Aufbau: <a href="seite.html">aussagekräftiger Verweistext</a>
    Seite auf Domain einfach mit Seitenname ansprechen, z.B. <a href="zwei.htm">.
    Externe Links mit vorangestelltem http://, z.B. <a href="http://www.hillschmidt.de/">
    Weitere wichtige Attribute:
    Relative Adressierung in anderen Verzeichnissen auf dem gleichen Server analog zu DOS/Unix cd-Kommando:
    ../ ein Verzeichnis zurück.
    Um von /vbw/ nach /vbw/verein/ zu springen: <a href="verein/seite.html">
    Von /vbw/verein/seite.html zurück zur Hauptseite: <a href="../index.html">
    Um von der Hauptseite aus Bilder zu zeigen: <img src="img/logo.gif">
    Um von /vbw/verein/index.html aus Bilder zu zeigen: <img src="../img/logo.gif">

  3. Navigation I: Frames
    Mit Hilfe von Frames kann der gesamte Bildschirm in unterschiedliche, voneinander unabhängige Fenster/Rahmen/Frames geteilt werden. So kann ein Fenster die Navigation/die Links enthalten, ein zweites den eigentlichen Inhalt, ein drittes das Logo, usw..
    Der HTMLEditor Phase 52 stellt unter Einfügen ... Frame verschiedene Grundstrukturen bereit. Folgendes Beispiel zeigt den prinzipiellen Aufbau einer Frame-Seite:
    HTML-Kodierung HTML-Effekt
    verbal Grafisch
    <html>
    <head>
    <title>...</title>
    </head>    		 der übliche Vorspann (erweiterbar mit Metatags ...)
    <frameset rows="60,*,30"
    border=0 frameborder=0 framespacing=0>    		 drei Reihen (1, 2, 3), Höhe in Pixel
    keine Umrandungen (unterschiedlich mit NS/IE)


    oben - oben.html

    (1)

    (A)

    links - menu.html

    (2)

    (B)

    rechts - anschrift.html

    (2)
    unten - unten.html

    (3)
    <frame name="oben"
    src="oben.html"
    marginwidth="1" marginheight="1">    		 Fensternamen: oben
    Quelldatei: oben.html (mit Logo und Titel)
    minimaler Rand
    <frameset cols="30%,70%"
    border=0 frameborder=0 framespacing=0>    		 zwei Spalten (A, B), Breite in % des Browserfensters
    keine Umrandungen
    <frame name="links"
    src="menu.html"
    marginwidth="x" marginheight="x">    		 Fenstername: links
    Quelldatei: menu.html mit allen Links und target="rechts"
    <frame name="rechts"
    src="anschrift.html"
    marginwidth="x" marginheight="x">    		 Fenstername: rechts
    Quelldatei: anschrift.html und andere Inhaltsseiten
    </frameset> Endetag
    <frame name="unten"
    src="unten.html"
    marginwidth="0" marginheight="0">    		 Fenstername: unten
    Quelldatei: unten.html mit Link zum Mailformular target="rechts"
    </frameset> Endetag
    <body>
    ... text ...    		 Dieser Text erscheint, wenn ein Browser nicht mit Frames umgehen kann.
    Hier sollte dann ein Link zur menu.html Datei vorhanden sein (Links).
    </body>
    </html>    		 Die üblichen Endetags.

    Auf den <noframe>-Tag wurde oben verzichtet, um nicht zusätzlich zu verwirren. Für den syntaktisch korrekten Einbau sorgt Tidy. Die Grundstruktur sieht dann so aus: 
    <html>
<head>
<title>aussagekräftiger Seitentitel</title>
<frameset rows="60,*,30">
<frame src="oben.html" name="oben">
<frameset cols="30%,70%">
<frame src="links.html" name="links">
<frame src="rechts.html" name="rechts">
</frameset>
<frame src="unten.html" name="unten">
<noframes>
<body>
Ihr Browser unterstützt keine Frames!
Bitte folgen Sie diesem Link: <a href="menu.html">Navigation ohne Links</a>
</body>
</noframes>
</frameset>
</html>

[zurück] Vorherige Doppelstunde  Index Nächste Doppelstunde [weiter]
© 2002 Andreas Schmidt