Aspekte der Webseitengestaltung bei den Layouttechnologien CSS Div, HTML-Tabelle und HTML-Frame

Aus Winfwiki

Wechseln zu: Navigation, Suche
Name des Autors : Annika Dietrich
Titel der Arbeit: "Aspekte der Webseitengestaltung bei den Layouttechnologien CSS Div, HTML-Tabelle und HTML-Frame"
Hochschule und Studienort: FOM Essen


Inhaltsverzeichnis


1 Abkürzungsverzeichnis

AbkürzungBedeutung
CSSCascading Style Sheets
HTMLHypertext Markup Language
XHTMLExtensible Markup Language

2 Abbildungsverzeichnis

Abb.-Nr.Abbildung
1Tabellen-Schichtenmodell
2Seitenlayout mit Frames
3Seitenlayout mit DIVs - fehlerhafte Darstellung
4Seitenlayout mit DIVs - korrekte Darstellung
5Fehlerhafte Textanzeige
62. Fehlerhafte Textanzeige
7Unterschiedliche Hintergrunddarstellung
8Positionierung und Hintergrunddarstellung
9Positionierungsunterschiede
10Unterschiedliche DIV Position

3 Einführung

Viele Personen, die vor der Aufgabe stehen ihre erste Webseite selbst zu erstellen, haben das Problem, dass sie nicht wissen, wie sie anfangen sollen. Das Vokabular des Internets zu verstehen, stellt meist die kleinere Schwierigkeit da. Ein größeres Problem ist die Frage, wie es erreicht werden kann, dass die neue Webseite später so aussieht, wie man es sich vorstellt. Die meisten dieser Einsteiger haben die Idee, eine Tabelle für die Gestaltung zu nehmen, wissen jedoch nicht, ob es noch eine bessere Variante gibt. Wenn sie selbst im Internet unterwegs waren, sind ihnen häufig auch schon Seiten begegnet, welche aus Frames bestehen und sie fragen sich nun: Welche dieser Techniken soll ich verwenden? Zur Klärung dieser Frage wenden sie sich meist an erfahrenere Webentwickler. Jedoch ist es leider sehr häufig so, dass man auch von diesen Leuten keine eindeutigen und klaren Aussagen bekommt. Jeder hat seine eigene Meinung, welche Technik die bessere ist und er dementsprechend einsetzt. Wenn dann auch noch neben den beiden oben genannten Techniken DIVs zur Verfügung stehen, ist meist guter Rat teuer. Welche Technik soll nun eingesetzt werden?

Diese Hausarbeit soll zur Klärung dieser Frage beitragen.

Schon jetzt kann gesagt werden: egal für welche Technik man sich entscheidet: Sie alle haben Vor- und Nachteile. Ist es also egal, welche Technik eingesetzt wird? Um diese Frage zu beantworten, werden zunächst einige Anforderungen vorgestellt, die eine gute Webseite erfüllen sollte. Anschließend werden die verschiedenen Techniken mit ihren Vor- und Nachteilen vorgestellt. Im Abschnitt Erfahrungen werden einige weitere Vor- und Nachteile der Techniken vorgestellt, die unabhängig von den Anforderungen der Kunden / Besucher sind. Im Fazit soll dann ein Ratschlag gegeben werden, wann und ob eine Technik für welche Anforderung eingesetzt werden kann.

Aufgrund des begrenzten Rahmens, der dieser Ausarbeitung zur Verfügung steht, kann leider nicht auf jeden Aspekt der genannten Themen eingegangen werden. Es soll jedoch immer ein hinreichender Überblick gegeben werden um den folgenden Argumentationen folgen zu können.

4 Kriterien

4.1 Barrierefreiheit

"Barrierefreies Webdesign - manchmal auch [intern] Zugänglichkeit oder Accessibility genannt - ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann."[1]

Sehbehinderte und Benutzer unterschiedlicher Browser und Hardware nehmen das Internet unterschiedlich war und haben unterschiedliche Anforderungen an Webseiten. Die Besucher könnten z.B. grundsätzlich darauf verzichten, sich Bilder einer Webseite anzeigen zu lassen um Übertragungszeiten zu sparen. Alternativ surfen heutzutage viele Menschen mit einem Handy und folglich sehr kleinem Bildschirm durch das Internet. Sehbehinderte Personen wiederum verwenden häufig Screen-Reader oder ähnliche Hilfsmittel um sich Webseiten darzustellen. Genauso wie sich die Art der Informationswiedergabe unterscheiden kann, unterscheiden sich auch die Steuerungsmöglichkeiten der Benutzer. So können beispielsweise Maus, Tastatur, Touchscreen oder ähnliche Eingabegeräte zur Bedienung einer Seite verwendet werden. [2]

Ursprünglich für behinderte Menschen konzipiert, nun jedoch auch für die Verwendung von Mobilgeräten als Browser sehr sinnvoll[3] , wurden 1999 vom WWW-Consortium (W3C) die so genannten "Web Content Accessibility Guidelines" entworfen. Zwei große Ziele sollen mit diesen Richtlinien verfolgt werden[4]:

  • Den Seiteninhalt verständlich und navigierbar zu machen
  • Die Sicherstellung von eleganter Transformation

Für einen verständlichen und navigierbaren Inhalt reicht eine klare und einfache Sprache nicht aus. Auch eine leicht verständliche Möglichkeit zwischen den Seiten zu navigieren ist sehr wichtig. Navigationswerkzeuge und Orientierungshilfen sind hierfür essentiell. Orientierungshilfen sollen dazu dienen, dass der Benutzer leicht erkennt, auf welchem Bereich / Unterseite einer Webseite er sich befindet. Für lange Texte sollte ebenfalls eine Orientierungshilfe zur Verfügung stehen. Sie soll es dem Benutzer erleichtern, zu erkennen wo er sich im Text befindet. Besonders bei Browsern ohne Scrollleiste ist dies notwendig[5].

Lässt sich eine Seite ohne Probleme transformieren – also an verschiedene Gegebenheiten anpassen – so ist sie unter allen oben genannten Einschränkungen erreichbar. Folgende Grundsätze sollten für eine Transformierbarkeit gewährleistet sein[6].

Es ist eine strikte Trennung von Inhalt und Präsentation notwendig.

