Webdesign

Grundsätze

Skalierbares Layout, für alle Bildschirmauflösungen geeignet, keine starre Breite. Druck der Seiten und Übernahme in "Compiled HTML" (keine Navigation) muss ebenfalls möglich sein.
Keine Frames, kein Flash, JavaScript höchstens für Zusatzfunktionen.
Unterstützung aller "modernen" Browser.
Neu: Layout mit purem HTML 4.01 und CSS 2.0. Layout basiert auf CSS Layern, nicht mehr auf Tabellen und "Blind GIFs". Daher keine Unterstützung für Netscape 4.x. Aber: Die Seiten sollen auch ohne Stylesheet lesbar bleiben.
Neu: Skalierbare Schrift für den Inhalt.
Neu: Wegen der besseren Lesbarkeit auf 16:9 Bildschirmen habe ich die Seitenbreite auf 1024 Pixel begrenzt (06.10.2009).

Layout 1

Logo	Überschrift
	Navigation

Navigation

Inhalt

Fußzeile

(TOP)

Layout 2

Logo	Überschrift
	Navigation


		Bilder
Navigation		Inhalt

Fußzeile

(TOP)

Drucklayout

Überschrift

Bilder

Inhalt

Fußzeile

(TOP)

Blockbeschreibungen

Head

Der Kopf hat feste Größen (in Pixel)

Logo: 80px * 134px
Überschrift: Höhe 60px, Schriftgröße 24px
Navigation: Höhe 20px, Schriftgröße 12px, Schriftart "Verdana" fett
beinhaltet die Umschaltung zwischen den Themenbereichen Uhren - Urlaub

Main

Der Navigationsbereich und die Bildleiste haben feste Größen (in Pixel), der Inhaltsbereich hat (bis auf den Rand) relative Größen (in em)

Navigation: Breite 154px (breiter als Logo!), Schriftgröße 12px
Bildleiste: Höhe i.d.R. 90px, 36px vom linken Rand und oberer Navigationszeile, 36px Abstand zum Inhalt.
Inhalt: Außenrand 36px

Die Navigation im linken Rand dient zur Navigation in dem gewählten Bereich (Uhren - Urlaub). Sie ist 4stufig: Oberster Punkt ist immer der Bereich (Uhren/Urlaub, fett, ohne vorgestelltes Bullet "•"), danach die Hauptseite (fett, mit vorgestelltem "Bullet") und danach die Unterseiten (nicht fett, eingerückt, 4. Stufe mit vorgestelltem Gedankenstrich (— = — = "—"). Die gerade aktive Seite ist auf weißem Hintergrund.

Footer

Die Fußzeile ist wieder mit festen Größen

Fußzeile: Höhe 20px Schriftgröße 10px, Schriftart "Verdana" fett

Realisierung

Es sind im Wesentlichen 3 Layern (<div>) relativ positioniert untereinander angeordnet:

ID="head": Kopfbereich mit fester Höhe
ID="main": Inhaltsbereich mit festem linken Rand (Navigationsbereich) und festem Innenabstand zum eigentlichen Inhalt.
ID="footer": Fußzeile

Darauf liegt, absolut positioniert der Navigationslayer (<div id="clink">). Die obere Position des Navigationslayers stimmt mit der ersten Zeile des Inhalts überein.

Die Bildzeile ist relativ positioniert, Teil des Inhaltsbereichs. Sie kann dadurch auch mehrfach im Inhalt vorkommen.

Testseite Testseite neu

(TOP)

verwendete Farbpalette

Hintergrundfarbe	Schriftfarbe	Verwendung
#FFFFFF	#000000	Inhalt (schwarz auf weiß)
#FFFFCC	#0080FF	Navigationsflächen (hover)
#D8D8E0	#00008B	Überschrift und Navigation links
#FFFF00	#000000	"Textmarker"
#0080FF	#000000	Logo
#00008B	#D8D8E0	Navigation oben und Fußzeile

Kompatibilitätshinweise

Netscape 6.x interpretiert border-collapse:collapse (CSS) nicht. Daher muß das Attribut cellspacing="0" (HTML) gesetzt werden.
IE (nur 5.x?) verrechnet sich bei mehreren relativ positionierten <div>. Symptom: der linke Rand ist bei der Fußzeile außerhalb des Bildschirms. Daher muß der Link (TOP) am Ende der Seite stehen.
Opera 5 versteht kein width (CSS) auf <a> Elemente. Daher ist ein zusätzliches display:block bei diesem Element erforderlich.
Für Browser, die keine in HTML 4 benannten Zeichen kennen, werden diese in ihrem Unicodewert angegeben. Beispiel: • (HTML 4) = • (HTML 3.2).

(TOP)