Aus: Mac MAGAZIN #10 (8/95), Seite 40f.
Paradoxerweise gibt's auf dieser Seite keine Bilder, aufgrund von Konvertierungsproblemen. Sorry ... ;-/

Visuelle Akzente

Die Grundprinzipien der Web-Sprache HTML haben wir im Mac MAGAZIN 7/95 vorgestellt. Ab jetzt geht's ans Eingemachte. Bernd Wendorf plaudert aus dem Nähkästchen des Web-Webers.

Das Web-Weben hat viel mit Design und Layout zu tun: Das A und O für den ersten Eindruck, den eine Home Page beim Besucher hinterläßt, ist ein originelles und unverwechselbares Erscheinungsbild. Die inhaltliche Ausgestaltung ist eigentlich der wichtigere Teil des HTML-Dokuments, aber was ist schon ein interessanter Inhalt wert, der sich in dröger Form präsentiert.

Die Kunst besteht darin, die Ressourcen, die der Besucher der Seite auf seinen Rechner via Datenübertragung herunterladen muß, möglichst gering zu halten: Weniger ist (manchmal) mehr. Viele Surfer verfügen lediglich über eine Modem-Verbindung mit 14.400 bps; das bedeutet, Sie müssen Ihre kreative Phantasie in speichersparende Dateien investieren. Nichts ist ärgerlicher für den Betrachter als das Warten auf den Bildschirmaufbau, wenn er große Grafiken herunterlädt.

In Ihre Überlegungen sollten Sie auch miteinbeziehen, daß der Anwender möglicherweise die Darstellung der Bilder in seinem Browser deaktiviert hat. Zum einen ist deshalb immer ein "Alternativ-Text" angebracht, zum Beispiel: <IMG SRC="bild.gif" ALT="Dieses nette kleine Bild sollten Sie sich nicht entgehen lassen">. Zum anderen sollte man in erster Linie auf nicht abschaltbare Elemente zurückgreifen; die Definition einer Hintergrundfarbe ist daher ein sehr brauchbares Stilmittel.

Kulissenschieber

Betrachten Sie den Hintergrund, auf dem die Web-Seite dargestellt wird, als Kulisse für Ihre "Aufführung". Die Standard-Einstellung Hellgrau ist dezent und mag ganz praktisch sein, aber es kann nicht schaden, wenn man in dieser Hinsicht einen originellen Akzent setzt.

