 |
 |
| 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.
- Weitere Hinweise:
BNW Verzeichnisstruktur.
- 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,
BNW Verzeichnisstruktur.
-
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.
- Weitere Hinweise:
BNW Verzeichnisstruktur.
HTML-Tags für Header und Body
