This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Ulrike Hagler Media Engineering Augustinusstr. 11e 50226 Frechen-Kbnigsdorf [email protected]
ISSN 1439-3107
Additional material to this book can be downloaded from http://cxtras.springcr.com. ISBN 3-540-42971-9 Springer-Verlag Berlin Heidelberg New York Blbliograflsche Inform ation Der Deutschen Bibiiothek Die Deutsche Blbliothek verzeichnet diese Publikatlon In der Deutschen Nationalbibliografie ; detaililerte bibliograflsche Daten sind im Internet uber abrufbar.
Dieses Werk ist urheberrechtli ch geschOtzt. Die dadurch begrOndeten Rechte , Insbesondere die der Obersetzung, des Nachdrucks, des Vortrags, der Entnahme von Abblldungen und Tabellen, der Funksendung, der Mikroverfilmung oder der Vervlelfaltigung auf anderen Wegen und der Speicherung In Datenverarbeitungsaniagen, bleiben , auch bei nur auszugs welser Verwertung, vorbehalten. Eine Vervielfaltigung dieses Werkes oder von Teilen dleses Werkes 1st auch 1m Einzeifall nur in den Grenzen der gesetzlichen Bestimmungen des Urheberrechtsgesetzes der Bundesrepublik Deutschland vom 9 . September 1965 in der jewells geltenden Fassung zulassig . Sie 1st grundsatzllch vergOtungspflichtig. Zuwiderhandlungen unterli egen den Strafbe stimmungen des Urheberrechtsgesetzes. Der Springer-Verlag 1st nlcht Urheber der Daten und Programme . Weder der Springer-Verlag noch der Autor Obernehmen Haftung fur die CD-ROM und das Buch, emschuesuch ihrer Qualltat , Handels- oder Anwendungseignung. In keinem Fall Obernehmen der Springer-Verlag oder der Autor Haftung fur direkte, indlrekte, zufallige oder Foigeschaden , die slch aus der Nutzung der CD-ROM oder des Buches ergeben . Springer-Verlag Berlin Heidelberg New York eln Unternehmen der BertelsmannSprlnger Science+Buslness Media GmbH http://www.springer.de
Mein besonderer Dank gilt Ursula Zimpfer, die sich als Lektorin mit unglaublicher Sachkompetenz durch das Thema arbeitete und Ulrike Drechsler, die als Herstelierin im Springer-Verlag alles 50 professioneli in ein . handfestes" Such umsetzte .
Inhaltsverzeichnis
Einleitung Rapite l 1 Wie sich das Web se lber ausbrernste
14
15 17 20 22
1.1
Es werde Nacht
1.2
Stillstand
1.3 1.4
Minenfelder Der Tag, an dem der Browser starb
Rapitel 2 Der Bildschirrn ist keine Seite
26
2 .1
Der kleine grof!,e Unbekannte : Der Monitor
2 .2
Layouttechniken
2 .3
Darstellung und Konsistenz
2 .4
Aus dem Fenster geworfen: Frames
2 .5 2 .6
Layouttabellen: Ein Segen und eine Seuche Layout mit Cascading Stylesheets
27 29 35 37 41
45
Rapi tel 3 Grundlegende Techniken
50
3. 1 Stilvorlagen ftJr die Auto-Formatierung 3 .2
Wenn das Stylesheet zweimal klingelt
3 .3
Eigenschafte n sind ftJr aile da
51 53 56
3 .4
Die Syntax der Stile
59
3 .5
Interne und externe Stylesheets
63
3 .6
Geburtsrecht und Erbe: Inharenz
3 .7 3 .8
Nah schlagt fern: Cascading AbktJrzungen und Kommentare
68 71 73
Rapitel 4 Alle Stylesheet-Eigenschaften 4 .1
Die Cascading-Stylesheets-Spezifikation
4. 2
Schriftgesta ltung: font
4 .3
Stil e
4 .4
Aufzahlungen und Listensymbole:
tut die Textgestaltung
lists and markers
6
9
76 77 82 92
101
4.5
Vordergrundfarbe und Hintergrund: color and background
105
4.6
padding, margin, border
110
4.7
Visuelle Formatierung
120
4.8
table: Stile fur Tabellen
142
4.9
Stile fur die visuelle Gestaltung der Benutzeroberflache
Beispiel 3 : Ein einfaches C55-Layout Beispiei 4 : Einfach nur 5tylesheets i
199 202
6 .4
190
6.5 Beispiel 5: Einfach nur 5tylesheets II 6.6 Beispiel 6: Wie gedruckt - das 5tylesheet fUr den Drucker
212
Kapitel 7 HTML is a Box in a Box
221
7.1
Die wahrscheinlich kleinste Programmiersprache der Welt
222
7.2
HTML-Attribute
227
7.3
Kleinlich: Wie schreibt man ein Tag?
230
7.4
Kopfstande: Das !Doctype-Tag
232
7.5
Container tur alles: «dtv> und -csoero- Tag
234
7.6
Geben 5ie hier Ihren Namen ein ... Formulare, Formulare
240
7.7
Vom Leben in der Zelle: Die Tabelle
256
7.8
Der kleine Bruder des Framesets : iframes
272
7.9
Wenn das 5tylesheet nicht funktioniert
276
215
7
Kapitel 8 Schrift, Grafik und Farbe
287
8.1 Schrlften fur den Monitor
288 293 295 298 302
8 .2
Ladbare Schrlften
8.3
Schrlft als Graflk: GIF und Flash
8 .4
Magangaben
8 .5
Farben
Glossar
305
Technlsche Begriffe
306
Klelnes Typo-ABC und -Worterbuch fur Screen und Web
310
Anhang
315
Literatur
316 328 333
Index
334
Sonderzeichen In HTML Ressourcen 1m Internet
8
4.01 und Farbnamen
Einleitung 1m Vergleich zu Satzprogrammen wie QuarkXPress und PageMaker scheinen die Werkzeuge fur Webseiten aus der digitalen Steinzeit zu stammen - HTML, die Seitenbeschreibungssprache des Web, wird in Code gemeil)elt, Stylesheets sind eln Myste rium, Browser ein Alptraum . Typografie und Layout unter llegen - so scheint es - unendlich vielen Einschrankungen und werden zusatzlkh von den Unzulangltch keiten der Browser unterminiert.
Wer aus dem Printdesign kommt, erleidet bei den ersten Gehversuchen im Word Wide Web einen Schock. Nichts ist so, wie es scheint, nichts bleibt dart stehen, wohin man es setzte.
Dabei hat sich das W3C, das Konsortium, das die Empfehlungen fur HTML ausspricht, schon 1996 und 1998 der Presentation von Dokumenten angenommen und mit Cascading Styleshee ts Version 1 und 2 die Mittel geschaffen, das Erscheinungsbild einer Webseite ebenso profe ssionell umzusetzen wte mit St ilvorlagen in elnem Satzpro gramm . Aber Cascading Stylesheets setzen sich nur zoger ltch durch.
Good Old Times Fehlerhafte Browser haben die Umsetzung der beiden Empfehlungen bis heute ausgebremst. »Besucher mit alteren Browsern durfen nicht durch m oderne Technologlen benachtelligt werden «. lautete der Grundsatz des W3C. Und der Wunsch des Designers und seiner Kunden, Webselten fur j eden Besucher In glelcher f unktlonalttat und gleicher Darstellung zu Ilefern, beschrankt den Einsatz von Stylesheets auf die Technik vor 199 6. Mit Netscape 6, Internet Explorer 5 auf dem Mac, Internet Explorer 6 auf dern PC und Opera 5 stehtjetzt elne neue Browsergeneration zur VerfUgung und lost die Bremse. Gleichzeitig ruft die Webstandards-Organisation dazu auf, alte und fehlerhafte Browser nur noch funktionell zu unterstUtzen . Die TOren
From : Diego Martin Lafuente Date : Mon Jun 18 , 2001 9 :58 am ISubject : Someone here hates the web? ' ve in the field more than 5 years . . . i was a print designer ... and i still hate the web . . . this doesn't make reference that i 'm a looser on this . .. i 've done nice projects but i really hate it ... print design or another topics related made me more happier than internet ... do you?
I--
Diego Martin Lafuente / dlafuente@l . . . IVi s i t a nos en Livra .com
sind geoffnet.
9
Einleitung
Effizienz statt Tricks und Hacks »State of the Art« steht hier im Vordergrund - neue Techniken, die uns durch eine neue Browsergenerati on nun zur VerfOgung stehen - und weniger all die Tricks, mit denen wir Browser in der guten alt en Zeit uberl lsten mussten . Die Tricks der Hardcore-Hacker werden uberflussig: »Moderne« Browser ab Version 5 stell en Seiten mit CSS1 und CSS2 uberraschend konsistent dar. Die Zeit wird reif fur neue Tricks: Jetzt geht es nicht mehr um das Oberlisten , sondern um Gestaltu ng, effiziente Pflege und Arbeitstechniken . Das Buch wendet sich an Designer und Grafiker, die bereits Seiten entwo rfen und codlert oder mi t einem HTML-Editor wie Macromedia Dream weaver oder Adobe GoLive umfangreiche Sites aufgebaut haben . Es wird erganzt durch Beispi ele, praktische Hinweise und Techniken fur die Gestaltung und einfache Pflege kom plexer Sites mit Stylesheets . Hier steh t Prakt ikabilitat, keine theoretische Beschreibung im Vordergrund . In diesem Sinne beschaftlgt sich das Buch mit den Einsatzrnoqltchkelten von Stylesheets fur Webdesign, Druck und alternat ive Ausgabetechniken: • Traditionelle Eleme nt e fur das Layout von Webseite n wie Layouttabellen und Frames • Stru kturb lldende Elem ent e fur HTML-Dokumente • Definiti on und Umfang von Stylesh eets fur Layout, Schriftund Textg estaltung, Druck und Sprachausgabe • Anlegen von Sty lesheets m it Macrome dia Dream weaver • Typografie fur den Blldschirm • Einsatz von ladbaren Schriften und Grafikschriften
Plattformen Schnell fallt auf, dass die meiste n Screenshots m it Intern et Explorer 5 auf dem Mac entstanden sind: Sie wurden mit Internet Explorer 5 .1 auf dem Mac erzeugt. Internet Explorer 5 ist der erste Browser, der CSS1 laut World Wide Web Consortiu m zu mehr als 99 % und den grof>ten Tell von CSS2 unterstUtzt. Nur so war es mir rnoqltch, neue Techniken zu testen, die erst jetzt in den Browsern der Version 6 im plem entiert sind . Wo Abweichu ng en in der Dars tellu ng eklatant sind, werden Screens hots aus Netscape, Internet Explorer und Opera auf dem PC zum Vergleich herangezoge n. Aile Verfahren sind auch auf dem PC getest et. Internet Explorer 5 und 6, Netscape 6/ 7 und (eingeschrankt) Opera 5+ sind die Referenzbrowser fur dieses Buch. In den Beispielen wird Wert darauf gelegt, dass Netscape 4 dem Benutzer »funkt toruerende« Seiten bietet, ohne moderne Browser in ihrer fu nkt lonalttat elnzuschranken.
10
Einleitung
Der feste Punkt im Universum: Satzprogramme Um das verstandnts zu ertetchtern und die Ideen anhand bekannter Techniken zu erklaren, vergleicht das Buch die Struktur von HTML-Dokumenten und Cascading Stylesheets immer wieder mit Satzprogrammen wie QuarkXPress und Adobe InDesign und Textverarbeitungsprogrammen wie Microsoft Word. Wer sich bereits professionell mit dem Printdesign beschCiftigt hat, wird Oberrascht sein - das Potential von Cascading Stylesheets steht dem der Satzprogramme nicht mehr nachoDa Stylesheets aus ROcksicht auf fehlerhafte Browser bislang kaum ausgeschbpft werden konnten, ist dieser Umstand bis heute kaumjemandem aufgefallen .
Notationen und Namensgebung Aile Codebeispiele sind farbig hervorgehoben und in einer Nichtproportionalschrift gesetzt. Damit die Struktur in HTML-Beispielen besser hervortritt, sind die Beispiele teilweise extra breit gesetzt oder ZeilenumbrOche sorgen fur eine logische Darstellung . Stylesheetnotationen in Codebeispielen geht in der Regel ein »bullet« voran:
• body { background : white } HTML-Tags werden im Flie&text klein- und in spitzen Klammern geschrieben . Die Attribute der HTML-Tags sind ebenfalls durchgangig kleingeschrieben und im Fliel)text farbig hervorgehoben . Vor HTML-Codezeilen steht eine Raute, damit Stylesheetregeln und HTML-Code besser voneinander zu unterscheiden sind :
o
11
Einleitung
Ressourcen auf der mitgelieferten CD-ROM (
50bald ich anfing, die beschriebenen Eigenschaften C.'2-"-'- 1 ",M~· "
Ol·"'.~
t ,.........'
'-1'luN!Ma&SPIEGEL TYPE="text!css "> <STYLE TYPE= "ce x c/ c s s "> }
I St ylesheets beim Focus , beim Springer-Verlag und bei Fleurop : Sie dienen fast ausschlie8lich der Schriftenformatierung. AI/enfal/s die Seiten des Springer-Verlages vertrauen beim Layout auf St ylesheets .
Zeit fur Experimente Mit dem Stillstand der Entwicklung rund um die Standa rds begann die gro&e Zeit der Exper imente. Das mit Abstand gelungenste Experiment war Macrom edia Flash. Neben den visuellen M6glichkeiten von Flash, die aile anderen Techniken - insbesondere das eckige und besch rankte HTML - ausstach en, hat die Flashseite elnen nicht zu Ci berbietenden Vorteil : Sie steht immer gleich aus . Egal ob Netscape oder Internet Explorer, Mac oder PC- die Seite halt injedem Browser mit Flash-Plug-in, was sle auf dem Monitor des Entwickler s verspricht.
Stylesheets von Focus bis zum Springer-Verlag Keine der gro&en kommerziellen Sites lasst sich noch ohne Stylesheet blicken : Die Spannbreite reicht vom vorsichtigen eingebetteten Stylesheet beim Spiegel uber ein eingebettetes Stylesheet von wahrhaft epischer Lange beim Springer-Verlag , etnern profess ionellen Style-
18
1.2 Stillstand
Ein Schritt zuruck Ein Schritt vor
sheet bei Fleurop bis hin zum ausgelagerten Stylesheet beim Computermagazin Page. Aber ste aile beschranken sich auf die »unqefahrllchen« Stile . Etwas font -family hier, etwas font-size da. Da liegt also seit 1998 eln machnges Werkzeug fur das Design von Webseiten vor - genutzt wlrd aber nur eln kleiner Teil davon . Ein kleiner Ausschnitt von CSS1 hat sich zwar in den grof')en kommerziellen Sites durchgesetzt, aber an CSS2 will sich kein Designer die Finger verbrennen. Nicht etwa, dass es altere Browser »ausknipsen« wurde - die uberlesen die Stylesheets einer HTML-Seite - , aber die mittelalterlichen Browser machen uns durch ihren fehierhaften Umgang mit Stylesheets das Leben schwer.
Tricky HTML - das groSte Computerspiel aller 2eiten Bis in diejOngste Zeit konstruieren wir also Webseiten nicht anders als 1996, in den Zeiten vor CSS1. Wir haben JavaScript und browserspezifische Tags ausgegraben, unzahllge Tricks und Umleitungen erfunden oder in Newsgroups entdeckt, die uns haifen, die unzulanquchkeiten und Differenzen zwischen den Browsern irgendwie auszugleichen. Wir haben das Seitenlayout mit Tabellen und 1 Pixel grof')en GIF-Bildern perfektioniert, die uns vor den kollabierenden Tabellen in Netscape bewahren . Internet Explorer 4 kommt bel Rahmen durcheinander? Wir packen eine schwarze Tabelle um eine welSe Tabelle und basteln uns einen Rahmen . Unzahlige Webentwickler haben die Probleme der Browser ge/6st und sich seiber immer neue dabei geschaffen . Ein Markt von WYSIWYG-Editoren mit Programmen wie Macromedia Dreamweaver, Adobe GoLive und Microsoft FrontPage blOhte auf und trug ebenfalls dazu bel, die Schwachen der Browser vor einer ganzen Generation von Webentwicklern zu verbergen . Tricksen und Hacken, Vertuschen und Verstecken war die Basis fur das Webdesign eines halben Jahrzehnts .
19
fin Schritt zurUck fin Schritt vor
Kapitel
1.3 Schon mit der ersten Seite , die ein Entwickler ins Netz stellt, lernt er den entsche idenden Charakterzug kennen, den aile Browser gemein haben: Sie sind Individualisten . Der eine Browser int erpret iert eine bestimmte Menge an Anweisungen und Regeln fehlerfrei (vielle icht) , der nachste Browser eine andere Menge (unter Umstanden).
1 Wie sich das Web seiber ausbremste
Minenfelder
Auch wenn ein paar wenige Browser die Herzen oder zumindest die startleiste des Rechners der Benutzer fast vollstindig erobert haben: Es gibt unendlich vlele Browser. Diese unendlich vielen Browser kommen in unglaublich kurzen Abstanden in immer neuen Versionen auf den Markt. Die wirkliche Katastrophe in den Augen der Webseitenentwickler aber ist die Tatsache, dass alte Browser nicht aussterben . Internet Explorer 3 .0 war der erste kommerzielle Browser, der sich an stylesheets versuchte - »versuchte«, denn zum Zeitpunkt des Erscheinens waren die Cssl -Empfehlung noch nicht verabschiedet. IE3 unterstO tzt zwar die meisten Cssl -Eigenschaften, ist aber mit eln paar dicken Fehlern gespickt. Wer j etzt denkt, dass Internet Explorer 4 und Netscape 4, die erst spater erschienen, stylesheets in der Version Cssl sauber und vollstandig impleme ntiert batten, liegt daneben. Es sieht eher so aus. als hatten sich Microsoft und Netscape zwei vollkomm en unterschiedlichen Konsortien angeschlossen und manchmal kommt sogar der Eindruck auf, ste hatten sich abgesprochen, nicht die gleichen Stile zu unterstOtzen. Du willst einen Texteinzug? Gut. dann nehme ich den festen Hintergrund.
Minesweeper Wer seine s eiten mit den Versionen 4 der beiden grof,en Browser testet. macht einen spaziergang durch ein Minenfeld. Was im einen Browser funktioniert, fOhrt im anderen bestenfalls nicht zum Absturz . Eine Site mi t allen Browserversionen zu teste n ist aussichtslos . Aber welches sind nun die wichtigsten Browser? Die aktuellen Versionen von Internet Explorer und Netscape? Die aktuellen Versionen und die Vorganger? Muss der Designer exotischen Browsern eine Chance geben? Tests in versch iedenen Browsern kosten Zeit und ... Geld. FOr die Tests mit Interne t Explorer braucht der Entwickler ein gutes halbes Dutzend Rechner: Einen fur Internet Explorer 4, einen fur Internet Explorer 4.5 , einen fur IE5, einen fur IE5.5, einen fur IE6, da keine zwei
20
1.3 Minenfelder
Ein Schritt zuri..ick Ein Schritt vor
Versionen vo n Inte rnet Exp lorer auf einem PC gle ichze itig installiert sein k6nnen . Wer sein e Seiten auch noch auf dem Mac tes ten rnochte, kom mt zwar m it ein em Mac fur aile Vers ion en fur Internet Explorer aus , muss aber Sorge trage , dass die Versionen in umgekehrter Reihenfolge install iert werden : Zuerst die Version 5, dann erst Version 4 .5 und Version 4 .0 . Netscape kann in samtlkhen Versione n auf einen Rechner insta lliert werden . Auch fur die ses Buch mu sst e eine Entscheidu ng getroffen werden wenn ich hier von »rnodernen« Browsern schreibe, spreche ich von Inte rne t Exp lorer ab Version 5, Nets cape ab Versio n 6 und Opera ab Version 5 . In diesen Versionen unterstOtzen die genannten Browser CSS1 und CSS2 in hinre ichendem Ausm af:, und igno rieren Stile, die nicht unterstOtzt werden , ohne den Browser in AbgrOnde zu rersen . Sie bieten solides CSS, HTML und JavaScriptiECMAScript.
Wir wollen HTML und C55 , keine lIBlind-GIFs« und getlirkten 5tylesheets Auch wenn Entwickler den Grundgedan ken, alte ren Browsern den Zugang nlcht zu verspe rren , akzeptiere n, d Orfen wir and ererse its die Weite rentwicklung intu itiver Benutzeroberflachen nlcht durch fehlerha fte und veraltete Versionen ausbremsen lassen. Wir begrusen Besucher nicht mit dem ungnadigen »Diese Seiten sind fur Browser XX und YY optlrnlert«. durfen aber auf der anderen Seite die Kosten fur eine gute Gestaltung nlcht In die H6he tre iben . Styleshe ets biete n uns einen guten Ausweg aus dem Dilemma : Wir vers uchen, den Inhalt unserer Seiten so weit zu »uneartsteren«, dass Browser, die Stylesheets nicht un ter st utzen , den Inhalt vernOnfti g darste llen k6 nnen und dem Benutz er die volle Funktionalitat zur VerfOgung ste llen . Netscap e 4 k6nnen wir durch eln zweltes Stylesheet »aust rkksen«. Aber so lange wir tricksen, stecken wir den Kopf in den Sand . Wir haben lange genug mit Tabellen, blinden GIFs, JavaScr lpt und vlel Verzicht die Wahrhelt unter den Teppich ge kehr t. Es m ag nicht bes ond ers charma nt seln. eine m Besucher zu erzahlen, dass sein Browser ... tst, abe r wen n ein Browser nicht funktion iert,
5 0 11 ten
wir es den Benutzern
dieses Browsers auch vor Augen fuhren . Zum Tros t andern wir die harsch e Kritik »Diese Seiten sind fur XXX
opttrruert« In »Diese Se iten k6nnte n eleganter aussehen , wenn Sie etnen m od ernen Browser benutzen, bieten Ihnen aber die vo lle Funktl onautat«. Auch wenn die Wahrheit schmerzt und gegen den Strom ein er lauts tarken Minderhelt anschwimmt - dleser Browser hat sich seib er ausg eschaltet.
21
Kapitel 1 Wie sich das Web seiber ausbremste
Ein Schritt zurtlck Ein Schritt vor
1.4 Aufstieg, BlUtezeit und Abstie Netscape hat ohne Zweifel einen groBen Beitrag zum Erfolg des WWW geleistet und trotzdem gleichzeitig die Weiterentwicklung des Webs ausgebremst. 1994 brachte Netscape Leben ins Netz. 1996, als Stylesheets kamen, trat Netscape auf die Bremse.
Der Tag, an dem der Browser starb
Netscape 4 ist das Sorgenkind der Webgrafiker und unterstUtzt nur elnen kleinen Kreis der CSS1-Empfehlung, und den auch nur sehr fehlerhaft mit der Tendenz zu unverhofften AbstUrzen. Daran hat sich auch mit all den vielen Updates von 4 auf 4 .5 auf 4 .7 auf 4 .78 im Laufe der letzten Jahre nichts geandert - die Version 4 .7 hat den CSS1-Support nicht wesentlich ausgeweitet, sie fOhrt lediglich nkht mehr so schnell zu AbstUrzen. Dabei hat Netscape in einer rasanten Talfahrt seine Annanqer in die Arme von Internet Explorer, Opera und Mozilla getrieben . Von einem uberwaltlgenden Marktanteil ist Netscape auf etwa 5% bis 15% abgerutscht, je nachdem , auf welche Benutzergruppen die Statistik abzielt. Dieser Marktanteil ist aber noch hoch genug, um die Nutzung von Stylesheets auszubremsen, denn schlief,lich und endlich mOssen Entwickler von Websites immer noch dafOrsorgen, dass ihre Seiten in Netscape 4 darstellbar und funktionstUchtig blelben . Damit durfen sie sich entweder die Gestaltungsmbglichkeiten von CSS2 aus dem Kopf schlagen und CSS1 maximal fur die Gestaltung von Schriften benutzen oder sich mit grof,em Arbeitseifer und Erfindungs-
In fact . it has been a constant source of
reichtum einen Trick nach dem anderen
de light for me over the past year to get to
ausdenken .
continually tell hordes
(literally) of people
Ab Version 6 unterstUtzt Netscape CSS 1
who want to -- strap yourselves in , here it
voustanclg, substanzielle Teile von CSS2
comes -- control what their documents look
und aile wesentlichen Standards des Webs,
like in ways that would be trivial in TeX .
inkluslve XML und DaM (Document Object
Microsoft Word . and every other common text
Model) . Netscape 6/7 basiert auf der
processing environment : " So r ry. you're
Gecko-Engine und dem Open-Source-Pro-
screwed . "
jekt »Mozilla«, das einen standardkonformen Browser fur AIX, Linux, Win32, Mac as,
Marc Andreessen. der hier seta Entsetzen eusarco«. war einer der Programmierer von Mosaic. Er wurde zu einem Grunder von Netscape .
Der Browser Mozilla wiederum beruht ursprOnglich auf dem Code von Netscape 5, niemals in Kraft getretenen Nachfolger der
22
1.4 Der Tag, an dem der Browser starb
Ein Schritt zuruck Ein Schritt vor
Vers ion 4 . Netscape gab se inen Code an das Mozilla-ProJekt zur Weiterentwlcklung frel - am Mozilia-ProJekt sind auc h viele Entwickler von Netscape 6 beteillg t. Mozilla.org koordlnler t die Entwicklung, stellt ein Forum fur Entwickler und Nutzer zur VerfOgung, Oberwacht Releases und reglstriert die Fehler.
Vom MauerblUmchen zum Eckpfeiler: Internet Explorer Der 5pcHzOnder aus dem Hause Microsoft setzte ers tm als in Version 3 auf 5tylesheets. Da die Versio n 3 aber schon freige geben wurde, als die C551 -Emp fehlung noch nicht konsoli dier t war, ist auf die UnterstOtzung von C551 wenig Verlass und AbstOrze sind kein e 5eltenhe it. Mit Version 4 beg innen die breite UnterstOtzung von C551 und der Erfolg von Internet Expl orer. Obwohl die Implementierung von C551 alles andere als perfekt war, wurden doch die Fehler aus Version 3 behoben und der erste 5 ilberstreifen von C552 hineingepa ckt. Wer sich 5tylesheets versch riebe n hat, kann froh darOber se in. dass mehr als 75 % aller Besucher mi t IE5 und hbhe r surfen - denn IE5 bietet Cascading 5 tylesheets eine stab ile Basis. Inte rnet Explorer 5 fur den Mac war der ers te mo derne Browser und unterstOtzt C551 voltstandtq und die wesentlichen Elem ente von C55 2 problem los , Internet Explorer 6 fur den PC unterstutzt den vom W3C geforderte n »Kern« (core) von C5s1 sowie substanzielle Teile von CSS2 und anderen wichtigen W3C-standards . Vollkommen adaptiert hat also die PC-Version des Intern et Explorer die Em pfehlu ngen des W3C fur CS51 und CSS2 nicht. Wo die UnterstOtzung aufhbrt, ist Internet Explorer »tolerant« und Oberliest stilrege ln, die nicht impl ementiert sind . Diese Toleranz wird von Webdes ignern und Programm ierern kei nesfalls begr Of>t.
Nachwuchstalent: Opera Opera 3 .5 kam mit ein er bemerkenswert breiten Unt erstOtzung von CSS1 auf den Markt, insbeso ndere, wenn man bed enkt, dass es vor der Versi on 3.5 Obe rhaupt kei ne Css-UnterstOtzung gab. Zwar kam es hier und da zu Fehlern, die abe r selten am Inhalt und der Funktion stOchtigkeit de r s elten rOhrten. Die Version 3 .6 hat fast aile diese Fehler besei tigt. Opera 5+ un te rstutzt die substanziellen Teile der Webs tandards und eine breite Linie von s ystemplattformen. Der leitende Entwickler von Opera 5 war einer der maf>geblichen Autoren des Css1-standards. Opera lauft unter Windows, Linux, Mac OS X und auch OS/2, EPOC und BeOs -Plattformen. Insbes ondere lauft Opera problemlos auf alteren Rech nern - der Browser ist klein und sc hnell.
23
Ei n Schritt zu ruck fin Schritt vor
Kapitel
1 Wie sich das Web seiber ausbremste
Der Browser ist eine echte Mediendiva : Er versteht sich nicht nur auf die klassische Monitorwiedergabe, sondern interpretiert auch Stylesheets fur Druck und Prasentation , Selbst Themen wle dynamisch generierte Inhalte , die von anderen Browsern vernachlasslgt wurden , sind eingeschlossen . Aber Opera ist noch ein Exote gegenOber den beiden etablierten Flagschiffen . Der Anteil der Surfer mit Opera liegt wohl zwischen 1 bis 3%. Opera gibt es in einer kostenlosen Version mit einem Werbebanner und in einer Version fur 30 $ ohne Werbung,
FUr den Surfer aus Sparta: Lynx Lange Zeit war Lynx alles, was Unix-Benutzer fur den Besuch im modernen Internet, im WWW, hatten . Mit dem Einzug der grafischen Benutzeroberflachen sind zwar auch grafische Browser unter den verschiedenen Unix-Derivaten eingezogen , aber wer Unix pur
genie~en
will, wird
mit Lynx surfen . Textonentlerte Browser wie Lynx testen, wie die Seiten dort aussehen, wo Stylesheets ausgeschaltet wurden, und klaren eine wichtige Frage: Sind die Seiten auch in Browsern ohne StylesheetunterstOtzung »funktlonsfahlg« und werden die Inhalte in einer logischen Reihenfolge
angezeigt?
Doctype gibt an, nach welchen Regeln das Dokument codiert ist, damit Browser auch altere Dokumente mit elteten Datenformaten, die heute nicht mehr zum Standard geh6ren, korrekt darstellen k6nnen . Die Angabe »stnct« weist den Browser darauf hin, dass es sich um ein Dokument handelt, in dem nur »teities« HTML verwendet wird und dessen Inhalte sauber strukturiert sind .
Der Schalter fUr "Political Correctness« Damit die modernen Browser wie Internet Explorer und Netscape ab Version 6 eln standardkonformes HTML-Dokument korrekt darstellen, muss das ! Docty pe-Tag im Kopf des Dokuments eingestellt werden :
< !OOCTYPE HTML PUBL IC "- / / W3C/ / DTD HTML 4 .0 1 / /EN " ''h t t p : / / www . w3 . or g / TR/ h t m14 / s t r i c t . d t d '' > Nur dann funktioniert das Boxmodell, das in Internet Explorer 5 auf dem PC noch fehlerhaft implementiert war, korrekt entsprechend CSSl. Seiten ohne !Doctype verhalten sich genauso wie in alteren Versionen von Internet Explorer ,
Die Verlagerung der Front im Browserkrieg Nachdem wir uns also viele Jahre als
Fu~volk
im Krieg der Browser auf-
gerieben haben , rief die Webstandards-Organisation mit dem Erscheinen von Netscape 6 die »Browser Upgrade Campaign« ins Leben. Damit standen in allen »Lagern« moderne Browser zur VerfUgung, die Zuruck-
Die Webstandards-Organisation wurde zur Widerstands-Organisation . Sie treibtjetzt die BROWSER UPGRADE CAMPAIGN voran:
haltung sollte ein Ende haben . Die Kampagne empfiehlt ein Webdesign unter Beachtung der Standards anstelle der jahrelang geObten Beachtung der bekannten Browserfehler und des Verzichts auf moderne Funktionen . Die Seiten sollen fur fehlerhafte Browser funkttonsfahlg bleiben , aber nicht langer
1.4 Der Tag, an dem der Browser starb
durch aufwendige skripte und vtele Tricks die gleiche optische Anmutung liefern und Fehler verschleiern . Wer die seite mit einem Browser mit mangelndem Css-support besucht, 5011 auf die seiten der Webstan dards-Organisation gelenkt werden und dort die Gelegenheit haben, einen modernen Browser zu laden . Die neue
'I
Ein Schritt zuruck Ein Schritt vor
. De r erhobene Zeigefinger ist keine treibende Kraft · http : / /ohenomenon .ora /intense / zentences Generiert elnen 51nnspruch nach dem anderen und findet immer das rechte Wort.
Front im Browserkrieg ist eingeleitet.
Idealismus, Pragmatismus und Praxis Wer kommerziell seiten erstellt, kennt seine Entwicklungskosten :
wicklungskosten eine einmalige Anlage, die sich durch den Zustrom
Lycos Europa kOndigte als eine der ersten »grof5en« Sites an, ein reines C55-Design zu implementieren, in dem Besuchern mit enete« und fehlerhaften Browsern schlichte »Iineare« Inhalte bei voller Funktionalitat geboten werden :
auch des allerletzten Besuchers durchaus rechtfertigen mbgen .
http : / /jscript .dk/lycos /2 /
Mehr als 50% der Entwicklungskosten dOrften auf die UnterstOtzung mangelhafter Browser entfallen, damit die letzten 5 bis x% der potentiellen Besucher nicht von der Site ausgeschlossen werden . FOr den Betreiber einer kommerziellen Site wiederum sind die Ent-
Lander, stadte und Kommunen wiederum sind ein anderes Klientel. Dort ist das Geldsackel fur Entwicklungskosten knapp und Standards sind hier eine Entscheidungshilfe. In bffentlichen Bereichen, Verwaltungen und Instituten gilt das Argument, dass eine seite Besucher mit Behinderungen nicht ausschuesen darf. FOr die Hersteller von WyslW YG-Editoren wie Dreamweaver, Adobe GoLive und FrontPage ist die Taktik klar : Ihr grotes Potentiai liegt in der mehr (Dreamweaver, Adobe GoLive) oder rninder (FrontPage ) elegan ten Eliminierung der Heinen schwachen, TOcken und Eigenarten der Browser. Einen WYSIWYG-Editor, der Standardcode erzeugt, kann jeder entwickeln . 5011 niemand glauben, die Zukunft wOrde langweillg.
25
Internet ist kein rapier hinter Glas Kapitel 2 Der Bildschirm ist keine Seite
Ob sie nun Ober K6ngishauser und Filmstars berichten , uber die neuste Kontroverse im Bundestag oder neue Frisuren und Rezepte in den Vordergrund stellen : Zeitschriften unterliegen einem De-facto-Standard . Es gibt ein Inhaltsverzeichnis, Seitenzahlen und Rubriken . Artikel fangen auf einer neuen Seite an, Seiten werden bis unten mit Inhalt gefOlit und enden nicht mit einer halben Seite WeifSraum. Das Web hingegen bietet Freiraum fur aile, den Boden fur Experimente und neue Techniken. Hier kommt Bewegung ins Spiel. FOr kommerzielle Sites allerdings geht diese Ara dem Ende entgegen . Das Web wird 50 solide wie die gedruckte Ausgabe des Spiegels. Und da sich Zeitschriften und Magazine auf etwa gleich grofSe Formate geeinigt haben, warten Webdesigner darauf, dass aile Besucher die gleichen Monitore benutzen . Aber Internet ist kein Papier hinter Glas und der Bildschirm ist keine Seite . Hier gibt es neue Spielregeln .
Der kleine groBe Unbekannte: Der Monitor Wir werden uns daran gewoh· nen, dass die meisten Surfer unsere Seiten nicht so sehen, wie wir sie uns vorstellen. Oder aber wir karnpfen fUr den Standardmonitor nach DIN- Norm fUr aile.
Schon frOh zog es die Grafiker aus dem Print ins Web. Sie versuchten , dem Internet die Charakteristika des Papiers aufzuzwangen, oder experimentierten mit den unendlichen Moglichkeiten des neuen Mediums. Aber Internet ist kein Papier hinter Glas. Wer aus dem Printdesign kommt, wird sich von traditionellen »flxen« Ideen verabschieden mussen . Eine Seite, die fur eln festgelegtes Layout auf einen grosen Monitor bei elner hohen Auflosung entworfen wurde, wird auf einem kleinen Monitor bei niedriger Auflosung unkomfortabel und schwer lesbar sein . Auf einem grotsen Monitor wtrd die Seite eher bizarr und vielleicht ein wenig verloren wirken. Noch zlelen die meisten Layouts auf den Computermonitor aboDer kann grots oder klein seln. hochaurlosend oder nur eine kleine Autlosung bieten . Jeder Monitor hat eine andere Grotse, jeder Benutzer kann sein Browserfenster beliebig grots und beliebig klein aufziehen und das sorgfaltig ausgearbeitete Layout kippen . Der eine
-
...... s l~
Besucher nutzt einen schlichten Browser ohne viele Symbole, der nachste verbraucht einen grotsen Teil
claSSlhc3ttOn
-
-- - - - - - -
des Platzes im Browserfenster fur seine person-
_.-
lichen Symbolleisten . Wir konnen Ober die Technik
~~:::~
-
des Displays belrn Besucher hochstens Vermutungen anstellen.
...... s t~
~
- - -
___
-- - - -
g ~
welcome
.. .._ ._'-
n-
-
-
-- ~-
~YJ,
I
_ ._ ~.
g
htt p : / /counterspace .motivo .com / Eine wundersch6ne Flashseite Ober Typografie leider ohne einen der grof5en Vorteile von Flash in das Design einzubeziehen : die Skalierbarkeit.
27
Internet ist .• - hinter Glas
Kapitel 2
Der Bildschirm ist keine Seite
LJ D n
-
Noch befindet sich das »Weblayout« in der Experimentierphase und noch immer fehlen verlassliche Werkzeuge, die tur die Anpassung an die Grage des Monitors sorgen.
Ohne Umschweife, ohne Schnickschnack Das schonste Design hi1ft nichts, wenn es keine Inhalte biete t. Nirgendwo ist ein Betrachter, Besucher oder Leser »ftOchtiger« als im Internet: Wenn nicht sofort »harte« Informatione n herOberkom men, klickt sich der Besucher hinfort. Das Internet ist also der Ort , an dem man am beste n m it der TOr ins Haus fallt. Texter mOssen kOrzere und pragnantere Texte bieten . Wir sind nicht bereft, lange Texte ohne aussagekr aftige Kerninformation auf dem Monitor zu lesen , OberflOssige WorthOlsen wirken noc h abschreckender als auf dem Papier. Wenn wir rnachuges GlOck haben und der Besucher den Informationsgehalt unser er ellenlangen Seite zu schatze n weil), wird er ihn drucken, aber keinesfalls wird er ihn auf dem Monitor lesen.
Warum ausgedruckte Seiten im Papierkorb landen Drucken? Dazu braucht der Besucher allerdings auch GlOck. Wenn er eine Seite erwischt, die auf »frarnes«. der wohl beliebtesten Layouttechnik des Internets, aufbaut, ist Drucken etn Abenteuer. Und auch wenn die Seite ohne Frames aufgebaut wurde, ist das Druckbild ein Desaster. Wenn es nur die einsam und allein dastehenden Zeilen waren - aber am Seitenende werden Bilder und Grafiken skrupellos durchgeschnitten und auf der letzten 5e ite dOrfen wir etn paar leere Zellen bewundern . 50 langsam mOssen wir also daran denken , wte unsere 5e iten aussehen, wenn sie auf dem Papier landen.
28
2.2 Layouttechniken
2.2
Internet ist . .• - hinter Glas
Layouttechniken
1996 war Netscape Navigator der Browser der Wahl fur die uberwaltlgende Mehrzahl der Internetbesucher. Ins Internet gingen wir mit unseren PCs und Macs. Aber das Internet hat sich weiterentwickelt.
Der Computer ist nicht das Internet
Was wUnscht sich der Designer zu Weihnachten? Dass aile Internetbesucher einen groBen Monitor unter dem Weihnachtsbaum finden.
Das Internet beschrankt sich nicht mehr auf den Computermonitor. Es wandert auf die Displays von Handys und Palmtops und strahlt uns aus dem Fernseher an. Heute dominiert der Internet Explorer das Internet, aber schon surfen wir mit dem Handy oder sitzen gemOtlich auf der Couch und benutzen den Fernseher oder die Spielkonsole. Ais Stylesheets 1996 offlz tell vorgestellt wurden, erbffneten sie Wege zu einem raffinierten Seitendesign . Sie sollen auch dafur sorgen , dass sich eine Seite einem grbF>eren Kreis von Lesern erschuest, egal welcher Bildschirm auf ihrem Schreibtisch steht oder wie alt das Notebook auf ihren Knien ist - vom groF>en 22-Zoller bis zum Display des Notebooks , vom Palmtop bis zum Fernseher. Bis heute schlummern diese Mbglichkeiten in den Tiefen der Spezifikation . Wir schauen in die Glaskugel und fragen uns. welche Auflbsungen bei der Mehrheit der Surfer zu finden sind, auf welchem Bildschirm das Layout am schbnsten ist und wann endlich aile Monitore erne AufIbsung von 1024 x 768 Pixel bieten .
Wollt Ihr den DIN-Monitor fur aile? Mal ganz ehrlich : Welcher Designer entwirft gern ein Layout fur eine Auflbsung von 640 x 480 Pixel? Am Iiebsten waren uns 1024 x 768 Pixel oder ein bisschen mehr, aber nicht zu viel bltte. denn sonst mussten skh aile Designer seiber einen neuen Monitor wOnschen. Noch sind die meisten Layouts mehr oder minder statisch . Die Genotypen, die wir heute im Internet sehen , sind das »Drei-Spalten-Design«, das die Navigation der Iinken Seiten durch weitere Links auf der rechten Seite vertieft, und das »Registerdesign«, bei dem am oberen Browserrand Oberein oder zwei Zeilen navigiert wird.
Die Variationen: Navigation links, Navigation oben
WW\oJ .
Benutzer, die bereits vertrauter mit dem Medium Internet sind, haben bereits das »Schachtel-« und »Registerlayout« verinnerlicht - das sind die beiden erfolgreichsten Layouts des Internets . Das Schachtellayout zeigt auf der linken Seite des Browserfensters die Navigationsleiste mit den Hyperlinks, auf der rechten Seite wechselnde Inhalte. Das Schachtellayout setzt eine Hauptnavigation in die linke Spalte und eine Nebennavigation in die rechte Spalte, wenn die Themenvielfalt zu grof:, erscheint. Das Registerlayout hat sich die Register eines Karteikastens zum Vorbild genommen . Auf Seiten mit grof:,en Mengen von Inhalten ist das Registerlayout in einer Zwkkmuhle : Das klare, einfache Register oben reicht nicht mehr aus, um aile Sparten zu zeigen und die Struktur der Site flach zu halten . Also beginnt unter dem oberen Register eine zweite Registerreihe .
Navigationsleiste oben :
www .app le .de . www .amazon .de
.
amazon.de
_Mi_.. . . . . __,. _'_1. .• ~WCJIII" r---
Sag ha1lo zum iPcxI.
t
~
_
--......
to-tIUl _aIl,. ... .....
"w' 1-
..-
.......--~
1.(0) Song; inlk:ioo' HlR'l1la'iCht:.
..-................. .... ..-....-
II\I.......-...
-_...._ ..... .. .. CM....... _
.........,..,t..
....« O" ; • ...., ' _ .,...~
,.....-
.....
..u
" " ',,"' UWlDybe
--_ .,-- - - ..
~
..-.
30
I ~ I-
..
-
1 M '. . . . . n
~-.
. - - . _' " - ,....... . 011I._
..
_ ..,..,..--eDOHH
2.2 Layouttechniken
Feste GroSe, alles in der Ecke oben links Aile Elemente werden von der linken oberen Ecke des Browserfensters aus eingesetzt. Das Layout ist statisch und orientiert sich an der kleinsten Monitoraufl6sung, die sich der Designer vorstel len kann - und das ist fast immer eine Auft6sungvon 800 x 600 Pixel.
Internet ist • t • hinter Glas
Bei der Frage, wie sie mit grof!,en und kleinen Bi/dschirmen umgehen wollen, stehen Webseiten/ayouts vor einer Spannbreite von Losungsansatzen .
Vorteile: Einfach zu implementieren . Nachteil : Wirklich kleine Monito re sehen meistens immer noch nkht die ganze Seite , auf gr6f,eren Monitoren wird Raum ohne jeden Zugewinn verschwendet. Auf grof,en Monitoren wirkt das Layout deplatziert. Beispiel: www.sony.de
Festes Layout, das nur zu einer Monitorauflosung passt - bei anderen Aufl6sungen a/s 1024 x 768 wirkt das Design dep/atziert.
31
Kapitel 2
Internet ist •• t hinter Glas
Der Bildschirm ist keine Seite
D D
D Variation: Inhalt in der Mitte
Wichtiges nach links, Nebensachen nach rechts
Ein Layout in etnet festen Grage wird in die Mitte des Bildschirms gesetzt und leere Streifen rechts und links gleichen die Auflosungsunterschiede aus. Vorteile : Einfach zu implementieren, die farbigen Streifen tragen zu einem einheitlichen Gestaltungsbild ube: die gesamte Site bet oder konnen unterschiedliche Sektionen farbig trennen . Nachteile : Kein Vorteil tut Benutzer mit gro&en Monitoren, der verfOgbare Raum wird nicht genutzt. Beispiel: www .zeit .de.
In Sites, die grol)e Datenmengen unterbringen mOssen und gleichzei-
__
tig so vlel wie mbglich im Fenster der ersten Seite zeigen wollen, wird das Layout haufig in drei Spalten realisiert. Die Elemente werden aus der oberen linken Ecke heraus aufgebaut. Auf der linken Seite ist die Navigation untergebracht, in der Mitte die Inhalte, auf der rechten Seite eine zweite, untergeordnete Navigation oder untergeordnete Inhalte typischerwe ise »Aktuelles« oder im wahrsten Sinne des Wortes Neuigkeiten »arn Rande« .
ZEIT
- -- --_.--- - - ----... _--_ --------_.._.. .... . . -_.-_.. Ein Krlqj w ider '&'1Ikn
Die Bereiche der Seite dehnen und ziehen sich zusammen, je nach-
Das Layout wird um die vertikale Mitte des Bi!dschirms entwickelt und dehnt sich bei gr6geren Browserfenstern nach augen auf. Vorteile : Einfach zu implementieren und beim Betrachter entsteht ein konsistenter Eindruck, wei! aile Elemente stets in der Mitte sind und kein Platz an den 5eiten verschwendet wird. Nachteile: Auch hier dehnen sich wieder die Textzei!en und brechen um . Bei festen Textlangen gibt es keinen wirklichen Zugewinn fur gr6gere Monitore .
dem, wie grolS der Monitor ist und wie grolS das Browserfenster aufgezogen wlrd. Vorteile: Eine einfach zu reallslerende Lbsung. Benutzer mit grolSen Monitoren erzielen ein Maximum an Raum mit echtem Inhalt. Nachteil: Bei grolSen Monitoren werden die Textzellen unleserlich lang. Textzeilen brechen neu urn. wenn das Browserfenster verandert wird, und relsen den Besucher aus dem Lesefluss. Wenn das Layout nicht wahrhaft professionell umgesetzt wird, haftet ihm schnell der Ruch des typischen Programmiererdesigns an. Beispiel: www.focus.de. Sehr schbne Umsetzung dieser Layouttech nik, wobei Focus verhindert, dass die Textzeilen zu lang werden, sondern den Textabschnitten In den vergrblSerten Kasten mehr Raum gibt. Bei sehr kleinen Monitorauflbsungen schiebt auch der Focus die rechte Spalte aus dem Fokus.
33
Internet ist . .• . hinter Glas
Kapitel 2
Der Bildschirm ist keine Seite
Variable Anzahl von Spalten Wie ware es, wenn kleine Monitore nur zwei Spalten zeigen, wahrend auf gr bf>eren Monitoren drei Spalten eingesetzt werden ? Eine besonders elegan te Lbsung liegt vor, wenn de r Besuc her seiber die Zahl de r Spalten bestimmen kann. Der vorha ndene Raum wlrd gut genutzt und die Darstellung wlrd vom Benutzer gesteuert. Leider ist das Verfahren m it den Werkzeugen von heute und den Browsern von gestern kaum zu realisieren .
KollabierendelvergroSerte Elemente Bei kleineren Auflbsungen kollabieren verschiedene Elemente - z.B. kann eine Suchfunktion als einfache Schaltflache dargestellt werden und nur bei grbf>eren Monitoren als breites Eingabefeld. Vortetle : Angen ehm fur Besucher mit grof>en Monitoren und gute Ausnutzung des vorhand enen Raums auf dem Monitor. Nachteile: Schwer zu realisieren . Die Grbf>e des Browserfensters muss ausgelesen werden. Besonders sch wierig, wenn der Ansatz uber versch iede ne Browser funkt ion ieren 5011.
To Script or not to Script Techniken wie eine variable Anzahl von Spalten und kollabie rende Elem ente erfordern, dass Skripte Bedingung en prufe n und Werte setze n. Das Funkt ionieren elner Seite von Skripte n abhangig zu machen , die belrn Besucher der Seite ablaufen mussen. gilt allerdings als unfe ln und gefahrlich - zu viele Surfer haben die Skriptunterstotzung in ihrem Browser ausgeschaltet. Es bleibt also eine Herausforderung fur den Designer, Navigationskonzepte zu entw ickeln , die bei grof>en und kleinen Monitoren greifen . FOr andere Ausgabemedien als den Monitor des Computers hat die Cascading-Stylesheet-Spezifikation die Mittel geliefert: Stylesheets fur verschiedene Medien .
34
2 .3 Darstellung
2.3
l
d Konsistenz
Internet ist •• t hinter Glas
Darstellung und Konsistenz
Gutenbergs Bibel wird als das erste moderne Buch bezeichnet - aber es hat noch uber 100 Jahre gedauert, bis Bucher einen allgemeinen Standard fur die Nutzung erreichten: Seitenzahlen, Index, Inhaltsverzeichnis und Seitentitel sind heute Routine, waren aber damals keine Selbstverstandlichkeit. Heute erscheint uns der Umgang mit einem Buch einfach und die Tagespresse, Zeitschriften und Magazine bieten ausgefeilte Standards
Immer wieder hart man, das Design der groBen Sites wurde zu einem ))Einheitsbreicc. lnsofern sind auch Bucher und 2eitschriften ein Einheitsbrei: Was wir kennen, erschlieBt sich uns besser.
fur die Nutzung ihrer Druckerzeugnisse . Wenn wir montags den Spiegel
aurblattern. wissen wlr, wo die Themen stehen, die uns am meisten interessieren . Wir erkennen unsere Liebiingsrubriken an ihrem Layout.
Erwartungshaltung erfullen Eine Seite ist immer dann intu itiv, wenn sie die Erwartungen des Besuchers erfullt. Natorlich hei&t das nkht, dass wir uns auf die Nachahmung der Windows-Oberflache, auf das Schachteldesign und nachgebildete Registerkarten beschranken sollen . Aber die Konsistenz von einer Seite zur nachsten geh6rt zu den Erfolgsfaktoren einer Site . Zusammen mit der Konsistenz des Layouts sorgt die Konsistenz der Typografie fur eine intuitive Nutzung der Seiten . Womit wir endiich sanft zu Stylesheets uberlelten konnen : Stylesheets sind der beste Garant fur eln konsistentes Erscheinungsbild . Die totale Konsistenz (Brand ing) kann aber ohne weiteres auch zum diametralen Effekt fOhren. Dann wei& der Besucher namuch nicht mehr, wo er sich innerhalb einer Site befindet. Alles sieht gleich aus: Bin ich hier noch in der Abteilung »Einwohnermeldeamt«? Oder bin ich hier im Schutzenverein? Zeitschriften haben das Gegenmittel fest im Griff: Sie benutzen Variationen fur versch iedene Sparten. Politik hat vier Spalten , Lifestyle kommt in zwei Spalten mit einer Marginalspalte . Stylesheets bleten die Option , ohne Anderung des HTML-Codes das Layout und die Typografie zu variieren , und
50
verschiedene Themen optisch zu trennen.
35
Internet ist . .• . hinter Glas
Kapitel 2
Der Bildschirm ist keine Seite
Sequentiell versus Sprungtechnik und Hyperlinks In einer Hinsicht unterscheiden sich Webseiten fundamental von BOchern und Zeitschriften : Hyperlinks erlauben dem Benutzer, ohne Vorwarnung auf irgendeine Seite zu springen - kein Vorwort, keine Einleitung , keln Zusammenhang. Webseiten mOssen also deutlich unabhanglger voneinander sein als die Seiten eines konventionellen Buches oder einer Zeitschrift. Das wiederum bedeutet, dass Webseiten mehr an Informationen uber ihren Kontext mitbringen und vlele Informationen auf jeder Seite wlederholen rnussen und dieser Kontext darf beim Navigieren innerhalb der Seite nicht verloren gehen. Dumm , dass die Informationen zum Kontextjedes Mal ins Nirwana verschwinden , wenn die Seite gescrollt wird. Da Frames immer meh r verpont sind, muss das Design der Seite den Kontext herausarbeiten .
StUck fUr StUck statt Schlag urn Schlag An die Scroilieiste haben wlr uns bereits in vielen Programmen gewbhnt. Trotzdem lieben wir sie nicht. Sie verhindert den Blick auf das Ganze, wie wir es von BOchern und Zeitschriften gewohnt sind. rtaturIich kann das nicht hersen, dass eine Seite sich stets auf eine Monitorgrbte beschranken sollte . Schlietlich ist kaum einer von uns in der Lage, die »Zett«, das »Handelsblatt« oder die »Aachener Nachrichten« in voller Schbnheit zu genieten . Wir knicken uns die Zeitschrift zurecht. Das WWW ist kein Buch und Besucher lesen nicht sequentiell. Sie wollen kleine Informationseinheiten und einen Hinweis, wo sie mehr darOber erfahren. Also ware es fast immer besser, kleine Seiten anzubieten und Seiten in StOcke zu schneiden, die durch Hyperlinks rnltelnander verbunden sind . Trotzdem muss der Designer bedenken , dass der Klick auf den Hyperlink den Besucher aus dem Lesefluss reitt ... und das Laden der nachsten Seite dauert ...
36
2.4 Aus dem Fenster geworfen: Frames
2.4
Internet ist •• • - hinter Glas
Aus dem Fenster geworfen: Frames Die Zeit der Frames ist vorbei, sie sind regelrecht aus der Mode gekommen. DafUr darf wieder gescrollt werden, was insbesondere in den Zeiten von Flash verpont war. Techniken kommen und gehen wie Modetrends.
Das ausere Erscheinungsbild ist also eng verschmolzen mit dem Navigationsdesign . Wir wollen dem Besucher stets den Oberblick bieten, wo er sich befindet und wohin er sonst noch gehen kann, und BrOche dieser Funktio-
nalttat von einer Seite zur nachsten vermeiden . Dabei sollen Benutzer mit kleinen und groten Monitoren noch ein nettes Design erhalten. Das ist eine harte Anforderung an eine Technik, die immer noch in den Kinderschuhen steckt.
layout mit Frames FOr das Navigationsdesign waren bis vor gar nicht so langer Zeit Frames angesagt. Ohne Cascading Stylesheets sind sie das einzige Strukturierungsmittel, mit dessen Hilfe der Kontext stets im Sichtfeld des Besuchers bleibt - ein Grund, warum Frames so erfolgreich das Web Oberschwemmt haben. Aus kommerziellen Seiten sind sie aber inzwischen vollkommen verschwunden . Frames sind nicht nur bei Puristen schwer umstritten. Sie wurden uns von Netscape aufgedrangt und die Sachlage zwang das W3C, Frames in die HTML-Spezifikation aufzunehmen .
........--'-:.;........... "- =.
Imag e Engineering
-_.
""'-~1loIofI !· ~
o.uae '....".
l.uvvt\lll'WlS-"
-
"".bM....
o.I l.... . .IN1l. ......
. ". ,. W~tl
,Ur
......
..-II~Jarc
cr.rt9 ......
FotDgr'" '" F und Itsnerv .
sein.
Gummizellen Wenn Sie einen Text schlicht und einfach auf die Seite setzen, wird die Textzeile Ober die gesamte Breite des Browserfensters f1ieten. Wann immer der Besucher das Browserfenster aufzieht oder verkleinert, wird der Text automatisch in den neu entstandenen Raum f1ieten. Was fur den einen etn »f'eature«, ist fur den anderen ein Alptraum : Der Umbruch start den Leser, lange Textzeilen sind sch wer zu lesen. Eine Tabelle mi t einer besc hrankten Breite war das adequate ( und elnzlge ) Mittel, um den Text fluss in langen Zeilen zu bandlgen und UmbrOche bei der VerkleinerungNergrat erung des Browserfensters zu verhindern. Layouttab ellen bringen nicht nur Texte in Form, sondern nehmen auch Bilder auf und richten m it ein paar Attr ibuten Texte und Bilder gegeneinander aus.
42
2.5 Layouttabellen: fin 5egen und eine 5euche
Internet ist ..• - hinter Glas
Das flexible Raster Besonders elegante Steuerungsmec hanismen hat das Konstrukt der Tabelle dem Designer nicht zu bieten, aber trotz aller Mangel hat die Tabelle eine ste ile Karriere als Layoutraster hinter sich gebracht. Tabellen passen sich auf Wunsch dynam isch an die Grot)e des Browserfensters an, wobei gleichzeitig Bereiche der Tabelle eine feste Grof)e aufweisen und 5 0 z.B. Zeilenumbruche bei Anderungen der Fenstergrot)e verme iden. Sie richten Bilder und Texte aus und bieten selbst bei grof)en Datenmengen eine aufgeraurnte Optik.
Fundament aus nichts: Das blinde GIF Die Tabellenbreite funktioniert in Netscape 4 50 gut wie gar nicht und das Attrlbut height fur die rtohe einer Tabellenzelle 1m
-Tag wlrd schllchtweg uberlesen (was tatsachlkh korrekt ist : he ight gehort seit HTML 4 .0 zu den unerwunschten Attr ibuten ). Wird der Raum einer Tabellenspalte nicht ausgen utzt, kollabiert die Spalte in Netscape 4. Ein Fliet)text streckt eine Tabellenspalte schon mal nach mystischen Regeln, statt den Text zu umbrechen. Hier kom mt das »blinde GIF« ins Spiel. Damit Tabellenspalten nicht kollabieren, wenn ihr Inhalt nicht die geplante Breite der Spalte elnnlmm t, verwenden Webdesigner ein 1 x 1 Pixel grot)es transparentes GIF-Bild. Die Tabelle wlrd mit einer zusatzuch en Zelle angelegt in der das GIF-Bild die minimale Breite j eder Spalte »zernentlert«. " -ct r»
·Tb;l 5. elne Ttbelle CIder e.., BUd Zudem hat HTM.. ~ .o zwel Tags gebr adlt. ale soezteu flS dM e l ~tz mit Stylesheets oedacht sind : ces Dies is t ein Absatz , der mit einem benutzerdefinierten Klassenforma versehen worden ist .c/p>
Die Klasse . ab s at zforma t wird durch ein 5tylesheet definiert - im Grunde genommen nicht vlel anders als eine Absatzvorlage in Quark:
• . absat z fo r mat { font-family : Geneva , Arial , Hel vet ica , sans-serif ; f on t- si ze : 12px ; color : # 333333 }
Daruber hinaus bleten 5tylesheets Mechanismen, um auch das letzte HTML-Element zu erreichen , und gehen weit uber die Funktionalitat der Absatz- und Zeichenvorlagen in Satz- und Textverarbeltungsprogram-
Satz und Textverarbeitung sind »absatzorlentiert«( - ste formatleren Absatz tiu Absatz eines Textes uber Absatzformate. Ausnahmen werden durch manuell angewendete Zeichenstl/e oder durch elne Zelchenvorlage umgesetzt.
men hinaus. DafUr sind Stylesheets einem Handicap unterworfen, mit denen diese Anwendungen nicht karnpfen mussen : die unterschiedliche Implementierung von Stylesheet-Eigenschaften in den verschiedenen Browsern.
Die Klasse • absatzformat wlrd durch etn Stylesheet definlert - 1m Grunde,genommen nlcht vlel anders als elne Absa12vorlage In Quark:
. a l5s a t:z f orma t { font-famil : Geneva, s ans-serifj I----- -f o nt - s i ze : 2p'xj color: i 3 3 3 333
'Cl
ForrNtlenm s Jene
Wsffi1ifWi SUI:
~
St.and.rd
11
I A'
.- .... IABc
I
1= ==I§
XOI
flilnst" xt tu(ut'hllung
11
X []2
Fliln5tU"t blt'x ~ Ho_
• Schriftf.rb nun brumm!e.ie und .etzte sieh
IDZlu6en auf dieKupferader - 10, lis ob e, indem Clnun teuemum ketnen anderen Platzcec.eben bitt'. Pirx liberleete
leblll rhl t\. Wenn tie Dun dieVord"rb.ine auf die erste und die
Das tst sinnvoll , solange es sich um ein individuelles Element fur ein einzelnes HTML-Dokument handelt und der div-Container nkht fur das generelle Layout der Site verwendet und auf allen Seiten einer Site als wiederkehrendes Element eingesetzt wird .
Globale interne Stile Globale Stile formatieren besondere Elemente eines individuellen Dokuments oder Oberschreiben Eigenschaften, die in der externen Style-
sheetdatei deklariert werden . Aile globalen Stile werden innerhalb von <style>-Tags notiert, die wlederurn innerhalb des head-Elements des Dokuments liegen mOssen. FOr Browser, die Cascading Stylesheets nicht unte rstOtzen, werden die Stylesheets zusatzlkh in HTML-Kommentarsymbolen
«! -- .. .
-- »
eingeschlossen, damit ste ignoriert werden und nicht zu Fehlern in der Darstellung fOhren k6nnen . In grafischen Editoren wle GoLive 5 und Dreamweaver 4 waren globale interne Stylesheets eine praktische Technik in der Testphase, da ihre formatierenden Eigenschaften sofort im HTML-Editor sichtbar wurden, wahrend die Programme ausgelagerte Stile erst nach einer erneuten VerknOpfung oder einem erneuten Import auf das HTML-Dokument anwendeten .
o
o
< !--
o o
<style type= "text/css">
• body { background : linen hI { Eont : bold I8px Verdana ; color : #666666 } • td { vertical-align : top}
o
-->
o
o
In einem Dokument dOrfen auch durchaus mehrere style-Elemente angelegt werden - z.B. um verschiedene Sprachen oder Ausgabemedien optisch zu trennen oder eine andere logische Unterteilung herauszustellen . Wenn die Stile anhand einer Musterseite fertig deklariert sind , werden sie aus dem HTML-Dokument in die Stylesheetdatei kopiert.
64
3.5 Interne und externe 5tylesheets
Inlinestile
Interne globale Stile
Stile werden als At tribut In die sp ltzen Klammern des Tags g esetzt und verendem dam it dIe Darste llung f(jr dIe Relchweite cueses Tags.
Stile werden global im HTMLDokume nt nonert und ge tten fUr die Dauer des Dokuments.
<style type="text/css"> p {color : darkgray} body {background-color :
Inlinestile helfen in komplexen Situationen , einen Stl/ »an das Tag« zu bringen . Interne globale Stile sind s/nnvoll bei Tests und in der Testphase einer Site , aber auch, um Regeln aus einem zentralen Stylesheet fur em einzelnes Dokument zu oberschreiben.
red}
...
Der Text ist dunke lgrau vor einem roten Hintergrund
Der Text ist dunkelgrau vor einem roten Hintergrund
Externe Stylesheets
Importierte Stylesheets
Stile wetden In etner externen Datel nottett und getten fUr ate Dauer des Dokuments.
Stile werden tn ahnlicher Weise wle bel der Link-Anwe/sung aus etaer externen Datel gelesen.
...
<style type= "text/css ">
-->
... ...
Der Text ist dunkelgrau vor einem roten Hintergrund
Der Text ist dunkelgrau vor einem roten Hintergrund
Fast im mer stellen externe Dateien die sinnvollste Anwendung von Stylesheets dar. Zentrale Stylesheetdateien sind etttzient, denn Anderungen werden nur an elner Stelle vorg enomm en. Sie sichern das konsistente Erscheinungsbl/d uber aile Seiten einer Site.
< !--
@import "s ti l. c s s" ;
65
Kapitel 3
Grundlegende Techniken
Die Stylesheetdatei ist eine schlichte Textdatei, die mit einfachen Texteditoren erstellt wird und typischerweise die Endung ' .css erhCiit.
..."
II I •
[I
us2 - ••_ljIlrt,htm l
uil -o . u _html nsZ -p . ,.hIm! Slll.en
' able.ht rnl
04 .12.2001
12 KI 12 Ka a K&
2S. 11.200 1
04.12.2001 Ceuern 08 .11.2001
Ookum~n' OoIl.um~nl
DoItum enl
.. KI
Ap ple ~ ",p1du , Dokument
.. KI
Ookum enl
2entra Ie Stylesheetdateien Eine ausgelagerte Datei mit Stilanweisungen ist die beste Voraussetzung fur die Konsistenz, erlaubt eine zentrale Pflege und macht Anderungen efftzlent . Zusatzlkh spart die externe Datei Bandbreite - statt die Stile in jedem Dokument zu wiederholen , wtrd die Stylesheetdatei Obertragen und von allen Dokumenten elner Site genutzt. Die Stylesheetdatei wird im -Bereichjedes HTML-Dokuments aufgerufen :
o Die Stylesheetdatei kann aus Dreamweaver oder GoLive heraus erstellt werden, mit NotePad aus dem Windows-ZubehOr, mit Programmeditoren wie Dana oder TextPad unter Windows, mit SimpleText oder dem komfortablen Programmeditor BBedit auf dem Mac.
.a
T• • IEdll
Ablille
Burbellen
Formal
hnster
Eine gelinkte Stylesheetdatei ist der sichere Weg, Stylesheets allen Browsern zur VerfUgung zu stellen , die Stylesheets beherrschen , und gleichzeitig von Browern fernzuhalten , die Cascading Stylesheets nicht unterstOtzen .
Hllfe
body ( margin: OpxOpx; background: snow urlOmageslpgbg.gil) repeat-x ; lont-family : Geneva. Arial . Helvetica. san-serif color : 1333333 ; line-height: 146%} .pointer { curso r: default } Id
