4.2.1 Seitenaufbau und Methoden

Seitenaufbau

Jede BGBM-HTML-Seite (außer der Startseite) hat ein einheitliches BGBM-Standard-Layout, das an dem folgenden konkreten Beispiel (Abb. 4-2) erläutert wird, und besteht aus einem Kopf, einem Fuß und dem eigentlichen Inhalt.

Originalgröße: 610 x 277 Pixel, ca. 14 kB

Abb. 4-2: Seitenaufbau am Beispiel der Datei kontakte.htm aus dem Bereich Allgemeines / About (Inhalte der Datei müssen noch ergänzt werden)

Der Kopf enthält in einer umrahmten Tabelle das BGBM-Logo auf gelbem Hintergrund (linke Spalte), ein Minifoto (rechte Spalte, das ist das verkleinerte Foto der Startseite) und eine Seitenüberschrift (mittlere Spalte). Diese Überschrift besteht jeweils aus einem deutschen und einem englischen Teil (hier: Kontakte / Contacts). Der Inhalt kann alles mögliche sein (siehe weiter unten). Der Fuß dient der Navigation und der Identifizierung, die im folgenden näher beschrieben werden.

Navigation

Zur Navigation gibt es auf jeder Seite - außer auf den entsprechenden Seiten selbst - einen Link auf das Hauptmenü (Überblick / Overview) und einen Link auf das Stichwortverzeichnis (Index), in dem alle Themen alphabetisch aufgelistet sind. Gibt es zu der Seite auch eine englische Übersetzung, so steht im Fuß auch ein Verweis darauf (English Version), entsprechend findet sich in der zugehörigen englischen Seite ein Verweis auf die deutsche Seite (Deutsche Version).

Ein Problem bereitete die Gestaltung der Navigationselemente in Form beschrifteter Schaltflächen (Buttons). Aufgrund der unterschiedlichen Länge der Beschriftungen - „Überblick / Overview" und „Index" - in den gleichlangen Schaltflächen ergab sich ein sehr ungleichmäßiges Erscheinungsbild. Außerdem erwies sich diese Art der Gestaltung als nicht günstig für den Gesamteindruck der Seite, da die Schaltflächen optisch zu sehr dominierten und damit die eigentlichen Inhalte in den Hintergrund rückten. Deshalb wurden die Navigationselemente als Text-Links in einer umrahmten Tabelle analog zum Seitenkopf gestaltet.

Identifizierung

Es wurden folgende Elemente zur Identifizierung der BGBM-Seiten verwendet und nacheinander in einem 2- bis 3-zeiligen Absatz im Fuß zentriert angeordnet:

• © Botanischer Garten und Botanisches Museum Berlin-Dahlem : Verweis auf den Urheber und gleichzeitig die Möglichkeit, elektronische Post an den BGBM zu senden (mailto-Link). Dafür gibt es eine allgemeine E-Mail-Adresse für den gesamten BGBM: zebgbm@zedat.fu-berlin.de.
• verantwortlich: Name eines Seitenverantwortlichen mit Link auf seine E-Mail-Adresse (nur bei den Mitarbeiterseiten) oder Name des Verantwortungsbereiches (hier: Referat PR) mit Link auf die entsprechende HTML-Datei, in der die Verantwortlichen aufgeführt sind. Die Datei heißt immer verantwo.htm (siehe dazu Abschnitt 4.1) und enthält selbst keinen solchen Verweis.
• Stand: Datum der letzten Änderung. Dieses sollte dann erneuert werden, wenn sich der Inhalt der Seite wesentlich geändert hat (nicht bei Rechtschreibfehler-Korrekturen).
• Impressum: Link auf das BGBM-Impressum (Anschrift, Telefon, Fax und die Entstehungsgeschichte des Prototypen). Dies ist in deutscher und englischer Sprache verfügbar. Diese Impressum-Seiten enthalten keinen solchen Link.
• URL-Angabe: WWW-Adresse der Seite. Wer sich z.B. eine Seite des BGBM-Informationssystems ausdruckt, kann somit deren Adresse nicht vergessen und findet die Seite schnell wieder, indem er diese URL in einen Browser (z.B. Netscape) eintippt. Die URL unterliegt hinsichtlich der darin auftretenden Zeichen Konventionen (siehe dazu Abschnitt 4.3.2).

Meta-Informationen

