Auch modernes Webdesign basiert technisch gesehen auf HTML als Grundgerüst für jede Webseite. Hier finden Sie einen kompakten Überblick, über gängige Varianten, auf der Basis von HTML (fast) beliebige Webseiten zu gestalten.   

Bildschirm- und Browserfenstergröße

Webseiten sollten in jedem Browser und bei jeder Bildschirmauflösung und jeder (typischen) Größe des Browserfensters gut aussehen. Die heute gängigen Bildschirmauflösungen sind:  
  

Angesichts der der unterschiedlichen Bildschirm- auflösungen war der ursprüngliche Gedanke bei der Entwicklung von HTML, daß für eine Webseite nur eine Abfolge von Textabschnitten und Bildern angegeben wird, die der Browser dann auf dem Monitor jeweils formatfüllend darstellt. Dies ist aber gleichbedeutend mit einer unterschiedlichen Darstellung auf verschiedenen Monitoren. 

Relativ rasch wurde HTML dann als Instrument für Webdesign umgebogen. Ziel dabei war es, daß einzelne Bereiche von Webseiten oder die ganze Webseite auf allen Monitorauflösungen identisch aussehen sollten. Die nachfolgenden Techniken kommen dabei in Frage: 
  
Mit oder ohne Frames? 

Mit der Frame-Technik kann das Browserfenster in mehrere Teilfenster (Frames genannt) unterteilt werden: 

Eine solche Webseite besteht dann aus mehreren Dateien, die in Frames dargestellt werden (im Bild mit 1-3 bezeichnet) und einer Frameset-Datei (4), die als Adresse im Browser erscheint und die Aufteilung der Frames steuert. 
Dabei ist es möglich, einige der Frames mit einer fixen Breite (bzw. Höhe) auszustatten, so daß Sie bei jeder Bildschirmauflösung gleich breit (bzw. hoch) erscheinen. 

Frames sind mittlerweile weitgehend aus der Mode gekommen. Die wichtigsten Gründe dafür sind: 

1.	Zwar ist es möglich, einen Hyperlink in einem Frame so zu gestalten, daß ein Klick darauf den Inhalt eines anderen Frames austauscht, aber eine gleichzeitige Änderung von mehr als einem Frameinhalt ist nicht möglich.
2.	Während der Navigation durch eine Frame- struktur bleibt in der Adresszeile die Adresse der Frameset-Datei gleich. Es ist deshalb nicht möglich, bestimmte Framekombinationen als Lesezeichen / Favoriten abzuspeichern.
3.	Im Prinzip lassen sich dien beide genannten Beschränkungen durch JavaScript umgehen. Da jedoch nicht alle Besucher einer Webseite JavaScript aktiviert haben, ist dies keine voll kompatible Lösung.

Arbeiten mit Tabellen 

Statt mit Frames wird heutzutage vor allem mit (unsichtbaren) Tabellen gearbeitet. Dabei gibt es zwei Möglichkeiten:  
  

1.

Eine Tabelle kann (analog den Möglichkeiten mit Frames) aus einer Kombinatione von fixen und variablen Tabellenzellen bestehen. Die variablen Tabellenzellen nehmen dann jeweils soviel Platz ein, daß das Browserfenster bei jeder Bildschirmauflösung vollständig ausgefüllt wird. Zugleich ist die Verteilung von Text und Bildern jedoch in den variablen Bereichen je nach Monitorauflösung unterschiedlich.

2.

Die Lösung für ein Webdesign, das bei allen Monitorauflösungen identisch aussieht, ist die Verwendung von fixen Tabellenbreiten (wie Sie es auch auf diesen Seiten hier sehen). Zwar bleibt hier bei höheren Bildschirmauflösungen ein ungenutzter Rand stehen, dafür ist damit ein einheitliches und pixelgenaues Design möglich.

Nachteil von fixen Tabellenbreiten  Die heute gängigste fixe Tabellenbreite ist 770 Pixel, da diese Tabelle in einem formatfüllenden Browserfenster bei einer Bildschirmauflösung von 800x600 Pixeln die volle Breite des Browserfensters einnimmt.   Der Nachteil dieser Einstellung besteht darin, daß der Ausdruck der Seite auf DIN-A4 im Hochformat knapp 2cm am rechten Rand abschneidet.

Pixelgenaues arbeiten (1)

Pixelgenaues arbeiten bei Webseiten setzt als Erstes voraus, daß alle Browser mit dem gleichen Seitenoffset arbeiten. Seitenoffset bezeichnet dabei die Zahl der Pixel, die jeder Browser in der Darstellung von Webseiten links oben freiläßt. Dieser Seitenoffset schwankt - je nach Browser und Betriebssystem - zwischen 8 und 16 Pixeln. 

Eine kompatible Lösung erreichen Sie mit der Angabe eines Seitenoffsets von 0 Pixeln sowohl horizontal als auch vertikal. Da verschiedene Browser unterschiedliche Befehle dazu benötigen, sieht die kompatible Variante, die im <body>-Tag stehen muß, so aus:

<body marginwidth='0' marginheight='0' leftmargin='0' topmargin='0'>

Pixelgenaues arbeiten (2)

Um Tabellen aber auch Bild- oder Textabstände pixelgenau zu steuern, sodaß auch Browser, die keine CSS-Befehle beherrschen (z.B. Netscape 4.x), dies exakt umsetzen, können Sie mit einer unsichtbaren GIF-Grafik (häufig dummy.gif oder spacer.gif genannt) arbeiten. Diese unsichtbare Grafik wird mit einer Höhen- und Breitenangabe in Pixeln ausgestattet, daß sie den gewünschten Pixelabstand erzeugt:

<img src="dummy.gif" width="50" height="1">

Arbeiten mit Slices

Um beliebige Kombinatione von Bildern und Texten auf Webseiten anordnen zu können, werden zusätzlich zum Einsatz von Tabellen Bilder in Teilbilder (Slices) aufgeteilt, die getrennt geladen werden, aber sich nach dem Laden nahtlos aneinanderfügen:
  

Zwei Teilbilder (Slices) können in einer Tabelle nahtlos aneinander- gefügt werden:

Neben den gestalterischen Möglichkeiten bieten Slices noch einen weiteren Vorteil: Werden Bilder so aufgeteilt, daß auf mehreren Webseiten wiederkehrende Bildelemente getrennt von Bild- elementen übertragen werden, die sich von Seite zu Seite verändern, so verkürzt dies die Ladezeit der Webseiten, da die wiederverwendeten Bild- elemente im Zwischenspeicher (Cache) des Browsers bereits fertig geladen vorliegen.