Diese Trennung wird am Besten durch ein ausgelagertes Style-Sheet realisiert. Dieses Style-Sheet vereinfacht die Präsentation auf dem jeweiligen Endgerät, indem für jedes dieser Endgeräte eigene Style-Angaben gemacht werden können. Auch wenn Style-Sheets im Browser deaktiviert werden, ist die Seite meist noch leserlich. Durch die Sammlung der Style-Informationen in einer eigenen Datei, verkürzen sich außerdem die Downloadzeiten für die gesamte Webseite. Der Grund hierfür ist, dass Informationen nicht mehr unnötig doppelt vorkommen und die Style-Sheet Dateien vom Browser zwischengespeichert werden können. Somit müssen sie nicht bei jedem Seitenaufbau erneut übertragen werden[6].

Für alle multimedialen Elemente der Seite sollte ein textliches Equivalent zur Verfügung stehen.

Es gibt Benutzer, die auf einer Seite eingebettete Bilder nicht sehen können. Sei es weil ihr Browser keine Bilder unterstützt, diese Funktion ausgeschaltet ist oder der Benutzer blind ist und er sich die Seite mittels Screen Reader vorlesen lässt. Für diese Personen sollte jedes Bild ein textbasiertes Equivalent besitzen, welches den Inhalt des Bildes wiedergibt. Somit können auch diese Benutzer den Inhalt der Seite vollständig erfassen. Wird ein Link zum Beispiel über ein Bild dargestellt, kann das Textequivalent die Bedeutung des Links wiedergeben, wie es bei einem normalen Textlink der Fall wäre. Handelt es sich lediglich um ein Bild ohne Linkfunktion, sollten die Impressionen des Bildes mittels einer kurzen Bildbeschreibung wiedergeben werden[6].

Um den Textfluss einer Seite jedoch auch einwenig aufzulockern ist es andererseits auch hilfreich, besonders bei komplexen Texten, einige Informationen grafisch darzustellen.

Es dürfen nur Dokumente erstellt werden, die ihren Zweck auch erfüllen, wenn der Benutzer blind oder taub ist.

Ist das einzige Element auf einer Webseite ein Video oder eine Hörprobe, so sollte immer eine schriftliche Zusammenfassung für Sehbehinderte und Gehörlose zur Verfügung stehen. Auf diese Weise können auch sie auf die Informationen die anderen präsentiert werden, zugreifen[6].

Die Seite darf sich nicht auf bestimmte Hardware/Software verlassen.

Jede Seite muss auch ohne Maus oder Tastatur steuerbar und auf sehr kleinen Bildschirmen oder Bildschirmen mit geringer Auflösung gut erkennbar sein. Auch die Nutzung von beispielsweise schwarz-weiß Bildschirmen oder gar keinem Bildschirm (Screen-Reader) sollten berücksichtigt werden[6].

Wie bereits in der Einleitung erwähnt, ist dies nur ein kleiner Ausschnitt aus dem Thema Barrierefreiheit. Weitergehende und detailliertere Informationen erhält der interessierte Leser beispielsweise bei den folgenden weiterführenden Quellen:

4.2 Standardkonformität

Das Internet wird von vielen verschiedenen Personen mit vielen verschiedenen Browsern, Betriebssystemen und Geräten verwendet um Informationen zu sammeln und weiterzugeben. Damit die zur Datenverarbeitung notwendigen Systeme und Programme alle mit einander kommunizieren können, wurden vom W3C einheitliche Webstandards entwickelt, an die sich sowohl Webentwickler als auch Browserhersteller halten sollen[7]. Das unabhängige W3C besteht aus vielen verschiedenen Mitgliedern, unter anderem America Online Inc. (AOL), Apple Computer Inc. und der Microsoft Corporation[8].

Zur besseren Lesbarkeit des folgenden Absatzes werden die Standards zunächst nur mit den für sie gebräuchlichen Abkürzungen verwendet. Was diese Abkürzungen ausgeschrieben bedeuten, kann den jeweiligen Unterkapiteln für diese Standards entnommen werden. Weiterhin sei erwähnt, dass die Schreibweise (X)HTML ausdrücken soll, dass die Aussage, sowohl auf den HTML als auch auf den XHTML Standard zutreffend sind.

In den Anfangszeiten des Internets gab es zwar schon einen Standard zur grafischen Darstellung von Internetseiten, jedoch entwickelten die damaligen Browser-Konkurrenten Microsoft und Netscape einige zusätzliche Funktionalitäten, die nicht zu diesem Standard gehörten. So eröffnete Netscape mit seinem Navigator 2.0 erstmalig die Möglichkeit, interaktive Webseiten mit Hilfe von JavaScript zu gestalten. Auch die Frame-Technologie geht auf Netscape zurück. Von Microsoft kamen zwar nicht so gravierende Neuerungen, jedoch bauten auch sie "proprietäre HTML-Erweiterungen"[9] in ihren Internet Explorer ein. Als die Opera Inc. 2000 ihren Opera 4 veröffentlichte, war dies der erste Browser, der sich komplett an den HTML 4.0 Standard gehalten hat. Da jedoch mittlerweile so viele Webseiten entweder für den Internet Explorer oder den Netscape Navigator optimiert wurden und somit nicht Standardkonform waren, erfreute sich diese Browser einer geringeren Beliebtheit als erwartet[9]. Und auch heute gibt es teilweise noch das Problem, dass Webseiten sich nur mit einem bestimmten Browser vollständig nutzen lassen.

Dieser kurze Rückblick, in die Zeiten des "Browserkrieges" wie er heutzutage genannt wird, soll die Bedeutung von allgemeinen Standards verdeutlichen. Denn nur durch die Einhaltung der für das Web relevanten Standards ist es möglich einer "größtmöglichen Anzahl von Benutzern mit einer größtmöglichen Anzahl von Browsern oder anderen Ausgabegeräten wie zum Beispiel Screenreadern oder Braillezeilen[10] unter verschiedenen Plattformen die Webseite zugänglich zu machen."[11]

