Webdesign - Netzmafia

Webdesign

Webdesign
Table of Contents
Webdesign...................................................................................................................................1
Webdesign...............................................................................................................................................1
Inhalt............................................................................................................................................1
Einführung............................................................................................................................1
Grundlagen Bildverarbeitung................................................................................................1
Bildbearbeitung.....................................................................................................................1
Video und VRML.................................................................................................................1
WWW-Dokumente gestalten................................................................................................2
Interaktion, Sucherheit, Design-Regeln................................................................................2
Skript-Sprachen.....................................................................................................................2
Anhang..................................................................................................................................2
Webdesign.............................................................................................................................3
Einführung..............................................................................................................................................3
Hypertext und Hypermedia.........................................................................................................3
Das World Wide Web?................................................................................................................4
Inhaltliche Aspekte......................................................................................................................4
Textgestaltung (Schreiben)...................................................................................................4
Grafikgestaltung (Illustrieren)..............................................................................................4
Animationen..........................................................................................................................5
Akustische Informationen.....................................................................................................5
Interaktion.............................................................................................................................6
Software für Multimedia-Designer.......................................................................................6
Zielgruppe definieren............................................................................................................7
Web 2.0.................................................................................................................................9
Webdesign...........................................................................................................................10
Grundlagen Bildverarbeitung.............................................................................................................10
Bilddaten....................................................................................................................................10
Grundlegendes....................................................................................................................13
Farbdarstellung..........................................................................................................................13
Farbensehen beim Menschen..............................................................................................15
Farb-Kontraste....................................................................................................................15
Farb-Perspektive.................................................................................................................16
Farb-Wirkung......................................................................................................................17
Farbmodelle........................................................................................................................21
Gradation.............................................................................................................................22
Gamma-Korrektur...............................................................................................................23
Dithering.............................................................................................................................24
Betrachten wir nun einige Dithermöglichkeiten:................................................................26
Bildkompressionsverfahren.......................................................................................................26
Verlustfreie Kompression...................................................................................................29
Verlustbehaftete Kompression............................................................................................36
Grafikformate............................................................................................................................36
BMP....................................................................................................................................37
GIF......................................................................................................................................39
JPG......................................................................................................................................39
PCX.....................................................................................................................................41
TIFF....................................................................................................................................42
Webdesign...........................................................................................................................43
i

Webdesign
Table of Contents
Bildbearbeitung....................................................................................................................................43
Erste Schritte.............................................................................................................................43
Wo bekommt man Bilder her?............................................................................................46
Bildbearbeitung...................................................................................................................48
Weitere Funktionen von Paint-Programmen......................................................................50
Weitere Effekte..........................................................................................................................50
Farbe und Spezialeffekte.....................................................................................................52
Progressive und transparente Bilder..........................................................................................52
Progressive, transparente und animierte GIFs....................................................................54
Bildbearbeitung für Webseiten..................................................................................................54
Die wichtigsten Bedienungselemente von Paintshop.........................................................54
Die Werkzeugleiste von Paintshop.....................................................................................55
Die Werkzeugpalette von Paintshop...................................................................................56
Die Farbpalette von Paintshop............................................................................................57
Grafiken selbst erstellen............................................................................................................58
Zuschneiden der Grafik.......................................................................................................58
Grafiken nachbearbeiten mit Paintshop..............................................................................62
Wie man einen Button macht..............................................................................................63
Gedückt oder nicht?............................................................................................................63
Wie man eine Schrift mit Schatten macht...........................................................................64
Wie man ein Photo "ins Bild" setzt.....................................................................................66
Farbverläufe........................................................................................................................68
Sitemap-Grafiken................................................................................................................69
Tips für Bilder auf Webseiten.............................................................................................69
Webdesign...........................................................................................................................70
Video und VRML.................................................................................................................................70
Videodaten.................................................................................................................................70
AVI-Format von Microsoft.................................................................................................72
MPEG.................................................................................................................................79
Virtual Reality: VRML..............................................................................................................80
Beispiel...............................................................................................................................80
Webdesign...........................................................................................................................81
WWW-Dokumente gestalten...............................................................................................................81
Aufbau von HTML-Dokumenten..............................................................................................82
Der Dokumententyp............................................................................................................83
Was ist ein URL?................................................................................................................84
Browser...............................................................................................................................85
Verschiedene Strukturelemente.................................................................................................85
Überschriften.......................................................................................................................85
Kommentare........................................................................................................................85
Zeilenumbruch....................................................................................................................85
Absatz.................................................................................................................................85
Waagrechte Trennlinie........................................................................................................87
Überschrift Ebene 1..............................................................................................................................87
Überschrift Ebene 2, align=right...............................................................................................87
Überschrift Ebene 3, align=left...........................................................................................87
Vorformatierter Text...........................................................................................................87
Einrückungen, längere Zitate..............................................................................................87
Verschiedene Schriftarten...................................................................................................88
ii

Webdesign
Table of Contents
Überschrift Ebene 1
Listen...................................................................................................................................89
Links zu anderen Dokumenten...........................................................................................91
Sonderzeichen............................................................................................................................91
Sounds und anderes...................................................................................................................92
Farbe..........................................................................................................................................94
Font-Spielereien..................................................................................................................95
Tabellen.....................................................................................................................................96
Geschachtelte Tabelle mit gedehnten Zellen...........................................................................100
Bilder.......................................................................................................................................100
Eine Fehlermeldung?.......................................................................................................104
Aufzählungen....................................................................................................................104
Bildbeschreibung..............................................................................................................104
Der Trick mit dem blinden GIF........................................................................................104
Hintergrund-Bilder............................................................................................................105
Frames.....................................................................................................................................105
Frame-Sets definieren Mehrere zusammengehörige Frames bilden ein Frame-Set.
Ein Frame-Set definieren Sie anstelle des herkömmlichen BODY-Tags. Wenn
Sie in einer HTML-Datei ein Frame-Set definieren, sieht das Grundgerüst der
Datei folgendermaßen aus:........................................................................................106
Anzeigefenster aufsplitten mit Frame-Sets.......................................................................107
Frames definieren..............................................................................................................108
Eigenschaften von Frames definieren...............................................................................109
Namen von Frames definieren..........................................................................................110
Links, die das Frame-Set beenden....................................................................................111
Sinnvolle Einsatzmöglichkeiten für Frames....................................................................112
Schaufenster-Effekte.........................................................................................................113
Frames und Gestaltung.....................................................................................................114
Üble Tricks........................................................................................................................114
Inline Frames....................................................................................................................116
CSS Style-Sheets.....................................................................................................................117
Style-Sheets in HTML einbinden.....................................................................................118
Style-Sheets definieren.....................................................................................................121
Style-Sheet-Angaben........................................................................................................122
5.10 Automatischer Seitenwechsel oder Dia-Shows........................................................123
5.11 XML - Extensible Markup Language.......................................................................127
Webdesign.........................................................................................................................128
Interaktion, Sicherheit, Design-Regeln.............................................................................................128
Interaktion mit dem Benutzer..................................................................................................128
Image-Maps (ISMAP, und USEMAP)...............................................................131
Formulare und CGI-Programme am Server (Common Gateway Interface).....................131
Zugriffe zählen..................................................................................................................132
Formulare..........................................................................................................................135
Mailto Deluxe...................................................................................................................136
Client- und Servertechnik........................................................................................................136
Definitionen......................................................................................................................136
Return-Codes eines WWW-Servers.................................................................................137
Cookies....................................................................................................................................138
Die Datei robots.txt.................................................................................................................139
Wie ist robots.txt aufgebaut?............................................................................................139
Geschützte Bereiche................................................................................................................139
iii

Webdesign
Table of Contents
Interaktion, Sicherheit, Design-Regeln
Wie .htaccess funktioniert.................................................................................................143
HTML-Editoren.......................................................................................................................144
Design-Regeln.........................................................................................................................145
Empfehlungen für das Gestalten von HTML-Seiten.......................................................145
Aktualität..........................................................................................................................145
Versprechen Sie nichts, was Sie nicht halten können......................................................146
Bunt und zappelig............................................................................................................146
Bilder................................................................................................................................147
Frames..............................................................................................................................147
Farben..............................................................................................................................147
Bewahre uns vor Plug-ins................................................................................................148
Nutzlose Applets..............................................................................................................148
Testen Sie Ihre Homepage...............................................................................................148
Suchmaschinen........................................................................................................................148
Keywords..........................................................................................................................150
Meta-Tags.........................................................................................................................151
Seitentitel und -text...........................................................................................................152
Optimieren Ihrer Seite.......................................................................................................152
Spamindexing...................................................................................................................153
Webdesign.........................................................................................................................154
Skript-Sprachen..................................................................................................................................154
Java..........................................................................................................................................154
Java ist objektorientiert.....................................................................................................155
Wichtige Eigenschaften von Java.....................................................................................155
Java ist architekturunabhängig und portabel.....................................................................155
Java ist robust....................................................................................................................156
Java ist multithreaded.......................................................................................................156
Java hat einen Garbage Collector.....................................................................................156
Java ist sicher....................................................................................................................157
Active-X..................................................................................................................................157
Was ist Active-X?.............................................................................................................159
Gefahren von Active-X.....................................................................................................159
JavaScript................................................................................................................................159
Copyright © FH München, FB 04, Prof. Jürgen Plate......................................................160
Webdesign.........................................................................................................................161
Anhang.................................................................................................................................................161
Literatur zur Grafik..................................................................................................................161
Literatur zu HTML...........................................................................................................161
Deutschsprachige HTML-Beschreibungen im Netz.........................................................162
"Multimedia im Internet....................................................................................................163
Links für Webmaster.........................................................................................................................163
Verzeichnisse...........................................................................................................................163
HTML-Editoren- und Tools..............................................................................................163
Banner, Grafiken, Layout.................................................................................................164
CGI, Javascripts, Chats, Foren, Inhalte, etc......................................................................164
Site-Management..............................................................................................................165
E-Mail-Adressen...............................................................................................................166
iv

Webdesign
Table of Contents
Standard-216-Farben-Tabelle..........................................................................................................title
v

Inhalt
1.
2.
3.
4.
5.
Einführung
1. Hypertext und Hypermedia
2. Das World Wide Web
3. Inhaltliche Aspekte
Webdesign
Grundlagen Bildverarbeitung
1. Bildaten
2. Farbdarstellung
3. Bildkompressionsverfahren
4. Grafikformate
Bildbearbeitung
1. Erste Schritte
2. Weitere Effekte
3. Progressive und transparente Bilder
4. Bildbearbeitung für Webseiten
Video und VRML
1. Videodaten
2. Virtual Reality: VRML
WWW-Dokumente gestalten
1. Aufbau von HTML-Dokumenten
2. Verschiedene Strukturelemente
3. Sonderzeichen
4. Sounds und anderes
5. Farbe
6. Tabellen
7. Bilder
8. Frames
Webdesign 1

6.
7.
8.
9. CSS
10. Automatischer Seitenwechsel oder Dia-Shows
11. XML - Extensible Markup Language
Interaktion, Sucherheit, Design-Regeln
1. Interaktion mit dem Benutzer
2. Client- und Servertechnik
3. Cookies
4. Die Datei robots.txt
5. Geschützte Bereiche
6. HTML-Editoren
7. Design-Regeln
8. Suchmaschinen
Skript-Sprachen
1. Clientseitige Interaktion: JAVA
2. Clientseitige Interaktion: ActiveX
3. Clientseitige Interaktion: JavaScript
4. Serverseitige Interaktion: CGI mit Perl
Anhang
1. Literaturverzeichnis
2. HTML-Tabelle
3. Frame-Beispiel
4. Farbtabelle als HTML-Datei
5. Farbtabelle als GIF-Datei
6. Farbspektrum als HTML-Datei
7. Links für Webmaster
9. Skript als PDF (aus HTML konvertiert)
10. Download des gesamten Skripts
Copyright © FH München, FB 04, Prof. Jürgen Plate
Letzte Aktualisierung: 28. Apr 2012
Webdesign
Webdesign
von Prof. Jürgen Plate
WWW-Dokumente gestalten 2

Einführung
Hypertext und Hypermedia
Schon 1969 stellten in den USA Nelson und Van Dam eine Hypertext-Editor vor, 1976 wurde der
Begriff 'Multiple Media' geprägt, aber erst ca. 1991 ging es richtig los mit dem Apple Multimedia Lab
und dem MIT Media Lab.
Hypertext ist ein Text, der Verweise zu anderen Texten enthät - wie wir es von einem Lexikon her
kennen. Hypertext ist daher nicht-linear, denn man kann zwischen den Texten herumspringen.
Insbesondere für kontextabhängige Hilfesysteme und Online-Handbücher wird Hypertext schon lange
eingesetzt. Das DOS- oder Windows-Hilfesystem ist ein Hypertextsystem.
Hypermedia ist nicht auf Text beschränkt. Hypermedia-Dokumente können andere Medien enthalten,
z. B. Diagramme und Bilder. Dabei gibt es keine Beschränkung auf statische Medien, sondern auch
Sounds, Musik, Animationen und Videoseqenzen lassen sich einbinden. Das World Wide Web ist das
beste Beispiel für Hypermedia.
Das World Wide Web?
Der Ursprung des WWW begann Anfang 1989 am CERN, dem Europäischen Zentrum für
Teilchenphysik bei Genf. Ausgangspunkt war die Entwichlung eines Systems, das den Angehörigen
des CERN erlaubte, in der Vielfalt der vorhandenen Daten auf einfache Art und Weise zu navigieren.
Die Inkompatibilität der vorhandenen Hard- und Software machte das Auffinden relevanter
Information innerhalb der Organisation nahezu unmöglich. Als Lösung dieses Problems wurde von
Tim Berners-Lee und Robert Cailliau ein auf Client/Server Architektur aufbauendes,
hypertextbasiertes System vorgeschlagen, das auf SGML basierte (SGML = Standard Generalized
Markup Language).
Der ISO-Standard definiert SGML als "eine Sprache für Dokumentenrepräsentation, welche Markup
formalisiert und von System- und Verarbeitungsabhängigkeiten löst". SGML erlaubt den Austausch
von großen und komplexen Datenmengen und vereinfacht den Zugriff auf diese. Zusätzlich zu den
Möglichkeiten des deskriptiven Markups benutzen SGML-Systeme ein Dokumentenmodell, welches
die Überprüfung der Gültigkeit eines Textelements in einem bestimmten Kontext erlaubt. Weiterhin
enthält SGML Techniken, die folgendes erlauben:
• Zusammenbindung von Dateien zu einem zusammenhängenden Dokument,
• Einbindung von Illustrationen und Tabellen in Textdateien,
• Erzeugen von mehreren Versionen eines Dokuments in einer einzigen Datei,
• Hinzufügen von Kommentaren in die Datei,
• Kreuzreferenzen
• und vieles mehr
Bei SGML handelt es sich nicht um eine vordefinierte Menge von Textauszeichnungen, sogenannten
'Tags', zum Markieren von Textpassagen. SGML beschreibt nicht das Aussehen des Textes, sondern
sein strukturelles Aussehen. HTML ist eine Untermenge von SGML.
Der grundlegende Aufbau des World Wide Web unterscheidet sich in keiner Weise von anderen
Internet-Diensten. Dokumente auf Servern werden in einem bestimmten Format, im Falle von WWW
dem HyperText-Format HTML, abgespeichert. Mittels geeigneter Clients, im HyperText-Jargon auch
Browser genannt, wird auf Information zugegriffen, die auf dem Server vorhanden ist. Client und
Server verständigen sich untereinander über das HTTP-Protokoll.
Einführung 3

HTML (Hypertext Markup Language) ist also ein Format zur Darstellung von Informationen aller Art,
unabhängig vom verwendeten Betriebssystem oder Rechner.
Inhaltliche Aspekte
Am wichtigsten ist die Vorüberlegung, in der festgelegt wird, welche Inhalte transportiert werden
sollen.
Textgestaltung (Schreiben)
• Denken Sie an Ihre Zielgruppe. Schreiben Sie so, daß ihre Informationen für diese Zielgruppe
passend aufbereitet werden. Das betrifft sowohl Inhalt, als auch den Stil der Datstellung.
• Schreiben Sie so einfach und verständlich wie möglich. Bei Fachausdrücken sollte z. B. beim
ersten Auftreten eine kurze Erklärung dabei sein. Jede Abkürzung darf erst verwendet werden,
wenn die Langfassung aufgeführt wurde.
• Illustrieren Sie komplexe Sachverhalte und beschreiben Sie diese auf verschiedene Art und
Weise.
• Denken Sie an gegenseitige Beziehungen einzelner Teile des Inhaltes. Stellen Sie
Verknüpfungen und Querverbindungen her.
Die Zeit, die der Text dargeboten wird läßt sich sich nach folgender Faustregen abschätzen: Zweimal
langsam leise vorlesen.
Grafikgestaltung (Illustrieren)
• Ein Bild sagt mehr als 1000 Worte (alt, aber gut)
• Erzeugen Sie eigene Bilder (selbst malen, scannen, Photo-CD, Bildersammlungen
durchsuchen und Bilder modifizieren)
• Vermeiden Sie unnötige Bilder, also solche, die zum Verständnis des Inhalts nichts beitragen
• Verwenden Sie eine konsistente Farbgestaltung, z. B. für Hintergründe, Texte, u.s.w.
Verwenden Sie Farbschemata, z. B. nur Pastelltöne, nur Erdfarben, nur Metallicfarben oder
nur Neontöne.
• Verwenden Sie ein einheitliches Layout (Schriftart, -größe) und nicht zuviele verschiedene
Schriftarten. Ein Buch kommt z. B. mit zwei bis drei Schriftfamilien aus.
Animationen
Webdesign
• Typen von Animationen
♦ Trickfilm (Character Animation): Man verleiht einem Objekt menschliche Züge. Man
kann so einer Zahnbürste, einem Auto, einer Bohrmaschine, einem Spielzeug etc.
'Leben' verleihen. Beim Entwurf des Characters sind zu beachten:
◊ Emotionen (glücklich, spassig, traurig, uninteressiert, ...)
◊ Bewegung (schnell, langsam, tolpatschig, ...)
◊ Erscheinung (muß zum Stil des Gesamtwerks passen)
◊ Copyright (Micky Maus nur verwenden, wenn man die Erlaubnis von Disney
hat)
♦ Hervorhebungen: Ein wichtiges Wort zoomt aus dem Text heraus, ein Logo bewegt
sich, etc.
♦ Bewegter Text: Die Schrift erscheint z. B. Zeichen für Zeichen als würde sie getippt,
ein Wort pulsiert, Laufschrift, Textblöcke 'poppen' aus dem Hintergrund, etc.
Aber Vorsicht: Laufschriften oder andere Schrifteffekte machen den Text leicht
unlesbar. Also nur in Ausnahmefällen verwenden.
Das World Wide Web? 4

♦ Video: Digitalisierte Videos sind oft beeindruckender als Photos und meist auch
leichter herzistellen als Trickfilme. Sie benötigen jedoch sehr viel Speicherplatz. Für
den Schnitt benötigt man meist spezielle Hard- oder Software.
• Wann soll man animieren? Animationen sollten - wie letztlich auch Bilder - nicht ohne
triftigen Grund auftauchen. Nur 'Zappeln um des zappelns willen' ist schlecht.
♦ Emotionen verstärken
♦ Darstellungen von Handlungen (z. B. Zusammenbau eines Gerätes)
♦ Hervorheben von Informationen
♦ Zeitabläfe anzeigen ('Fortschrittsbalken', Sanduhr, etc.)
♦ Übergang zum nächsten Kapitel oder Abschnitt, z. B. Auf- und abblenden,
Wischblenden, Überblendungen, Schnitt.
Sorgen Sie am Ende des Videos für eine kurze 'Ausklingzeit', eine Pause von einigen Sekunden, in der
sich der Betracher wieder sammeln kann.
Akustische Informationen
• Musik: Sie dient der Untermalung der dargestellten Bilder und Texte und kann auch
bestimmte Stimmungen und Emotionen hervorrufen.
• Geräuscheffekte: Sie bringen etwas 'Leben' ind die multimediale Präsentation und heben
bestimmte Dinge hervor.
• Sprache: Mit ihr können die bildlichen Darstellungen erklärt und kommentiert werden.
Achtung: 'Vorlesen' des Textes, der auf dem Bildschirm erscheint, ist Unsinn.
Interaktion
Webdesign
Im Gegensatz zu Film, Fernsehen, Diashow, usw. ist eine hervorstechende Eigenschaft multimedialer
Systeme, weshalb man bei der Konzeption auf jeden Fall auch auf Interaktion mit dem Benutzer
achten sollte. Schon 1980 wurde in einer Studie festgestellt, daß der Mensch sich viel mehr
Informationen merkt, wenn er mit dem System im Dialog ist. Wichtig ist hier, daß die Bedienung
konsistent und einheitlich ist, damit der Benutzer nicht verwirrt oder überfordert ist.
Eine ebenso wichtige Rolle spielt die Laufzeit der einzelnen Passagen oder Takes. Wenn
beispielsweise eine Video zu lange dauert und sich nicht abbrechen läßt, wird der Benutzer sich
schnell verärgert abwenden. Bewährt haben sich folgende Zeiten:
• selbstlaufend (nicht zu unterbrechen): 2 - 3 Minuten
• mit beschränkter Interaktion: 5 - 6 Minuten
• vollständige, interaktive Unterweisung: bis 15 Minuten
• Lernprogrammlektion: ca. 30 Minuten
Multimedia-Anwendungen lassen sich in drei Gruppen einteilen:
• Menügesteuerte Programme und Präsentationen: Diese haben oft eine hierarchische Struktur
aus Menüs und Untermenüs.
• Hypermedia-Anwendungen: Hier bietet sich die vorteilhafte Möglichkeit von Querverweisen
und einer vermaschten Struktur, die einen schnellen Zugriff auf die gewünschte Info erlaubt.
Hier lassen sich auch mehr multimediale Eigenschaften einbringen, aber gleichzeitig besteht
die Gefahr, daß sich der Benutzer in den Dokumenten 'verliert'.
• Simulationen: In diese Gruppe fallen Spiele genauso wie ernsthafte Simulationen technischer
oder wirtschaftlicher Vorgänge.
Animationen 5

Software für Multimedia-Designer
Zum Erstellen von Multimedia-Applikatioen benötigt man Software aus den unterschiedlichsten
Bereichen:
• Soundbearbeitung: Programme zum Aufnehmen und Bearbeiten von Klängen und Musik über
die Soundkarte. MIDI-Sequencer und -Bararbeitungsprogramm; gegebenenfalls mit der
Möglichkeit, Noten zu schreiben und umzusetzen.
• Bildbearbeitung: Programme zum Bearbeiten von Pixelgrafik und für Photos. Wichtig sind
hier diverse Malwerkzeuge, Filter- und Effektfunktionen. Außerdem sollten die Programme
das Konvertieren verschiedener Dateiformate erlauben. Typische Vertreter sind Paintshop,
Photoshop, PhotoSuite, PhotoImpact, xv.
Die andere Gruppe von Programmen zur Grafikerzeugung bilden die sogenannten
Konstruktionstools, die Vektorgrafiken erzeugen, z. B. AutoCAD, Autosketch. Schließlich
gibt es noch spezielle Programme zum Erzeugen von Diagrammen, z. B. Visio.
• Video- und Animationsbearbeitung: Um Animationen zu bearbeiten sind Programme nötig,
die es erlauben, Einzelbilder zu Filmen zusamenzusetzen. Manche dieser Tools erlauben auch
automatische Generierung von Zwischenphasen. Bei der Erstellung eigener Trickfilme wird
zuerst ein Drahtmodell der Objekte verwendet, das dann in einem zweiten Schritt, dem
sogenannten 'Rendering' in ein 3D-Bild mit Beleuchtung und glatten Oberflächen übergeführt
wird. Weiterhin sollte das Programm gestatten, beliebige Bilder oder Texturen auf die
Objektoberfläche abzubilden. Beispiel: Adobe Premiere, MGI VideoWave.
• Autorensysteme: Um komplette Multimedia-Präsentationen zu erstellen werden gerne
Autorensysteme verwendet. Sie ermöglichen das Zusammenführen von Text, Bild, Video und
Sound und den Einbau interaktiver Elemente. Sie beherrschen eine Skriptsprache (z. B.
Lingo), die auch Fehlersuche und Simulation der MM-Applikation erlaubt. Das Ergebnis wird
dann mit einem Abspielprogramm zusammengebunden und beispielsweise auf CD-ROM
gespeichert. Typische Vertreter dieser Autorensysteme sind Macromedia Director oder
Authorware.
Seit der Entwicklung des World Wide Web (mit HTML) genügt schon ein Texteditor zur
Produktion multimedialer Dokumente (siehe Kapitel 4).
Zielgruppe definieren
Webdesign
1. Erforschen Sie das spezifische Know-how und die individuellen Ansprüche ihrer Zielgruppe.
2. Erforschen Sie die sozialen Wertvorstellungen Ihrer Zielgruppe.
3. Erforschen Sie die grundlegenden Wünsche und Ängste ihrer Zielgruppe.
Startet ein Anwender eine CD oder betritt ein Besucher eine Homepage, so hat er eine Reihe von
Fragen:
• Wo bin ich?
• Wo kann ich hin?
• Ist das das Richtige für mich?
• Wie alt ist die Information?
• Von wem ist die Information?
• Werde ich hier meine Zeit verschwenden?
• Gibt es hier überhaupt etwas, was mich interessiert?
• Gibt es noch etwas Besseres?
• Wo verstecken sich die coolen Sachen?
• Wie lange dauert es?
• Darf ich das?
• Ist das riskant?
Software für Multimedia-Designer 6

All diese Fragen müssen bestmöglich beantwortet werden. Dabei helfen die folgenden Richtlinien:
• Muß sich ein User erst durch drei Menüseiten klicken, um zu einer weiteren Auswahlseite zu
gelangen, wächst die Unlust
• Hyperlinks müssen klar bezeichnet und informativ sein
• Schaffen sie übersichtliche Menüs und Inhaltsangaben
• Für umfangreiche Datenmengen empfiehlt sich eine Suchfunktion
• Weniger ist mehr. (im Web: Ladezeit contra Volumen --> pro Seite nicht mehr als 40 KByte)
• Verwenden Sie möglichst wenig Schriftarten innerhalb eines Dokuments
• Der Schrift-Charakter sollte die inhaltliche Aussage unterstützen
• Eine schlichte Schrift ist auf dem Bildschirm leichter zu lesen; setzen Sie Fettschrift nur
sparsam ein
• Verwenden Sie Farben und Schattierungen, um bestimmte Wörter hervorzuheben
• Schriften mit Serifen (Times, Concorde, Courier, usw.) sind besser lesbar als (serifenlose)
Groteskschriften (Helvetica, Arial, etc.).
• Gehen Sie sparsam mit Fettdruck und Kursivschrift um.
• Verwenden Sie Groß- und Kleinschreibung und nicht reine Großschreibung
• Kurze Absätze werden als bildliche Ideen wahrgenommen
Web 2.0
Webdesign
Der Begriff Web 2.0 geht auf eine Konferenz des Verlags O'Reilly zurück und beschreibt eine
Vielzahl von Aspekten, die sich in den letzten Jahren abzeichnen: Nutzer werden zu
Medienproduzenten, Software wird sozial, es zeigt sich eine wachsende Offenheit, Internetangebote
werden besser integrierbar, der Grad der Vernetzung steigt und Applikationen werden verstärkt ins
Netz verlagert. Der Begriff postuliert in Anlehnung an die Versionsnummern von Softwareprodukten
eine neue Generation des Webs und grenzt diese von früheren Nutzungsarten ab.
Der Begriff Web 2.0 bezieht sich neben spezifischen Technologien oder Innovationen wie Cloud
Computing primär auf eine veränderte Nutzung und Wahrnehmung des Internets. Er grenzt die
interaktiven Nutzungsarten vom Vorgänger ab, in dem es nur wenige "Bearbeiter" (Erstellung von
Inhalten für das Web oder Bereitstellung von Informationen), aber zahlreiche Konsumenten, die die
bereitgestellten Inhalte passiv nutzten gegeben habe. Die Benutzer erstellen, bearbeiten und verteilen
Inhalte in quan-titativ und qualitativ entscheidendem Maße selbst, unterstützt von interaktiven
Anwendungen.
Ebenfalls wird angeführt, dass das Web zu Beginn vor allem aus statischen HTML-Seiten bestanden
habe, von denen viele für längere Zeit unverändert ins Netz gestellt und nur gelegentlich überarbeitet
oder in größeren Zeitabständen ausgetauscht wurden. Damit sich Seiten auch von mehreren Menschen
effizient bearbeiten und verwalten lassen, seien Content-Management-Systeme und aus Datenbanken
gespeiste Systeme entwickelt worden, die während der Laufzeit die Inhalte von Seiten dynamisch
austauschen oder neue Inhalte einzusetzen helfen. Seither haben folgende Entwicklungen bei Web 2.0
zur veränderten Nutzung des Internets beigetragen:
• Die Trennung von lokal verteilter und zentraler Datenhaltung schwindet: Auch Anwender
ohne große technische Kenntnis oder Anwendungserfahrung benutzen Datenspeicher im
Internet (etwa für Fotos). Lokale Anwendungen greifen auf An-wendungen im Netz zu;
Suchmaschinen greifen auf lokale Daten zu. Stichwort: Cloud Computing.
• Die Trennung lokaler und netzbasierter Anwendungen schwindet: Programme aktualisieren
sich selbstständig über das Internet, laden Module bei Bedarf nach und immer mehr
Anwendungen benutzen einen Internet-Browser als Benutzer-schnittstelle.
• Neben einer strengen Rollenverteilung zwischen Bearbeitern oder Anbietern von
Informationen auf der einen Seite und reinen Konsumenten auf der anderen Seite sind
einfache Angebote zu teil- oder zeitweise stattfindendem Rollentausch getre-ten: Anwender
Zielgruppe definieren 7

Webdesign
mit kaum mehr als durchschnittlicher EDV-Kenntnis stellen eigene Beiträge auf Server (User
Generated Content, Wikis), pflegen Weblogs (Blogs) und verlagern auch private Daten ins
öffentliche Netzwerk.
• Es ist nicht mehr die Regel, die einzelnen Dienste getrennt zu nutzen, sondern die Webinhalte
verschiedener Dienste werden über offene Programmierschnittstellen nahtlos zu neuen
Diensten verbunden (Mashups).
• Durch Neuerungen beim Programmieren browsergestützter Anwendungen kann ein Benutzer
auch ohne Programmierkenntnisse viel leichter als bisher aktiv an der Informations- und
Meinungsverbreitung teilnehmen.
Mitte 2010 nutzten mehr als 200 Mio. Menschen weltweit Facebook, mySpace, Xing oder andere
Social-Media-Sites. YouTube ist die bekannteste Website zum Abspielen von Filmen. Und in Flickr
und anderen Foto-Communities zeigen sich ebenfalls viele Millionen Menschen weltweit ihre Bilder.
Web 2.0 begann Anfang dieses Jahrtausends mit der Nutzung von Weblogs (Blogs). Dies waren
ursprünglich Tagebücher im World Wide Web. Ihr großer Vorteil: Es handelt sich um sehr einfache
Content-Management-Systeme. Mit wenigen Klicks kann man sie einrichten und losschreiben. Man
braucht nich einmal Kenntnisse in HTML oder Web-Programmierung. Jeder kann damit sehr einfach
sein eigener Publizist wer-den. Blogs sind damit ein wichtiger Schritt in der Demokratisierung des
Zugangs zur Öffentlichkeit. Wer will, kann sich öffentlich mitteilen und sein Publikum suchen. Die
Geschichte der Blogs ist übrigens in den verschiedenen Ländern durchaus unterschiedlich. In den
USA nutzen Journalisten Blogs zur Veröffentlichung von Themen, die sie in anderen Medien nicht
platzieren können. So ist es nicht verwunderlich, wenn es hier mittlerweile Blogs gibt, die es in der
politischen Meinungsbildung mit großen Zeitun-gen oder Fernsehkanälen aufnehmen können. In
Deutschland spielen Blogs noch lange nicht diese Rolle. Auch wenn hier die Bedeutung politischer
Blogs zunimmt - die politische Meinungsbildung beeinflussen sie noch lange nicht in dem Maße wie
in den USA. O'Reilly und Battelle fassten Schlüsselprinzipien zur Charakterisierung von
Anwen-dungen zusammen, die dem Begriff Web 2.0 zugeordnet werden können:
• das Web als Plattform (anstatt des lokalen Rechners)
• datengetriebene Anwendungen (Inhalte sind wichtiger als das Aussehen)
• die Vernetzung wird verstärkt durch eine "Architektur des Mitwirkens" (jeder kann
mitmachen)
• Innovationen beim Aufbau von Systemen durch Komponenten, die von verschiedenen
Entwicklern erstellt worden sind und beliebig miteinander kombiniert werden können (ähnlich
Open-Source)
• einfache Geschäftsmodelle durch das verteilte, gemeinsame Nutzen von Inhalten und
technischen Diensten
• das Ende des klassischen Softwarelebenszyklus; die Projekte befinden sich immerwährend im
Entwicklungsstadium
• die Software geht über die Fähigkeiten eines einzelnen Verwendungszwecks hinaus
• es wird nicht nur auf die Vorhut von Web-Anwendungen abgezielt, sondern auf die breite
Masse der Anwendungen
Tim Berners-Lee, der Begründer des WWW, sagte 2006 über den Begriff "Web 2.0": "I think Web 2.0
is of course a piece of jargon, nobody even knows what it means" (Ich denke, Web 2.0 ist ein
Schlagwort, von dem niemand weiß, was es wirklich bedeutet.). Er vertritt die Ansicht, das angeblich
"neue Netzverständnis" des Web 2.0 sei in Wahrheit nichts anderes als das ursprüngliche, schon
immer vorhandene Netzver-ständnis ("Web 1.0 was all about connecting people"). Berners-Lee
konzipierte das Web von Anfang im gleichen Maße zum Publizieren wie zum Konsumieren der
Inhalte.So war auch der erste von ihm entwickelte Webbrowser bereits Editor und Browser zugleich.
Zudem wird von Kritikern angeführt, der Begriff Web 2.0 verallgemeinere lediglich die normale,
konsequente Weiterentwicklungen des WWW. Er sei eine Marketingbla-se, welche es vermeidet,
Neuerungen genau zu beschreiben. Beispielsweise fasst man unter dem Oberbegriff Web 2.0 so
Web 2.0 8

unterschiedliche Dinge wie Client-Server-Anwendungen und soziale Netzwerke zusammen. Des
Weiteren lege der Begriff Web 2.0 vereinfachend nahe, das Internet sei interaktiver geworden, obwohl
es schon seit den Anfängen des Internet aktive Usenet-Gemeinden gegeben habe; genau wie später im
WWW auch viele Forengemeinschaften. Daher beinhalte Web 2.0 nichts Neues. Auch seien die
verwendeten Techniken schon lange, bevor sie unter diesem Begriff verwendet wurden, vorhanden
gewesen. Kritikern zufolge könnten viele der mit dem Begriff verbundenen interaktiven Konzepte
dem Benutzer einen Teil seiner Autonomie nehmen und damit zum Kern neuer Strategien werden, in
denen allein eine stete Bindung an den Anbieter die Aktualität und die Vollständigkeit einzelner
Angebote siche-re. Dadurch dass eine Kontrolle der Inhalte fehle, sei auch der Wahrheitsgehalt oder
die wissenschaftliche Relevanz der Beiträge von höchst unterschiedlicher Qualität.
Zum vorhergehenden Abschnitt Zum Inhaltsverzeichnis Zum nächsten Abschnitt
Copyright © FH München, FB 04, Prof. Jürgen Plate
Letzte Aktualisierung: 21. Feb 2011
Webdesign
Webdesign
von Prof. Jürgen Plate
Web 2.0 9

Grundlagen Bildverarbeitung
Bilddaten
Auf den folgenden Seiten erfahren Sie etwas über Farbmodelle in der Computergraphik sowie über die
Grafikformate.
Grundlegendes
Rasterformate
Grundsätzlich sind Bilder, die man auf dem Monitor sieht, in einzelne Bildpunkte unterteilt -
sogenannte Pixel (Picture Elements). Die Auflösung wird bestimmt durch die Anzahl der Pixel, die
ein Bild pro Flächeneinheit enthält. Je höher die Auflösung, desto besser die Qualität. Als Bit Map
bezeichnet man die Speicherung eines Bildes auf ähnliche Art wie sie im Bildwiederholspeicher des
Computers abgelegt werden.
Vorteile:
Nachteile:
♦ Einfach zu erstellen. Ein Scanner gibt die Daten z.B. als Bitmap aus.
♦ Pixel können sehr einfach einzeln oder in Gruppen manipuliert werden (z.B.
Änderung der Farbe).
♦ Können für ein Ausgabegerät optimal erstellt werden, wenn dieses Daten
pixelweise ausgibt. Dazu gehören z. B. Monitore.
♦ Dateien können sehr groß werden, insbesondere wenn das Bild sehr viele
Farben enthält. Durch geeignete Kompressionsverfahren kann diese
Datenmenge u.U. reduziert werden.
♦ Bitmaps lassen sich schlecht verkleinern oder vergrößern (skalieren). Beim
Vergrößern werden im wesentlichen einzelne Pixel dupliziert, so daß das Bild
unannehmbar verändert werden kann. Beim Verkleinern werden einzelne
Pixel einfach verworfen. Daher können Bitmaps meist nur in der Auflösung
vernünftig gedruckt werden, mit der sie erstellt wurden.
In früheren Versionen dieses Skripts habe ich Bildschirm und Drucker in einen Topf geworfen. Dazu
schrieb mir aber Rüdiger Heierhoff von der Akademie für interaktive Medien und Kommunikation
GmbH eine interessante E-Mail, die ich hier weitergeben will:
... Meiner Meinung nach geben Drucker diese Daten eben nicht als Pixel aus, sondern als Punkt
(Dot). Wie Sie weiter unten erläutern, wird z. B. bei Echtfarbenbildern (24-bit) jedes "Pixel ... durch
drei Bytes repräsentiert (z. B. RGB)..."
Anders ausgedrückt, EIN Pixel enthält die Farbinformationen für Cyan, Magenta und Gelb (CMY).
Um diese Informationen darzustellen, benötigt ein Farbdrucker mindestens DREI Punkte. Praktische
Konsequenz ist (grob gesagt), das die effektiv nutzbare Auflösung eines 600 dpi Bildes eigentlich nur
200 dpi beträgt. Dazu kommt noch die Rasterfrequenz mit der der Drucker das Druckbild erzeugt
etc.(s.a. Baufeldt/Rösner/Scheuermann/Walk: Informationen übertragen und drucken, Lehr-und
Arbeitsbuch für das Berufsfeld Drucktechnik; Verlag Beruf + Schule, Itzehoe 1977 und 1998).
Dazu ist es wichtig zu verstehen, dass die gespeicherte elektronische Bilddatei eigentlich keine
Längenausdehnung besitzt, im Gegensatz zum gedruckten Bild. Die Angabe der Auflösung macht
daher immer nur dann Sinn, wenn es um die Ausgabe z.B. auf einen Drucker geht (X cm Breite mal Y
cm Höhe bei Z dpi). Für die Bildschirmausgabe reicht in der Regel die Angabe der Bildmaáe in Pixeln
(X Pixel Breite mal Y Pixel Höhe).
Grundlagen Bildverarbeitung 10

In der Fachliteratur wird übrigens dem von mir angedeuteten Umstand insofern Rechnung getragen,
als es für Pixel pro Inch und Punkte pro Inch entsprechende Bezeichnungen gibt: ppi (Pixel pro Inch)
bzw. dpi (Punkte pro Inch), wobei in der Regel jedoch für beide Bezeichnungen dpi benutzt wird.
Vektorformate
Diese Formate zur Speicherung von Daten enthalten eine mathematische Beschreibung einzelner
Objekte eines Bildes (z. B. Linien, Kreise, Polygone). Im einfachsten Fall kann beispielsweise eine
Linie beschrieben werden durch den Startpunkt, eine Richtung sowie die Länge.
Vorteile:
Nachteile:
Monochrome Bilder
♦ Ideal zur Speicherung von Bildern, die entweder linienbasierte Information
enthalten oder die Elemente enthalten, die leicht in linienbasierte Information
zu überführen sind (z. B. Text).
♦ Leicht skalierbar und manipulierbar
♦ Meist einfach in andere Vektor- oder Rasterformate wandelbar.
♦ Nicht geeignet zur Speicherung von extrem komplexen Bildern, z. B.
Fotografien mit pixelweise wechselnden Farben.
♦ Das Erscheinungsbild kann stark von der Anwendung abhängen, mit der die
Vektordatei eingelesen wird. Identische Vektordaten werden leider nicht
immer identisch interpretiert.
♦ Die Ausgabequalität ist nur optimal bei Vektorausgabegeräten wie z.B.
Plotter.
• Jedes Pixel ist als Binärwert gespeichert (0 oder 1).
• Ein Monochrombild mit 640 x 480 Pixeln belegt 37,5 KByte Speicher.
• Oft wird Dithering verwendet, um Graustufen nachzubilden.
Graustufen-Bilder
Webdesign
• Jedes Pixel wird als Zahlenwert gespeichert (normalerweise 8 Bit, also ein Wert zwischen 0
und 255).
• Ein Graustufenbild mit 640 x 480 Pixeln belegt ca 300 KByte Speicher.
Grundlegendes 11

Farbbilder (8 Bit)
• Jedes Pixel wird durch ein Byte repräsentiert.
• Unterstützt 256 Farben aus einer Palette von 16 777 216 mögliche Farben (akzeptable
Farbenvielfalt).
• Verwendet eine Farbtabelle (Color Look-Up Table, CLUT), auch 'Palette' genannt.
• Ein Bild mit 640 x 480 Pixeln belegt ca. 300 KByte Speicher.
Echtfarbenbilder (24 Bit)
Webdesign
• Jedes Pixel wird durch drei Bytes repräsentiert (z. B. RGB).
• Unterstützt 256 x 256 x 256 mögliche Farben (16 777 216).
• Ein Bild mit 640 x 480 Pixeln belegt ca. 900 KByte Speicher.
• Bei manchen 24-Bit-Formaten wird in einem vierten Byte weitere Info gespeichert (z. B. für
spezielle Effekte).
Grundlegendes 12

Farbensehen beim Menschen
Webdesign
Farbdarstellung
Der Abschnitt über Farbmodelle erklärt zuerst, wie das Farbensehen beim Menschen zustande kommt,
bevor auf wichtige Farbmodelle näher eingegangen wird. Im einzelnen sind dies das RGB-Modell, das
CMY-Modell und das YIQ-Modell.
Licht ist elektromagnetische Strahlung und das für den Menschen sichtbare Spektrum ist der
Wellenlängenbereich von 400 nm (Violett) bis 700 nm (Rot). Farben sind ein grundlegender
Bestandteil unseres Lebens. Das Farbempfinden ist bei jedem Menschen unterschiedlich.
Sichtbares Licht ist ein ganz kleiner Teil des Wellenspektrums. Je nach
Länge der Wellen in diesen Spektrum erscheint ein Lichtstrahl in einer
bestimmten Farbe. Ein Lichtstrahl mit einer Wellenlänge von 700 nm
erscheint rot, ein Lichtrahl mit einer Wellenlänge von ca 500 nm erscheint
blau. So entstehen die Farben. Wenn ein weißer Lichtstrahl (ein Gemisch
aller Wellenlängen) auf eine Fläche prallt, die alle Wellenlängen außer Rot
absorbiert, dann erscheint diese Fläche rot.
Für das Farbensehen beim Menschen sind bestimmte Sehzellen, die sogenannten Zapfen zuständig. Es
gibt drei verschiedene Sorten von Zapfen in der Netzhaut, die jeweils mit einem anderen
lichtempfindlichen Farbstoff ausgestattet sind. Ein reines Licht von 400 nm Wellenlänge erregt nur
den 'Blaurezeptor' unter den Zapfen. Ein Licht der Wellenlänge 450 nm erregt den 'Blaurezeptor' stark
und den Grünrezeptor sehr schwach. Licht von 500 nm Wellenlänge spricht alle drei Zapfensorten an.
Die einzelnen Farbeindrücke werden also durch unterschiedliche Erregungsstärken der einzelnen
Zapfensorten ausgelöst. Gleiche Erregung aller Zapfen führt zum Eindruck ,,weiß``. Es genügen also
drei Grundfarben, um als deren Mischung alle Farben darzustellen.
Farbdarstellung 13

Webdesign
Betrachtet man Farben nur im Hinblick auf ihren Farbton und nicht auf Helligkeit und Sättigung, so
liegt die Wellenlänge zwischen zwei gerade noch als unterschiedlich zu erkennende Farben zwischen
2 nm und 10 nm, je nachdem aus welchem Wellenlängenbereich die Farben stammen. Zur Codierung
einer Farbe sind so 3 x 8 = 24 Bit ausreichend. Das folgende Diagramm zeigt die Spektren der (reinen)
Grundfarben, die man addieren kann, um alle sichtbaren Farben darzustellen. Ein negativer Wert
bedeutet dabei, daß die entsprechende Farbe nicht exakt darstellbar ist.
Um alle Farben darstellen zu können, muß man von den Grundfarben abgehen und 'nicht-reine' Farben
verwenden. 1931 definierte die CIE drei Standard-Primärfarben, (X,Y,Z). Die Primärfarbe Y ist dabei
an die Helligkeitsempfindlichkeit des menschlichen Auges angepaßt
Farbensehen beim Menschen 14

Farb-Kontraste
Farb-Kontraste sind besonders wichtig, wenn mit farbiger Schrift auf farbigem Hintergrund gearbeitet
wird, denn für die Lesbarkeit des Textes ist nicht allein die Schriftgröße entscheidend.
Grundfarben-Kontrast
Die "klassischen" Grundfarben Blau, Gelb und Rot bilden
untereinander einen starken Farbkontrast.
Hell-Dunkel-Kontrast
Hier handelt es sich um die gleiche Farbe, jeweils als sehr helle
oder sehr dunkle Nuance.
Komplementär-Kontrast
Die komplementären Farben liegen sich im Farbkreis
gegenüber: Rot - Grün, Gelb - Lila, Orange - Blau.
Qualitätskontrast
Farbqualität bedeutet die Intensität einer Farbe zwischen
Reinheit und Trübung.
Quantitätskontrast
Mengenverhältnis von Farben zueinander (in der Fläche).
Simultan-Kontrast
Dieselbe Farbe wirkt auf unterschiedlichem Hintergrund
verschieden.
Farb-Perspektive
Webdesign
Nicht nur durch Linien, auch mit Farben läßt sich eine räumliche Wirkung erreichen.
Farb-Kontraste 15

Dominante Farben
Einige Farben drängen sich mehr als andere in den
Vordergrund. Ein Beispiel dafür sind die Signal-Farben Rot
oder Orange.
Helle Farben treten in dunkler Umgebung in den Hintergrund.
Auf der anderen Seite treten dunklere Farben vor hellem
Hintergrund hervor.
Luftperspektive
Man kennt es aus der Natur oder aus Gemählden: wenn man in
die Ferne schaut, wird die Landschaft zum Horizont hin immer
bläulicher. Diesen Effekt kann man ausnutzen, um Tiefe in
einem Bild zu erreichen.
Farb-Wirkung
Auch auf die Wirkung der Farbwahl auf den Betrachter sollte man achten, damit das Erscheinungsbild
der Webseiten nicht deren Inhalt widerspricht. Seriöse Firmen meiden beispielsweise knallige Farben.
Die Wirkung von Farben ist jedoch kein allgemeingültiges Gesetz, und wird nicht von jedem
Betrachter gleich empfunden.
Langes Lesen ermüdet, Bildschirmarbeit sogar noch mehr. Ziel des Webdesign soll sein, die
Augenbelastung zu vermindern. Die höchste Belastung entsteht durch weißes Licht. Auch warme
Farben belasten uns mehr als kalte Farben. Am geringsten belasten uns Farben im Bereich Laubgrün
bis Gelbgrün.
Farbwahrnehmung erzeugt beim Menschen auch bestimmte psychische Empfindungen:
Warme Farben
Als "warm" gilt die Gelb-Orange-Rot Palette.
• Rot: Aufreizend, beunruhigend, nah; warme
Farbtemperaturwirkung
• Gelb: Anregend, nah; sehr warme Temperaturwirkung
Diese Farben werden häufig verwendet, wenn Gefühle
ausgedrückt werden, sie haben eine eher anregende Wirkung.
Kalte Farben
Als "kühl" werden Blau-Grün-Töne empfunden.
Webdesign
• Grün: Beruhigend, entfernt; neutrale bis kalte
Temperaturwirkung
• Blau: Beruhigend, entfernt; sehr kalte
Temperaturwirkung
Farb-Perspektive 16

Neutrale Farben
Weiß, Grau und Schwarz wirken am sachlichsten, aber
manchmal auch etwas langweilig.
Farbmodelle
Man unterscheidet physikalisch-technische und wahrnehmungsorientierte Farbmodelle. Die
wahrnehmungsorientierten Farbmodelle wie z. B. das HLS-Modell sind mehr auf das
Wahrnehmungsempfinden des Menschen ausgerichtet, das sich eher an den Parametern Farbton
(Hue), Helligkeit (Lightness) und Sättigung (Saturation) orientiert.
Die physikalisch-technischen Farbmodelle beschreiben eine Farbe als Mischung dreier
Primärfarben. Die Unterschiede zwischen den einzelnen Modellen liegen in der Wahl der
Primärfarben und der Art der Farbmischung. Zu den wichtigsten technischen Farbmodellen zählen:
• RGB-Modell: Ausgabe auf Monitoren
• CMY-Modell: Ausgabe auf Papier
• YIQ-Modell: Fernsehtechnik
Ein Farbmodell soll dazu dienen, Farben anhand einer bestimmten Farbskala zu beschreiben. Ein
Farbmodell kann nicht alle sichtbaren Farben beschreiben, sondern nur eine Untermenge daraus. Die
für die graphische Datenverarbeitung wichtigeren physikalisch-technischen Farbmodelle sollen nun
näher untersucht werden.
Das RGB-Modell
Webdesign
Das RGB-Modell ist ein additives Farbmodell, d.h. mischt man die drei Farben Rot, Grün und Blau
mit bestimmten Intensitäten zusammen, so ergibt sich die Farbe Weiß. Um verschiedene Farben zu
mischen, variiert man die Intensitäten der drei Grundfarben. Mit dem beschriebenen (RGB)-Modell
arbeiten die meisten Bildbearbeitungsprogramme.
Beim RGB-Modell werden die darstellbaren Farben als Punkte eines im Ursprung eines Kartesischen
Koordinatensystems liegenden Einheitswürfels beschrieben. Auf den positiven Achsen dieses
Koordinatensystems werden die drei Primärfaben Rot, Grün und Blau aufgetragen. Die
Hauptdiagonale des Einheitswürfels, sie geht vom Punkt (0,0,0) zum Punkt (1,1,1), enthält die Farben
mit gleich großem Anteil an allen Primärfarben. Sie repräsentiert die Grauwerte, wobei Schwarz im
Ursprung (0,0,0) und Weiß im Punkt (1,1,1) liegen. Eine Farbe wird dann durch die Anteile an den
drei Primärfarben beschrieben, die zur Farbe Schwarz addiert werden.
Farb-Wirkung 17

RGB-Farbwürfel
Ins Innere des Würfels
RGB-Farbmischung per "Scheinwerfer"
Bei Grafikkarten und bei der Farbdefinition für WWW-Anwendungen wird der reelle Zahlenbereich
0.0 - 1.0 auf den Wertebereich 0 - 255 umgesetzt. Durch die 256 Werte pro Farbkanal bei drei
Kanälen können so 16.7 Mio. Farben, d. h. Truecolor, festgelegt werden:
Das RGB-Modell ist wichtig bei der Farbdarstellung auf Monitoren. Bei Farbbildschirmen werden
drei Phosphorarten auf der Mattscheibe aufgebracht, die von drei unabhängigen Elektronenkanonen
angesteuert werden und das in drei Teilbilder (RGB) zerlegte Farbbild erzeugen.
Daraus ergibt sich die besondere Bedeutung des RGB-Modells: alle anderen Farbbeschreibungen
müssen vor der Farbausgabe in den äquivalenten Punkt des RGB-Würfels umgerechnet
werden.Benutzen zwei Farbbildschirme Kathodenstrahlröhren mit verschiedenem Phosphor, so
ergeben sich auch unterschiedliche Farbskalen. Man kann jedoch durch eine Transformationsrechnung
die auf einer Kathodenstrahlröhre spezifizierte Farbe auf die Farbskala der anderen Röhre abstimmen.
Das CMY-Modell
Webdesign
Die subtraktive Farbmischung bedient sich der Farben Cyan, Magenta und Gelb (Yellow). Eine
Mischung dieser drei Komponenten ergibt in der Theorie Schwarz, in der Praxis ein sehr dunkles
Braun. Durch Zugabe von Schwarz (auch Tiefe genannt) enthält man auch im Bereich der unbunten
Farben (Grau, Schwarz, Weiß) eine gute Reproduktionsqualität. Dieses Modell wird allgemein CMYK
genannt. Bei der Darstellung der Farben in einem kartesischen Koordinatensystem wie beim
RGB-Modell liegt nun Weiß im Ursprung und nicht mehr Schwarz. Farben werden beschrieben durch
die von der Farbe Weiß abgezogenen Anteile der Grundfarben und nicht mehr durch deren Addition
zur Farbe Schwarz.
Das CMY- oder das CMYK-Modell wird zur Farbausgabe auf Druckern verwendet, es entspricht dem
physikalischen Vorgang der Reflexion weißen Lichts. Die beim Dreifarbendruck auf das Papier
gebrachte Farbe sorgt dafür, daß bestimmte Farbanteile des Weißen Lichts ausgefiltert und somit nicht
mehr reflektiert werden (s.Abbildung). So verhindert zum Beispiel die auf das Papier aufgetragenen
Farbe Cyan, daß rotes Licht von der Oberfläche absorbiert wird. Reflektiert wird somit noch der Grünund
Blau-Anteil des Lichts. Die Druckfarbe Magenta absorbiert Grün und gelbe Druckfarbe absorbiert
Blau. Werden Cyan und Gelb nun übereinander auf das Papier aufgetragen, so wird nur der
Farbmodelle 18

Grün-Anteil des anstrahlenden Lichts reflektiert. Werden alle drei Farben auf das Papier aufgetragen,
dann werden Rot, Grün und Blau absorbiert und man erhält so die Farbe Schwarz.
Die Umrechnung zwischen RGB- und CMY-Modell erfolgt nach folgenden Formeln:
• [C,M,Y] = [1,1,1] - [R,G,B]
• [R,G,B] = [1,1,1] - [C,M,Y]
Beim CMYK-Modell erfolgt die Umrechnung nach folgenden Formeln:
• K = min(C,M,Y)
• C = C - K
• M = M - K
• Y = Y - K
Luminanz und Chrominanz
Webdesign
Hier sollen einige grundlegende Prinzipien der visuellen Empfindung des Menschen erklärt werden.
Licht sind die durch das Auge vermittelten Empfindungen und elektromagnetischen Schwingungen
einer hestimmten Wellenlänge. Jeder Farbe entspricht eine andere Wellenlänge. Nicht jede
elektromagnetische Schwingung ist sichtbar. Die für den Menschen sichtbaren Schwingungen bzw.
Wellenlängen liegen im Bereich von etwa 250 nm bis 780 nm.
Eine aus nur einer Wellenlänge bestehende Lichtquelle ist eine monochromatische Quelle. Nehmen
wir als Beispiel an, darf die Wellenlänge dieser monochromatischen Quelle £ ist. Diese Quelle hat
eine Energie, die auch Intensität genannt wird. Wir nennen diese Intensität C. In Wirklichkeit sind nur
wenige Quellen monochromatisch. Die meisten Quellen setzen sich aus einem Bereich von
Wellenlängen mit je einer eigenen Intensität zusammen. Das ist die spektrale Verteilung der
Lichtquelle, die durch die Funktion C(£) dargestellt wird.
Im sichtbaren Spektrum kann das menschliche Auge zwischen verschiedenen Wellenlängen
monochromatischen Lichts unterscheiden. jede Wellenlänge erzeugt einen anderen Eindruck, die
Farbempfindung. Die Art, wie das menschliche Auge auf Licht reagiert, weist einige interessante
Aspekte auf, z. B., daß zwei verschiedene Wellenlängen nicht als verschiedene Farben erscheinen.
Zwei monochromatische Quellen mit genau der gleichen Intensität erwecken einen anderen Eindruck
von 'Leuchtdichte'. Das menschliche Auge reagiert auf bestimmte Wellenlängen empfindlicher als auf
Farbmodelle 19

andere. Mit anderen Worten, das Auge reagiert auf manche Farben empfindlicher als auf andere.
Unser Auge reagiert empfindlicher auf Gelb oder Gelbgrün als etwa auf Rot oder violett.
Die Reaktion des menschlichen Auges V(£) entspricht jeder Wellenlänge £. Das ist die spektrale
Reaktion des menschlichen Sehvermögens. Die Luminanz einer Lichtquelle oder eines beleuchteten
Gegenstands ist kein physisches Merkmal der Quelle oder des Gegenstands, sondern eine
wahrgenommene Empfindung des menschlichen Betrachters. Luminanz ist ein Produkt der spektralen
Verteilung von Energie durch spektrale Reaktion der menschlichen Sicht.
L = f * C(£) * V(£) * d£
Webdesign
Luminanz ist also ein Maß der allgemeinen Reaktion des Auges auf alle in einer Quelle oder einem
Gegenstand enthaltenen Wellenlängen.
Luminanz und Farbunterschied im analogen Fernsehen
Die drei Signale Rot, Grün und Blau können in drei andere Signale umgewandelt weren: in die
Information der Luminanz (, d. h. die Leuchtdichte bzw. die Lichtintensität) und zwei weitere
Farbsignale. Das Prinzip der Umwandlung der RGB-Signale in Luminanz- und Farbsignale ist älter als
das Farbfernsehen. Dafür gibt es zwei Gründe. Erstens ist dadurch eine Abwärtskompatibilität
möglich, so daß alte Schwarzweiß-Fernsehgeräte unterstützt werden. Das ist die Aufgabe des
Luminanzsignals. Da das menschliche Sehvermögen weniger stark auf Farbe als auf Luminanz
reagiert, kann das Farbsignal gegebenenfalls mit geringerer Genauigkeit übertragen oder dargestellt
werden.
In der Fernsehtechnik wird das Luminanzsignal Y-Signal genannt. Die zwei Chrominanzsignale
werden aus den Farbunterschieden herechnet. Ein Farbunterschiedssignal für Rot, Grün und Blau
entsteht durch Suhtrahieren des Luminanzsignals vom Farbsignal. ist beispielsweise R das Farbsignal
Rot, ist das Farbunterschiedssignal von Rot (R - Y). In der Praxis genügen zwei
Farbunterschiedssignale, wenn Luminanz verfügbar ist. Farbunterschiedssignale werden nicht so
übertragen wie sie sind, sondern vor der bertragung in zwei Signale - die Cbrominanzsignale -
umgewandelt. Die Umwandlung ist linear. Jede Femsehnorm definiert ihre eigene
Umwandlungsmethode:
Die NTSC-Norm bezeichnet die Luminanz als Y-Komponente und die zwei Chrominanzsignale als Iund
Q-Komponenten. I und Q bilden zusammen die Farbton- und Sättigungsaspekte (Chrominanz).
Sie werden wie folgt herechnet:
Y = 0,30*R + 0,59*G + 0,11*B
(1) I = 0,74*(R - Y) - 0,27*(B - Y) = 0,60*R - 0,28*G - 0,32*B
Q = 0,48*(R - Y) + 0,41*(B - Y) = 0,2l*R - 0,52*G + 0,31*B
Farbmodelle 20

Die PAL-Norm bezeichnet die Luminanz Y und zwei Chrominanzsignale mit U und V:
Y = 0,30*R + 0,59*G + 0,11*B
(2) U = 0,493*(B - Y) = -0,15*R - 0,29*G + 0,44*B
V = 0,877*(R - Y) = 0,62*R - 0,52*G - 0,10*B
Die folgenden Modelle basieren auf Luminanz und Chrominanz.
Das YIQ-Modell
Das YIQ-Modell wird - wie oben beschrieben - in der Fernsehtechnik verwendet und sorgt dort für die
Abwärtskompatibilität von Farb- zu S/W-Fernsehen. Die Y-Komponente gibt die Luminanz wieder.
Ein S/W-Fernseher zeigt nur diese Komponente an. Die Chrominanz, die Farbigkeit, ist in den
Komponenten I und Q codiert. Die Umrechnung von RGB-nach YIQ-Werten erfolgt nach der Formel
(1) oben.
Dabei ist I in etwa die Rot-Orange-Achse und Q annähern orthogonal zu I. Das menschliche Auge ist
am Empfindlichsten für Y, danach für I und schließlich für Q.
Das YCbCr-Farbmodell
Für das PAL-System wurde ein leicht abweichendes Modell entwickelt, das dann zum
CCIR-601-Standard für digitale Videoaufzeichnung wurde. Die Umrechnung lautet:
• Y = 0,299*R + 0,587*G + 0,114*B
• Cb = B - Y
• Cr = R - Y
Mehr hierzu finden Sie weiter unten beim JPEG-Verfahren.
Daraus leitet sich bei den meisten Bildbearbeitungsprogrammen das HSB-Modell ab. Es entspricht
von allen drei Modellen unserer verbalen Farbbeschreibung am meisten. Beschreibungen wie ein
kräftiges, helles Gelb lassen sich sofort umsetzen. Die Initialen stehen für Hue (Farbton), Saturation
(Sättigung) und Brightness (Helligkeit). Der Farbton beeinhaltet die reine Farbinformation, die
Sättigung das Verhätlniss von Stärke der reinen Farbe und den unbunten Anteilen. Die Helligkeit
entspricht der Helligkeit von 1% - 100%. 0% stellt immer Schwarz dar, 100% immer Weiß.
Zusammenfassung
• Farbbilder werden als Werte-Tripel dargestellt. Man kann durch die Wahl des Wertebereich
unterschidliche Farbtiefe speichern. Für einfache Icons genügen 2 bis 32 Farben. Bei 8 Bit
Farbtiefe wird jedes Pixel in einem Byte gespeichert und bei 24 Bit Farbtiefe werden 3 Bytes
benötigt.
• RGB ist ein additives Farbmodell für selbstleuchtende Geräte Monitor), CMY ist ein
subtraktives Modell für Drucker.
• Bei Video verwendet man YIQ (und YUV, das nicht besprochen wurde). Y enthält die
Helligkeitsinfo (S/W-Bild), I und Q die Farbinfo (Chrominanz).
• Neben diesen Hardware-Modellen gibt es noch andere, die zum Teil auch in
Bildbearbeitungsprogrammen verwendet werden (z. B. HSB).
Gradation
Webdesign
Farbmodelle 21

Bei der professionellen Bildbearbeitung
werden fast alls Änderungen an Bildern
über sogenannte Gradationskurven
gemacht. Diese Bildberabeitungen sind
nötig, um Abbildungen auf die
Besonderheiten spezieller Ausgabegeräte
einzustellen oder um besondere Effekte
zu erzielen.
Die Gradationskurve ist die Visualisierung des Verhältnisses von Eingabe- zu Ausgabewerten in
einem Bereich von 0% bis 100%. Diese Kurve repräsentiert alle Farben eines Bildes, jede
Veränderung ist dort ablesbar. Die Beeinflussung der Farbbereiche eines Bildes durch die
Gradationskurve verdeutlicht die nebenstehende Abbildung.
Gamma-Korrektur
Will man Intensitätsstufen auf einem Bildschirm so darstellen, daß sie gleichmäßig und ohne
sichtbaren Stufen verteilt sind, so muß man spezielle Eigenschaften des Auges berücksichtigen. Wenn
man z. B. 256 Intensitätsstufen linear auf die Helligkeitswerte des Bildschirms überträgt, so ergibt sich
eine nichtlineare Stufung, die deutlich sichtbar ist. Das menschliche Auge nimmt keine absoluten
Intensitätswerte wahr, sondern Quotienten von Intensitätsstufen. So wird zum Beispiel zwischen den
Intensitätsstufen 0.2 und 0.22 der gleiche Unterschied wie zwischen 0.6 und 0.66 wahrgenommen. Die
Intensitätsstufen einer Ausgabe müssen daher nichtlinear, genaugenommen logarithmisch auf die
Helligkeitsstufen des Bildschirms abgebildet werden. Für 256 Stufen ergibt sich dabei folgendes:
• I0 sei die kleinstmögliche Helligkeit und der Wert 1.0 die maximale Helligkeit.
• I0 = I0
• I1 = r * I0
• I2 = r * I1 = r2 * I0
• ...
• I255 = r255*I0 = 1
Der Wert für I0 hängt von der verwendeten Bildröhre ab und liegt normalerweise zwischen 1/200 und
1/40 des maximal erreichbaren Wertes. Das Verhältnis zwischen maximaler und minimaler Helligkeit
nennt man den Dynamikbereich einer Bildröhre.
Für I0 = 0.02 errechnet sich r = 1.015. Um die Darstellung einer Graustufentreppe (also Werte
zwischen 0 .. 1) ohne Stufen erscheinen lassen ist ein Wert r < 1.01 nötig, dann kann das Auge die
einzelnen Helligkeitssprünge nicht mehr voneinander unterscheiden.
Nun werden die gewünschten Helligkeitswerte durch den Bildschirm auch nichtlinear verändert, es ist
also eine weitere Korrektur notwendig, um eine korrekte Abbildung zu erreichen.
Die Lichtintensität I die durch einen Elektronenstrahl durch den Phosphor des Bildschirms umgesetzt
wird, hängt von der Zahl der Elektronen N wie folgt ab:
I = k * N y
Webdesign
Gradation 22

Dabei sind k und y Konstanten die vom Bildschirm abhängig sind. y ist der Wert Gamma und liegt bei
den meisten Bildschirmen zwischen 2.2 und 2.5. Eine Umrechnung der gewünschten Helligkeit auf
einen Eingabewert basierend auf dieser Formel nennt man auch Gammakorrektur.
Mit Hilfe einer Tabelle ist es nun möglich, die gesamte Helligkeits-Korrektur durchzuführen. Bei
manchen Monitoren ist es auch möglich, die Korrekturtabelle im Monitor abzulegen, üblicherweise
wird jedoch die Korrektur in der Grafikkarte durchgeführt. Natürlich können auch die
Bildinformationen selbst bereits korrigiert werden. Die Korrektur für die Helligkeitsabbildung kann
vorab erfolgen. Insbesondere sind auch Korrekturen für gescannte Bilder oder Videos nötig, da diese
selbst wieder eine andere Helligkeitsumsetzung aufweisen.
Ähnliche Korrekturen sind auch für Filmbelichter, Drucker etc. notwendig, will man Bilder mit
Graustufen korrekt darstellen. Für eine Korrektur an Farbildern kann es ggf. nötig sein die Korrektur
für alle drei Farbkomponenten getrennt durchzuführen.
Die folgende Tabelle zeigt typische Werten der Dynamik 1/I0 und der Anzahl der benötigten
Intensitätsstufen. Die Zahl der möglichen Intensitätsstufen erhält man aufgrund des Dynamik-Bereichs
mit der Formel
n = log(1.01(1/I0))
Technik Dynamik Intensitäts-
Stufen
Bildschirm 50 - 200 400 - 530
Photo-Druck 100 465
Dia 1000 700
S/W-Druck auf
gestrichenem Papier
Farb-Druck auf
gestrichenem Papier
100 465
50 500
Zeitung 10 234
Dithering
Webdesign
Beachten Sie bitte auch, daß nicht alle Grafikkarten Echtfarben darstellen können. Bei z. B. VGA oder
SVGA, werden die nicht direkt darstellbaren Farben dann entweder in dem nächstgelegenen
anzeigbaren Farbton umgesetzt, wobei zu nah beieinander liegende Farben gleich erscheinen können,
oder diese Farben werden "gedithert".
Beim Dithering wird ein Farbton durch Kombination vorhandener Farben erzeugt. Die Kombination
besteht darin, daß ein Pixelmuster erzeugt wird, welches aus einer gewissen Entfernung betrachtet
Gamma-Korrektur 23

dem gewünschten Farbton ähnelt. Bei naher Betrachtung sieht man freilich die Pixel. Bei Text kann
dieses Raster aber schnell zur Unleserlichkeit führen.
Möchten Sie sicherstellen, daß ihr Dokument auf nahezu allen Geräten angezeigt werden kann, so
beschränken Sie die Farbe. Es ist sicher heute nicht mehr nötig, sich auf die 16 Grundfarben zu
beschränken. Aber bei der Farbdefinition von Text- umd Hintergrundfarbe ist es durchaus günstig,
sich auf 256 Farben zurückzuziehen.
Betrachten wir ein Beispiel zum Dithering. Als Ausgangsbild verwenden wir ein Bild mit
Farbverläfen:
Truecolor-Bild
Webdesign
Betrachten wir nun einige Dithermöglichkeiten:
Dithering: optimierte Farbtabelle mit Fehlerdiffusion
Dithering 24

Dithering: gleichmäßige Farbtabelle
Webdesign
Dithering: gleichmäßige Farbtabelle mit Fehlerdiffusion
Dithering: Standard-VGA-Tabelle mit Fehlerdiffusion
Sie sehen also, daß auch auf nicht-Truecolor-Systemen erträgliche Bilder produziert werden können.
Ein günstiges Vorgehen ist, auch das Dithern dem Browser des Betrachters zu überlassen, d. h.
Echtfarbenbilder auch als Echtfarbenbilder zu übertragen. Dennoch sollte man sich als Autor klar sein,
daß ein Bild bei jedem Betrachter gegebenenfalls verändert erscheint. Man kann sich also nicht darauf
Betrachten wir nun einige Dithermöglichkeiten: 25

verlassen, daß der Betrachter jedes Detail sehen kann.
Das Beispiel zeigt, daß Dithering auch Übergänge erzeugen kann (Fehlerdiffusion). Dabei wird
versucht, sich der wirklichen Übergang von einer Farbe über Zwischentöne zur anderen durch ein
Muster verfügbarer Farben anzunähern. Stellt man sich jedoch eine Zeile Text vor, so kann dieser
Effekt zur oben bereits erwähnten Unleserlichkeit führen.
Bildkompressionsverfahren
Bilder mit hoher Auflösung im Computer zu speichern kostet Platz. Bei einer Auflösung von 640 x
480 Bildpunkten und 16 Millionen Farben (24 Bit pro Bildpunkt), benötigt man für ein Bild 921600
Bytes, also fast 1 MByte, Speicherplatz. Bilddateien sind also äußerst unhandlich, besonders dann,
wenn ein größeres Bildarchiv angelegt oder ein Farbbild via Modem und Telefonleitung oder per
ISDN übertragen werden soll. Daher versucht man Bilder komprimiert abzuspeichern.
Erste Schritte zur Verringerung der Dateigröße unternehmen Grafikformate, die intern
Kompressionsmethoden wie Lauflängencodierung, LZW- oder Huffman-Codierung verwenden, wie
z.B. GIF, PCX oder TIFF. Allerdings überschreiten diese Methoden selbst in ihrer modernsten Form
selten den Kompressionsfaktor drei. Jedoch komprimieren diese Verfahren ohne Verluste und das
Original läßt sich bis aufs letzte Bit wieder herstellen. Bei der Reduktion von Bilddaten kann man
sogenannte 'Kompressionsverfahren' verwenden, um die Redundanz in der Bildinformation zu
beseitigen. Dabei unterscheidet man zwischen verlustfreier Kompression, bei der das unrsprüngliche
Bild wieder originalgetreu hergestellt wird und verlustbehafteter Kompression, wo bei der
Kompression ein mehr oder minder großer Teil der Bildinformation verloren geht.
Ein einfaches Kompressionsverfahren ist die Run-Length-Codierung (RLE). Dabei verfährt man wie
folgt: Das Bild wird z. B. Zeile für Zeile abgespeichert. Wenn mehrere aufeinanderfolgende
Bildpunkte die gleiche Farbe haben, so speichert man einen Zähler ab, der angibt, wie oft diese Farbe
folgt. Der Zähler ist eine Bildpunktfarbe, die nicht vorkommt und über einen Sonderfall abgehandelt
wird. Dieses Verfahren eignet sich am Besten für Bilder die eine Palette verwenden und keine
Farbverläufe (z.B. bei Fotos) oder komplizierte Muster enthalten. Bilder in Echtfarben, z.B. von
Fotoaufnahmen eignen sich für dieses Verfahren nicht sehr gut. So lassen sich umgekehrt z.B.
Grafiken, die farbige Flächen enthalten sehr gut mit dem Verfahren abspeichern.
Wenn man komplexere Codierungen z. B. LZW (GIF) verwendet, lassen sich noch bessere
Kompressionsfaktoren erreichen, da dann auch sich wiederholende Muster erkannt werden. Auch hier
gilt, daß Echtfarbenbilder nur schlecht komprimiert werden können.
Verlustfreie Kompression
Nach dem Satz von Shannon ist die maximale Entropie einer Informationsquelle S definiert durch
H(S) = Summe(Pi * ld(1/Pi))
wobei Pi die Wahrscheinlichkeit des Auftretens vom Symbol Si ist. ld(1/Pi) ist der Logarithmus zur
Basis 2 von 1/Pi und gibt an, wieviele Bits benötigt werden, um das Symbol Si zu codieren. Dazu ein
Beispiel:
Für ein Bild mit gleichverteilten Graustufenwerten gilt pi = 1/256. Es werden also 8 Bit benötigt, um
jede Graustufe zu codieren. Die Entropie des Bildes ist 8.
Die folgenden Algorithmen können mit einem einfachen Beispiel erläutert werden. Es sei die folgende
Häfigkeitsverteilung gegeben:
Symbol A B C D E
---------------------------------
Anzahl 15 7 6 6 5
Webdesign
Bildkompressionsverfahren 26

Ein erster Ansatz
Wenn man einen Code mit fester Wortlänge verwendet, benötigt man 3 bit pro Symbol. Für die oben
angegeben Anzahlen gibt das
(15 + 7 + 6 + 6 + 5)*3 = 39*3 = 117 bit
Es wird nun versucht, für die häufigsten Symbole einen kurzen, für die seltenen Modelle einen
längeren Code zu finden. Dabei muß auf jeden Fall die Fano-Bedingung erfüt sein: Kein Codewort
eines Codes mit variabler Wortlänge darf Anfang eines anderen Codewortes sein.
A 0
B 10
C 11
D 110
E 111
Nun benötigt man nur noch
15*1 + 7*2 + 6*2 + 6*3 + 5*3 = 15 + 14 + 12 + 18 + 15 = 74 bit
Mit zunehmender Zahl von Symbolen würde bei diesem Ansatz die Länge der Codeworte rasch
steigen. Deshalb werden in der Praxis andere Algorithmen verwendet.
Der Shannon-Fano-Algorithmus
Der Algorithmus hat einen Top-Down-Ansatz:
1. Sortiere die Symbole nach ihrer Auftretenshäufigkeit, z. B. ABCDE
2. Teile die Folge rekursiv in jeweils zwei Teile, wobei in jeder Hälfte die Summe der Anzahlen
etwa gleich sein sollte. Linke Zweige erhalten die '0' und rechte Zweige die '1'.
Das sieht für unser Beispiel dann so aus:
/\
0/ \1
/ \
AB CDE
/\
0/ \1
/ \
/\ 0/\1
0/ \1 / \
A B C DE
/\
0/ \1
/ \
/\ 0/\1
0/ \1 / \
A B C /\
0/ \1
D E
Webdesign
Verlustfreie Kompression 27

Es ergibt sich somit folgende Codierung:
Symbol Anzahl ld(1/p) Code Anzahl Bits
A 15 1.38 00 30
B 7 2.48 01 14
C 6 2.70 10 12
D 6 2.70 110 18
E 5 2.96 111 15
Huffman-Codierung
Dieser Algorithmus verfolgt einen Bottom-Up-Ansatz:
1. Init: Trage alle Knoten in eine OPEN-Liste ein, immer sortiert. Z. B: ABCDE.
2. Wiederhole, bis die OPEN-Liste nur noch einen Knoten enthält:
1. Nimm die beiden Knoten mit der geringsten Häufigkeit (bzw. Wahrscheinlichkeit) aus
der OPEN-Liste und erzeuge einen Eltern-Knoten für sie.
2. Weise dem neuen Knoten die Summe der Häufigkeiten (bzw. Wahrscheinlichkeiten)
seiner beiden Kinder zu und trage ihn in der OPEN-Liste ein.
3. Weise den beiden Zweigen zu den Kind-Knoten die Werte '0' und '1' zu und lösche sie
aus der OPEN-Liste.
P4(39)
/\
0/ \1
/ \
/ \
/ \
A(15) \P3(24)
/\
0/ \1
/ \
P2(13)/ \P1(11)
/| /\
0/ |1 0/ \1
/ | / \
/ | / \
B(7) C(6) D(6) E(5)
Es ergibt sich somit folgende Codierung:
Symbol Anzahl ld/1/p) Code Anzahl Bits
A 15 1.38 0 15
B 7 2.48 100 21
C 6 2.70 101 18
D 6 2.70 110 18
E 5 2.96 111 15
Für beide Algorithmen gilt:
Webdesign
Verlustfreie Kompression 28

• Die Decodierung für die beiden Algorithmen ist einfach, sofern die Codierungstabelle vor den
Daten übertragen bzw. mit den Daten gespeichert wird.
• Kein Codewort ist Beginn eines anderen, die Codierung ist eindeutig (Fano-Bedingung) und
einfach zu decodieren (alle Codesymbole sind Blattknoten des Codebaums).
• Wenn Statistiken über die Daten existieren, liefert die Huffman-Codierung sehr kompakte
Daten.
• Wird eine Standard-Codetabelle verwendet ist die Kompressionsrate geringer, aber es wird
immer noch eine brauchbare Kompression erzielt (z. B. bei Fax, Gruppe 3).
Verlustbehaftete Kompression
Webdesign
Verfahren wie LZW arbeiten verlustfrei, das bedeutet, man erhält nach der Dekompression exakt das
gleiche Bild wie vor der Kompression. Es gibt aber auch verlustbehaftete Verfahren, die dann stärkere
Kompressionsfaktoren erlauben. Ein Beispiel dafür ist das JPEG-Verfahren, benannt nach der 'Joint
Photographic Expert Group'.
Man erkannte schnell, daß die Bildinformation nicht immer 1:1 erhalten bleiben muß, damit das
rekonstruierte Bild sich auf den ersten Blick nicht vom Original unterscheidet, da schon das Scannen
Farbübergänge in ein Raster preßt (quantisieren). Dies führte zur Entwicklung eines leistungsfähigeren
Verfahrens namens JPEG durch die gleichnamige ISO/CCITT Kommission. Der Begriff Verlust ist
hier etwas irreführend: es geht nicht hauptsächlich Bildqualität verloren, sondern Information, die bis
zu einem gewissen Grad redundant ist. So sind mit JPEG Kompressionsraten von 20:1 möglich, ohne
daß man große Unterschiede zum Originalbild erkennen kann. Das Bild wird dazu in Quadrate von
acht Pixeln Kantenlänge zerlegt und dann mit mathematischen Operationen (Cosinus-Transformation)
komprimiert. Der Kompressionfaktor beeinflußt die Größe der Datei und auch die Qualität der
Wiedergabe. Bei zu hoher Kompression werden die 8 x 8-Quadrate sogar sichtbar.
JPEG bezeichnet also kein Dateiformat, sondern eine ganze Familie von Algorithmen zur
Kompression digitalisierter Standbilder in Echtfarbqualität. Diese Sammlung unterschiedlichster
Verfahren wurde 1993 unter der Bezeichnung ISO 10918 als Standard festgeschrieben.
Aus diesem Werkzeugkasten können sich Entwickler je nach gewünschtem Anwendungsgebiet die
benötigten Teile herausnehmen und in ihren Hard- und Softwareprodukten implementieren. Dabei
kann der Anwender die Kompressionsparameter seinen Anforderungen entsprechend angeben; dabei
sinkt natürlich die Qualität des komprimierten Bildes mit steigender Kompressionsrate. So können
extrem kleine Bilddateien erzeugt werden, z.B. für Indexarchive von Bilddatenbanken.
Die verlustbehafteten JPEG-Prozesse sind auf fotografische Aufnahmen mit fließenden
Farbübergängen hin optimiert. Für andere Arten von Bildern sind sie weniger geeignet z. B. für
Bilddaten mit harten Kontrasten wie Cartoons, Liniengrafiken oder Texte, die meist große Farbflächen
und abrupte Farbwechsel enthalten.
Bei der Entwicklung des JPEG - Standards war es oberstes Ziel einheitliche Verfahren bereitzustellen,
die möglichst alle Belange der Bilddatenkompression abdeckt. Dabei wurde auf folgende Aspekte
besonderen Wert gelegt:
• Verfahren zur Kompression ohne Datenverlust
• Verfahren zur Kompression mit Datenverlust, allerdings mit einstellbarer Kompressionsrate
• Algorithmen sollten eine vertretbare Komplexität aufweisen
• Das Verfahren sollte für alle Arten von unbewegten Bilddaten anwendbar sein, also auch
keine Beschränkung der Farbtiefe.
Die verwendeten Algorithmen sollten sowohl in Software als auch in Hardware relativ schnell und
einfach zu implementieren sein.
Untersuchungen des JPEG-Gremiums haben ergeben, daß bei den verlustbehafteten
Umformungsmethoden die 8 x 8 diskrete Kosinustransformation (DCT) die besten Ergebnisse liefert.
Verlustbehaftete Kompression 29

Für die Operationen, die auf der DCT beruhen wurde ein Minimal-Algorithmus, der Baseline Codec
festgelegt, auf den alle DCT-Modi aufbauen.
Die Komprimierung mit dem JPEG Baseline Codec besteht im wesentlichen aus 5 Schritten:
1. Konvertierung des Bildes in den YCbCr-Farbraum
2. Diskrete Kosinustransformation (DCT)
3. Quantisieren der DCT-Koeffizienten
4. Codieren der Koeffizienten
5. Kompression der Daten
DerYCbCr-Farbraum
Webdesign
Es gibt - wie weiter vorne erwähnt - aber auch Farbmodelle, die eine Farbe nicht durch die
Grundfarben (RGB), sondern durch andere Eigenschaften ausdrücken. So zum Beispiel das
Helligkeit-Farbigkeit-Modell. Hier sind die Kriterien die Grundhelligkeit der Farbe, die Farbe mit dem
größten Anteil (Rot, Grün oder Blau) und die Sättigkeit der Farbe, z.B. pastell, stark, fast weiß, usw.
Dieses Farbmodell beruht auf der Fähigkeit des Auges geringe Helligkeitsunterschiede besser zu
erkennen als kleine Farbunterschiede. So ist ein grau auf schwarz geschriebener Text sehr gut zu
lesen, ein blau auf rot geschriebener, bei gleicher Grundhelligkeit der Farben, allerdings sehr schlecht.
Solche Farbmodelle nennt man Helligkeit-Farbigkeit-Modelle.
Verlustbehaftete Kompression 30

Das YCbCr-Modell ist ein solches Helligkeit-Farbigkeit-Modell. Dabei wird ein RGB-Farbwert in
eine Grundhelligkeit Y und zwei Komponenten Cb und Cr aufgeteilt, wobei Cb ein Maß für die
Abweichung von der 'Mittelfarbe' Grau in Richtung Blau darstellt. Cr ist die entsprechende Maßzahl
für Differenz zu Rot. Diese Darstellung verwendet die Besonderheit des Auges, für grünes Licht
besonders empfindlich zu sein. Daher steckt die meiste Information in der Grundhelligkeit Y, und man
braucht nur noch Abweichungen nach Rot und Blau darzustellen.
Um nun Farbwerte in RGB-Darstellung in den YCbCr-Farbraum umzurechnen, benötigt man folgende
Formel:
Y = 0,2990*R + 0,5870*G + 0,1140*B
Cb = -0,1687*R - 0,3313*G + 0,5000*B
Cr = 0,5000*R - 0,4187*G - 0,0813*B
Die Rücktransformation vom YcbCr-Farbraum in RGB-Werte geschieht wie folgt:
R = 1,0*Y + 0,0 *Cb + 1,402 *Cr
G = 1,0*Y - 0,34414*Cb - 0,71414*Cr
B = 1,0*Y + 1,7720 *Cb + 0,0 *Cr
Diskrete Kosinustransformation (DCT)
Webdesign
Das menschliche Auge ist kein perfektes Organ. So kann es zum Beispiel weiche Farbübergänge viel
schlechter auflösen als geringe Helligkeitsunterschiede. Dabei spricht man bei Farbunterschieden, die
das Auge besser auflöst von niedrigen Ortsfrequenzen, bei schlechterer Auflösung von hohen
Ortsfrequenzen. Die Analogie zu Frequenzen führt von dem räumlichen Auflösungsvermögen des
Auges her. Bei bestimmten Farbunterschieden kann man mehr unterscheidbare Farbinformationen
unterbringen (daher hohe Ortsfrequenz) als bei anderen Farbunterschieden. Die DCT nutzt nun diese
Schwäche des menschlichen Auges aus, indem sie die hohen Ortsfrequenzen herausfiltert und diese
schlechter oder auch gar nicht codiert. Zunächst werden die Eingangsdaten, die als vorzeichenlose
Ganzzahlen vorliegen, in eine für die DCT geeignete Wellenform gebracht. Dazu subtrahiert man
einfach von jedem Wert (2 hoch P-1), wobei P die verwendete Genauigkeit in Bits darstellt. Im
Baseline Codec beträgt die Genauigkeit 8 Bit, so daß der neue Referentzpunt beim Wert 128 liegt.
Dann werden die Bilddaten in Blöcken zu 8x8 Pixeln gerastert. Ein solcher Block wird nun als Vektor
(aus 64 Pixelwerten) eines geeigneten Vektorraums interpretiert. Die DCT vollzieht nun einen
Basiswechsel. F(u,v) ist der DCT-Koeffizient, f(i,j) der geshiftete Pixelwert.
Als Basisvektoren werden aber nun 64 Blöcke zu 8x8 Pixeln verwendet, welche bezüglich des
Vektorraums eine Orthonormalbasis bilden. Die Basisvektoren gewinnt man durch folgende Formel.
Verlustbehaftete Kompression 31

Durch den Basiswechsel ergeben sich 64 eindeutige Koeffizienten, die den Anteil des jeweiligen
Basisblocks an dem Bilddatenblock darstellen. Die Koeffizienten werden berechnet durch:
Um diese Koeffizientendarstellung in ihre Ursprungsform zurückzutransformieren, benötigt man
folgende Beziehung:
wobei
Webdesign
Das folgende Bild zeigt die 8 x 8 = 64 DCT-Basisfunktionen. Links oben ist F(0,0) (der DC-Anteil),
rechts untern der höchste AC-Anteil.
Bei dieser Codierung und Decodierung (Codec) treten schon ohne weitere Behandlung der
Koeffizienten Verluste auf, da die benötigte Kosinus- bzw. Sinusfunktion nur in begrenzter
Genauigkeit auf Rechnern dargestellt werden kann. Daraus folgt ebenso, daß dieses Verfahren nicht
iterierbar ist. Wird also ein mittels DCT codiertes Bild decodiert und wieder codiert, bekommt man
ein anderes Ergebnis, als bei der ersten Codierung. Der Vorteil der DCT wird bei Bildern mit
kontinuierlichen Farbübergängen besonders deutlich: Da sich benachbarte Bildpunkte in der Regel
kaum unterscheiden, werden in der Koeffizientendarstellung nur der DC-Koeffizient (das ist der
Koeffizient dessen Basisvektor in beiden Richtungen die Frequenz Null hat) und einige
niederfrequente AC-Koeffizienten (das sind die übrigen Koeffizienten) größere Werte annehmen. Die
anderen sind fast Null oder meistens sogar gleich Null. Dies bedeutet, daß kleinere Zahlen codiert
werden müssen, und dies hat bei geeigneter Darstellung schon einen Komprimierungseffekt.
Wie man aus den Formeln erkennt, ist die Berechnung der Koeffizienten recht umfangreich. So
benötigt man für einen 8 x 8-Block 63 Additionen und 64 Multiplikationen. Man kann das Problem
durch Faktorisierung vereinfachen
Verlustbehaftete Kompression 32

Die meisten Hardware- und Softwareimplementierungen von Coder und Decoder verwenden
Ganzzahlarithmetik und approximieren die Koeffizienten. Die Multiplikationen reduzieren sich dann
auf Schiebeoperationen. Der Weltrekord für die DCT lag 1989 bei 11 Multiplikationen und 29
Additionen.
Quantisierung
Webdesign
Bei der Entwicklung des JPEG-Standards war es ein Ziel, die Kompressionsparameter frei wählbar zu
machen. Dies wird durch die sogenannte Quantisierung erreicht. Die Quantisierung ist eine
Abbildung, die mehrere benachbarte Werte auf einen neue n Wert abbildet, wobei die Koeffizienten
durch einen Quantisierungsfaktor q(u,v) geteilt und auf den nächsten Integerwert gerundet werden.
Folgende Gleichung wird dabei verwendet:
Die Umkehrabbildung multipliziert dann einfach den quantisierten Wert mit dem
Quantisierungsfaktor. Durch diese Hin- und Zurücktransformation entsteht ein Informationsverlust, da
bei dieser Rückrechnung die quantisierten Werte nicht immer auf den originalen Wert zurückführen.
Je größer dabei der Quantisierungsfaktor ist, desto größer ist auch der Informationsverlust. Dieser
Informationsverlust kann durch geeignete Wahl der Quantifizierungsfaktoren so gering gehalten
werden, daß er vom Auge kaum wahrgenommen werden kann. Kompressionsraten von < 1:10 sind
hierbei leicht realisierbar, ohne daß beim rekonstruierten Bild große Unterschiede zum Original zu
erkennen sind.
Verlustbehaftete Kompression 33

Für die Quantisierung ohne sichtbaren Informationsverlust sind jeweils für Helligkeit und Farbigkeit
optimierte Quantisierungstabellen entwickelt worden. Diese sind zu entnehmen. In diesen Tabellen
werden für den DC-Koeffizienten und die niederfrequenten AC-Koeffizienten bessere (kleinere)
Quantisierungsfaktoren verwendet als für die höheren Frequenzen. Man nutzt dabei die oben genannte
Schwäche des menschlichen Auges aus.
Tabelle der Quantisierungsfaktoren q(u,v) für die Luminanz
16 11 10 16 24 40 51 61
12 12 14 19 26 58 60 55
14 13 16 24 40 57 69 56
14 17 22 29 51 87 80 62
18 22 37 56 68 109 103 77
24 35 55 64 81 104 113 92
49 64 78 87 103 121 120 101
72 92 95 98 112 100 103 99
Für die Chrominanz wird eine zweite, ähnliche Tabelle verwendet. Es lassen sich aber auch eigene
Tabellen verwenden (die dann im Header der Bilddatei mitgegeben werden).
Bei Implementierungen von JPEG kann man eine gewünschte Kompressionsrate (oder Bildqualität)
als Parameter einstellen, bei der folgenden Kompression werden einfach die Quantisierungsfaktoren
entsprechend skaliert.
Codierung der Koeffizienten (Zig-zag-Scan)
Die Codierung der quantisierten Koeffizienten erfolgt getrennt für DC- und AC-Koeffizienten. Aus
den 8x8 Blöcken wird ein sequentieller (eindimensionaler) Bitstrom von 64 Integers erzeugt. Dabei ist
der erste Wert der DC-Koeffizient, allerdings wird nicht der originale Wert, sondern, die Differenz
zum DC-Koeffizienten im vorhergehenden Block codiert. Durch die Kohärenz der DC-Koeffienten
ergeben sich auch hier wieder wesentlich kleinere Zahlen, als bei der Speicherung der absoluten
Werte. Die 63 AC-Koeffizienten werden anhand einer Zick-Zack-Kurve in sequentielle Reihenfolge
gebracht, wodurch eine Sortierung hin zu höheren Ortsfrequenzen entsteht. Da aber gerade die hohen
Frequenzanteile oft sehr klein bzw. Null sind, entsteht eine für die weitere Kompression der Bilddaten
günstige Reihenfolge.
Kompression der Daten
Webdesign
Die bisher beschriebenen Verfahren beinhalten noch keine explizite Kompression, sondern stellen nur
eine, und bei starker Qunatisierung der DCT-Koeffizienten recht grobe Transformation der Bilddaten
dar. Um die so erhaltenen Daten in einem möglichst kompakten Code abzuspeichern, stellt der
JPEG-Standard mehrere effiziente Verfahren bereit. Diese sind im einzelnen:
Verlustbehaftete Kompression 34

• Interne Ganzzahl-Darstellung mit variabler Länge (statt fester Länge)
Der Zahl wird einfach ein Zähler fester Länge vorangestellt, der angibt, wie lang die
nachfolgende Integer-Zahl ist.
• Komprimierung durch Huffman-Algorithmus
Siehe Kompressionsverfahren.
• Arithmetisches Codieren
Das arithmetische Codieren komprimiert zwar besser als das Huffman-Verfahren, hat jedoch
den Nachteil mit verschiedenen Patenten belegt zu sein, so daß Lizenzgebühren für die
Benutzung anfallen. Aus diesem Grund arbeiten viele Implementierungen mit dem
Huffman-Verfahren.
Vergleich JPEG-Codierter Bilder
Das erste Bild ist ca. 28 KByte groß und mit Faktor 1:10 komprimiert.
Das zweite Bild ist nur noch ca. 2,1 KByte groß, der Faktor ist 1:100.
Darstellungsmodi
Webdesign
• Sequential Mode:
Die Bilddaten werden in einem Durchgang, von links oben nach rechts unten codiert. Besteht
ein Bild aus mehreren Komponenten, werden diese nicht nacheinander, also Komponente für
Komponente verschlüsselt, sondern die Komponenten werden überlappt behandelt. Durch
diese überlappte Bearbeitung ist es müssen nur kleine Puffer bereitgehalten werden, da es
möglich ist die Bilddaten sofort auszugeben, z.B. an parallel arbeitende Prozesse, ohne warten
zu müssen bis alle Komponenten bearbeitet sind. Dieser Modus ist für die meisten
Anwendungen anwendbar, liefert die besten Kompressionsraten und ist mit am einfachsten zu
Verlustbehaftete Kompression 35

BMP
implementieren.
• Progressive Mode:
Dieser Modus durchläuft das Bild in mehreren Durchgängen, von denen jeder nur einen Teil
der Koeffizienten codiert. Hier bei gibt es wieder zwei grundlegende Arten: Zum einen
können die Koeffizienten in Frequenzbändern zusammengefaßt und die niedrigen Frequenzen
zuerst verschlüsselt werden, zum anderen werden die Koeffizienten mit immer besserer
Genauigkeit übertragen werden. JPEG erlaubt aber auch diese Grundarten zu kombinieren, um
so bessere Ergebnisse zu erzielen. Schaut man die Ergebnisse der einzelnen Durchgänge an,
so ist das Bild zunächst unscharf, im Laufe der Übertragung wird es jedoch zunehmend
schärfer. Dieser Mode könnte vor allem bei der Datenfernübertragung von Bildern eingesetzt
werden. Man bekommt ziemlich schnell einen Überblick auf das übertragene Bild und kann
die Übertragung abbrechen, wenn die Bildqualität ausreichend ist.
• Hierarchical Mode:
Dieser Modus ist eine andere Form des progressive mode. Der hierarchical mode verwendet
eine Menge von Bilder mit immer gröberer Auflösung, die durch Filtern mit einem Tiefpaß
und Mitteln von mehreren Pixelwerten erzeugt werden. Zunächst wird das Bild mit der
kleinsten Auflösung codiert. Dieses dient wiederum als Basis für eine Vorhersage auf das Bild
mit der nächstgrößeren Auflösung. Dieser Vorgang wird wiederholt bis die volle Auflösung
erreicht ist. Hauptanwendungsgebiet dürften große Bilddatenbanken sein, die die niedrigeren
Auflösungen für ihre Inhaltsverzeichnisse verwenden und nur bei Bedarf die höheren
Auflösungen decodieren.
Grafikformate
Bezeichnungen Microsoft Windows Bitmap, BMP, DIB
Farben 1-Bit (s/w), 4-Bit (16 Farben), 8-Bit (256 Farben), 24-Bit (16,7 Mio. Farben)
Kompression normalerweise keine oder RLE
Maximale Bildgröße 65536 x 65536 Pixel
Das Format BMP wird von den meisten Graphikprogrammen unterstützt, die unter MS-Windows
arbeiten. Auch die meisten Konvertierprogramme unterstützen BMP. Zur Zeit gibt es vier Versionen
des BMP-Formats:
• MS-Windows Version 1.x und 2.x
• MS-Windows Version ab 3.x
• OS/2 Version 1.x
• OS/2 Version ab 2.x
Webdesign
Hier wird beispielhaft nur die MS-Windows Version ab 3.x beschrieben. Eine BMP-Datei besteht aus
vier Abschnitten:
Grafikformate 36

GIF
• Der Bitmap Header enthält die Datei-Signatur "BM", die Dateilänge in Byte und den Abstand
(Offset) zwischen Dateianfang und Datenanfang in Byte.
• Im Information Header finden sich Informationen zum Bild selbst, z. B. die Höhe und Breite
des Bildes, die horizontale und vertikale Auflösung in Pixel pro Meter, der Typ der
Komprimierung und die Anzahl der benutzten Farben.
• Die Farbpalette definiert jede Farbe durch ihren Anteil an Rot, Grün und Blau.
• Die Daten enthalten die zeilenweise Rasterinformation des Bildes. Ausgangspunkt ist die
linke untere Ecke des Bildes. Bei Bilder mit 1-, 4- oder 8-Bit Farbinformation enthält der
Pixelwert nicht direkt die Farbinformation, sondern einen Index auf die Farbpalette. Bei
24-Bit Bildern entspricht der Pixelwert dem Farbwert, so daß die Farbpalette hier nicht
benutzt wird. Die Daten können RLE-komprimiert sein. Dies ist aber nur selten der Fall.
Bezeichnungen Graphics Interchange Format, GIF
Farben 1- bis 8-Bit (s/w bis 256 Farben/Graustufen)
Kompression LZW
Maximale Bildgröße 65536 x 65536 Pixel
Besonderheit
Webdesign
Mehrere Bilder in einer Datei möglich --> 'animated GIF',
'interlaced' GIF,
transparenter Hintergrund
GIF wurde von den Firmen UNISYS Corp. und CompuServe entwickelt. Ziel war eine minimale
Dateigröße zum Austausch von Graphiken über Mailboxen. Da im Mikrocomputerbereich für jede
gängige Hardware (Amiga, Atari, IBM-kompatible, Macintosh) Programme existieren, die
GIF-Grafiken verarbeiten können, ist es vor allem als Austauschformat über Hardwaregrenzen hinweg
von Bedeutung. Eine GIF-Datei kann mehrere Bilder enthalten, was z. B. Interlacing ermöglicht. Im
sequentiellen Modus wird das Bild zeilenweise von links oben nach rechts unten codiert und
ausgegeben. Unter 'Interlacing' versteht man eine Abwandlung des Bildaufbaus bei der Wiedergabe.
Es erscheint zunächst ein recht grobes Bild, das dann schrittweise immer schärfer wird. So kann man
sich schon recht schnell einen Eindruck verschaffen. Dazu wird der Bildaufbau in vier Durchgänge
aufgeteilt. Im ersten Durchgang wird ausgehend von der Zeile 0 jede achte Zeile ausgegeben, also die
Zeilen 0, 8, 16 usw. Im zweiten Durchgang wird ausgehend von Zeile 4 jede achte Zeile ausgegeben,
also 4, 12, 20 usw. Im dritten Durchgang folgt ausgehend von Zeile 2 jede vierte Zeile, also 2, 6, 10
usw. Durchgang vier vervollständigt das Bild ausgehend von Zeile 1 mit jeder zweiten Zeile, also 1, 3,
5 usw.
Des weiteren kann man eine Farbe des Bildes als 'Hintergrundfarbe' definieren. Diese Farbe (im linken
Bild hellblau) wird bei der Wiedergabe dann durch die Farbe des Hintergrundes ersetzt (rechtes Bild):
BMP 37

Zur Zeit gibt es zwei Versionen des GIF-Formats:
• GIF87a
• GIF89a
Hier wird die Version GIF87a beschrieben. Für die Version GIF89a (eine Erweiterung von GIF87a)
wird auf die obengenannte Literatur verwiesen. Diese Version ist in der Lage, mit mehreren Bildern in
einer Datei eine Animation ablaufen zu lassen (siehe später).
Eine GIF-Datei hat folgenden Aufbau:
Webdesign
• Die Signatur enthält die Buchstaben 'GIF' und eine Versionsnummer (87a oder 89a).
• Die Bildschirm-Definition definiert die Höhe und Breite des Bildschirms in Pixel, das
sogenannte Resolution Flag, Hintergrundfarbe der Grafik sowie das Pixelseitenverhältnis
(aspect ratio). Das Resolution Flag enthält Informationen über die Anzahl Bit pro Pixel (mit 4
Bit pro Pixel sind z.B. 16 Farben möglich)und die Anzahl der benutzten Farben in Bit.
Außerdem existiert ein Flag, welches das Vorhandensein der optionalen globalen Farbskala
anzeigt. Das Pixelseitenverhältnis wird aus dem Quotient von Pixelbreite und Pixelhöhe
berechnet.
• Die globale Farbskala ist für eine präzise Farbwiedergabe bei Bildern verantwortlich, die auf
einer anderen Hardware dargestellt werden sollen als sie erzeugt wurden. Für jede Farbe wird
dabei der jeweilige Anteil der Farben Rot, Grün und Blau durch einen Wert von 0 (kein
Anteil) bis 255 (voller Anteil) definiert. Anhand dieser Farbdefinition ist es anschließend
möglich, für jedes Pixel die passendste farbliche Entsprechung auf der jeweiligen Hardware
zu finden.
• Der Bild-Definitionsblock beginnt mit einem Bildtrennzeichen (2C hexadezimal) und enthält
Informationen über die Position der linken oberen Ecke des Bildes auf dem Bildschirm in
Pixel, über die Breite und Höhe des Bildes in Pixel (nicht größer als der vorher definierte
Bildschirm) sowie diverse Flags. Die Flags geben u.a. an, ob eine lokale Farbskala existiert,
ob das Bild sequentiell oder interlaced auszugeben ist und wieviele Bit eine Farbe der lokalen
GIF 38

JPG
Farbskala beschreiben.
• Eine eventuell vorhandene lokale Farbskala für ein einzelnes Bild hat Vorrang vor der
globalen Farbskala.
• Die eigentlichen Rasterdaten sind sowohl im sequentiellen Modus als auch im
Interlaced-Mode LZW-komprimiert.
• Das GIF-Endzeichen ist stets 3B in hexadezimaler Form.
Bezeichnungen JPEG File Interchange Format, JPG, JPEG, JFIF, JFI
Farben Bis 24-Bit (bis 16,7 Mio. Farben)
Kompression JPEG
Maximale Bildgröße 65536 x 65536 Pixel
Das JPEG File Interchange Format (JFIF) ist eine Entwicklung der Firma C-Cube Microsystems zur
Speicherung JPEG-komprimierter Daten. Eine JFIF-Datei hat folgenden Aufbau:
PCX
• Der Header enthält den Start of Image (SOI) marker (FF D8 hexadezimal), den Application
marker (FF E0 hexadezimal), die Größe der APP0-Daten (s. u.), die Zeichenkette JFIF, die
Versionsnummer der JFIF-Spezifikation (aktuell 1.02), die Maßeinheit (dots per inch, dots per
centimeter oder keine), die Auflösung des Bildes in der festgelegten Maßeinheit sowie die
Auflösung des optionalen Previewbildes in den APP0-Daten.
• Die APP0-Daten enthalten, falls vorhanden, 24-Bit Rot-Grün-Blau-Daten einer verkleinerten
Version des Bildes. Dieses dient dazu, sich einen ersten Eindruck des vollständigen Bildes zu
verschaffen. Dieses Preview-Bild ist nicht komprimiert.
• Optionale Header (ab Version 1.02) erlauben andere Varianten von Preview-Bildern, z.B.
auch solche, die JPEG-komprimiert sind. Version 1.02 empfiehlt, nur noch diese neueren
Header zu benutzen, um Informationen über Preview-Bilder zu speichern.
• Die eigentlichen Bilddaten bestehen aus Blöcken von JPEG-komprimierten Daten.
• EOI beendet die Datei.
Bezeichnungen PC Paintbrush File Format, DCX, PCC
Farben 1-, 2-, 4-, 8-, 24-Bit (s/w bis 16,7 Mio. Farben)
Kompression Keine oder RLE
Webdesign
JPG 39

Maximale Bildgröße 65536 x 65536 Pixel
Webdesign
Das PCX-Format wurde von der Firma ZSoft Corporation zur Speicherung und Übertragung der mit
PC-Paintbrush erstellten Grafiken entwickelt. Dieses Format wurde von Microsoft übernommen und
u.a. im Grafikprogramm MS-Paintbrush für Windows benutzt. PCX ist im PC-DOS/Windows-Bereich
weit verbreitet, aber auch auf anderen Plattformen anzutreffen.
Nachteile des PCX-Formates sind eine hardwareabhängige Darstellung von Farben und Auflösung
sowie ein relativ ineffizienter RLE-Kompressionsalgorithmus. Eine PCX-Datei hat folgenden Aufbau:
• Der Header begint mit der PCX-ID (0A hexadezimal) gefolgt von der PCX-Versionsnummer:
1. Version 2.5 mit fester EGA-Farbpalette
2. Version 2.8 mit modifizierbarer EGA-Farbpalette
3. Version 2.8 ohne Farbpalette
4. PC Paintbrush for Windows
5. Version 3.0 von PC Paintbrush (24 Bit)
• Darauf folgen im Header Daten für die Kompressionsmethode (stets eine 1 für RLE, da
scheinbar alle vorhandenen PCX-Daten komprimiert sind), die Anzahl Bits pro Farbebene
(1,2,4,8 Bit, für 16,7 Mio. Farben sind 3 Farbebenen mit je 8 Bit nötig), die Bildgröße
(Koordinaten der linken oberen und der rechten unteren Ecke), die Bildauflösung in
horizontaler und vertikaler Richtung in der Einheit dots per inch (dpi) (abhängig vom
erzeugenden Gerät), Einträge für eine 16 Farben EGA-Farbpalette, die Anzahl der Farbebenen
(1, 3 oder 4), die Größe einer nichtkomprimierten Bildzeile einer einzigen Farbebene, die Art
der Farbpalette (1= s/w oder Farbe, 2= Graustufen) sowie die horizontale und vertikale Größe
des Bildschirmes auf dem das Bild erzeugt wurde. Abgeschlossen wird der Header mit den
Zeichen 00 (hexadezimal).
Gültige Kombinationen von Farbebenen und Anzahl der Pixel pro Farbebene sind:
Farbebenen Bits/Pixel Anzahl Farben Video-Modus
1 1 2 s/w
1 2 4 CGA
3 1 8 EGA
4 1 16 EGA und VGA
1 8 256 Extended VGA
3 8 16,7 Mio. Extended VGA + XGA
• Die eigentliche Pixel-Information ist zeilenweise, nach Farbebenen getrennt komprimiert und
abgelegt. Dabei sind jeweils ebensoviele Zeilen wie Farbebenen pro Bildzeile vorhanden.
Gespeichert werden dabei Informationen zum Rot-, Grün- und Blaugehalt sowie zur
Farbintensität. Es folgen also die Pixelinformationen für eine Bildzeile in der Reihenfolge
Rot, Grün, Blau, Intensität .
PCX 40

TIFF
• Der Inhalt der Farbpalette hängt, falls diese überhaupt existiert, von der Version der
PCX-Datei ab. Hier wird nur die 256-Farben VGA-Palette kurz besprochen. Die Palette
beginnt 769 Bytes vor dem Ende der Datei. Auch ein VGA-Bild benötigt die Palette nur,
wenn das Bild mehr als 16 Farben enthält. Bei weniger als 16 Farben wird die EGA-Palette im
Header benutzt. Die Farbpalette beginnt mit den Zeichen C0 (hexadezimal). Es folgen die 768
Bytes mit den Rot-, Grün- und Blauanteilen der maximal 256 VGA-Farben.
Bezeichnungen Tag Image File Format, TIF
Farben 1- bis 24-Bit (s/w bis 16,7 Mio. Farben)
Kompression Keine, RLE, LZW, CCITT Group 3 und 4, JPEG
Maximale Bildgröße ca. 4 Milliarden Bildzeilen
Besonderheit Mehrere Bilder in einer Datei möglich
TIFF ist eine Entwicklung der Firma Aldus Corporation. Dieses Format hat sich in den letzten Jahren
zu einem der wichtigsten Formate für Rasterdateien entwickelt. Es wurde von Anfang an so
umfangreich konzipiert, daß es eine Vielzahl von Speichermöglichkeiten bietet und neben den
eigentlichen Grafikdaten auch Angaben wie der Name der benutzten Grafiksoftware oder der
Scannertyp aufgenommen werden können. TIFF ist in der Lage, Schwarz/Weiß-, Grauwert- und
Farbbilder zu speichern. Diese Möglichkeiten machen das Format komplizierter, andererseits aber
auch universeller einsetzbar. Neben den meisten Scannern benutzen viele Grafikprogramme das
TIFF-Format. Die letzte Revision ist TIFF 6.0 vom Juni 1992.
Das Einlesen von TIFF-Bildern bereitet manchen Programmen große Probleme. Aufgrund der
möglichen Komplexität einer TIFF-Datei und der damit verbundenen Varianten (z.B. viele
verschiedene Kompressionsmethoden) lesen viele Programme nur einen kleinen Anteil aller
TIFF-Varianten. Die Fehlerursache ist dabei aber meist bei diesen Programmen zu suchen, da das
TIFF-Format sehr präzise definiert ist. Wenn Sie Probleme beim Importieren einer TIFF-Datei haben,
versuchen Sie, diese, falls noch möglich, unkomprimiert abzuspeichern und dann zu importieren.
Eine TIFF-Datei hat folgenden Aufbau:
Webdesign
• Der Header enthält Informationen für die Speicherart der Datei-Bytes (II für Intel little-endian,
MM für Motorola big-endian) sowie die Versionsnummer (immer 42, unabhängig von der
tatsächlichen Revisionsnummer) und die Adresse des ersten Image File Directories (IFD).
• Ein Image File Directory (IFD) besteht aus den drei folgenden Bereichen:
TIFF 41

•
Jedes Tag (Schlüssel) enthält Informationen über das zugehörige Bild. Dies können z.B.
Bildbreite, Bildhöhe, Komprimierungsart sowie X- und Y-Offset sein. Die Anzahl der Tags ist
variabel. Es gibt über 90 verschiedene Tags, die auftreten können. Daher ist die Länge des
IFD nicht fest. Außerdem kann ein IFD überall (nach dem Header) in einer TIFF-Datei
vorkommen. Enthält die Datei mehrere Bilder, so sind mehrere Anordnungen von IFD und
Bilddaten möglich:
Header
IFD_1
IFD_2
...
IFD_n
Bilddaten_1
Bilddaten_2
...
Bilddaten_n
Header
IFD_1
Bilddaten_1
IFD_2
Bilddaten_2
...
...
IFD_n
Bilddaten_n
Header
Bilddaten_1
Bilddaten_2
...
Bilddaten_n
IFD_1
IFD_2
...
IFD_n
• Folgt keine weiteres Bild, so ist die Adresse des nächsten IFD 00 (hexadezimal).
• Zur Speicherung werden die Bilder in Streifen einer festen Länge eingeteilt. Voreingestellt
sind (2 hoch 32)-1 komprimierte Bildzeilen pro Streifen. Daher besteht ein Bild meist nur aus
einem Streifen. Verschiedene Streifen eines einzigen Bildes können an beliebiger Stelle der
TIFF-Datei auftreten. Die Bilddaten selbst können ebenfalls in beliebiger Reihenfolge
gespeichert werden. Gebräuchlich sind die Varianten
♦ Pro Bildebenen:
Rot Rot Rot ... Grün Grün Grün ... Blau Blau Blau ...
♦ Pro Farbkomponente:
Rot Grün Blau Rot Grün Blau Rot Grün Blau Rot Grün Blau
Zum vorhergehenden Abschnitt Zum Inhaltsverzeichnis Zum nächsten Abschnitt
Copyright © FH München, FB 04, Prof. Jürgen Plate
Letzte Aktualisierung: 27. May 2006
Webdesign
Webdesign
von Prof. Jürgen Plate
TIFF 42

Wo bekommt man Bilder her?
Bildbearbeitung
Erste Schritte
Nicht jeder ist ein Künstler und kann sich seine Bilder selbst malen. Für die Konstruktion von ein paar
kleinen Sinnbilder (Icons) reicht das küstlerische Können eines jeden aus, bei komplizierteren Bilder
muß man in der Regel auf andere Quellen zurückgreifen. Dies können sein:
• Sammlungen von Bilddateien (Freeware, Shareware, Payware)
• eigene oder fremde Bilder auf Photo-CD oder Diskette (Kodak macht sowas)
• gescannte Vorlagen (Papierbilder, Bücher, etc.)
Da das Scannen von Vorlagen recht häfig ist und gescannte Bilder normalerweise auch nachbearbeitet
werden müssen, zunächst ein paar Tips zum Scannen.
Richtig Scannen
Wie schon im Kapitel 2 erwähnt, dienen Scanner zur Bilderfassung. Die Detailauflösung eines
Scanner wird angegeben in dpi (dots per inch, Bildpunkte pro Zoll). Typischer Wert: 300 dpi (1 Zoll =
2,54 cm). Es lassen sich drei Scanarten unterscheiden:
Schwarz-Weiß oder Strichbild 1 Bit Information pro Bildpunkt
Graustufen oder Halbtöne
Farbe
256 verschiedene mögliche Werte
8 Bit Information pro Bildpunkt
16,7 Mio. mögliche Werte = Truecolor
24 Bit Information pro Bildpunkt
(je 8 Bit für Rot, Grün und Blau)
Scandateien (vor allem in Farbe) werden sehr schnell sehr groß. Dazu ein Beispiel: Ein Bild mit 10 x
10 cm Abmessung in Farbe mit 300 dpi gescannt ergibt eine Dateigröße von ca. 4 MByte. Daher sollte
man die Auflösung beim Scannen dem geplanten Ausgabemedium anpassen, um möglichst kleine
Dateien zu erhalten. Eine höhere Scanauflösung ist reine PLatzverschwendung! Ebenso sind Scans
sinnlos, bei denen Sie noch nicht wissen, wie Sie sie ausgeben wollen. Eine Verdoppelung der
Scanauflösung (z. B. von 150 dpi auf 300 dpi) vervierfacht die Dateigröße.
Ausgabemedien für gescannte Bilder
• OCR (Optical Character Recognition, Texterkennung)
Ziel der OCR (Optical Character Recognition) ist die Umsetzung von eingescanntem Text in
maschinenlesbaren Text.Scannen Sie die Textvorlage als Strichbild in maximaler Auflösung.
Wenn Sie viele Seiten scannen wollen, lohnt es sich, zu testen, bis zu welcher Auflösung das
OCR-Ergebnis gut bleibt. Kleinere Dateien lassen sich von der OCR-Software schneller
bearbeiten als große.
• Bildschirm
Beim Bildschirm kann jedem Bildschirmpunkt ein Scanpunkt zugeordnet sein, d. h. ein
Scanpunkt mit dem Farbwert xyz wird am Bildschirm auch als Punkt mit Farbwert xyz
dargestellt.
Die ideale Scanauflösung bei gegebener Vorlagengröße und Bildschirmauflösung zeigt die
folgende Tabelle für den Fall, daß jedem Bildschirmpunkt ein Scanpunkt mit 24 Bit Farbtiefe
Bildbearbeitung 43

•
zugeordnet werden und das Bild den gesamten Bildschirm einnehmen soll.
Vorlage Bildschirmauflösung Scannen mit Dateigröße
5x5 cm
10x10cm
20x20 cm
640x480 Pixel
800x600 Pixel
1024x768 Pixel
640x480 Pixel
800x600Pixel
1024x768 Pixel
640x480 Pixel
800x600 Pixel
1024x768 Pixel
Webdesign
300dpi
400dpi
500 dpi
150 dpi
200 dpi
300 dpi
100 dpi
100 dpi
150 dpi
1MByte
1,8 MByte
2,8 MByte
1 MByte
1,8 MByte
4 MByte
1,8 MByte
1,8 MByte
4 MByte
Beispielrechnung: 10 cm sind ungefähr 4 Zoll. Bei einer Scanauflösung von 300 dpi
entsprechen die 10 cm insgesamt ca. 1200 Scanpunkten. Bei 20 cm genügen also 150 dpi, um
dieselbe Anzahl Punkte zu erhalten.
Laserdrucker, Thermotransferdrucker etc.
Sie sollten nur in Farbe scannen, wenn der Ausdruck auch in Farbe erfolgt, da Farbdateien um
einen Faktor 3 größer sind als entsprechende SW-Dateien. Auch SW-Vorlagen sollten zum
Ausdruck als Graustufenscan und nicht als Strichbild behandelt werden. Damit läßt sich eine
deutlich höhere Endqualität erreichen.
Die Auflösung eines Druckers wird wie beim Scanner angegeben in dpi (dots per inch, Punkte
pro Zoll) Typische Werte: 300 dpi, 600 dpi.
Ein SW-Laserdrucker kann nur schwarze Punkte drucken, keine grauen Punkte. Dasselbe gilt
auch für s/w Matrixdrucker und Tintenstrahldrucker. Abhilfe schafft hier Rastern oder
Dithern.
Farbbilder werden meist auf Tintenstrahldruckern, Farblaserdruckern oder
Thermotransferdruckern ausgegeben. Der Druck erfolgt in drei oder vier Druckvorgängen mit
jeweils einer der Farben Cyan, Magenta und Gelb (plus Schwarz bei vier Durchgängen). Für
jeden dieser Vorgänge wird ein Raster- bzw. Ditherprozeß benutzt, so daß hier dieselben
Einschränkungen und Empfehlungen gelten, wie beim Graustufendruck. Beim Farbausdruck
sind jedoch eine Vielzahl weiterer Parameter zu beachten, die nicht mit dem Scannen
zusammenhängen (Stichworte: Rasterwinkel, Moire-Muster). Spezielle
Foto-Tintenstrahldrucker (Epson) verwenden zusätzlich noch helles Cyan und helles Magenta.
Bei diesen Druckern wird das Bild auch in mehreren dünnen Schichten aufgebaut.
Die Auflösung von Farbdruckern beträgt meist 300 dpi für jede Farbe.
• Thermosublimationsdrucker
Thermosublimationsdrucker sind Farbdrucker, bei denen die Farbe von drei Folien (Cyan,
Magenta, Gelb) direkt durch Erhitzen vom festen in den gasförmigen Zustand gebracht wird
(sublimieren). Der Farbdampf dringt dann in ein spezielles Hochglanzpapier ein. Die
abgedampfte Farbmenge läßt sich fast beliebig fein regulieren, so daß ein
Thermosublimationsdrucker echte 'Helligkeitswerte' drucken kann - ganz ohne Rastern oder
Dithern. Bei einer Auflösung von 300 dpi kann hier also ein Scan mit 300 dpi voll ausgenutzt
werden.
• Satzbelichter in einer Druckerei
Für einen Satzbelichter einer Druckerei gilt im Prinzip dasselbe, wie oben für farbige
Laserdrucker u.ä. aufgeführt. Lediglich die Druckauflösung liegt mit etwa 2400 dpi deutlich
höher. Beim Druck mit 257 'Grauwerten' pro Farbe (mehr kann das Auge sowieso nicht
unterscheiden) bleibt eine effektive Druckauflösung von 150 lpi Farbbilder in Zeitschriften
werden oft in dieser Auflösung gedruckt. Wird zur Sicherheit mit etwas höherer Auflösung
gescannt (Faktor 1,2 bis 1,4), sollten 200 dpi zur Ausgabe auf einem Satzbelichter genügen.
Beachten Sie: Erkundigen Sie sich vorher bei der Druckerei, in welcher Auflösung und in
Wo bekommt man Bilder her? 44

Rastern
welchem Dateiformat sie Ihre Dateien entgegennimmt.
Graustufen werden durch unterschiedlich dicke Punkte simuliert. Der Abstand zwischen den Punkten
bleibt stets derselbe. Mit zu nehmendem Grauwert können sich die Punkte sogar überlappen. Rastern
wird beim Offsetdruck oder auch beim Tiefdruck (z. B. Abbildungen in Tageszeitungen) benutzt.
Laserdrucker haben eine feste Punktgröße und sind daher schlecht zum Rastern geeignet.
Dithern
Dabei werden Graustufen durch eine Anordnung mehrerer Druckpunkte simuliert. Je mehr
Druckpunkte in einem bestimmten Gebiet (z. B. einer Druckfläche von 10 x 10 Punkten) schwarz
sind, um so dunkler scheint das Gebiet. Mit einer Matrix aus 4 x 4 Druckpunkten können
beispielsweise 17 Graustufen (mit weiß) dargestellt werden.
Effektive Druckauflösung
Da der Laserdrucker mehrere Druckpunkte benötigt (bei 17 Graustufen z. B. eine 4x4-Matrix), um
einen einzigen grauen Scanpunkt zu drucken, sinkt die Druckauflösung des Druckers. Dies wird in lpi
(lines per inch, Linien pro Zoll) angegeben und als Halbtonfrequenz bezeichnet. Für einen
300-dpi-Drucker sind dies bei 17 Graustufen 300/4 = 75 lpi. In diesem Fall würde also ein Scan mit 75
dpi (beim Scanner sind es dpi, nicht lpi!) ausreichen. Sicherheitshalber scannt man mit etwas höherer
Auflösung, um genug Reserven zu haben. Bewährt hat sich hier das 1,2- bis 1,4-fache der berechneten
Linien pro Inch.
Die Anzahl der Graustufen berechnet sich aus:
Graustufen = (dpi/lpi)*(dpi/lpi) + 1
Die Tabelle zeigt eine Empfehlung zum Scannen:
Drucken mit Graustufen
300 dpi
600 dpi
26
37
50
65
145
Effektive
Druckauflösung
60 lpi
50 lpi
85 lpi
75 lpi
50 lpi
Webdesign
Scannen mit
75 dpi
75 dpi
100 dpi
100 dpi
75 dpi
Das Wichtigste bei einer digitalisierten Fotografie ist die Vorlage. Nur gestochen scharfe Bilder haben
etwas auf der Glasplatte des Scanners zu suchen. Gehen Sie bei der Auswahl sehr kritisch vor.
Kleinere Unschärfen, die das eigene Auge auf dem Farbbild gerne übersieht, kommen nach dem
Scannen gnadenlos heraus. Problematisch sind Vorlagen aus Zeitschriften oder Zeitungen. Denn hier
droht der Moire-Effekt. Das Resultat sind Flimmereffekte und seltsame Muster im Bild. Dieser
Moire-Effekt läßt sich zwar mit einer Bildbearbeitung halbwegs beheben, doch besser ist es, ihn gar
nicht erst auftreten zu lassen.
Das gescannte Bild speichern Sie erst einmal im BMP-Format ab. Wenn bei der nachfolgenden
Bearbeitung grobe Schnitzer passieren, muß man zumindest nicht neu scannen. Auch bei der
Bearbeitung sollte man Zwischenergebnisse unter verschiedenen Namen speichern. Man hat dann
weniger Angst, bei Experimenten das Bild zu ruinieren.
Wo bekommt man Bilder her? 45

Bildbearbeitung
Bis das Bild fertig ist, sollten Sie auf jeden Fall die größtmögliche Farbtiefe verwenden (16 Mio.
Farben), da manche Filterfunktionen oder die 'Sprühdose' sonst ziemlich häßliche Ergebnisse liefern.
Grundbearbeitung
Webdesign
Hauptangriffspunkte zur Nachbearbeitung sind Helligkeit und Kontrast. Häufig kommen die Vorlagen
zu dunkel in den Computer. Paintshop Pro verhilft mit Helligkeitsverstellung und Gamma-Korrektur
den Bildern zu mehr Licht. Ob Brightness/Contrast oder Gamma Correction die besseren Ergebnisse
bringt, hängt von der Vorlage ab.
Probieren Sie es zuerst mit dem Gamma-Parameter. Um das Bild aufzuhellen, erhöhen Sie den Wert,
niedrigere Angaben dunkeln ab. Modifizieren Sie die Gamma Correction maximal in Schritten von
0,1, und sehen Sie sich mit der Preview-Funktion das Ergebnis im Originalbild an. Meist genügt eine
Änderung um wenige Stellen hinter dem Komma, um dem Foto zu mehr Helligkeit zu verhelfen. Das
linke Bild zeigt das Scan-Ergebnis, das rechte die Gamma-korrigierte Fassung.
Ebenso vorsichtig gehen Sie bei der Verstellung von Brightness und Contrast vor. Für Bilder, die auf
dem Monitor dargestellt werden sollen, lohnt es sich, einen etwas höheren Kontrast zu wählen. Im
rechten Bild wurde der Kontrast um 25 Prozent erhöht.
Leichte Unschärfen im Bild gleichen Sie mit Filterfunktionen aus (z. B. 'Sharpen'). Doch Vorsicht:
Eine übertriebene Anwendung der Schärfefunktion bringt nur störende Pixelanordnungen anstelle
einer echten Verbesserung. Allzu harte Kontraste weichen Sie 'Soften' auf. Im linken Bild wurde
Bildbearbeitung 46

'gesoftet' und im rechten Bild die Schärfe erhöht.
Webdesign
Für die Ausgabe auf SW-Druckern kann man das Bild auch in Graustufen umwandeln:
Für den Web-Einsatz sollten Sie nicht mehr als 600 Bildpunkte breite Bilder verwenden. Dann
kommen auch Besitzer kleiner Bildschirme in den Genuß Ihrer Fotos. Ausnahmen bilden
Hintergrundbilder, die bis zu 1280 Pixel breit, aber nur 8 - 16 Pixel hoch sein sollen. Beim
Verkleinern hilft die 'Resample'- oder 'Resize'-Funktion. Um das Seitenverhältnis beizubehalten,
aktivieren Sie die Option 'Maintain Aspect Ratio'. Das Programm berechnet dann automatisch die
passende Bildhöhe. Nach der Verkleinerung lohnt es sich, mit Sharpen die Bildschärfe wieder zu
erhöhen.
Als endgültiges Speicherformat empfiehlt sich bei Fotos JPEG. Bei einfachen Icons oder flächigen
Bildern (z. B. Firmenlogos, Comics, etc.) ist das GIF-Format besser geeignet. Eine Reduzierung der
Farbtiefe bringt zwei Effekte: zum einen wird der Speicherbedarf reduziert und zum anderen kommen
auch Surfer in den Genuß der Bilder, deren Grafikinterface keine 24-Bit-Farbtiefe erlaubt. Bei der
Farbreduktion sollte man auf jeden Fall die Option 'nearest color' wählen, weil das Programm sonst
versucht, zu dithern. Das folgende Bild ist auf 128 Farben reduziert.
Bildbearbeitung 47

Warnung: Bei Bildern für World-Wide-Web-Seiten kann es bei Mischung von GIF und JPEG zu
Verschlechterung der Wiedergabe kommen, wenn das Grafikinterface beim Betrachter keine
Echtfarbendarstellung erlaubt. Man sollte sich die Ergebnisse seiner Arbeit auf jeden Fall auf einen
Rechner mit 'nur' 8 Bit Farbtiefe absehen.
Weitere Funktionen von Paint-Programmen
Stifte und Sprühdose
Webdesign
Natürlich bieten die Programme weitere interessante Filter- und Bearbeitungsfunktionen. Da man ins
Bild 'hineinzoomen' kann, ist es sogar möglich, auch einzelne Pixel zu bearbeiten. Einige
Retusche-Möglichkeiten sollen an dieser Stelle kurz vorgestellt werden.
Die meisten Malprogramme kennen verschiedene Stift-Typen, die unterschiedliche Effekte auf dem
Maluntergrund hervorbringen. Grundsäzlich sollte man bei allen Retuschen die 24-Bit-Farbtiefe
wählen, da sonst einige Effekte nicht besonders gut wirken. Gegebenenfalls muß man die Farbtiefe
vor der Bearbeitung erhöhen. Die Stift-Wekzeuge haben jeweils verschiedene Parameter, mit denen
sich Dicke, Form und Deckungskraft einstellen lassen.
Das folgende Bild zeigt den Effekt der 'Sprühdose'. Links wurde eine 24-Bit-Farbtiefe gewählt, rechts
im Bild dagegen nur 4 Bit. Dort ergibt sich nur die Wirkung eines Markers. Bei der Sprühdose lassen
sich Farbmenge, Breite und Deckungskraft einstellen. Sie eignet sich gut für Retuschen.
Weitere Funktionen von Paint-Programmen 48

Webdesign
Die folgenden Beispiele sollen zeigen, wie man bestimmte Bildbearbeitungsfunktionen anwendet.
Dabei gehen wir von einem Basibild aus, das berühmte Denkmal der vier ersten amerikanischen
Präsidenten auf dem Mount Rushmore. Zuerst das Original:
Das wohl mächtigste Retusche-Werkzeug ist das sogenannte 'Clone'-Tool. Man markiert einen Punkt
auf dem Bild und bewegt dann den Mauszeiger an eine andere Stelle im Bild. Sobald man nun mit
gedrückter Taste zu malen beginnt, wird die Umgebung des markierten Punktes parallelverschoben
auf die Zeigerposition kopiert. So lassen sich z. B. störende Objekte im Vordergrund durch
benachbarte Bildpartien ersetzen - oder ein Präsident durch einen anderen (Änderung rot umrandet):
Oft will man aber nur einige Bildteile verändern. Nehmen wir wieder das Original. Dort ist der
Himmel recht grau. Mit dem 'Color Replacer' läßt sich eine bestimmte Farbe mit einer anderen
übermalen, ohne daß andere Farben betroffen werden. Man kann auch mehrere benachbarte Farbwerte
gleichzeitig übermalen, indem man den Wert 'Toleranz' hochsetzt. Im folgenden Bild wurde der
Himmel blau angemalt und mit Hilfe der Sprühdose ein paar Wölkchen dazugemalt.
Weitere Funktionen von Paint-Programmen 49

Nun werden die Blätter wegretuschiert, die etwas unmotiviert im Himmel hängen. Auch die
Tannenbäme im Vordergrund müssen weichen. Kleine Unsauberkeiten beim Malen mit dem
'Clone'-Tool oder dem Stift werden mit der Sprühdose überdeckt.
Zum Schluß kommt noch eine Beschriftung dazu. Bei der Schrift können der Zeichensatz und die
Größe gewählt werden. Außerdem läßt sich die Schrift darstellen indem man die passende
Hintergrund- und Vordergrundfarbe einstellt.
Farbe und Spezialeffekte
Webdesign
Weitere Effekte
Kommen wir zur Bearbeitung der Farbe und zu speziellen Effekten. Das Ausgangsbild ist ein
SW-Clipart von dürftiger Qualität, ein Bild von Dagobert Duck:
Es werden zuerst die Schraffurlinien wegretuschiert, indem man mit Marker und Stift die 'schlechten'
Stellen entfernt. Viele Malprogramme erlauben den Wechsel zwischen Vorder- und Hintergrundfarbe
durch Wahl der linken oder rechten Maustaste. So kann man bequem mal etwas wegnehmen mal
Weitere Effekte 50

Webdesign
etwas hinzufügen. Danach wird die Farbtiefe von 1 Bit (SW) auf 4 Bit (16 Farben) erweitert. Die
Farbpalette besteht nun nur aus der Farbe Weiß und 15 schwarzen Feldern. Sie wird erweitert, indem
man die schwarzen Felder durch eine Farbe eigener Wahl ersetzt.
Ein Doppelklick auf die gew nschte Farbe liefert das Palettenfenster. Hier kann man aus den
Standard-Windows-Farben durch Anklicken wählen (links) oder eine individuelle Farbe entwerfen
(rechts). Normalerweise wird man zuerst eine Standardfarbe links anklicken und dann rechts
Modifikationen vornehmen.
Das Ergebnis sehen Sie im folgenden Bild links. Rechts daneben befindet sich dasselbe Bild. Es
wurden lediglich die Farbwerte in der Palette geändert, ohne irgendetwas am Bild selbst zu machen.
Die einfachen Filterfunktionen wurden weiter oben schon behandelt. Daneben besitzen viele
Malprogramme sogenannte 'Deformationsfilter', mit denen das Bild verzerrt werden kann. Im linken
Bild unten wurde der Kopf auf eine Kugel abgebildet. Im rechten Bild wirden zunächst mit der
Kantensuche ('Find Edges') die Umrisse ermittelt. Da das Ergebnis farbige Linien auf schwarzem
Hintergrund liefert, wurde mit der 'Negativ'-Funktion das Bild umgekehrt und in Komplementärfarben
Farbe und Spezialeffekte 51

umgewandelt.
Will man einen reliefartigen Effekt erreichen, kann man die 'Emboss'-Funktion einsetzen. Im linken
Bild wurde die Funktion auf das Farbbild angewendet, dagegen wurde das rechte Bild zun chst auf
Gruastufen reduziert und Augen sowie der Schnabel geschwärzt. Dabei ist dann auch gleich der
Kneifer entfernt worden. Man sieht hier am Schnabel die Reliefstruktur besonders gut.
Weitere Effekte können eingesetzt werden, um ein Bild zu verfremden. Bei vielen Paint-Programmen
gibt es die Möglichkeit, durch spezielle Farbreduktion einen Poster-Effekt zu erzielen oder das Bild in
'Mosaiksteine' zur zerlegen, wobei jeweils die Farbtiefe des Posters und die Kantenlänge eines
Mosaikfeldes frei wählbar ist.
Original 'Posterize' 'Mosaic'
Progressive und transparente Bilder
Progressive, transparente und animierte GIFs
In diesem Abschnitt sollen einige Besonderheiten des GIF-Formats gezeigt werden, die oft bei der
Gestaltung von WWW-Dokumenten (siehe Kapitel 5) Anwendung finden.
Progressive GIFs
Webdesign
Progressive GIFs (meist 'interlaced GIF' genannt) sind Bilder, die sich nicht von oben nach unten
aufbauen, sondern schnell als Vollbild erscheinen. Sie sind zuerst sehr grob gerastert und im Verlaf
des Ladevorgangs zeigen sich immer mehr Details. Der Betrachter kann so schnell erkennne, ob das
Progressive und transparente Bilder 52

Bild für ihn wichtige Informationen enthält und gegebenenfalls den Ladevorgang vorzeitig abbrechen.
Dazu ein Beispiel:
Für die Konvertierung von GIF-Bildern eignet sich das Programm 'LView Pro' (Windows) recht gut.
Es erlaubt nicht nur die Konvertierung zu interlaced GIFs und transparenten GIFs, sondern auch
Farbanpssung und Filterung aller Art. Es ist jedoch kein Malprogramm. Die Bedienung ist recht
einfach. Um ein progressives GIF zu erzeugen, lädt man das Bild in LView, klickt auf 'Optionen',
'Save GIF interlaced' an und speichert das Bild wieder ab. Man kann vorher natürlich auch gleich die
Gamma-Korrektur und gegebenenfalls eine Farbreduzierung vornehmen.
Transparente GIFs
Bei diesen Bildern wird die Hintergrundfarbe des Bildes als 'transparent' deklariert.
Das erste Bild erscheint als Rechteck mit Hintergrund, was nicht so toll aussieht.
Dieses Bild nimmt dagegen die jeweilige Hintergrundfarbe an.
Beim Lview Pro lädt man das Bild und klickt 'Optionen', 'Background color' an. Danach wird die
Palette des Bildes angezeigt und man kann die gewünschte Farbe anklicken. Das Vorschaubild zeigt
den freigestellten Bildteil schwarz vor dem Hintergrund (oder umgekehrt - ganz nach Wunsch). Man
kann so erkennen, ob eventuell auch Bildteile transparent gemacht werden, die gar nicht transparent
sein sollen. Wenn dieser Fall auftritt, bleibt nichts anderes übrig, als die entsprechenden Bildteile
nochmals nachzubearbeiten. Man wählt dann für die abzudeckenden Teile am besten eine Farbe, die
ganz nahe an der ursprünglichen Hintergrundfarbe liegt. Bei vielen Malprogrammen (z. B. Paintshop)
kann man beim Speichern per Option wählen, ob der Hintergrund transparent sein soll.
Animierte Gifs
Webdesign
Hier wird die Möglichkeit genutzt, mehrere Bilder in einer Datei zu speichern. Diese Bilder
werden dann mit vorgegebenen Verzögerungszeit nacheinander dargestellt und wirken so wie ein
Progressive, transparente und animierte GIFs 53

Trickfilm. Zum Darstellen und Bearbeiten brauch man spezielle Programme. Einfache
Grafikbetrachter oder auch Malprogramme stellen nur eines der Bilder dar. Die meisten World Wide
Web Browser kommen jedoch mit animierten Bildern zurecht.
Zum Aufbau animierter GIFs braucht man zuerst Einzelbilder der verschiedenen Bewegungsphasen.
Diese Einzelbilder können mit jedem Malprogramm erstellt werden. Hier beispielsweise vier Phasen
eines Hammers:
Mit einem speziellen Programm werden die Bilder dann zu einer Animation zusammengefaßt. Es gibt
für Windows mehrere Programme zu diesem Zweck. Für den Einsteiger eignet sich der 'Gif
Construction Set' von Image Alchemy. Dies Programm besitzt eine Funktion namens 'Animation
Wizard', die einen durch den Aufbau des animierten GIFs führt. Das Ergebnis der Animation mit den
obigen vier Bewegungsphasen sieht dann so aus:
Mit mehr Aufwand kann man auch so etwas machen:
Für ein paar einfache Animationstypen hat der Gif Construction Set Standardfunktionen. Man kann
beispielsweise ein Bild aus dem Hintergrund auftauchen und wieder verschwinden lassen oder eine
Laufschrift produzieren:
Ob Laufschriften wirklich sinnvoll sind, klären wir dann im 5. Kapitel.
Bildbearbeitung für Webseiten
Die wichtigsten Bedienungselemente von Paintshop
Die Werkzeugleiste von Paintshop
Erstellt ein neues Bild. Sie müssen Farbtiefe und Abmessungen eingeben.
Öffnet ein vorhandenes Bild.
Webdesign
Bildbearbeitung für Webseiten 54

Speichert ein Bild.
Druckt ein Bild.
Macht den letzten Vorgang rückgängig.
Kopiert einen ausgewählten Bereich in die Zwischenablage und entfernt ihn
gleichzeitig aus dem Bild.
Kopiert einen ausgewählten Bereich in die Zwischenablage und belässt ihn im Bild.
Fügt ein Bild aus der Zwischenablage als neues Bild ein.
Zeigt die Grafik als Vorschau (Ganzer Bildschirm) an.
Bringt ein Bild auf 1:1-Darstellung zurück.
Blendet die Werkzeugpalette ein.
Blendet die Stil-Palette ein.
Blendet die Farbpalette ein.
Webdesign
Die Werkzeugpalette von Paintshop
Zoom-Tool: zum Ändern der Größenansicht Ihres Bildes (Mit linker Maustaste in
das Bild klicken: vergrößern; mit rechter Maustaste in das Bild klicken: verkleinern).
Wenn ein Bild größer ist als der Bild-Fensterbereich, können Sie doch alle Bildteile
sichtbar werden lassen, indem Sie das Bild scrollen.
Wählen Sie einen rechteckigen Bildausschnitt, indem Sie einen entsprechenden
Bereich mit der Maus aufziehen. Um einen Bereich einer vorhandenen Auswahl
hinzuzufügen, drücken und halten Sie die Umschalt-Taste, während Sie den Bereich
auswählen. Um einen Bereich von einer vorhandenen Auswahl zu entfernen, drücken
und halten Sie die Strg-Taste, während Sie den Bereich auswählen. Über die
Stil-Palette lassen sich auch quardratische, elliptische und kreisförmige Bereiche
definieren. Viele Werkzeuge werden nur innerhalb des selektierten Bereichs
wirksam. Deshalb gegebenenfalls die Selektion durch Klicken mit der rechten
Maustaste aufheben.
Sie wählen einen Freihand-Bildausschnitt, indem Sie eine Linie um den Bereich
zeichnen, den Sie auswählen möchten. Um einen Bereich einer vorhandenen
Auswahl zuzufügen, drücken und halten Sie die Umschalt-Taste, während Sie den
Bereich auswählen. Um einen Bereich von einer vorhandenen Auswahl zu entfernen,
drücken und halten Sie die Strg-Taste, während Sie den Bereich auswählen.
Mit dem Zauberstab können Sie einen Bereich einer bestimmten Farbe, eines
Farbtons oder einer Helligkeit auswählen. Mit Hilfe der Stil-Palette kann man
RGB-Wert, Farbton, Helligkeit sowie die Toleranz und die Randschärfe bestimmen.
Mit der Farbpipette wird eine Farbe aus der Grafik oder der Farbpalette als
Vordergrundfarbe (linke Maustaste) oder als Hintergrundfarbe (rechte Maustaste)
abgegriffen.
Die Werkzeugleiste von Paintshop 55

Den Standardpinselverwenden Sie, um zu malen oder freihändig zu zeichnen. Die
Stil-Palette beitet zahlreiche Optionen fü Pinselform und -größe sowie Dichte und
andere EInstellungen.
Sie können den Kopierpinsel benutzen, um Bildteile an eine andere Stelle zu
kopieren. Mit dieser Aktion können Sie innerhalb eines Bildes oder zwischen zwei
Bildern gleicher Farbtiefe kopieren. Um einen Startpunkt für das Kopieren zu
wählen, halten Sie die Shift-Taste gedrückt und klicken SIe an eine Bildstelle.
Sie benutzen den Farbwechsler, um die jeweilige Vordergrundfarbe in einem Bild
durch die jeweilige Hintergrundfarbe auszutauschen und umgekehrt (linke bzw.
rechte Maustaste). Die Stil-Palette erlaubt umfangreiche Anpassungen des
Werkzeugs. EIn Doppelklick tauscht die Farbe im gesamten Bild aus.
Sie benutzen das Retusche-Tool, um fotografische Retuschier-Effekte (z. B.
Aufhellen, Verwischen) an einem Bild vorzunehmen. De Handhabung ist wie beim
Pinsel.
Das Radiergummi löscht eine Bildfarbe (Ersetzen durch Hintergrundfarbe oder
transparent machen).
Die Sprühdose simuliert das Malen nach der Airbrush-Technik oder das Zeichnen
mit einer Sprühdose. Sehr dünn eingestellt eignet sie sich auch zur Retusche von
Rändern und Übergängen.
Mit dem Füll-Tool können Sie einen Bereich mit einer Farbe oder einem Muster zu
füllen. Die Begrenzung wird entweder durch eine Selektion oder durch eine andere
Farbe hergestellt. Neben Einzelfarben ist auch das Füllen mit Mustern oder
Farbverläufen (linear, Rechteck, Wellen, usw.) möglich.
Das Text-Tool benutzen Sie, um dem Bild einen Text zuzufügen. Sie können
verschiedenen Schriftarten und -größen wählen. Dazu klicken Sie zuerst mit dem
Texttool auf das Bild und geben dann Text und Optionen ein. Der Text wird als
Sektion im Bild plaziert und kann noch verschoben oder gedreht werden.
Mit dem Linien-Tool werden Linien gezeichnet. Die Linienbreite können Sie in der
Stil-Palette verändern. Neben dem "normalen" Linienziehen ist auch das Zeichen
von Polygonzügen und Glättung per Bezier-Funktion möglich.
Mit dem Formen-Tool können Sie Rechtecke, Quadrate, Ellipsen oder Kreise
zeichnen - entweder nur den Rand oder als gefüllte Fläche. Die Formen können Sie
in der Stil-Palette verändern.
Die Farbpalette von Paintshop
Webdesign
Klicken Sie - falls die Palette nicht schon angezeigt wird - auf den -Button in der Werkzeugleiste.
Die Farbpalette wird eingeblendet.
Mit der Pipette kann im oberen Feld direkt die Farbe ausgewählt
werden.
Durch Doppelklicken auf den Pfeil wir Vorder- und Hintergrund
gewechselt. Doppelklick auf das Farbfeld öffnet das
Mischfarbenfenster (s. unten)
Die Werkzeugpalette von Paintshop 56

Die RGB-Werte werden direkt angezeigt. Das Feld zeigt die
gewählte Farbe - auch, wenn Sie die Pipette über das Bild bewegen.
Durch Klick auf die Vorder- oder Hintergrundfarbe können Sie eine eigene Mischfarbe erstellen.
Sie können entweder eine Grundfarbe anklicken oder frei aus dem Farbfeld wählen. Ebenso ist es
möglich, eine Grundfarbe anzuklicken und deren Sättigung mit dem vertikalen Balken ganz rechts zu
ändern. Weiterhin kann die Farbe auch direkt numerisch als RGB- oder HSB-Wertetripel eingegeben
werden. Eingene Mischfarben, die man häfiger benötigt, können in der Palette der benutzerdefinierten
Farben dauerhaft abgelegt werden.
Grafiken selbst erstellen
Webdesign
Als erstes sollten Sie kleine Grafiken (Logos, Buttons) selbst malen, um mit der Arbeitsweise von
Paintshop vertraut zu werden. Natürlich können Sie auch fertige Grafiken verändern (Copyright
beachten!).
Um eine neue Bilddatei anzulegen wählen Sie [DATEI] / [NEU]. Geben Sie die gewünschte
Bildbreite und -höhe in Pixeln ein. Geben Sie die Farbtiefe ein (für alle Arbeiten beginnen Sie mit 16
Mill. Farben). Das Programm errechnet die Größe der unkomprimierten Datei (im Bitmap-Format!).
Die Farbpalette von Paintshop 57

Die festgelegten Eigenschaften lassen sich bei Bedarf später ändern (z.B. durch Zuschneiden oder
Bereich erweitern). Zur Erstellung der Grafiken bedienen Sie sich der Werkzeuge aus der
Werkzeugpalette.
Zuschneiden der Grafik
Markieren Sie mit dem Selektions-Werkzeug den gewünschten Grafikausschnitt und kopieren Sie
mit oder [Strg]-[C] die Auswahl und erzeugen Sie ein neues Bild mit der Auswahl indem Sie
aklicken oder [Strg]-[V] drücken.
Bereich erweitern
Wählen Sie in der Menüleiste [BILD] / [ERWEITERE BEREICH] und geben Sie die gewünschte
Bildgröße ein. Als Ergebnis erhalten Sie Ihre Grafik in unveränderter Größe eingefügt in einen
vergrößerten Bildbereich. Achten Sie auf die eingestellte Hintergrundfarbe, denn mit dieser wird der
neue Bereich gefüt. Erweitert man das Bild nur um ein Pixel auf jeder Seite und wält eine
kontrastierende Hintergrundfarbe, erhät man einen Rahmen.
Bildgröße ändern
Wählen Sie in der Menüleiste [BILD] / [GRÖSSE ÄNDERN] und geben Sie die gewünschte
Bildgröße ein. Als Ergebnis erhalten Sie Ihre Grafik vergrößert bzw. verkleinert auf die eingestellte
Bildgröße. Speichern der Grafik
Grafiken nachbearbeiten mit Paintshop
Korrektur von Helligkeit und Kontrast
Webdesign
Wählen Sie im Menü zuerst [FARBEN] [JUSTIEREN] [GAMMAKORR.] und korrigieren Sie die
hellsten und dunkelsten Stellen damit. Nicht zu stark korrigieren, da die anschließende Korrektur von
Helligkeit und Kontrast auch noch auswirkungen auf das Bild hat.
Wählen Sie dann im Menü [FARBEN] [JUSTIEREN] [HELLIGKEIT/KONTRAST] und korrigieren
Sie diese Werte nach Bedarf. Das Vorschaubild zeigt Ihnen den Effekt an.
Grafiken selbst erstellen 58

Beschneiden des Bildausschnitts
Wählen Sie dazu das Markierungswerkzeug und ziehen Sie einen Rahmen (Rechteck, Kreis, Oval,
...) um den gewünschten Bildausschnitt.
Mit oder der Tastenkombination [Strg]-[C] wird der Ausschnitt in die Zwischenablage kopiert.
Mit oder der Tastenkombination [Strg]-[V] wird der kopierte Ausschnitt als neues Bild (-Fenster)
geöffnet und kann dann nachbearbeitet werden. Mit der Tastenkombination [Strg]-[E] kann der
Ausschnitt in ein vorhandenes Bild eingefügt werden.
Verringern der Farbtiefe
Echtfarbenbilder (z. B. Photos) können Sie im JPG-Format direkt abspeichern, denn wenn Sie bei
solchen Bildern die Farbtiefe auf 256 Farben reduzieren und das Ganze dann im GIF-Format
speichern, ist die Datei meist größer als im JPG-Format ohne Farbreduzierung. Auch bei
Farbverläufen sollten Sie keine Farbreduzierung anwenden, weil das Bild dann streifig wird.
Farbgrafiken (Icons, Buttons, usw.) können Sie mit der Auswahl [FARBEN]
[FARBTIEFE VERRINGERN] auf 256 oder weniger Farben (128, 64, 32, 16, ...) reduzieren. Das
Menü bietet die Abstufung 256, 16 und 2. Mit [X-FARBEN] können Sie beliebige Werte von 2 bis
256 wählen. Wählen Sie "Optimierung"und "Nächstlgd." oder ggf. "Fehlerstreuung".
Konvertieren des Bildes
Webdesign
Bei Echtfarbenbildern und Grafiken mit Farbverläufen verwenden Sie das JPG-Format. Wählen Sie
[DATEI] [SICHERN ALS] und unter "Dateityp" das Format "JPG-JPEG-JFIF-kompatibel":
Grafiken nachbearbeiten mit Paintshop 59

Wählen Sie [OPTIONEN] und dort die Registerkarte JIF/JPG. Als "DPI-Zahl" stellen Sie 100 ein und
als Kompressions-Stufe 15 (= Qualität 85). Sie können bis 75 dpi und Kompressionsstufe 25 gehen, ab
da nimmt die Bildqualität rapide ab.
Bei Grafiken mit bis zu 256 Farben, bei Graustufenbildern und Halbtonbildern (schwarz/weiß)
verwenden Sie das GIF-Format. Wählen Sie [DATEI] [SICHERN ALS] und unter "Dateityp" das
Format GIF. Es gibt vier Untertypen:
Die Version 89a erlaubt transparente GIF-Bilder. "Interlaced" bedeutet, daß das Bild zuerst unscharf
und grob, dann immer schärfer aufgebaut wird. Der Betrachter erkennt hier schon während des
Bildaufbaus schemenhaft das Bild.
Transparente Grafiken erzeugen
Webdesign
Transparenz bedeutet, daß bestimmte Farben vor einem farbigen Hintergrund durchscheinend
erscheinen. Die dazu erforderlichen Einstellungen werden bis zur Version 5 beim Abspeichern
Grafiken nachbearbeiten mit Paintshop 60

vorgenommen (siehe Beispiel). Ab Version 6 findet man die Optionen unter dem Menüpunkt
[FARBE].
Ohne Transparenz
Mit Transparenz der Indexfarbe 12 (gelb)
Beide Bilder sind gleich, die untere ist mit Transparenz abgespeichert. Die Transparenz wurde auf die
Indexfarbe 12 (gelb) gesetzt.
Bestimmen des Transparenzwertes
Webdesign
Grafiken nachbearbeiten mit Paintshop 61

Mit der Pipette auf die Farbe gehen, die transparent gesetzt werden soll, und in der Farbpalette den
Transparenzwert ablesen (im Beispiel "I 12").
In der Regel wird man die Hintergrundfarbe einer Grafik transparent setzen, um die rechteckige
Umrahmung der Grafik zu vermeiden. Kommt dabei die Hintergrundfarbe auch in der Grafik vor,
wird ein Teil der Grafik damit ebenfalls transparent. Um diesen Effekt zu vermeiden, müssen Sie
entweder die Hintergrundfarbe der Grafik auf eine Farbe umfärben, die nicht in der Grafik vorkommt,
oder aber die Farbe in der Grafik geringfügig abändern.
Wie man einen Button macht
Webdesign
Zuerst ein neues Bild beginnen, z. B. 50 x 50 Pixel gross.
Damit der Button überall passt, sollte er auch mit wenig
Farben auskommen, weshalb nur 16 Farben verwendet
werden. Um erhaben zu wirken, braucht der Button einen
Rand.
Es gilt die Regel: wenn der Rand links und oben hell ist
und rechts/unten dunkel, erscheint der Knopf erhaben.
Umgekehrt ergibt sich ein vertieftes "Fenster". Damit man
den Effekt gut sieht, wurde diese Seite leicht grau gefärbt.
Also malen wir den Rand. Ganz aussen Linien in Schwarz
und Weiss.
Eine Pixelreihe nach innen nehmen wir dan Dunkelgrau
neben dem Schwarz und Hellgrau neben dem Weiss.
Nun ist der Knopf fertig. Man kann auch drei Abstufungen
nehmen oder die Kanten zwei Pixel breit machen.
Natürlich geht es auch mit farbigen Buttons, man muß
lediglich die Farbtöne passend wälen.
Jetzt bekommt der Button noch eine Beschriftung oder ein
Logo. Damit die Schrift nicht so flach wirkt wurde sie
zuerst in Dunkelrot auf den Knopf gesetzt und dann leicht
nach links oben versetzt in Hellrot.
Wenn man die Folge der Farbtoene nach innen umkehrt,
erscheint der Button als Fläche, die einen erhabenen
Rahmen besitzt. Hier wurde die helle Schrift auch weiter
nach links oben versetzt und sie erscheint so noch
'schwebender'.
Wie man einen Button macht 62

Statt einer Schrift kann natürlich auch ein Sinnbild (Icon)
erscheinen.
Im Detail sehen die rechten oberen Ecken der Buttons 'Klick' und 'Wow' so aus:
Nach diesem einfachen Strickmuster sind auch die Standard-Windows-Fenster gemacht worden, z. B.:
Die 'Ja'-Taste hat zusätzlich einen schwarzen Rand bekommen und innen eine strichlierte Linie.
Gedückt oder nicht?
Es gilt bei allen Systemen die Regel:
Webdesign
Das Licht kommt immer von links oben! Wir sind einfach daran gewöhnt eine Figur als erhaben
anzusehen, wenn das Licht von links oben zu kommen scheint. Betrachten Sie die beiden folgenden
Buttons:
Der linke Button scheint erhaben zu sein, der rechte wirkt, als sei er gedrückt. Dabei ist nur die Lage
der Ränder an der Diagonale von rechts unten nach links oben gespiegelt.
Wie man eine Schrift mit Schatten macht
Gedückt oder nicht? 63

Webdesign
Wie man ein Photo "ins Bild" setzt
Zuerst wird der Text in schwarz oder
einem anderen dunklen Ton gesetzt.
Dazu zuerst die Vordergrundfarbe
wählen, dann Schriftfont und -größe.
Text eingeben und plazieren.
Dann mit der "Blur"-Funktion die
Schrift verwischen. Wenn ein Aufruf
der Blur-Funktion nicht reicht, muß
man sie mehrmals anwenden.
Nun die Schriftfarbe, z. B. rot, wählen
und den Text leicht nach oben und
links versetzt auf den verwaschenen
schwarzen Text setzen.
Wenn man will, kann man die Schrift
dann noch mit der "Soften"- Funktion
leicht unscharf machen - so wie man
es heutzutage oft auf Webseiten sieht.
Normale, rechteckige Fotos wirken mitunter etwas langweilig. Wir wollen aus einem gewöhnlichen
Foto etwas Besonderes machen. Zuert wird das Bild eingescannt. Gegegebenenfalls muß noch eine
Korrektur von Gammawert, Helligkeit und Kontrast durchgeführt werden.
Nun aus dem Bild ein Oval ausschneiden und das als neues Bild speichern. Die Maîangaben des Ovals
(Startpunkt, Groesse) aufnotieren, denn die werden noch gebraucht.
Wie man eine Schrift mit Schatten macht 64

Webdesign
Nun müssen Sie ein neues Bild erzeugen, das etwas groesser als das ursprüngliche Photo ist. Auf dem
neuen Bild wird nun ein schwarzes Oval mit den oben notierten Abmessungen erzeugen.
Alternativ kann man das ovale Foto nochmals als neues Bild speichern, dieses Bild vergröîern (weiîer
Rand), den Rand mit dem Zauberstab selektieren (Toleranz 0), eine Maske ("aus Selektion") bilden,
die Maske invertieren und schon hat man ein passendes schwarzes Oval, das man dann als neues Bild
abspeichert.
Das schwarze Oval wird nun aufgehellt und dann die Ränder unscharf gemacht. Das erreicht man
durch mehrfaches Anwenden des "Blur"-Filters.
Nun geht es wieder mit dem Originalbild weiter. Das Foto wird nun grau skaliert.
Wie man ein Photo "ins Bild" setzt 65

Wichtig! Damit die weitere Bearbeitung klappt, muß nun die Farbtiefe wieder auf 24 Bit gesetzt
werden. Damit das Bild den Touch alter Fotos bekommt, wird nun die Farbe geändert, indem der
RGB-Wert modifiziert wird, z. B.: Rot + 15%, Grün + 2% und Blau - 10%.
Nun den Rand mit Zauberstab selektieren (Toleranz 0) und die Selektion invertieren. Nun ist das ovale
Bild selektiert und kann ausgeschnitten werden. Jetzt nehmen wir das graue Hintergrundoval und
setzen das ausgeschnittene Photo leicht verschoben auf das graue Feld. Fertig ist das "antike" Photo
mit Schatteneffekt.
Farbverläufe
Webdesign
Für Hintergründe, Buttons, Banner, etc. braucht man oft einen Farbverlauf, damit das Bild nicht zu
langweilig wirkt. Für alle folgende Arbeiten brauchen Sie nur das Füllwerkzeug . Diesmal wird
jedoch nicht mit einer konstanten Farbe gefüllt, sondern die Möglichkeit genutzt, Füllstile zu
verweden. Begonnen wird mit einem neuen Bild. Für das Beispiel wurde ein Format von 400 x 20
Farbverläufe 66

Pixeln verwendet. Soll der Verlauf für einen Hintergrund verwendet werden, muî man das Kacheln
des Bildes in horizontaler Richtung vermeiden, indem die Bildbreite auf 2048 Pixel oder mehr gesetzt
wird. Der "interessante" Teil des Verlaufs liegt dabei aber meist in den linken 400 bis 800 Pixeln. Für
Buttons, Banner, etc. verwendet man gleich die gewünschte Größe.
Als erstes wird ein einfacher horizontaler Verlauf erzeugt. Der Farbverlauf wird dabei immer
zwischen den eingestellten Farben für Vorder- und Hintergrund erzeugt. In den folgenden Beispielen
wurde blau für den Vordergrund und rot für den Hintergrund verwendet. Es wird im Kontextmenü für
das Füllwerkzeug "linearer Gradient" gewählt und als Richtung ein WInkel von 90 Grad eingestellt.
Das Vorschaubild zeigt den Verlauf.
Dann klickt man mit dem Füllwerkzeug in das neue Bild und schon ist man fertig.
Soll der Verlauf nicht gleichmäßig über das ganze Bild erfolgen, sondern nur im linken Bereich,
selektieren Sie zuerst den gewünschten Bereich, z. B. ein Feld von 100 Pixel Breite. Manchmal ist es
einfacher, die Abmessungen direkt einzugeben, als mit der Maus zu selektieren. Dazu klicken Sie
zweimal (!) auf das entsprechende Icon . Es erscheint ein Menü, wo Sie die Werte direkt eingeben
können.
Das selektierte Feld wird nun gefüllt.
Webdesign
Nun kann man die Selektion aufheben und den freien Bereich mit der Hintergrundfarbe ohne Verlauf
füllen (rechte Maustaste).
Farbverläufe 67

Nebenbei: Sie können zum Füllen auch ein beliebiges Bild verwenden. Dazu wählen Sie beim
Füllwerkzeug "Muster" als Füllstil. Das zum Füllen verwendete Bild wird geladen und dann beim
neuen Bild über die Optionen des Füllwerkzeugs das geladene Bild als Muster eingestellt.
Dann nur noch mit dem Füllwerkzeug ins neue Bild klicken - fertig. Als Füllmuster eigen sich
natürlich besonders irgendwelche Hintergrundtexturen, dasich hier linke und rechte Seite des Musters
nahtlos aneinanderfügen.
Ein letztes Füllbeispiel wechselt von blau auf rot und wieder zurück. Dazu wird erst die linke
Bildhälfte selektiert und gefüllt.
Danach die Selektion invertieren und die nun die rechte Seite in umgekehrter Richtung füllen.
Sehr gut sehen auch diagonale Verläufe (45 Grad) aus. Oder Sie kombinieren Füllmuster und
Farbverlauf. Anschließend können Sie das Bild mit Filtern und Verformungs-Funktionen noch
weiterbearbeiten oder einen Rahmen hinzufügen. Der Phantasie sind da keine Grenzen gesetzt.
Sitemap-Grafiken
Für Verzeichnisse (Sitemaps, "Verzierung" von Linklisten, etc.) kann man sich eine Reihe von kleinen
Icons basteln. Die folgende Gruppe von Bildern ist durch Capture und Nachbearbeitung der
entsprechenden Windows-Explorer-Anzeige entstanden.
Wenn man diese Icons passend kombiniert und anordnet (mittels HTML-Tabelle, siehe später) lassen
sich daraus sehr flexible Verzeichnislisten herstellen:
Hauptüberschrift
1.1 Unterpunkt
1.2 Unterpunkt
1.3 Unterpunkt
Webdesign
Sitemap-Grafiken 68

1.3.1 Unterpunkt
1.3.2 Unterpunkt
1.3.3 Unterpunkt
1.3.4 Unterpunkt
1.4 Unterpunkt
1.5 Unterpunkt
Tips für Bilder auf Webseiten
Bildausschnitt verkleinern
Wählen Sie durch Beschneiden des Bildes einen möglichst knappen Bildausschnitt.
Bildauflösung herabsetzen
WEB-Bilder sind in erster Linie für die Betrachtung am Monitor gedacht, deshalb reichen
Auflösungen von 70 dpi bis 100 dpi. Diese Auflösung sollten Sie schon beim Scannen wählen.
Farbtiefe beschränken
Sie müssen nicht immer mit einer Farbtiefe von 24 Bit, das entspricht ca. 16 Millionen Farbnuancen,
arbeiten. Prüfen Sie, ob nicht auch eine Farbtiefe von 256 optimierten Farben eine ähnliche
Bildqualität ergibt. Noch stärker ist der Platzspareffekt, wenn Sie Bilder auf Graustufen umrechnen
lassen.
Verwenden von Vorschaubildchen
Lassen sich voluminöse Grafikdateien nicht vermeiden, so erzeugen Sie kleine Vorschaubildchen
(Thumbnails) und geben Sie die Dateigröße der großen Grafikdatei an. So hat der Betrachter die
Wahl, ob er die Datei laden will oder nicht.
Zum vorhergehenden Abschnitt Zum Inhaltsverzeichnis Zum nächsten Abschnitt
Copyright © FH München, FB 04, Prof. Jürgen Plate
Webdesign
Webdesign
von Prof. Jürgen Plate
Tips für Bilder auf Webseiten 69

AVI-Format von Microsoft
Video und VRML
Videodaten
Das AVI (Audio Video Interleaved) Dateiformat ist eine spezielle Ausführung der von Microsoft für
Windows 3.1 eingeführten Multimediaerweiterung: dem RIFF (Resource Interchange File Format). Es
dient dazu, auf rekonstruierbare Art und Weise Audio-Videoinformationen zu speichern. Eine
AVI-Datei besteht wie schon etliche Grafikformate) aus Chunks, also aus verschiedenen, ineinander
verschachtelten Datenstrukturen. Sie können, jeder für sich, in weitere Strukturen (Sub-Chunks)
unterteilt werden.
Chunks beginnen mit einem Identifizierer (ID), der im FOURCC (Four Character Code), d. h. in
ASCII angegeben wird. Nach dem ID folgt eine Längenangabe, die sich auf die folgenden Daten
bezieht.
Der erste Chunk einer AVI-Datei hat den FOURCC 'RIFF', die ersten vier Bytes der Daten des
Chunks, der sogenannte Form-Typ, geben die Form der weiteren Daten an, in diesem Fall steht hier
'AVI '. Die restlichen Daten werden in zwei LIST-Chunks gespeichert (ID 'LIST'). Am Ende kann
noch ein optionaler Index-Chunk (ID 'idx1') enthalten sein, der die Vorgabe einer bestimmte
Abspielreihenfolge erlaubt.
RIFF
Microsoft führte mit den Multimediaerweiterungen für Windows 3.1 ein Dateiformat ein, das noch
heute angewendet wird: das Resource Interchange File Format (RIFF). Es dient dazu, beliebige
Multimedia-Ressourcen zu speichern. Die einfachste Form einer AVI Datei wäre ein einziger
Videostream, meistens wird man aber dazu noch Audio-Informationen speichern wollen. Allgemein
ist es möglich, auch spezielle Multimedia-Sequenzen wie etwa einen MIDI-Track als zusätzlichen
Datenstream in einer AVI-Datei aufzunehmen. Um Audioinformationen in Stereoton zu sichern,
benötigt man dazu nur einen Stream, genauso als würde nur Mono gespeichert werden. Weiterhin sind
Control-Tracks möglich, etwa um externe Geräte zu steuern.
RIFF-Dateien haben immer dieselbe Struktur, damit sie problemlos verarbeitet werden können.
Vergleichbar mit globalen und lokalen Prozeduren einer höheren Programmiersprache bestehen
RIFF-Dateien wieder aus einem sogenannten Chunk (engl.: Klumpen, Happen, globale Prozedur), der
wiederum beliebig viele ineinander verschachtelte Subchunks (lokale Prozeduren) enthalten kann. Der
allgemeine Aufbau eines solchen (SUB-)Chunks besteht aus drei Einträgen:
• ID: Identifizierer (Länge vier Byte)
• Size: Längenangabe (Länge vier Byte)
• Datenblock von 'Size' Bytes Länge
Für den Fall, daß die Länge der Daten in Byte ungerade ist, wird rechts ein Füllbyte angehängt. Dem
ID kann man entnehmen, um welche Art von Daten es sich handelt. Er ist als FOURCC (Four
Character Code) gespeichert, wobei die vier Byte als ASCII-Zeichen interpretiert werden. Die einzige
ID mit dem ein RIFF-Chunk beginnen kann, ist 'RIFF'. Unterschiede können dann nur noch in den IDs
der Subchunks auftreten. Hat eine Datenform einen ID mit weniger als vier ASCII-Zeichen Länge,
wird rechts mit Leerzeichen aufgefüllt.
Es ist möglich, sich FOURCC IDs (bestehend aus Großbuchstaben) bei Microsoft registrieren zu
lassen, der Lizenznehmer muß dann zu seinem ID eine eindeutige Spezifikation des Formates der
abgelegten Daten angeben. Kleinbuchstaben werden bei FOURCC´s verwendet, die zu Subchunks
Video und VRML 70

gehören. Es kann durchaus vorkommen, daß Chunks mit verschiedenen IDs Subchunks haben, deren
IDs identisch sind. Dies ist möglich, da die Interpretation der Daten innerhalb der Subchunks nur im
Zusammenhang mit denen des übergeordneten Chunks vollzogen wird.
Innerhalb einer RIFF-Datei werden immer mindestens zwei Chunks vorhanden sein: ein RIFF- und
ein LIST-Chunk. Schon in den ersten vier Bytes der Daten (Offset 8...12 der RIFF-Datei, dem
sogenannten Form-Typ), wird die weitere Form der Daten angegeben. Auch hier verwendet man
wieder den FOURCC, erwartungsgemäß trifft man an dieser Stelle bei einer AVI-Datei auf die
Zeichenfolge 'AVI '. Nach dem Form-Typ kommen die restlichen Chunks der RIFF-Datei. Wie oben
erwähnt ist immer auch noch ein spezieller Chunk, der LIST-Chunk, enthalten (ID: 'LIST'). Die Daten
eines LIST-Chunk bestehen aus einer Typdefinition der Liste (Byte 0...3 der Daten des LIST Chunk
als FOURCC), den sogenannten List-Typ, gefolgt von aneinandergereihten Chunks.
Beispiel für eine einfache RIFF-Struktur:
ID:[RIFF] Size:0x0000220 Form-Typ = [DEMO]
ID:[LIST] Size:0x0000214 List-Typ = [xyz ]
ID:[abcd] Size:0x0000100
ID:[efgh] Size:0x0000100.
AVI
Eine AVI-Datei hat als spezielle RIFF-Datei im Feld Form-Type des RIFF-Chunks den Wert 'AVI '.
Die restlichen Daten des RIFF-Chunk bestehen aus mindestens zwei LIST-Chunks (ID 'LIST') gefolgt
von einem optionalen Index-Chunk (ID 'idx1'). Die erste Liste hat den List-Type 'hdrl', die zweite
'movi'. In der 'hdrl'-Liste sind allgemeine Informationen zum Chunk enthalten, sowie verschiedene
Header, durch die das Format der einzelnen Komponenten der AVI-Datei (Video, Audio, ..)
angegeben wird.
Beispiel:
RIFF ('AVI '
LIST ('hdrl'
..
..
)
LIST ('movi'
..
..
)
['idx1'(AVI Index)]
)
Wichtige Subchunks einer AVI-Datei
Genauer besteht eine 'hdrl' Liste aus zwei Subchunks. Der erste hat den ID 'avih' und definiert globale
Eigenschaften der AVI-Datei, der zweite ist ein LIST-Chunk mit dem List-Type 'strl' (Stream List),
der für jeden Stream mindestens zwei Chunks enthält: den 'strh'- (Stream Header) und den 'strf'-
(Stream Format) Chunk. Optional kann ein 'strd'- (Stream Data) Chunk folgen. Dieser dient dazu,
zusätzliche Daten zu speichern, er kann aber auch bei installierbarem Komprimierer/Dekomprimierer
als Initialisierungswert dienen und dabei uninterpretiert an diese übergeben werden.
Beispiel: Subchunks im &Uunl;berblick
Webdesign
RIFF ('AVI '
LIST ('hdrl'
'avih'([Main AVI Header])
LIST ('strl'
'strh' ([Stream Header])
AVI-Format von Microsoft 71

)
)
LIST ('movi'
)
'strf' ([Stream Format])
'strd' (zusätzliche Header)
)
(SubChunk: LIST ('rec '
SubChunk1
SubChunk2
)
)
['idx1' (AVIIndex)]
Im 'strh'-Chunk sind allgemeine Informationen zum Stream gespeichert, beispielsweise, um welche
Art von Daten (Bild oder Ton) es sich handelt, welcher Kompressor benutzt oder mit welcher Rate
digitalisiert wurde. Im 'strf'-Chunk ist dann das genaue Format des Streams gespeichert. Die der
'strl'-Liste folgenden Chunks in der 'hdrl'-Liste sind nicht genauer spezifiziert.
Nach den Headern folgen im 'movi'-Chunk die eigentlichen Bild- und Tondaten. Diese können Stream
für Stream als Subchunks der 'movi'-Liste oder aber ineinander verschachtelt gespeichert sein. Im
ersten Fall existiert pro Stream ein Subchunk, im zweiten Fall pro Schachtelung ein LIST-Chunk mit
dem Form Typ 'rec '.
Die 'movi'-Liste speichert dann letztlich die (eventuell komprimierten) Daten für die einzelnen Bilder
des Videos, sowie den (ebenfalls möglicherweise komprimierten) Ton. Nach den eigentlichen Daten
kann, je nach Bedarf, der 'idx1' Chunk eingesetzt werden.
MPEG
Webdesign
Die Motion Picture Expert Group (MPEG) wurde Ende der 80er Jahre zur Festlegung eines digitalen
Standards für Bewegtbilddarstellung ins Leben gerufen. Die MPEG-Verfahren definieren Normen für
Computer-gestützte Bewegtbilddarstellung, welche für die Bereiche Heimanwendung (MPEG-1) und
Studio (MPEG-2) entwickelt wurden. Zentraler Bestandteil des MPEG_Codierungsalogorithmus ist
die sogenannte Bewegungskompensation. MPEG nutzt hierbei die Tatsache, daß sich zwei
aufeinanderfolgende Bilder derselben Filmszene in der Regel kaum unterscheiden. Anstatt also zwei
Vollbilder mit hohem Speicheraufwand zu codieren, werden lediglich die veränderten Bilddetails
erfaßt und weiterverarbeitet. Verwendung finden hierbei drei verschiedene Bildtypen (Intra-,
Predicted- und Bidirectional predicted), welche sich in Funktion und Codierung voneinander
unterscheiden. Bis zur Verabschiedung der Norm MPEG-1 standen bereits verschiedene Verfahren zur
Verfügung (Motion-JPEG (M-JPEG) und die Recommendation H.261 der CCITT).
Das M-JPEG-Verfahren basiert auf der Serialisierung von im JPEG-Format komprimierten
Einzelbildern. Die Qualität der verlustbehafteten JPEG-Kompression ist dabei in weiten Grenzen
konfigurierbar. Der Kompressionsgrad liegt in der Einstellung für gute Bildqualität bei einem Faktor
von 20 - 25. Die Einbindung von Audiodaten ist jedoch nicht im M-JPEG definiert. Ein Norm für
M-JPEG existiert nicht. Durch die Fixierung auf Einzelbildkompression erwies sich das Verfahren als
zu ineffizient.
Mit der Recommendation H.261 stand ein audiovisueller Standard der CCITT zur Verfügung. H.261
besitzt durch seine Ausrichtung auf Bewegtbildübertragung bereits einen hybriden
Kompressionsalgorithmus, der aus einer Spielart des Deltaverfahrens, einer Restbildkompression
sowie einem optional einbindbaren Verfahren zur Bewegungskompensation besteht. Der Standard ist
u. a. in Auflösung und Bildrate (7,5 - 30 Bilder/s) konfigurierbar, wobei sich die Bandbreite im
Bereich von 40 KBit/s bis zu 2 MBit/s bewegt. Die relativ enge Auslegung der Recommendation
erwies sich jedoch als starkes Handicap.
MPEG 72

Webdesign
Eine Lösung für die oben aufgeführten Probleme steht mit MPEG-1 und MPEG-2 zur Verfügung,
wobei wesentliche Merkmale von M-JPEG als auch H.261 in die Normung eingingen. MPEG wurde
dabei als generische Norm entworfen, wodurch eine Anpassung an verschiedene Anwendungen
möglich gemacht werden soll.
Die ältere MPEG-1 Norm findet Anwendung in der PC-Welt und im Unterhaltungsmarkt. Die
Übertragungsrate liegt bei den dort üblichen Auflösungen im Bereich bis zirka 1,5 MBit/s (192
KByte/s), wobei aus praktischen Gründen die Grenzen des MPC-1-Standards (für single-speed
CD-ROM Laufwerke) eingehalten werden. Neben der CD-ROM eigenen sich auch andere Medien als
Basis für MPEG. Hierzu gehört das DAT-System als auch die Verwendung in LANs zur
Unterstützung von Video-Mail oder Video-Übertragungen über Telefonleitungen (ISDN).
MPEG 2 wurde im Hinblick auf digitales Fernsehen definiert, es unterstützt das
Zeilensprungverfahren (Interlace). Die der Kompression zugrundeliegenden Verfahren wie
Bewegungskompensation, DCT, Quantisierung und Huffman-Codierung sind für beide
MPEG-Normen im Prinzip identisch. Verbesserungen erfolgten lediglich auf Detailebene. MPEG 2
stellt also von den Grundprinzipien her keinen größeren Fortschritt gegenüber MPEG 1 dar,
insbesondere löst MPEG 2 nicht MPEG 1 ab. So erreichen beide Verfahren in der Regel identische
Datenverdichtungen.
Die folgende Funktionen sollten innerhalb der Norm möglich sein (soweit sie vom jeweiligen Medium
unterstützt werden):
• wahlfreier Zugriff innerhalb des digitalen Videos
• schnelles Vor- und Rückwärtssuchen
• reverse play
• Audio-visuelle Synchronisation
• Fehlertoleranz
• Toleranz gegenüber Codierungs-/Decodierungsverzögerungen (wg. Kapazitätsengpässen)
• Editierbarkeit
• Formatflexibilität (in Größe und Bildwiederholfrequenz)
MPEG beschreibt, wie komprimierte Video- und Audio-Daten zu einem Bitstrom zusammengefaßt
werden. Die Norm umfaßt zwei Teile: die Systemschicht und die Kompressionsschicht. Diese
Schichten haben ihrerseits wieder Teilschichten.
Die Funktion der Systemschicht definiert, auf welche Weise Bitströme von Video- und Audio-Daten
sowie optional privater Daten zu einem einzigen Bitstrom zusammengefaßt werden. Außerdem
werden Zeitmarken (Presentation Time Stamp) bereitgestellt, die der synchronisierten Wiedergabe
von Bild und Ton dienen. Der maximale Abstand zwischen zwei Synchronisationspunkten liegt bei
0,7 Sekunden. Die Systemschicht ist unterteilt in den Pack-Layer und den Packet-Layer. Innerhalb
eines Packs werden Packets aneinander gereiht. Packets enthalten neben den Headerinformationen nur
Daten einer einzigen Art, also entweder Audio-Daten, Video-Daten oder private Daten
MPEG 73

Diese Daten werden von den Kompressionsschichten für Video und Audio codiert und zur
Übertragung in die Päckchen eingefügt.
Das MPEG-Verfahren nutzt die Tatsache, daß in Folgen bewegter Bilder zwischen
aufeinanderfolgenden Bildern große Ähnlichkeit besteht. Mit der Ausnahme krasser Szenenwechsel
werden sich Bilddetails kontinuierlich von einem Bild zum nächsten fortsetzen, wie zum Beispiel eine
sich von links nach rechts bewegende Person. Ein zentraler Bestandteil von MPEG ist nun die
sogenannte Motion Compensation: Die Bewegung der Person wird einfach durch einen Vektor
beschrieben, zum Beispiel durch die Angabe, daß sie sich von einem Bild zum nächsten um 12 Pixel
nach rechts und 10 Pixel nach oben bewegt hat.
Die Erkennung eines zusammengehörigen Objekts wäre in der Praxis allerdings viel zu aufwendig.
Stattdessen werden sogenannte Makroblöcke mit einer Pixelgröße von 16 x 16 untersucht. Diese
Makroblöcke entsprechen vier Blöcken, wie sie bei JPEG codiert werden. Im nächsten Schritt wird die
Differenz aus dem realen Makroblock in Filmbild 1 und dem verschobenen Makroblock aus Filmbild
2 gebildet, Dieses Fehlerbild muß neben dem Verschiebungsvektor zur Beobachtung der
Fehlerfortpflanzung codiert und gespeichert werden. Der geringste Speicheraufwand entsteht
natürlich, wenn der Unterschied zwischen den verschobenen Makroblöcken und den tatsächlich
dargestellten Blöcken so klein ist, daß auf die Codierung der Differenz ganz verzichtet werden kann.
MPEG steuert die Darstellung von komprimiertem Video durch die Festlegung einer Syntax. Die
Regeln zur Erfassung der Bewegungskompensation lassen hingegen viele Freiheiten zu, so daß die
Qualität des MPEG-Endprodukts auch maßgeblich von der Güte des verwendeten
Codierungs-Algorithmus abhängt.
Die MPEG-Bildtypen
MPEG verwendet drei Frames (Bildtypen):
• I-Frame (Intra Frame)
• P-Frame (Predicted Frame)
• B-Frame (Bidirectional predicted Frame)
Webdesign
MPEG 74

I-Frames (intracodierte Bilder) verwenden nur Informationen aus einem einzigen digitalisierten
Vollbild. Bei I-Frames findet die 'Motion Compensation' somit keine Anwendung. Sie dienen aber als
Ausgangspunkt für die Ermittlung von P- und B-Frames. Der Kompressionsfaktor beträgt typisch 7:1.
P-Frames werden durch 'Motion Estimation' aus zeitlich zurückliegenden Bildern vom Typ I oder P
abgeleitet. Auch P-Frames dienen demnach als Referenzbilder für die Ermittlung von
Verschiebungsvektoren. Der Kompressionsfaktor beträgt typisch 20:1.
B-Frames werden entweder aus früheren oder späteren P- bzw. I-Frames abgeleitet oder auf Basis von
Nachbarbildern interpoliert. Sie dienen niemals zur Berechnung von Motion-Vektoren. Daher tragen
B-Frames im Gegensatz zu P-Frames nicht zur Fehlerfortpflanzung bei. MPEG-Encoder haben darauf
zu achten, daß ein gewisses Datenbudget eingehalten wird, um den Decoder (bzw. das
Speichermedium) nicht zu überlasten. Bei B-Frames darf wegen der fehlenden Fehlerfortpflanzung
mit weniger Bits codiert werden als bei P-Frames, so daß die Verwendung von B-Frames auch zur
Regulierung des Bitstroms dienen kann. Der Kompressionsfaktor beträgt typisch 50:1.
I-Bilder erhalten die Zugriffsfreiheit auf das komprimierte Videomaterial, weil die Bildinformationen
nicht über mehrere Bilder verteilt sind. Ein typisches Muster für die Abfolge von I-, P- und B-Frames
ist die Abfolge
Zur bildgenauen Positionierung ist somit eine Berechnung über maximal sechs Zwischenbilder
erforderlich. Die Kompressionsmethode der Makroblöcke, aus denen I- und P-Frames aufgebaut sind,
basiert auf der Huffman-codierten quantisierten DCT auf 8 x 8 Pixelblöcken (4 Blöcke = 1
Makroblock), wie sie bei JPEG Verwendung findet.
Die Berechnung der Bewegungskompensation (Motion Compensation) ist sehr aufwendig. Bei
Software-Encoding, auch 'Non Real Time MPEG Encoding' genannt, kann die Codierung auf
Standardprozessoren meist nicht in Realzeit erfolgen.
MPEG-Bewegungskompensation
Webdesign
Bewegungskompensation bedeutet, daß redundante Bildinformationen, welche sich durch
Koordinatenverschiebungen innerhalb einer Bildsequenz ergeben, nur durch einen Vektor mit
Referenzierung auf einen Urblock codiert werden. Bei der Berechnung der Motion Compensation
wird sich dabei jedoch ein Bilddetail nicht immer identisch über eine Folge mehrerer Bilder
fortsetzen. Ein Pixelblock wird sich im Fall von Realvideo aufgrund des Grundrauschens immer mehr
oder weniger vom vorhergehenden unterscheiden. Bei einer Person, die sich durch das Bild bewegt,
ändert sich zum Beispiel der Sitz oder die Schattierung der Kleidung. Falls die Bildunterschiede
signifikant sind, muß neben dem Motion-Vektor auch noch ein Fehlerbild codiert werden. Die
Entscheidung, wohin sich ein Bildinhalt bewegt, kann nur aufgrund objektiver Kriterien erfolgen. Ein
Video-Encoder wird daher in der Umgebung des früheren Ausgangsblocks nach einem Pixelblock
suchen, der eine größtmögliche Ähnlichkeit besitzt.
MPEG 75

Ein denkbares Entscheidungskriterium ist zum Beispiel der mittlere quadratische Abstand der Werte
der beiden 16 x l6-Pixelblöcke. Gemeint ist damit, daß die Quadrate der Differenzen aller
Luminanzwerte und Chrominanzwerte des Originalblocks und des Kandidatenblocks innerhalb des
Suchbereiches errechnet und aufsummiert werden. Auf diese Art und Weise erhält man ein Maß für
die Ähnlichkeit zweier Blöcke. Hat sich ein Block zum nächsten fortgepflanzt ohne sich zu verändern,
ist die Differenz gleich Null. Eine sehr rechenaufwendige Methode wäre, für alle denkbaren
Verschiebungen innerhalb des Suchbereichs die Summe der quadrierten Differenzen zu bilden. Im
Encoder wird dann der Bewegungsvektor des Bildes mit dem kleinsten quadratischen Abstand zum
Original als der beste ausgewählt. Die Suche nach dem besten Motion-Vektor kann mit einer
Auflösung von 1 oder 1/2 Pixel erfolgen. Die für die Codierung verwendeten Vektoren besitzen dabei
eine Auflösung von bis zu einem halben Pixel. Für die Suche nach dem Motion-Vektor kann linear
zwischen benachbarten Pixeln interpoliert werden. Da der Rechenaufwand sehr groß ist, werden
unterschiedliche Suchstrategien angewandt. So kann beispielsweise zunächst das Gitter der 48 x 48
ganzzahligen Verschiebungen abgesucht werden, um danach die acht benachbarten Positionen zu
untersuchen.
Eine andere Methode benutzt für die Suche zunächst ein grobes Raster mit einem Abstand von
mehreren Pixeln um es dann um die beste Position nach und nach zu verfeinern. Diese Methode
kommt mit noch weniger Schritten aus. Allerdings wird die Wahrscheinlichkeit geringer, den
optimalen Motion-Vektor zu finden.
Reduktionsmethode bei Real-Video
Webdesign
Ein digitalisiertes Videobild muß für MPEG-1 vorbereitet werden, um zu handhabbaren Datenmengen
zu kommen (Übertragungsrate bis zu 1,5 MBit/s). Die üblichen Auflösungen von digitalisiertem
Video sind 720x480 Pixel bei 60 Hz (NTSC) oder 720x576 Pixel bei 50 Hz (PAL), wobei das
Material in YCbCr-4:2:2-Form vorliegt. Diese Auflösung wird in horizontaler und vertikaler Richtung
um die Hälfte verringert. Die horizontale Auflösung wird dabei i. A. nicht einfach durch Weglassen
von Luminanz- oder Chrominanzwerten verringert. Gebräuchlich ist eine gewichtete Mittelung eines
Pixels mit seinen später nicht mehr verwendeten Nachbarpixeln. In vertikaler Richtung kann eine
ähnliche Filterung erfolgen, oder es wird einfach jede zweite Zeile weggelassen, also nur ein Halbbild
verwendet. Die Chrominanz-Auflösung wird in vertikaler Richtung ein weiteres Mal durch Filterung
halbiert, so daß ein 4:2:0 Abtastungsmuster entsteht. Vier Abtastpunkte der Lunimanz entsprechen
hierbei einem Abtastpunkt für die Chrominanz. Die einzelnen Abtastwerte werden wie bei JPEG zu 8
x 8-Matrizen zusammengefaßt, vier der 8 x 8-Blöcke bilden einen Makroblock. Die Farbinformation
wird mit je einer 8 x 8- Matrix für Cr und Cb dargestellt, so daß pro Makroblock insgesamt sechs 8 x
8-Matrizen verwendet werden.
MPEG 76

Die Auflösungsreduzierung wird in Dezimierungsfiltern entweder im MPEG-Prozessorbaustein oder
in Videodigitalisierung-Bausteinen vorgenommen. Bei der Darstellung komprimierten Videomaterials
muß umgekehrt die anfängliche Auflösung wiederhergestellt werden. Dazu werden zwischen den
Luminanz- bzw. Chrominanzwerten Nullwerte eingefügt, und anschließend eine gewichtete Mittelung
durchgeführt. Die Gewichte sind die Filterkoeffizienten eines Interpolationsfilters. So wird zum
Beispiel aus der Folge
10, 11, 12
die Folge
10, 10.5, 11, 11.5, 12
erzeugt. Einfachere Verfahren zur Interpolation arbeiten mit der Wiederholung von Werten.
Die MPEG-Syntax
Die MPEG-Syntax beschreibt, auf welche Weise die zur Verfügung stehenden Daten in hierarchischer
Weise (Schichten) miteinander verknüpft werden.
Sequence-Layer
Group-of-Picture-
(GOP-)Layer
Webdesign
Diese Schicht dient der Zusammenfassung einer oder mehrere Bildgruppen.
Im zugehörigen Header werden allgemeine Parameter gespeichert. Konkret
sind dies Bild-Breite, Bild-Höhe, Bildformat (z. B. 4:3), Bildwiederholrate
(pps), Übertragungsrate und Puffergröße.
Oberhalb der Picture-Ebene wird in der GOP-Ebene eine beliebige Anzahl
von Bildern in natürlicher Abfolge zu Gruppen von Bildern
zusammengefaßt. In jeder Gruppe muß mindestens ein I-codierter Frame
enthalten sein. Sogenannte geschlossene Gruppen können decodiert werden,
ohne daß für die Motion-Compensation auf die vorherige GOP Bezug
genommen werden muß; sie ist ohne jeden anderen Bezug für sich
decodierbar. Der GOP-Header spezifiziert unter anderem, ob Standard- oder
anwenderdefinierte Quantisierungsmatrizen zur Anwendung kommen. Der
Encoder darf diese Informationen vor jeder Bildgruppe wiederholen, um
einen wahlfreien Zugriff zu erleichtern, die Quantisierungsmatrizen dürfen
dabei sogar geändert werden.
Picture-Layer Diese Schicht enthält alle Informationen, die zum Decodieren eines Bildes
benötigt werden. Der Header enthält die Information, als wievieltes Bild der
entsprechenden 'Group of Pictures' (GOP) das Bild dargestellt werden soll.
Diese Angabe ist notwendig, da wegen der Ruckwärtsbezüge bei B-Frames
der Decoder die Bilder in einer anderen Reihenfolge benötigt als es der
natürlichen Reihenfolge entspricht.
MPEG 77

Slice-Layer
Makro-Layer
Webdesign
Außerdem wird beschrieben, um welche Art von Frame (I, B oder P) es sich
handelt und ob die Verschiebungsvektoren mit einer Genauigkeit von einem
oder einem halben Pixelabstand dargestellt werden.
Slices sind Streifen von aufeinanderfolgenden Makroblöcken. Ein Decoder
kann jedes Slice getrennt decodieren, ohne auf andere Slices zurückgreifen
zu müssen. Auf diese Weise wird verhindert, daß sich bei
Übertragungsfehlern eine Störung über das ganze Bild fortsetzt. Mit Beginn
des nächsten Slices werden wieder korrekte Daten geliefert. Slices müssen
nicht an der rechten oder linken Bildkante beginnen, sondern können mit
beliebig positionierten Makroblöcken beginnen oder aufhören.
Hier wird beschrieben, wo der Makroblock im Bild liegt, und um welche
Art von Makroblock es sich handelt (I, B oder P). Der Encoder hat bei Pund
B-Frames eine Reihe von Entscheidungen auf der Makroblock-Ebene
zu treffen, die maßgeblich für den Platzbedarf des codierten Bildes sind. Bei
P-Frames ist zunächst festzulegen, ob Motion Compensation angewendet
wird. Danach ist zu entscheiden, ob der Makroblock wegen zu großer
Fehlerfortpflanzung intracodiert wird. Falls ein Verschiebungsvektor
verwendet wird, muß desweiteren geklärt werden, ob das Fehlerbild codiert
wird. Bei B-Bildern ergeben sich drei Ableitungsmöglichkeiten für den
Makroblock: die Ableitung aus zurückliegenden oder zukünftigen
Referenzbildernund schließlich eine Kombination beider Möglichkeiten
(Average). Bei letzteren werden die Luminanzwerte im Encoder durch
Mittelung errechnet. Der Encoder darf nicht mehr Bits pro Sekunde
generieren als der Decoder später verarbeiten kann bzw. als der
Kommunikationskanal übertragen kann.
Block-Layer Auf dieser Ebene wird ein Block von 8 x 8 Pixeln mit Original- bzw.
Fehlerbildinformation in Form von quantisierten und Huffman-codierten
DCT-Koeffizienten dargestellt (siehe auch JPEG). Der in den
DCT-Matrizen am unmittelbarsten ins Auge fallende Unterschied zwischen
Original- und Fehlerbildern ist das Vorzeichen der Luminanzwerte und der
Chrominanzwerte. Während diese Werte im Original stets positiv sind,
ergeben sich bei der Differenzbildung positive und negative Werte. Die
Differenzwerte werden in einer anderen Art und Weise quantisiert, da die
psychovisuellen Gewichtsfunktionen für die Differenzen zweier realer
Bilder keine augenfällige Bedeutung haben. Für die Fehlerbilder wird eine
MPEG 78

Webdesign
Quantisierungskennlinie verwendet, die um den Nullwert herum in einem
doppelt so breiten Intervall wie an allen anderen Stellen den Wert Null
erzeugt. Das bedeutet in der Praxis, daß der Encoder bei nur geringen
Unterschieden von Helligkeit und Farbsättigung keinen Unterschied codiert.
Virtual Reality: VRML
Eine faszinierende Möglichkeit zur Beschreibung von 3D-Grafiken ist die Beschreibungssprache
VRML (Virtual Reality Modeling Language). Statt riesiger Animationsdateien werden auch hier nur
Anweisungen geschickt, wie eine dreidimensionale Animation aussehen soll. Die so definierten
Animationen werden dann auf dem lokalen Rechner erzeugt. Im Grunde ist dies keine grundlegende
Neuerung, denn jedes Raytracing-Programm arbeitet mit einer solchen 3D-Sprache. Die Software
berechnet anhand der Beschreibung die jeweilige Szenerie und stellt sie grafisch auf dem Bildschirm
dar. VRML wird derzeit speziell auf die Bedürfnisse von WWW und Internet zugeschneidert, verfügt
daher über spezifische Fähigkeiten, etwa die Einbindung von HTML-Dokumenten in 3D-Szenen. Die
Entwicklung von VRML begann im Frühjahr 1994. Der Name VRML wurde damals geboren,
allerdings noch als 'Virtual Reality Markup Language'.
Um nicht bei Null zu beginnen und statt dessen eine geeignete, bereits vorhandene 3D-Technologie zu
nutzen, fiel die Wahl der Entwickler auf 'Open Inventor' von Silicon Graphics (SGI). Open Inventor
unterstützt 3D-Szenarien mit Polygonobjekten, verschiedenen Belichtungsmöglichkeiten, Materialien
oder Texturen. Zudem stellte SGI noch eine erste VRML-Parser-Library zur Verfügung, die als
Grundlage für die Implementierung von 3D-Viewern diente.
Mittlerweile hat die Entwicklung von VRML weitere Fortschritte gemacht. VRML-Szenerien werden
in eigenen Dateien abgelegt, auf die - wie bei normalen HTML-Dateien - Verweise mittels URLs
(Uniform Resource Locator) zeigen. Klickt der Benutzer in seinem WWW-Browser auf ein solches
Link, erkennt die Software die 3D-Datei und startet einen VRML-Viewer, der die weitere Darstellung
übernimmt. VRML ersetzt also weder HTML, noch stellt sie eine Erweiterung von HTML dar. Beides
sind eigenständige Sprachen, ergänzen sich jedoch insofern, als daß Hypertext-Links von HTML zu
3D-Daten und umgekehrt möglich sind. Die Grundlagen von VRML sind recht einfach. Jede Szenerie
setzt sich aus verschiedenen Objekten, den Nodes, zusammen. Ein Node kann ein geometrisches
Gebilde, wie eine Kugel oder ein Kegel sein. Darüber hinaus existieren Nodes, die ein bestimmtes
Material und seine Eigenschaften (Glanz, Reflexion, Farbe) festlegen, mit dem alle folgenden Nodes
dann ausgestattet werden. Einige Nodes bestimmen die Position von anderen Nodes im
dreidimensionalen Koordinatensystem von VRML. Spezielle Nodes dienen als Eltern-Objekte für
andere Nodes, so daß eine baumartige Strukturierung von Eltern- und Kind-Nodes möglich ist. VRML
erlaubt zudem eine Gliederung der Beschreibung mit Blöcken, ähnlich wie die {}-Blöcke in C. Auf
diese Weise lassen sich alle Objekte einer Szenerie übersichtlich festlegen.
Wer sich für weitere Informationen zu VRML interessiert, kann sich unter folgenden WWW-Adressen
umsehen:
• Silicon Graphics (http://vrml.sgi.com/) ist ein Mitbegründer von VRML und bietet viel
Information. Unter (http://www.sgi.com/cosmoplayer/download.html) gibt es einen
VRML-2.0-Viewer für Windows 95/NT.
• Das Magazin Wired bietet einen Tummelplatz für VRML-Freaks
(http://www.wired.com/vrml/).
• Das VRML-Repository der University of San Diego ist eine Fundgrube
(http://www.sdsc.edu/vrml/).
• Die VRML-Spezifikationen (Sprachbeschreibung) findet man unter
(http://www.eit.com/vrml/vrmlspec.html).
Virtual Reality: VRML 79

Beispiel
Das folgende Programm zeigt zwei Quader (Cube) und eine Kugel (Sphere).
#VRML V1.0 ascii
Separator {
Material { diffuseColor .8 .1 .2 transparency .5 }
Translation { translation 0 -1 0 }
Cube {
width 7
height 1
depth 7
}
}
Material { diffuseColor .1 .8 .2 }
Translation { translation 1.5 .5 1.5 }
Cube { }
Material { diffuseColor .1 .2 .8 }
Translation { translation -1.5 .5 -1.5 }
Sphere { }
Im Bild eines VRML-Browser sieht das dann so aus:
Zum vorhergehenden Abschnitt Zum Inhaltsverzeichnis Zum nächsten Abschnitt
Copyright © FH München, FB 04, Prof. Jürgen Plate
Webdesign
Webdesign
von Prof. Jürgen Plate
Beispiel 80

WWW-Dokumente gestalten
Aufbau von HTML-Dokumenten
HTML-Dokumente sind Text-Dateien, die spezielle Steuer- und Formatierbefehle, sogenannte Tags
enthalten. Ein HTML-Tag besteht aus einem Namen und (optionalen) Parametern. Es ist
eingeschlossen von < und >. Alle Tags, die nicht leer sind, also beispielsweise Text enthalten,
benötigen weiterhin ein Ende-Tag, das von eingeschlossen ist. Solche Konstrukte werden
auch "Container" genannt. Die Groß/Kleinschreibung spielt bei Tags keine Rolle.
Ein HTML-Dokument wird eingeleitet durch und abgeschlossen durch

Der Dokumententyp
Webdesign
Das -Tag gibt die "Document Type Definition" (DTD) des Dokuments an. Die DTD
bestimmt die Grammatik und die Syntax der HTML-Sprache. Kurz gesagt: Der Dokumententyp am
Anfang einer (X)HTML- oder auch einer XML-Datei gibt an, um welchen Typ von Dokument es sich
handelt, damit Browser erkennen, wie sie ein Dokument darzustellen haben. Durch die Angabe des
Doctypes im Kopf des HTML-Documents vereinbaren Sie also nicht nur HTML-Version, sondern Sie
teilen dem Browser mit, wie korrekt das Dokument der Definition folgt. Das Tag ist zwar nicht
zwingend erforderlich, wird aber vom W3C empfohlen.
In XHTML-Seiten ist das !DOCTYPE-Tag immer erforderlich. Falls Sie sich streng an die
HTML4-Spezifikationen halten, verwenden Sie beispielsweise
Für XHTML wird die folgende Definition verwendet:
Moderne Browser verwenden den Document Type, um ihr Verhalten zu ändern: Im Modus "strict"
verhalten sie sich standardkonform, im Modus "loose" (Quirksmodus) simulieren sie die Fehler ihrer
Vorgängerversionen, um alte HTML-Dokumente or-dentlich anzuzeigen.
DOCTYPE HTML PUBLIC bedeutet, dass sich das Dokument auf die öffentlich verfügbare
HTML-DTD bezieht.
"-//W3C//DTD HTML 4.01//EN" kennzeichnet das W3C als maßgeblichen Herausgeber des
Dokumententyps "HTML", der in der Version 4.01 im Dokument benutzt wird. EN ist die
Sprachangabe (Englisch) und bezieht sich nicht auf den Inhalt des Dokuments, sondern auf die
Notation von HTML-Elementen und -Attributen.
Die URL "http://www.w3.org/TR/html4/strict.dtd" erlaubt es dem Browser rein theoretisch, die DTD
und darin enthaltene Regeln und Elemente zu laden, wenn sie benötigt werden. In der Praxis kann kein
Browser neue Regeln nachträglich adaptieren, weshalb man die Adresse auch weglassen darf.
Der strict-Modus schließt HTML-Elemente und -Attribute aus, die das W3C als Aufgabe von
Stylesheets ansieht. Auch die Benutzung der HTML-Elemente innerhalb des Dokuments wird bei
"strict" sehr eng gesehen. So müssen alle Elemente innerhalb des body-Elements in Blockelementen
stehen. Ein Text, der ohne umschließenden -Container direkt zwischen das öffnende und
schließende -Tag geschrieben wird, wird beispielsweise schon als Verletzung der Syntaxregeln
angesehen.
Aufbau von HTML-Dokumenten 82

Der Zusatz "transitional" kennzeichnet ein Dokument, in dem Elemente und Attribute benutzt werden,
die als unerwünscht gelten. Wer seine Dokumente auch für Uralt-Browser grafisch und typografisch
aufbereiten möchte, wird diese Variante verwenden.
"frameset" kennzeichnet ein Dokument, das Frames (nicht iframe) benutzt. Beispiele für HTML4
strict, transitional und frameset:
Beispiele für XHTML 1.0 strict, transitional, frameset:
Beispiel für XHTML 1.1 DTD:
Im Header kann man noch den Dateityp des Dokuments und den verwendeten Zeichensatz in einem
-Tag angeben, z.B.:
Was ist ein URL?
URL steht für Uniform Resource Locator. Ein URL ist eine Referenz auf eine Datei oder sonstige
Ressource. Diese Referenz wird benötigt, um Verweise auf andere Stellen im aktuellen Dokument, auf
andere Dokumente auf dem aktuellen Server oder um andere Dokumente auf anderen Servern
anzugeben. Darüber hinaus kann mit einem URL auch ein Internet-Dienst spezifiziert werden. URLs
dienen auch zum Einbinden von Grafiken oder anderen multimedialen Objekten.
Das Aufbau-Schema eines URLs ist
Webdesign
Dienst://Host.Domain:Port/Pfad/Dateiname
Die Angabe des Ports kann entfallen, es wird dann der für den angegebenen Dienst definierte
Standardport verwendet. Ebenso können Host und Domain entfallen, wenn es sich um den lokalen
Server handelt. Auch der Pfad kann weggelassen werden, wenn sich die gesuchte Datei im aktuellen
Verzeichnis befindet. Grundsätzlich sollten bei Links auf lokale Dateien die Angaben von Host und
Domain weggelassen werden, da sonst jedesmal eine (unnötige) Nameserveranfrage erfolgt.
Wenn die WWW-Dokumente nicht auf dem Server selbst entwickelt werden, kann es häfig
vorkommen, daß sich die Pfade von Entwicklungsrechner und Server unterscheiden. In diesem Fall
kann man gut mit relativen Pfade arbeiten, die beim Zugriff auf die Seiten vom Server automatisch in
absolute Pfadangaben umgesetzt werden.
Der Dokumententyp 83

Als Dienste werden viele Internet-Dienste unterstützt. Die wichtigsten sind
http
Dies gibt eine Datei oder ein Verzeichnis auf einem WWW-Server an.
file
Gibt eine lokale Datei an.
ftp
Gibt eine Datei oder ein Verzeichnis auf einem FTP-Server an. Standard ist anonymer ftp.
Will man einen Usermnamen angeben, muß man diesen getrennt durch '@' vor dem Host
angeben.
mailto
Erlaubt es, eine e-mail zu versenden.
news
Gibt eine Newsgruppe auf einem News-Server an.
Weitere Dienste, auf die ein URL verweisen kann sind WAIS, telnet, tn3270 oder Gopher.
Browser
Webdesign
Der Begriff Browser kommt aus dem Englischen "to browse" und bedeutet soviel wie schmökern oder
blättern. Hierbei handelt es sich um ein Programm, mit dem es möglich ist, die Seiten des World Wide
Web multimedial darzustellen und anzuschauen. Der Browser ist also ein Werkzeug zur komfortablen
und bequemen Darstellung von Texten, Grafiken, Sprache oder Musik. Der Browser wurde speziell
für den WWW-Dienst entwickelt, der auf einem Hypertextsystem basiert, womit es möglich ist,
mittels sogenannter "Hyperlinks" von einem WWW-Angebot zu einem anderen zu springen.
Ein Hyperlink ist nichts weiter als ein Querverweis, der entweder auf irgendeine anderen Stelle im
gleichen Dokument, auf ein anderes Dokument des gleichen Anbieters oder auf ein Dokument eines
anderen Anbieters irgendwo auf der Welt verweist. So sind die unterschiedlichsten Dokumente
weltweit miteinander vernetzt, eben ein "weltweites Gewebe". Jedes Dokument hat eine eindeutige
Adresse, den sogenannten URL (Uniform Resource Locator), unter dem es direkt aufgerufen werden
kann. Dies erfolgt durch Eintippen des URL in das Eingabefeld-Feld im oberen Bereich des
Browser-Fensters. Im Text eingebaute Querverweise sind meist unterstrichen und werden in einer
anderen Farbe angezeigt. Querverweise können sich aber auch hinter Bildern verbergen. Wenn man
mit dem Mauszeiger über die WWW-Seite fährt und auf einen Querverweis trifft, wird der Cursor zur
Hand und die Adresse des Querverweises im unteren Fensterrahmen eingeblendet. Die Informationen
selbst liegen als strukturierte Textdokumente vor, die im HTML-Format (HTML=Hypertext Markup
Language) kodiert sind. Der Browser interpretiert die HTML-Kodierung und stellt die WWW-Seite
für den Benutzen optisch ansprechend dar.
Da sich die Fähigkeiten der WWW-Angebote permanent weiterentwickeln, besteht die Möglichkeit,
seinen Browser der technologischen Entwicklung ständig anzupassen. Hierzu gibt es sogenannte
"Plug-Ins". Ein Plug-In ist ein Programm, das die multimedialen Fähigkeiten der Browser erweitert
(z.B.: Real Audio Player, Shockwave (Flash), Acrobat Reader, Quicktime Movie Player, etc.) Ein
Browser ist somit ein offenes System, das durch die Plug-Ins erweitert wird. Die gängigsten Browser
sind der Microsoft Internet Explorer, der Netscape Communicator und Opera, wobei von den beiden
letztgenannten Browsern nicht nur Windows-Versionen, sondern auch Produkte für UNIX und Linux
zur Verfügung stehen. Diese konkurrierenden Produkte werden oft auf CDs, die in
Computer-Fachzeitschriften enthalten sind, mitgeliefert oder können kostenlos aus dem Internet
heruntergeladen werden.
Der Cache-Speicher des Browsers dient zum vorübergehenden Speichern einer angeforderten
WWW-Seite im Arbeitsspeicher oder auf der Festplatte des eigenen Rechners. Wird eine WWW-Seite
angefordert, so prüft der Browser zunächst, ob diese Seite nicht schon einmal abgerufen wurde und
Was ist ein URL? 84

noch im Cache abgelegt ist. Ist dies der Fall, so kann er eine Kopie dieser Seite viel schneller aus dem
Cache (d.h. von der eigenen Festplatte) holen, als wenn er sie erneut vom Server anfordern würde.
Will man verhindern, daß eine erneut angeforderte WWW-Seite aus dem Cache-Speicher gelesen wird
(weil man z.B. weiß, daß die Originalseite verändert wurde), so kann man mit der
Aktualisieren-Funktion dem Browser mitteilen, daß die entsprechende Seite erneut vom
WWW-Server zu holen ist. Der Cache-Speicher hat eine definierte Größe. Ist er voll, so werden
sukzessive mit den neu hinzukommenden Seiten die am längsten darin gespeicherten Seiten gelöscht.
Will man beim Netscape Communicator wirklich alles neu laden (was wichtig beim Testen von
Frames ist) muß man beim Anklicken der Schaltfläche die Shift-Taste gedrückt halten.
Überschriften
Verschiedene Strukturelemente
Es existieren sechs verschiedene Stufen von Überschriften, die entsprechenden Tags lauten
ist die oberste Stufe, mit ihr sollte der Beginn eines Dokumentes überschrieben werden.
Kommentare
Kommentare werden vom Browser ignoriert und nicht angezeigt. Sie sind eingeschlossen von und dürfen nicht verschachtelt werden.
Zeilenumbruch
Leerzeichen und -zeilen in HTML-Dokumenten werden vom Browser in der Regel ignoriert, da
Informationen über Zeilenwechsel und Beginn eines neuen Abschnittes in den einzelnen
Strukturanweisungen enthalten sind. Sollte es einmal nötig sein, einen Zeilenumbruch zu erzwingen,
so geschieht dies mit Hilfe der -Anweisung.
Absatz
Der Beginn eines neuen Absatzes wird durch markiert, er führt beim Browser dazu, einen
vertikalen Abstand einzufügen und den Text zu Beginn einer neuen Zeile fortzuführen. Der
Absatzende-Tag hat bei nachfolgenden P-Tag keine Wirkung.
Waagrechte Trennlinie
der Tag zeichnet eine waagrechte Trennlinie. Mit den Optionen WIDTH und SIZE können
Länge und Dicke eingestellt werden. Die Linie wird zentriert, falls sie kürzer als die Seite ist. Die
Breite kann sowohl in Pixeln, als auch in % der Seitenbreite angegeben werden. EIn paar Beispiele:
Webdesign
Mit den bisher behandelten Tags lassen sich bereits einfache Dokumente gestalten. Der folgende Text
zeigt ein Musterdokument mit HTML-Auszeichnungen:
Die erste Seite
Browser 85

Webdesign
Überschrift Ebene 1
Überschrift Ebene 2, align=right
Überschrift Ebene 3, align=left
Überschrift Ebene 4, align=center
Überschrift Ebene 5
Überschrift Ebene 6
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Will man einen Zeilenumbruch, muß man das angeben:
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Vom Browser dargestellt sieht er dann so aus (wobei der Titel nicht sichtbar ist):
Waagrechte Trennlinie 86

Überschrift Ebene 1
Überschrift Ebene 3, align=left
Überschrift Ebene 5
Überschrift Ebene 6
Überschrift Ebene 2, align=right
Überschrift Ebene 4, align=center
Hier kommt dann ein ganz normaler Fliesstext..... Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext..... Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext..... Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext..... Hier kommt dann ein ganz normaler Fliesstext.....
Will man einen Zeilenumbruch, muß man das angeben:
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Hier kommt dann ein ganz normaler Fliesstext.....
Vorformatierter Text
Vorformatierter Text kann in und eingeschlossen werden. Text innerhalb dieser Tags
wird in der Regel in einem nichtproportionalen Zeichensatz dargestellt, wobei alle Leerzeichen und
-zeilen sowie Zeilenumbrüche direkt übernommen werden. Sämtliche HTML-Tags behalten jedoch
ihre Gültigkeit und werden auch innerhalb des -Blocks dargestellt.
Einrückungen, längere Zitate
Einrückungen und längere Zitate werden am besten in einem eigenen Abschnitt dargestellt. Dies
erreicht man durch und . Text innerhalb dieser Tags wird
normalerweise vom Browser eingerückt oder in Schrägschrift und als separater Absatz mit etwas
Abstand zum normalen Text angezeigt.
Verschiedene Schriftarten
Unter HTML gibt es zwei verschiedene Typen von Schriftarten, physikalische und logische. Erstere
geben direkt die Art der Schrift an (fett, schräg, usw.) während letztere sagen, um welche Art Text es
sich handelt und dem Browser die Entscheidung über die tatsächliche Darstellung überlassen. Alle
Schriftartenbefehle benötigen ein Start- und ein Ende-Tag. Folgende physikalische Schriftarten
existieren:
Nichtproportionaler Typewriter-Zeichensatz
Fettschrift
Überschrift Ebene 1 87

Italic oder Schrägschrift
unterstrichen (Achtung! Manche Browser stellen Links unterstrichen dar!)
durchgestrichen
Folgende logische Schriftarten stehen zur Verfügung:
Hervorgehoben, wird dargestellt durch Schrägschrift.
Stärkere Hervorhebung, wird dargestellt durch Fettschrift.
Wird verwendet für Befehle und Quellcode, dargestellt durch nichtproportionalen
Zeichensatz.
Eine Folge von Buchstaben.
Wird bei Anleitungen zur Darstellung des vom Benutzer einzugebenden Textes
verwendet.
Für die Darstellung von Variablennamen.
Für die Definition von Ausdrücken, wird dargestellt durch Fett- oder Schrägschrift.
Wird verwendet für Zitate, dargestellt durch Schrägschrift.
Neuere Browser beherrschen auch die folgenden Tags:
Teile der Schrifttiefergestellt .
Höhergestellte Teile der Schrift.
Ein Wort größer.
Ein Wort kleiner.
Listen
Webdesign
Zur Zeit stehen folgende Listen-Typen zur Verfügung:
Einfache Listen (Unnumbered Lists):
Diese werden eingeleitet durch . Sie zählen die einzelnen Elemente ohne laufende
Numerierung auf, stattdessen wird ein neutrales Aufzählungszeichen vorangestellt. Welches
Zeichen dazu verwendet wird ist Browser-abhängig, möglich sind z.B. Punkte, Striche oder
Sternchen. Jedes Listenelement wird eingeleitet durch . Zum Beispiel:
◊ Erstes Element
◊ Zweites Element
◊ Drittes Element
Als Parameter bei und bei können Sie mit TYPE=xxx den Typ des
Aufzählungssymbol angeben. Weiter unten sehen Sie die drei Möglichkeiten: TYPE=DISK
für den schwarzen Punkt, TYPE=CIRCLE für den Kreis und TYPE=SQUARE für das
Verschiedene Schriftarten 88

Quadrat.
Aufzählende Listen (Ordered Lists):
Sie sind den einfachen Listen sehr ähnlich, nur werden bei ihnen die Listenelemente
fortlaufend durchnumeriert. Das zugehörige Listen-Tag lautet . Zum Beispiel:
1. Erstes Element
2. Zweites Element
3. Drittes Element
Auch bei der "Ordered List" haben Sie die Möglichkeit, mit TYPE=xxx das
Aufzählungssymbol festzulegen (bei und bei ). und zwar:
TYPE=1 für Ziffern
TYPE=A für Großbuchstaben
TYPE=a für Kleinbuchstaben
TYPE=i für kleine römische Ziffern
TYPE=I für große römische Ziffern
Außerdem kann man mit dem Parameter START=nnn den Startwert der Aufzählung und mit
VALUE=nnn bei jedem einzelnen den Wert des Aufzählungspunktes festlegen. nnn ist
dabei immer numerisch anzugeben, die Umwandlung in Buchstaben oder römische Ziffern
erfolgt automatisch.
Beschreibende Listen (Descriptive Lists):
Elemente einer beschreibenden Liste bestehen aus dem Titel der zu beschreibenden Sache,
welche in irgendeiner Form besonders hervorgehoben wird, sowie dem Beschreibungstext.
Eine beschreibende Liste wird eingeleitet durch , der Titel durch und der
Beschreibungstext selbst durch . EinBeispiel bildet diese Aufzählung.
Es existieren noch weitere Listentypen, die jedoch von den Browsern recht stiefmütterlich behandelt
werden. ist eine in der Darstellung etwas kompaktere Form von , ist für eine
Liste von kürzeren Elementen gedacht, die auch in mehreren Spalten auf dem Bildschirm dargestellt
werden können.
Listen können beliebig verschachtelt werden, man sollte sich jedoch nicht darauf verlassen, daß der
Browser die einzelnen Verschachtelungsebenen hinreichend eindeutig darstellen kann (z. B. durch
Wechsel des Aufzählungszeichens):
• Erstes Element
♦ Erstes Unterelement
♦ Zweites Unterelement
♦ Drittes Unterelement
♦ Viertes Unterelement
• Zweites Element
♦ Erstes Unterelement
◊ Erstes Unter-Unterelement
◊ Zweites Unter-Unterelement
◊ Drittes Unter-Unterelement
♦ Zweites Unterelement
◊ Erstes Unter-Unterelement
◊ Zweites Unter-Unterelement
◊ Drittes Unter-Unterelement
• Drittes Element
Links zu anderen Dokumenten
Webdesign
Ein Link wird eingeleitet durch

• HREF Gibt einen URL auf ein Zieldokument an, auf das beim Anwählen des Links
gesprungen werden soll. Nur durch Angabe des HREF-Parameters wird ein Link aktiv und
selektierbar.
• NAME Wird verwendet, um innerhalb eines Dokumentes eine Markierung anzugeben, welche
im HREF-Parameter angegeben werden kann. Somit können einzelne Stellen in einem
Dokument (z. B. Unterkapitel) direkt angesprungen werden.
• REL Ermöglicht es, eine "Beziehung" zu dem Zieldokument zu definieren.
• REV Gibt ebenfalls eine Beziehung zwischen Dokumenten an, jedoch in der
entgegengesetzten Richtung, d. h. ein Link von A nach B mit REL="X" ist das gleiche wie
ein Link von B nach A mit REV="X".
• URN Gibt eine eindeutige Kennummer für das Dokument an, um dem Browser die
Möglichkeit zu geben, das doppelte Laden von Dokumenten zu erkennen und zu verhindern.
Dies ist noch in der Entwicklung.
• TITLE Gibt den Titel des Zieldokumentes an, damit der Browser diesen darstellen kann.
Dieser Titel sollte identisch sein mit dem durch definierten im Kopf des
Zieldokumentes.
Parameter, die Leer- oder Sonderzeichen enthalten, müssen in doppelte Anführungszeichen (")
eingeschlossen werden. Es macht nichts aus, wenn man grundsätzlich die Optionswerte in "
einschließt. Alle diese Parameter sind optional, jedoch macht ein Link ohne HREF- oder
NAME-Parameter nicht viel Sinn.
Danach wird das Tag mit > beendet, gefolgt vom Text oder der Grafik, welche den Link
repräsentieren sollen. Abgeschlossen wird der Link durch .
Hier einige Beispiele:
1. Ein typisches Link zu einer anderen WWW-Seite:
Mehr dazu in Kapitel 9.
Die entsprechende Stelle im Text wird mit dem NAME-Tag markiert:
Kapitel 9
Durch den Browser formatiert könnte das etwa so aussehen:
Willkommen bei der Mutter aller WWW-Seiten.
Naehere Information erhalten Sie in Kapitel 9.
...
Kapitel 9
Webdesign
Willkommen bei der
Mutter aller WWW-Seiten.
2. Verweis auf eine andere Stelle im Text:
Bei Links innerhalb des Angebots eines Servers sollte man die vollständige URL mit Angabe
des Rechnernamens (z. B. http://www.online-de.de) vermeiden, denn bei solchen Angaben
erfolgt jedesman eine Anfrage zum Nameserver. Ein lokales Link sollte also z. B.
"tips/index.html" lauten. Zu beachten ist auch, daß der Schrägstrich Verzeichnistrenner ist,
nicht der Backslash(\), der bei DOS und Windows verwendet wird. Bei den lokalen Links gibt
Links zu anderen Dokumenten 90

Webdesign
es auch noch einen Unterschied: Ein Link kann vom Stammverzeichnis des Serverangebots
ausgehen. In diesem Fall beginnt die Angabe des Dateipfades mit einem Schrägstrich (/). Man
nennt dies einen absoluten Pfad. Man kann aber auch vom aktuellen Verzeichnis ausgehen, z.
B. "news/index.html". Es wird dann in das Verzeichnis "news" gewechselt und die Datei
"index.html" an den Browser geschickt. Will man dann wieder ins übergeordnete Verzeichnis
aufsteigen, kann die Verzeichnisangabe ".." verwendet werden (wie bei DOS und Windows),
z. B. "index.html". Da sich solche Links auf das aktuelle Arbeitsverzeichnis beziehen, nennt
man sie relative Links. Die relativen Links haben den Vorteil, daß man komplette
Verzeichnisstrukturen innerhalb der Dateistruktur des Servers "umziehen" kann, ohne daß
eine einzige WWW-Seite geändert werden muß.
Natürlich können Sie nicht nur HTM-Dokumente verlinken, sondern jede beliebige Datei. Bei
Links auf Bilder (z. B. A HREF="image.gif">Ein Bild ) wird einfach die Bilddatei angezeigt.
Man kann damm mit dem "Back"-Button des Browsers zur ursprünglichen Siete
zurückkehren. Handelt es sich um Links auf andere Dateien, beispielsweise PDF-Dateien,
gepackte Archive (.zip), Programme (.exe), Word-Dokumente (.doc) oder Excel-Tabellen
(.xls), dann hängt es von den Einstellungen des Browsers und von den zur Verfügung
stehenden Plug-Ins ab, was geschieht. Bei sicherer Browsereinstellung fragt der Browser
nach, ob das Dokument geöffnet oder auf Platte gespeichert werden soll, im anderen Fall wird
nur nachgefragt, wenn der Dateityp dem Browser nicht bekannt ist, und ansonsten die Datei
mit dem passenden Programm (MS Word, Acrobat Reader, usw.) automatisch geöffnet. Damit
haben Sie auch die Möglichkeit, Dateiarchive per WWW-Interface anzubieten.
Sonderzeichen
Der für HTML gültige Zeichensatz ist ISO Latin-1 (ISO 8859-1). Auf Rechenanlagen, die nur
in der Lage sind, 7-Bit-Zeichen darzustellen, können Zeichen oberhalb von 127 durch
spezielle "character entities"gebildet werden. Diese beginnen immer mit einem
Kaufmanns-Und (&), gefolgt vom Zeichennamen und abgeschlossen durch ein Semikolon.
Auf diese Weise können alle Sonderzeichen dargestellt werden, auch wenn sie auf dem
Rechner oder der Tastatur des Dokumentenautors nicht verfügbar sind.
Außerdem müssen die reservierten Zeichen der HTML-Tags immer umschrieben werden. Es
sind dies: &amp;='&', &quot;='"', &lt;=''.
Das deutsche "ä" wird beispielsweise durch &auml; repräsentiert, ein "Ä" wäre &Auml;, ein
"ß" wäre &szlig;.
Sounds und anderes
Sounddateien, Animationen, VRML-Dateien öffnen das entsprechende Abspielprogramm im
Browser. Entweder es ist fest eingebaut (z. B. für Sounds), ein sogenanntes 'Plug-In' oder man
hat dem Browser angegeben, welches externe Programm er verwenden soll. Bei unbekannten
Dateiformaten bietet der Browser an, die Datei abzuspeichern.
Der -Tag ist eine Netscape-Erweiterung von HTML 3.2 zur allgemeinen
Einbindung von Multimedia-Elementen in eine Webseite. Damit können neben dem Aufruf
von Plug-Ins auch lokale Programme zur Darstellung von Sounds oder anderen Elementen
aufgerufen werden. Die allgemeine Syntax des HTML-Containers für Plug-Ins sieht so aus:
Sonderzeichen 91

Webdesign
♦ Über type wird das verwendete Plug-In angegeben. Diese Angabe kann das Plug-In
über eine Versionsnummer noch genauer spezifizieren (z. B.
"application/x-java-applet; version=1.2" für ein Java-Plug-In).
♦ Über die optionale Angabe pluginspace kann man einen Download-Ort in Form eines
URL angeben, wovon ein lokal bei einem Anwender nicht vorhandenes Plug-In bei
Bedarf automatisch geladen werden kann.
♦ Die Angabe code spezifiziert die Datei.
♦ Die beiden restlichen Attribute legen Breite und Höhe eines Anzeigebereichs fest.
Den -Tag gibt es auch in einer einfacheren Variante. Damit kann er auch zur
Einbindung von Videos und Musik in den üblichen Standardformaten verwendet werden:
Mit CONTROLS wird eingestellt, wie die Steuerung des Players erscheint, z. B.
CONTROLS=console. Die Parameter AUTOSTART, LOOP und HIDDEN haben entweder
"true" (wahr) oder "false" (falsch) als Wert. Sie legen fest, ob die Wiedergabe beim Starten
automatisch gestartet wird, ob sich die Wiedergabe ständig wiederholt und ob der Player
versteckt wird. Ein Beispiele für ein solches Embedding:
Es wird eine Midi-Sounddatei eingebunden, versteckt (hidden=true) und automatisch
(autostart=true) gestartet und dann ständig wiederholt (loop=true).
Die Verwendung des -Tags sollte mit Vorsicht geschehen, da die Technik im
Wesentlichen auf Netscape-Browser ab der Version 4.x und neuere Varianten des Explorer
beschränkt ist. Aber auch sonst sollte die Anwendung mit Vorsicht behandelt werden, da es
nicht immer erwünscht ist, wenn sich eine angewählte Seite gleich mit Sound meldet.
Farbe
Man kann die Farbe von Text, Links und Hintergrund der Seite im BODY-Tag definieren.
Dabei erfolgt die Farbangabe Sedezimal (also zur Basis 16), wobei für die drei Grundfarben
rot, grün und blau jeweils ein Wert zwischen 0 und FF (dezimal 0 .. 255) angegeben wird.
#000000 ist beispielsweise Schwarz, #FFFFFF ist weiß. Die reinen Grundfarben haben die
Werte rot = #FF0000, grün = #00FF00 und blau = #0000FF. Für diese Seite wurde im
BODY-Tag definiert:
♦ Die Farbe der normalen Schrift (schwarz): TEXT="#000000"
♦ Die Farbe des Hintergrundes (weiß): BGCOLOR="#FFFFFF"
♦ Die Farbe eines 'frischen' Hyperlinks (blau): LINK="#0000FF"
♦ Die Farbe eines schon mal selektierten Hyperlinks (lila): VLINK="#FF00FF"
♦ Die Farb eine Hyperlinks während des Anklickens (rot): ALINK="#FF0000"
Komplett sieht das dann so aus:
Aber Vorsicht: wer blaue Schrift auf gelbem Hintergrund zeigt, darf sich nicht wundern, wenn
der Leser irritiert ist. Besonders übel ist es, wenn die Links dann auch noch quitschbunt
dargestellt werden.
Mit dem Tag FONT kann man nicht nur die Zeichengröß (SIZE=..., Zahlenwert absolut
Sounds und anderes 92

Webdesign
oder relativ), sondern auch die Farbe (COLOR=...) einzelner Textpassagen ändern.
Die meisten Browser erlauben die Darstellung von Farben und verschiedene Zeichenhöhen im
Text, z. B.
H A L L O F A N S
Für solche Späßchen sollte man aber zu einem speziellen HTML-Editor greifen. Aber auch
von Hand kann man beispielsweise mit oder
(und natürlich dem schließenden ) die Farbe der Schrift nach belieben ändern.
Man sollte aber in jedem Fall darauf achen, daß man alle Farben angibt, also Text-,
Hintergrund-, und Linkfarben.
Die Darstellung der Farbe hängt auch von der Farbauflösung des jeweiligen Bildschirms auf
Betrachterseite ab. Damit die Seite auch bei geringerer Farbauflösung (256 Farben) noch toll
aussieht, sollte man sich auf bestimmte Farben beschränken. Dabei sind unter Windows von
den 256 Farben nur 216 wirklich verfügbar, da Windows 40 Farben für eigene Zweche
reserviert.
Bei zu geringer Farbauflösung würde der Browser die Bilder dann dithern. Es ist dazu im
Browser eine Color Lookup Table (CLUT) implementiert.
Denken Sie auch daran, daß bei unterschiedlichen Browsern oder Plattformen die
Farbsättigung unterschiedlich behandelt wird - mal heller, mal dunkler.
Die folgende Tabelle, ein GIF-Bild, zeigt eine Übersicht. Eine komplette Übersicht der 216
'Pseudo-Grundfarben' präsentiert die Farbtabelle als HTML-Datei oder als GIF-Datei. Diese
Grundfarben sollte man für Schrift-und Hintergrundfarbe verwenden.
Farbe 93

Font-Spielereien
S
E
N
K
R
E
C
H
T
E
S
C
H
R
I
F
T
Unter Umständen bietet sich ein unkonventioneller Umgang mit verschiedenen
Schriften an, denn eine spezielle Zielgruppe erfordert eine besondere Art der Gestaltung.
Sparsam verwendet kann das auch recht nett aussehen. Ganze Textpassagen sollte man
aber so nicht schreiben, es verschlechtert deren Lesbarkeit.
S P I E L E R E I E N
Eine weitere Möglichkeit wäre die Verwendung eines größeren Buchstabens immer am
Beginn eines neuen Absatzes. Und zusätzlich zur Größe kann man auch eine andere
Farbe wählen.
UND NOCH EINEVARIANTE: ALLE WORTE INVERSALIEN SCHREIBEN. BEI DEN WORTEN, DIE
WIRKLICH GROSS GESCHRIEBEN WERDEN, DIE ANFANGSBUCHSTABEN IN NORMALER GRÖSSE
SETZEN UND ALLE ANDEREN BUCHSTABEN ZWEI NUMMERN KLEINER MACHEN. DAS NENNT SICH
DANN KAPITÄLCHEN.
Webdesign
Font-Spielereien 94

Wie man links sieht, ist es auch möglich, Worte senkrecht zu schreiben. Dafür muß
man nur nach jedem Buchstaben einen Zeilenumbruch erzwingen und den Inhalt der
Tabellenzelle mittig ausrichten.
Tabellen
Tabellen sind recht einfach strukturiert. Sie werden vom -Tag eingeleitet und durch
abgeschlossen. Mit und wird die Überschrift der
Tabelle definiert. Dabei legt der Parameter ALIGN fest, ob die Überschrift über der Tabelle
(ALIGN=TOP) oder unter der Tabelle (ALIGN=BOTTOM) steht.
Danach folgen die einzelnen Zeilen der Tabelle, die zwischen und stehen. Die
einzelnen Felder (Spalten) der Tabelle werden in und eingeschlossen. Der
Browser berechnet automatisch die Maße der Tabellenfelder. Wird anstelle von TD der Tag
TH verwendet, erscheint die Schrift im Feld fett.
Durch die Option BORDER=nn kann der Tabellenrand festgelegt werden; BORDER=1
versieht die Tabelle mit einem schmalen Rahmen, BORDER=0 zeichnet die Tabelle ohne
Rand. Die beiden folgenden Tabelle werden eingegeben als:
Eine einfache Tabelle ohne Rahmen
Spalte 1Spalte 2Spalte 3
Zeile 1Feld 1,1Feld 2,1Feld 3,1
Zeile 2Feld 1,2Feld 2,2Feld 3,2
Eine einfache Tabelle mit Rahmen
Spalte 1Spalte 2Spalte 3
Zeile 1Feld 1,1Feld 2,1Feld 3,1
Zeile 2Feld 1,2Feld 2,2Feld 3,2
Das sieht dann so aus:
Webdesign
Eine einfache Tabelle ohne Rahmen
Spalte 1 Spalte 2 Spalte 3
Zeile 1 Feld 1,1 Feld 2,1 Feld 3,1
Zeile 2 Feld 1,2 Feld 2,2 Feld 3,2
Eine einfache Tabelle mit Rahmen
Spalte 1 Spalte 2 Spalte 3
Zeile 1 Feld 1,1 Feld 2,1 Feld 3,1
Zeile 2 Feld 1,2 Feld 2,2 Feld 3,2
Man kann Spalten auch über mehrere Zeilen ziehen oder eine Zeile über mehrere Spalten. Der
Quelltext:
Tabelle mit gedehnten Zellen
Spalte 1/2Spalte 3
Zeile 1Feld 1,1Feld 2Feld 3,1
Zeile 2Feld 1,2Feld 3,2
Tabellen 95

sieht dann folgendermaßen aus:
Webdesign
Tabelle mit gedehnten Zellen
Spalte 1/2 Spalte 3
Zeile 1 Feld 1,1 Feld 2 Feld 3,1
Zeile 2 Feld 1,2 Feld 3,2
Weitere Möglichkeiten bieten geschachtelte Tabellen.
Geschachtelte Tabelle mit gedehnten Zellen
Feld 1 steht auf der linken Seite und enthält einen Text der links an den danebenstehenden
Tabellen vorbeifliesst. Mit dem Parameter WIDTH und einer Prozentangabe kann man
festlegen, wie breit die Tabellenteile sein sollen. WIDTH erlaubt auch eine Angabe in Pixeln,
aber dabei sollte man vorsichtig sein. Mit ALIGN=CENTER kann man erreichen, daß die
Tabelleneinträge mittig liegen. Mit CELLPADDING=10 wird der Abstand zwischen
Zelleninhalt und Zellenrahmen auf 10 Pixel festgelegt.
Eine einfache Tabelle (1) mit Rahmen
Spalte 1 Spalte 2 Spalte 3
Zeile 1 Feld 1,1 Feld 2,1 Feld 3,1
Zeile 2 Feld 1,2 Feld 2,2 Feld 3,2
Eine einfache Tabelle (2) mit Rahmen
Spalte 1 Spalte 2 Spalte 3
Zeile 1 Feld 1,1 Feld 2,1 Feld 3,1
Zeile 2 Feld 1,2 Feld 2,2 Feld 3,2
Eine einfache Tabelle (3) mit Rahmen
Spalte 1 Spalte 2 Spalte 3
Zeile 1 Feld 1,1 Feld 2,1 Feld 3,1
Zeile 2 Feld 1,2 Feld 2,2 Feld 3,2
Der TABLE-Tag kann noch weitere Parameter haben, die wichtigsten sollen hier aufgezählt
werden:
♦ Mit dem Parameter WIDTH und einer Prozentangabe kann man festlegen, wie breit
die Tabelle sein soll. Die Angabe WIDTH="90%" würde beispielsweise dafür sorgen,
daß die Tabelle nicht die volle Breite des Browserfensters einnimmt.
♦ Mit ALIGN=CENTER kann man erreichen, daß die Tabelle mittig (bzw. links- oder
rechtsbündig) liegt. Die Kombination von ALIGN=CENTER und WIDTH="90"
würde dafür sorgen, daß links und rechts der Tabelle etwas Rand bleibt - was meist
besser aussieht.
♦ Die Optionen ALIGN=LEFT oder ALIGN=RIGHT ermöglichen es, den Text links
oder rechts neben der Tabelle weiterlaufen zu lassen. Mit dem Tag wird das Weiterlaufen des Textes unterhalb der Tabelle erzwungen.
♦ Mit CELLPADDING wird der Abstand zwischen Zelleninhalt und Zellenrahmen in
Pixel festgelegt. Man kann so dafür sorgen, daß der Text in der Tabelle nicht zu stark
links und rechts am Rand "klebt".
Geschachtelte Tabelle mit gedehnten Zellen 96

♦ Mit CELLSPACING verändern Sie den Abstand der Tabellenfelder zueinander. Es
wird also der Abstand zweier benachbarter Felder (horizontal und Vertikal) festgelegt.
♦ Mit BGCOLOR="#rrggbb" kann die Hintergrundfarbe der Tabelle festgelegt werden.
Besonders wichtig beim Gestalten von Tabellen sind die Parameter CELLPADDING und
CELLSPACING im -Tag. Als Beispiel soll die folgende Tabelle verändert werden.
♦
♦
Webdesign
Eine einfache Tabelle ohne Rahmen
Spalte 1 Spalte 2 Spalte 3
Zeile 1 Feld 1,1 Feld 2,1 Feld 3,1
Zeile 2 Feld 1,2 Feld 2,2 Feld 3,2
CELLPADDING wird der Abstand zwischen Zelleninhalt und Zellenrahmen in Pixel
festgelegt. Man kann so dafür sorgen, daß der Text in der Tabelle nicht zu stark links
und rechts am Rand "klebt". Dazu die obige Tabelle mit CELLPADDING=10.
Eine einfache Tabelle ohne Rahmen
Spalte 1 Spalte 2 Spalte 3
Zeile 1 Feld 1,1 Feld 2,1 Feld 3,1
Zeile 2 Feld 1,2 Feld 2,2 Feld 3,2
CELLSPACING legt fest, wieviele Pixel die Zellenlinien breit sind. Es wird also der
Abstand zweier benachbarter Felder (horizontal und Vertikal) festgelegt. Auch dazu
die obige Tabelle mit CELLSPACING=10.
Eine einfache Tabelle ohne Rahmen
Spalte 1 Spalte 2 Spalte 3
Zeile 1 Feld 1,1 Feld 2,1 Feld 3,1
Zeile 2 Feld 1,2 Feld 2,2 Feld 3,2
Übrigens: Das geschützte Leerzeichen (&nbsp;) in einer leeren Zelle vermeidet, daß dieses
Feld der Tabelle erhaben erscheint. Viele Browserversionen unterscheiden nämlich zwischen
einer leeren Zelle und einer Zelle mit Inhalt.
Versieht man eine Tabelle ohne Rand (BORDER=0) mit einer Hintergrundfarbe, die nur ein
Feld enthält, kann man einen Text farbig hinterlegen. Damit es gut aussieht, sollte man mit
CELLPADDING für etwas Rand um den Text sorgen.
Tabellen kann man aber auch anders verwenden. Die folgende Tabelle hat nur ein Feld. Der
Rand wurde mit BORDER=10 und CELLPADDING=10 passend verbreitert.
Man nehmen eine Tabelle mit nur einem Feld
und strukturiere den Text mit dem -Tag
und schon hat man ein 'Hinweisschild'.
Wenn man nun noch den Hintergrund mit einfärbt, erhält
man:
Geschachtelte Tabelle mit gedehnten Zellen 97

Man nehmen eine Tabelle mit nur einem Feld
und strukturiere den Text mit dem -Tag
- schon hat man ein 'Hinweisschild'.
Mit BORDERCOLOR läßt sich
auch der Rahmen einfärben (nur MS IE).
Man kann mit Tabellen noch mehr anstellen. Der folgende Screenshot beschreibt einen
Datenblock, wie er bei der Datenfernübertragung oder in Netzwerken vorkommt. Auch dieses
scheinbar grafische Element ist eine Tabelle.
Der Quellcode lautet:
Webdesign
Synchro-nisation
Datenblock
Block-sicherung
Block-ende
Noch ein Beispiel, das wie gemalt aussieht:
Die Verbindungslinien sind Underline-Zeichen, der Rest wieder Tabellenelemente. Auch hier
ist der Quelltext recht kurz:
Computer
___&nbsp;
Modem
_____&nbsp;
&Ouml;ffentliches Telefonnetz
_____&nbsp;
Modem
___&nbsp;
Computer
Oder wollen Sie mal ein paar Buttons ohne Grafikprogrann basteln? Bitte sehr:
Nummer 1
Nummer 2
Nummer 3
Nummer 4
Geschachtelte Tabelle mit gedehnten Zellen 98

Womit wir schon bei Attributen für die einzelnen Tabellenfelder sind. Neben anderen sind im
TD- oder TH-Tag wichtig:
♦ WIDTH gibt die Breite des Feldes an. Hier kann entweder eine absolute Zahlenangabe
in Pixel stehen oder eine prozentuale Angabe (% der Gesamtbreite).
♦ HEIGHT gibt die Höhe des Feldes an (in Pixeln oder in % der Höhe des
Anzeigefensters).
♦ ALIGN legt fest, wie der Text des Zelleninhaltes ausgerichtet wird. Hier sind die
Werte LEFT, RIGHT und CENTER möglich.
♦ VALIGN legt die vertikale Ausrichtung fest. Hier sind die Werte TOP, BOTTOM oder
MIDDLE möglich.
♦ BGCOLOR erlaubt das Färben des Zellenhintergrundes (wie mit der Farbtabelle
gezeigt wurde).
Um alle Zellen einer Zeile gleich auszurichten, werden die ALIGN- oder VALIGN-Angaben
im TR-Tag untergebracht. Nun ein Beispiel für die verschiedenen Möglichkeiten.
Spalte 1, links Spalte 2, zentriert Spalte 3, rechts
Zeile 1, TOP Feld 1,1 Feld 2,1
...
...
Zeile 2, BOTTOM Feld 1,2
Zeile 3, MIDDLE Feld 1,3
Feld 3,1
Feld 2,2
...
... Feld 3,2
Feld 2,3
...
...
Feld 3,3
Spalte 1 Spalte 2
Feld 1,1 Feld 2,1
Feld 1,2 Feld 2,2
Feld 1,3 Feld 2,3
WIDTH und HEIGHT können übrigens auch im TABLE-Tag verwendet werden. Die Optionen
ALIGN=LEFT oder ALIGN=RIGHT ermöglichen es, den Text links oder rechts neben der
Tabelle weiterlaufen zu lassen. Mit dem Tag wird das Weiterlaufen des
Textes unterhalb der Tabelle erzwungen (wie es hier mit ALIGN=LEFT gezeigt wird). Mit
HSPACE=5 im Table-Tab wird etwas Abstand zum Text erzeugt.
Auch Bilder lassen sich in Tabellen sauber ausrichten, wobei man den Rand wegläßt:
Emotikon
freundlich, aber doof
Webdesign
Emotikon
zustimmend freundlich
Emotikon
abweisend unfreundlich
Eine weitere Möglichkeit, Tabellen zu verwenden ist die gezielte Anordnung von Elementen.
Bilder lassen sich beispielsweise in Tabellen sauber ausrichten, wobei man den Rand wegläßt:
Das folgende Beispiel ist nicht etwa ein einziges Bild, sondern es setzt sich aus zwei Bildern
und einem Textteil zusammen.
Immer zündende Ideen
mit der tollen Webseite
Geschachtelte Tabelle mit gedehnten Zellen 99

Webdesign
von den famosen Designern
der Firma Dings & Bums GmbH
Wenn man BORDER=1 setzt zeigt sich die Anordnung in der Tabelle (unten).
Der Quelltext der Tabelle ist schon verzwickter:
Immer zündende Ideen
mit der tollen Webseite
von den famosen Designern
der Firma Dings & Bums GmbH
Immer zündende Ideen
mit der tollen Webseite
von den famosen Designern
der Firma Dings & Bums GmbH
Bei älteren Netscape-Browsern kann es vorkommen, daß die Leerzeichen oder
Zeilenvorschübe zwischen den einzelnen TD-Tags zu einem 1 Pixel breiten Zwischenraum
führen. Wer sicher gehen will, hängt nach dem Testen alle Tags in einer langen Zeile
hintereinander. Man sollte auch immer daran denken, daß die Browser zwar versuchen, aus
dem HTML-Code etwas Vernünftiges zu erzeugen, aber auch dort gibt es Grenzen. Wenn die
Tabellenspalten zu schmal gewählt werden, kann es vorkommen, daß Wörter willkürlich
getrennt werden. Viele Konvertierprogramme geben eine Tabellenbreite in Pixeln vor, wobei
der Wert abhängig von der gewählten Druckerauflösung und vom Zeichensatz berechnet wird.
Hier ist auf jeden Fall Nacharbeit erforderlich.
Wenn Ihre Tabelle im Browser nicht so dargestellt wird, wie Sie sich das vorgestellt haben
oder wenn der Browser die Tabelle überhaupt nicht zeigt, dann gehen Sie den Quellcode
durch. Meist wurde nur ein schließendes Tag vergessen oder ein öffnendes Tag zweimal
hingeschrieben. Da man Tabellen ineinander schachteln darf, führt sowas den Browser in die
Irre.
Bilder
Eine Fehlermeldung?
Bilder 100

Webdesign
Bilder und Grafiken können auf zwei Arten in HTML-Dokumente eingebunden werden,
einmal über Hyperlinks, hier wird die Grafik erst bei Anwählen des Links geladen und über
ein Anzeigeprogramm dargestellt, oder als sogenanntes "inline image", hier befindet sich dir
Grafik im Dokument zwischen den Textzeilen und wird direkt bei Laden des Dokumentes
mitgeladen und angezeigt. Unterstützt werden derzeit die Formate GIF (.gif), JPeg (.jpg) und
X Bitmap (.xbm). Über die Einbindung externer Programme läßt sich die
Darstellungsfähigkeit vieler Browser erweitern. Der beim Attribut ALT angegebene Text wird
ausgegeben, wenn das Bild nicht dargestellt werden soll oder kann. Gibt man 'ALT=""' an,
entfällt der Hinweis '[IMAGE]' beim Textbrowser Lynx.
Um den Speicherbedarf der Bilder zu reduzieren, kann man die passende Kompression
wählen:
♦ Bei Photos is JPEG mit einem passenden Kompressionsfaktor güstig.
♦ Bei flächigen Bildern eignet sich das GIF-Format besser.
♦ Wenn das Bild trotzdem zu groß ist, ein kleines Bild als Link anbringen.
Der Befehl zum Einbinden von Bildern lautet
♦ Bild-URL: Dies ist ein URL auf die Grafik, im einfachsten Fall ist es eine lokale
Datei, es kann aber auch ein Link auf eine Grafik auf einem weit entfernten Rechner
sein.
♦ Textansatz: Dieser Wert gibt an, wo die dem nachfolgenden Textzeilen
beginnen sollen, an der Oberkante, in der Mitte oder der Unterkante des Bildes.
Mögliche Werte sind LEFT, RIGHT, TOP, MIDDLE oder BOTTOM. Diese Angabe ist
optional, der voreingestellte Wert ist BOTTOM.
♦ Alternativdarstellung: Gibt an, was bei nicht-grafikfähigen Browsern oder bei
abgeschalteter Bilddarstellung an Stelle der Grafik gezeigt werden soll.Bei neueren
Browserversionen wird der Text auch gezeigt, wenn man den Mauszeiger über die
Grafik bewegt. Hier sollte in wenigen Worten erklärt werden, was das Bild darstellt.
Auch diese Angabe ist optional, voreingestellt ist das Wort IMAGE. Will man keine
Angabe, schreibt man ALT="".
♦ Mit WIDTH und HEIGHT kann optional die Bildgröße in Pixeln angegeben werden.
Das erleichtert dem Browser die Berechnung der Seitenaufteilung, da er die Bildgröße
schon vor dem Laden des Bildes kennt. Die meisten Browser können auch das Bild
entsprechend der Angaben vergrößern oder verkleinern. Unten einmal normal, einmal
verkleinert (und fast unlesbar):
♦ Die Parameter VSPACE und HSPACE geben an, wieviele Pixel Abstand zwischen
Bild und umgebenden Text vertikal und horizontal frei bleiben sollen.
♦ Der Parameter BORDER gibt schließlich an, wie breit der farbige Rand sein soll,
wenn das Bild als Link dient. Will man keinen Rand, gibt man 0 an.
Hier zweimal das gleiche Bild, einmal Originalgröße und einmal auf 150 x 70 Pixel skaliert:
Eine Fehlermeldung? 101

Webdesign
Der Textansatz bedarf einer weiteren Erläuterung, denn die Parameterwerte LEFT und
RIGHT unterscheiden sich in der Darstellung erheblich von TOP, MIDDLE und BOTTOM.
Bei diesen drei Werten wird jeweils nur eine Textzeile neben dem Bild angeordnet und aller
weiterer Text kommt unter das Bild. Im Browser-Fenster sieht das dann so aus:
Beim Textansatz RIGHT und LEFT läuft dagegen der Text um das Bild herum, bei LEFT ist
das Bild auf der linken Seite und der Text rechts, bei RIGHT umgekehrt. Man kann dies
verwenden, um die Anordnung von Text und Bildern etwas aufzulockern. Man muß dabei das
Bild auch nicht, wie im folgenden Beispiel, an den Textanfang setzen, sondern kann es auch
mitten in den Text plazieren.
Eine Fehlermeldung? 102

Webdesign
Wenn der Text zu knapp am Bild vorbei läuft, kann mit den Parametern VSPACE und
HSPACE mehr "Luft" um das Bild geschaffen werden.
Man kann die verkleinerten Bilder auch zu Hyperlinks machen und beim Anklicken dieses
Vorschaubildes ('Thumbnail') dann das Bild in voller Größe zeigen. In der Regel wird man
zum kleinen Bild noch die Größe des Originals dazuschreiben (z. B. 'Original 1024 x 512
Pixel, 245 KByte').
Grafiken können also auch innerhalb von Links verwendet werden, so daß ein Anwählen der
Grafik zu einem neuen Dokument führt. Dies wird folgendermaßen realisiert:
Click Me!
Eine Fehlermeldung? 103

Hier sind sowohl das Wort "Click!" als auch die Grafik sensitiv. Die Grafil erhät in diesem
Fall eine farbige Umrandung in der Farbe, die auch für den Linktext verwendet wird (links
unten). Will man dies nicht, fügt man dem IMG-Tag die Option BORDER=0 hinzu (rechts
unten).
Ein Beispiel:
Click Me! Click Me!
Man sollte mit eingebundenen Grafiken sorgfältig umgehen. Insbesondere bei sehr langsamen
Übertragungsleitungen sind lange Ladezeiten für Bilder ein Ärgernis. Viele Browser geben
dem Benutzer auch die Möglichkeit, das automatische Laden von eingebundenen Grafiken
auszuschalten und diese erst auf Wunsch anzuzeigen. Mehr zu Grafiken später.
Aufzählungen
Man kann eine Aufzählung statt mit auch mit Bildern als Aufzählungpunkte anlegen.
Rot ist die Liebe ...
Grün ist die Hoffnung ...
Blau hab' ich vergessen ....
Der Trick mit dem blinden GIF
Bildbeschreibung
Will man wirklich mehr Text neben einem Bild
stehen haben und diesen Text auch genau plazieren,
dann kann man zu einem kleinen Trick greifen. Man
bastelt eine Tabelle, die nur eine Zeile und zwei
Spalten besitzt. Das Bild kommt in die eine Spalte,
der Text in die andere.
Um Satzgestaltung zu erreichen, z. B. den Einzug bei der ersten Zeile, positioniert man ein
transparentes GIF-Bild der Größe 1 x 1 Pixeln vor den Text und gibt ihm mit WIDTH und
HEIGHT die entsprechende Größe. Auch, um die Abstände zwischen Absätzen zu steuern,
kann man das blinde GIF verwenden:
Bilder kann man auch als Links verwenden. Wer kein 'klickbares Bild' verwenden will,
kann auch Einzelbilder nebeneinander plazieren, es darf dann aber kein Zeilenwechsel
zwischen den Bildern vorkommmen, sonst gibt es bei einigen Browsern eine Lücke. Durch
die Angabe von 'BORDER=0' wird der bei Links sonst übliche farbige Rand unterdrückt.
Hintergrund-Bilder
Webdesign
Eine weitere Anwendung von Bildern ist das Einbinden eines Hintergrundes. Dies geschieht
durch den Parameter BACKGROUND="Bilder-Url" im BODY-Tag.
Aufzählungen 104

Webdesign
.... &gt>
Der Hintergrund wird durch ein Bild ersetzt, das durch die URL spezifiziert wird. Das Bild
wird 'gekachelt', d. h. auf die Ausdehnung des Fensters neben- und untereinander wiederholt.
Das kann dazu führen, daß bei der typischen Windows-Darstellung von 600 x 800 Pixeln das
Hintergrundbild nur einmal erscheint, aber auf der Workstation mit hoher Auflösung
mehrfach.
Das Hintergrundbild muß übrigens nicht groß sein, 8 Pixel hoch und 3000 Pixel ist ein guter
Wert (die Breite reicht auch für Workstations aus). Wichtig ist jedoch, daß der Hintergrund
nicht zu aufdringlich ist und die Lesbarkeit des Textes verschlechtert.
Man kann aber auch einen Hintergrund so gestalten, daß sich das Bild gut kacheln läßt, oberer
und unterer bzw. rechter und linker Rand müssen dann genau zueinander passen. Man erhält
so einen Textur-Effekt. Nebenbei: Das Hintergrundbild bei Windows macht es genauso.
Wichtig ist, daß man trotz Hintergrundbild auch die Hintergrundfarbe festlegt - und zwar im
Farbton des Hintergrundbildes. Der Browser baut nämlich zuerst einen leeren Schirm in der
Standard-Hintergrundfarbe auf. Dann wird der Hintergrund gemäß der Hintergrundfarbe im
BODY-Tag eingefärbt. Das Hintergrundbild kommt meist erst viel später. Wenn der
Hintergrund schon passend gefärbt ist, erscheint der Übergang sanfter.
Frames
Mit Hilfe von Frames können Sie den Anzeigebereich des Browsers in verschiedene, frei
definierbare Segmente (gewissermaßen einzelne 'Fenster') aufteilen. Jedes Segment, 'Frame'
genannt, kann eigene Inhalte enthalten. Die einzelnen Frames können wahlweise einen
statischen Inhalt (non SCROLLING regions) oder einen wechselnden Inhalt haben. Links in
einem Frame können Dateien aufrufen, die dann in einem anderen Frame angezeigt werden.
Frames werden ab Netscape 2.0 und ab MS Internet Explorer 3.0 unterstützt.
Frames stellen an das Design von HTML-Seiten besonders hohe Ansprüche. Einige Tips, die
Sie beachten sollten, finden Sie weiter unten. Das Frame-Konzept erlaubt
Hypertext-Funktionalitäten, die bislang nur mit Hilfe professioneller Hypertext-Systeme
realisierbar waren. In jedem Frame stehen alle Anzeige-Features zur Verfügung - so ist es z.
B. denkbar, in einem Frame Textinformation anzuzeigen, während in einem anderen Frame
gleichzeitig ein passendes Video abläuft.
Mit Frames in Verbindung mit Formularen können Sie anwenderfreundliche
Bedien-Oberflächen realisieren. So können Sie z. B. in einem linken Frame ein Formular für
Sucheingaben zur Verfügung stellen, während rechts daneben in einem anderen Frame die
jeweils aktuellen Suchergebnisse präsentiert werden.
Frames bergen aber auch Gefahren. Unüberlegte Anwendung von Frames kann den Anwender
mehr verwirren als ihm zu helfen. Oft wird der Bildschirm mit Frames überladen und die
einzelnen Fenster dadurch sehr klein. Oder einzelne Frames werden überhaupt nicht genutzt.
Ein gewichtiger Nachteil ist, daß man Seiten, die in einem Frame dargestellt werden, nicht in
die 'Bookmarks' aufnehmen kann. Daran sollte man denken, wenn man eine tief verschachtelte
Hierarchie von Seiten in einem Frame darstellt.
Frame-Sets definieren Mehrere zusammengehörige Frames
bilden ein Frame-Set. Ein Frame-Set definieren Sie anstelle
des herkömmlichen BODY-Tags. Wenn Sie in einer HTML-Datei
Hintergrund-Bilder 105

ein Frame-Set definieren, sieht das Grundgerüst der Datei
folgendermaßen aus:
Frame-Test
... Frame-Definitionen ...
♦ leitet die Definition eines Frame-Sets ein. Dahinter folgen die
Definitionen der einzelnen Frames.
♦ schließt die Definition des Frame-Sets ab.
Anzeigefenster aufsplitten mit Frame-Sets
Beim Definieren von Frame-Sets bestimmen Sie auch, wie das Anzeigefenster aufgeteilt
werden soll. Dabei müssen Sie sich das Anzeigefenster wie den leeren Rahmen einer Tabelle
vorstellen. Damit die Tabelle Gestalt annimmt, müssen Sie Zeilen und Spalten definieren. Die
Definition der Zeilen und Spalten erfolgt bei der Definition der Frame-Sets. Was in den
einzelnen Zellen (Frames) stehen soll, geben Sie bei der Definition der einzelnen Frames an.
Zum Beispiel:
Erzeugt zwei Frames, deren Inhalt hier festgelegt wird...
Beispiel 2:
Erzeugt zwei Frames, deren Inhalt hier festgelegt wird...
Beispiel 3:
Webdesign
Erzeugt zwei Frames, deren Inhalt hier festgelegt wird...
Frame-Sets definieren Mehrere zusammengehörige Framesbilden ein Frame-Set. Ein Frame-Set 106
definieren

Erzeugt nochmal zwei Frames, deren Inhalt hier festgelegt wird...
Durch die Angabe ROWS=x% im einleitenden Frameset-Tag bestimmen Sie die "Zeilen" und
deren Höhen. Die Höhenangaben der einzelnen Zeilen trennen Sie durch Kommata. Anstelle
der Prozentangaben können Sie auch absolute Zahlenwerte (in Pixel) benutzen, z.B.
ROWS="120,520". Im Zusammenhang mit absoluten Zahlenwerten können Sie auch einen
'*' als Wildcard verwenden. So bewirkt beispielsweise ROWS="120,*,120" ein Set, das
aus drei Zeilen für Frames besteht, wobei die erste und die letzte Zeile jeweils 120 Pixel hoch
sind (z. B. für Kopf- und Fußzeilen). Die Höhe der mittleren Zeile ist durch einen Stern
markiert und somit variabel. Sie ist durch die Größe des Anzeigefensters beim Anwender
bestimmt.
Durch die Angabe COLS=x% im einleitenden Frameset-Tag bestimmen Sie die "Spalten" und
deren Breiten. Hierbei gelten die gleichen Regeln wie bei den "Zeilen".
Alle Angaben hinter ROWS= und COLS= müssen in Anführungszeichen stehen.
Wenn Sie Anordnungen wie in Beispiel 3 erreichen wollen, müssen Sie mehrere,
verschachtelte Frame-Sets definieren. Gehen Sie dabei hierarchisch vor. In Beispiel 3 besteht
die erwünschte Gesamtanordnung zunächst einmal aus zwei Spalten. Daß die rechte Spalte
nochmals unterteilt werden soll, ist zunächst nicht wichtig. Sie definieren in diesem Fall
zuerst ein Frame-Set mit zwei Spalten, im . Da Ihre
gedachte Tabelle in der rechten Spalte in zwei Zeilen unterteilt werden soll, brauchen Sie im
nächsten Schritt Angaben zu den Zeilen. Die rechte Spalte, die in Beispiel 3 zwei Zeilen
enthalten soll, definieren Sie durch die entsprechenden Angabe .
Frames definieren
Nachdem Sie durch die Definition von Frame-Sets geeignete Segmente des Anzeigefensters
bestimmt haben, geben Sie mit der Definition der Frames an, was in den einzelnen Segmenten
angezeigt werden soll. Ferner können Sie verschiedene Eigenschaften für die Segmente
bestimmen. Zum Beispiel:
Frame-Test
Webdesign
Anzeigefenster aufsplitten mit Frame-Sets 107

Mit "Dateiname" definieren Sie innerhalb eines Frame-Sets den Inhalt der
zugehörigen Frames. Bei der Adressierung der Dateien, die in einem Frame angezeigt werden
sollen, gelten die gleichen Regeln wie bei der Referenzierung von Grafiken. Definieren Sie für
jede "Zelle" Ihrer gedachten Tabelle einen Frame.
Wenn Sie zu Beginn noch keinen Inhalt in einem Frame anzeigen wollen, lassen Sie die
Angabe SRC= einfach weg und schreiben ein nacktes . Wenn Sie einen Frame ganz
leer lassen wollen, schreiben Sie anstelle von einfach .
Eigenschaften von Frames definieren
Jeder Frame wird, abhängig von der verwendeten Benutzeroberfläche des Anwenders, in
einem eigenen Fenster angezeigt. Solche Fenster können verschiedene Eigenschaften haben:
sie können Scroll-Leisten haben oder nicht, und sie können einen Mindestabstand zwischen
Fensterrahmen und Fensterinhalt haben.
Scrollbare/nicht scrollbare Fenster
Durch die Angabe SCROLLING=yes im Definitions-Tag eines Frames legen Sie fest, daß
das Anzeigefenster des Frames in jedem Fall Scroll-Leisten besitzt. Durch die Angabe
SCROLLING=no verhindern Sie dies. Wenn Sie das Scrollen des Fensterinhalts verhindern,
können Inhalte, die größer sind als das Fenster, nicht vollständig angezeigt werden.
Mindestabstände zwischen Fensterrand und Fensterinhalt
Durch die Angabe MARGINWIDTH=x (Pixel) im Definitions-Tag eines Frames bestimmen
Sie den Abstand zwischen rechtem bzw. linkem Fensterrand und dem Fensterinhalt. Durch die
Angabe MARGINHEIGHT=x (Pixel) bestimmen Sie den Abstand zwischen oberem bzw.
unterem Fensterrand und dem Fensterinhalt.
Unveränderbare Fenstergröße
Webdesign
Frame-Fenster sind normale Dokument-Fenster innerhalb des Browser-Hauptfensters. Solche
Dokument-Fenster kann der Anwender normalerweise in der Größe verändern. Sie können
dies aus "regietechnischen" Gründen verhindern.
Frames definieren 108

Durch die Angabe NORESIZE im Definitions-Tag eines Frames verhindern Sie, daß der
Anwender die Größe des Frame-Fensters verändern kann. Es genügt, die Angabe bei einem
Frame zu schreiben. Benachbarte Frames können dann auch nicht bewegt werden.
Rahmendicke bzw. unsichtbare Fensterrahmen
MS Internet Explorer und Netscape unterstützen beide ab Version 3.0 Frames ohne sichtbare
Fensterrahmen oder mit frei bestimmbarer Rahmendicke. Bei unsichtbaren Fensterrahmen
wirken die Frame-Fenster wie nahtlos aneinander gefügte Flächen am Bildschirm.
Wenn Sie im einleitenden -Tag die Zusatzangabe FRAMEBORDER=0
schreiben, wird das gesamte Frame-Set ohne sichtbare Rahmen angezeigt. Nur erforderliche
oder gewünschte Scroll-Leisten werden angezeigt. Wenn Sie in einem einleitenden
-Tag die Zusatzangabe FRAMEBORDER=0 schreiben, wird bei diesem
Frame-Fenster der sichtbare Rahmen unterdrückt.
Wenn Sie bei FRAMEBORDER= eine Zahl größer Null angeben, bestimmen Sie die
Rahmendicke in Pixeln. Mit FRAMEBORDER=10 definieren Sie also beispielsweise eine
Rahmendicke von 10 Pixeln.
Namen von Frames definieren
Frames können Namen erhalten. Einen benannten Frame können Sie dann in Links
adressieren, d. h. Sie können beim Link angeben, daß das Linkziel in einem bestimmten
(benannten) Frame angezeigt werden soll.
Durch die Angabe NAME= "Fenstername" im Definitions-Tag eines Frames weisen Sie dem
Frame einen Namen zu. In Links können Sie diesen Frame unter dem vergebenen Namen
adressieren. Fensternamen müssen in Anführungszeichen stehen, dürfen nicht zu lang sein und
nur aus Buchstaben, Ziffern und dem Unterstrichen bestehen. Bei selbst vergebenen Namen
darf das erste Zeichen des Namens kein Unterstrich sein.
Reservierte Fensternamen
Webdesign
Folgende reservierte Fensternamen haben bei Links eine spezielle Bedeutung:
_blank: Das Linkziel wird in einem neuen Fenster angezeigt.
Eigenschaften von Frames definieren 109

_self: Das Linkziel wird im gleichen Fenster angezeigt wie der Link.
_parent: Das Linkziel wird im übergeordneten Fenster angezeigt. Falls es kein
übergeordnetes Fenster gibt, wird das Linkziel im gleichen Fenster angezeigt wie der Link
selbst.
_top: Das Linkziel wird im ersten Fenster einer Fensterhierarchie angezeigt. Falls es kein
übergeordnetes Fenster gibt, wird das Linkziel im gleichen Fenster angezeigt wie der Link
selbst.
Links zu anderen Frames schreiben
Webdesign
Sie können bei Links zu anderen Dateien festlegen, daß die adressierte Datei in einem
bestimmten Frame angezeigt wird.
Link zum rechten Fenster
Zur Adressierung eines Frames in einem Link schreiben Sie einen gewöhnlichen
Hyperlink-Befehl. Im einleitenden Tag schreiben Sie jedoch die zusätzliche Angabe
TARGET=Frame-Fenster-Name. Der Name des Fensters muß in Anführungszeichen
stehen. Sie können hinter TARGET= sowohl selbst definierte Fenster als auch reservierte
Fensternamen angeben.
Alle Links einer Datei in einem anderen Frame anzeigen
Sie können in einer HTML-Datei angeben, daß alle darin enthaltenen Links zu einem
bestimmten anderen Frame-Fenster führen. So müssen Sie nicht bei jedem Link die gleiche
Frame-Adressierung mit angeben. Besonders sinnvoll ist dies, wenn Sie z. B. ein Fenster mit
sehr vielen Links haben, deren Linkziele in einem anderen Fenster angezeigt werden sollen.
....
Das voreingestellte Frame-Fenster für Links können Sie im Dateikopf einer HTML-Datei
bestimmen. Dazu müssen Sie zwischen und die Anweisung schreiben. Hinter TARGET= folgt der Name des gewünschten
Frame-Fensters. Der Name des Fensters muß in Anführungszeichen stehen.
Links, die das Frame-Set beenden
Sie können bei Links zu anderen Dateien festlegen, daß das aktuelle Frame-Set dabei beendet
wird. Das Linkziel wird wieder in dem Fensterzustand angezeigt, der vor der Definition des
Frame-Sets aktuell war.
Frames-Set beenden
Durch die Zusatzangabe TARGET="_parent" wird das Frame-Set beim Anklicken des
Linkss beendet. Schreiben Sie die Zusatzangabe so wie hier angegeben, also mit dem
Namen von Frames definieren 110

führenden Unterstrich.
Webdesign
Wenn Sie beim Internet Explorer (IE) im einleitenden FRAMESET-Tag die Zusatzangabe
FRAMEBORDER=NO schreiben, wird das gesamte Frame-Set ohne sichtbare Rahmen
dargestellt (Gegenteil: FRAMEBORDER=YES). Nur erforderliche oder gewünschte
Scroll-Leisten werden angezeigt. Bei Netscape Navigator (NN) wird die Rahmendicke mit
BORDER=nn festgelegt, hier vermeidet man den Rand also durch BORDER=0. Will man zu
beiden Browsern kompatibel bleiben, muß man beide Parameter aufnehmen. Weitere
Parameter für Framesets sind FRAMESPACING=nn zur Festlegung des Rahmenabstandes
beim IE und BORDERCOLOR="#rrggbb" für die Rahmenfarbe.
Bei den Frames selbst gibt es auch einige Parameter:
♦ FRAMEBORDER: Bei einem Wert von 0 wird der sichtbare Rahmen unterdrückt.
Wenn Sie bei FRAMEBORDER eine Zahl größer Null angeben, bestimmen Sie die
Rahmendicke in Pixeln.
♦ SCROLLING: Hier können als Werte YES (immer ein Scrollbar am Frame), NO
(kein Scrollbar) und AUTO (Scrollbar nach Bedarf) auftreten. Günstig ist der Wert
AUTO.
♦ MARGINWIDTH: Angabe der Breite des linken und rechten Randes in Pixeln.
♦ MARGINHEIGHT: Angabe der Breite des oberen und unteren Randes in Pixeln.
♦ NORESIZE: Verbietet das Ändern der Fenstergröße. Sonst kann man die Maus auf
den Rand eines Frames positionieren und den Rand verschieben.
♦ SRC: Url der darzustellenden Webseite oder Datei.
♦ NAME: Namen des Frames (um mit TARGET darauf Bezug nehmen zu können).
Sinnvolle Einsatzmöglichkeiten für Frames
Frames sind ein Werkzeug, mit dem man viel verkehrt machen kann. Generell gilt: jeder
Einsatz von Frames muß gerechtfertigt sein. Das bedeutet: die Verwendung der
Frame-Technik muß dem Anwender als sinnvoll und vorteilhaft erscheinen. Wer Frames aus
purem Selbstzweck einsetzt, muß damit rechnen, als technikverliebter HTML-Novize statt als
souveräner Web-Designer betrachtet zu werden.
Der Grund dafür sind nicht wegzudiskutierende Nachteile von Frames:
nicht Frame-fähige Browser:
Frames werden nicht von allen WWW-Browsern angezeigt. Da die gesamte Struktur
eines auf Frames basierenden Projekts von der Struktur herkömmlicher Projekte
entscheidend abweicht, kann ein Anbieter von Frames solchen Anwendern, die keine
Frames anzeigen können, entweder gar keine Alternative anbieten, oder eine
"zweigleisige" Alternative, die sehr aufwendig zu realisieren und zu pflegen ist.
Bildschirmauflösung:
Bei kleineren Bildschirmen, z. B. bei 14-Zoll-Monitoren mit einer
Bildschirmauflösung von 640 x 480 Pixeln, sind mehr als zwei Frame-Fenster bereits
eine Zumutung fürs Auge und die Übersicht.
Speicherbedarf und Ladezeiten:
Frames verlangen in der Regel mehr Arbeitsspeicher, da mehrere WWW-Seiten
inclusive HTML- und zugehörigen Grafikdateien gleichzeitig geladen werden
müssen. Im WWW kann es unter ungünstigen Verhältnissen auch leichter zu
unzumutbaren Ladezeiten kommen.
In folgenden Fällen ist der Einsatz von Frames für den Anwender am ehesten nachvollziehbar:
schnelles Wechseln zwischen Informationseinheiten
Links, die das Frame-Set beenden 111

In diesem Fall enthält ein Frame-Fenster ein umfangreiches Verzeichnis mit
anklickbaren Links auf einzelne Informationsseiten, die in einem anderen, festen
Frame-Fenster angezeigt werden. Das "Inhaltsverzeichnis" bleibt also jederzeit
eingeblendet, und der Anwender kann zu jedem Zeitpunkt einen neuen Link daraus
auswählen.
zum ständigen Einblenden projektglobaler Steuerverweise
Bei umfangreichen Projekten, in denen dem Anwender das Gefühl des "lost in
hyperspace" droht, ist es sinnvoll, in einem separaten Frame-Fenster immer gültige
Steuerverweise anzubieten, z.B. zur Homepage, zur nächsthöheren logischen Ebene,
zum Stichwortverzeichnis oder zur Suchdatenbank. Bei kleinen Projekten, die nur aus
einer Handvoll Seiten bestehen, wirkt diese Technik dagegen übertrieben und
vermittelt dem Anwender eine falsche Vorstellung von der Größe des Projekts.
zum gleichzeitigen Anzeigen von zu vergleichenden Informationen
Hypertext bedeutet nicht nur, dem Anwender per Mausklick weitere Information zur
Verfügung zu stellen, sondern auch, dem Anwender die Möglichkeit zu bieten, sich
selbst Information so zusammenzustellen, daß er sie optimal miteinander vergleichen
und daraus Schlüsse oder Entscheidungen ableiten kann. Zu diesem Zweck eignet sich
die Frame-Technik hervorragend, da sie es erlaubt, verschiedene, getrennt
voneinander gespeicherte Information auf Anwenderwunsch gleichzeitig anzuzeigen.
bei besonders kunstvoller Seitengestaltung
In diesem Fall muß der Anwender auf den ersten Blick erkennen können, daß die
Frame-Technik eine bestimmte künstlerische Aussage unterstützen soll. Das kann
aber auch voll in die Hose gehen.
Schaufenster-Effekte
Webdesign
Mit Hilfe von Frames ist es auch möglich, fremde WWW-Seiten innerhalb eines
Frame-Fensters im eigenen Web-Angebot darzustellen. Dies ist jedoch sehr problematisch
und in den meisten Fällen unfair. Denn auf diese Weise verkommen fremde WWW-Seiten zu
"Schaufenstern" innerhalb des eigenen Web-Projekts. Das ist eine unfeine Geste gegenüber
den Fremdanbietern, weil es das eigene Web-Projekt in den Augen des Anwenders als
"Mega-Projekt" erscheinen läßt. So kann es auch passieren, daß in einem Frame-Fenster eine
Fremdanbieter-Seite angezeigt wird, die ihrerseits Frames einsetzt. So kommt es zu einem
ärgerlichen Effekt von massenhaft Frame-Fenstern auf dem Bildschirm des Anwenders.
Wenn Sie innerhalb eines Frame-Projekts auf fremde Seiten verweisen, sollten Sie eine der
folgenden Möglichkeiten wählen:
Ursprünglichen Fensterzustand wiederherstellen
Setzen Sie den Link so, daß der Anwender Ihr definiertes Frame-Set verläßt und
wieder den Fensterzustand erhält, den er vor Aufruf Ihres Projekts hatte. Dies
erreichen Sie durch Links von der Art Linktext
Doppelverweis anbieten
Damit überlassen Sie dem Anwender die Entscheidung, wie er die fremde Seite
angezeigt bekommen will. Schreiben Sie zwei Links direkt unter- oder nebeneinander,
die das gleiche Ziel haben, etwa in der Weise:
Fremde Seite im Frame
rechts unten anzeigen
Fremde Seite voll
anzeigen
Anwender auf Möglichkeit zum Verändern der Frames hinweisen
Wenn Sie keine der beiden anderen Möglichkeiten anbieten wollen, sollten Sie
wenigstens das Verändern der Frame-Fenstergrößen durch den Anwender erlauben
Sinnvolle Einsatzmöglichkeiten für Frames 112

und den Anwender auf diese Möglichkeit explizit hinweisen.
Frames und Gestaltung
Webdesign
Mindestens ein Frame-Fenster sollte einen unveränderbaren Inhalt haben. Wenn Sie etwa mit
zwei Frame-Fenstern arbeiten, sollte das eine davon konstant eingeblendete Links und das
andere die variabel anzuzeigenden Linkziele enthalten. Wenn Sie drei Frame-Fenster
einsetzen, sollte ein Fenster eine konstante Leiste mit wichtigen, projektsteuernden
Navigationsverweisen enthalten. Vor allem bei umfangreichen Projekten ist es wichtig, dem
Anwender so eine Steuerleiste bieten, auf die er sich verlassen kann. Dadurch wird er eher
ermutigt, sich in die Tiefen des Projekts zu begeben.
Eine normale WWW-Seite mit Hintergrundbild und Grafiken, enthält schon genug Tücken,
wenn es um ästhetische Optimierung geht. Wenn Sie in einem Frame-Set zwei, drei oder vier
WWW-Seiten gleichzeitig anzeigen und so zu einer verbinden, wird die ästhetische Kontrolle
des Bildschirmgeschehens entsprechend schwieriger. Wenn Sie Frames verwenden, ist es
noch wichtiger als bei "einzelnen" WWW-Seiten, auf ein einheitliches, nachvollziehbares
Design und eine klare Farbgestaltung zu achten. Denn beim Einsatz von Frames wissen Sie
vorher nie, welche Dateien der Anwender gleichzeitig am Bildschirm anzeigt. Deshalb
müssen Sie Ihr Projekt so gestalten, daß jede denkbare Anzeigekombination am Bildschirm
gut aussieht. Farben sollten, wenn sie unterschiedlich sind, entweder miteinander harmonieren
oder kontrastieren. Bedenken Sie auch, daß es bei mehreren Dateien, deren Farbgebung und
Grafiken unterschiedliche Farbpaletten verwenden, durch Dithering zu unerwünschten
Darstellungseffekten kommen kann.
Schaufenster-Effekte 113

Üble Tricks
Wird folgender Frame angeboten, dann öffnet sich automatisch ein Fenster, das zum
Speichern einer Datei auffordert (in diesem Fall die lokale(!) Datei "notepad.exe",
normalerweise aber ein Programm auf dem Server des Anbieters. Sitmmt der unbedarfte
Benutzer zu, hat er sich eventuell ein Torpedo auf die Platte geladen.
Just Click YES
Sie können das ja mal ausprobieren.
Zum Schluss ein komplettes Frame-Beispiel.
Inline Frames
Webdesign
Ein Inlineframe (iframe) verhält sich ähnlich wie ein Frame. Auch der Inlineframe wird
verwendet, um andere Webinhalte als selbständige Dokumente in einem definierten Bereich
des Browsers anzuzeigen - häufig, um Werbung oder Inhalte anderer Anbieter in eine
Webseite einzubinden. Bei der Gestaltung von Inlineframes wird diesen entweder eine
absolute Größe (in Pixeln) oder eine relative Größe im Verhältnis des Browserfensters
zugewiesen. Auch dadurch unterscheiden sie sich von normalen Frames, die vom Benutzer in
der Regel vergrößert oder verkleinert werden können.
Von Vorteil dabei ist, dass nur auf die Maße, nicht aber auf die Frame-Inhalte Rücksicht
genommen werden muss. Das ist ein großes Plus gegenüber normalen Frames, die meist
eingesetzt werden, um die Inhalte einer einzigen Webseite logisch strukturiert darzustellen.
Ein Inlineframe ermöglicht das parallele Laden der Inhalte. So kann die umgebende Seite
bereits dargestellt werden, während der Frame-Inhalt noch geladen wird. Ein als Inlineframe
eingebundenes Dokument verhält sich ähnlich wie eine Abbildung und kann zusammen mit
dem umgebenden Text gescrollt werden. Außerdem können Inlineframes auch eigene
Scrollbalken aufweisen, wenn es die Größe des ein-gebetteten Dokuments erfordert.
Die Nachteile sind bei Inlineframes die Gleichen wie bei konventionellen Frames. Besitzt die
per Inlineframe eingebundene Seite eine eigene Navigation und nutzt der Besucher der
umgebenden Seite diese, ist es ihm nicht möglich, eine im Inlineframe angezeigte Seite direkt
in seinen Lesezeichen abzulegen, da ein Browser lediglich das umgebende, also das
übergeordnete Dokument in den Lesezeichen speichern kann.
Ein weiterer Nachteil ist, dass der Besucher nicht mehr erkennen kann, wann er das
Inhaltsangebot der einen Seite verlässt und das einer anderen betritt. Durch den Inli-neframe
kann der Betreiber einer Internetseite dem Benutzer gegenüber das Gefühl vermitteln, dass die
Inhalte aus eigener Quelle stammen. Auch werden sie auch schon eingesetzt, um
Schadprogramme in Webseiten einzuschleusen. (siehe auch oben: "Schaufenster-Effekt"):
Um einen Inlineframe einzubinden, wird das "iframe"-Element verwendet:
Alternativtex
Dies definiert einen Inlineframe in der angegebenen Größe, in dem die Datei aus der URI im
Üble Tricks 114

Webdesign
src-Attribut geladen wird. Der Name des Inlineframes kann im name-Attribut frei gewählt
werden. Über ihn kann der Inlineframe später bei Verlinkungen und in
JavaScript-Programmen gezielt angesprochen werden. Browser, die keine Inlineframes
darstellen, sollen stattdessen den Alternativtext anzeigen. Breite und Höhe des einge-betteten
Frame-Fensters sollten immer angegeben werden, so wie das Beispiel oben zeigt. Erlaubt sind
Pixelangaben oder Prozentwerte, die sich auf die Größe des Eltern-elements beziehen.
Zwischen dem einleitenden und dem schließenden werden Inhalte
gesetzt, die von Web-Browsern angezeigt werden, die den eingebetteten Frame nicht
interpretieren.
Sie können verschiedene weitere Eigenschaften definieren, um ein eingebettetes
Frame-Fenster zur Umgebung auszurichten. Das Beispiel zeigt, wie Sie ein eingebettetes
Frame-Fenster dazu verwenden können, um eine größere Grafik anzuzeigen und diese mit
eigenen Scrollbars auszustatten (man kann die Grafik durch Anklicken vergrößert darstellen.
Mit align="left" richten Sie den eingebetteten Frame links aus. Nachfolgende Inhalte fließen
dann rechts um den Frame. Mit align="right" richten Sie den eingebetteten Frame rechts aus
und die Inhalte fließen links um den Frame. Mit scrolling="yes" können Sie Scrollbars
(Bildlaufleisten) in dem eingebetteten Frame erzwingen (das Gegenteil ist scrolling="no").
Die Voreinstellung ist scrolling="auto". Mit frameborder="0" können Sie den sichtbaren
Außenrahmen des eingebetteten Frames unterdrücken. Voreinstellung ist frameborder="1".
Eigenschaften eingebetteter Frames
Bild mit Scrollbars und Rand
Ihr Browser kann leider keine eingebetteten Frames
anzeigen:
Dieses Bild zeigt zufällig angeornete Stifte verschie-dener Farben.
Es ist 232 x 213 Pixel groß, der iframe ist mit 200 x 150 Pixeln kleiner.
Dieser Text hat überhaupt keinen Zweck, sondern soll nur den freien
Platz füllen. Der iframe ist gut erkennbar.
Bild OHNE Scrollbars und Rand
Ihr Browser kann leider keine eingebetteten Frames
anzeigen:
Dieses Bild zeigt zufällig angeornete Stifte verschiedener Farben.
Es ist 232 x 213 Pixel groß, der iframe ist etwas größer. Dieser Text hat
überhaupt keinen Zeweck, sondern soll nur den freien Platz füllen. Hier
kann man den iframe nicht als solchen erkennen.
Inline Frames 115

Webdesign
CSS Style-Sheets
HTML ist eine "logische" Sprache. Mit HTML definieren Sie den grundsätzlichen Aufbau
Ihrer Webseiten, die Elemente, die Strukturen, die Verweise, die referenzierten Elemente wie
Grafiken, Multimedia usw. Aber HTML ist nicht dazu gedacht, um exakt anzugeben, wie ein
Element genau aussehen soll. So können Sie in HTML eine Überschrift definieren und dabei
angeben, dass es sich um eine Überschrift erster Ordnung handeln soll. Sie können innerhalb
von HTML aber nicht bestimmen, wie groß, in welcher Schriftart usw. die Überschrift
dargestellt werden soll. Das übernimmt der Browser bei der Anzeige.
Zur Beschreibung des exakten Layouts von Dokumenten gibt es die CSS (Cascading Style
Sheets). Dabei handelt es sich um eine Ergänzungssprache, die sich nahtlos in HTML einfügt
und die das beliebige Formatieren einzelner HTML-Elemente erlaubt. Mit Hilfe von CSS
können Sie beispielsweise festlegen, dass alle Überschriften erster Ordnung 24 Punkte groß
sind, in roter Helvetica-Schrift, mit einem Nachabstand von 16 Punkten und mit einer grünen
doppelten Rahmenlinie oberhalb dargestellt werden. Das ist aber nur der Anfang. CSS bietet
noch viel mehr Möglichkeiten. So können Sie beliebige ausgewählte Bereiche einer
HTML-Datei mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild oder mit
diversen Rahmen versehen. Sie können beliebige Elemente, sei es eine Grafik, ein Textabsatz,
eine Tabelle oder ein Bereich aus mehreren solcher Elemente, pixelgenau im Anzeigefenster
CSS Style-Sheets 116

des Browsers positionieren. Für Drucklayouts stehen Befehle zur Definition eines
Seitenlayouts bereit. Es gibt noch viele weitere Möglichkeiten, die auch in modernen Desktop
Publishing Systemen üblich sind.
Ein weiteres wichtiges Leistungsmerkmal von CSS ist es, dass Sie Definitionen zentral
angeben können. So können Sie beispielsweise im Kopf einer HTML-Datei zentrale
Definitionen zum Aussehen einer Tabellenzelle notieren. Alle Tabellenzellen der
entsprechenden HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral
definiert sind. Das spart Programm-Code und macht die HTML-Dateien kleiner. Das
funktioniert sogar über Dateigrenzen hinweg. Auf diese Weise können Sie für große Projekte
einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen CSS-Datei
können Sie dann für hunderte von HTML-Dateien ein anderes Layout bewirken.
Aber Achtung: CSS wird nicht von allen Browsern unterstützt. Einige Implementierungen von
CSS sind darüber hinaus fehlerhaft. Deshalb werden Style-Sheets bislang noch vorsichtig
eingesetzt. Aus diesem Grund konzentrieren wir uns in diesem Kapitel auf die grundlegenden
Merkmale von CSS. Eine Behandlung der einzelnen Sprachbestandteile würde den Rahmen
dieses Kurses sprengen. Es genügt, wenn Sie sich merken, welche Möglichkeiten CSS bietet
und wie CSS grundsätzlich angewandt wird.
Style-Sheets in HTML einbinden
Sie haben gesehen, dass CSS eine direkte Ergänzung zu HTML ist. Es gibt zwei
Möglichkeiten, zentrale Stilvorlagen zu definieren und in HTML einzubinden:
♦
Webdesign
Definition eines Bereichs für Style-Sheet-Angaben innerhalb einer HTML-Datei:
Mit der Anweisung .. im Kopf der HTML-Datei definieren
Sie einen Bereich für Style-Sheet-Angaben. Im einleitenden -Tag müssen
Sie den Typ der Formatdefinition angeben. Das geschieht durch die Angabe
TYPE="text/css". Damit Browser, die keine Style-Sheets kennen, die
Style-Sheet-Angaben nicht irrtümlich als anzuzeigenden Text interpretieren, sollten
Sie den Bereich der eigentlichen Style-Sheet-Angaben in einen mehrzeiligen
HTML-Kommentar einbinden.
Stilvorlagen in HTML
Die Style-Sheet-Angaben, die Sie auf diese Weise im Kopf einer HTML-Datei
definieren, sind für diese eine HTML-Datei gültig.
♦ Definition von Style-Sheets in einer separaten Datei:
Wenn Sie für alle Dokumente Ihres Web-Auftritts die gleichen Formate haben wollen,
können Sie die entsprechenden Stilvorlagen in einer eigenen Textdatei (Endung
".css") definieren und auf diese Datei in jedem Dokument einfach verweisen. Das
geht dann so:
Stilvorlagen aus Datei
Style-Sheets in HTML einbinden 117

Mit wird auf die Datei verwiesen. Mit HREF wird der Pfad der CSS-Datei
(URL) angegeben. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich
die Änderungen einheitlich auf alle Dokumente aus, in denen diese separate Datei
eingebunden ist.
Wollen Sie unterschiedliche Formatangaben für verschiedene Ausgabemedien haben - z.B.
helle Schrift auf dunklem Hintergrund am Bildschirm, aber dunkle Schrift auf weißem
Hintergrund auf dem Drucker -, so ist dies auch möglich. Dazu müssen Sie nur für die
verschiedenen Ausgabemedien verschiedene Style-Sheet-Dateien einbinden. Wichtig ist dabei
die Angabe MEDIA. Durch diese Angabe bestimmen Sie, für welches Ausgabemedium die
Datei verwendet werden soll, die Sie bei der Angabe HREF einbinden:
Stilvorlagen für Ausgabemedien
Style-Sheets definieren
Zentrale Formate
Wie werden nun die einzelnen Stilvorlagen definiert? Die -Anweisung bzw. die
Vorlagendatei umfassen die einzelnen Style-Sheet-Angaben. Damit können Sie für jede
geeignete HTML-Anweisung (Tags, die Elemente beschreiben, also z.B. nicht ) Formate
zentral definieren. Wenn Sie die entsprechende HTML-Anweisung dann im Dokument
verwenden, werden alle Formate angewendet, die Sie für das betreffende HTML-Tag definiert
haben. So können Sie beispielsweise für Überschriften erster Ordnung, definieren, dass diese
in der Schriftart Helvetica, 30 Punkte groß, rot, kursiv und mit einem an einen 3D-Knopf
erinnernenden Rahmen versehen angezeigt werden, oder dass Tabellen generell mit einem
himmelblauen Hintergrund dargestellt werden. Wenn Sie dann im Text der HTML-Datei eine
Überschrift 1. Ordnung oder eine Tabelle wie gewohnt definieren, werden die definierten
Formateigenschaften bei der Anzeige im WWW-Browser berücksichtigt. Die Definitionen für
das Beispiel lauten:
Zentrale Formatdefinitionen
Überschrift
Tabelle
&nbsp;
Spalte 1
Spalte 2
Spalte 3
Zeile 1
Webdesign
Style-Sheets definieren 118

Feld 1,1
Feld 2,1
Feld 3,1
Zeile 2
Feld 1,2
Feld 2,2
Feld 3,2
In der Browser-Anzeige sieht das dann so aus:
Wie Sie sehen, wird in der Stil-Angabe zuerst das gewünschte HTML-Tag ohne spitze
Klammern notiert, gefolgt von den dazugehörenden, gewünschten Formatdefinitionen in
geschweiften Klammern. Innerhalb der geschweiften Klammern können Sie eine oder mehrere
Formateigenschaften definieren. Jede Eigenschaftszuweisung besteht aus einem Namen, z.B.
color und einem Wert, z.B. #FF0000, getrennt durch einen Doppelpunkt. Schließen Sie
jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei der letzten Formatdefinition
vor der abschließenden geschweiften Klammer darf der Strichpunkt entfallen. Wenn Sie
gleichartige Formate für mehrere HTML-Tags definieren wollen, geben Sie alle gewünschten
Tags an und trennen Sie diese durch Kommata, also z.B.
H1, H2 { font-family: Helvetica }
bedeutet das gleiche wie
H1 { font-family:Helvetica }
H2 { font-family:Helvetica }.
Format-Klassen
Ein und dieselbe HTML-Anweisung kann in ganz verschiedenen logischen Situationen
vorkommen. Eine Überschrift erster Ordnung kann einmal eine Überschrift zu Tabellen sein,
ein anderes Mal eine Überschrift zu einem Textabsatz. Je nach Anwendungsfall möchten sie
die Überschrift anders darstellen. Dazu können Sie in den Formatdefinitionen so genannte
Klassen bilden. Dazu müssen Sie jeder Klasse einen Namen geben. Sollen Überschriften
erster Ordnung für eine Tabelle in roter Schrift und Überschriften erster Ordnung für Absätze
in blauer Schrift erscheinen, so kann die Definition folgendermaßen aussehen:
Webdesign
Style-Sheets definieren 119

H1.tabelle { color:#FF0000 }
H1.absatz { color:#00FFFF }
In der Anwendung im Dokument müssen Sie der Überschrift jeweils die gewünschte Klasse
als Parameter mitteilen. Das geht dann so:
Überschrift Tabelle
Überschrift Absatz
"Überschrift Tabelle" wird rot angezeigt, "Überschrift Absatz" dagegen blau.
Verschachtelte Formatangaben
Im Namen von CSS kommt "Kaskade" vor. Über eine Kaskade läuft normalerweise Wasser
von einer oberen Stufe über verschiedene Zwischenstufen nach unten. Das bedeutet hier, dass
Sie Stilvorgaben verschachteln können. Wenn Sie nichts anderes angeben, übernimmt ein
HTML-Tag innerhalb eines anderen HTML-Tags dessen Eigenschaften und fügt seine
eigenen Eigenschaften nur hinzu. Wenn Sie beispielsweise für Überschriften erster Ordnung
die Schriftart Times und die Farbe rot definieren, erscheint Text, der innerhalb einer solchen
Überschrift mit .. formatiert wird, ebenfalls rot und in Times, aber zusätzlich
kursiv.
Sie können mit Hilfe von Style-Sheets aber auch bestimmen, dass ein HTML-Tag bestimmte
Eigenschaften nur dann hat, wenn er innerhalb eines bestimmten anderen HTML-Tags
vorkommt. So können Sie etwa bestimmen, dass .. innerhalb der gerade
definierten roten Überschriften erster Ordnung nicht kursiv, stattdessen aber normal und in
blauer Farbe dargestellt wird, während der gleiche Befehl innerhalb anderer HTML-Tags nach
wie vor nichts anderes als eine kursive Darstellung bewirkt. Die Definition hierzu lautet:
H1 { color:#FF0000 }
H1 I { color:#00FFFF; font-weight:normal }
Unabhängige Formate
Webdesign
Sie können Formate unter einem zu wählenden Namen vordefinieren, und sie anschließend
auf beliebige geeignete HTML-Anweisungen anwenden. So können Sie z.B. ein unabhängiges
Format mit der Eigenschaft fett/kursiv definieren. Dieses unabhängige Format können Sie
dann innerhalb von HTML-Tags anwenden. Die Definition lautet:
#fettkursiv { font-weight:bold; font-style:italic }
In der Anwendung im Dokument bewirkt dann
Extra-Überschrift
Normale Überschrift
dass die erste Überschrift fett und kursiv und die zweite Überschrift wie im Browser üblich
dargestellt werden.
Style-Sheets definieren 120

Formatangaben innerhalb des Dokuments
Neben den zentralen Formatdefinitionen, die für die ausgewählten HTML-Tags im gesamten
Dokument gelten, besteht in CSS auch die Möglichkeit, innerhalb des Dokuments für einzelne
HTML-Anweisungen oder sogar für einzelne Wörter oder Textbereiche Stil-Angaben zu
machen. Sie können Formatangaben für ein HTML-Tag bestimmen, indem Sie innerhalb des
Start-Tags den Parameter STYLE= und dahinter, in Anführungszeichen, die gewünschten
Formatdefinitionen schreiben. Diese unmittelbaren Formatierungsangaben gelten dann genau
für den Bereich zwischen Start- und Ende-Tag dieser HTML-Anweisung. Mit
Ein Textabsatz
legen Sie z.B. fest, dass genau dieser Textabsatz in Arial-Schrift in roter Farbe angezeigt wird.
Darüber hinaus können Sie Style-Sheet-Formatierungen an beliebigen Stellen innerhalb des
normalen Textes unabhängig vom HTML-Tag definieren. Dazu gibt es das neue Tag
... Diese Anweisung legt den zu formatierenden Bereich fest. Mit dem
Parameter STYLE= können Sie dann wie oben beschrieben die Stil-Angaben für diesen
Bereich festlegen.
In der Überschrift ist ein
blaues Wort
bewirkt z.B., dass in der Überschrift "blaues" in blauer Farbe angezeigt wird.
Style-Sheet-Angaben
Webdesign
Zum Schluss erhalten Sie eine Übersicht über die wichtigsten Style-Sheet-Angaben, die Sie in
den im letzten Abschnitt beschriebenen Formatdefinitionen verwenden können.
Stil-Angabe: Bedeutung: Werte:
background-color Hintergrundfarbe Farbangabe
background-image Hintergrundbild URL
border-color Rahmenfarbe Farbangabe
border-width Rahmenbreite thin, medium, thick, num.
Angabe
color (Text-)Farbe Farbangabe
font-familiy Schriftart Arial, Helvetica, usw.
font-size Schriftgröße large, medium, small, ...,
14pt
font-style Schriftneigung normal, italic, oblique
font-weight Schriftdicke bold, bolder, lighter,
100...900
margin Abstand/Rand ringsum numerische Angabe
margin-left Abstand/Rand links numerische Angabe
Style-Sheets definieren 121

margin-right Abstand/Rand rechts numerische Angabe
margin-top Abstand/Rand oben numerische Angabe
margin-bottom Abstand/Rand unten numerische Angabe
position Positionierungsart absolute, fixed, relative,
static
top Position von oben numerische Angabe
left Position von links numerische Angabe
right Position von rechts numerische Angabe
bottom Position von unten numerische Angabe
text-align Ausrichtung left, center, right
text-decoration unterstreichen,
durchstreichen, etc.
none, underline, overline,
line-through, blink
text-ident Einzug erste Zeile numerische Angabe
text-transform Groß-/Kleinbuchstaben
erzwingen
none, capitalize,
lowercase, uppercase
Farbangaben sind wie in HTML RGB-Hexadezimalwerte. Numerische Angaben können
absolute Werte sein - in (inches), cm (centimeters), mm (millimeters), pc (picas), pt (points)
- oder auch relative Werte - px (pixel), em (bezogen auf Schrifthöhe), ex (bezogen auf Höhe
des Buchstabens X), % (prozentual gegenüber Elementnorm) -.
5.10 Automatischer Seitenwechsel oder Dia-Shows
Mit Hilfe eines Tricks im Kopf einer HMTL-Datei können Sie mehrere HTML-Dokumente
automatisch nacheinander anzeigen lassen (Dia-Show-Effekt). Dieser Trick ist vor allem in
Verbindung mit Frames praktisch. So können Sie z. B. in einem Frame Information anbieten,
während in einem anderen Frame automatisch Bilder in abwechselnder Folge angezeigt
werden. Mit dem HTML-Tag
Eingebettet zwischen und sorgt diese Zeile dafür, daß 10 Sekunden nach
dem Laden dieser Seite die neue Seite "neuedatei.html" geladen wird. Statt eines Dateinamens
kann natürlich auch eine komplette URL angegeben werden. Auf diese Weise kann man
Besucher auch weiterleiten, wenn eine Website umzieht oder wechselnde Werbebanner auf
der Seite in einem Frame einblenden.
Bei der "Diashow" brauchen Sie für jedes "Dia" eine eigene HTML-Datei. Mit Hilfe der
META-Anweisung im Dateikopf wird nach einer bestimmten Zeit automatisch die nächste
Datei aufgerufen. Das folgende Beispiel arbeitet mit vier Dateien.
Beispiel 1. Datei (dat1.html)
Webdesign
1. Datei der Dia-Show
Überschriften, Text, Links, Grafikreferenzen usw.
Style-Sheet-Angaben 122

Beispiel 2. Datei (dat2.html)
2. Datei der Dia-Show
Überschriften, Text, Links, Grafikreferenzen usw.
Beispiel 3. Datei (dat3.html)
3. Datei der Dia-Show
Überschriften, Text, Links, Grafikreferenzen usw.
Beispiel 4. Datei (dat4.html)
Webdesign
4. Datei der Dia-Show
Überschriften, Text, Links, Grafikreferenzen usw.
Schreiben Sie den gesamten Befehl inclusive der etwas ungewohnten Stellung der
Anführungszeichen so wie in den Beispielen oben angegeben. Setzen Sie jeweils Ihre
gewünschte Anzeigedauer und den Namen der nächsten aufzurufenden Datei ein.
Im obigen Beispiel enthält die letzte der vier Dateien wieder einen Aufruf der ersten Datei. So
erzeugen Sie eine "Endlosschleife", d.h. die Dia- Show läuft solange ab, bis der Anwender mit
Hilfe der Navigationsmittel seines Browsers (oder bei Frames: in einem anderen
Anzeigefenster einen Link anklickt und dadurch) eine andere Datei aufruft.
5.11 XML - Extensible Markup Language
Zum Schluss stelle ich Ihnen eine weitere Sprache des WWW vor, die für die elektronische
Geschäftsabwicklung und die Zusammenarbeit von Unternehmen und anderen Organisationen
im Internet eine herausragende Rolle spielt: XML (EXtensible Markup Language =
erweiterbare Auszeichnungssprache). Ich gehe an dieser Stelle nur kurz auf die wesentlichen
5.10 Automatischer Seitenwechsel oder Dia-Shows 123

Webdesign
Eigenschaften und Einsatzmöglichkeiten von XML ein. Ein "Sprachkurs" zu XML würde
dieses Skript sprengen. Es genügt, wenn Sie wissen was XML ist und welche Möglichkeiten
diese Sprache für das Internet und das WWW bereithält. Im Kurs Web-Business werden wir
darauf dann zurückkommen.
XML ist wie HTML abgeleitet von SGML. Doch XML ist keine "SGML-Anwendung", so
wie HTML, sondern ein "SGML-Profil". Das ist eine Stufe abstrakter; man spricht dabei auch
von "generalized markup", also von "verallgemeinerter Auszeichnung". Mit Hilfe von XML
können Sie eigene, neue Sprachen, z.B. eigene Auszeichnungssprachen oder auch eigene
Erweiterungen von HTML mit eigenen Tags für bestimmte Elemente mit bestimmten
logischen Bedeutungen definieren. Davon wird auch reger Gebrauch gemacht, inbesondere
durch das W3C. In gewissem Sinne stellt XML eine für die Belange des WWW spezialisierte
und vereinfachte Form von SGML dar. Als man analysierte, warum die Ideen von SGML im
WWW bisher keine Durchbruch erlebt haben, da war schnell klar, dass das vor allem an der
hohen Komlexität von SGML liegt. Da SGML eine so komplexe Sprache ist, bedeutet es
einen sehr großen Aufwand, wenn Programme geschrieben werden sollen, die
SGML-Dokumente verarbeiten. Beim W3C wurde daher eine Arbeitsgruppe eingerichtet, die
sich als Aufgabe vornahm, eine vereinfachte Variante von SGML zu schaffen. Das Ergebnis
ist XML.
XML ist also eine Metasprache für das Definieren von Auszeichnungssprachen, d.h., Sie
können mit XML Befehle (Tags) und deren grundsätzliche Eigenschaften definieren. Dies
geschieht über Dokumenttyp-Definitionen (DTDs), ähnlich wie in SGML. Im Vergleich zu
HTML, das einen festen Satz an vordefinierten Tags mit bestimmten Bedeutungen bereithält,
bietet XML überhaupt keine vordefinierten Tags. Diese werden erst vom Autor für sein
Dokument bestimmt. In den DTDs werden lediglich die Regeln verfasst, nach denen ein
Dokument vom Empfänger interpretiert werden soll. Damit ist XML wesentlich flexibler, aber
auch abstrakter als HTML. Tatsächlich kann man durch eine entsprechende DTD HTML
annähernd in XML nachbilden. Viel wichtiger ist jedoch, dass mit Hilfe von XML
Unternehmen und Wirtschaftsbereiche in der Lage sind, eine Sprache mit für sie spezifischen
und von ihnen verwendeten Begriffen zu definieren.
Die mit XML definierten Auszeichnungssprachen werden auch als XML-Anwendungen
bezeichnet. Die Syntax, Struktur und Bedeutung der Tags wird für jede XML-Anwendung mit
einem Schema oder sinnvoller über DTDs für mehrere Dokumente definiert. Die Verarbeitung
kann mit XML-Parsern erfolgen. Wie die Elemente sichtbar dargestellt werden sollen, kann
mit Hilfe einer eränzenden Style-Sheet-Sprache, XLS (EXtensible Style Language) definiert
werden. Sie ist das XML-Gegenstück zu CSS. XML-Dokumente können auch Hyperlinks
enthalten, entweder wie in der Sprache HTML oder in anderen Formen (XLink, XPointer).
Damit bietet sich für XML ein breites Anwendungsfeld. Zum einem für die Darstellung in
Browsern (Definition von Ergänzungen bzw. Erweiterungen in HTML) und zum anderen für
die weitere Verarbeitung der Informationen mit beliebigen Computerprogrammen. So wie
HTML normiert ist und daher für den weltweiten Austausch von Webseiten zwischen vielen
verschiedenen Webservern und Browsern verwendet wird, so kann man mit XML eigene
Datei-Strukturen für verschiedene Zwecke definieren und normieren, die dann von
verschiedenen Programmen und auf verschiedenen Rechner-Plattformen verwendet werden
können. Wer mit HTML Dokumente einrichtet, der kümmert sich in erster Linie darum, wie
das Dokument auf den Bildschirmen der Nutzer dargestellt wird. XML ist demgegenüber in
hohem Maße darauf ausgerichtet, Informationen über Daten zu liefern, so dass die Daten
weiterverarbeitet werden können. Mit XML rücken also Aspekte in den Vordergrund, die
beim Web-Design mit HTML keine Rolle spielen. Folgende Möglichkeiten zeichnen XML
aus:
5.11 XML - Extensible Markup Language 124

♦ Mit XML kann man die logische Beziehung von Daten, Informationen und Texten
definieren.
♦ XML ermöglicht im Gegensatz zu HTML die Definition eigener oder zusätzlicher
Tags.
♦ XML-Anwendungen eignen sich als plattform- und softwareunabhängiges
Austausch-Format für Daten zwischen verschiedenen Programmen und Rechnern.
♦ XML bietet ein universelles Datenaustauschformat und kann damit proprietäre
Formate ersetzen. Damit ist es zum Einsatz im Internet ideal geeignet.
♦ Mit der Hilfe von Style-Sheets können XML-Dokumente auch von Browsern
dargestellt werden.
♦ Man kann zukünftige Versionen von HTML mit XML definieren.
Die Syntax von XML ist so streng festgelegt, daß XML-Anwendungen wesentlich einfacher
und effizienter von Programmen verarbeitet werden können als HTML-Dateien.
HTML-Befehle beschreiben eigentlich nur, in welcher Art und Weise die Textteile strukturiert
werden sollen (Überschrift, Absatz, Liste, Tabelle, Normalschrift, Fettschrift usw.). Der
HTML-Code
Dr. Konrad Müller-Lüdenscheid
B&S AG
Lüdenscheid
bewirkt eine Darstellung wie
Dr. Konrad Müller-Lüdenscheid
B &S AG
Lüdenscheid
Webdesign
Nur dem menschlichen Betrachter ist klar, was Vor- und was Nachname, was die Firma und
was der Ort ist. Mit XML kann man Tags definieren, die die Bedeutung der Informationen
angeben. Mit einer geeigneten DTD lässt sich die obige Information in einem
XML-Dokument folgendermaßen definieren:
Konrad
Dr.
Müller-Lüdenscheid
B & S AG
Lüdenscheid
Mit einem geeigneten Style-Sheet kann man aus der XML-Darstellung dann wieder zur
obigen HTML-Darstellung gelangen. Mit einem anderen Style-Sheet kann dasselbe
XML-Dokument aber auch als Visitenkarte oder Briefkopf dargestellt werden - eine Freiheit,
die HTML nicht bietet. XML-Dokumente eignen sich also nicht nur für die Darstellung in
Browsern und das Ausdrucken auf Papier, sondern auch für die weitere Verarbeitung in
Programmen, in denen die logische Bedeutung der Informationen eine Rolle spielt.
Dazu ein Beispiel: Eine Suche nach dem Wort "Lüdenscheid" in einer HTML-Datei würde
nicht nur die Person "Müller-Lüdenscheid" liefern, sondern auch alle Personen, die in
Lüdenscheid wohnen. Eine Suche nach dem gleichen Wort innerhalb der in den XML-Dateien
mit bezeichneten Elemente würde hingegen wirklich nur die betreffenden
Personen liefern. Außerdem kann man die in den XML-Dateien beschriebenen Personen leicht
nach den einzelnen Datenfeldern sortieren, beispielsweise nach Ort oder Firma, oder andere
Verarbeitungen der Daten vornehmen.
5.11 XML - Extensible Markup Language 125

Webdesign
Bei XML kommt also zur Text-Strukturierung noch die Inhalts-Strukturierung hinzu.
Die XML-Syntax ähnelt der SGML- bzw. HTML-Syntax. Die meisten Befehle (Tags) treten
paarweise als Start- und Ende-Tags auf und geben an, welche Bedeutung der dazwischen
liegende (eventuell durch weitere Tags unterteilte) Text hat. In HTML darf der Ende-Tag in
vielen Fällen weggelassen werden. Bei XML-Anwendungen müssen dagegen die Ende-Tags
immer angegeben werden, weil der Anwender bei XML-Applikationen die Möglichkeit haben
soll, nachträglich zusätzliche Tags in der DTD oder im Schema zu definieren. Daher können
die Verarbeitungsprogramme nicht so wie der HTML-Browser immer nach denselben Regeln
die fehlenden Ende-Tags selbst korrigieren. Außerdem sind die verarbeitenden Programme
viel einfacher zu schreiben und können viel effizienter ablaufen, wenn sie sich darauf
verlassen können, dass das XML-File syntaktisch richtig ist, und keine automatische
Fehlerkorrektur programmiert werden muss. XML-Tags, zu denen es keinen Ende-Tag gibt,
müssen zur Unterscheidung davon in der Form oder geschrieben werden. In XML müsssen Start- und Ende-Tags auch immer richtig
geschachtelt werden. Das gilt an sich auch für HTML, aber die HTML-Browser sind recht
fehlertolerant und stellen auch Unsinn noch brauchbar dar. XML-Befehle definieren eben
nicht nur das Layout des Textes, sondern auch die Bedeutung der Textteile. Falsche
Interpretation der Befehle führt daher zu logisch und inhaltlich falschen Ergebnissen. Im
Gegensatz zu HTML wird bei XML-Tags die Groß- und Kleinschreibung genau
unterschieden. Es ist also nicht mehr egal, wie die Tags geschrieben werden. Auch die Regeln
dafür, wann die Werte von Attributen (also Parametern innerhalb der Befehle) zwischen
Quotes-Zeichen eingeschlossen werden müssen, sind bei XML strenger. Alle Attribut-Werte
müssen immer in Anführungszeichen eingeschlossen werden. Dabei dürfen entweder das
doppelte ("...") oder das einfache ('...') Anführungszeichen verwendet werden. So lassen sich
auch Attribute wie name="William 'Billyboy' Gates" bilden.
Wie in SGML (und daher auch in HTML) kann man auch in XML Entities definieren, bei
denen einem Namen ein bestimmter Text zugeordnet wird. Diese Entities kann man dann
überall im Text und auch in Parametern von Befehlen in der Form &name; verwenden.
Typische Beispiele sind:
♦ &lt; für das Kleiner-Zeichen <
♦ &gt; für das Größer-Zeichen >
♦ &amp; für das Und-Zeichen &
Entities können aber nicht nur einzelne Zeichen sondern auch längere Textteile enthalten,
ähnlich wie die Abkürzungs-Makros in der Textverarbeitung.
Kommen wir noch einmal zu den XML-Anwendungen zurück. Sie erinnern sich: Unter einer
XML-Anwendung versteht man die Festlegung (Normierung) von XML-Befehlen für eine
Klasse von XML-Dokumenten gleicher Struktur, also für einen bestimmten Zweck. Das
Format und die Struktur der XML-Dateien sowie die Eigenschaften und die darin
vorkommenden Elemente (XML-Befehle, Tags, Entities) werden für eine XML-Anwendung
mit einer DTD (Document Type Definition) oder einem Schema definiert.
XML-Anwendungen befanden sich Anfang 2001 oft noch in der Entwicklungsphase. Durch
eine starke Verzahnung der Anwendungen (Sprachen) zu ihrer "Mutter" XML ist jedoch
gewährleistet, dass zukünftige Versionen trotzdem gewisse Rahmenrichtlinien einhalten. So
ist es denkbar, dass ein Browser eine neue Sprache einfach beherrschen kann, indem einmalig
eine spezielle Definitionsdatei (eine DTD) importiert wird. Einige (wenige) Beispiele für
XML-Anwendungen (neue Sprachen) sind:
♦ XSL (Xtensible Style Language) zur Festlegung des Layouts einer Darstellung,
♦ DocBook für gedruckte Texte und Bücher,
♦ WML (Wireless Application Protocol (WAP) Markup Language):
5.11 XML - Extensible Markup Language 126

Online-Informationen für Mobiltelefone,
♦ XHTML (EXtensible Hypertext Markup Language): Erweiterung bzw.
Nachfolgeversion von HTML,
♦ MathML (Mathematic Markup Language) zur Darstellung mathematischer Formeln,
♦ >CML (Chemical Markup Language) zur Darstellung chemischer Formeln,
♦ SMIL (Synchronized Multimedia Integration Language) zur Synchronisation
verschiedener multimedialer Komponenten einer Webseite (z.B. simultanes Starten
eines Videos und einer Tondatei).
Will man in eigenen Programmen XML verwenden, so kann man auf fertige, für viele
Sprachen frei verfügbare Parser zurückgreifen. Für die Programmierschnittstellen dieser
Parser existieren zwei genormte Schnittstellen: DOM (Document Object Model) und SAX
(Simple API for XML).
Künftige Browser werden XML-Dateien direkt auf dem Bildschirm darstellen und über den
Drucker ausgeben können, wenn mit einem Style-Sheet definiert ist, wie die einzelnen
XML-Elemente dargestellt werden sollen. Erste Ansätze dafür gibt es im MS Internet
Explorer Version 5 (mit einer Vor-Version von XSL-Style-Sheets oder mit CSS) sowie in
Netscape Navigator ab Version 5 (mit CSS). Zu diesem Zweck werden auf dem Webserver
die XML-Datei mit der Information und die XSL- oder CSS-Datei mit den Layout-Angaben
abgespeichert.
Welche Anwendungsbereiche lassen sich mit XML erschließen? Für ein normales
Homepage-Design ist XML relativ uninteressant. HTML und CSS sind dafür längst zu
leistungsfähig und angesicht ihrer Verbreitung kaum noch zu verdrängen. Aber im
profesionellen Bereich gibt es genügend Fälle, in denen XML eine bessere Wahl darstellt als
HTML. Dazu gehören große Dokumentationsprojekte, große Werkeditionen oder
Lexikonprojekte. Wenn Sie häufig Formeln, Hierarchien, mathematische und
wissenschaftliche Anmerkungen darstellen müssen, dann macht Ihnen das DTD-Sytem von
XML dies möglich. Auch im Bereich der Datenbanken ist XML eine interessante Alternative
zu herkömmlichen Formaten. XML kommt insbesondere überall da zum Einsatz, wo es
Bedarf für einen strukturierten und genau definierten Austausch von Informationen gibt. Mit
XML erhalten Firmen, Organisationen und ganze Branchen die Möglichkeit, eigene, an die
eigenen Bedürfnisse angepasste Auszeichnungsprachen und Datenaustauschformate zu
schaffen, so dass ohne große Probleme die Daten an unterschiedlichen Stellen, mit
unterschiedlichen Softwaresytemen weiterverarbeitet werden können. XML stellt damit eine
wesentliche Basis für den Geschäftsverkehr und die firmenübergreifende Zusammenarbeit im
Internet (E-Commerce, E-Business) bereit.
Zum vorhergehenden
Abschnitt Zum Inhaltsverzeichnis
Copyright © FH München, FB 04, Prof. Jürgen Plate
Letzte Aktualisierung: 21. Feb 2011
Webdesign
Zum nächsten
Abschnitt
Webdesign
von Prof. Jürgen Plate
5.11 XML - Extensible Markup Language 127

Interaktion, Sicherheit, Design-Regeln
Interaktion mit dem Benutzer
Hier finden Sie nur kurze Hinweise auf diese Möglichkeiten. Genauere Informationen müssen Sie der
Dokumentation des jeweiligen WWW-Servers und der Fachliteratur entnehmen. Es gibt mehrere
Möglichkeiten der Interaktion.
Image-Maps (ISMAP, und USEMAP)
Image-Maps erlauben die Verzweigung zu bestimmten Informationen durch die Auswahl
("Anklicken") von bestimmten Regionen innerhalb eines Inline-Bildes. Dafür gibt es zwei
verschiedene Verfahren:
• In HTML 2 sind nur Server-seitige Image-Maps (ISMAP) vorgesehen, die mit einem
CGI-Programm am Server verarbeitet werden. Dies ist die ältere und kompliziertere Methode.
• Seit HTML 3.2 sind auch Client-seitige Image-Maps ( und USEMAP) vorgesehen, die
direkt in der HTML-Datei spezifiziert und vom Web-Browser verarbeitet werden. Dies ist die
neuere Methode, sie ist einfacher zu realisieren und wird von allen neueren Web-Browsern
unterstützt.
• In HTML 4 wird empfohlen, in Zukunft nur mehr Client-seitige und keine Server-seitigen
Image-Maps in HTML-Dateien einzubauen.
Server-seitige Image-Maps
Bei Server-seitigen Image-Maps muß die Verarbeitung durch ein auf dem WWW-Server laufendes
CGI-Programm erfolgen. Im HTML-File ist eine Kombination aus einem -Befehl für das
CGI-Programm und einem -Tag für das Bild mit der Angabe "ISMAP" anzugeben. Zum
Beispiel:
Client-seitige Image-Maps
Bei Client-seitigen Image-Maps erfolgt die Verarbeitung durch den Browser auf Grund von
entsprechenden Angaben in der HTML-Datei, und es ist kein CGI-Programm notwendig. Diese
Möglichkeit ist seit HTML 3.2 vorgesehen und wird von allen neueren Web-Browsern unterstützt.
Welche Teile des Bildes den Sprung zu welchem Hyperlink bewirken sollen, wird mit Hilfe von
festgelegt - entweder in derselben HTML-Datei wie die Verwendung des Bildes oder in einer
separaten Datei die gemeinsam mit dem Bild abgespeichert ist.
Im - oder -Tag des Bildes wird dann mit "USEMAP" auf diese Map-Spezifikation
verwiesen.
Da nicht alle Benutzer die Darstellung von Bildern eingeschaltet haben und da manche Web-Browser
und viele Suchmaschinen solche Image-Maps nicht richtig verarbeiten, muß man bei einer Image-Map
zusätzlich ein "normales" Link angeben, das zu einer Liste von Hypertext-Links in Textform führt.
Damit wird sichergestellt, daß alle Benutzer und Suchhilfen die betreffenden Informationen erreichen
können.
Quelltext des Beispiels:
Interaktion, Sicherheit, Design-Regeln 128

Klicken Sie auf eines der drei Felder
Die Eingabe für Browser ohne Image-Map-Fähigkeiten hat folgenden Aufbau:
Ihr Browser ...
Sie ... k&ouml;nnen ... nun ... ausw&auml;hlen:
Infos oben
Infos mitte
Infos unten
Hier das Ganze zum Ausprobieren:
Klicken Sie auf eines der drei Felder
Webdesign
Je nachdem, wohin Sie in dieses Bild klicken, gelangen Sie zu einer der folgenden vier Stellen (die
entsprechende Zeile sitzt an der Oberkante der Seite):
• Sie haben das obere schwarze Feld ausgewählt.
• Sie haben das mittlere rote Feld ausgewählt.
• Sie haben das untere goldene Feld ausgewählt.
• Ihr Browser unterstützt Client-seitige Image-Maps nicht. Sie sind deshalb hier bei der
Alternative "ohne Map" gelandet und können die drei Möglichkeiten nun mit normalen Links
auswählen:
♦ Informationen zum oberen Bereich
♦ Informationen zum mittleren Bereich
♦ Informationen zum unteren Bereich
Manche Web-Browser stellen nicht als Bild, sondern als Pull-down-Menü mit den in den
ALT-Parametern angegebenen Texten dar. Die Angabe dieser Texte mit ALT= in ist deshalb
zwingend vorgeschrieben.
Das folgende Beispiel zeigt eine Imagemap von Deutschland. Die einzelnen Bundesländer sind als
Polygon definiert. Klickt man auf ein Land, wird das dazu passende Link aufgerufen. Hier führen die
Links jedoch nirgendwohin.
Image-Maps (ISMAP, und USEMAP) 129

Im Quelltext sieht das so aus:
Webdesign

Formulare und CGI-Programme am Server (Common Gateway
Interface)
Ein CGI-Programm ist ein Computer-Programm, das auf dem WWW-Server läuft und die Ausgabe an
den Client sendet. Die Ausgabe besteht in der Regel aus einem HTML-Dokument. Im Gegensatz zu
HTML-Dateien, die einen festen Inhalt besitzen, kann man damit Informationen dynamisch
generieren. So lassen sich Infos übermitteln, die sich laufend ändern oder die von Benutzer-Eingaben
abhängen.
Der Aufruf des CGI-Programms erfolgt in einem Hypertext-Link oder einem Formular mit einem
URL der Form:
http://host.domain/cgi-directory/filename
oder
http://host.domain/cgi-directory/filename?parameterliste
Beispiel: Ein einfaches UNIX-Shell-Script, das Datum und Uhrzeit anzeigt.
#!/bin/sh
echo "Content-Type: text/html"
echo ""
echo "Datum"
echo "Heute ist "
date
echo ""
CGI-Prozeduren können in verschiedenen Sprachen geschrieben werden (Shell-Scripts, Perl-Scripts,
C-Programme u.a.). Die Detail-Informationen dazu finden Sie in der Dokumentation des jeweiligen
WWW-Servers. Wichtig sind die beiden ersten Zeilen, die Zeile Content-Type: text/html
und die darauffolgende Leerzeile, welche die Antwort des CGI-Programms von einer normalen
HTML-Datei unterscheiden.
Zugriffe zählen
Eigentümer einer Website möchten oft wissen, wie oft Ihre Informationen von Interessenten in aller
Welt gelesen werden. Die schlechteste Möglichkeit ist ein Counter auf der Homepage selbst, denn der
verhindert, daß die Seiten in einem Cache gespeichert werden und so dem Surfer schnell angezeigt
werden können. Besser ist da die Veröffentlichung einer Server-Statistik.
Die meisten WWW-Server führen eine Log-Datei, in der alle Zugriffe auf die WWW-Seiten
protokolliert werden, und Sie können mit einem einfachen UNIX-Shell-Script zählen, wie oft Ihr
Filename darin vorkommt. Zum Beispiel:
#!/bin/sh
url="$1"
logfile=/home/infosys/log/access_log
n=`grep -i "$url" $logfile | wc -l`
echo "$n Zugriffe auf $url"
Webdesign
Formulare und CGI-Programme am Server (Common Gateway Interface) 131

Außerdem finden Sie im Log-File auch die Information, von welchen Clients auf Ihre Datei
zugegriffen wurde (aber im allgemeinen nicht, von welchen Personen). Damit zählen Sie aber nur, wie
oft die Datei angefordert, und nicht, wie oft die Information tatsächlich gelesen wurde. Schuld daran
sind die Cache-Speicher, die zur Entlastung der Netzverbindungen notwendig sind, denn die meisten
Browser haben einen lokalen Cache-Speicher und viele Institutionen verwenden Cache-Server
('Proxy-Cache'), die dann für alle Zugriffe aus diesem Bereich wirken.
Wie oft eine Datei tatsächlich gelesen wurde, ist im allgemeinen also wesentlich mehr als die am
WWW-Server gezählte Zahl der Datei-Übertragungen.
Formulare
Der Inhalt von HTML-Dateien wird jeweils vom WWW-Server zum Benutzer am Client gesendet.
Mit Hilfe von Formularen, die in HTML-Dateien stehen, können die Benutzer bestimmte
Informationen am Client eingeben und an den WWW-Server senden. Diese Daten werden meistens
von einem auf diesem Server laufenden CGI-Programm verarbeitet. Zum Beispiel:
Anmeldung zur Weihnachtsfeier des Fachbereichs am 18. Dezember
Ich komme.
Ich komme nicht.
Name:
Telefonnummer:
bewirkt eine Darstellung wie
Anmeldung zur Weihnachtsfeier des Fachbereichs am 18. Dezember
Ich komme.
Ich komme nicht.
Name:
Telefonnummer:
Webdesign
Anmerkung: Das in diesem Beispiel verwendete CGI-Programm gibt es nicht (schon, weil es den
Rechner nicht gibt).
Eine 'echte' Anmeldungs-Prozedur würde die Zu- und Absagen mit Name und Telefonnummer in
einer Datenbank speichern und dann die Bestätigung an den Client senden.
Das Senden einer solchen Antwort ist immer notwendig, denn der Benutzer muß auf seinem
Bildschirm erkennen können, daß das Anklicken des Submit-Knopfes funktioniert hat. Im einfachsten
Fall genügt eine kurze Meldung, daß die Eingabe verarbeitet wird, und ein Hinweis, daß der Benutzer
mit der Back-Taste oder dem Back-Befehl seines Browsers zur vorherigen Information zurückkehren
und weiterarbeiten kann.
Für genauere Informationen über die vom Server unterstützten Übertragungs-Methoden und die
Übergabe der Eingabedaten an das CGI-Programm ist ein Studium der entsprechenden Fachliteratur
nötig.
Als Methode können GET oder POST verwendet werden.
Zugriffe zählen 132

Webdesign
• GET hängt die Eingabedaten an die URL an (Längenbeschränkung, nur praktikabel bei
wenigen Eingaben),
• POST erzeugt einen eigenen Datenstrom.
Die CGI-Programme müssen so geschrieben werden, daß Ihre Ausführung kein Sicherheitsrisiko für
den Server-Computer darstellen kann, egal was für eventuell seltsame Eingaben von den Benutzern
kommen. Inzwischen gibt es auch diverse fertige CGI-Programme zum Einsatz auf dem Server.
Nun etwas mehr Info zum Aufbau von Formularen. Zur Erinnerung: Formulare werden durch die Tags
... begrenzt, wobei über die Attribute METHOD und ACTION die Art der
Verarbeitung und das Bearbeitungsprogramm auf dem Server spezifiziert werden:
Innerhalb eines Formulars gibt es neben drei Eingabe-Tags, INPUT, SELECT und TEXTAREA.
Das INPUT-Widget
Dies ist das häufigste Widget und es hat zahlreiche Attribute:
TYPE="...."
Typ des Widgets. Als Typangaben sind möglich: CHECKBOX, HIDDEN, PASSWORD,
RADIO, RESET, SUBMIT, TEXT, IMAGE.
NAME="...."
Name des Eingabefeldes. Dieser Name wird im Datenstrom zurückgegeben.
VALUE="...."
Defaultwert (TEXT, HIDDEN), Wert des Menüpunkts (CHECKBOX, RADIO), Beschriftung
des Feldes (RESET, SUBMIT).
SRC="...."
Quelldatei für einen IMAGE-Button.
CHECKED
Defaulteinstellung bei CHECKBOX und RADIO.
SIZE="...."
Feldgröße (Anzahl Zeichen) beim TEXT-Widget.
MAXLENGTH="...."
Maximallänge der Eingabe beim TEXT-Widget.
ALIGN="...."
Position des Textes neben einem Bild beim IMAGE-Tag.
Die folgenden Beispiele sollen die Anwendung des INPUT-Tags etwas erläutern. Das Passwort-Feld
unterscheidet sich vom Textfeld nur dadurch, daß die Eingabezeichen als '*' geechot werden.
Grundsätzlich hat jedes Feld einen Namen, der es dem Programm oder Script auf dem Server erlaubt,
das Eingabefeld zu identifizieren. Bei RADIO-Buttons kann ein Wert aus dem Angebot ausgewählt
werden, bei einer CHECKBOX deren mehrere.
• Beispiel 1: Eingabezeile von 40 Zeichen Länge:
• Beispiel 2: Verstecktes Eingabefeld, das z. B. zur Identifikation des Formulars dienen kann:
• Beispiel 3: Drei Radio-Buttons, Knopf 1 ist gedrückt:
Knopf 1
Knopf 2 Knopf 3
Formulare 133

•
Knopf 1 Knopf 2 Knopf 3
Beispiel 4: Checkbox mit 4 Knöpfen, Knöpfe 1 und 2 gedrückt:
K. 1
K. 2
K. 3 K. 4
K. 1 K. 2 K. 3 K. 4
• Zum Rücksetzen aller Werte auf die Voreinstellungen dient der RESET-Type und zum
Absenden an den Server der SUBMIT-Button:
Das TEXTAREA-Widget ....
erlaubt die Definition eines rechteckigen Eingabefeldes. Die Größe des Feldes auf dem Bildschirm
wird durch die Attribute ROWS und COLS festgelegt; die Eingabe selbst kann umfangreicher sein.
Zwischen und kann eine Textvorgabe stehen. Es gibt drei Attribute:
NAME="...."
Name des Eingabefeldes (wie bei INPUT).
ROWS="...."
Anzahl Zeilen des Feldes
COLS="...."
Anzahl Spalten des Eingabefeldes
• Beispiel für die Definition einer Textarea:
Beliebiger Text, der im
Textfeld steht.
Das SELECT-Widget ....
Selektionsfelder benötigen weniger Platz als Checkboxes oder Radiobuttons; sie gleichen
Pull-Down-Menüs. Es gibt auch nur drei Attribute:
NAME="...."
Name des Feldes wie schon zuvor.
SIZE="...."
Anzahl der dargestellten Elemente. MULTIPLE erlaubt Mehrfachauswahlen. Fehlt die
SIZE-Angabe, stellt sich das Widget als Pull-Down-Menü dar, von dem zunächst nur ein
Menüpunkt sichtbar ist und das man zunächst öffnen muß (Pop-Up-Menü). Im anderen Fall
zeigt sich das Menü als Scrollbar.
OPTION
Ein Menüfeld wird über das OPION-Tag beschrieben, wobei der voreingestellte Menüpunkt
über das SELECTED-Attribut ausgewählt wird. Beispiel:
Feld 1
Feld 2
Feld 3
Feld 4
Webdesign
Feld 1
Feld 2
Feld 3
Feld 4
Formulare 134

Der Image-Button
Ein Image-Button erfüllt zwei Aufgaben: Er übernimmt die Aufgabe des SUBMIT-Feldes und
übermittelt zusätzlich die Koordinaten der Stelle, auf die im Bild geklickt wurde.
Beispiel:
E-Mail
mir!
erzeugt eine Mail mit Betreff(-vorgabe) "Webseiten-Mail"
E-Mail mir!
erzeugt entsprechend eine Mail, die bereits etwas im Text stehen hat.
Natürlich läßt sich beides kombinieren. Die einzelnen Felder werden durch ein Ampersand (&)
voneinander getrennt.
E-Mail mir!
Die Nachricht geht an account@domain.tld, als Kopie an account2@domain2.tld und hat die
Betreffsvorgabe "Wichtige Anfrage". Im Text steht anfänglich "Hier eintragen!".
Na, wollen Sie das mal testen?
Webdesign
Formulare 135

Dies läßt sich überall dort ideal einsetzen, wo Programme angeschrieben werden, das berühmte
'subscribe' oder 'join' and einen Mailinglisten-Server, der per E-Mail gesteuert wird.
Definitionen
Server
Client- und Servertechnik
Server (Verkäufer, Bedienender) sind die Computer, auf denen die Informationen gespeichert sind.
WWW-Server laufen meistens auf Unix-Rechnern und werden auch als HTTP-Dämonen bezeichnet.
Es gibt mehrere solche Software-Produkte, sowohl public domain als auch kommerziell.
Client
Clients (Kunden) sind die Rechner, die Dienste in Anspruch nehmen. Client-Programme sind die
Programme, mit denen die Benutzer von ihren eigenen Rechnern aus auf die Informationen, die auf
den Servern gespeichert sind, zugreifen.
Return-Codes eines WWW-Servers
Ein WWW-Server gibt auf jede Anfrag eine Status-Antwort zurück. Sie zeigt die Version des Servers
an und gibt einen Ergebniscode zurück. Manchmal wird auch noch eine Meldung angehängt. Die erste
Zeile sieht typischerweise so aus:
HTTP/1.0 200 OK
wobei HTTP/1.0 die HTTP-Version ist, 200 ist ein Fehlercode und OK die zugehörige Meldung. Es
gibt natürlich viele andere Codes.
Erfolgsmeldungen
Rückmeldungen im Bereich 2xx melden Erfolg. Der Body - sofern vorhanden - ist das Objekt, das die
Anfrage zurückgibt. Der Body muß im MIME-Format vorliegen. Wichtige Codes sind:
200 OK
Die Anforderung war erfolgreich
201 Created
Antwort auf den POST-Befehl
202 Accepted
Anforderung wird bearbeitet (noch nicht abgeschlossen)
203 Partial Information
Antwort auf den GET-Befehl.
204 No Response
Anforderung erhalten; es gibt keine Rückinfo, die zu senden wäre.
Umleitungen
Webdesign
Rückmeldungen im Bereich 3xx weisen auf Aktionen hin, die der Client (normalerweise Automatisch)
ausführen muß, um eine anforderung zu erfüllen.
301 Moved
Den angeforderten Daten wurde auf Dauer eine neue URL zugewiesen. Die Antwort enthält
Mailto Deluxe 136

eine Headerzeile der Form URL:neue url.
302 Temporarily_Moved
Den angeforderten Daten wurde zeitweise eine neue URL zugewiesen. Die Antwort enthält
eine Headerzeile der Form URL:neue url.
303 Method
Entweder eine andere Netzwerkadresse oder eine andere Methode als GET verwenden. Im
Body sind weitere Infos zu den Parametern.
304 Not_Modified
Antwort auf bedingte GET-Anweisung, wenn das Dokument unverändert ist.
Client-Fehler
Rückmeldungen im Bereich 4xx weisen auf scheinbare oder echte Fehler beim Client hin. Der Body
kann ein HTML-Dokument enthalten, das den Fehler näher beschreibt.
400 Bad Request
Anforderung hat falsche Sytax oder kann nicht bedient werden.
401 Unauthorized
Unzulässige Zugriffsberechtigung (falscher Header?).
402 Payment Required
Ungültiges Verrechnungsschema.
403 Vorbidden
Anforderung verboten.
404 Not Found
Der Server hat nichts gefunden, was der angegebenen URL entspricht (Tippfehler? Seite
gelöscht?)
Server-Fehler
Webdesign
Rückmeldungen im Bereich 5xx weisen auf Fehler beim Server. Der Body kann ein HTML-Dokument
enthalten, das den Fehler näher beschreibt.
500 Internal Error
Interner Serverfehler.
501 Not Implemented
Anforderung wird nicht unterstützt.
502 Bad Gateway
Ungültige Antwort von Gateway oder einem anderen Server.
503 Service Unavailable
Server Überlaset oder gesperrt.
504 Gateway Timeout
Gateway (z. B. Datenbank) antwortet nicht.
Cookies
Cookies sind kleine Informationseinheiten, die beim Besuch einer Wehsite zunächst im
Arbeitsspeicher des heimischen Computers gespeichert werden. Unter Umständen werden diese Daten
nach Verlassen des Wehservers in Form einer Textdatei auf die lokale Festplatte geschriehen.
Ein Cookie besteht aus einem Namen, einem Wert (Zeichenkette) und einem URL. Zudem besitzt ein
Cookie eine Lebensdauer. Wird der Ausflug ins Netz beendet und der Browser geschlossen, werden
alle Cookies, deren Lebensdauer noch nicht abgelaufen ist, in einer Datei gespeichert. Man spricht
dann von 'persistenten Cookies'. Zukünftig läßt sich dann mühelos verfolgen, wie oft genau dieser
Anwender wiederkommt und was er tut.
Return-Codes eines WWW-Servers 137

Webdesign
Ursprünglich wurden von Netscape die Cookies zur Erleichterung für den Anwender entwickelt. Sie
sollten persönliche Informationen enthalten, die der Anwender beim nächsten Besuch eines
Online-Angebots nicht mehr eingeben mußte, z. B. für den Zugriff auf Angebote, die eine
Zugangskennung erfordern. Eine andere Anwendung wäre ein 'Einkaufskorb'. Da jeder Seitenabruf
einen abgeschlossenen Kommunikationsvorgang darstellt, kann der Server nicht speichern, welche
Waren ein Kunde schon in seinen Korb gelegt hat. Cookies bieten hier die Möglichkeit den Inhalt des
Einkaufskorbes beim Kunden zu speichern, bis die abschließende Bestellung durch eine Bestätigung
erfolgt. Normalerweise lassen sich Cookies auch keiner spezifischen Identitäten zuordnen, sofern der
Besucher nicht woanders seine Identität preisgibt.
Unternehmen können mit Hilfe von Cookies Abrufprofile erstellen z. B. für verläßliche Abrufprofile
für Reichweitenuntersuchungen. Schließlich will man wissen, welche Seiten wie oft abgerufen
werden. Daraus lassen sich u. a. Schlußfolgerungen für die weitere Gestaltung einer Website ziehen.
Trotz zahlreicher Ansätze gibt es bislang noch kein genormtes Verfahren zur Bildung von
Abrufprofilen. Grundsätzlich besteht die Möglichkeit zur Bildung von Abrufprofilen jedoch auch ohne
Cookies - durch die Auswertung von Logbüchern, z. B. mit entsprechenden Monitoring-Tools.
Problematisch wird es, wenn Cookies mit langer Lebensdauer eingesetzt werden. Durch persistente
Cookies ist es möglich, einen Benutzer über mehrere Sessions hinweg zu identifizieren. Dadurch
erhöht sich die Informationsmenge und die Zuordnung einer Personenidentität vereinfacht sich. Das
ist ganz ohne Cookies nicht möglich. Mittlerweile gibt es eine Reihe von Shareware-Tools, mit denen
sich Cookies auf dem Computer identifizieren und löschen lassen. Normalerweise befindet sich im
Verzeichnisbaum des Browsers irgendwo eine Datei namens 'cookies.txt'. Auf UNIX-Systemen
genügt es, die Leseberechtigung der Datei wegzunehmen. Auf Windows-Rechnern kann man den
Inhalt der Datei löschen und sie dann auf 'Read-Only' zu setzen. Letztendlich sind Cookies aber
harmlos.
Anbieter, die in Ihrem WWW-Angebot Cookies verwenden, sollten einfach vorher auf deren
Anwendung und den Zweck hinweisen. Dann weiß nämlich der Websurfer woran er ist und
wird auch weniger Vorbehalte gegen die Cookies haben.
Weitere Informationen über Cookies findet man unter
• http://www.cookiecentral.com
• http://www.netscape.com/newsref/std/cookie_spec.html
Die Datei robots.txt
Wieviele Betreiber einer Internetpräsentation haben sich beim Studium Ihrer Serverlogbücher
bestimmt schon gefragt, warum in regelmäßigen Abständen eine Datei namens robots.txt abgerufen
wird.
Wen interessiert diese Datei? Die Datei wird von Suchmachinen gesucht die Spider oder Crawler
benutzen. Suchmaschinen die, nachdem Ihr Server einmal angemeldet, in regelmauml;szlig;igen
Abständen Ihren Server aufsuchen und nach eventüllen Veränderungen und neün Seiten und
Verzeichnissen auf Ihrem Server suchen.
Der 'robots exclusion standard' ist ein Quasistandard, der entwickelt wurde, um dem Serverbetreiber
die Möglichkeit zu geben, ausgewählte Bereiche des Servers für die Spider der Suchmaschinen zu
sperren. Durch Eintragungen in der Datei robots.txt können Sie also Verzeichnisse angeben, die nicht
in Suchmaschinen automatisch aufgenommen werden sollen.
Cookies 138

Wie ist robots.txt aufgebaut?
# Bemerkung
User-agent: *
Disallw:/test
#
Hinter diesen Zeichen können Sie Bemerkungen hinterlassen, die jedoch vom Spider ignoriert
werden. Wenn Sie einem bestimmten Spider etwas mitteilen möchten, so kouml;nnen Sie in
der User-agent-Zeile eine Bemerkung hinterlassen.
User-agent:
* Ein Stern bedeutet, daß die Angaben für alle Spider gelten.
Disallow:/Verzeichnis
In diese Zeile tragen Sie die Verzeichnisse ein, die nicht aufgesucht werden sollen (Im obigen
Beispiel das Verzeichnis test).
Wichtig ist, daß sie die Datei in Ihrem Server-Hauptverzeichnis hinterlegen und nicht in dem
betreffenden Unterverzeichnis. Wenn Sie keine robots.txt-Datei auf Ihrem Server hinterlegt haben,
werden alle Verzeichnisse von den Spidern besucht.
Geschützte Bereiche
Bei WWW-Servern, die unter UNIX laufen wird ein Feature des Betriebssystems genutzt, das es
erlaubt, das Server-Verzeichnis abzuschotten. Dieser Systemaufruf heißt chroot() und mancht das
Verzeichnis, in dem der Server seine Daten hat, für alle Client-Anfragen zum Wurzelverzeichnis. Es
existiert so aus Sicht des Clients nur dieses Verzeichnis mit seinen Unterverzeichnissen. Der Zugriff
auf wichtige Systemdateien ist daher unmöglich.
Des weiteren erlauben die Server, bestimmte Datenverzeichnisse nur für bestimmte Rechner
freizugeben oder Verzeichnisse durch Benutzerkennung und Psßwort zu schützen. Dies geschieht
entweder in der Serverkonfiguration oder über die Datei .htaccess in einem beliebigen
Verzeichnis. Alle Dateien innerhalb und unterhalb dieses Verzeichnisses sind dann geschützt.
Wie .htaccess funktioniert
Webdesign
Der Apache-WebServer wird in der Regel durch die Datei /etc/httpd.conf konfiguriert. Diese
Datei enthält zum einen globale Einstellungen, die den Betrieb des gesamten Servers betreffen und
zum anderen kann für jeden virtuellen Server und jedes Dokumenten-Verzeichnis eine eigene
Konfiguration eingegeben werden (z. B.in welchen Verzeichnissen ausführbare CGI liegen dürfen
oder wer auf diese Seite zugreifen darf). Eine individuelle Konfiguration kann aber nicht nur mit
dieser Datei erfolgen.
Mit einer zweiten Möglichkeit wollen wir uns nun beschäftigen: In jedem Verzeichnis, das individuell
konfiguriert werden soll, wird eine Datei mit dem Namen .htaccess abgelegt, in der die
gewünschten Konfigurationsparameter stehen. Diese sind in Syntax und Semantik identisch zu den
Einträgen in der Datei httpd.conf. Der Name ".htaccess" ist allgemeine Konvention, er kann
in der Datei /etc/httpd.conf beliebig definiert werden.
Damit dise zweite Art der Konfiguration überhaupt funktioniert, muss in der Datei
/etc/httpd.conf festgelegt werden, daß Apache solche Dateien berücksichtig. Dazu sucht man
folgenden Eintrag:
# This controls which options the .htaccess files in directories can
Wie ist robots.txt aufgebaut? 139

Webdesign
# override. Can also be "All", or any combination of "Options", "FileInfo",
# "AuthConfig", and "Limit"
#
AllowOverride All
Die einzelnen Werte nach "AllowOverride" haben folgende Bedeutung:
• All: alle gültigen Direktiven dürfen verwendet werden.
• None: .htaccess-Dateien werden ignoriert.
• Options: für das Verzeichnis darf die Options-Direktive verwendet werden. Hier kann
beispielsweise festgelegt werden, ob in einem Verzeichnis CGI-Skripte (Options
+ExecCGI) ausgeführt werden dürfen, oder ob der Verzeichnisinhalt angezeigt werden darf,
falls die Datei index.html fehlt (Options +Indexes).
• FileInfo: alle Direktiven bezüglich Dateirechte und -zuordnung dürfen verwendet
werden.
• AuthConfig: für dieses Verzeichnis darf eine individuelle Zugangsberechtigung eingestellt
werden.
• Limit: die Limit-Direktive (betrifft Server-Namen) darf individuell eingestellt werden.
Am häufigsten verwendet wird die .htaccess-Datei in Verbindung mit "Options", "AuthConfig"
zum Paßwortschutz und zur Festlegung eigener Fehlerseiten. Wie bereits erwähnt, muß diese Dateien
nicht zwingenderweise ".htaccess" heißen, sondern man kann einen beliebigen Namen wählen.
Dazu muß in der Datei /etc/httpd.conf der folgende Eintrag geändert werden:
#
# AccessFileName: The name of the file to look for in each directory
# for access control information.
#
AccessFileName .htaccess
Anstelle von ".htaccess" wird ein anderer Name eingetragen.
Sicher sind Sie beim Versuch, eine Seite zu öffnen, schon einmal auf ein Fenster gestossen sein, daß
etwa folgendermaßen aussieht:
Dadurch wird verhindert, dass ein Verzeichnis (und alle seine Unterverzeichnisse) der Website
allgemein zugänglich ist, indem der Zugang nur durch die Eingabe eines Usernamens und des
zugehörigem Paßworts gewährt wird.
Um solche geschützte Verzeichnisse einzurichten, gehen Sie folgendermaßen vor: Erstellen Sie in
dem Verzeichnis, welches Sie mit einem Paßwort schützen wollen, eine Datei namens .htaccess
mit folgendem Inhalt:
AuthUserFile /pfad/zu/einer/passwortdatei
AuthGroupFile /dev/null
AuthName "wieimmerdasheissensoll"
Wie .htaccess funktioniert 140

Webdesign
AuthType Basic
require user webmaster
Bitte ersetzen Sie /pfad/zu/.htpasswd durch einen realen Verzeichnispfad, in welchem sich die
Datei .htpasswd mit den Userdaten befindet. Beim Authentisierungstyp (AuthType) gibt es derzeit
nur den Typ "Basic".
"wieimmerdasheissensoll" können Sie durch eine kurze Nachricht ersetzen, die in der
User-Authentifizierungs-Pop-Up Box erscheint (String mit Leerzeichen in Gänsefüßchen setzen!).
Das Verzeichnis ist jetzt nur für die Person freigegeben, die als Benutzernamen webmaster eingibt.
Nun müssen Sie noch ein Paßwort für den Benutzer webmaster erstellen. Wie das geht, erfahren Sie
weiter unten. Jetzt kann auf das Verzeichnis nur noch mit dem Usernamen webmaster und dem
eingegebenen Paßwort zugegriffen werden.
Man kann die Sperre aber auch nur von der IP-Adresse des Clients abhängen lassen. Zunächst machen
wir mal ganz zu:
AuthUserFile /pfad/zu/.htpasswd
AuthName "wieimmerdasheissensoll"
order deny,allow
deny from all
Jetzt öffnen wir für alle Rechner des C-Netzes 192.168.34.0:
AuthUserFile /pfad/zu/.htpasswd
AuthName "wieimmerdasheissensoll"
order deny,allow
deny from all
allow from 192.168.34.
Hier darf niemand zugreifen, wenn der Name "nobody" nicht in der Paßwort-Datei definiert ist:
AuthUserFile /pfad/zu/.htpasswd
AuthName "wieimmerdasheissensoll"
order deny,allow
deny from all
allow from 192.168.34.
require user nobody
Möchten Sie dagegen einigen Benutzern den Zugriff auf das Verzeichnis ermöglichen, so gehen Sie
bitte wie folgt vor. Erstellen Sie mit dem Programmhtpasswd weitere Benutzer. Nun erstellen Sie in
dem zu schützenden Verzeichnis eine Datei namens .htgroup mit folgendem Inhalt:
logins: webmaster benutzer2 benutzer3
Geben Sie hier einen beliebigen Gruppennamen, gefolgt von einem Doppelpunkt ein, und listen Sie
alle Benutzer durch ein Leerzeichen voneinander getrennt dahinter auf, die Zugriff auf das
Verzeichnis erhalten sollen. Nun müssen Sie noch die .htaccess in dem entsprechenden
Verzeichnis wie folgt anpassen:
AuthUserFile /pfad/zu/.htpasswd
AuthGroupFile /pfad/zu/.htgroup
AuthName "wieimmerdasheissensoll"
AuthType Basic
require group logins
Wie .htaccess funktioniert 141

Wollen Sie einen einzelnen Benutzer entfernen, so löschen Sie seinen Namen einfach aus der
Auflistung in der Datei .htgroup und gegebenenfalls auch aus der Datei .htpasswd.
Möchten Sie hingegen vielen Benutzern den Zugriff auf das Verzeichnis ermöglichen, so ist die
doppelte Eintragung in .htpasswd und .htgroup etwas lästig. Gehen Sie bitte wie folgt vor.
Erstellen Sie mit htpasswd weitere Benutzer. Nun müssen Sie noch die .htaccess in dem
entsprechenden Verzeichnis wie folgt anpassen:
AuthType Basic
AuthName Sicherheit
AuthUserFile /opt/www/htdocs/geheim/.htpasswd
AuthGroupFile /dev/null
require valid-user
Wollen Sie den Schutz des Verzeichnisses aufheben, löschen Sie einfach .htaccess, .htpasswd
und .htgroup in den entsprechenden Verzeichnissen. Wollen Sie dagegen nur einen einzelnen
Benutzer entfernen, so löschen Sie seinen Namen einfach aus der Auflistung in der Datei
.htpasswd.
Paßwort-Datei
Mit den .htaccess-Dateien sind lediglich Strukturen definiert worden. Ohne den Eintrag von
Benutzernamen und Paßwörtern in die Paßwort-Datei kann noch kein einziger Benutzer zugreifen.
Entsprechende Eintragungen werden mit dem Programm htpasswd durchgeführt:
htpasswd [-c] passwordfile username
Nun müssen Sie zweimal das Paßwort für den Benutzer "webmaster" eingeben.
Wird der Parameter "-c"eingegeben, erzeugt das Programm eine neue Paßwortdatei. Wenn schon ein
entsprechender Benutzer existiert, wird das Paßwort geändert.
Benutzernamen und Paßwörter sind frei wählbare Strings; sie haben nichts mit den User-IDs der
Benutzerverwaltung unter UNIX zu tun -- und sie sollten es auch nicht!
Das Paßwort wird verschlüsselt abgelegt, wie man das von den UNIX-Paßwort-Dateien
/etc/passwd bzw. /etc/shadow kennt. Die Verschlüsselung erfolgt jedoch nach einem eigenen
Verfahren. Beispiel für eine Paßwort-Datei:
boss:IN3WY1lATStaY
schmidt:INQaGJBu4yljQ
meier:INqq3xgT4zpp6
huber:INT.EAmojNwN6
Mit dem folgenden Perl-Programmstück kann man auch einen Eintrag in der Passwortdatei erzeugen:
# Passwort basteln aus $name (Name) und $passwd (Passwort)
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Der Name der Psswortdatei steht in der Variablen $PASS
#
# Beim Namen:
# - Umlaute konvertieren
# - alles weg, was nicht Buchstabe ist
# - alles in Kleinbuchstaben umwandeln
$temp = $name;
$temp =~ s/ä/ae/g;
Webdesign
Wie .htaccess funktioniert 142

$temp =~ s/ö/oe/g;
$temp =~ s/ü/ue/g;
$temp =~ s/Ä/ae/g;
$temp =~ s/Ö/oe/g;
$temp =~ s/Ü/ue/g;
$temp =~ s/ß/ss/g;
$temp =~ tr/a-zA-Z//cd;
$temp =~ tr/A-Z/a-z/;
$namlen = length $temp;
$newpass = crypt($password,substr($password,0,2));
open DAT, ">>"$PASS || die "Fehler \"$!\"beim \Öffnen der Passwortdatei!\n";
print DAT $newuid, ":", $newpass, "\n";
close DAT;
Die folgende Tabelle faßt die verschiedenen Möglichkeiten der Zugriffskontrolle zusammen. Alle
vorgestellten Direktiven können beliebig kombiniert werden, allerdings sind komplexe
Kombiniationen nicht immer ganz einfach zu durchschauen und können auch schon einmal zu
fehlerhaften Reaktionen führen.
require group admin Gruppenzugehörigkeit festlegen. Hier: User der Gruppe "admin"
require user hinz
kunz
require valid-user
User direkt prüfen. Hier: Direkte Userprüfung auf hinz oder kunz
Zugang ok, wenn User in AuthUserFile vorkommt und das Passwort
stimmt
order deny,allow Reihenfolge/Wertigkeit der Rechte festlegen.
deny from all Zugangs-Verbote festlegen. Hier: erstmal darf niemand zugreifen
satisfy all
Webdesign
Die auf "satisfy" folgenden Rechte müssen erfüllt sein. Hier: alle
Anfordungen
allow from 127.0.0.1 Zugriff nur von der angegebenen IP-Nummer eraubt
allow from 141.39. Zugriff nur vom Netz 141.39.0.0 aus erlaubt.
Bei sehr großen Userzahlen kann die Nutzung des Paßwort-Files sehr uneffizient werden. Über die
Apache-API wird die Möglichkeit geboten, eine eigene Authentifizierung zu entwicklen.
Im Prinzip lassen sich über .htaccess sehr viele Optionen des Apache steuern - nicht nur die oben
erwähnten.
HTML-Editoren
Den perfekten Editor für HTML gibt es nicht. Alle Produkte haben besondere Features - und stets eine
längere Mängelliste. Viele Editoren sind programmierte Geheimnisse für Freaks und auch nur von
solchen verwendbar.
Textbasierte Editoren bieten wenig Komfort und benötigen anfangs als Unterstützung ein
HTML-Handbuch neben der Tastatur. Trotzdem werden sie von Profis bevorzugt eingesetzt. Eine
Erweiterung stellen sogenannte "Makro-Editoren" dar. Hierbei handelt es sich zwar um Texteditoren,
aber durch die Fähigkeit, mit einer bestimmten Tastenkombination oder durch Klicken auf ein Icon
eine beliebige Zeichenfolge in den Text einzufügen, kommen sie dem Anfänger entgegen. Die
wichtigsten Tags sind als Makro abrufbar, womit das ständige Blättern im Handbuch wegfällt, im Text
erscheinen aber die HTML-Tags im Quellformat. Ob Texteditor oder Makroeditor - es wird auf jeden
Fall noch ein Browser zur Kontrolle des Ergebnisses benötigt.
HTML-Editoren 143

Webdesign
WYSIWYG-Editoren zeigen das Layout im Entstehungsprozeß und setzen immer weniger
HTML-Kenntnisse voraus. Die Vorschau ist jedoch meist nicht verbindlich. Der Grund für die
mangelnde WYSIWYG-Tauglichkeit liegt in HTML selbst: Die Sprache ist nicht standardisiert; der
die Standardisierung hinkt der notorischen Entwicklung neuer Browser-Features hinterher. Wie groß
z. B. die Schrift wird, hängt von der Interpretation des Browsers (Version) ab, der das Ganze umsetztund
außerdem vom Rechnersystem. Ein Apple Mac stellt die gleiche Seite oft ganz anders dar als ein
PC. Zudem kann auch der Benutzer Schriftgröße- und -Art nach eigenen Vorlieben einstellen.
Office-Pakete mit HTML-Fähigkeiten, z. B. Programmpakete wie Star Office oder MS Office bieten
die Möglichkeit, Dokumente direkt in HTML-Code abzulegen. Dabei wird jedoch versucht, möglichst
nahe am Original zu bleiben - was zu einer Unzahl von unnötigen HTML-Anweisungen führt, die nur
das Aussehen beeinflussen sollen. Wenn dabei noch ungewöhnliche Zeichensätze verwendet werden,
ist das Resultat nicht einmal auf jedem PC zu sehen, geschweige denn auf anderen Plattformen. Aus
den eben erwähnten Formatierungsproblemen sind solche Seiten nur bedingt universell für das
Web-Design einsetzbar. Im Firmen-Intranet, wo man davon ausgehen kann, daß alle Rechner die
gleiche Ausstattung und Softwarebasis besitzen, kann man propietäre Formate einsetzen, nicht jedoch
bei einer weltweiten Internet-Präsenz.
Konventer-Programme setzen auf professionelle Satz- und Layoutprogramme (z. B. QuarkXPress,
Pagemaker) auf und erzeugen aus den grafischen Layouts HTML-Seiten. Ihre Entwicklung steckt
noch in den Kinderschuhen.
Professionelle HTML-Entwickler ziehen manuell geschriebenen Code vor, da es oft genauso lange
dauert, programmbedingte Unzulänglichkeiten auszubügeln wie einen sauberen Code manuell
aufzubauen. Und selbst für den Gelegenheitsschreiber sind HTML-Kenntnisse sind stets nützlich. Auf
jeden Fall sollte man das Ergebnis seiner Arbeit mit den beiden verbreiteten Browsern von Netscape
und Microsoft überprüfen.
Design-Regeln
Zweck des World Wide Web ist es immer noch, untereinander verknüpfte Informationen
bereitzustellen. Natürlich sollen die Webseiten keine Textwüsten auf Einheitsgrau sein, aber auf der
anderen Seite sind Seiten, auf denen es an allen Ecken und Enden zappelt, genauso abschreckend.
Deshalb folgen nun ein paar Tips für Webseiten-Designer.
Egal, ob das WWW-Angebot eine 'Textwüste' wird oder ob man es schrill und bunt gestaltet, man
muß sich Gedanken über die Stuktur des Angebotes machen. Dabei gibt es zwei Möglichkeiten :
• Ein flaches Angebot, bei dem von der Startseite (Homepage) viele Verzweigungen ausgehen
und dort nach ein oder zwei Stufen das Ende erreicht ist.
• Ein tiefes Angebot, bei dem wenige Links von der Homepage in jeweils tief verzweigte
Strukturen münden.
Meist wird sich eine Mischform ergeben. Eine 'Textwüste kann man relativ einfach auflockern, indem
man ein paar kleine Bilder einstreut.
Beim Gestalten einer HTML-Seite sollte man auch an das Bildschirmformat denken. Mehr als eine
Schreibmaschinenseite sollte eine einzelne Webseite nur dann sein, wenn es sich um einen
zusammenhängenden Text handelt. Übergeordnete Seiten sollte in der Regel auf einen Bildschirm
passen.
Design-Regeln 144

Empfehlungen für das Gestalten von HTML-Seiten
• Verwenden Sie im Title-Tag möglichst viele ausdruckstarke Begriffe, die auch wirklich auf
den Inhalt Ihrer Seite zutreffen. Suchmaschinen berücksichtigen zumindest den Title-Tag.
• Formulieren Sie Ihre Texte kurz und verständlich. In der Regel sind Singular- und
Präsens-Formulierungen angebracht.
• Vermeiden Sie lange, unstrukturierte Texte. Jeder lange Text läßt sich über eine Einstiegsseite
mit Inhaltsverzeichnis (das gleichzeitig als Link dient) in kleinere Einheiten zerlegen.
• Organisieren Sie die Texte Ihres Dokumentes im Hinblick auf die Inhaltsschwerpunkte. Diese
Passagen sollten möglichst schnell aufzufinden sein. Verteilen Sie eine Aussage
(Informations-Granulat) nicht auf mehrere Dokumente. Strukturieren Sie die Dokumente.
• Versuchen Sie Dokumente zu vermeiden, deren Verständnis von vorhergehenden und
nachfolgenden Dokumenten abhängen. Schreiben Sie möglichst kontextunabhängige
Dokumente.
• Gruppieren Sie zusammengehörende Informationen in semantischer Sicht durch eine
zweckmäßige Gliederung und in visueller Sicht durch Überschriften und Auflistungen.
• Gehen Sie sparsam mit Hervorhebungen durch Fettdruck, Kursivschrift, Text in
Großbuchstaben und langen Links um. Benutzen Sie Hervorhebungen nur, wenn diese das
Auffinden und Verstehen verbessern.
• Halten Sie das Layout der Seite übersichtlich, das heißt im Regelfall so einfach wie möglich.
Verwenden Überschriftstags (H1...H6) zur Hervorhebung und Aufzählungen.
• Benutzen Sie ein einheitliches, konsistentes Layout über alle Dokumente einer Publikation.
Das vereinfacht auch die Erstellung neuer Seiten (z. B. Verwendung fertiger Kopf- und
Fußteile).
• Wenn Sie vorhandene Textdateien mit einem Konverter-Programm aufbereiten, dann ist ein
Nachbearbeiten auf jeden Fall erforderlich.
• Lassen Sie deutlich erkennen, dass ein Link auch ein Link ist. Unterstreichen Sie also keinen
Text. Grafiken sollten aussagekäftig sein, und nicht die Ladezeit Ihrer Seite unnötig
verlängern.
• Verlinken Sie auf themenverwandte Seiten. Sie erhöhen nicht nur die Zugriffszahlen
derjenigen Seiten, sondern auch die Attraktivität Ihrer eigenen Seiten.
• Gestalten Sie Ihr internes Menusystem (Linksystem) einheitlich. Erschweren Sie Ihrem
Besucher die Navigation nicht durch viele verschiedene Navigationssysteme.
• Bringen Sie innerhalb der Verzweigung logische Querverweise an. Dazu gehören auch
sogenannte 'Shortcuts' (Verweise zu häufig benötigten Stellen). Die Realisierung kann z. B.
durch eine Kopfleiste am Anfang oder am Ende jeder Seite erfolgen, die alle 'Shortcuts'
enthält.
Aktualität
Webdesign
Ein Webangebot muß möglichst aktuell sein - wie eine Tageszeitung. Liefern Sie Ihren Lesern
handfeste Informationen. Langatmiges Geschwafel sorgt dafür, daß kaum jemand weiterliest. Sorgen
Sie für Quervernetzung der einzelnen Seiten. Schließlich sollten die Daten und Infos aktuell sein und
ständig ergänzt werden. Denn auf einer seit Monaten nicht mehr aktualisierten Homepage läßt sich ein
Surfer so schnell nicht mehr blicken. Bieten Sie Seiten wie "News" oder "Aktuelles" nur an, wenn Sie
diese ständig pflegen wollen und können. Nichts ist so peinlich wie "Alles Gute zum Neuen Jahr" auf
der News-Seite im Monat Juni. Deshalb versprechen Sie auch nichts, was Sie nicht halten können.
Versprechen Sie nichts, was Sie nicht halten können
Links, die auf ein Baustellenschild führen, verärgern den Leser wie leere Versprechungen. Der Surfer
sieht einen vielversprechenden Querverweis, klickt ihn an und dann? Nichts! Niente! Wenn das
Angebot noch so rudimentär ist, daß man ein Baustellenschild aufstellen müßte, dann sollte man es
Empfehlungen für das Gestalten von HTML-Seiten 145

noch nicht zeigen. Besser ist es bei Menüs, den entsprechenden Verweis als ganz normalem Text zu
belassen. Dann sieht der Besucher: "Da kommt demnächst was." und er wird mal wieder nachsehen
kommen. Wenn natürlich monatelang das Link nicht mit Info gefüllt wird, dann ist es auch schlecht.
Auf lange Sicht werden nur die Server im Netz überleben, die echte Informationen bieten, die gut
aufbereitet sind. Ansonsten ist ein WWW-Angebot ständig im Umbau - also nichts, was man extra
erwähnen müßte.
Bunt und zappelig
Das sind WWW-Seiten, auf denen sich an allen Ecken und Enden etwas bewegt: blinkende Schrift,
animierte GIFs, Laufschrift. Seit animierte GIFs erfunden wurden, zappelt es allenthalben. So schön
es für einen selbst sein mag, animierte Bilder auf seiner Homepage zu sehen, so nervig ist es für
Besucher, die sich häufig im Web herumtreiben. Außerdem ziehen Bewegungen auf der Webseite
zuviel Aufmerksankeit auf sich und stören auf Dauer beim konzentrierten Lesen des restlichen Textes.
Verzichten Sie also auf die Wackelbildchen. Ein knalliges 'NEU' reicht schon, es muß nicht noch
blinken. Laufschriften sind für Schnelleser zu langsam und für Langsamleser zu schnell - also so oder
so ungeeignet. Ein Icon oder eine Grafik wirken genauso gut.
Apropos Icons: Es gibt massenhaft Icon-Sammlungen, aus denen man sich bedienen kann. Noch
besser ist es aber, wenn man sich die Sinnbilder selbst malt. Das ist gar nicht so schwer. Fangen Sie
doch damit an, ein vorhandenens Icon zu modifizieren. Übrigens reichen für ein Icon normalerweise
16 - 32 Farben - dadurch wird die Bilddatei nicht nur kleiner, sondern es gibt auch keine Probleme mit
der Darstellung beim Surfer, wenn dessen Grafik nicht dem letzten Stand der Technik entspricht.
Waagrechte Linien: Keine Zeitschrift und kein Buch strukturiert seinen Inhalt durch waagrechte
Linien. Wenn sie nicht gezielt als Gestaltungselement dienen sollen, sind sie nur von Übel - egal, ob
sie mit erzeugt oder ob sie durch farbige GIF-Bilder dargestellt werden.
Bilder
Webdesign
• Riesige Bilder: Man kann mit einem kleinen Übersichtsbild (sogenanntes 'Thumbnail') auf ein
großes Bild verweisen. Noch besser ist eine Größenangabe (in KByte) zum Thumbnail dazu.
Geradezu verdammungswürdig sind Bilder, die relevanten Text enthalten.
• Die Browser verstehen zumindest die beiden Grafikformate GIF (*.gif) und JPEG (.jpg).
Setzen Sie JPEG für große Bilder mit vielen verscheiden Farben und Farbübergängen ein. Das
GIF-Format eignet sich für kleinere Grafiken, wie zum Beispiel Icons oder Buttons. Sind Sie
sich nicht sicher welches Format das richtige Format ist, so testen Sie beide Formate.
• Verwenden Sie das ALT-Attribut für IMG-Tags. Der Benutzer wird während der Ladezeit
oder bei aisgeschalteter Bildanzeige über das informiert was hinter der Grafik steckt. Auch
wenn der Mauscursor etwas länger über dem Bild verweilt, wird der ALT-Text angezeigt.
Dadurch kann man dieses Feature für eine griffige Bilderklärung verwenden. Notfalls nehmen
Sie ALT="".
• Vergessen Sie auch nicht die Größenangaben für Ihre Grafiken. Mit den den Tags WIDTH
und HEIGHT teilen Sie dem Browser mit, wie groß die zu ladenden Grafiken sind. Es wird
ein Rahmen für die noch nicht sichtbaren Grafiken dargestellt und so die Seite schon wärend
des Ladevorganges korrekt aufgebaut.
• Wenn Sie für Ihre Navigationssystem eine Imagemap vorsehen, so denken Sie daran, daß
manche User sich die Seiten ohne Grafiken betrachten. Stellen Sie also alternativ eine
Textversion zur Verfügung.
• Bedenken Sie bei der Konzeption Ihrer Webseiten daran, daß noch nicht jeder über eine
High-Speed ISDN-Leitung verfügt, und verzichten Sie auf unnötige Grafiken.
Versprechen Sie nichts, was Sie nicht halten können 146

Frames
Bei Frames scheiden sich die Geister. Puristen sagen, wer Frames benutzt, sei einfach nicht in der
Lage, sein Angebot zu strukturieren. Das ist sicher bei manchen Angeboten richtig. Auf der anderen
Seite kann der sparsame Einsatz von Frames das Navigieren durch die WWW-Seiten zu erleichtern.
Nachteil ist auf jeden Fall, daß sich Infos, die innerhalb eines Frames dargestellt werden, nicht einfach
in die 'Bookmarks' übernommen werden können.
Viele Programmierer stellen mit dem FRAME-Tag Unfug an. Auf einer Seite sollten sich maximal drei
Frame-Abteilungen tummeln. Ein Frame kann dabei generelle Navigationswerkzeuge für die
Homepage vorhalten, der zweite Frame birgt einen Stichwort-Index und der dritte zeigt den
eigentlichen Inhalt. Mehr Frames braucht niemand.
Verlinken Sie auf externe Seiten Seiten, so sollte eindeutig sein, daß der Inhalt derjenigen Seite nicht
von Ihnen ist. Wenn ein Link zu einem anderen Server führt, laden Sie dieses Link nicht innerhalb des
Frames. Das schränkt die dargestellte Fläche der angesteuerten Seite ein. Laden Sie fremde Seiten
grundsätzlich mit der Option target= "_parent" oder target="_blank" im -Tag.
Farben
Noch immer gibt es grafisch unempfindliche Naturen, die hellblaue Schrift auf knalligem Rot für chic
halten. Über Ästhetik mag man streiten, nicht aber über Lesbarkeit. Und diese Farbkombination ist
ebenso ätzend wie Gelb auf Grün oder Pink auf Hellblau. Als optische Killer Nummer zwei haben
sich Hintergrundgrafiken erwiesen. Ein im Grafikprogramm kontrastarm aussehendes Bild kann im
Browser stärker stören als vorgesehen, insbesondere wenn der Browser dithert. Denken Sie auch an
die immer noch zahlreichen Benutzer im Netz, die vor Graustufenmonitoren sitzen. Am besten
verwenden Sie in der Regel dunkle Schrift auf hellem Grund.
Wählen Sie für Ihre Links eine deutlich andere Farbe als die Textfarbe.
Gestalten Sie alle Ihre Links in der gleichen Farbe, es sei denn, Sie können deutlich zum Ausdruck
bringen, daß auch der anderfarbige Link ein Link ist. Bei den Benutzern hat die blaue oder violette
Farbe und die Unterstreichung für Links einen hohen Wiedererkennungswert. Die Farbe kann der
allgemeinen Erscheinung Ihrer Webseite angepaßt werden, auf die Untersteichung sollten Sie jedoch
nicht verzichten.
Wählen Sie im BODY-Tag nicht die gleichen Farben für Link (LINK), visited Link (VLINK),
animated LINK (ALINK). Ein Link erhält die VLINK-Farbe, wenn dieser bereits besucht wird. Die
ALINK-Farbe erscheint solange der Link gedrückt ist. Für ALINK empfiehlt sich eine Farbe, die in
der Nähe der LINK-Farbe liegt.
Bewahre uns vor Plug-ins
Webdesign
Shockwave hier, Real Audio da, usw. An jeder Ecke wachsen neue Plug-Ins. Und jeder Autor
verwendet einen anderen Multimedia-Standard, für jede Homepage benötigt der Surfer andere
Plug-Ins. Das alles kostet nicht nur Download-Zeit, sondern müllt dem Besucher der Homepage auch
die Platte voll. Dazu kommen höhere Hardwareanforderungen, Inkompatibilitäten der Plug-Ins
untereinander und mögliche Softwarefehler. Überlegen Sie also, ob Multimedia-Erweiterungen
wirklich nötig sind.
Frames 147

Nutzlose Applets
Die Anzahl der nutzlosen Applets und Scripts steigt expotentiell. Dabei handelt es sich um
Besucher-Zähler, Lauftexte oder Animationen. Solche Applets und Scripts können nützlich sein,
beispielsweise für Suchsysteme, Pull-Down-Menüs zur Benutzerführung und zur Prüfung von
Formularen. Bedenken Sie jedoch, daß durch Viren und "trojanische Pferde" die Scripts bei den
Benutzern in Verruf geraten sind und oft im Browser deaktiviert wurden. Verwenden Sie Scripts also
sparsam oder überhaupt nur im Intranet. Und bevor Sie das Javascript-Laufband auf Ihrer Homepage
unterbringen, bedenken Sie, daß andere User dasselbe tun. Der Renner unter den Nutzlosigkeiten ist
jedoch der Besucherzähler, der bei jedem Aufruf Ihrer Homepage verändert wird. Das verhindert
nämlich, daß die Seiten im Proxy-Cache eines Providers zwischengespeichert werden können, und der
Surfer bessere Ladezeiten bekommt. Besser ist es, eine Serverstatistik zu veröffentlichen, die täglich
oder wöchentlich aktualisiert wird.
Testen Sie Ihre Homepage
Nichts ist peinlicher als eine fehlerhafte Homepage. Und Bugs schleichen sich schnell ein. Was auf
Ihrem Rechner lokal noch nett aussieht, kann sich bei einer kritischen Probefahrt schnell als
grauenhaft herausstellen. Die wichtigsten Tests:
• ohne Grafik: Viele Surfer haben bei ihrem Trip durchs Web die Grafikdarstellung
abgeschaltet. Stimmt die Seitenaufteilung noch, wenn die Grafiken Ihrer Homepage
ausgeknipst sind?
• Browser-Kompatibilität: Internet-Explorer und Netscape Navigator interpretieren einige Tags
unterschiedlich. Probieren Sie auch aus, wie Ihre Homepage mit beiden Browsern aussieht.
Probieren Sie es auch mal mit einem Textbrowser (z. B. Lynx).
• Rechtschreibung: Lassen Sie Ihre Homepage gegenlesen, und nutzen Sie
Rechtschreib-Programme.
• Links ins Nichts: Testen Sie regelmäßig alle Links auf Ihrer Homepage.
• Struktur: Stimmt die Struktur Ihres Servers? Findet der User von jeder Unterseite auf die
Homepage zurück? Gibt es genügend Querverweise? Viel Web-Angebote sind reine
Menüsysteme.
• Erreichbarkeit: Haben Sie ein Mail-Link zu Ihrer E-Mail-Adresse auf die Seite gepackt? Gibt
es einen Maillink zum Webmaster?
Suchmaschinen
Wenn ein potentieller Kunde Informationen im Internet mit einer Suchmaschine sucht erhält er eine
Liste mit WWW-Seiten, die seinen Suchbegriffen mehr oder weniger gut entsprechen. Da die
Suchmaschinen oft Tausende von Seiten finden, ist es entscheidend, daß Ihre Seite am Anfang dieser
Liste steht, sonst wird sie nicht gesehen. Die Software der Suchmaschinen legt die Reihenfolge fest,
mit der die Ergebnisse angezeigt werden. Einige Suchmaschinen beschreiben den Algorithmus,
nachdem die Reihenfolge festgelegt wird, andere nicht.
Suchmaschinen werten Ihre Seiten auf zwei Arten aus: sie sehen sich den Seitentext an und sie werten
die Meta-Tags aus. Meta-Tags sind besondere HTML Befehle, die die Seite für die Suchmaschine
beschreiben und Schlüsselwörter angeben.
Keywords
Webdesign
Die richtigen Schlüsselwörter können Ihnen eine gute Position bei den Suchmaschinen sichern. Stellen
Sie eine Liste mit Schlüsselwörtern auf. Schreiben Sie sich etwa 20 - 50 Schlüsselwörter auf, eins in
Nutzlose Applets 148

Webdesign
jede Zeile. Wenn Sie diese Liste haben, Numerieren Sie die Schlüsselwörter nach ihrer Wichtigkeit.
Sie müssen sich entscheiden. Haben Sie eine lange Liste von Schlüsselwörtern, werden Ihre Seiten
zwar auch bei vielen Suchbegriffen gefunden, aber nie an der Spitze der Suchergebnisse stehen.
Nehmen Sie nur wenige Schlüsselwörter, erhöht sich der Anteil dieser und Ihre Seite wird oben im
Suchergebnis erscheinen. Wenn Ihre Liste mit Schlüsselwörtern kurz ist und Sie sicher sind, daß die
Interessenten genau nach diesen Begriffen suchen, sollten Sie auch gezielt vorgehen. Wenn nicht,
müssen Sie Ihre Schlüsselwörter breit streuen. Fragen Sie sich, was Ihr Kunde als Suchbegriffe
eingeben würde? Überlegen Sie sich alle Begriffe, die eine Beziehung zu Ihrer Seite haben und tragen
Sie diese in Ihre Liste ein. Überlegen Sie weiter: " Was könnte ein Kunde suchen ?" Das hilft Ihnen
weiter. Probieren Sie ein paar Begriffe bei verschiedenen Suchmaschinen aus.
• Beschreiben Sie Ihre Seite, nicht Ihre Firma. Der Sinn Ihrer Anstrengungen ist es, den
Kunden zu Ihrer Webseite zu lotsen. Wenn der Kunde auf Ihrer Seite ist, können Sie Ihre
Firma beschreiben. Wenn Sie eine Beschreibung Ihrer Seite erstellen, sagen Sie dem Kunden,
warum er Ihre Seite besuchen muß. Der Kundesucht nach einer Webseite nicht nach einem
Jahresbericht.
• Testen Sie Ihre Stichworte. Nehmen Sie Ihre Liste zur Hand und besuchen Sie die großen
Suchmaschinen. Geben Sie die Schlüsselwörter eins nach dem anderen ein und beobachten,
was als Ergebnis in den Suchlisten erscheint. Achten Sie auf die Beschreibung der ersten paar
Einträge und Sie haben eine gute Möglichkeit, weitere Schlüsselwörter zu entdecken.
• Benutzen Sie den Plural. Wenn Sie Ihre Liste vollständig haben, denken Sie auch an den
Plural Ihrer Schlüsselwörter. Wenn Ihre Schlüsselwörter im Singular eingetragen sind, wird
Ihre Seite bei einer Suche nicht erscheinen und alle Ihre Mühen waren umsonst. Ihre Seite
wird andererseits gefunden, wenn nach dem Singular gesucht wird.
• Vermeiden Sie häufige Begriffe. Vermeiden Sie Begriffe, die mit dem Internet stark
zusammenhängen. Die Suchmaschinen ignorieren teilweise zu häufig vorkommende Begriffe.
Oder Ihre Seite geht in zigtausend Fundstellen unter.
• Fassen Sie Schlüsselwörter zu Phrasen zusammen. Dies ist eine großartige Taktik für den
Meta Keyword Bereich. Wenn Sie suchen nehmen Sie doch auch nicht nur einen Begriff.
Normalerweise wird nach Phrasen wie 'Autohaus Meier' gesucht. Wenn in Ihrem
Schlüssel-Bereich die
ganze Phrase zwischen den Kommas steht,dann stimmt dar Suchbegriff mit Ihrem ganzen
Keyword überein, anstatt daß drei Schlüsselwörter passen würden, falls Sie eingetragen hätten. Dies bringt Ihre
Seite weiter nach vorne.
• Analysieren Sie Ihre Mitbewerber Sehen Sie sich den Quelltext der Internetseiten Ihrer
Wettbewerber an. Hier finden Sie sicher weitere interessante Anregungen zu Ihren
Schlüsselwörtern.
• Benutzen Sie ähnliche Suchbegriffe. Suchen Sie z.B. einmal bei einer Suchmaschine (Atavista,
Exite, Fireball, etc.) nach einem Begriff und sehen Sie sich an, welche ähnlichen Suchbegriffe
Ihnen vorgeschlagen werden. Eine gute Quelle, die Liste mit Ihren Schlüsselwörtern weiter
auszubauen.
• Kombinieren Sie Schlüsselwörter. Suchen Sie Kombinationen von Schlüsselwörtern, die in
den Suchmaschinen wenige Treffer bringen. Bei diesen Kombinationen haben Sie größere
Chancen, mit Ihren Seiten weit vorn zu landen.
• Tippfehler Bei der Eingabe von Suchbegriffe passieren Fehler. Versuchen Sie einmal, Ihre
Schlüsselwörter so schnell wie möglich einzugeben. Tippfehler werden auch Ihren Kunden
passieren. Nutzen Sie diese Chance, um bei fehlerhafter Eingabe gut zu finden zu sein.
• Frames Die Suchmaschinen werten den Inhalt Ihrer Seite auf relevante Schlüsselwörter aus.
Der Inhalt Ihrer Seite bestimmt die Position, die Ihre Seite auf eine Suchabfrage hineinnimmt.
Die Struktur Ihrer Seite und das Seitenlayout (Frames, Tabellen, Grafiken) bestimmen Ihre
Position in den Suchmaschinen. Wenn Sie auf Ihren Seiten Frames benutzen, sollten Sie bei
den Suchmaschinen eine Seite anmelden, die keine Frames hat, da einige Suchmaschinen
keine Seiten mit Frames durchsuchen können und evtl. nur die Frameset-Information
Keywords 149

analysieren und so zu einer schlechten Position für Ihre Seite kommen. Verwenden Sie
gegebenenfalls Kommentare. Setzen Sie die wichtigsten Keywords in den Seitentitel!
Beginnen Sie Ihren Seitentext mit einer Beschreibung des Inhalts, die möglichst viele
Keywords umfaßt. Verwenden Sie das ALT-Tag für Grafiken um auch hier Ihre
Schlüsselwörter unterzubringen.
Meta-Tags
Mit den Meta-Tags keywords und description können Sie den Suchmaschinen wichtige
Informationen geben. Überschreiten Sie nicht die vorgegebene Maximallänge von 1024 Zeichen für
die Keywords und entwerfen Sie eine ansprechende Beschreibung Ihrer Seite. Dies wird Ihre
Visitenkarte in den Suchmaschinen, nutzen Sie diese Gelegenheit und holen Sie die Kunden auf Ihre
Seite.
Meta-Tags sind besondere HTML Kommandos im Header Ihrer Internet Seite, die von einem Browser
nicht angezeigt werden. Die Meta-Tags enthalten Informationen über die Informationen in Ihrer Seite.
Sie können mit diesen Meta-Tags der Suchmaschine Informationen über Schlüsselwörter und eine
Beschreibung des Seiteninhaltes angeben. Nicht alle Suchmaschinen werten die Meta-Tags aus. Aber
alle wichtigen Suchmaschinen werten die Meta-Tags aus.
Sie können mit Hilfe der Meta-Tags vorgeben, wie Ihre Seite im Suchergebnis angezeigt wird und
auch Schlüsselwörter direkt vorgeben. Bis zu 200 Schlüsselwörter sind erlaubt. Sie können hier
zusätzlich auch Suchbegriffe aufführen, die nicht im Text erscheinen.
Meta-Tag keywords
Im Meta-Tag keywords können Sie die Schlüsselwörter für Ihre Seite angeben. Geben Sie hier die
Schlüsselwörter ein, die Sie im vorigen Abschnitt bestimmt haben. Achten Sie darauf, die
Schlüsselwörter nicht zu oft (mehr als sieben Mal) zu wiederholen. Einige Suchmaschinen erkennen
dies als 'spamdexing' und bestrafen Sie, indem sie Ihre Seite ans Ende der Suchergebnissse stellen.
Stellen Sie die relevanten Schlüsselwörter an den Anfang Ihres Meta-Tags. Die Schlüsselwörter am
Anfang werden höher bewertet als Schlüsselwörter am Ende der Liste. Trennen Sie die
Schlüsselwörter jeweils mit Komma voneinander und sparen Sie sich dabei das Leerzeichen nach dem
Komma! Beispiel:
Meta-Tag description
Mit dem Meta-Tag description legen Sie die Beschreibung Ihrer Seite fest. So wird Ihre Seite
dann auch von der Suchmaschine im Suchergebnis angezeigt. Die Beschreibung Ihrer Seite muß so
interessant sein, daß Ihr potentieller Kunde dem Verweis auf Ihre Seite auch folgt. Machen Sie die
Beschreibung für Ihren Kunden interessant -- nicht für die (Such-)Maschine!
Sagen Sie, warum es lohnenswert ist, Ihre Seite zu besuchen. Welchen Vorteil hat Ihr Kunde dadurch?
Ist Ihre Beschreibung ansprechend und interessant? Würden Sie selbst diese Seite nach Ihrer
Beschreibung besuchen wollen? Hilft Ihren Kunden diese Seite weiter? Begrenzen Sie Ihr Meta-Tag
description auf 150 Zeichen (Leerzeichen eingeschlossen). Längere Beschreibungen werden bei
manchen Suchmaschinen abgeschnitten. Beispiel:
Die wichtigsten META-Tags:
keywords
Webdesign
Meta-Tags 150

Unter welchen Begriffen soll man die Seite finden?
description
Beschreibung der Webseite oder des Anbieters der Seite
author
Wer schrieb die Webseite?
rating
Damit die Seite nicht unter den "Red Light District" kommt ;-)
robots
Robots von welchen Sites dürfen denn die Seite abscannen?
revisit
Wann soll der Robot denn wieder nachschauen?
Content-Type
Was für ein Zeichensatz (charset) Wird verwendet? (latein, japanisch, etc.)
Seitentitel und -text
Webdesign
sind neben den Meta-Tags die Quelle für Ihre Schlüsselbegriffe. Gerade, wenn Sie auch hier Ihre
Schlüsselworte gezielt einsetzen, können Sie Ihr Suchergebnis entscheidend verbessern. Die
Suchmaschinen bewerten Ihre Schlüsselwörter nach Position und Anteil am gesamten Text. Wenn Sie
folgendes beachten, wird Ihre Seite eine gute Bewertung erreichen:
• Bringen Sie Ihre besten Schlüsselwörter an den Anfang von Title Tag, Meta-Tags und in den
ersten Absatz Ihres Textes.
• Wie oft wird Ihr Schlüsselwort im Titel oder im Text wiederholt? Wiederholung erhöht zwar
die Relevanz Ihres Schlüsselwortes, aber einige Suchmaschinen beginnen, diese
Wiederholung zu erkennen und mit einer schlechten Position im Suchergebnis zu bestrafen.
Sie können diesem jedoch begegnen, indem Sie Ihren Text kurz halten. Damit brauchen Sie
keine Wiederholungen um den Anteil der Schlüsselwörter am Text hoch zu halten.
• Bringen Sie Schlüsselwörter zusammen, die auch sinngemäß zusammen gehören und nach
denen in dieser Kombination wahrscheinlich von Ihren Kunden gesucht wird.
• Das TITLE-Tag zeigt den Seitentitel an, der im Browserfenster erscheint. Viele Surfer
beachten diesen Text kaum, viele Suchmaschinen gewichten ihn aber. Machen Sie Ihren
Seitentitel interessant und bringen Sie Schlüsselwörter unter.
• Die Suchmaschinen sortieren die Seiten nach dem Anteil der Schlüsselwörter im jeweiligen
Dokument. Wenn Ihre Seite zum Beispiel nur die beiden Worte 'autohaus meier' enthalten
würde, wäre sie am Beginn von jedem Suchergebnis nach 'autohaus meier', da diese
Schlüsselwörter zu 100 % im Text enthalten sind. Es ist somit nicht entscheidend, wie oft ein
Schlüsselwort im Text vorkommt, sondern vielmehr wie hoch sein relativer Anteil am Text
ist. Dies trifft auch auf den Seitentitel zu.
• Schlüsselwörter in -Überschriften werden von den Suchmaschinen stärker
gewichtet. Nutzen Sie daher Überschriften im Text, um Ihren Text sinnvoll zu strukturieren.
• Auch die alternativen Bildtexte werden von den Suchmaschinen analysiert. Wiederholen Sie
auch hier Ihre Schlüsselwörter.
Seitentitel und -text 151

Optimieren Ihrer Seite
] Melden Sie Ihre Seite vorerst bei nur einer Suchmaschine an. Überprüfen Sie den Status Ihrer URL
und warten Sie, bis Ihre Seite in den Index aufgenommen wurde. Suchen Sie in der Suchmaschine
nach den angegebenen Schlüsselwörtern und prüfen, an welcher Stelle Ihre Seite gelistet wird.
Entspricht das Suchergebnis noch nicht Ihrer Erwartung, so müssen Sie Ihre Seite weiter bearbeiten.
Gehen Sie dabei wie folgt vor:
• Wird Ihre Seite überhaupt gefunden?
• Haben Sie die Schlüsselwörter im TITLE-Tag, in den Meta-Tags und im Seitentext eingefügt?
• Welche Schlüsselwörter werden von den Seiten benutzt, die vor Ihrer Seite in der
Suchmaschine rangieren?
Nun können Sie Ihre Seite bei den anderen Suchmaschinen anmelden. Sie können Anmeldedienste
z.B: von Klug Suchen (http://www.klug-suchen.de/) oder Submit It! (www.submit-it.com/) nutzen
oder aber Ihre Seite selber anmelden.
Die Suchmaschinen durchsuchen Ihre Seite automatisch. Sie bräuchten also nur Ihre Hauptseite
anzumelden. Es kann aber etwas dauern, bis alle Ihre Seiten vom Robot besucht worden sind. Melden
Sie Ihre Seiten von Hand an. So können Sie sichergehen, daß diese bald im Index der Suchmaschine
gespeichert sind. Wenn die Seite nicht mehr existiert oder die Stuktur Ihrer WWW-Seiten sich
geändert hat melden Sie Ihre Seite noch einmal bei der Suchmaschine an. Tote Links werden dann aus
dem Index entfernt.
Spamindexing
Webdesign
Mogeln kann man leider überall. Auch bei den Suchmaschinen gibt es Tricks, um zu einer besseren
Plazierung zu kommen. Aber die Suchmaschinen achten vermehrt auf diese Spam Techniken. Seien
Sie also vorsichtig, wenn Sie diese Tricks verwenden. Eventuell wird auch Ihre Seite gesperrt!
'Spamdexing' setzt sich zusammen aus den Worten 'spamming' und 'index'. Es beschreibt die Technik,
Information in eine Webseite zu schleusen, so daß die Seite von der Suchmaschine in einer guten
Position eingeordnet wird. Generell ist spamdexing das Einbringen von Informationen in Ihre Seite,
die der Benutzer nicht sehen kann, die aber das Ranking in den Suchmaschinen beeinflussen. Dafür
gibt es viele Möglichkeiten:
Wenn Sie ein Schlüsselwort mehrere hundert Male auf Ihrer Webseite unterbringen, wird die
Suchmaschine Ihre Seite in einer besseren Position anzeigen als die Seiten Ihrer Wettbewerber. Diese
Schlüsselwörter werden üblicherweise am Ende der Seite plaziert, so daß der Leser sie nicht sieht.
Oder sie werden für den Leser (nicht für die Suchmaschine) unsichtbar gemacht (Textfarbe =
Hintergrundfarbe, kleinste Schriftgröße). Ein Kommentar wird auf Ihrer Webseite nicht angezeigt,
jedoch von den Suchmaschinen ausgewertet. Stellen Sie an den Anfang der Seite einige Zeilen
Kommentar mit Ihren Schlüsselwörtern.
Die meisten Suchmaschinen erkennen spamdexing und so werden z. B. Seiten mit auffallender
Wiederholung von Schlüsselwörtern ans Ende des Suchergebnisses gesetzt. Generell gibt es aber wohl
immer Möglichkeiten, bei den Suchmaschinen zu mogeln. Dies lohnt sich aber immer weniger, weil
der Aufwand immer höher wird.
Weitere Informationen finden Sie im Skript Suchen im Internet.
Zum vorhergehenden Abschnitt Zum Inhaltsverzeichnis Zum nächsten Abschnitt
Optimieren Ihrer Seite 152

Copyright © FH München, FB 04, Prof. Jürgen Plate
Letzte Aktualisierung: 02. Jun 2012
Webdesign
Webdesign
von Prof. Jürgen Plate
Spamindexing 153

Skript-Sprachen
Über Bilder, Animationen, VRML hinaus kann in Webseiten auch Programmcode für Interaktionen
mit Formularen oder zur direkten Ausführung durch den Benutzer eingefügt werden. Typische
Vertreter sind Programmiersprachen wie Java, JavaScript oder ActiveX. Neuestes Lieblingskind der
"Zappel-Fraktion" ist FLASH, denn hier wird Interaktion und Animation vereint.
Java
In Java wurden zum zum einen erfolgreiche Konzepte aus bereits bestehenden Sprachen (z.B. C, C++,
Smalltalk, Eiffel, Ada, Objectiv-C) übernommen, zum anderen neue Konzepte verwirklicht.
Java ist eine junge Interpretersprache, die viele mächtige Konzepte in sinnvoller Weise integriert. Sie
völlig objekt-orientiert, interpretiert, einfach, architekturneutral, portabel und sicher. Eine gute
Performance kann durch Multithreading und optionalen Nativecode erreicht werden. Ausgiebige
Compilierzeitüberprüfungen und strikte Laufzeitckecks garantieren ein robustes und sicheres
Verhalten der Applikationen. Sie kann somit neben der Möglichkeit des schnellen Prototyping als eine
stabile Basis für verteilte und erweiterbare Systeme dienen.
Die wesentlichen Gesichtspunkte sind:
• Objektorientiert
• Eigenschaften
• Architekturunabhängig und portabel
• Robustheit
• Multithreading
• Garbage Collection
• Sicherheit
Java ist objektorientiert
Java ist vollkommen object-orientiert. Jede objekt-orientierte Sprache sollte Minimum der folgenden
Charakteristiken in sich haben:
• Encapsulation: Informationen (oder genauer Attribute und Methoden) werden gekapselt, d.h.
konkrete Implementierung und Strukturen sind f&uumr den Anwender nicht sichtbar.
Lediglich Funktionalit&t und Interface eines Objektes werden bekanntgegeben.
• Inheritance: Subklassen "erben" Inhalte von Klassen
• Dynamic binding: ermöglich ein Maximum an Flexibilität zur Laufzeit
All diese Anforderungen werden von Java in hohem Maße erfüllt. Es werden sogar zusätzlich weitere
runtime-features geboten, die die Software-Entwicklung einfacher machen können.
Wichtige Begriffe in diesem Zusammenhang die auch in Java vorkommen sind:
Klassen: Definiert Attribute und Methoden
Object : instanzierte Klasse
Message: Aufruf einer Methode eines anderen Objektes
Constructor:
Methode, die die Initialisierung eines einer Klasse instanzierten Objektes
vornimmt
Destructor: Gegenstück zum constructor.
Skript-Sprachen 154

Access Control:
Abstract
Methods:
Bei der Deklarierung einer Klasse können Attribute und Methoden mit
verschiedenen Zugriffsleveln (public, protected, private, friendly) versehen
werden.
Methoden, die in einer Klasse deklariert werden, deren Implementierung aber erst
in einer Subklasse erfolgt.
Packages: Java-konstrukt, das eine Sammlung von zusammengehörenden Klassen bildet.
Wichtige Eigenschaften von Java
• Objektorientierung
• Multithreading
• Robustheit
• Sicherheit
• Erweiterbarkeit
• Plattformunabhängigkeit
Was Java hat
• import: vergleichbar dem IMPORT von Modula-2.
• interface: ein geschickter Ersatz für die Mehrfachvererbung.
• Garbage Collection
• Verbesserte Ausnahmebehandlung
• Wohldefinierte Klassenhierarchie
Eigenschaften, die nicht von C oder C++ übernommen wurden:
• In Java gibt es keine Präprozessor-direktiven (wie z.B. #define) mehr.
• Es gibt keine Headerfiles, dafür aber interfaces, die die Definition anderer Klassen und deren
Methoden beinhalten.
• Multiple Inheritance wurde durch Interfaces ersetzt, die Methodendefinitionen von Klassen
gleichgesetzt werden können.
• Kein "goto"-statement (definiert, aber nicht implementiert).
• Kein Operator-overloading.
• Keine Pointer.
• Keine Typdefinitionen.
• Keine Variante Records (union).
• Keine generische Typen (templates).
• Keine Mehrfachvererbung.
• Keine vorzeichenlose Zahlentypen.
• Keinen direkten Hardwarezugriff.
Java ist architekturunabhängig und portabel
Durch die Verwendung von byte-code im Gegensatz zum Binärcode ist Java völlig architekturneutral.
Java-Programme lassen sich auf allen Plattformen ausführen, auf welche die Virtual Machine portiert
wurde. Portierungen werden durch die strikte Sprachspezifikation unterstützt.
Java ist robust
Webdesign
Java ist eine Sprache, die gedacht ist für robuste, zuverlässige und sichere Applikationen. Um dies zu
erreichen wird ein striktes compile-time checking durchgeführt, das es ermöglicht Syntaxfehler früh
zu entdecken. Java ist eine sehr typorientierte Sprache. Viele C-Freiheiten, wie etwa implizite
Java ist objektorientiert 155

Deklaration von Funktionen sind nicht erlaubt. Besondere Stützen der Robustheit sind die
Abschaffung von Pointern, die Verwendung von echten Arrays, ein Speichermodell, das die
unerlaubte Überschreibung von Speicherbereichen verhindert und strengere Casting-Regeln.
Java ist multithreaded
'Multithreaded programming' ist in den meisten bisherigen Programmiersprachen sehr oft ein
schwieriges (oft sogar unmögliches) Unterfangen. Java stellt zur Programmierung und Verwaltung
von threads eine eigene Klasse zur Verfügung. Von dieser können threads als ein neues Objekt
instanziert werden. In ihr werden Methoden zum Starten, Stoppen und Abfragen des Statuses des
threads bereitgestellt.
Die größten Probleme tauchten bisher bei der Synchronisation der threads und bei der Vermeidung
von deadlocks auf. Java stellt eine Menge von synchronization primitives zur Verfügung, die im
Wesentlichen auf das von C.A.R. Hoare eingeführte monitor and condition variable-Paradigma
basieren.
Java stellt eine auf Sprachebene integrierte Multithreadingunterstützung bereit. Damit können
Methoden auf einfache Weise synchronisiert und das Problem der concurrency gelöst werden.
Methoden laufen dann unter Aufsicht eines 'Monitors', der sicherstellt, daß Variablen in einem
konsistenten Zustand bleiben.
Java hat einen Garbage Collector
Java hat einen integrierten Garbage Collector, der als ein Hintergrundthread mit niederer Priorität
implementiert ist. Der GC dealloziert Objekte, die nicht mehr referenziert werden. Bei der
Programmierung äussert sich dies darin, dass Objekte nicht explizit dealloziert werden müssen (z. B.
im Destructor). Letzteres ist zwar möglich, aber es entscheidet der GC.
Java ist sicher
Webdesign
Bereits bei der Konzeption von Java wurden grundlegende Überlegungen bezüglich der Sicherheit
angestellt. Der Java-Compiler und das Laufzeitsystem integrieren mehere Abwehrschichten gegen
potentiell gefährlichen Code. Am wichtigsten ist sicherlich das Speicherallozierungs- und
-referenzierungsmodell. Entscheidungen über die Speicherbelegung werden nicht vom Compiler (wie
in C oder C++), sondern erst zur Laufzeit vorgenommen. Intern verwendet Java sogenannte 'handles'
die zur Laufzeit in physikalische Addressen aufgelöst werden. Dies geschieht sehr spät und z. T. auch
abhängig von der Architektur, jedoch völlig transparent für den Programmierer.
Was passiert, wenn gefährlicher Code auf einen Server generiert und zur Laufzeit auf dem client
ausgeführt wird? Obwohl der Java-Compiler beim übersetzen das Einhalten von bestimmten
Sicherheitsregeln garantiert, bleibt er natürlich machtlos, wenn Code-Fragmente zur Laufzeit
on-the-fly gelinkt werden. Wie kann also das Laufzeitsystem dem hereinkommenden byte-code stream
vertrauen, der vielleicht von einem nicht vertrauenswürdigen Compiler erzeugt wurde? Die Antwort
ist einfach: Java traut dem Code nicht und unterwirft ihn deshalb dem
byte-code-Verifizierungsprozeß. Dieser beinhaltet eine Reihe von sinnvollen, restriktiven
Maßnahmen. Darunter sind einfache Typüberprüfungen, Ausklammerung von Pointern, Ausschluß
von Stack-Über- und -Unterläfen, strikte Parameterüberprüfung, strikte Typkonvertierungen,
Überprüfung der Speicherzugriffsrestriktionen. Weiter wird getestet, daß Objekte wirklich nur als
solche verwendet werden.
Java ist robust 156

Daten- und Kontrollfluß vom Java-Quellcode bis zur Ausführung.
Trotz der ausgedehnten Verifizierungsprozeß bleibt Java (laut Sun) immer noch schnell genug, da der
Java-Interpreter von jeder weiterer Überprüfung hinsichtlich der Sicherheit befreit ist und damit mit
vollen Geschwindigkeit arbeiten kann.
Weitere Sicherheitsaspekte sind im Java Networking Package implementiert, welches es erlaubt
verschiedene Sicherheitsebenen zu konfigurieren. Diese sind:
• alle Netzwerkzugriffe sind verboten
• Alle Netzwerkzugriffe sind erlaubt
• Netzwerkzugriffe sind nur jenen hosts erlaubt, von denen der Code importiert wurde
• Netzwerkzugriffe sind auf Zugriffe außerhalb des Firewalls beschränkt, wenn der Code von
dort kommt.
Zum Weiterlesen über Java ein Vortragsmanuskript von Antje König.
Wer sich für Java interessiert, findet Java-Seiten mit vielen Demos, den HotJava-Browser (für SUNs)
und Java-Entwicklersoftware auf dem Server von SUN Microsystems unter http://java.sun.com.
Active-X
Microsoft will mit eigener Internet-Technologie Standards setzen und hat, gewissermaßen als
Konkurrent zu Java, seine Active-X-Technik entwickelt. Active-X ist eine Microsoft-Technik zur
Erzeugung interaktiver Web-Seiten mithilfe von Controls, Skripts und Softwarepaketen, wie zum
Beispiel Textverarbeitungen und Tabellenkalkulationen.
Was ist Active-X?
Webdesign
Ein Active-X-Control ist ein kleines Windows-Programm, das sich nur mit Hilfe eines Web-Browsers
ausführen läßt. Wenn Sie im Internet auf eine mit einem Active-X-Control ausgestattete Seite
kommen, werden nicht nur Text und bunte Bilder angezeigt, sondern auch ein Programm auf Ihren
Rechner geladen und ausgeführt. Im ungünstigsten Fall merken Sie gar nicht, daß ein
Java ist sicher 157

Active-X-Control in eine Web-Seite eingebunden ist und automatisch ausgeführt wird, während Sie
die Seite anschauen und sich in trügerischer Sicherheit wähnen.
Der Sinn von Active-X ist aus Sicht von Microsoft:
• Applikationen in Web-Browser einzubinden
• Den Web-Browser zur Schaltzentrale für Internet und Intranet zu machen
Die Active-X-Technologie besteht aus folgenden Komponenten:
• Active-X-Controls
• Active-X-Scripting
• Active-X-Dokumente
• Active-X-Conferencing
• ActiveMovie
Active-X-Controls
sind Elemente wie Schaltflächen, Listboxen, Bildlaufleisten usw., die auf Web-Seiten plaziert und dort
benutzt werden können. Dadurch wird ein hoher Grad an Interaktion mit dem Anwender erreicht.
Active-X-Scripting
Active-X-Controls werden mit sogenannten Skripts gesteuert. Skripts sind Programme, die in
HTML-Seiten eingebaut und somit für jedermann lesbar sind. Skriptsprachen sindVisual-Basic-Script
(VB-Script) und Java-Script.
Active-X-Dokumente
Sie funktionieren wie OLE-Verbunddokumente. Ein Browser (Container) kann zum Beispiel ein
Excel-Sheet anzeigen (Excel ist dann der Server), ohne das man den Browser verlassen muß - sofern
man Excel hat. Man kann so Dokumente ganz verschiedener Formate in das Netz posten und jeder,
der auch den entsprechenden Server hat, kann sie betrachten. Damit wird aber der Nutzerkreis aber auf
die Anwender von Microsoft-Produkten eingeschränkt und die gemeinsame Sprache des WWW,
HTML, ausgegrenzt.
Active-X-Conferencing
Eine Kommunikations-Technik, die noch in der Entwicklung ist. Active-X-Conferencing erlaubt die
Anwendung einer Software, die auf einem einzigen Rechner läuft, durch mehrere Personen
gleichzeitig, die über ein Netzwerk verbunden sind. Dieses Netzwerk kann das Internet aber auch das
Intranet sein. Damit sich die teilnehmenden Personen auch von "Mensch zu Mensch" unterhalten
können, während sie gemeinsam eine Software steuern, gibt es eine Voice-Verbindung. Diese
Voice-Verbindung funktioniert bisher aber nur zwischen zwei Teilnehmern. Für die Zukunft ist auch
eine Video-Verbindung geplant.
ActiveMovie
Webdesign
Zur Übertragung von Audio und Video-Daten über Netze gibt ist ActiveMovie. ActiveMovie soll
ermöglichen, daß die Audio- und Video-Daten nicht erst komplett auf den eigenen Rechner geladen
werden müssen bevor man sie abspielen kann (was unter Umständen ziemlich lange dauern kann),
sondern die Übertragung erfolgt in Echtzeit. Voraussetzung ist natürlich, daß die Verbindung schnell
genug ist.
Was ist Active-X? 158

Gefahren von Active-X
Im Gegensatz zu Java lauern hier Gefahren für den Computer des Websurfers. Hinter einem
Active-X-Control verbirgt sich ja nichts anderes als ein normales Windows-Programm. Es kann also
alles tun, was auch jedes andere Windows-Programm tun kann: Daten von Ihrer Festplatte übers Netz
versenden, Viren installieren - oder einfach nur die Festplatte formatieren. Active-X-Programme sind
also ein Risikofaktor und sollten nur unter bestimmten Voraussetzungen eingesetzt werden.
Der Chaos Computer Club demonstrierte der Öffentlichkeit die Risiken von Active X: Die Hacker
programmierten ein Active-X-Control, das der Finanz-Software Quicken einen Überweisungsauftrag
unterjubelte. Der Auftrag wurde so gespeichert, daß er beim nächsten T-Online-Connect automatisch
ausgeführt würde.
Active-X-Programme laufen derzeit nur mit dem Microsoft Internet-Explorer ab Version 3. Damit
Active-X-Controls mit einem Netscape-Browser funktionieren, muß man ein spezielles
Active-X-Plug-in installieren.
Beim Installieren von Active-X-Komponenten wird manchmal ein 'Zertifikat' angezeigt. Wer
Active-X-Programme schreibt, kann sich ein solches 'Zertifikat' besorgen, das nach dem Laden der
Webseite angezeigt wird. Dieses Zertifikat soll garantieren, daß das Active-X-Control wirklich im
Originalzustand vorliegt. Gewährleistet wird das durch eine verschlüsselte Quersumme, die beim
Herausgeber des Zertifikats hinterlegt ist und die mit der des Programms verglichen wird. Ein gültiges
Zertifikat heißt jedoch keinesfalls, daß Sie einem Active-X-Control blind vertrauen können. Der
bisher einzige Zertifizierer, Verisign Commercial Software Publishers CA, prüft nicht, was ein
Active-X-Control auf einem Rechner anstellt, sondern nur, ob das Programm nach der Zertifizierung
verändert wurde. Nachdem jeder sein Active-X-Control zertifizieren lassen kann, besteht auch die
Möglichkeit, daß gefährliche oder schädliche Active-X-Controls ein Zertifikat bekommen. Dabei muß
nicht einmal böse Absicht des Programmierers im Spiel sein, denn "Man soll nie Absicht vermuten,
wo Dummheit als Begründung ausreicht." Insofern hat das Zertifikat höchst zweifelhaften Wert.
Wird auf einer Webseite ein Zertifikat angezeigt, hängt es davon ab, wo Sie sich befinden: Handelt es
sich um eine renommierten Firma, können Sie ein zertifiziertes Active-X-Control ohne großes Risiko
installieren. Befinden Sie sich dagegen auf einer privaten oder halbprivaten Seite, sollten Sie auch mit
zertifizierten Komponenten sehr vorsichtig sein. Programmierfehler können sich natürlich auch in
Controls großer Unternehmen befinden.
Wie erfahre ich, welche Active-X-Controls schon auf meinem PC sind?
Wenn Sie schon massenhaft Active-X-Controls auf Ihrer Platte haben, hilft die Freeware
'Active-XCavator'. Sie listet alle installierten Controls einschließlich diverser Dateiinformationen
(Verzeichnis, Größe) auf und kann auch einzelne Controls löschen. Das Programm gibt es unter
http://www.winmag.com/software/xcavate.htm.
JavaScript
Zu dieser Sprache gibt es ein eigenes Skript: Clientseitige Interaktion: JavaScript.
Zum vorhergehenden Abschnitt Zum Inhaltsverzeichnis Zum nächsten Abschnitt
Copyright © FH München, FB 04, Prof. Jürgen Plate
Webdesign
Gefahren von Active-X 159

Webdesign
Webdesign
von Prof. Jürgen Plate
Webdesign 160

Literatur zur Grafik
Anhang
J. O. Murray, W. van Ryper: G. Born:
'Encyclopedia of Graphics 'Referenzhandbuch Dateiformate'
File Formats' Addison-Wesley
O'Reilly
Thomas W. Lipp: L. Maffei/A. Florentini:
'Die große Welt der 'Das Bild im Kopf'
Grafikformate' Birkhäuser Verlag
Synergy-Verlag
Peter Kentie:
'Web Graphics'
Addison-Wesley
Literatur zu HTML
Mary E. S. Morris: Larry Aronson:
'HTML - WWW effektiv nutzen' 'HTML Manual of Style'
Heise-Verlag Ziff Davis
Laura Lemay: Frederik Ramm:
'Teach Yourself Web Publishing 'Recherchieren und Publizieren
with HTML in a Week' im World Wide Web'
Sams Publishing Vieweg-Verlag
David Siegel: Simone Demmel:
'Web Site Design' 'Web-Design: HTML-Seiten durchdacht gestalten'
Verlag Markt & Technik Pflaum-Verlag
Middleton/Deng/Kemp: Andreas Niessner:
'Web-Programmierung mit Perl' 'VRML-Praxis'
Verlag Markt & Technik Pflaum-Verlag
Weinmann/Weinmann: David Siegel:
'creative html design.2' 'Web Site Design'
Markt & Technik Markt & Technik
Jakob Nielsen: Jeffrey Veen:
'Designing Web Usability' 'Web Design - Konzept, Gestalt, Vision'
Markt & Technik Markt & Technik
Stephan Lamprecht: E. Heindl/K. Maier:
'WebDesign-Handbuch' 'Der Webmaster'
Hanser-Verlag Addison-Wesley
Michael Baumgardt:
'Web Design kreativ!'
Springer Verlag
Deutschsprachige HTML-Beschreibungen im Netz
• HTML-Dateien selbst erstellen, von Stefan Muenz (Compuserve)
(http://www.teamone.de/selfhtml/)
• HTML-Einführung, von Hubert Partl (BOKU Wien)
(http://www.boku.ac.at/htmleinf/)
Download-Version
Anhang 161

(ftp://mail.boku.ac.at/www/hein.tar.gz)
PostScript-Version
(ftp://mail.boku.ac.at/www/htmleinf.ps.gz)
• HTML-Kurzbeschreibung, von Hubert Partl (BOKU Wien)
(http://www.boku.ac.at/htmleinf/hkurz.html)
Download-Version
(ftp://mail.boku.ac.at/www/hein.tar.gz)
PostScript-Version
(ftp://mail.boku.ac.at/www/hkurz.ps.gz)
• HTML-Einführung von Dierk Lucyga (Uni Konstanz)
(http://www.uni-konstanz.de/org/provider/html.html)
• Deutsche Version des Bare Bones Guide von Kevin Werbach (USA)
(http://werbach.com/barebones/gerippe-eingang.html)
Zum Inhaltsverzeichnis
Copyright © FH München, FB 04, Prof. Jürgen Plate
Webdesign
"Multimedia im Internet
von Prof. Jürgen Plate
Deutschsprachige HTML-Beschreibungen im Netz 162

Verzeichnisse
Links für Webmaster
Alles gratis http://www.heise.de/ct/99/04/112/bookmarx.htm Linkliste zum Artikel in c't
4/99, S. 112
Tipps und Tricks http://www.heise.de/ct/tipsundtricks/cttt4.shtml#4_2 c't-Tipps-und-Tricks-Sammlung
kresch.com http://www.kresch.com/ The informed Netizens s
Choice
Dr. Web http://www.ideenreich.com/drweb.shtml Webmaster-Portal,
Freeware-Ressourcen
internet.com http://www.internet.com/ Ein ganzes Netz von Sites zum
Thema Internet-Entwicklung
DevSearch http://www.devsearch.com/ Suchmaschine für
WWW-Entwickler
kostenlos.de http://www.kostenlos.de/internet/ Verzeichnis kostenloser Dienste
und Freeware
kosten.de http://www.kosten.de Metaverzeichnis kostenloser
Dienste und Freeware
Freeware Wizard http://www.freewarewizard.de/ Gut sortiertes
Freeware-Verzeichnis
Webmaster
Ressources
http://www.webmaster-resources.com/resources/ Verzeichnis von kostenlosen
Webmaster-Ressourcen
No Nags http://www.nonags.com Gut sortiertes
Freeware-Verzeichnis
HTML-Editoren- und Tools
BBEdit Light http://www.barebones.com/free/free.html HTML-Editor für MacOS
Arachnophilia http://www.arachnoid.com/arachnophilia/ Leistungsfähiger Code-basierter
HTML-Editor
Phase 5 http://www.meybohm.de/ Vielseitiger Code-basierter
HTML-Editor
Colormat http://www.yaromat.com/colormat/main.htm# Werkzeug zur Farbauswahl für
die Homepage
CSE HTML
Validator
http://www.htmlvalidator.com/lite/ Light-Version des
HTML-Checkers
SelfHTML http://www.teamone.de/selfhtml/ Ausführliche HTML-Referenz,
auch zum Download
Banner, Grafiken, Layout
Clipart.com http://www.clipart.com/ Verzeichnis von Clipart-Sites
freegraphics.com http://www.freegraphics.com/ Verzeichnis von Clipart-Sites
Cooltext http://www.cooltext.com/ Bannergenerator, Buttons und
Bulletts
GIFWorks http://www.gifworks.com/ Eine ganze Reihe von
Online-Tools
Links für Webmaster 163

Coder.com http://coder.com/creations/banner/banner-form.pl.cgi Vielseitiger Banner-Generator
1&1
Banner-Generator
http://www.banner.de/ Komfortabler Banner-Generator
Gif Optimierer http://webszene.com/freeware/download/gifopt.zip Speckt GIFs für s Web ab
JPEGCruncher http://www.jpegcruncher.com/ Speckt JPEGs für s Web ab
WebUtilities http://www.webutilities.com/stuff.htm Diverse Freeware-Programme
und Online-Tools von Ulead
GIMP http://www.gimp.org Leistungsfähiges
Bildbearbeitungsprogramm
CGI, Javascripts, Chats, Foren, Inhalte, etc.
cgi-ressources.com http://www.cgi-resources.com/ Über 2000 Programme und
Skripte
cgi-service.de http://www.cgi-service.de/ Hosten eigener CGI-Skripte
ScriptSearch http://www.scriptsearch.com/ Perl, JavaScript, C++ etc.
javascript world http://www.jsworld.com/ Scripts, Tipps, Tutorials
Delphi Forums http://www.delphi.com/ Forum zum Einbau in
Homepage
Beseen.com http://www.beseen.com Chat-Raum, Forum
chatset.web.de http://chatset.web.de IRC-Chat für die Homepage
Expediamaps http://www.expediamaps.com/maps-on-your-site.asp Karten zum Einbinden in die
Homepage
Web Site Search
Tools
http://www.searchtools.com/searchtools.html Suchmaschinen für alle Zwecke
Freefind.com http://www.freefind.com/ Suchmaschine für die
Homepage
Site-Management
SiteOwner http://www.siteowner.com/ Online-Dienst für die
Homepage-Wartung
NetMechanic http://www.netmechanic.com/ Power Tools for your Web
Site
Fritz-Servive http://www.fritz-service.com/de/ Ladezeit-, Link-, HTML-Check,
Suchmaschineneintragung
Xenu s Link
Sleuth
Webdesign
http://www.snafu.de/~tilman/xenulink.html Zuverlässiger Link-Checker
Astra Site Manager http://www.merc-int.com Grafischer Link-Checker
NetWhistle http://netwhistle.com/ Läuft der Server noch?
Uptime http://uptime.arsdigita.com/uptime/about.tcl Server-Monitor
WS FTP LE 4.6 http://www.tucows.de/ftp95.html ftp-Client für Windows 9x
Netclone http://www.progmatics.com.au/netclone/ ftp-Client für MacOS
Banner, Grafiken, Layout 164

E-Mail-Adressen
Free Email
Address Directory
http://www.emailaddresses.com/ Verzeichnis kostenloser
E-Mail-Dienste
HotMail http://www.hotmail.com Freemail mit Integration in
Outlook Express
GMX http://www.gmx.net Freemail mit POP-Zugang
Freemail.web.de http://freemail.web.de/ verschlüsselte Freemail
Copyright © FH München, FB 04, Prof. Jürgen Plate
Webdesign
E-Mail-Adressen 165

Standard-216-Farben-Tabelle
Hinweis: Der Browser muß Tabellen mit Hintergrundfarben unterstützen, damit man die
Farben auch sieht!
Jede dieser Farben wird vom Netscape Navigator oder vom MS-Internet-Explorer problemlos
dargestellt.
Farben des Standard-6X6-Farbkubus
RGB Farbwerte
3366FF6666FF9966FFCC66FFFF9900009900339900669900999900CC9900FF9933009933339933669933999933CC9933FF9966
Standard-216-Farben-Tabelle 166