 |
 |
| Styleguide für Moosburg
Online |
Die folgenden Designrichtlinien gelten hauptsächlich für die
"offiziellen" Seiten von Moosburg Online. Eigenständige Angebote
(Vereine, Schulen usw.) können dagegen individuell gestaltet
werden. Sie sollen aber zumindest immer einen Link zur Moosburger
Leitseite und zum übergeordneten Themenbereich haben (siehe die
unten beschriebenen Navigationsleisten). Die Hinweise zu Tabellen,
Frames, Dateinamen, Verweisen und Bildern sollten grundsätzlich bei
allen Seiten beherzigt werden.
Die wichtigsten Tags, speziell für den Dateikopf, beschreibt eine
eigene Seite.
Die Farben des Hintergrundes (Elfenbein), des Textes
(Dunkelblau), der Links (Dunkelblau), der besuchten Links (Rot)
und der angeklickten Links (Rot) sollten auf den Seiten
einheitlich sein:
<body bgcolor="#FFFFF0" text="#330099" link="#330099"
vlink="#FF0000;" alink="#FF0000">.
gibt auf den "offiziellen" Moosburger Seiten nicht. Für Vereins-
oder Schulseiten können sie nach Belieben verwendet werden.
Prinzipiell gibt es zwei Möglichkeiten, wie eine "offizielle"
Seite oben aussieht: Sie kann ein
Themenlogo verwenden oder darauf
verzichten (wie diese Seite). Das Bild oder Logo sollte passend
zum Inhalt und zum Seitendesign erstellt oder ausgewählt werden,
etwa aus den Verzeichnissen
http://www.weihenstephan.org/gif
und
http://www.moosburg.org/gif (hier z.B.
die Logos lg-*.gif).
|
|
| Titel der
Seite |
|
|
 |
