template

Index :: HTML :: Gestaltung

In das Erscheinungsbid einer Webapplikation fließen nicht nur die vielfältigen Designmöglichkeiten von HTML/CSS ein, sondern es orientiert sich auch - im Gegensatz zu einer normalen Homepage - an Oberflächen und Standards von kompilierten Programmen. Hier kommt es auf eine ausgewogene Mischung an, die es dem Benutzer erlaubt, zügig und ergonomisch zu arbeiten - im Zweifelsfall gilt 'form follows function'.

Kopf/Menü - Inhalt - Fuß
Formulare
Listen

Kopf/Menü - Inhalt - Fuß

Außer dem eigentlichen Inhalt besitzt eine Standardseite i.d.R. einen Kopfbereich (z.B. mit Logo, Seitentitel, Login/Logout-Button oder sonstigen globalen Anzeigen), darunter eine Menüzeile (z.B. Begriffe und/oder Icons) und unten einen Fußbereich (z.B. mit Seitentitel, Kontakt/Mailadressen, Copyright oder sonstigen, seltener benötigten globalen Informationen):

Kopfbereich

Logo

Seitentitel

Menüzeile

Punkt1

Punkt2

Punkt3

Inhalt

Fußbereich

Seitentitel

Kontakt

Kenntlich gemacht werden diese vier Bereiche entweder durch unterschiedliche Hintergründe oder durch Einfügen von Trennlinien:

Logo

Seitentitel

Punkt1

Punkt2

Punkt3

Seitentitel

Kontakt

Logo

Seitentitel

Punkt1

Punkt2

Punkt3

Seitentitel

Kontakt

Farbliche Unterscheidung

Mit Trennlinien

Das traditionelle <HR>-Element eignet sich zwar zum Trennen von Textblöcken, aber für gestalterische Linien sollte man besser per CSS die Ränder (BORDER) von <TABLE>-, <TD> oder <DIV>-Elementen formatieren (ausserdem sind damit auch vertikale Linieneffekte möglich), z.B:

3D-Effekt: Rahmen oben hell, unten dunkel:
<table style='BORDER-TOP:1px solid #FFFFFF; BORDER-BOTTOM:1px solid #B0A090;'>

Für häufiger benötigte Formatierungen empfiehlt sich die Erstellung einer CSS-Klasse:

CSS im Header
.frame3d
  { BORDER:1px solid #808080; BORDER-LEFT-COLOR:#FFFFFF; BORDER-TOP-COLOR:#FFFFFF; }

Weiter unten, im BODY, ein Button:
<input type='submit' class='frame3d' value='Senden'>

Formulare

Eingabemasken mit mehreren Feldern werden am einfachsten in einer (evtl. unsichtbaren) Tabelle strukturiert. Labels (Feldnamen/Beschriftungen) sollten hierbei mittels ALIGN so nah wie möglich am Eingabeelement positioniert sein, damit für den Benutzer auf Anhieb erkennbar ist, welches Label zu welchem Feld gehört:

Anrede		Herr	Frau	Firma
Vorname
Nachname
PLZ/Ort	/
Telefon
EMail

Auch bei mehrspaltigen Formularen sollte jede Spalte in einer eigenen Tabelle stehen, damit die TAB-Reihenfolge (spaltenweise abwärts) gewahrt bleibt. Ansonsten würde sich der Focus verwirrenderweise horizontal über die Maske bewegen und schlimmstenfalls sogar zwischen verschiedenen Themengebieten hin und her springen.

Anrede		Herr	Frau	Firma
Vorname
Nachname
PLZ/Ort	/
Telefon	(priv)
EMail	(priv)

		selbstständig	angestellt
Beruf
Firma
Abteilung
Telefon	(gesch)
EMail	(gesch)

Listen

Bei Listen im Allgemeinen sind zwei Punkte zu beachten:

Alle Felder müssen gut lesbar sein. Falls also die Seite ein Hintergrundmuster enthält oder von Schriftfarben-ähnlicher Tönung ist, sollte die Tabelle nicht transparent sein. Es ist von Vorteil, zumindest den Datenfeldern eine eigene Hintergrundfarbe zu geben; dies würde auch das individuelle Einfärben von Spalten oder Zeilen ermöglichen.
Es muss ein deutlicher Unterschied zwischen Datenfeldern und anderen Bereichen (z.B. Titelzeile, LfdNr-Spalte oder Edit-Spalte) bestehen, am besten mithilfe unterschiedlicher Hintergrundfarben.

Ausser der Titelzeile und dem Datenbereich benötigt eine Liste oft noch weitere Elemente:

Lokale Menüzeile: Hier können sich diverse Controls befinden, z.B:
- ComboBox, um die Art der Sortierung einzustellen.
- CheckBoxen, um Selektionskriterien ein- auszuschalten.
- Schaltfläche Neu, um ein Listenelement anzulegen.
Spalte mit LfdNr, wobei im obersten Feld (in der Titelzeile) die Gesamtanzahl N der Listenelemente angezeigt wird.
Edit-Spalte mit Schaltflächen für Bearbeiten und/oder Löschen des jeweiligen Elements.

Struktur

Beispiel

lokale Menüzeile (optional)
N	Titelbereich
#	Feld1	Feld2	Feld3	Edit
#	Feld1	Feld2	Feld3	Edit
#	Feld1	Feld2	Feld3	Edit


3	Name		EMail
1	Alfons	Meier	a.meier@abc.xyz.de
2	Berta	Schmitt	webmaster@blabla.de
3	Dagobert	Duck	dagobert.duck@entenhausen.net

Bei mehrzeiligen Listenelementen sollte eine gesonderte horizontale Separierung erfolgen, um eine gute optische Unterscheidung zu gewährleisten:

3	Name		EMail
	Kommentar

1	Alfons	Meier	a.meier@abc.xyz.de
	Betreibt eine Zertifizierungsstelle in Berlin

2	Berta	Schmitt	webmaster@blabla.de
	Die wichtigste Frau im Grid

3	Dagobert	Duck	dagobert.duck@entenhausen.net
	Unser Kapitalist in Entenhausen

Index :: HTML

template