 Tabellen zur Gestaltung eines Designs
Die Anzeigebreite ist hier nicht begrenzt (Anzeigebreite 100%). Im Bereich rechts neben dem Seiteninhalt, wird nach dem Laden der Seite eine zusätzliche Info-Spalte angezeigt.
|
|
3) Unbegrenzter Anzeigebereich + Hintergrundgrafik
Das lässt sich mit Tabellen oder durch einen <DIV>-Bereich (CSS) realisieren
Sie sehen hier was geschieht wenn die Inhalte nicht durch eine Tabelle oder durch CSS-Angaben in der Breite begrenzt werden. Die Anzeigebreite der Seite ist hier durch eine Tabelle auf 100% Breite festgelegt, was einer Seite ohne Seitenbegrenzug gleichkommt.
 Seite 590 Pixel mit Hintergrundbild
Seite 590 Pixel ohne Hintergrundbild
Anzeigebreite begrenzen
Ein Webmaster weiß nicht mit welcher Auflösung seine Web-Seiten später dargestellt werden. Bildschirmbreiten variieren zwischen 800 Pixeln und Anzeigenbreiten von mehr als 2000 Pixeln (Bildpunkten).
Eine gute Lösung ist immer noch ein Layout für die Anzeigebreite von 800 Punkten und eine gesamte Seitenbreite von 1024 Punkten. Die 'großen Seiten' wie Google & Co veranschaulichen das.
Natürlich kann man eine Web-Seite so entwerfen, 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 Tageszeitung bleibt nichts übrig.
zurück zur Seite mit 590 Pixel Breite
 Legen Sie die Darstellungsbreite mit absoluten Breitenangaben in Pixel fest. Eine Tabelle (oder ein <div>-Bereich) mit 770 Bildpunkten Breite ist ein guter Anhalt.
Die Seite läßt sich dann bei einer Auflösung von 800 × 600 auch ohne seitliches Scrollen betrachten und das Layout sieht auch bei 1240 Pixel Breite im Vollbild gleich aus.
Einen Tipp für die optische Aufwertung bei größeren Darstellungen (mehr als 800 Pixel Breite) lesen sie unten.
Seite mit Hintergrundbild
|
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 590 Pixel mit Hintergrundbild
Die Hintergrundgrafik in der verlinkten Seite 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.
|
Home • Tabellen • CSS • Tabellen Designhilfe 3