Aber auch für den Webentwickler selbst hat Standardkonformität einen eindeutigen Vorteil. Zu den Anfangszeiten des Internets war HTML hauptsächlich darauf ausgerichtet, Informationen zu vermitteln. Die Präsentation dieser Informationen wurde vom damaligen Standard vernachlässigt. So, dass die Entwickler sich selbst helfen mussten und sich durch die Kombination von vielen verschiedenen HTML-Tags und entsprechenden Style-Angaben, die damals nur im Quelltext gemacht werden konnten, ihre eigenen Formatierungen kreierten. Dies führte dazu, dass für kleine optische Änderungen viel Quelltext geschrieben werden musste. "HTML war als einfache und leicht verständliche Auszeichnungssprache gedacht gewesen, doch je mehr Bedeutung dem Erscheinungsbild und der Präsentation zukam, desto undurchsichtiger wurde der verwendete Code von Webseiten."[12] Durch die Standardisierung und die Möglichkeit Style-Angaben in eigenen CSS Dateien auszulagern und bestehende HTML-Formatangaben zu überschreiben, konnte der Quellcode wieder übersichtlicher gestaltet werden[13] und "Webentwickler begannen damit (X)HTML-Elemente aufgrund ihrer Bedeutung anstatt ihres Aussehens zu verwenden."[12]

Zudem ermöglicht eine standardkonforme Webseite eine bessere Suchmaschinenindizierung. Auch sollte eine HTML 4.0 oder XHTML 1.0 konforme Webseite in zukünftigen Browsern korrekt angezeigt werden. Dies kann jedoch bei einer Webseite die sich nicht an diese Standards hält nicht garantiert werden[11].

Die derzeit wichtigsten Standards sind HTML 4.01, XHTML 1.0 und CSS 2.1.

4.2.1 HTML 4.01

Die Hypertext Markup Language (HTML) ist eine Meta-Sprache, deren Elemente mit der Auszeichnungssprache Standard Generalized Markup Language (SGML) definiert sind[14]. Bei der Version 4.01 handelt es sich um den aktuellsten HTML-Standard, der mittlerweile von jedem Browser korrekt dargestellt werden kann (von einzelnen Eigenheiten der Browser abgesehen)[15].

4.2.2 XHTML 1.0

Die Extensible Markup Language XML ist eine "reduzierte Variante von SGML"[14]. XML hat im Laufe der Jahre immer mehr Bedeutung für Dateiformate gewonnen. Somit wollte man auch eine XML-Variante für das Web schaffen. Aus diesem Grund wurde HTML 4.0 derart umgeformt, dass es dem XML Standard entsprach. Diese neue Version wurde als XHMTL 1.0 bezeichnet[14]. Die neuen XHTML-Richtlinien achten wesentlich strenger auf die Strukturierung der Dateien als die HTML-Richtlinien. Das W3C erhofft sich von dieser Migration einen effektiveren Datenzugriff, welcher sich für die Benutzer des Internets u.a. durch eine effektivere Suchmaschinenindizierung bemerkbar machen könnte[15].

4.2.3 CSS 2.1

Mit Hilfe von Cascading Style Sheets (CSS) ist es möglich den Inhalt einer Webseite von seinem Layout zu trennen. Dank dieser Trennung ist eine grafische Restrukturierung später ohne weiteres umsetzbar. Zudem stellt es nun auch keinen großen Mehraufwand dar, die Darstellung für verschiedene Ausgabemedien (Bildschirm, Drucker, Handy, etc.) zu optimieren. CSS wird heutzutage von den meisten modernen Browsern interpretiert, allerdings unterstützt bislang kaum ein Browser alle Elemente des aktuellen CSS-Standards[15].

Auch hier sei wieder erwähnt, dass das Thema Standardkonformes Webdesign ganze Bücher füllen kann. Ein empfehlenswertes Buch zu diesem Thema ist beispielsweise das Folgende:

5 Techniken zur Webseitengestaltung

5.1 DIV

Ein DIV ist ein Element, welches es ermöglicht ein (X)HTML Dokument in logische Bereiche aufzuteilen und somit die Struktur des Dokumentes zu verbessern[16]. Häufig ist es sinnvoll einen Kopf-, Inhalts- und Navigationsbereich einzurichten.

Normalerweise werden DIVs im Zusammenspiel mit Style-Sheets eingesetzt um Elementen nach ihrer Bedeutung zu gruppieren und dann gemeinsam zu Formatieren und zu Positionieren[17]. Hierdurch wird es einfacher, die einmal definierten Gruppen oder Bereiche zu verwalten, gestalten und zu bearbeiten, da sie nun als Ganzes ansprechbar sind. Mit CSS kann das optische Erscheinungsbild eines solchen DIVs beeinflusst werden. So können u.a. die Positionierung, der Hintergrund des DIVs sowie die Schriftfarbe und die -art des enthaltenen Textes bestimmt werden[18]. Da der Inhaltstext an sich keinerlei eigene direkte Designangaben beinhaltet, kann somit das komplette Erscheinungsbild eines DIVs durch Anpassungen in der CSS-Datei geändert werden. Eine schöne Demonstration für diesen Fall stellt die Seite http://www.csszengarden.com dar. Diese Seite veranschaulicht, wie das Aussehen einer Seite nur durch den Austausch der CSS-Datei geändert werden kann.

Allerdings sollte das CSS-Layout in verschiedenen Browsern getestet werden, um sicher gehen zu können, dass die Seite auch wirklich überall gleich aussieht. Denn leider interpretieren nicht alle Browser die verschiedenen Tags und CSS Angaben gleich. In wie weit sich der jeweilige Browser an die Standards des W3C hält, kann mit verschiedenen Acid-Tests (engl. acid = Säure)[19] selbst überprüft werden.

Da sich in einem DIV nahezu jedes andere HTML-Tag befinden kann, können auch Verschachtelungen und "Design Vererbung" ermöglicht werden[20].

5.1.1 Vorteile

Mit der Verwendung von DIVs in Kombination mit CSS zur Ausrichtung der Seitenelemente ist eine Grundlage für die Erfüllung des aktuellen (X)HTML Standards[21] geschaffen.

Die DIV-Technologie hat für Webentwickler neben der Erfüllung des (X)HTML Standards einen weiteren Vorteil: Eine spätere Änderung des Designs einer Seite ohne inhaltliche Anpassungen kann durch Anpassungen in der CSS-Datei leicht erreicht werden.

5.1.2 Nachteile

Leider erfüllt bisher kaum ein Browser den aktuellen CSS Standard[22]. Daher muss eine Webseite die mit CSS gestaltet wurde, immer in verschiedenen Browsern getestet werden um sicher zu stellen, dass die Seite überall nahezu gleich angezeigt wird. Es kann also vorkommen, dass nicht der gesamte Funktionsumfang von CSS nutzbar ist und ggf. Anpassungen an einzelne Browser vorgenommen werden müssen.