Für Meta-Informationen dienen u.a. die Tags TITLE und META innerhalb des HEAD-Teiles der HTML-Seite (siehe auch Abschnitt 3.4.1). Dieser hat für die Beispielseite in Abb. 4-2 folgendes Aussehen:

• Die Seitenüberschrift wird auch im TITLE verwendet, der bei Netscape in der Kopfzeile angezeigt wird und in Abb. 4-2 darum nicht enthalten ist. Außerdem wird er in die Bookmarkliste (Liste der Lesezeichen) übernommen, wenn jemand eine Seite als Lesezeichen kennzeichnet. Für eine bessere Identifizierung steht darum auch immer das Wort „BGBM" am Anfang. Der TITLE umfaßt bei englischen Seiten nur den englischen Titel, bei deutschen Seiten nur den deutschen Titel (hier: „BGBM: Kontakte") und bei gemischten Seiten (wie z.B. Menüs) immer beide Titel wie in der Seitenüberschrift.
• META enthält immer das Wort „BGBM" sowie den deutschen und den englischen Titel aus der Seitenüberschrift. Diese Angaben könnten auch im Rahmen der Weiterentwicklung dieses Prototypen für eine automatische Indizierung der Seiten verwendet werden.

Layout des Inhaltes

Der eigentliche Inhalt einer Seite kann Texte, Grafiken, Fotos, Listen, Tabellen u.a. enthalten. Die Gestaltungsmöglichkeiten von HTML 2.0 sind im Vergleich zu DTP-Programmen sehr eingeschränkt, so daß auch auf Elemente von HTML 3.2 zurückgegriffen wurde. Folgende HTML-Tags wurden für das Layout verwendet:

• Tabellen (HTML 3.2)
  • Attribut WIDTH: feste Abmessungen durch Angabe der Gesamtbreite bzw. der einzelnen Spaltenbreiten in Pixeln (maximal 600 Pixel)
  • Attribut ALIGN: Angabe der Ausrichtung (zentriert, rechts- oder linksbündig)
  • Attribut BORDER: Rahmen (0 = ohne Rahmen bzw. 1 = mit Rahmen)
  • Attribut CELLPADDING: Abstand des Zelleninhaltes vom Zellenrand (Pixel)
  
  
  
  Beispiele: Eintrittspreise (a=600, b=0, c=6, d1=150, d2=450, *=right für linke Spalte bzw. *=left für rechte Spalte; http://www.bgbm.org\BGBM\PR\About\preise.htm) und Seitenkopf (a=600, b=1, c=0, d1=125, d2=350, d3=125, *=center )
  
  
• ungeordnete Listen (HTML 2.0)
  
  
  
  Beispiel: Zur Zeit besonders sehenswert (http://www.bgbm.org\BGBM\PR\Zurzeit\default.htm)
  
• Schriftgröße (HTML 3.2)
  
  
  
  Beispiele: jede Seitenüberschrift im Kopf (x=+2 bzw. x=+1) und die Fußzeilen unter den Navigationselementen (x=-1)
  
  
• weitere:
  
  
  

Bearbeitungsmethoden

Die HTML-Seiten wurden mit einem einfachen Texteditor (Windows Notepad), aber z.T. auch direkt mit dem HTML-Editor HotMetal 2.0 erstellt. In jedem Fall erfolgte eine Nachbearbeitung mit HotMetal, um mit seiner Hilfe evtl. Syntaxfehler zu finden und zu korrigieren. Insbesondere fügt HotMetal nicht zwingend notwendige Ende-Tags hinzu, z.B. </LI>. Da die Mitarbeiter des BGBM mit diesem Editor arbeiten sollen, war es vor allem wichtig, herauszufinden, welche Tags HotMetal nicht unterstützt. Diese wurden dann - bis auf eine Ausnahme (MAP-Tag, siehe Abschnitt 4.2.6) - nicht in den HTML-Seiten verwendet.

Die Texte wurden eingegeben bzw. mittels Blockoperationen eingebunden: Dazu kann man in Word für Windows den entsprechenden Text mit der Maus markieren und kopieren (Ctrl C, Inhalt steht in der Zwischenablage) und danach in HotMetal bzw. im Texteditor einfügen (Ctrl V). Dabei ist folgendes zu beachten:

• Beim Einfügen im Texteditor werden die Umlaute nicht übernommen und müssen per Hand durch die sogenannten Zeichen-Entitäten ersetzt werden, z.B. ist der Buchstabe ä durch &auml; zu ersetzen.
• Für das Einfügen in HotMetal sollte vorher in Word die Silbentrennung für den betreffenden Text ausgeschaltet werden, da HotMetal diese nicht kennt. Die Trennzeichen (-) sind somit Bestandteil des Textes und per Hand zu entfernen.
• Bei Tabellen muß jedes Datenfeld einzeln eingefügt werden (und ist auch nur einzeln formatierbar, z.B. Schriftgröße, Zentrierung). Schneller ist daher die Erstellung der Tabelle in HotMetal und die manuelle Eintragung der Datenfelder.

Eine direkte Konvertierung von Texten mittels Konverter wurde nicht vorgenommen, weil einerseits das BGBM-Standard-Layout (Kopf und Fuß) nach der Konvertierung hinzugefügt werden müßte und andererseits die verfügbaren Konverter (z.B. Internet Assistant von Microsoft) auch nicht alle HTML-Tags (wie z.B. für Tabellen) unterstützen, so daß immer eine Nachbearbeitung - mit meist größerem Aufwand - vonnöten wäre.

Zu den Bildern gehören Grafiken (schwarz-weiß oder farbig) und Fotos (immer farbig). Sie wurden von den Grafikern des BGBM gezeichnet oder schon bestehenden (Papier-) Vorlagen entnommen und eingescannt oder auch direkt am PC mit einem Grafikprogramm (z.B. Corel Draw) erstellt und mit weiteren Grafikprogrammen (z.B. mit Photo Shop und Paint Shop Pro) nachbearbeitet.
Kleine Bilder (Icons) und schwarz-weiße Grafiken mit geringem Speicherbedarf (einige kB) sind im Non-Interlaced-Format abgespeichert worden, während für farbige Grafiken und Fotos mit relativ großem Speicherbedarf (ca. 30-200 kB) das Interlaced-Format mit einer Beschränkung auf 256 Farben gewählt wurde (siehe dazu die Ausführungen in Abschnitt 3.1). Die Abmessungen der Bilder betragen maximal 600 Pixel in der Breite und 450 Pixel in der Höhe, so daß sie auf einem Monitor mit der kleinsten Auflösung von 640 x 480 Pixeln komplett (ohne Blättern) zu sehen sind.
Die Einbindung der Bilder erfolgte entsprechend der unterschiedlichen Anforderungen an die Gestaltung fest in einer Tabelle (z.B. die Icons im Hauptmenü), zentriert (z.B. in der Startseite) oder mit umfließendem Text (z.B. in den Infoblättern).

Dateinamen

Bei der Benennung der Dateien und Verzeichnisse wurde wie folgt vorgegangen:

• Die Namen wurden möglichst kurz und aussagekräftig gewählt, d.h. die Länge beträgt maximal 8 Zeichen (außer für Dateinamen, die von den Scripten gelesen werden, siehe Abschnitt 4.3). Einerseits können die Dateien dann auch unter Windows 3.1 bearbeitet werden (Windows NT mit der Möglichkeit langer Namen ist nicht bei allen Mitarbeitern des BGBM installiert), und andererseits wird die URL der entsprechenden Seite nicht zu lang zum evtl. Eintippen.
• Ob die Namen in deutscher oder englischer Sprache vergeben werden, ist im Falle von zweisprachigen (gemischten) Seiten freigestellt (z.B. overview.htm für das Hauptmenü, verkehr.htm für die Verkehrsverbindung).
• Gibt es je eine deutsche und eine englische Seite, wurde die deutsche Datei mit einem deutschen Namen und die englische Datei mit einem englischen Namen versehen (z.B. freunde.htm bzw. friends.htm für die Freunde des BGBM e.V.). Eine hiervon abweichende Vorgehensweise gibt es beim Gartenplan und bei den Kurzinformationen (siehe dazu Abschnitt 4.2.6).
• Die Datei default.htm ist die Datei, die ohne die Angabe eines Dateinamens in der URL im Microsoft Internet Information Server standardmäßig geladen wird. Diese Benennung wurde in den Hauptverzeichnissen vorgenommen, d.h. bei der Startseite und bei den Menüs (Garten, Museum, Bibliothek, Allgemeines, Aktuelles). Eine Ausnahme bildet das Verzeichnis Staff, bei dem das Menü (= Liste der Mitarbeiter) durch ein Script generiert wird.