| Titel der
Seite |
|
Am unteren Rand der Seite befinden sich eine Navigationsleiste
sowie die Datums- und Verfasserangabe. Das Aussehen der Leiste,
d.h. die Anzahl der Buttons, richtet sich nach der thematischen
Stellung der Seite: Der rechte Button verweist auf den
übergeordneten Themenbereich. Die anschließende britische Flagge
wird natürlich nur dann eingesetzt, wenn es eine englische
Version dieser Seite gibt.
Für eigenständige Seiten können Navigationsleisten natürlich auch
in anderer Form (auch ganz ohne Grafiken) gestaltet werden.
Folgende Elemente sollten aber immer vorhanden sein:
- Link zum Bürgernetz Weihenstephan
- Link zu Moosburg Online
- Link zum übergeordneten Themenbereich
- Datum der letzten Änderung
- Name des Autors (und evtl. Homepage)
Hier zwei Vorschläge für Vereins- und Schulseiten:
Im Titel- und im Navigationsbereich der Moosburger Seiten werden
dynamische grafische Buttons
verwendet, die ihr Aussehen beim "Berühren" mit dem Mauszeiger
ändern. Wie diese sog. "Rollover"-Buttons in den Quelltext
eingebaut werden, erklärt eine
eigene
Seite.
- Bilder sollten grundsätzlich so klein wie möglich gehalten
werden (Bildgröße und Zahl der Farben reduzieren).
- Bei umfangreichen Bildern empfiehlt sich die Verwendung von
kleinen Stellvertretern im Text ("Thumbnails"), die auf die
Originalbilder verweisen.
- Im Quelltext immer die Bildgröße angeben (z.B. <img src
= "gif/k-mol2.gif" width=210
height=71>). Das verkürzt die Ladezeit.
- Möglichst einen Alternativtext anbieten, der von Textbrowsern
angezeigt werden kann (z.B. <img src =
"../../../jpg/donauer.jpg" width=306 height=177 alt="Ansicht (ca. 27 kB)">). Die
alt-Angabe soll auch dann verwendet werden, wenn man sie - etwa
bei rein dekorativen Grafiken - leer lassen will: <img src
= "../../gif/pin.gif" width=100 height=100 alt="">.
- Bilder für Moosburg Online allgemein in die Verzeichnisse
http://www.moosburg.org/gif bzw.
http://www.moosburg.org/jpg kopieren. Spezielle Bilder für
Vereine, Schulen usw. gehören in das jeweilige Vereins- oder
Schulverzeichnis.
- Dubletten gleicher Bilder in verschiedenen Verzeichnissen
vermeiden.
- Neben ihrer eigentlichen Funktion eignen sich (blinde)
Tabellen auch gut für mehrspaltige Texte und ein
abwechslungsreiches Seitenlayout (z.B. verschiedenfarbige
Hintergründe).
- Die Tabellenbreite sollte möglichst nicht in Pixeln
angegeben werden, zumal dann, wenn durch sehr hohe Werte der
Inhalt nicht auf den (kleineren) Bildschirm paßt: <table
width=800>.
- Besser ist die Angabe in Prozent: <table
width=80%>.
- Frames kommen auf den "offiziellen" Seiten nicht vor.
- Darüberhinaus steht es jedem frei, sie auf Vereinsseiten und
dergleichen zu verwenden, sofern die Grundregeln beachtet
werden:
- Es soll immer zusätzlich eine Version ohne Frames
angeboten werden, und vor allem:
- Allzuviel ist ungesund.
- Möglichst kurze Dateinamen verwenden; am besten nicht
länger als acht Zeichen (Windows-3.x-Benutzer haben sonst evt.
Probleme mit dem Speichern der Seiten).
- Nur Kleinbuchstaben oder Zahlen, keine
Großbuchstaben verwenden (aus dem gleichen Grund).
- Statt .htm die Erweiterung .html
verwenden.
- Weitere Hinweise: Tips für den
Upload.
- Bei Verweisen innerhalb von Moosburg Online
(http://www.moosburg.org) nur relative Links verwenden (z.B.
"../../gif/k-mol2.gif" oder
"vereine/index.html").
Beispiele:
- Link von der Seite
http://www.moosburg.org/info/index.html zur Seite
http://www.moosburg.org/info/plan.html (gleiches
Verzeichnis):
<a href = "plan.html">Stadtplan</a>
- Link von der Seite
http://www.moosburg.org/stadt/index.html zur Seite
http://www.moosburg.org/stadt/behoerde/muell.html (ein
Verzeichnis tiefer):
<a href = "behoerde/muell.html">Müllabfuhr</a>
- Link von der Seite
http://www.moosburg.org/kultur/veranst/index.html zur
Seite
http://www.moosburg.org/vereine/taekwondo/index.html
(zwei Verzeichnisse höher, dann zwei tiefer):
<a href = "../../vereine/taekwondo/index.html">Taekwondo-Verein</a>
- Link von der Seite
http://www.moosburg.org/schulen/index.html zum Bild
http://www.moosburg.org/gif/b-mol.gif (ein Verzeichnis
höher, dann eines tiefer):
<img src = "../gif/b-mol.gif">
- Damit die relativen Links funktionieren, darf im Header der
Seite keine Basis-Adresse (<base href="...">)
angegeben sein.
- Bei Verweisen zu anderen Seiten des Bürgernetzes
Weihenstephan sind absolute Links mit vollständigem URL nötig
(z.B. "http://www.weihenstephan.org/" oder
"http://www.weihenstephan.org/~wschwarz/" oder
"http://www.connect-ed.de/").
- Das gleiche gilt natürlich auch für fremde WWW-Server (z.B.
"http://www.hallertau.baynet.de") sowie andere Protokolle
("mailto:", "ftp://", "telnet://",
"news:").
- Eine Übersicht der Verzeichnisse von Moosburg Online bietet
die Seite Verzeichnisstruktur.
HTML-Tags für Header und Body