5.1.3 Fazit

Auch wenn der Einsatz von DIVs einige Schwierigkeiten, wie bspw. das Testen in mehreren Browsern, mit sich bringt, sind die durch ihn erreichten Vorteile jedoch weitaus größer. Der Seitenquellcode kann durch die Gruppierung und Auslagerung der Style-Informationen übersichtlicher gestaltet werden und durch die so erreichte Trennung von Inhalt und Darstellung ist auch eine spätere Neugestaltung der Seite verhältnismäßig leicht umsetzbar. Zudem unterstützt die Verwendung von DIVs sowohl die Standardkonformität als auch die Barrierefreiheit.

5.2 Frame

Frames erlauben Webdesignern mehrere Dateien (meistens HTML-Dateien) in einem Browserfenster gleichzeitig anzuzeigen. Jeder Frame ist vergleichbar mit einem eigenen kleinen Browserfenster und dient folglich zur Darstellung einer Datei[23].

Um eine Seite mit Frames darzustellen, gibt es zwei verschiedene Möglichkeiten: Bei der ersten Möglichkeit wird ein Frameset verwendet. Dieses Frameset enthält Informationen, in wie viele Frames die Seite aufgeteilt werden soll. Das Layout gleicht einer Ausrichtung, welche mit Hilfe von Tabellen erstellt wird. Es besteht aus Spalten- und Zeilenangaben die das Erscheinen der Frames bestimmen. Außerdem ist im Frameset die Startseite jedes Frames definiert. Mit Hilfe der Namen, die im Frameset für die einzelnen Frames vergeben werden, ist es dem Entwickler möglich, das Links aus dem einen Frame den Inhalt eines anderen Frames verändern. Ein jedes Frameset sollte auch Informationen darüber enthalten, was angezeigt werden soll, wenn der Browser keine Frames unterstützt. Üblich ist hier ein Link auf eine Version der Seite ohne Frames[24].

Die andere Möglichkeit stellt ein IFrame dar. Hier wird ein Frame ohne Frameset direkt im Inhalt einer Seite eingebaut. Dies wird meist verwendet, wenn sich in einer Seite z.B. nur ein kleiner Bereich aktualisieren soll und der Rest gleich bleibt. Außerdem hat das IFrame den Vorteil, dass es beliebig auf der Seite positioniert werden kann und somit flexibler ist als die Frames eines Framesets[25].

5.2.1 Vorteile

Für viele Webdesigner sind Frames eine beliebte Möglichkeit, um bestimmte Bereiche einer Webseite - z.B. die Titelleiste und die Navigation - immer sichtbar zu halten, während andere Bereiche, wie zum Beispiel der Inhalt, es ermöglichen, den Fensterinhalt zu scrollen.

Grundsätzlich kann man in beiden Varianten beliebig viele Frames in einander verschachteln. Hat ein Frame einen Rahmen, wird es dem Benutzer meist ermöglicht, die Größe des Frames durch Verschieben des Rahmens zu ändern[26].

Das Aufteilen von Inhalt und Navigation hat beim Drucken den Vorteil, dass Platz gespart wird. Denn es werden immer nur die Informationen des aktuellen Frames gedruckt[27].

Dadurch, dass sich meistens nur ein Teilbereich einer Webseite ändert und neu geladen werden muss, müssen weniger Informationen über das Internet transportiert werden. Dies macht framebasierte Seiten etwas schneller, als wenn immer der komplette angezeigte Inhalt übermittelt werden müsste.

5.2.2 Nachteile

Die Navigation in einer Webseite mit verschiedenen Frames ist für viele Leute verwirrend[28]. Hinter der URL einer Seite, die auf Frames basiert, steckt immer nur das Frameset oder die Seite mit dem IFrame. Diese Seiten steuern dann weiter, welche Inhalte in den einzelnen Frames angezeigt werden. Da sich die Definition eines Framesets im Gegensatz zu seinem Inhalt nie ändert, ist es nicht möglich, den aktuellen Zustand eines Framesets in einer URL zu speichern. Es ist somit nicht möglich, dass sich Besucher Lesezeichen zu einzelnen Unterseiten im Frameset machen. Ein ähnliches Problem besteht, wenn eine Seite über eine Suchmaschine aufgerufen wird. Suchmaschinen können meist nur Links zu den einzelnen Unterseiten ermitteln. Das hat zur Folge, dass man beim Klick auf den Link des Suchergebnisses nur auf der gewünschten Inhaltsseite landet. Eventuelle Navigations- oder Kopf-Frames werden jedoch nicht angezeigt. Dieses Verhalten ist darin begründet, dass die Inhaltsseite keinerlei Informationen über ihr Dasein als Frame in einem Frameset hat und der Browser somit keine Notwendigkeit sieht, die anderen Seiten als Frames anzuzeigen. Auch die Vorwärts- und Rückwärtsnavigation ist nicht über die browsereigenen Buttons möglich[29].

Das Drucken einer gesamten Seite ist nahezu unmöglich, da standardmäßig immer nur der aktuelle Frame gedruckt wird. Wurde vor dem Drucken als letztes über die Navigation eine neue Seite ausgewählt, so ist der Navigationsframe aktiviert und wird gedruckt. Für den unerfahrenen Benutzer ist es in diesem Fall meist schwer zu erkennen, warum gerade dieser Frame gedruckt wurde. Es ist zwar mittlerweile möglich dieses Verhalten in den Browsereinstellungen zu ändern, doch nur wenige nutzen diese Gelegenheit[28].

Für die Personen, die darauf angewiesen sind, Screenreader zu benutzen, ist eine Seite mit Frames nur sehr eingeschränkt nutzbar. Sie können Frames nur sehr schwer interpretieren und somit nicht immer korrekt wiedergeben. Wenn sich z.B. durch einen Klick auf einen Link im Navigations-Frame der Inhalt des Inhalt-Frames ändert, bekommt die Software dies nicht mit. Außerdem ist es für sehbehinderte Menschen nahezu unmöglich, den Zusammenhang zwischen den Inhalten der einzelnen Frames zu erkennen[24].

