 Tabellen zur Gestaltung eines designs
Sie sehen hier zur optischen Aufwertung rechts neben dem Seiteninhalt eine Hintergrundgrafik! Die Anzeigebreite ist durch eine Tabelle auf 590 Pixel begrenzt.
 Seite mit 100% Breite ansehen
Seite 590 Pixel ohne Hintergrundbild
Die Hintergrundgrafik rechts ist nicht unbedingt mein Favorit. Zur Demo sollte es aber ausreichen. Größe der Grafik ca. 6,2 kB .
Abmessungen der Grafik: 1024 x 200 Pixel. Objekt (@) positioniert bei 755 Pixel (von links) , eingestellt für eine Anzeigenbreite meiner Inhalte von 585 Pixel. Beginn grauer Bereich bei 645 Pixel.
Ein Webmaster weiß nicht mit welcher Auflösung seine Web-Seiten später dargestellt werden. Bildschirmbreiten variieren zwischen 640 und Anzeigenbreiten von mehr als 2000 Pixeln (Bildpunkten).
Eine gute Lösung ist eine Entwicklung für den Standard von 800x600 Punkten.
Natürlich kann man eine Web-Seite ist so erstellen, dass sie sich dynamisch der jeweiligen Bildschirm-Auflösung anpaßt. Den Inhalt einfach ohne Tabelle oder mit der Angabe 100% für die Tabellenbreite darzustellen ist ein böser Fehler. Übermäßig breite Textspalten und ein 'kaputtes' Design ist die Folge. Außerdem werden kurze Absätze als eine einzige Zeile dargestellt. Von den Regeln des Bildschirmlesens in engen Spalten wie bei einer Zeitung bleibt nichts übrig.
Seite mit 100% Breite ansehen
 Legen Sie die Darstellungsbreite mit absoluten Breitenangaben in Pixel fest. Eine Tabelle mit 770 Bildpunkten Breite ist ein guter Anhalt. Das gilt nicht für Seiten im Frameset!
Die Seite läßt sich dann bei einer Auflösung von 800x600 auch ohne seitliches Scrollen betrachten und das Layout sieht auch bei 1024x780 Pixeln im Vollbild gleich aus.
Seite 590 Pixel ohne Hintergrundbild
Die Version für Darstellungen mehr als 800 Pixel Breite, bei der rechts eine Hintergrundgrafik sichtbar ist, wird hier im Augenblick angezeigt.
|
Die Darstellungsbreite errechnen: Entscheiden Sie sich für eine minimale Darstellungsbreite für Ihre Seite. Als Beispiel nehme ich hier die Auflösung 800 x 600 Pixel. Das bedeutet Ihnen stehen 800 Bildpunkte für die Breite zur Verfügung. Aber nur theoretisch !!!
Subtrahieren Sie zunächst einen möglichen Scrollbar (Bildlaufleiste) macht 800 - 20 = 780 Pixel.
Wenn Sie mit 2 Frames nebeneinander arbeiten, einen für die Navigation, einen für Ihre Inhalte, müssen Sie die linke Framebreite auch subtrahieren. Angenommen der linke Frame ist 200 Pixel breit bleiben ihnen noch:
800 - 20 - 200 = 580 Pixel. Aber nur theoretisch !!!
Wenn Sie die Tabellenbreite durch ein Bild oder eine genaue Breitenangabe fixieren, dürfen die HTML-Seite, ihr Frameset und die Frames keine Ränder und Margins haben, damit Ihre Rechnung aufgeht.
Weitere Info:
Ränder und Margins (Menü FRAMES)
einheitliche Spaltenhöhen (Menü Tabellen)
|
|
|
optische Aufwertung
Wenn Sie nun den Besuchern mit größeren Auflösungen keine leeren Flächen rechts neben der Inhaltstabelle anzeigen möchten, lassen Sie doch (wie hier) eine Hintergrund-Grafik anzeigen. Besucher mit einer Bildschirmauflösung von mehr als 800 Pixel Breite ist das hier sichtbar. Wie das ohne Hintergrundgrafik aussieht hier eine Demonstration:
Seite ohne Hintergrundbild
Bemerkung
Die Hintergrundgrafik rechts ist nicht unbedingt mein Favorit. Zur Demo sollte es aber ausreichen. Größe der Grafik ca. 6,2 kB .
Abmessungen der Grafik: 1024 x 200 Pixel. Objekt (@) positioniert bei 755 Pixel (von links) , eingestellt für eine Anzeigenbreite meiner Inhalte von 585 Pixel. Beginn grauer Bereich bei 645 Pixel.
CSS-Angaben für den Body / das Hintergrundbild
<style type="text/css">
<!--
body {
padding:0px;
margin:0px;
background-image:url(images/bg-designhilfe.jpg);
background-position:0px 0px;
background-attachment:fixed;
}
-->
</style>
 Hintergrundbild mit CSS
|
WWW.WEB-TOOLBOX.NET
ZURÜCK