Innerhalb eines HTML-Dokuments wird die Hintergrundfarbe mit dem Befehl BGCOLOR (BG für BackGround), direkt hinter dem Tag BODY, definiert. Sie möchten ein knalliges Gelb als Web-Kulisse? Dann sieht der Befehl in der Quelldatei so aus: <body bgcolor= "#FFFF00">. Das Nummerzeichen (#) ist dabei unentbehrlich, ebenso wie der Tag </body> am Ende des Dokuments (siehe "Basiselemente").

Voraussetzung, daß Ihre Farbgestaltung das Auge des Anwenders erreicht, ist, daß dieser es zuläßt, seine individuelle Einstellungen überschreiben zu lassen (in Netscape unter General Preferences/ Fonts respektive Colors). Da hier auch die Farbe der Textdarstellung dem einzelnen Surfer freigestellt ist, empfiehlt es sich, die Texte ebenfalls farblich zu definieren und auf den gewählten Hintergrund abzustimmen (hinter der Angabe BGCOLOR: TEXT="#..." LINK="#..."). Wenn der Betrachter das "Overriding" nicht zuläßt, hat er eben Pech gehabt ...!

Farbspielereien

Farbe im Web ist wie das Salz in der Suppe. Aber Obacht: Mischen Sie nicht zu viele Farben, hüten Sie sich vor zu viel Experimentierfreude; zwar ist alles Geschmackssache, aber Sie sollten die Zielgruppe, die Sie als Leser Ihrer Web-Seite vor Augen haben, nicht mit visuellen Reizen überfordern! "Hip" und schrill kann sehr originell sein, aber nicht jeder kann etwas mit avantgardistischem Kommunikationsdesign anfangen ... Neben den Farben, die in der Tabelle "Farbspezis" aufgeführt sind, können Sie prinzipiell jede der theoretisch möglichen Millionen von Farben durch die Angabe des entsprechenden Hexadezimalcodes auswählen. Das Umrechnen der Dezimalzahlen für die RGB-Farbwerte in einem Bildverarbeitungsprogramm läßt sich dabei nicht vermeiden.

Ein Bild sagt mehr als tausend Worte

Wenn Farbe das Salz in der Web-Suppe ist, sind Bilder die Sahne, die das Mahl zum Hochgenuß machen. Aber auch hier gilt: Weniger ist mehr. Nicht jeder verfügt über einen ISDN-Zugang zum Internet, Grafiken über 100 K sind (derzeit noch) fehl am Platze. Verwenden Sie im Zweifelsfall lieber ein Schwarzweißfoto, dessen Motiv den Betrachter in den Bann zieht, als eine aufwendige Farbgrafik, deren schleppender Bildaufbau am Rechner für Unmut sorgt.

Interlaced und transparent

GIF ist das Standardformat, in dem Sie Bilddateien in HTML-Dokumente einbinden. Um die Darstellung grafischer Elemente beim Adressaten zu optimieren, sollten Sie die Bilder transparent machen und als "interlaced" abspeichern. Beide Funktionen führt das Shareware-Programm clip2gif zur vollsten Zufriedenheit aus.

Durch die Transparenz vermeiden Sie, daß das eigentliche Motiv auf einer absolut störenden, eckigen Weißfläche dargestellt wird; statt dessen erscheint der Hintergrund des Web-Browsers. "Interlaced" (wörtlich: verflochten, durchwirkt) bedeutet, daß der Betrachter sofort eine grobe Abbildung auf seinem Monitor zu Gesicht bekommt, dessen Auflösung in der Folgezeit innerhalb mehrerer "Decodierungsstufen" optimiert wird. Auf diese Weise wird die Geduld des Betrachters weniger auf die Probe gestellt als bei den herkömmlichen Verfahren, das das Bild Zeile für Zeile abarbeitet.




--- Ende des Artikeltextes ---
+++ Zurück zum Web KomPass +++

MacDuden

HTML

ist die Abkürzung für HyperText Markup Language. Die Dokumente, auf die der Surfer mit Netscape (oder einem anderen Web-Browser) zugreift, sind in dieser simplen Programmiersprache abgefaßt.
(Siehe auch Artikel Web yourself!)

(Zurück zum Text)

Hexadezimalsystem

ist - vereinfacht ausgedrückt - eine Vereinbarung über die Schreibweise von Zahlen. Während das Dezimalsystem auf zehn Zahlen (0 bis 9) und das Dual- oder Binärsystem auf zwei (0 und 1) beruht, ist die Grundzahl des Hexadezimalsystems die 16. Verwendet werden die Zahlen 0 bis 9 sowie die Buchstaben A bis F (A steht für 10, B für 11 et cetera).

(Zurück zum Text)

GIF

steht für "Graphic Interchange File". Dieses Format zum Austausch von Bilddateien hat sich im Internet als Standard etabliert.
In der neuesten Version von Photoshop kann der Anwender Bilder direkt in diesem Format abspeichern; Nicht-Photoshopper wandeln Ihre Bilder mit Hilfe des Shareware-Programms "Grafikkonverter" in dieses Format um. (Im Ordner "Service" auf der aktuellen Mac MAGAZIN-CD finden Sie die neueste Version)
Für das Erzeugen transparenter GIFs empfehlen wir das Shareware-Programm clip2gif.

(Zurück zum Text)


Farbspezis

In der Welt der Bits und Bytes lassen sich auch Farben in Zahlen ausdrücken. Genauer gesagt: In HTML-Dokumenten werden Farben durch einen sechsstelligen Hexadezimalcode definiert, der den Angaben der Werte für Rot, Grün und Blau (RGB) entspricht. Eine Liste von Definitionen finden Sie unter

http://www.infi.net/wwwimages/colorindex.html

Hier eine kleine Auswahl:
Schwarz: #000000
Weiß: #FFFFFF
Rot: #FF0000
Grün: #00FF00
Blau: #0000FF
Cyan: #00FFFF
Magenta: #FF00FF
Gelb: #FFFF00
Braun: #A62A2A
Orange: #FF7F00
Grau: #C0C0C0
Gold: #CD7F32
Silber: #E6E8FA
Bronze: #8C7853
Kupfer: #B87333
Pink: #BC8F8F
Lachs: #6F4242
Khaki: #9F9F5F
Lila: #4F2F4F
Türkis: #ADEAEA
Himmelblau: #3299CC

(Zurück zum Text)


Basiselemente jedes HTML-Dokuments sind folgende Tags:

<html>
<head>
<title>...</title>
</head>
<body>...</body>
</html>

Die Definition einer Hintergrundfarbe erfolgt immer im Zusammenhang mit dem Tag <body>. Wenn Sie möchten, daß der Besucher Ihrer Home Page einen weißen Hintergrund zu Gesicht bekommt, sieht das im Ursprungsdokument folgendermaßen aus:

<BODY BGCOLOR="FFFFFF">

(Zurück zum Text)



+++ Zurück zum Web KomPass +++