Die oben genannten Gründe sind jedoch nicht die einzigen, die einen Webdesigner von der Verwendung von Frames abhalten sollten. Viele Browser, die genutzt werden, unterstützen entweder keine Frames oder sind von ihren Benutzern so konfiguriert, dass sie keine Frames anzeigen dürfen. Dies hat zur Folge, dass entweder ein großer Teil der möglichen Besucher einer Seite daran gehindert wird, sich diese Seite anzusehen oder dass für diese Benutzergruppe eine eigene Version der Seite erstellt werden muss. Auf diese Weise entsteht nun doppelte Designarbeit[24]. Außerdem entsteht bei Aktualisierungen von Inhalten ein vervielfachter Verwaltungsaufwand um Inkonsistenzen der Versionen zu vermeiden.

Der oben erwähnte Geschwindigkeitsvorteil, der dadurch entsteht, dass immer nur Teile der Webseite aktualisiert werden, muss relativiert werden. Es werden zwar immer nur die Dateien der Frames ausgetauscht, die geändert werden müssen, jedoch hat jede Datei einen kompletten HTML-Körper. Somit werden für eine Seite, die aus 3 Frames besteht 4 mal ( einmal für das Frameset und jeweils einmal für jede Frame-Inhalts-Datei) die HTML-Grundangaben wie Kopf, Titel übertragen.

5.2.3 Fazit

Zusammenfassend lässt sich feststellen, dass Frames zwar gestalterische Vorteile wie z.B. das Fixieren von Inhalten bieten, jedoch auch viele Nachteile mit sich bringen. So ist es grundsätzlich angeraten, auf die Verwendung von Frames zu verzichten.

5.3 Tabelle

Eine Tabelle dient der Darstellung von Beziehungen zwischen Daten. Die Beziehungen werden auf zwei verschiedene Arten dargestellt: visuell und akustisch[30].

Bei der visuellen Darstellung wird eine Matrix ausgegeben, welche die Daten in Zeilen und Spalten darstellt. Über die Möglichkeit, Spalten oder Zeilen zu Gruppen zusammenzufügen und Rahmen anzeigen zu lassen, können die Beziehungen noch deutlicher hervorgehoben werden[30].

Bei der akustischen Wiedergabe der Beziehungen werden die Daten mithilfe eines Screen-Readers vorgelesen. Für diese Technik muss sich der Webentwickler Gedanken machen, wann und wie oft Spaltenüberschriften vorgelesen werden sollen. Sollen sie nur einmal vorgelesen werden oder vor jeder zugehörigen Datenzelle? Labels können dazu eingesetzt werden um zusätzliche Zelleninformationen anzugeben[30].

Mittels CSS kann das Erscheinungsbild eines Tabellenelementes festgelegt werden. Tabellenelemente nach dem Tabellenmodell von HTML 4.0 sind die Tabellen selbst, Überschriften, Zeilen, Zeilengruppen, Spalten, Spaltengruppen, Zellen, Tabellenbeschriftung, Tabellenkopf, Tabellenkörper sowie der Tabellenfuß[31].

Für die Darstellung einer Tabelle gibt es zwei verschiedene Algorithmen, für die sich die verschiedenen Browser entscheiden können. Entweder überlässt der Entwickler dem Browser die Auswahl des Algorithmus oder er gibt ihn über die CSS-Eigenschaft "Table-Layout" vor[32].

Ein sehr schneller Algorithmus ist das "Table-Layout: fixed;". Für die horizontale Ausrichtung der Tabelle ist die Breite der Tabelle selbst und nicht der Inhalt der einzelnen Zellen verantwortlich. Die Tabellenbreite errechnet sich aus der Summe der Spaltenbreiten, der angegebenen Abstände und den Rahmenbreiten. Sobald die erste vollständige Zeile an den Browser gesendet wurde, wird die Tabelle ausgerichtet. Die Breiten der nachfolgenden Zeilen haben somit keine Auswirkungen mehr auf das Tabellenlayout[33].

Beim "Table-Layout: auto;" hingegen haben alle Zellen der Tabelle einen Einfluss auf die Tabellenbreite. Somit kann der Browser erst mit dem Ausrichten der Tabelle beginnen, wenn die Tabelle komplett gesendet wurde. Es werden hierbei die minimalen und maximalen Spaltenbreiten ermittelt. Hierfür ist es ggf. notwendig, dass der Algorithmus die Tabelle mehrfach durchlaufen muss, was ihn im vergleich zum anderen Algorithmus sehr langsam macht. Eine explizite Angabe der Spaltenbreiten vor der ersten Zeile beschleunigt hingegen bei neueren Browsern das Ermitteln der Tabellenbreite. Ist der für die Tabelle zur Verfügung stehende Platz größer als die Summe aller Mindestbreiten, so wird der restliche Platz auf alle Spalten aufgeteilt. Die Tabelle wird jedoch nicht mehr Platz einnehmen, als die Summe aller maximalen Spaltenbreiten[34].

Für die Bestimmung der Tabellenhöhen gibt es ähnliche Algorithmen, auf die hier jedoch nicht näher eingegangen wird[35].

Abb. 1: Tabellen-Schichtenmodell
Abb. 1: Tabellen-Schichtenmodell

Bei der Gestaltung der Hintergründe für die einzelnen Tabellenelemente ist weiterhin zu beachten, dass jede Elementgruppe auf einer eigenen Schicht liegt. Damit der Hintergrund eines bestimmten Elementes also angezeigt werden kann, müssen alle darüber liegenden Elemente an dieser bestimmten Position durchsichtig sein[36](Vergleiche hierfür die Abbildung "Tabellen-Schichtenmodell").

5.3.1 Vorteile

Wenn Datenbeziehungen dargestellt werden müssen, sind Tabellen die erste Wahl. Dank der übersichtlichen optischen Gestaltung und der Möglichkeit, der Tabelle zusätzliche Informationen wie z.B. eine Zusammenfassung oder Labels, mitzugeben ist es auch für sehbehinderte Menschen möglich, den Inhalt und ihre Aussage zu erfassen.

5.3.2 Nachteile

Um eine Tabelle wirklich barrierefrei zu gestalten, bedarf es einigen Aufwandes. Mit der Definition der Zeilen und Zellen ist es leider nicht getan. Es sollte immer eine Zusammenfassung der Tabelle geschrieben werden und es sind Angaben notwendig wann und wie die Überschriften gelesen werden sollen.

5.3.3 Fazit

Eine Tabelle ist eigentlich nicht mit den zuvor genannten Techniken zu vergleichen. Sie dient einem völlig anderen Zweck. Die zuvor genannten Techniken sind dazu da, um Webseiten auszurichten und zu designen. Eine Tabelle hingegen dient nur dazu, um Daten einander gegenüber zu stellen. Standardkonformes Arbeiten mit (X)HTML verbietet folglich das Webseitenlayout mit Hilfe von Tabellen.

In den Anfangszeiten des HTML gab es jedoch erst wenige Möglichkeiten eine Webseite in optische Bereiche einzuteilen[37]. Daher wurde früher eine Tabelle gerne als "Layoutwerkzeug missbraucht"[37] Auch heute verwenden leider noch viele Webdesigner diese Technik, um ihre Seiten auszurichten. Abgesehen davon, dass sie hiermit gegen Standards verstoßen und dieses Element zweckentfremden, handeln sich diese Leute ein weiteres nicht zu verachtendes Problem ein: Ein Tabellenlayout mag zwar schnell erstellt sein, jedoch ist eine spätere Überarbeitung dieses Designs mit erheblichem Aufwand verbunden.

6 Theorie und Praxis

Nachdem auf die Theorie der einzelnen Techniken eingegangen wurde, sollen jetzt einige Aspekte erwähnt werden, die erst beim Programmieren von Bedeutung sind.

Eine sehr häufige Anforderung an eine Webseite ist es, dass Kopf- und Navigationsleisten immer zu sehen sind, während sich der Inhalt beliebig nach oben und unten bewegen kann. Um diese Aufgabe zu bewältigen, kann man sich entscheiden, ob man Frames oder DIVs einsetzt.

Abb. 2: Seitenlayout mit Frames
Abb. 2: Seitenlayout mit Frames

Am schnellsten lässt sich dies wohl mit Frames realisieren. Das Layout einer Webseite lässt sich durch das Frameset in einer tabellenartigen Struktur vorgegeben und die Inhalte der einzelnen Frames lassen sich individuell bestimmen. Es lässt sich ferner beeinflussen, ob in einem Frame die Scrollbalken angezeigt werden dürfen oder nicht. Auf diese Weise ändert sich beim Scrollen immer nur ein bestimmter Fensterbereich.

Abb. 3: Seitenlayout mit DIVs - fehlerhafte Darstellung
Abb. 3: Seitenlayout mit DIVs - fehlerhafte Darstellung

Alternativ kann auch versucht werden, die Anforderung mit DIVs zu lösen. Es lässt sich jedoch leider recht schnell feststellen, dass dem CSS-Design noch einige Grenzen auferlegt sind. Es ist an sich kein Problem, beispielsweise drei DIVs (Kopf-, Navigation- und Inhalts-DIV) so auf der Seite zu positionieren, dass die Kopfzeile die komplette Breite des Fensters einnimmt und sich darunter links die Navigation und rechts der Inhalt den Platz teilen. Es reicht hierfür allerdings nicht aus, die jeweiligen Positions- und Höhenangaben (100%) der DIVs einzutragen und anzugeben, dass das Inhalts-DIV bei einem zu großen Inhalt scrollen soll. Im Gegenteil, es scheint so, als hätten weder die Höhenangaben noch dementsprechend das overflow-Attribut (beschreibt die Scrolleigenschaften eines Elementes) eine Wirkung auf das Aussehen.

Abb. 4: Seitenlayout mit DIVs - korrekte Darstellung
Abb. 4: Seitenlayout mit DIVs - korrekte Darstellung

Der gewünschte Effekt, dass die Navigation und der Inhalt die gleiche Größe haben lässt sich erst durch eine explizite Höhenangabe des <HTML> und des <BODY> auf 100% erreichen.

Es scheint so, als hätten die Frames folglich mit dieser Aufgabenstellung weniger Probleme als DIVs. Jedoch haben auch sie, neben den im Kapitel 3.2.2 beschriebenen Nachteilen, noch weitere Schwierigkeiten. Eine von ihnen ist die Verwendung einer Navigation mit ausklappbaren Unterpunkten. Soll beispielsweise ein Menüpunkt sowohl das Fenster für den Inhalt als auch die Navigationsansicht verändern (durch ein oder ausklappen der Unterpunkte), so steht man vor einem Problem. Ein (X)HTML Link kann nur dazu verwendet werden auf eine Zielseite zu verweisen. Wie aber wird die zweite Seite aktualisiert? Diese Anforderung lässt sich wahrscheinlich nur mit einer JavaScript-Funktion umsetzen, die es dann ihrerseits übernimmt, die zwei Seiten zu aktualisieren. Es sollte hierbei jedoch wieder bedacht werden, dass nicht alle Browser JavaScript unterstützen oder diese Funktionalität ausgeschaltet sein kann.

Als weitere Herausforderung an den Webentwickler zeigt sich der Wunsch nach relativen Positionsangaben. Grundsätzlich ist es immer besser, keine pixelgenauen Positionsangaben, sondern relative Größenangaben in Bezug auf die Fenster- oder gewählte Schriftgröße zu verwenden. Dadurch soll sichergestellt werden, dass die Seite von diesen beiden dynamischen Merkmalen unabhängig möglichst optimal dargestellt wird. Doch sobald die fixen Ausmaße z.B. eines Bildes berücksichtigt werden müssen, entsteht die nächste CSS-Hürde. Die Schwierigkeit besteht nun darin, relative Positionsangaben mit fixen Angaben zu verknüpfen. Bei einem Layout, welches aus DIVs auf unterschiedlichen Ebenen besteht, ist es nahezu unmöglich, Angaben wie die Folgende zu machen: Das Kopf-DIV befindet sich ganz oben auf der Seite und ist wie das darin befindliche Bild 50 Pixel hoch. Darunter kommt die Navigationszeile, welche 2 em[38] hoch ist. Das Inhalts-DIV muss also an der Position 50 px[39] plus 2 em beginnen.

Ist das Design jedoch einmal komplett nur mit CSS Angaben erstellt, so besteht nun der Vorteil, dass man später bei eventuellen Neugestaltungen des Layouts fast komplett von der HTML Struktur unabhängig ist.

Zum Abschluss dieses Kapitels sollen noch ein paar Screenshots zeigen, wie unterschiedlich die verschiedenen Browser einige Seiten interpretieren und darstellen. Angezeigt wurden die verschiedenen Webseiten mit dem Firefox 3 und dem Internet Explorer 7. Die zugrunde liegenden Webseiten gehören zum Buch CSS Mastery und wurden von der Webseite http://www.friendsofed.com heruntergeladen.

Abb. 5: Fehlerhafte Textanzeige
Abb. 5: Fehlerhafte Textanzeige
Abb. 6: 2. Fehlerhafte Textanzeige
Abb. 6: 2. Fehlerhafte Textanzeige
Abb. 7: Unterschiedliche Hintergrunddarstellung
Abb. 7: Unterschiedliche Hintergrunddarstellung
Abb. 8: Positionierung und Hintergrunddarstellung
Abb. 8: Positionierung und Hintergrunddarstellung
Abb. 9: Positionierungsunterschiede
Abb. 9: Positionierungsunterschiede
Abb. 10: Unterschiedliche DIV Positionen
Abb. 10: Unterschiedliche DIV Positionen

7 Fazit

Welche Technik soll nun zur Gestaltung einer Webseite eingesetzt werden? - Dies war die zentrale Frage dieser Hausarbeit.

Nach den obigen Ausführungen, komme ich zu dem Schluss, dass nur die DIV-Technologie für die Erstellung eines Seitenlayouts in Frage kommt.

Wie bereits erwähnt, dienen Tabellen lediglich dem Zweck, Beziehungen zwischen Daten darzustellen. Zu den Anfängen des Internets mag es noch notwendig gewesen sein, Elemente mit Hilfe einer Tabelle auf einer Seite zu positionieren. Allerdings sind diese Zeiten vorbei und es stehen den Webentwicklern nun andere Möglichkeiten für diesen Zweck zur Verfügung.

Eine dieser anderen Möglichkeiten ist die Frame-Technologie. Aber auch von ihrer Verwendung ist auf Grundlage der geschilderten Informationen eher abzuraten. Abgesehen davon, dass eine mit Frames gestaltete Seite nur sehr schwer barrierefrei gestaltet werden kann, hat sie sowohl für den Entwickler als auch für die Besucher einige Nachteile. Der Entwickler hat die Aufgabe, die Seite auch für Browser zugänglich zu machen, die keine Frames unterstützen. Somit hat er doppelte Arbeit, da er nun die gleiche Seite noch einmal ohne Frames gestalten muss. Ein weiteres Ziel eines Webentwicklers ist es, dass eine Seite über Suchmaschinenen gefunden und besucht werden kann. Das Suchen funktioniert zwar meist, aber leider sind die Suchmaschinen nur in der Lage auf eine (X)HTML-Seite eines Frames zu verweisen. Es entsteht folglich die Gefahr, dass Benutzer nicht die gesamte Seite zu sehen bekommen. Besonders fatal ist dies, wenn sich die Navigation in einem anderen, nun nicht angezeigtem Frame befindet. Weitere Nachteile für den Benutzer sind, dass er sich keine Lesezeichen auf Unterseiten machen kann und dass es schwer möglich ist, eine komplette Seite und nicht nur den aktuellen Frame zu drucken.

Die DIV-Technik ist demzufolge eindeutig den anderen Verfahrensweisen vorzuziehen. Sie unterstützt die Trennung von Inhalt und Darstellung, entspricht den aktuellen Web-Standards und ist eine Grundlage für Barrierefreiheit. Aber auch diese Technik hat leider einige Schwachstellen; die wohl größte ist, dass zurzeit noch nicht alle Browser die aktuellen Standards unterstützten und infolgedessen eine Seite in verschiedenen Browsern unterschiedlich aussehen kann (siehe Abb. 5 -10).

8 Fußnoten

  1. ↑ Vgl. Hellbusch, Jan E.
  2. ↑ Vgl. Vgl. Hellbusch / Mayer S. 5f.
  3. ↑ Vgl. Deutsche Behindertenhilfe - Aktion Mensch e.V. (2006), Abschnitt Was ist EfA
  4. ↑ Vgl. Chisholm / Vanderheiden / Jacobs (1999), Abschnitt: Themes
  5. ↑ Vgl. Chisholm / Vanderheiden / Jacobs (1999), Abschnitt: Context and orientation
  6. ↑ 6,0 6,1 6,2 6,3 6,4 Vgl. Chisholm / Vanderheiden / Jacobs (1999), Abschnitt: Transform gracefully
  7. ↑ Vgl. Rabe, Michael (2)
  8. ↑ Vgl. Frütel, Thomas (2009)
  9. ↑ 9,0 9,1 Vgl.Beck, Sascha A.(2006)
  10. ↑ Hardware, die die am Bildschirm dargestellten Zeichen für Blinde in Blindenschrift umwandelt.
  11. ↑ 11,0 11,1 Vgl. Rabe, Michael
  12. ↑ 12,0 12,1 Vgl. Budd/Moll/Collison, S. 3
  13. ↑ Vgl. Budd/Moll/Collison, S. 2f.
  14. ↑ 14,0 14,1 14,2 Vgl. SELFHTML e.V.
  15. ↑ 15,0 15,1 15,2 Vgl. Frütel, Thomas (2009)
  16. ↑ Vgl. Budd/Moll/Collison S. 7
  17. ↑ Vgl. Budd/Moll/Collison S. 8
  18. ↑ Vgl. Kyrnin, Jennifer
  19. ↑ Acid 1 Test, Acid 2 Test, Acid 3 Test
  20. ↑ Vgl.Quinn, Liam
  21. ↑ Derzeit aktuell ist XHTML 1.0, welcher auf dem HTML 4 Standard aufsetzt.
  22. ↑ Aktuell ist CSS 2.1
  23. ↑ Vgl. W3C (2), Abschnitt: h-16.1
  24. ↑ 24,0 24,1 24,2 Vgl. Hobo-Web LTD
  25. ↑ Vgl. W3C (2), Abschnitt: h-16.5
  26. ↑ Vgl. W3Schools
  27. ↑ Vgl. Walser, Walter B.
  28. ↑ 28,0 28,1 Vgl. Römeling, Nils
  29. ↑ Vgl. W3C (2), Abschnitt: h-16.3
  30. ↑ 30,0 30,1 30,2 Vgl. W3C, Abschnitt: q1
  31. ↑ Vgl. W3C
  32. ↑ Vgl. W3C, Abschnitt: width-layout
  33. ↑ Vgl. W3C, Abschnitt: fixed-table-layout
  34. ↑ Vgl. W3C, Abschnitt: auto-table-layout
  35. ↑ Vgl. W3C, Abschnitt: height-layout
  36. ↑ Vgl. W3C, Abschnitt: table-layers
  37. ↑ 37,0 37,1 Vgl. Budd/Cameron/Collinson, S. 2
  38. ↑ em ist eine Größenangabe, welche relativ zur Schriftgröße ist.
  39. ↑ px ist eine Größenangabe, welche relativ zur Bildschirmauflösung ist.

9 Literatur- und Quellenverzeichnis

Beck, Sascha A.(2006) Beck, Sascha A.(2006): Browserkrieg - Microsoft gegen Netscape, http://server02.is.uni-sb.de/courses/ident/kontroverses/browserkrieg/, 09.10.2006, abgerufen am 04.02.2009
Bos, Bert (2009) Bos, Bert (2009): Cascading Style Sheets, http://www.w3.org/Style/CSS/, 23.01.2009, abgerufen am 27.01.2009
Bos / Çelik / Hickson / Lie (2007) Bos, Bert; Çelik, Tantek; Hickson, Ian; Lie, Håkon Wium (2007): Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, http://www.w3.org/TR/CSS21/,19.07.2007, abgerufen am 27.01.2009
Bos / Çelik / Hickson / Lie (2007) (2) Bos, Bert; Çelik, Tantek; Hickson, Ian; Lie, Håkon Wium (2007): 1 About the CSS 2.1 Specification, http://www.w3.org/TR/CSS21/about.html,19.07.2007, abgerufen am 27.01.2009
Budd / Moll/ Collinson (2007) Budd, Andy; Moll, Camaron; Collinson, Simon (2007):CSS Mastery - Webdesign für Fortgeschrittene, Addison-Wesley, München 2007
Chisholm / Vanderheiden / Jacobs (1999) Chisholm, Wendy; Vanderheiden, Gregg; Jacobs, Ian (1999) : Web Content Accessibility Guidelines 1.0, http://www.w3.org/TR/WCAG10, abgerufen am 01.02.2009
c't extra Webdesign (2009, Ausgabe 01) Braun, Herbert: Stilspaltereien - Mehrspaltige Webseiten-Layouts mit CSS, in: c't extra 01/2009 Webdesign, S.66 ff.
Deutsche Behindertenhilfe - Aktion Mensch e.V. (2006) Deutsche Behindertenhilfe - Aktion Mensch e.V.(2006): Einfach für alle, http://www.einfach-fuer-alle.de/faq/, 20.09.2006, abgerufen am 01.02.2009
Frütel, Thomas (2009) Frütel, Thomas (2009): Standards im Webdesign, http://www.fruetel.de/webdesign-standards.html, abgerufen am 04.02.2009
Hellbusch, Jan E. Hellbusch, Jan E.: Das Web und die Zugänglichkeit, http://www.barrierefreies-webdesign.de, abgerufen am 28.10.2008
Hellbusch / Mayer (2007) Hellbusch, Jan E.; Mayer, Thomas (2007): Barrierefreies Webdesign, 5. Aufl., KnowWare, 2007
Hobo-Web LTD o.V. : Don't Use Frames To Design Your Website, http://www.hobo-web.co.uk/tips/41.htm, abgerufen am 27.01.2009
Hybrid GmbH o.V. : Was bedeutet W3C Validierung?, http://www.hybrid.de/wissen/wissen036.htm, abgerufen am 27.01.2009
Kyrnin, Jennifer Kyrnin, Jennifer: Using the DIV Tag, http://webdesign.about.com/od/htmltags/qt/tipdivtag.htm, abgerufen am 05.10.2008
Rabe, Michael Rabe, Michael: Web-Standards, http://www.michael-rabe.de/webdesign-glossar/web-standards.html, abgerufen am 04.02.2009
Rabe, Michael (2) Rabe, Michael: Webdesign in XHTML nach W3C-Standard validiert, http://www.michael-rabe.de/wissenswertes/w3c-web-standards.html, abgerufen am 04.02.2009
Römeling, Nils Römeling, Nils: Usability Diplomarbeit, http://www.usability-diplomarbeit.de/42-frames/, abgerufen am 08.02.2009
Schäfer / Schlegel / Skop / Turski Schäfer, Mathias; Schlegel, Jonathan; Skop, Roland; Turski, Ingo (siehe): Guter HTML-Stil, http://de.selfhtml.org/html/allgemein/stil.htm, abgerufen am 29.01.2009
Schulz, Ralph G. (2006) Schulz, Ralph G.(2006): Webstandards versus Barrierefreiheit, http://www.webkrauts.de/2006/08/30/webstandards-versus-barrierefreiheit/, 30.08.2006, abgerufen am 27.01.2009
SELFHTML e.V. o.V.: Unterschiede zwischen XHTML und HTML, http://de.selfhtml.org/html/xhtml/unterschiede.htm, 2007, abgerufen am 04.02.2009
Quinn, Liam Quinn, Liam: DIV - Generic Block-level Container, http://htmlhelp.com/reference/html40/block/div.htm, abgerufen am 08.02.2009
W3C o.V.: Tables, http://www.w3.org/TR/CSS2/tables.html, abgerufen am 20.11.2008
W3C (2) o.V.: Frames, http://www.w3.org/TR/REC-html40/present/frames.html, abgerufen am 20.11.2008
W3Schools o.V.: HTML Frames, http://www.w3schools.com/HTML/html_frames.asp, abgerufen am 08.02.2009
Walser, Walter B. Walser, Walter B.: Frames: Vor- und Nachteile, http://www.kundennutzen.ch/frames.php, abgerufen am 27.01.2009
Walser, Walter B. (2) Walser, Walter B.: Warum Websites W3C-kompatibel sein sollten, http://www.kundennutzen.ch/w3c.php, abgerufen am 27.01.2009
Zeldman, Jeffrey (2007) Zeldman, Jeffrey (2007): Webdesign mit Webstandards – Grenzenlos kompatibel, 2. Auflage, Addison-Wesley, München 2007
Von „http://winfwiki.wi-fom.de/index.php/Aspekte_der_Webseitengestaltung_bei_den_Layouttechnologien_CSS_Div%2C_HTML-Tabelle_und_HTML-Frame“
Persönliche Werkzeuge