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&
OI.-SM.,,,,m.tot<" .... ' I:.ul'
s. ••" flNI,n 54
"- . . . g"
""d\ ·su me "St.,.. . ("''-II'''''' 0." .. 1.~n.l\4.tl ....
.Iee, ....., CI.. _ _
,..... ""'. CD , ,,.,., lI · .
~A'
,.~ 1'flIICJ'I1 lodllrt<TI tl..
und Tags zu testen , wurde klar, dass eine CD-ROM dazu gehbrt. Auf dem Papier bewegt sich nichts ...
Ite,.,..",
,.,,,.g•••
!l'..... '" ......
TM!4 -a.,"",. ", ......
Ae••• ..c!'I._IIOIt' "'Il"'il.H o,• .....,piLu.... fIolI. , ...0'" knp • •n D u nc, ! ' hi Bud...
"'9"'l'llr'ld"'f'S
aft• • ""d"'yJnlA' _
Inl..... l .Dorttl.b.,. s...u04:I\1l4!4Oilloc."ok... V.",d'lI,II\.I. liH.,'.",II .... I"...
Nach einem Doppelklick auf index.htm l erscheint die Obersichtsseite von Cascading 5tylesheets . Unter dem Navigationspunkt »C5 5 2-Referenz« sind aile C552-Eigenschaften (die auch die Eigenschaften von C551 beinhalten) mit nahezu identischem Text beschrieben und fast aile sind mit et-
Aile Beispiele »Onllne« : Die CD zum Buch
nem oder mehreren Beispielen versehen. Damit kann jeder Benutzer testen , was sein Browser aus den jeweiiigen Eigenschaften macht und welche Browserdie Eigenschaften unterstUtzen . Unter dem Navigationspunkt »HTML-4 .0 1-Referenz« sind aile Tags aus HTML-401 und ihre Attr ibute untergebracht, die ebenfalls mit Beispielen dokumentiert sind . Unter »Farben, Zeichen und Mage« Iiegt die Liste der 128 Farbnamen , die von den meisten Browsern verstanden werden (auch wenn ich noch einmal davor warne, sie tatsachlkh einzusetzen). In diesem Ordner ist auch eine Liste der HTML-4 .01-50nderzeichen, anhand derer jeder Benutzer wleder testen kann, welche 50nderzeichen von welchem Browser unterstUtzt werden. In der 5ektion »Workshop« liegen die Beispiele aus dem Kapitel 6 und unter »Externe Links« k6nnen 5 ie Websites zum Thema 5tylesheets direkt ansteuern .
12
Ein Schritt zurUck Ein Schritt vor Kapitel 1 Wie sich das Web seiber ausbremste
Auch wenn wir glauben, dass sich die Technik uberschlagt, dass sich neue Technologien schnell und unaufhaltsam ausbreiten - interessanterweise steckt ausgerechnet das Webdesign in einer langjahrigen Phase des Stilstands . Seit 1996 gibt es die Werkzeuge fur ein ausgefeiltes Design - Cascading Styiesheets -, aber hler haben aile Beteiligten dafOr gesorgt, dass die Welt des Webs auf dem Stand vor 1996 stehen bleibt : die Hersteller von Browsern, die Webdesigner und die Standardisierungsgremien . Die einen gaben sich wenig MOhe, neue Technologien in ihre Browser zu integrieren , die anderen gaben sich viel MOhe, die Fehler der Browser zu verbergen . Die fursorglichen Gremien schufen Standards und riefen die Designer auf, die Finger von ihren Standards zu lassen, um alte Browser nicht in Verlegenheit zu bringen. Das war kein Browserkrieg, sondern das gr6f>te Computerspiel aller Zeiten: Tricky HTML.
In der digitalen steinzeit bis in die Mitte der 90er Jahre war das Internet eln Turnmelplatz der Puristen - Text, nichts als Text und ein paar Hyperlinks. schbngeister hatten hier nichts zu suchen . Dementsprechend stellte der Autor nur beschrankte AnsprOche an
Offene Plattformen brauchen die solide UnterstUtzung der Hersteller- nur das tragt das Verfahren.
das Layout und der Besucher gab sich mit einem einfachen seitenbild zufrieden - Hauptsache waren Inhalt und Geschwindigkeit.
Wenn Dokumente eitel werden ... HTML beherbergt einen besonderen Aspekt: Es gibt Absatze, Oberschriften und Listen. Am Anfang seiner Karriere kOmmerte sich das HTML-Dokument nicht um sein Erscheinungsbild , trug aber bereits die struktur fur die Organisation des Inhalts in sich . Mit dem zunehmenden Erfolg des Internets und HTML stiegen die AnsprOche an die Optik ... oder war es umgekehrt? Zuerst kamen die cb»- und -Tags (bold und italic) , schlief,lich mbchte jeder Autor das eine oder andere betonen und hervorheben . Das -Tag, mit dem wrr heute noch Bilder auf die HTML-seite setzen , war ein schnellschuss von Mosaic, dem Vorganger des heutigen NetscapeBrowsers. Das -Tag schnesuch durchbrach massiv die goldene Regel, dass HTML nur die struktur und den Inhalt llefert, und nicht fur die Darstellung verantwortlich zeichnen solie . Die Browser Obertrafen sich in der Entwicklung eigener Tags und das W3C - das Konsortium , das die Empfehlungen fur HTML ausspricht - rannte hinterher und versuchte, das Chaos zu konsolidieren .
Die Empfehlungen des W3C Cascading stylesheets [CSS] sind eine Empfehlung des World Wide Web Consortium (W3C). CSS1 stammt von 1996 und befasste sich in erster Linie mit der Darstellung von schrift und der Formatierung von Texten . CSS1 lief, viele interessante Elemente ausen vor : Dazu gehbren insbesondere das Erscheinungsbild von Tabellen und die Positionierung von Elementen .
Das World Wide Web Consortium, abgektJrzt W3C, ist ein Gremium von Universitaten, Firmen wie Netscape und Microsoft und Experten aus verwandten Gebieten . Eine seiner Aufgaben ist es, »Emp fehlungenll auszusprechen, die von den Entwicklern von Browsern als »5 tandardsll anerkannt werden . Das W3C hat zwei Empfehlungen zu 5tylesheets ausgesprochen : C551 und C552 . Zurzeit arbeitet das W3C an C553 .
15
Ein Schritt zuruck Ein Schritt vor
Kapitel
1 Wie sich das Web seiber ausbremste
Ladbare Zekhensatze waren ausgeklammert, auch die Unterstutzung weiterer Medien war in C551 noch nicht inbegriffen - der Monitor des Computers blieb das Hauptziel. C551 diente im Wesentlichen da-
zu. die BedOrfnisse der »Destgner« unter den Entwicklern zu befriedigen und das Erscheinen weiterer Tags fur die Darstellung von 5chriften zu verhindern . C552 wurde im Mai 98 verabschiedet. Es erweitert C551 um 42 Eigenschaften, 50 dass C551 eine Untermenge von C552 ist . Der Clou von C552 sind frei positionierbare HTML-Elemente. Alternative Ausgaben sind ein wichtiger Bestandteil von C552 . In C553 erwarten wlr den lang ersehnten 5paltensatz, vielleicht sogar einen registerhaltigen 5atz und eine intensive Auseinandersetzung mit alternativen Medien.
Die groBe Suche Mit 5tylesheets trennen sich Inhalt und Darstellung - eine alte Idee, die schon vor HTML und dem W3C in vielen Ansatzen verfolgt wurde. Wissenschaftler und Techniker hatten schon lange den Wunsch, ihre Arbeiten In Archiven zu speichern und dabei eine effiziente 5uche nach Begriffen mit einer Relevanz zu versehen . Die Idee war, die Relevanz eines Begriffs aus der 5truktur des Dokumentes zu lesen : Der Begriff, der in einer Oberschrift gefunden wlrd, ist relevanter als ein Begriff, der im Text auftaucht. Ein Begriff, der als Definition gekennzeichnet lst, gibt dem Dokument eine h6here Relevanz als der gleiche Begriff irgendwo tief in einer Auflistung. Wie Relevanzkrtterlen angelegt sind, ist 5ache des Archivs. Die 5uchmaschinen haben diese Idee aufgegriffen .
Abgespeckt und gestrafft Mit 5tylesheets verschwinden die - und -ccenteo- und -Tags aus dem HTML-Dokument. 5tattdessen liegen die Anweisungen , wie HTML-Elemente darzustellen sind, an zentraler Stelle vorzugsweise in einer separaten Datei -, wo jedes HTML-Dokumentauf sie zugreifen kann. Die reinigende Wirkung: Das Dokument wird schlank und rank, seine 5truktur gestrafft, Konsistenz zleht em und Pflege und Erweiterung der 5eiten wird vereinfacht. In diesem 5inne sind Cascading 5tylesheets ein 5chritt zurOck und ein 5chritt vor. 5ie sind die Konsolidierung des Chaos, entsorgen den immensen Overhead der Darstellung und gehen einen 5chritt weiter : 5ie Obernehmen Verantwortung fur das Layout, beenden die Konzentration auf den Computermonitor, kOmmern sich um Druck- und 5prachausgabe und packen am Ende die Einkaufsseite auch noch auf das Dispiay des Palmtops.
16
1 .2 Stillstand
1.2
Ein Schritt zurUck Ein Schritt vor
Stillstand
Einer der grof,en Grundsatze, die vom W3C im m er wieder ausgesprochen wurden, ist die »Aufwarts- und Abwartskornpatlbtltat«: Webdesigner sollen Seiten 50 anlegen, dass Benutzer mit alteren Browsern nicht benachtei ligt werden und die Entwickler von Browsern so llen ihre Browser 50 programmieren, dass sie unbekannte Elem ente ignorieren .
Ein buddhistischer Monch stellte diese Frage: ))Wenn der Wagen sich nicht mehr bewegt, wen willst Du dann treten: die Kutsche oder das Pferd? cc
NatOrlich hetst das nkht, dass ein Browser von 1996 eine Seite, die unter Aussch6pfung der M6glichkeiten von HTML 4 und CSS2 erstellt wurde , noch korrekt darstellen kann - im Idealfall (wenn der Entwickler der Seite sehr umsichtig agiert ) kann ein Browser wle Internet Explorer 3 den Inhalt der Seite anzeigen (oder zumindest Teile des Inhalts), ohne dabei abzustOrzen .
Stillstand Netscape 4 .xx wurde nur wen ige Tage vor der Verabsch iedung von CSS1 im Jahr 1996 freigegeben und dementsprechend entwickelt, als Stylesheets noch in der Planung waren . Netscape 4 .xx beherrscht nur wenige 5tile aus C551 und die zumelst nlcht korrekt. An C552 , die Empfehlung und Erweiterung von 1998, tst mit ROcksicht auf Netscape 4 .xx nicht zu denken . Internet Explorer wurde in der gle ichen Zeit konstant gepflegt. 50 kommt es, dass Sti le, die im Internet Explorer unterstOtzt werden, in Netscape gar nich t ode r nicht korrek t behandelt werden, 50 dass wir nur wenige Stile verwenden , wenn wir sichergehen wollen, dass die 5eiten auch in Netscape korrekt dargestellt werden .
Ein Grundsatz fahrt auf Grund So fOh rte der gut gemeinte Grundsatz des W3C in den letzten Jahren dazu, dass sich Webentwickler von C5S2 und selbst von CSS1 lieber fernhie lten und Netscape in den Updates bis 4 .78 keinen Finger ruhrte , um die fehlerhafte Interpretation von CSS1 zu korr lgieren und zurnln dest eine Basis fur CSS2 zu legen . Netscape 5 ist ausgefa llen, Netscape 6 kam viel zu spat auf den Markt. Ausgebremst.
17
fin Schritt zuriick fin Schritt vor
DERSPJEGEL
Kapitel 1 Wie sich das Web seiber ausbremste
--_ ._ .-....
._"
- --
F1....... , (;..... ,h
....
'.M ' . ,..~
__.. -
- - - ...
~~- -;-:.:;:~
' - 0_--"-0_ --_t...t.:
.. ---"'---=---._ ---, ....
_-
....... Y.-Qrf....... Chill......
~-.
~=~
_~-
<TITLE>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 .
To Frame or not to Frame: Die Vorteile Unbestritten tst, dass Frames eine Seite so sicher und flexibel struktu-
zuruc
Vo
arts
Moderne Browser beherrschen auch die Kunst, den Weg des Benutzers durch einen Frameset zu verfolgen . Altere Browser hingegen verlieren hier die Orlentierung. Das »ZurOck« ist der Weg zu der URL, von der aus der Frameset aufgerufen wurde.
rieren kbnnen wie kaum eine andere Technik. Mit Frames erzlelt der Entwickler noch am einfachsten eine intuitive Navigation, und das insbesondere fur gro£e Sites mit hunderten von Seiten. Die Seiten mit den Inhalten bleiben kurz, da die Navigation nicht auf jeder Seite implementiert werden muss , sondern als eigenstandiges HTML-Dokument verbleibt. Da nur Seiten mit Inhalten beim Klick auf einen Link ausgetauscht werden rnussen, sind die Ladezeiten kOrzer. Die Pfege des Seitenangebots ist einfacher. Wenn skh die Navigation andert, wird nur ein einziges HTML-Dokumentausgetauscht.
To Frame or not to Frame: Die Nachteile • Frameseiten kbnnen nicht ohne weiteres in die Bookmarks oder Favoriten aufgenommen werden - wenn keine besonderen Vorkehrungen getroffen werden, wird nur die Datei, die den Frameset enthalt, als Bookmark gespeichert. • Seiten mit Frames kbnnen nicht ohne weiteres gedruckt werden. • Frames kbnnen auf gro£en Monitoren gut aussehen , auf kleinen Monitoren hingegen sind sie ein Drama. • Frames kosten Orientierung: Nur der Titel des Framesets wtrd eingespielt. Der Seitentitel und andere Informat ionen der Inhaltsseiten werden unterdrOckt. • Frames kosten Besucher, die Ober Hyperlinks auf die Seite gelangen. Ober einen Link wird der Besucher im besten Faile in der Startkonfiguration des Framesets landen und muss sich dort alleine bis zur gewOnschten Information durchkarnpfen - bei gro£en Sites ein aussichtsloses Unterfangen. Der Besucher, der Ober eine Suchmaschine eine Seite findet, die in einem Frameset eingebettet tst. wird nicht auf den Frameset, sondern explizit zu dieser Seite geleitet. Das Design der Seite ist ver/oren und der Besucher auch, wenn die Seite keine eigenen Navigationselemente enthalt.
• Suchmaschinen finden nicht den Frameset - sie suchen und werten Inhalte und listen sie mit der Adresse und einer kurzen Einleitung. Wer dem Link auf eine Frameseite folgt, landet in einer Inhaltsseite und findet vielleicht niemals den umfassenden Frame mit dem notwendigen Kontext. Frames widersprechen auch zwei Grundsatzen von HTML: • Jede Seite soli erne eindeutige Adresse haben und direkt adressierbar sein. • HTML definiert nur die Struktur, nicht aber die Darstellung . Aber es waren wohl eher die oben genannten GrOnde, die Frames ins Abseits brachten . Insbesondere das Argument der fehlenden Bookmarks zleht bei jedem Betreiber einer Site.
38
2.4 Aus dem Fenster geworfen: Frames
Internet ist . • . hinter Glas
Frameset »standardkonforrn« NatOrlich gibt es Mittel und Wege, den Frameset korrekt einzuspielen und viele der Nachteile auszuschalten . Nach dem ersten Laden des Framesets und der dazugehbrigen Seiten wird bei einem Klick auf einen Link nicht nur eine neue Inhaltsseite geladen, sondern ein neuer Frameset mit allen Frames. Da bereits elnige Elemente wie die Navigationsseite im Cache des Browsers liegen und neben dem neuen Inhalt lediglich die Datei frameset.html geladen werden muss, sind die Ladezeiten nur unbedeutend langer. Der Vorteil des Framelayouts bleibt unberOhrt: Kernelemente wie die Navigationsleiste bleiben immer im sichtbaren Ausschnitt des Browserfensters , auch wenn die Seite gescrollt wird. Der Besucher kannjetzt ein Bookmark auf die Seite setzen . Suchmaschinen kbnnen wir folgenderrnasen davon abhalten, andere Seiten als den Frameset zu laden:
o
<meta name= "robots " content= "noindex ">
wW,!",.frameset.de
Die klassische Frameseite behalt aile Frameseiten bei und ladt bei Bedarf nur eine neue Inhaltsseite in den Frameset. Dabei bleibt stets die URL des ursprOnglichen Framesets bestehen, die Unterseiten des Framesets k6nnen nicht gelinkt werden . www frameset de
www.frameset.de
~P rod u kte!
Produkte
Produkte
Support
~epo rt
Support
Aktuelles
Aktuelles
'Akt uelles:
nav.html
nav .html
produkte .html
www.frameset-produkte.de
lIupport .html
nav .html
www.frameset-aktuelles.de
www.frameset-sufll.°rt.de
! Produkte
Produkte
Produkte
I Support
Support
Support
I Aktuelles
IA""elle. nav.html
Aktuelles
I produkte .html
J
aktuelles .html
1=""bU ,
support .html
-'"
Da Suchmaschinen auch den Inhalt elner Seite durchforsten, ist der inhaltslose Frameset benachteiligt. Also »verstecken« erfahrene Designer lieber den Frameset vor den Suchmaschinen und bauen eine Abfrage in Frameseiten ein, die dem einsamen Stand einer Inhaltsseite ohne erklarenden und strukturierenden Rahmen entgegenwirkt: Sie
nav .html
aktuel les .html
Die Nachteile des Framedesigns werden aufgehoben, wenn bei einem Klick auf einen Link nicht nur eine neue Inhaltsseite, sondern samtliche Seiten des Framesets neu geladen werden .
prOfen, ob die Seite allein und ohne den klarenden Kontext des Framesets dasteht und wenn dies der Fall rst, laden sie die Framesetdatei.
39
Internet ist .• . hinter Glas
Kapitel 2
Der Bildschirm ist keine Seite
Zwei kleine Skripte sorgen dafur, dass eine Inhaltsseite den Frameset nachladt, wenn der Frameset noch nicht geladen ist:
Das Skript wird in den Head-Block der Framesetdatei gesetzt.
<script language= "JavaScriptl .l "> var frameset_geladen = "o kay";
Das Skript wlrd In die AbteilungJeder Inhaltsseite eingesetz t und /les t die Variable frameset_geladen. Wenn es In der Varlablen den String okay nlcht findet, wird der dazugehOrlge Frameset geladen.
<script l ang ua ge ="J a va Sc r i p t l . l " > function ersetzen(adresse) ( top .location.replace(adresse) :} i f (top . frameset_geladen + "" ! = "okay " ) ersetzen( " .. /frameset .html " ) ; Ein wenig von ihrer Eleganz verlieren Frameseiten bei diesem Verfahren allerdings doch . Dazu ist alles zu trickreich, erfordert eine gewisse Erfahrung, ist fehleranfallig und uneffizient in Hinsicht auf die Pflege und Erweiterung der Seiten .
Verbleibende Probleme Benutzer mit sprachbasierten Browsern haben typischerweise mehr Probleme als zuvor. Bei jedem Frameset mussen sie slch durch die Frameseiten navlgieren - sehen Sie sich an, wie Lynx sich durch Framesets navigiert, um zu verstehen, wie das vor sich geht.
Wenn sichergestellt tst, dass jede Seite oder Kombination von Seiten einen eigenen Frameset bes itzt, reduzieren sich die Probleme des Framedesigns. Seiten k6nnen in die Bookmarks aufgenommen werden , die vorwarts- und ZurOckschalter auch alter Browser funktionieren wieder. Weiterhin behalten Frameseiten ihre hochqeschatzte Modularitat. Obwohl sich die Nachteile gegenOber typischen Framesets reduzleren. bleiben auf der Minusseite dennoch ein hoher Pflegeaufwand und aufwendige Skripte, um einzelne Daten in die Framesets einzubinden . Bei einem Klick auf einen Link in einer normal geframten Seite wird nur der betroffene Frame neu geladen . Die restlichen Frameseiten blei ben stehen. Wenn allerdin~s bei jedem Klick auf einen Hyperlink der komplette Frameset ausgetauscht wlrd. verschwinden sarntlkhe Seiten und tauchen neu auf - ein unsch6ner visueller Effekt. Zudem wird die Ladezeit langer. Bel einem Hyperlink auf einen neuen Frameset geht der Zustand des vorangegangenen Framesets verloren . Die Summe der Nachtei le bleibt also weiterhin 50 gravierend, dass Seiten mit Frames in HTML 4 .01 nicht als !Doctype s tr ict gekennzeichnet werden k6nnen .
40
2.5 Layouttabellen: Ein 5egen und eine 5euche
2.5
Internet ist ..• - hinter Glas
layouttabellen: Ein Segen und eine Seuche
Tabellen sind elne zentrale Komponente von HTML. Bevor es Tabellen gab, war der Webdesigner gezwungen, aile Elemente im normalen Dokumentenfluss zu setzen . Hinter ihrer schlichten Fahigkeit, tabellarische Daten zu organisieren und zu prasentleren, sorgen sie fur Konsistenz im Seitenlayout. Sie bilden das Layoutraster, ohne das fast aile Seiten schllchtweg zusammenbrechen WOrden , sie sprengen die starre unearttat der Inhalte und bilden den Spaltensatz der Zeitschriften nach - urn so das Format
Wir bewegen uns hier im dunkelsten Kapitel des real existierenden Webdesigns: Aus Mangel an »echteru Layoutwerkzeugen benutzen Webdesigner Tabellen, um ein bestimmtes Layout zu erzwingen. Aber: Es funktioniert.
des Bildschirms sinnvoll zu nutzen . Tabellen sind heute das Layoutwerkzeug Nummer eins und werden es noch so lange bleiben , bis Designer komfortabel mit den Position ierungstechniken in Cascading Stylesheets umgehen dOrfen - und konnen - und vielleicht auch noch lanqer, wenn die Technik der Layouttabellen in den nachsten Spezifikationen von HTML und Cascading Stylesheets wetter ausgebaut wird (und die Mainstream-Browser der Spezifikation folgen) .
Das GenJst, das den Inhalt struktunett. bricht ohne Inhalt zusammen Tabellenlayout ist ein knallhartes Geschaft. In vielen Seiten fordert dieses Gerust schon den gr6E>ten Anteil am Datenvolumen .
Vom Leben in der Zelle
seinen ureigensten Algorithmus, urn die Grage einer Tabellenzelle zu berechnen, undjeder Browser nutzt seine ganze Kreativitat, urn Inhaite
.... o .
I
Tabellen sind aber auch komplex und in den Browsern und ihren verschiedenen Versionen nur zogerltch irnplementiert. Jeder Browser hat
-
--
II
..
I I
II
I I II
~
1st
in Tabellenzellen zu platzieren. Jeder Browser zeigt eine andere Dar-
I :~ I
stellung und sorgfaltig ausgearbeitete Layouts brechen irn nachsten Browser. Technisch versierte Layouter mOssen zu fantasievollen Tricks
II
II
I~~,
~I
II
greifen, urn der Layouttabelle einen »Stand" in m6glichst vielen Browsern zu geben (siehe Abschnitt »Fundament aus nichts: Das blinde GIF" in diesem Kapitel). Ein Mechanismus fur einen Oberlauf - wenn eln Element in der Ta-
,
bellenzellen grager ist als die Tabellenzelle - fehlt vollkommen . 1stz.B.
,
ein Bild grager als die Tabellenzelle, in die es platziert wurde , weitet sich die Zelle gummiartig aus und drangt aile folgenden Zeilen nach unten und aile folgenden Spalten nach rechts .
!
!
-
.-
41
Internet ist . • . hinter Glas
Kapitel 2
Der Bildschirm ist keine Seite
Tabellen sind mit groten Datenmengen schnell Oberlastet und ihr GerOst erzeugt schon bei rnttt elgrosen Seiten eine komple xe Struktur, deren Pflege nur unter grosen MOhen durchzuziehen ist.
Aufgeraumt und ausgerichtet Haben Sie sich schon mal gefragt, warum einige Seiten so wunderbar aurgeraumt aussehen? Eine Seite, in der Bild- und Texte lemente horizontal und vertikal ausgerichtet sind, erzeugt imm er einen gute n Eindruck - die visuelle Verbindung zwischen den Ele-
---
ment en gefallt unserem Auge. Auf der anderen Seite : Nichts sieht so unprofessionell aus, wie eine Seite, in der die Inhalte direkt an andere Elemente reichen, wenn der Text direkt neben dem Bild lauft und Zahlen in Tabellen bts an die Tabellenrander reichen . 1m Wesentlichen wird das Erscheinungsbild das Werk einer sauberen Ausrichtung der Inhalte in einem hochkomplexen Konstrukt aus Tabel len
Wenn alles 5 0 scnon aufgeraumt auss ieh t, dann steckt bestim mt etne Tabelle dahinter - und Blut, 5chweiE'> 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»
r
" NUl cne glelule werse
~UlgL
ell I
uuuuec
'-JII
lUI ell Ie 1IIIIIIIIIdie Il u l le u el
Tabelle oder von Tabel lenzellen .
1-
-
Dabei muss das Bild tatsachlich nur einen Pixel hoch und breit sein - es wird Ober das width -Attribut des -Tags Ober se ine Gra/Se hinaus skaliert. Die Datenmenge, die durch das zusatzliche blinde GIF mit eingebracht wird, kann also beruh igt vernachlassig t werden .
I
I I I I
J
43
Kapitel 2
Internet ist .• . hinter Glas
Der Bildschirm ist keine Seite
Tabellen mit Stil Das W3C hat in C551 elnen Bogen um Tabelien gemacht und erst C552 bringt spezielie Eigenschaften fur Tabellen , die ein ftexibleres Layout fOr verschledene Monitorgr6fSen (und unterschiedliche Ausgabemedien) er6ffnen . Aber schon C551 erleichtert den »Tabeliensatz« und gestaltet die Handhabung eieganter. Insbesondere die Stile zum Ausrichten von Inhalten (alies linksbundig, Grundlinie nach oben) bekommt der 5truktur des HTML-Dokuments gut und wirkt in den Mainstream-Browsern ab Version 4 zuverlasstg. C55 bietet Mechanismen, mit denen Texte in Tabelien von normalen Absatztexten unterschieden werden, um so innerhalb von Tabelien mit anderen 5chriften zu arbeiten . Das blinde GIF allerdings lebt welter, Bisiang hat kein Browser die C55-Elgenschaften implementiert, mit denen die minimale oder maximale Breite und H6he von Tabellenzellen (und anderen Elementen) festgelegt werden.
ze ich t en N arne
Bes ch r ei°buna
° d 1 Uruco ' de Nurn ens
Schone Aussichten
£ ¤
brltlsch es Pfund generlsches
£ ¤
U+OOA3 U+OOA4
-ctbodv», und . -ctbody» legt
Il l"
¥j ¦ ;
¥ ¦
U+OOA5 ~ U+OOA6
t'§l1
§
Japanlscher Yen gebrochener i senkrechter Strlch Paragraph, Absatzz elchen
Scrol/ende Tabel/en bieten zwar keinen Ausweg aus dem Dilemma der Layouttabel/en , waren aber immerhin in der Lage, lange Veranstaltungskalender und ProduktObersichten greifbarer zu gestalten.
44
,...,...,...
HTML 4 .0 detlnlert drei neue Tags fur
:
Q den
~
»Tabellenkorper« fest, in dem die Daten dargestelit werden , einen Tabelienkopf und den FufS. Hinter dleser Dreiteilung steckt die Idee, den Benutzer durch die
Tabelie rolien zu lassen, und dabei Kopf und FufS der Tabelie fest im Fenster zu zeigen. Das wurde so manch elner langen Darsteliung von
tabeliarischen Daten gut tun ... Diese Eigenschaften sind bis heute nur vereinzelt in wenigen Browsern anzutreffen.
2.6 Layout mit Cascading Stylesheets
2.6
Internet ist . . • . hinter Glas
Layout mit Cascading Stylesheets
FOr die Typografie werden bereits heute auf allen grol)en kommerziellen 5eiten 5tylesheets eingesetzt. 5tylesheets ersetzen die unzureichende 5chriftenformatierung mit dem -Tag und sorgen so fur schlankere HTML-Dokumente, die eine geringere Bandbreite erfordern, schaffen mit einfachen Mitteln Konsistenz und vereinfachen die Pflege. Der Einsatz von 5tylesheets fur die 5chriftenformatierung ist intuitiv und wird von professionellen Anwendungen wie Macromedia Dreamweaver und Adobe GoLive gut unterstOtzt.
Gratwanderungen C55Z beinhaltet die Werkzeuge, um auch das Layout elner 5eite zu
Mit vier Methoden fur die Positionierung hat CSS2 ein rnachtlges Werkzeug fur die Positionierung von Inhalten und damit ein Gerustfur das Layout mitgebracht. Seine funktionalltat geht uber die Verfahren, wie sie uns selbst professionelle Satz· systeme heute bieten, weit hinaus.
Obernehmen. 5ie werden nur kaum genutzt, da die meisten Layouttechniken mit 5tylesheets in den verschiedenen Browsern der Version 4 noch nicht ausreichend unterstOtzt wurden. C55-Techniken fur das Layout sind nlcht 50 lntuttlv wie 5chriftenformatierung mit C55 . 50bald es um die Generierung des Layouts aus 5tylesheets geht, beginnt eine Gratwanderung zwischen Programmierung und klassischen Layouttechniken . So gibt es kaum intuitive Werkzeuge fur die Generierung von 5tylesheets und das Know-how ist noch wenig verbreitet. Noch eine weitere Gratwanderung bringt das Layout mit 5tylesheets mit sich : Bislang wurde »nur« gefordert, dass Webseiten auch mit alteren Browsern funktionsfahig sind - mit gro!)en Monitoren , kleinen Monitoren, schwacher Hardware, in Textbrowsern - , aber nun fordern mehr und mehr Technologien den Zugang ins Internet.
Wie Stylesheets ein Tag umfunktionieren 5tylesheets ersetzen die formatierenden Attribute in HTML-Tags. Die 5chrift im Dokument wird nicht mehr Ober -cfonb-Tags gesteuert, sondern Tags wie ,
, und -ctd» werden in 5tylesheets »umdeflnlert«. 1m HTML-Dokument ist den Tags nichts davon anzusehen - lediglich die formatierenden Attribute fehlen .
~!ii:i~~~~~l C"cadong StyleshutJ l OM e n n.at'lnu Jedn •
&:"'I.o'J • •
I I. Q.
Positiouierung - Layout mit Sryl esh eets
~ ..
Der Bildschirm ist keine Seite
4.0 : "",. T.l1I;JI o-brld'lt.
- :~~::;:Sg~~acht
Sind ;
-und das
h ide T.~s nehm+n e.n. ~Isch lU'Sarrmenoehotende _----_-
GRJC'Cl4' 'Wonmthr... "" HTML-Element." ~ . : .B. den
llPlSChen Inhalt elf'l. ' Nau~bOns"tSte mit Hypilrilnls, etnetTI1..00 0 und be. ood "" n Hlnw,,,,.n . ~ OMe Style,huu ulgen und <SP¥'I> ~_Ul4' Ausw.o..unoen auf den Inh.t. SI. •QII. n 't14'1me1v elM RtlM ..on E1oel'ltchllte" fur dltH GnJppt ~on HTMl.-e14rnentel'l
zuulJVTlenfaue" . -;II 0 • • <-T.O 1St I".b•• oncl .... tiJf dill PosrtJOr'liltrvt'lO gedlcht. Et sen - zuurnn"oen rTlIt
..tntm Styleshett - doe G ~ '00 HTML.-€I+m.ntln ,aus dem ColunwcntenRl.Iu her.ulnehmen l$Id .......n.r .,orQ4Otb_n.n Posltlon lin Oob....... rrt Uf'Cerbnl'WOl"' .
_C!lscadlng swtesneeee lOrrien r'lo!thezu Jedes HTM..·Elemen t po$ ltl onler en - set es eln T e x t ~ t z In < p>·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 -TaQ • Bejde T~ eiN! IOOlsch ~hOtende Grl...,pe von metYeren HTM...-Elementen 8Uf - z.B den l~i schen If't'l.alt e lnet' Nev~tlonslelst e m it Hyper1lrK S, eeeen Logo IJld bMonderen
nenmen
Hln w ei5erl .
Ot'ne Styleshee 5 ze;gen < dlv> '-Jld <wen> kelne AuiW lrkLl"l98" sS ae n I~ l t . Sle soueo v le lme ly eme Re he von EI~t"t en tiS dl ese Gn...we von KT.....·Elemen t en ~(~sen .• OM
·TeQ 1st insbesonder e f\J' de POSlti onler\llQ oedad1 t. Es soli - ZVSMY1"Ien mit emem St vtesheet - die ~ von HTM.,·
EI@l'l"'l@nten
Ein Tei! der Positionierung mittels C55-Konstrukten ist in professionellen HTML-Editoren bereits unter einer intuitiven grafischen Oberttecne umgesetzt.
~
vor~
c:k!m
Dok Ll'n«l tenfl lJS.~ I"I@ , ~
t.n::I an elner
Position 1m Dokunen t lJ"It@l1)tlnoen •
Die Stylesheets, deren Eigenschaften die Attribute der Tags ersetzen, sind entweder im Kopf der HTML-Datei untergebracht oder in einer externen Datei versammelt und steuern die Darstellung der Tags in der gesamten Site . Nun erfordert eine aufwendig gestaltete Seite mehr als nur ein einzrges Absatzformat - in Satzprogrammen benutzt der Setzer viele verschiedene Absatzformate : Texte ohne Einzug, Texte mit Einzug, Bildunterschriften - Stylesheets klassifizieren Tags, so dass Variationen fur ein Tag entstehen . Das Stylesheet bestimmt, dass der erste Absatz in einem
-Tag innerhalb eines
-Tags immer in einem fetten Schnitt und 10% gro&er als die folgenden Absatze gesetzt wird - schon entsteht automatisch die typische Einleitung eines Artikels . Aus elnern gewohnlichen Tag
werden verschiedene Klassen von -q»- fur verschiedene Aufgaben erzeugt, je nachdem, wo Inhalte in der Struktur des HTMLDokuments untergebracht sind .
Positionierung - Layout mit Stylesheets Cascading Stylesheets konnen nahezujedes HTML-Element positionieren - sei es eln Textabsatz in
-Tags, eine Tabelle oder eln Bild. Zudem hat HTML 4 .0 zwei Tags gebracht, die speziell fur den Einsatz mit Stylesheets gedacht sind : das -cdlvc- und das -csparo-Iaq.
46
2 .6 Layout mit Cascading Stylesheets
o o
Internet ist hinter Glas
<style type= "tex less "> < !--
posi ion : fixed ; II position : absolute ;
~navlinks
width : 43px ; top :9px ; left :9px ;} =navreehts display :bloek ; position :absolute ; width :gem ; op :O ; right :O ; =e b e n e O
width :lOO% ;}
#ma i n
o o
o
o o o
marg in -right :gem ; paddi ng -right :9px ;
-->
Die Positionierung durch -ailv> Elemente ist f1exibler und schlanker als der Aufbau eines Dokuments mit Hi/fe von Layoutouttabellen, leichter zu andern und einfacher zu pflegen , Anders als in Layouttabellen bieibt der /nhalt in seiner iogisch en Reihenfolge ,
............. _ _ _ _ w _ _ ..... " _ _ ~ _..... _. _ _ v .. _
-- -- -- - - -,-
.~.
... _
47
Internet ist .• . hinter Glas
Kapitel 2
Der Bildschirm ist keine Seite
Beide Tags nehmen eine logisch zusamrnenqehorende Gruppe von mehreren HTML-Elementen auf - z.B. den typischen Inhalt einer Navigationsleiste mit Hyperlinks, einem Logo und besonderen Hinweisen. Ohne 5ty lesheets zeigen -cdlv» und <span> keine Auswirkungen auf den Inhalt. 5ie sollen vielmehr eine Reihe von Eigenschaften fOr diese Gruppe von HTML-Elementen zusammenfassen . Das
-Tag ist insbesondere fOr die Positionierung gedacht. Es 5011 -
zusammen mit einem 5tylesheet - die Gruppe von HTML-Ele-
menten aus dem Dokumentenfluss herausnehmen und an einer vorgegebenen Position im Dokument unterbringen . Diese Technik wird bereits von professionellen Anwendungen wie Adobe GoLive und Macromedia Dreamweaver unterstOtzt. Beide Programme stellen
-Tags mitsamt ihren positionierenden Eigenschaften grafisch als »Rahmen« oder »Ebene« dar.
Auf der sicheren Seite Die Techniken, die in diesen Programmen geboten werden, sind elegant implementiert und stellen sichere Verfahren in Hinsicht auf altere Browser dar - mit kleinen Einschrankungen wird die Positionierung, wie sie in Dreamweaver und GoLive unterstOtzt wird, auch in Internet Explorer 4 und Netscape 4 bereits umgesetzt. Dennoch stellen diese Techniken nur einen Ansatz dessen dar, was heute bereits mit Cascading 5tylesheets rnoqlkh ist.
Feste Punkte im WWW 5tylesheets positionieren eln Element statisch, relativ, absolut oder fest. Jede Techn ik weist einen anderen Ursprung oder Fixpunkt auf: den Inhalt, das Dokument oder das Browserfenster . Wenn ein Block mit Navigationselementen absolut in Relation zum Dokument posttlonlert lst, wandert der Block mit dem Dokument aus dem Viewport, sobald der Benutzer durch die 5eite scrollt. Alternativ konnte der Block mit Navigationselementen fest auf der linken 5eite des Browserfensters verankert liegen, egal, wie weit der Besucher in der 5eite scrollt - elne Technik, die bislang Frames vorbehalten war - , dann ist der Block fest in Hinsicht auf das Browserfenster positioniert. Daneben liegt ein Block mit weiteren Navigationselementen , der immer die verfOgbare Restbreite des Browserfensters einnimmt und 50 wird wie der Inhalt, den er aufnimmt. So drangt er den folgenden Block mit Inhalten im Dokument weiter nach unten , wenn sich die In-
gro~
halte andern - der Block ist relativ zum Dokument posrttontert. Das Bild »wandert« mit dem Inhalt durch das Dokument - es Iiegt »stansch« irn Dokumentenfluss.
48
2.6 layout mit Cascading Stylesheets
Internet ist . .• . hinter Glas
Stylesheets und die HTMl-Struktur stylesheets nutzen die lnharente struktur der HTML-Tags, um Elemente auszurichten, zu positionieren und zu skalieren. Dabei behalt der Inhalt im HTML-Dokument seine logische Folge, was beim Einsatz von Layouttabellen und Frames nicht der Fall ist. Textbrowser, Internetradio oder sprachausgabe sehen die Inhalte in ihrem linearen Fluss. Elemente, die eine Ausgabe in elnern spezifischen Medium storen , werden unterdrOckt. Einem kleinen Monitor bleibt die Oberdimensionale Bannerwerbung erspart. Der »Relaunch« mit einern neuen Design besteht aus dem Anlegen neuer Stile fOr Typografie und Layout.
Schaltzentrale fUr Typografie und Layout Die Effizienz der Gestaltung mit stylesheets liegt insbesondere in der zentralen stylesheetdatei. Die Stile fOr eine seite werden in einer separaten Datei gespeichert und garantieren ein hohes Mat) an Konsistenz zwischen den einzelnen seiten . Verschiedene stylesheetdateien fOr unterschiedliche Medien vom Web Ober den Druck und die sprachsynthese bis zum Web-TV passen den Inhalt an das Ausgabemedium an: sie unterdrOcken oder verkleinern das grot)e Werbebanner fOr die Ausgabe auf dem Fernsehmonitor, sle setzen einer Oberschrift eln deutliches »Ping« voran und beto nen einen Begriff im Sprachsynthesizer, wo das Stylesheet fOr den Druck grot) und fett beziehungswiese mit einem Kursivschnitt druckt.
ZurUck auf dem Boden der Realitat FOr die wirklich alten Browser wie Internet Explorer 2 oder Netscape 2 oder 3 und die reinen Textbrowser wie Lynx stellen selbst die raffinierten Verfahren zur Positionierung von Inhalten keine Gefahr dar. si e verstehen nichts von stylesheets und ignorieren sle. Die Inhalte werden linear ausgegeben und der Charme der Textbrowser der digitalen Steinzeit lebt wieder auf, aber ein bewusstes Design bewahrt die Funktionalitat der Seiten . Damit wtrd ein Css-Layout insbesondere fOr behinderte Benutzergruppen eine Erleichterung . Zusatzuch bietet Css2 bereits ein breites spektrum an Techniken fOr die sprachausgabe . Die ersten Versionen der Browser, die sich an Stylesheets versucht haben, reagieren verschnupft und unvorhersehbar (Internet Explorer 3) oder werfen den Inhalt verargert durcheinander (Netscape 4) und machen den Inhalt der seiten unbrauchbar, wenn Links nicht mehr klickbar sind, Teile der Seite verschwinden und der scrollbalken sich nicht mehr bewegt. Auch der eine oder andere Absturz mag auf das Konto eines Stylesheets gehen.
49
raus Stil rein Kapitel 3 Grundlegende Techniken
Ein Stylesheet beschreibt, wie und wo ein HTML-Element im Browser dargestellt werden 5011. Da Stylesheets in der Regel nicht direkt in das Tag geschrieben werden, sondern zentral im Dokument oder in einer separaten Daten liegen, brauchen sie ein Instrument, mit dem sie das HTML-Element erreichen : Selektoren .
Damit eine umfangreiche Site den Anspruchen an ein modernes Layout mit einer auf den Monitor zugeschnittenen Typografie und einer konsistenten Navigation gerech t wird, sind unzahllge Tags zu setzen und mit Attributen zu versehen . Bei diesen Anspruchen ist das Tag mit seinen spartanischen Att ributen fur Schriftart, -grb&e und -tar-
"A Specification is not a User Manual. The Bible was not meant to be read, but interpreted" (Quelle: Untitled Document) .
be ausgereizt und das -cpc-Tag fOrdie Gestaltung eines Absatzes uberfordert. Die Formatierung mit - und
-Tags und HTML-Attributen wie valign="top" und wldth e" 15%" blahen Seiten uberproportional auf. In komplexen Tabellenlayouts macht das Tabellengerust uber die Halfte der Bandbreite bei der Obertragung aus. Eine konsequente Gestaltung in Handarbeit mit fest verdrahteten Typografie-Anweisungen ist Strafarbeit. Jede Anderung, jede Portierung auf eine andere Techn ik ist eln Desaster.
raus, Struktur rein Was Iiegt naher, als ein zentrales Hilfsmittel aus der Welt der Textverarbeitungs- und Satzprogramme einzusetzen? In QuarkXPress und Textverarbeitungsprogrammen gibt es Schriften- und Absatzformate, fur HTML-Sites gibt es »Stylesheets«. Ein Stylesheet beschreibt, wle und wo HTML-Elemente im Browser dargestellt werden sollen . Stylesheets sind keine Instruktionen im 5inne einer Programmiersprache, die von Browsern wbrtlich durchgefOhrt werden rnussen oder zu Fehlermeldungen fOh ren. Sie zwingen dem Browser nichts auf - dies ist eine wichtrge Eigenschaft von Stylesheets. Sie formatieren Texte in Absatzen, Aufzahlungen und Fu¬en, sle geben Bildern, Tabellen und Formularen etnen Rahmen und einen Hintergrund. Sie positionieren elne Box fur Texte und Bilder stets an der gleichen Stelle im Browserfenster und lassen ste mitscrollen oder halten sie genau an dieser Position, egal, wie welt skh der Besucher durch das Fenster nach unten scrollt.
Eine Taste wird gedr&u'ml ;cktc/td> ctd>Dokument , Bild , Link , Textbereichc/td> < d>ci>xc/i>c/td> c/tr> c r>
KeyPresscl d> ctd>onKeyPress c d>Eine Taste wird gedrü ;cktc/td>
Dokument. Bild . Link . Textbereichc/td> ctd >ci>xc/td>
c/tr>
ctr>
KeyUp c/td>
onKeyUp c/td> ctd>Eine Taste wird losgelassenc/td> ctd>Dokument, Bild , Link . Textbereich
ci>xc/i>c/td> c/tr>
Aus 2 75 Codezei/en mit 14 KB bleibt nach dem Entfernen aller -Tags eine schlanke HTMLDatei von 5 KB m it 18 0 Zei/en Code ubrig . Dass der Rest wieder Struktur zeig t, daran besteht wahl kaum ein Zweifel. Hinzugekommen is t etn Stil fur Tabellenzellen: td {valign: top; font: 12pxl120% Arial. Helvet ica. sans-serif; }
3.2 Wenn das Stylesheet zweimal klingelt
3.2
Wenn das Stylesheet zweimal klingelt
Das Chaos des Webdesigns liegt nicht nur darin begrOndet, dass jeder Browser seine eigene Vorstellung von der Darstellung eines HTML-Dokuments elnbrachte. Das Chaos ist eine Webseite, die von »Schbnheltspflasterchen« Oberklebt tst, brs die Struktur kaum noch zu erkennen ist. Nlcht nur dass die Pflege solcher Seiten aufwendig ist - auch der Informationswert der Seite sinkt im gleichen Ausrnas . Das Stylesheet kann als zentrale Steuerdatei allen Seiten einer Site zugrunde Iiegen - die Anderung eines Stils wird auf allen Seiten dlrekt Obernommen . Das sorgt nicht nur fur einen schnellen schlanken HTMLCode ohne -cfonb-, -ccenter» oder -cu.--Tags und ohne formatierende Attribute fur die Ausrichtung - sondern bringt insbesondere auch die Effizienz und Sicherheit be: Anderungen .
2entrale fur unterschiedliche Plattformen Stylesheets steuern nicht nur die Typografie einer Site, sondern auch das Layout. Inhalte kbnnen fOrdie Darstellung auf dem Computermonitor und auf dem Palmtop entworfen werden - auf dem Palmtop wire aber ein anderes Stylesheet fur eine lesbare Darstellung sorgen und ein weiteres Stylesheet wlrd das Handy klingeln lassen. Elnen Schritt weiter gedacht: Der gleiche Inhalt kann mit einem zweiten Stylesheet fur die Druckausgabe vorbere itet werden. 1m Stylesheet fur den Druck werden Absatze zusammengehalten, Hurenkinder und Schusterjungen vermieden, bestimmte Bilder werden nicht gedruckt, Bilder, die gedruckt werden, nicht mehr mitten im Bild durchgeschnitten und auf der nachsten Seite fortgesetzt. Ein drtttes Stylesheet bereitet die Site fur die Sprachausgabe vor. Eine Reihe von Elementen, die bei der Sprachausgabe nur storen wurde, wird durch das Stylesheet verborgen . Suchmaschinen, die klar und einfach strukturierten Seitencode deutIich bevorzugen, freuen skh uber die aufgeraumten Seiten, in denen sle nicht von Formatierungsangaben gestbrt werden . Besucher, deren Browser keine Stylesheets unterstutzen. sehen die Seite »ltnear« mit den Voreinstellungen des Browsers .
53
Kapitel 3
Grundlegende Techniken
, , , <strike>, <5> und
sind durch die EinfOhrung von stylesheets schlichtweg uberflussig geworden : sie verschwinden . HTML 4 .01 hat viele Formatierungstags und noch mehr Attribute als »unerwunscht« gekennzeichnet.
Nutze das Tag stylesheets gelingen umso einfacher, je besser die zugrunde liegende struktur des HTML-Dokuments aufgebaut ist. 1m Klartext herst das: Je gezielter HTML-Tags fur den Aufbau des Dokuments eingesetzt werden, umso einfacher wird die Formatierung mit stylesheets. Das HTML-Dokument fallt deutlich eleganter aus, wenn fur die Oberschriften im Dokument -Tags eingesetzt werden. Werden Aufzahlungen durch <01>- oder
-Tags notiert, sind ste einfacher zu formatieren als Aufzahlunqen, die der Entwickler trickreich aus
-Tags und sinnlosen -Zeichen fOrden Leerraum herausarbeitet.
Stylesheets versus Satzprogramm und Textverarbeitung Auf den ersten Blick lassen sich stylesheets mit stilvorlagen in QuarkXPress oder Word vergleichen . Dart markiert der Setzer einen Text oder platziert den Cursor in einem Absatz und wetst ihm ein zuvor defiProfessionelle Webeditoren wie Dreamweaver ersparen die Schreibarbeit und bieten em Dialogfenster, in dem die einzelnen Eigenschaften unter einer grafischen OberfJache in ahnJicher Weise zusammengestellt werden wie in den Sti/varlagen von QuarkXPress. Die Dialogfenster fUr Stylesheets in Dreamweaver zeigen im Grunde die gleichen Optionen wie das Dialagfenster tut das Zeichenformat in Quark - die Verfahren sind letztlich identisch. CSS ·Std ~[)eofinition
"'''-
niertes Format zu. So einfach dieses Verfahren auch ist, es ist fehleranfallig und arbeitsreich . Zum einem muss jedem Absatz, jeder Bildunterschrift und jeder Oberschrift manuell ein Format zugewiesen werden, auf der anderen Seite wird ein Text mitten aus dem Absatz, der ausgeschnitten und in die Oberschrift gesetzt wlrd, weiterhin die Merkmale des Absatzformates tragen, aus dem er entfernt worden ist.
leJtflenslit uort ll!il1! bearbelll! "
11=
fur
Ime:
'''''oft
j ;
!"4ltltr rgryn(l
I'oc.
"x
SU'b ~ .
POS-UOn.t r un g [ fW't rtt f u ngtn
5thrift:
IMeluellel
'rone:
~
fa rbe: Durd'lgelt tlthl!"
tl".nd
0 ·....
IA Kr'" SIII .... 1
Uortlge:
Ib~n
ust.
_
":1Hortz•.•
•
SpeUonlerung :
GrundllnfllnuenllZ:
54
1· 1
SChwerz ... 1
'DnWIlr1: ~ St."....
I I
Im n , teMI
I
Te, •• turturze l:
'[;1 B
• pI
Sthrttt, 11I ~ N o rm . f
o ren O K,," IU
o Unl "nlli t he n o Wort unlen tr. o Durthgeltr. O Kllnturi. , .
D Sche tlie rt O Ulln alilln
o Kapll.leften o Hochges lelll 0
nl fgu t.lIl
D ines. "
IRbbret ften I
i
DK
I
3.2 Wenn das Stylesheet zweimal klingelt
1m Gegensatz zum 5atz- oder Textverarbeltungsprogramm zeigt HTML durch seine Tags die Grundlage fur die Formatlerung an: Eln Absatz 1st In
-Tags, eine Oberschrift in -Tags, eine nummerierte Aufzahlung in -cob-Iags eingeschlossen . 50bald die Stile fur diese HTML-Tags definiert worden sind, werden sie im Browser automatisch auf die HTML-Elemente angewendet. Differzierungen bringt der Grafiker im 5atzprogramm durch manuelIe Anderungen elnes markierten Textes ein. Diese Methode gibt es auch in C55 - sie wird mit 50 genannten Klassenselektoren realisiert. Wer schon mal einen Blick In den Code eines mit C55 formatierten Dokumentes geworfen hat, wird dort vielleicht auch Klassenanweisungen gesehen haben:
o
cp class= "absatzformat ">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<: •
F K !.! U ste n:
St ilvor
~ Fliosst.xl Einzvol
Noame: Vtrd.l'" ClO~: 12
~
1·1~j·Codt FlIH.t.xl
.
~Ho_ '
A,
~Ho_ 2 ll kn tr. t tonM
I~
1~ ·Codt
~
Au rld,'ung und Atist.and
,.. Rohmcn "nd SChott ru"ll
]
_ Dokum nt
_
A ...,. r... Iobol"".. tz A rn•••I. .1 A O,"st ,,)(t bold A ni.ssttx t bold mit (¥~ A flinst"xt it..lie A ... ...-_ . A
IA ..._
2
I F2
-
. ~
55
Kapitel 3
3.3
= =_
=
!If"
Orlenlleru nll :
Eigenschaft wie »Brelte« in einem Dialogfeld immer in einem Kontext
=
steht, kbnnen C55-Eigenschaften auf elne Vielzahl von Elementen angewendet werden. Eigenschaften wle width (Bre lte) oder back-
~ii
ground-color (Hlntergrundfarbe) kbnnen fur das gesam te Dokurnent, einen Textabsatz
, fur eine Tabelle oder Tabellenzelle, fur ein
Vor: 0 PI EJnzull -
Eigenschaften sind fUr aile da
Anders als in 5atz- und Textverarbeitungsprogrammen, in denen eine
Ausllclilunll unll Al:is iiilI
Horlzonl~l: • Zellen~bsund: •
Grundlegende Techniken
-
-
-
-
-
-
-
-
-
-
Unks: ""-..::.. 0 .:.;. em,,--~
Enle r: 0 em
Das Konzept der »q eneteuet: Eigenschaften (( gibt es in der Textverarbeitung und in Satzprogrammen nicht. Eigenschaften wie etn Einzug stehen zur Formatierung von explizit angegebenen Elementen zur VerfOgung.
Blld und fur elnen
-Container deklariert werden. Auch sind Text und Bild in C55 keine streng geteilten Welten - das Regelsystem umfasst aile Elemente, vom Textabsatz uber das Blld bis zur Tabelle : Die Eigenschaft wi dt h kann fur einen Textblock angegeben werden, fur ein Blld, eine Tabelle oder ein Java-Applet Dieser Ansatz fOhrt zu einem machtvollen, generellen Regelsystem .
Struktur inbegriffen Das HTML-Dokument ist durch die Wahl der Tags bereits strukturiert und die Darstellung der Inhalte in einem Tag ist vorbelegt, d.h., ohne weltere Formatierung und ohne formatierende Attribute in den Tags hat der Browser eine konkrete Vorstellung oder Vorschrift, wre ein HTML-Element darzustellen ist Das einfachste Verfahren, mit Hilfe von 5tylesheets eine andere Darstellung - andere 5chriften , Farben, HintergrOnde - zu erzielen, ist die Neudefinition der Eigenschaften der HTML-Tags: Dem p-Element wird eine andere 5chrift zugewiesen, das table-Element wird mit einer Nicht-Proportionalschrift belegt,
(ungeordnete Liste) mit einem Einzug und Bllder mit einem Rand von der Umgebung abgesetzt Wer diese 5truktur, die vorgefertigt von HTML mitgeliefert wird,
Ein HTML-Dokument kann sich bereits durch die Struktur verstsndlich machen , die von den HTML-Tags eingebracht wird. Je besser diese Struktur genutzt wird, umso etntecher und effizienter wird die Gestaltung durch Cascading Stylesheets gelingen .
56
nutzt. kommt mit wenigen manuellen Eingriffen bei der Formatierung des Dokumentes aus. Der Text in
-Tags wird automatisch als Absatz forrnatlert, die Oberschriften gemag ihrem Rang als Oberschrift, Aufzahlungen erhalten Aufzahlungssymbole am linken Rand und einen Einzug, ohne dass der Webdesigner eingreift Je besser die 5truktur von HTML ausgenutzt wlrd, desto einfacher fallt das 5tylesheet aus.
3.3 Eigenschaften sind fi..ir aile da
Der Arger mit der Zeile Die Darstellung eines HTML-Dokumentes ist zeilenorientiert. Wie in der guten alten Zeit der Texteditoren liegen aile Elemente in Zeilen: Nicht nur Texte, sondern auch Bilder und Tabellen wandern gnadenlos in Zeilen und kbnnen nur hintere inander aufgereiht werden. Zwar kann der Webautor seine Inhalte in elner Layouttabelle nebeneinander unterbringen, aber dem flexiblen grafisch orientierten Layouthilfsmittel von Textund Blldrahmen aus QuarkXPress oder InDesign gegenOber wirkt die Layouttabelle wie in Stein gerneltselt, sowohl Frames als auch Layouttabellen sind in der Lage, Inhalte nebeneinander zu stellen , aber nlcht, ohne die logische Reihenfolge der Inhalte zu andern. Das ist ein Drama fur aile, die mit textorientierten Browsern surfen, fOr assistierende Gerate wle die Braillezeile und fur die sprachausgabe. Erst die Positionierung von Elementen durch CSS beendet die Zeilenorientierung von HTML und befreit Elemente aus dem Dokumenten-
Was HTML Zelle fUr Zelle auflistet, w/rd durch das Stylesheet in Form gebracht und positioniert.
.._ _..
~._-
57
Kapitel 3
Grundlegende Techniken
f1uss . Dabei bringt HTML zusammen mit (55 ein 5pagat zustande: Die Inhalte im HTML-Dokumen t bleiben ohne 5tylesheet »linear« , mit 5tylesheet k6nnen Inhalte aus dem Iinearen Dokumentenfluss herausgenomm en werden. Dieser 5pagat bildet die Grundlage fur die Nutzung von Dokume nten in anderen Medien als dem Web oder dem Druck: 50 werden wlr dernnachst in der Lage sein, Internet im Auto aus dem Radio zu horen.
Vorbelegt und klassifiziert Dass aile Att ribute von HTML und aile Eigenschaften in (55 »vordefinlert« sind, ist fO r Grafiker und Setzer aus dem Print sicherlich eine kleine HOrde und gew6hnungsbedOrftig - andererseits bringt auch QuarkXPress eine Reihe von Vorbelegungen mit. 50 ist die Voreinstellung fOr einen Textrahm en In Quark Immer mit einem Punkt Abstand vordefiniert, die 511bentrennung ist ausgeschaltet und wenn ste eingeschaltet wlrd, 1stdie 511bentrennung fO r grof,geschriebene W6rter noch nicht elngeschalte t. Mit dererlei Voreinstellungen verhelfen aile klugen Anwendungen ihren Benutzern zum schnellen Start; ob wlr ste spater slnnvoll flnden, steht auf einem anderen Blatt. HTML wurde von Programmlerern, Technikern und Wissenschaftiern, nlcht von Layoutern, 5etzern und Grafikern entwickelt. Erst bei der Spezifikation von Stylesheets hat sich das W3C Gedanken Ober die klassischen Technlken und Methoden der Typografie und des Layouts gemacht.
58
3.4 Die Syntax der Stile
3.4
Die Syntax der Stile
Stylesheets sind alles andere als intuitiv. Zwar ist die Syntax der Regeln im Vergleich zu einer Programmiersprache strikt und einfach, und einfache Stile fur die Schriftgestaltung und die Textauszeichnung sind schnell zu erfassen. Wohl jeder, der jemals ein Stylesheet angelegt hat, hat mit diesen Merkmalen angefangen. Komplexer Natur sind die lnharenz, das Boxmodell, die Positionierung von Elementen und feste und relative Magangaben . Sie sind die Grundlage fur das Layout groger Sites und beherbergen die Aspekte, die ein Dokument auf den Weg in die unterschiedlichen Medien vorbereitet. Das Boxmodell mit Blockelementen und Inlineelementen hat selbst
Es sind nicht nur die fehlerhaften Browser, die den Einsatz insbesondere von CSS2 verzogert haben. Die Komplexitat und der abstrakte Ansatz tun das ihre dazu. Darum sind bis heute auch nur wenige grafische Ansatze entstanden, die dem Designer bei der Erstellung der Stylesheets zur Seite stehen.
den Herstellern der Browser, die ja an der Definition von Cascading Stylesheets intensiv mitgewirkt haben, Schwierigkeiten bereitet. Die absolute Positionierung, die wir uns aile so lange gewOnscht haben, ist elnfach zu verstehen, aber die feste Positionierung hat Internet Explorer 6 auf dem PC lieber ausgelassen. Wer auf dem Monitor arbeitet, hat den Pixel im Griff und Printdesigner kennen die TOcken von Funktgrosen . Aber die wahrhaft relativen Magangaben bringen beide Gruppen ins Schwitzen.
Stile definieren Ein Stil besteht aus einem Selektor und Deklarationen. Der Selektor identifiziert ein oder mehrere Elemente der Webseite und selektiert sie. Die Deklaration Obermittelt dem Browser, wie die Elemente darzustellen sind.
Selektor
p
Deklaration
font-size:
59
Kapitel 3
Grundlegende Techniken
Der Selektor ist der Name eines HTML-Elements oder ein frei gewahlter Name. Dieser Name kann aus Buchstaben a -z, A-Z, den Ziffern 0 -9, Punkten, Bindestrichen , Escapezeichen, den Unicodezeichen 161 -255 oder Unicodezeichen als numerischen Code bestehen , darf aber nicht mit einem Sonderzeichen oder einer Ziffer anfangen. 1m elnfachsten Fall ist der Selektor der Name eines HTML-Elements wie p, table, div oder body und definiert die Darstellung der Inhalte in allen Vorkommen dieser Elemente . Nach dem Selektor folgt in geschweiften Klammern die Deklaration, in der verschiedene Eigenschaften des HTML-Elements neu definiert werden, z.B. die Schriftart in Absatzen (also in
-Elementen), die Schriftfarbe fOr Oberschriften der Ebene 1 oder die Schriftgr6~e . Ein Stil wird auf das HTML-Element »angewendet« - z.B. auf der vorigen Seite auf aile
-Elemente des HTML-Dokumentes. Durch die Deklaration des Stils werden aile Texte in
-Elementen in
Schriftgr6~e
1em dargestellt. Das geschieht automatisch und ohne eine besondere Angabe in den -cpo-Iaqs des Dokuments an einer zentralen Stelle . Das HTML-Dokumentbleibt Obersichtlich und effizient.
Das Regelwerk Jedes Stylesheet besteht aus einer Foige von Regeln. Wenn mehrere Selektoren die gleichen Eigenschaften zugewiesen bekommen, werden die Selektoren durch Kommas voneinander getrennt:
• p , td, l i {font-fami ly : Arial , sans-serif; font-size : 12px ; color : gray} Die Deklaration eines Stylesheets steht in geschweiften Klammern und listet eine Eigenschaft oder eine Reihe von Eigenschaften des selektierten Elements auf. Jede Eigenschaft hat eine Bezeichnung wie
font-family, font-size, color oder ba c kg r ound - c o l o r. Die Eigenschaften werden durch Semikola voneinander getrennt. Das Semikolon nach der letzten Deklaration ist optional. Hinter der Eigenschaft folgen ein Doppelpunkt und der Wert, z.B.
line-height : 140%; font -color : red ;.
60
3.4 Die Syntax der Stile
Einer Eigenschaft wird ein Wert oder eine Werteliste zugewiesen . Wenn elner Eigenschaft mehr als eln Wert zugewiesen wlrd. sind die Werte durch Kommas und eln Leerzeichen voneinander zu trennen: z.B. font-family : ver dana , Ar i a l . sans-set'iE ;.
• p { text-indent : lOpt)
eine CSS-Regel , Stylesheet oder kurz . St i l" genannt • { text-indent : lOpt } eine Deklaration • text-indent die Eigenschaft lOpt ein Wert (wichtig : nie ein Leerzeichen zwischen Wer-t und MaBeinheit setzen l) die MaBangabe gehor-t • pt immer zwingend zum Wer-t
Stil fUrjede Gelegenheit: Selektoren Die vorangegangenen Beispiele zeigen »HTML-Selektoren« oder »Elementselektoren« - die intuitivste Technik, einem Element einen Stil zuzuweisen : Man nehme den Namen eines Tags, mache ihn zum Selektor in einem Stylesheet und weise ihm eln paar neue Eigenschaften zu. Dadurch wird den Inhalten in allen Vorkommen des Tags im Dokument ein neues Erscheinungsbild verliehen . Das ist einfach, aber an vielen Stellen wollen wir Elemente besser differenzieren . Damit z.B. p-Elemente im Dokument nach verschiede-
Nur ein kleiner Einblick in die Technik der 5elektoren . In Kapitel 5 wird die Technik der Selektoren ausfUhrlich beschrieben .
HTML-Selektoren
Klassenselektoren
Kontextselektoren
5e lektoren sind die Namen von HTML-Elementen und de finleren die Darstellung der j ewellig en Elemente neu .
Der Designer g lbt dem Selektor etnen eige nen Namen, der mit etnem Punk t (».•) beginnt, und wetst de m Tag etnen Stil durch das HTM L-Attrlbut cl a s s zu:
Fur eln kompiexes Layou t k6nnen einetn Element vets chledene Stlleje nach Umgebung zugewiesen werden :
.me i ns t i l {font-size : l2px; }
P
Inhalt
Inhalt
Allen p -Elementen werden Eigenschaften zugewlesen .
Allen p-Elementen mit class="meinstll" werden Eigenschaften zugew lesen .
p-Elementen, die in Tabellenzellen stehen, werden andere Eigenschaften zugewiesen .
body
p
{font-family : a;-iaL) {font-size : l2px;}
td P
font-size : l2px ;) font -size : lOpx ;}
61
Kapitel 3
Grundlegende Techniken
nen Kritierien formatiert werden k6nnen (ftlestext , Fliegtext mit Einzug, unterschiedliche Schriften fur verschiedene Rubriken, eine kleinere Schrift fur eine Marginalspalte) , werden verschiedene Klassen von p-Selektoren gebildet. Allen Tags, die aus dem einfachen Schema herausfallen sollen, muss im HTML-Code eine Klasse zugewiesen werden . Ein Element kann auch »kontextabhangig« dargestellt werden . So wird ein p-Element in einer Tabellenzelle anders formatiert als augerhalb von Tabellen. Durch so genannte »Pseudoelemente« bringen Stylesheets weitere Unterscheidungsmerkmale. Mit Hilfe unterschiedlicher Arten von Selektoren werden Stile gezielt auf die HTML-Elemente eines bestimmten Layouts angewendet.
Fest positionierte Elemente wie die Navigationsleiste auf der linken Seite und eine Logoleiste oben beziehen sich auf die Koordinaten des Browserfensters, die sich beim Scrol/en durch das Dokument nicht vetstviem.
Ponte Vecchio
Sic wurde etwa 1350 erbaut UDd ilt die eoinlilt Briieke in Florenz, die im 2. Weltkrie~ nieht zemort wurde. Sie rlibrttiber den Amo sum Palal10 Pitti aur dem reehten Flullurer. Dielel Gebiiude, begcuueu 1458 und in der Fo,&enit rtark erweitert, war von 1550 bit 1859 Relidenz der tOlkanisehen Groahenog,e. 1:.1 enthill etne weitere beriihmte Gemildep,lerie. Iasbesendere mit Werkenvon Andrea del Sarto, Rarrae~ Perugiao, Titian uod Tintoretto. Hinter dem Palast erstreekt .ieb der trok Boboli-Gal1en, in dem wihrend del Blljiihrliehen MUlikl'emvab im Mai xeeserte im Freien rtattfinden.
Textkasten und Schmuckkasten sind relativ positioniert: Der Schmuckkasten folgt im Dokument auf den Textkasten und wird darum nach dem Textkasten dargestel/t. cdiv id= "Layerl " style= "position :relative ; left :20px ; top : 25 ; width :500px ; height :auto ; "> ... cdiv id= "Layer2 " style= "position :relative ; left :Opx ; top : 10 ; width :600px ; height :auto ; background : url(bg .gif) ; "> . . .
133
Kapitel 4
Aile Stylesheet-Eigenschaften
relative positlonlert ein Element an einer beliebigen Stelle relativ zu seiner Position im normalen Datenfluss der Seite . Wird das Dokument im Dokumentenfenster gescrollt, wandert das relativ positionierte Element mit und scrollt aus der Seite heraus. Relativ positionierte Elemente verdranqen Elemente im Dokumentenfluss - das ist der relevante Unterschied zur absoluten Positionierung. Aile Elemente , die auf ein relativ positioniertes Element folgen, werden nach unten verdrangt, es sei denn , sie sie seiber absolut oder fest posltlonlert.
Beispiel • hl { po s i t i o n : relative ; left : - 8 0px; top : Opx ; width : 300px ; ba c kgr o und: #97A29 l ; } "f 0 6
.
E1 absoluc und rel~UY
Die Oberschrift hi ist relativ zu ihrer Position im Dokument definiert - um 80 Pixel nach links herausgeruckt, Sie verandert ihrer Position im Dokumentenfluss,
0
4
Jl.
o
~
Ott Mondsd'letbe auf den Schlnnen wlXde mmer groBer . Bald wtJrde sit die Reste des schwarun Hlmmels vOlIQ verdrangt haben, zUIT'IlIldestaut
dem varderen SChirm.
i;
Sonderb,r. das SUrrmen war verstunYnt. P1rx sah zur Sette - und ersterr te,
!
Auf cer _ n . n ~d1e der Slch.rI.JOll sAIl .on. d.' bejden Fl.g.n und putzte Slch dl. FkJgtl. dtt .ndere m.cht. ihr w.t.... ndd.ssen den
/
(
il'
;-
f
--; ;
• ~
Hot. ENlpaar M me ter wtl ter glanzte dis nad'lste Kabel.Die JsolierurlQ endete e" wenlQhoher - ale vier Kabe:llagen frel. Jedesvon Ihnen war b.nah. so star1< WI' .In B1.ISblt. o. dl. Sp.nnung noch n1cht allzu
hoch Wilt' - taus.nd Volt r, g.b es Zwisch.n den K.bK1 roJr g. nng. Abstand. - J.w,.s nur sltben MIllimeter. Prtx weet. zuf.UIg, daB es g.n.u SI.b.n Moilm . t. r w. r. n . SI. hatt.n .trmaI d. g.s.mtt . 1.ktrlsd1e Inst.llatlOn austlNnd.rg.nomm.n. und er hatte sldl vom Assrstenten lk1Yersch4m~ten anheren rrMJssen, wd er die Abstande zwlschtn den l eltungen nld'lt kannte .
~ ~,
~
static 1st die Vorelnstellung und bedeutet, dass eln Element keinerlei Methoden zur Positionlerung - wie top, right , bottom oder left - mitbringt, es ist statisch; es liegt im Fluss des HTML-Dokuments und sein Container ist immer -chtmb-e/htmb- . Wenn das Dokument im Viewport gescrollt wird, wandert ein statische Element mit. In dieser Hinsicht sind im reinen HTML aile Elemente statisch. Das Ende elnes statischen Elements bestimmt den Anfang des nachsten Elements ,
134
4.7 Visuelle Formatierung
top , right, bottom, left
IE4+
M 1 N4+ 05+
Erblich : Nein
Version : C552
top gibt den Abstand des oberen Randes des Inhalts zum oberen Rand des umfassenden Blocks an (IE5+ , MI , N6, 0 5+ ). right gibt den Abstand des rechten Randes des Inhalts zum rechten
Filge einen
Sti I an
den Mand
Werte auto I
length percentage
Rand des umfassenden Blocks an (IE5+ , Ml, N6 , 05+). bottom gibt den Abstand des unteren Randes des Inhalts zum unteren Rand des um fassenden Blocks an. left glbt den Abstand des linken Randes des Inhalts zum Iinken Rand des umfassenden Blocks an. Diese vier Eigenschaften werden in Verbindung mit der Eigenschaft p os i t ion benutzt. Der umfassende Block hangt dabei von der Art der Positionierung ab: Wenn das Element absolut posttlonlert wlrd, ist der umfassende Block das Browserfenster, ebenso bei fester Positionierung. Bei relativer Positionierung ist der umfassende Block das Dokument. Bei statischer Positionierung liegt das Element im Inhaltsfluss und die Angaben top, ri ght, bo t t om und l e f t haben kelne Auswlrkungen. auto ist die Voreinstellung und legt fest , dass der Browser den Abstand zum umfassenden Block bestimmt.
leng th kann in einer der folgenden Ma&einheiten angegeben werden : em, em, ex, i n, mm, pc . px , pt . Achten Sie darauf, stets die AbkOrzung durch zwei Buchstaben zu benutzen und kein Leerzeichen zwischen dem Wert und der Ma&einheit anzugeben.
percen tage (Prozentsatz) legt den Abstand des Elements zum urnfassenden Block relativ zur Gral)e des umfassenden Blocks fest. Das Prozentzeichen ist zwlngend erforderlich .
Beispiel Der Stil fur eine Ful)note, die unten im Browserfenster
e 0 6
D POlltlonlorung
0
sitzt und fest steht, egal wie grol) das Fenster aufgezogen und wie weit das Dokument gescrollt wird: • #Layerl { i d : l ay er l ; border : I px #666666 solid ; position : fi xed ; top : auto ; right : 2% ; bottom : 5px ; left : auto ; width : 96% ; height : 90px ; background-color : linen ; paddi ng : 5px 5px ; font : 16px/150% Verdana ; color : #33 3333 }
~~
~ -:; i ~
/
~
~
s,
/
r ;-
media engineering Augustlnusstr. 11 e 50226 Frechen Info@lvent. de www.megenla,de
• 135
Kapitel 4
Aile Stylesheet-Eigenschaften
clip
Werte
IE4+ Ml N6 05+
auto I
Erblich : Nein
rect(top , right , bottom, l eft }
clip beschneidet em Elemen t. das zu gro& fur den umfassende n
Version : C552
Block ist, und gibt an, welche Teile des Obergro&en Elements sichtbar sein sollen . Der Rest wird bei der Ausgabe unterdrOckt. Der umfassende Block ist das Element, das dieses Element und eventuell auch weitere Elemente enthalt. Wenn ein Element zu gro& tst, um in den umfassenden Block zu passen, wird das Element an den Grenzen des umfassenden Blocks abgeschnitten, 50 dass es in den umfassenden Block passt. Der abgeschnittene Teil des Elements wird einfach nicht dargestellt. Die verwandte Eigenschaft overflow bestlmmt. ob eln Obergro&es Element gecllpt wird . Wenn overflow mit visible angeg eb en wird, hat die Eigenschaft clip ke inen Effekt auf das Element und das Ele-
Hier ist der umfassende Block das - Tag. Das Bild wird um 30 Pixel von oben , 220 Pixel bis zur rechten, 270 Pixel bis zur unteren Kante und 20 Pixel von links beschnitten.
ment wird vollstandlg dargestellt, auch wenn es die Grenzen des urn fassenden Blocks Oberschreitet.
auto ist die Voreinstellung und legt fest, dass der Browser bestimmt, welche Teile des Elements sichtbar sein sollen .
rect (top, right, bottom, left) legt fest. dass die Form des Elements als Viereck dargestellt werden 5011 (zurze tt tst rect die elnztge Variante ). Die Werte fUr die Kanten der Vierecke werden du rch Leerstellen voneinander ge trennt In einer L1ste dargestellt. Sle werden 1m Uhrzelgerslnn top, right, bot tom und left aufgefUhrt, wobe l Jeder Kantenw ert zwingend angegeben werden muss und den Abstand zum umfassenden Block darstellt. Der Abstand kann pos ltiv oder negativ seln und kann sich uber den umfassenden Block hlnaus erstrecken .
....-------clip
Jeder der Werte fur top, right , bot tom und left kann In elne r der acht Langenma&e angegeben werden : em, em, ex, in, mm, pc , px, pt. Achten Sle darau f, stets die Abkurzung durch zwei Buchstaben zu benutzen und kein Leerzelchen zwischen dem Wert und der Maf)einhe lt anzugeben .
Beispiel
.
:'ltI,",,,..lbos:
136
•
. elp { clip : r e e t (3 0p x , 22 0px , 270px , 20px)
4.7 Visuelle Formatierung
overflow Erblich: Nein
IE4+ Ml
N6 05+
Version : ( 552
overflow regelt die Darstellung von Elementen, die zu gro& sind, um in den umfassenden Block zu passen. Per Voreinstell ung sollen die »uberstehenden« Teile des Elements abgeschnitten werden, so dass
Werte auto I hidden scroll visible
der verbleibende Teil des Elements In den umfassenden Block passt. Die abgeschnittenen Tei le des Elements werden einfach nicht dargestellt. Die verwandte Eigenschaft cl ip speztnztert, welche Teile des ubergro&en Elements sichtbar sein sollen.
auto ist die Vorgabe und veranlasst den Browser, Scrollbalken anzubieten, damit der Benutzer den Rest des Elements betrachten kann. hidden gibt vor, dass nur der beschnittene Tell des ubergrosen Ele-
ments slchtbar ist, so dass es vollkommen innerhalb des umfassenden Containers dargestellt wird und keine Scrollbalken eingespielt werden.
scroll fOhrt dazu, dass ern uberqroses Element beschnitten wird und Scrollbalken eingespielt werden, Ober die der Rest des Elements betrachtet werden kann. visible erzwingt, dass ein ubergroses Element nicht beschnitte n wird.
Das vollstandige Elemen t wird dargeste llt. obwohl es sich Ober die Grenzen des umfassenden Blocks hlnaus erst reckt. Wenn over flow :visible elngesetzt wlrd, hat die c1ip-Eigenschaft keine AusWirkung auf die Darste llung des Elements.
inline I inline-table list-item marker none I run-in
Aile Stylesheet-Eigenschaften
IE4+
M1 N4+ 0 5+
Version : C551 /Erganzt in C552
display steuert die Darstellung elnes Elements. In CSS1 kann dis play eln Inllneelement in eln Blockelement transform ieren und umge kehrt und die Darstellung eines Elements unterdrOcken. 1m Foigenden werden zuerst die C551-Werte aufgefOhrt. Die meisten C55 2-Erganzungen werden von keinem Browser unters tUtzt. block (C55 1) ist die Vorgabe und stellt em Element als Blockelement
table I table-caption
oder -box dar und fOhrt zu einem Zeilenumbruch vor und nach dem Ele-
table -cell I table-column I table-column-group
compact (C552) stellt das Elem ent abhangig vom Kontext als Block-
table-footer-group table -header-group table-row I table-row-group
ment. oder Inlineelement dar. inline (C55 1) st ellt eln Element als Inlineelement oder -box dar. Inlineeleme nte fO hren nicht zu einem Zeilenumbruch vor und nach dem Element. Mit anderen Worten: Das Eleme nt wird in der glelchen Zeile dargeste llt. inline -table (C55 2) ste llt elne Tabelle als Inlineelement dar und fOhrt dadurch nicht zu einem Zeilenumbruch . list-item (C5 5 1) stellt das Element als Liste dar. Jedem Element der Liste kann eln optionaler Listenpunkt wie ein gefOliter Kreis vorangesetzt werden. marker (C552 ) weist dem Inhalt vor oder nach etnem Boxelement etnen Marker
ZU .
marker wlrd zusammen m it den Pseudoelemen ten
: after und : before benutzt. none (C55 1) unterdrOckt die Darstellung von Elementen. run-in (C552 ) ste llt das Element abhanglg vom Kontext als Blockoder Inllneelement dar. table (C552 ) ste llt eln Element als Blockelement dar. table-caption (C552) stellt ein Element als Tabellenbeschrlftung (cap tion) dar. table -cell (C552) stellt das Element als Tabellenzelle (td) dar. table-column (C55 2) stel lt das Element als Tabellenspalte dar. table -column-group (C55 2) stellt das Element als Gruppe von Tabellenspalten (colgroup) dar. table-footer-group (C55 2) ste llt das Element als Gruppe von Tabelien-FuBnoten (table footer ) dar. table-header-group (CSS2) stellt das Element als Gruppe von Tabellenk6pfen (table header) dar. table-row (C552) stellt das Element als Tabellenzelle (table row) dar.
Die Transformatlon vom Blockelement zorn Inllneelement sc-."
St."""
,I:~ l nt. r J.I
_.til'
I L_-=---
SOfW'I4'
HI t_ 1-
. IBIoCkt lf'!nf'nttWif'Tlbf'lItD ~uf' n sKh niehl
inlltrh.lb
Trxtlbt.tu. --' eme etzen , dean
.h4r se\un emes
J~
erzeugen dell einen Zcilenumbruch. En t wenn die t.be l!t dureh die EiEcn.t' hlftdiJplt), : inlmezu etnem lnlmeelement
transfcrmiertwird, kln n tin Trxt.butz die 1.~ 1l(' mit noa t: rilhtt Oolt ]tft cenaulo umflitkn wit tin Bild
Beispiel 2 (Hyperlinks als Blockelement) • a { display : block ; width : 25 0p x ; bac kground : b i s que ; padding : 6p x 6px ; border : Ipx #666666 s olid ; }
»iuet« hat den h6chsten z-inde x und muss vor »We«( und »drangelt« Iiegen : . z- Ind••
.. .. M
141
Kapitel 4
4.8
Aile Stylesheet-Eigenschaften
table: Stile fUr Tabellen
C551 hat noch einen weiten Bogen um Tabellen gemacht. Erst C55Z defmlert funf Eigenschaften, die speziell fur Tabellen gedacht sind . Die fUnf Eigenschaften sind boder -collapse, bo rder-spaci ng, cap-
tion-side, empty-cells und t a bl e - lay out .
Werte
border-collapse
IE5+ (PC) Ml N6 05+
---~~----~-----------
col lapse separate
border-collapse wahtt das Rahmenmodell etner Tabelle. Zwei Rahm enm odelle stehen zur Wa hl: c ollapse und separate. collapse : 1m collapse-Modell (Voreinstellung) hat die Tabelle einen auseren Rand und benachbarte Zellen teilen sich die internen Rahmen .
separate: 1m separate-Modell hat die Tabelle einen separaten auseren Rahmen und jede Zelle besitzt einen eigenen separaten Rahmen . Der ausere Rahmen der Tabelle beruhrt die einzelnen Zellenrahmen nicht.
Tobeno" -Mozill. (Build 10; ZOOZ04Z7081
e.
border-col.l se : colla
a
Ie
Zeit 1
Zeit 2
Zt_t 3
Ze.t 4
border-collapse: separate
Izoli. Iz.IIO3 I
Ilzoll. 2 Il zoliO4
I I 4
142
0 0 0 0 0 0 0 0
Zelle l< /td>
Zelle 2
< /tr>
Zelle 3
Zelle 4
< /tr>
Zelle l< /td>
Zelle 2
< /tr>
Zelle 3
Zelle 4
< /tr>
4.8 table : Stile fur Tabellen
border-spacing
M5 Ml N6 05+
Erblich: Ja
Version: (552
Werte length length ?
border-spacing bestim mt den horizontalen und verti kalen Raum zwischen benachbarten Zellen 1m separate-Modell. In diesem Modell hat die Tabelle einen separaten aus eren Rahmen und j ede Zelle besitzt zusetznch einen eigenen separaten Rahmen . Der aus ere Rahmen der Tabelle berOh rt die einzelnen Zellenrahmen nicht. length length ? gibt die Grbf)e des Raums zwischen benachbarten Zellen an. Die zweite Angabe ist optional. Wird nur die erste Lange speztnztert, gilt der Wert sowohl fO r den ho rtzontalen als auch fOr den
vertikalen Raum zwischen benachbarten Zellen. Wenn beide Langenangaben notie rt sind, gibt die erste den horizontalen Raum und die zweite den vertikalen Raum an. Negative Werte sind nicht erlaubt. length kann in elner der folgenden Maf)einhelten angegeben werden : ern. em, ex, in, mm, pc , px, pt. Achten Sie darauf, stets die AbkO rzung durch zwei Buchstaben zu benutzen und kein Leerzeichen zwischen dem Wert und der Maf)einheit anzugeben . Die Voreinste llung ist O. ......10 10010011
Beispiel
o
o o
o
style= "border-collapse : separate ; border-spacing : 20px">
Zelle l
Zelle 2
Zelle 3
Zelle 4
' Z"'1
,:... ,
I
' Z"'J
I 'Z ....
I
bonMr~ :
2(lp a
botder1NOl'G: OD :c
I: :
1',..· 2
II
143
Kapitel 4
Aile Stylesheet-Eigenschaften
caption-side
Werte
Erblich: Ja
bottom left I right I t op
IE5+ Ml N6 Version : (552
caption-s ide legt die Positionierung der Tabellenlegende (caption) fest - ob die Legende unten , links, rechts oder oben gesetzt werden
5011. Diese Eigenschaft ist fur die Benutzung mit dem -ccaptloro-Taq gedac ht. Wenn capt ion rechts oder links neben der Tabelle platziert wlrd, kann der Inhalt m it vertical -align auf der Grundlinie (bottom) , an der Oberkante der Tabelle (top) oder in der Mitte (middle) ausgerichtet werden .
Bemerkung top (die Voreins teJlung ) und bot tom werden von IE5 + und MozillalIN6 darges teJlt: die Werte left und right hingegen nicht.
bottom platzlert etne caption -box un ter der Tabelle . left platziert eine capt ion-box auf der IInken Selte der Tabelle . right platztert elne caption-box auf der rechten Seite der Tabelle. top ist die Voreinste llung und platziert etne capt ion-box uber der Tabelle.
Beispiel • caption { caption-side : top ; width : auto ; }
empty-cells
Werte
Erblich : Ja
hide show
IE5+ Ml N6 05+ Version : (552
empty -cells legt fest, ob Rahmen um leere Tabellenzellen gezogen werden (e ine leere Zelle hat kelnen sichtbaren Inhalt). Die Eigenschaft wird nur beim separate -Modell angewendet. Wenn visibility : hidden angegeben wurde, wird die Zelle als leere Zelle ohne slch tbaren Inhalt angesehen . Auch carriage
return, 1 ine feed , tab und Leerzeichen bllden kelnen slchtbaren Inhalt. Ein erzwungener Leerraum (&nbs p; ) allerdlngs gilt als slchtbarer
empty-<ells: show
Inhalt.
hide weist den Browser an, kelnen Rahmen um leere Zellen darzustellen .
..'"
s how 1st die Vorelnste llung und weist den Browser an, einen Rahmen um leere Zellen darzustellen .
Beispiel <)
<)
in der Zelle< /td>
in der Zelle
< /tr> o
144
4.8 table: Stile fUr Tabellen
table-layout Erblich: Ja
table- layo
t
IE6 (PC)
Werte
Version: C552
auto I
legt den Layoutalgorithmus fur die Konstruktion der
fi xed
Tabelle fest. auto ist die Voreinstellung und weist den Browser an, die Tabelle abhangig von den lnhalten der Tabelle aufzubauen. Der Browser muss also zunachst den gesamten lnhalt der Tabelle laden, bevor die Tabellendimensionen berechnet werden kbnnen, dadurch wird der Aufbau der Seite verzbgert. fixed weist den Browser an, die Tabelle entsp rechend der I abellenbrette (wi d t h ), der Brelte der Spalte n, der Rahmen und dem angegebenen Raum zwischen den Zellen zu berechnen. Das Layout der TabelIe hangt nicht vom lnhalt ab und die Tabelle kann schneller dargestellt werden.
Beispiel • table
{ t a b l e - l a y o u t : fixed
• td .breite {width : lOOpx ; h e i g h t : lOOpx
table-layout: auto
Ze lle!!! !! ! ! !! l ! l ! l l l ! ! l l l
Zelle22222222222222222222
Zelle333333333333333333333
Ze lle 444444444444 44444444
1m separate-Modell hat die Tabelle einen separaten aufJeren Rahmen undjede Zelle besitzt zusatzli ch noch einen eigenen separaten Rahmen. Der aufJere Rahm en der Tabelle berOhrt die einzelnen Zellenrahmen nicht.
table-layout: filled
Z.II.1111 IZ.II.",i
B8 145
Kapitel 4
4.9
Aile Stylesheet-Eigenschaften
Stile fur die visuelle Gestaltung der Benutzeroberflache
Zwei Stile fO hrt CSS2 fur die Gestaltung der Benutzeroberflache ern: cursor und outline. Mitte ls der Eigenschaften fur den Mauszeiger, cursor. 5011 der Entwickler dem Besucher eine r Selte Hlnweise auf die Benutzung von Elementen geben . Die Umrandung. outline , tst elne Linie um ein Element herum , die das Element auf der Seite aus-
zelchnen und hervorheben 5011. Die Umrandung wlrd auserha lb des Rahmens um das Element aufgezogen. 50 dass eln Element sowohl elnen Rahmen als auch elne Umrandung aufweisen kann. Anders als der Rahmen hat die Umrandung kelne rechtecklge Form.
Werte
cursor
IE4 + Ml N6
[ urI ( Hurladdress') , 1*
Erblich : Ja
Version : C552
[ auto I crosshair I default I help I move
cursor steuert die Darstellung des Mauszelgers. Die melsten Browser
pointer I e-resize I n-resize I ne-resize I nw-resize I s-resize I se -resize I sw-resize I w-resize I text I wait 1
unterstO tzen nlcht aile mbglichen Darstellungen.
I'
url ( " u r l addr e s s " ) ist elne von Kommas getrennte lIste von einer oder mehreren URLs und . stellt die Adresse eines elgenen Mauszelgers dar. Jede URL muss In AnfOhrungszelchen elngeschlossen werden. Browser erkennen elgene Mauszeiger nicht unbedlngt. darum rst es besser, elnen gener ischen Mauszeiger (d e f au l t ) an das Ende der lIste zu setzen (ahnltch wle eine generische Schrift "serif" ans Ende elner Schriftenliste ). auto rst die Vorelnstellung und uberlasst dem Browser die Darstellung des Mauszelgers.
146
I
uri
a utOJ:
4.9 Stile fur die visuelle Gestaltung der Benutzeroberffache
cro sshai r stent den Mauszeiger 2115 grot>es ca nnes Pluszeichen dar. defaul t ooenasst de m Browser d ie Darstellung des Mauszeigers. help steut den Mauszeiger ars Fragezeichen coer Ball dar. move betont dass etwas beweg t werde n 5011 . Ocncnerweee ist oer M~u :5ze iger
em rv euz mit r'renen an enen vier Enden.
pointer steut de n Mauszeige r als Pfeil dar. e-resize steut den Mauszeiger ars Pfeil dar, oer nach rechts (east ) werst.
n-resize stellt den Mauszeiger 2115 Pfeil dar, oer necn coen (north ) wetst.
ne -resize steut den Mauszeiger ars Pfeil dar, der nach rechts coen ( north -east) weet.
nw-res ize stellt den Mauszeiger 2115 Pfeil dar, oer nacn links oben ( nor th-west) werst.
s -resize steut den Mauszeiger 2115 Pfeil dar, de r nach unten (south) weist.
se-resize stent den Mauszeiger eis Pfeil dar, der nach rechts unten (south-east) wetst.
sw -resize stell t den Mauszeige r 2115 Pfeil dar, oer nacn links unten (south -west) wetst.
w-resize steut de n Mauszeiger 2115 Pfeil dar, der nach links (west ) wets t .
text ste llt den Mauszeiger als "I" dar, m it dem Text gekennzelchnet und elngefOgt wtrd.
wait stent den Mauszeiger uoncberwerse 2115 Stundenglas oder Uhr dar, urn anzuzeiqen dass der Benutzer noch auf die Bearbeltu ng emes Prozesses warten muss.
!d: fa ult
I I
Ip~inter
I
Icro+SSha ir
h!p I Im tve I Ierresize I I n:-resize I Ine'Sre size I Inw':"e sizel Is: resize I I se~resize I Isw:resize l
Iw'iresize I
Itext! I I~' it
Beispiel p {cursor : text ;} a {cursor : po irit e r i } body (cursor : url( "sputnik .ani ") , defau l t ; }
147
Kapitel 4
Werte
Aile Stylesheet-Eigenschaften
outline-color
color I invert
Zurzeit von keinem Browser untersWtzt Version: C552
Erblich: Nein o tline-color leg t die Farbe der Umrandung fest.
color kann das 5chlusselwort fur eine Farbe sein (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder eln Triple aus drei RGB-Werten (255,255,255) . invert ist die Voreinsteliung und kehrt die Hintergrundfarbe um und benutzt die invertierte Farbe als Umrandung. Auf diese Weise wird sichergestellt, dass sich die Farbe der Umrandung stets vom Hintergrund abhebt.
Beispiel • img { outline -color : red } • p { outline-color : #E9E9E9
outline-style
Werte none I
Erbllch: Ne/n
dotted double
none ist der Vorgabewert. Wenn kein 5 til dek larler t wird. tst kelne Um-
g r oov e ou t se t ridge solid
Version : C552
outline-sty le best lm mt die visuelle Darst ellung der Umrandun g .
dashed
inset
Zurzeit von keinem Browser unte rsWtzt
randung stchtbar, selbst wenn die outline-Elgenschaften angege ben
I I
wurden . Die Angabe von none ste llt srcher, dass kelne vorangeg angenen Deklaratlo nen die Umrandun g beelnflussen . dotted erzeugt elne gepun kte te Linle . dashed erzeug t elne gestr lchelte Linle. double erzeugt eine doppel te durchgehende Linle. groove erzeugt eine dreidim enslonale Linie, deren Aussehen vom gewahlten Farbwert abhangt. i n s et erzeug t elne dreldime nslonale unre. deren Aussehen vom gewahlten Farbwert abhangt, outset erzeugt elne dreidlmenslonale unre. deren Aussehen vom gewahlten Farbwert abhangt . r idge erzeugt eine dre idimension ale u nie. deren Aussehen vom ge wahlten Farbwert abhang t. solid erzeugt elne durchgezogene Llnle .
Beispiel • i mg
{ ou tl ine-color : orange ; solid ; ou tline-width : medium ;
out ~i ne-s tyle :
148
}
4.9 Stile fur die visuelle Gestaltung der Benutzeroberflache
outline -width
Zurzelt von keinem Browser untersWtzt
Erblich: Nein
Version: CSS2
I medium
thin I medium
outline-width bestimmt die Breite der Umrandung. thin
Werte
thi c k I
I thick : Wenn Sie die Schlusselw6rter fur die
l en gth
Rahmenbrelte benutzen, bestimmen Plattform und Browser die exakte Breite der Umrandung. me di um tst die Voreinstellung. len gth kann In elner der folgenden Maf)elnhel ten angegeben werden: em, em, ex, in, mm, pc. px , pt. Achten Sle darauF, ste ts die Abkurzung durch zwei Buchstaben zu benutzen und kein Leerzeichen zwischen dem Wert und der Ma&einheit anzugeben.
Beispiel o
img
{ ou tli ne- c o l o r : orange ; o utline-style : so lid ; out l ine-width : medium ;
outline
Zutzett von keinem Browser untersWtzt
Erblich: Nein
Version: CSS2
outli ne fasst aile Indlvlduellen Styiesh eet-Elgenschaften der Umrandung zusammen : outline-color, outline-style und outline-width .
Werte outline-color & I
outline-style &1 outline -width
Beispiel Eine interessante Anwendung ware elne Umrandung, die nur sichtbar wird, wenn das Element irn Fokus oder aktiv ist. Das folgende Codefragment benutzt da zu die Pseudoelem ent e : focus und : acti ve .
o
o o
p : fo cus {outli ne : bl u e solid t h in ; p :act ive {outline ; red so lid t hick ; img p but ton
{ outline : red ; } { outli ne : double 5px ; } {out l i ne : #E9E9E9 doub le t hi n ; }
149
Kapitel 4
Aile 5tylesheet-Eigenschaften
4.10 Eigenschaften fur dynamisch generierte Inhalte 2u den spannendsten Kapiteln des Webdesigns zahlen die vielfaltigen Datenbankanwendungen, die uns nicht nur mit E-
1mmer mehr Inhalte werden direkt aus der Datenbank ins Internet geschleust - hier sind Eigenschaften fur die Formatierung und Strukturierung grater Datenmengen gefordert. Zusammen mit den beiden Pseudoelementen : before und : af-
Commerce, sondern auch mit Onlineforen , Content-Management- und Redaktionssystemen
dungen gehbren einfache Preislisten , in denen vor jeder Preisangabe
versorgen. Die CSS-Eigenschaf-
das Eurosym bol
ten fur dynamisch gene rierte
MwSt« eingefOgt wird. Wer PHP-Anwendungen schreibt, wird frah se tn.
Inhalte bringen Ordnung in das Gef lecht aus Skriptanweisungen und HTML-Tags, das mehr alsje zuvor die Trennung von Inhalt en und Design erfordert.
nicht nur die Formatierung, sondern auch das EinfOgen wiederholter
t er (siehe Kapitel 5.7) werden wiederkehrende Texte und Bilder vor oder nach einem spezifizierten Element ausgegeben . Zu den Anwenund hinter der Preisangabe die Bemerkung »zzgl.
Phrasen, die Inkrementierung und die Nummerierung von Kapiteln dem Stylesheet Oberlassen zu k6nnen. Die vor und nach einem Element eingefOgten Inhalte mOssen keinesfalls statisch sein, sondern k6nnen seiber auch wieder dynamischer Natur sein, wte im folgenden Beispiel das HTML-Attribut title. das vom PHP-Skrlpt elner Datenbankanwendung geliefert wlro: • input :be fore ( content : " Bi t t e geben Sie die ' a t t r ( t i t l e ) , ein " ; }
2ukunftsmusik? Die Eigenschaften der Gruppe »Generated Content« werden von der jOngsten Brawsergeneration Oberraschend gut unterstOtzt - die elnzlge Ausnahme stellt Internet Explorer dar. Da aber die beiden grafischen HTML-Editoren Adobe GoLive und Macromed ia Dreamweaver diese Eigenschaften nicht einmal in Ansatzen kennen, bleiben sle ein exotische s Terrain . Somit sind sie allenfalls browsergestOtzten Anwendungen innerhalb geschlossener Benutzergruppen vorbehalten, wo der Browser vorgegeben werden kann - z.B. in betriebsinternen Auskunftssystemen. Mit den wachsenden AnsprOchen an browsergest otzte Anwendungen vom Bestellformular bis zum Redaktionssystem auf PHPoder ASP-Basis Iiegt hier ein grates unentdecktes Potential fur die Formatieru ng durch Stylesheets.
nen CSS-Selektor einzufOgen. Der eingefOgte Inhalt kann aus Zeichenketten, Hochkommas, URLs oder Zahlern bestehen . Charakteristisch fur dynamische Inhalte tst die Tatsache, dass der Entwickler des HTMLDokuments die Inhalte und die Menge der Inhalte (z.B. Datensatze aus einem Katalog) nlcht kennt. Zwei Pseudoelemente formatleren dynamisch generierte Inhalte : : be fore fOgt Phrasen, Bezeichnungen oder Bilder vor einem dynamisch generierten Inhalt ein . Der Doppelpunkt ist zWingend erforderIIch. Syntax: selector : before { ... }. : a fter mgt Phrasen, Bezelchnungen oder Bllder nach elnem dynamisch generlerten Inhalt ein . Der Doppelpunkt tst zWingend erforder-
close-quote I no-close-quote I no-open-quote I open-quote I string I url ("ur laddress ")
Iich. Syntax: selector ; after { ... }. Beachten Sie bitte, dass content nkht vererbt wird. Da aber ; before und ; after Ihre Eigenschaften ve rerben, konnen versch iedene CSSEigenschaften auf den Inhalt angewendet werden . content welst elf moguche Werte auf : at tr (al z ) mgt den Text im alt-Attrlbut als Inhalt eln , counter (n ame) mgt einen Zahler mit Namen als Inhalt ein . counter (n ame ,
list-s tyle-type) mgt einen Zahler mit Na-
men als lnhalt ein, der in dem angegebenen Ustenstil dargestellt wird (z.B. decimal 1,2,3 ..., upper-latin I, II, III ... ). counters (name, string ) mgt aile Zahler m it Namen alslnhalt etn. coun ters (name,
string, list -style-type) fOgt aile Zahler
mit Namen als Inhalt eln und stellt sre In dem angege benen Listens til dar (z .B. decimal 1.2,3 ..., upper-latin I, II, III ... ). c lose-quote mgt ein sch ltesendes Hochkomma eln, wie es In der CSS-Eigenschaft fOr ve rs~hachtel te Hochkommas deftntert ist. no -c lose -quote mgt kein schnesences Hochkomma ein, sondern zahlt die CSS-Eigenschaft quotes herunter. no-open-quote fi.igt kein 6ffnendes Hochkomma etn, sond ern zahlt die CSS-Eigensch aft quotes hoch . open-quote mgt eln offnendes Hochkomma eln, wle es In der CSSElgenschaft fUr ve rschachtelte Hochkommas defin lert 1st.
string mgt elne Zelchenkette oder elnen Text in Hochkommas ein . Voreins tellund 1steln leerer String (' "). uz L (" ur l a d dr e s s") 1st elne URL-Adresse In Hochkommas.
151
Kapitel 4
Aile Stylesheet·Eigenschaften
Beispiel Es kommt im m er wieder vor, dass Autoren Aufzahlungen ode r Kapitel St e fu dIe Ges:.ll ung des H ntergrunds von E menten
eines Buches durchnumm erieren wollen , ohne dass die Anzahl de r entsprechenden Eleme nte bekannt ist.
k. III
St te fur die Gesu ung emes R. .llhmens urn em Eetne!"1t
• h I { co lor : n666666 ; font : 16px Verdana } • h I : be f o r e ( con ent : "Ka p i t e l "a t t r (tit le) " " . co lor : red ; font : bold 16px /120% Georgia, Times
St Ie fur die Abmes sungen LIne Ausnc t ..mg von Elemerten
Die Eigenschaften fOr dynam ische Inhalte werden zurzeit nur von Opera5+ und Mozilla l /Netscap e 6+ unterstQtzt.
< /hl>
< /p> In den Oatensatzen sind Oberschr iften und Absatze gespe ichert nicht aber die Phrase »Kapltel«. Die Kapitelnum m er ergibt sich aus der Pos ition des Datensatzes .
Beispiel Bei untersch iedl ich en Katego rien in Katalogen 5011ein grafis ches Symbol vor jeden Dat ensatz eingefOgt werden . Da der Katalog auch in tan dern publ izlert werden 5011, in denen eine andere Wahrung als der Euro gilt macht es Sinn, die Wahrungsbeze ichnung in das Stylesheet aufzunehmen, wo sie zentral fur den gesamten Katalog geand ert werden kann . Auch der Nachsatz »zzgl. MwSt.« 5011 dur ch eine einfache Anderung in de r jeweilig en Landessprache ersch ein en.
o <style ~(el.nie (Nelken)
C 14.90zz;1
~h..SI.
Tauprinzessin (Tulpen)
Sommemachtstroum (Kakteen) C ~7. 10 zz;l MwSI.
152
• • • •
o
type= "text /css "> table { background : #FFFFF7; border : 2px solid #FFDE7B } td .preis :before content : " " } td . prei s : after content : " zzgl. MwSt . " } td .kat :before content : url( "tulpe .gif ") " " } td .kat :after content :" "a t t r (t i t l e );
counter- increment ist eine Liste von einem oder mehreren Paaren,
Werte none I [ identifier number? 1+
bestehend aus iden tif ier und number , die zu einem Selektor gehoren und durch Leerzeichen voneinander getrennt sind . Jedes Paar
setzt den numerischen Wert fest , durch den der Zahler jedes Mal, wenn der spezifische Selektor vorgefunden wird, erhbht wird. Wenn der numerische Wert number nicht angegeben lst, wlrd per Vorgabe der Zahler um eins erhbht. Auf diese Weise kbnnen z.B. aufeinander folgende Kapitel, Textpassagen oder Bilder durchnummeriert werden. none ist die Voreinstellung und verhindert das Hochzahlen des Zahlers. i d en t i f i er
number : Der Identifier-Teil des Wertepaares ist zwin-
gend erforderlich, denn er identifiziert den Zahler und kann sich auf etne Klasse, einen Identifier oder Selektor beziehen . Der Zahlenwert number des Wertepaares tst optional und kann negative oder positive Werte annehmen . Wenn er nicht angegeben tst. wlrd der Zahler per
Wenn die display -Eig enschaft des Elements auf none gesetzt tst, wird der Zahler nle erh6ht. Wenn die vi sibil i ty -Elgenschaft des Elem ents auf hidden gesetzt tst: kann der Zahler erhOht werden.
Vorgabe um eins erhbht. / * Vor jedem neuen Kapitel
Beispiel
eins nach oben zahlen
• hl : be f or e { content : "Kapi t el " counter(kapitel) counter-increment : kapitel ; }
und »Kap i t el ... « ausgeben
counter-reset Erblich: Nein
*/
05+ Version: C552
counter-reset 1st elne L1ste von elnem oder meh reren Paaren, bestehend aus identifier und number, die durch Leerzelchen vonelnander getrennt sind und elnern Selektor zugewlesen sind. Jedes Paar setzt den numerisch en Wert des Zahlers auf den Wert number zuruck, wenn der spezielle Selektor vorgefunden wird. Wenn number nicht angegeben tst, wlrd der Zahler per Vorgabe auf null zuruckgestellt. Auf dlese Weise werden aufeinander folgende Kapltel, Unterkapltel und Bilder mit 1.0, 1.1, 1.2, 2.0, 2.1, 2.2 ... fortlaufend nummerlert.
Werte none I [ identifier number?
Beispiel p :before { content : "Kost en pro Teilnehmer : "}
• p :after
{ "
"; }
non e tst die Vorelnstellung und verhlndert, dass der Zahlerzuruckqesetzt wlrd. Wenn die dispiay-Elgenschaft elnes Elements auf none gesetzt rst, kann der Zahler nkht zuruckqesetzt werden. Wenn die vi sibil i ty-
15 3
Fuge einen
Sti I an
den Mond
Kapitel 4
Aile Stylesheet-Eigenschaften
Eigenschaft emes Elements auf hidden gesetzt tst, kann der Zahler zurOckgesetzt werden.
identifier number : Der Identifier-Wert des Wertepaares ist zwingend erforder lic h und ldentlftzlert den Zahler. Er kann durch eine Klasse, eine Id oder durch einen se lektor angesprochen werden . Der optionale nume rische Wert ist der Wert. auf den der Zahler zurOckgesetzt wlrd, wenn der speziftsche selektor vorgefunden wlrd. number kann positive und negative Werte annehmen. Wenn number nkht angegeben tst. wird der Zahler per Vorgabe auf null zurOckgese tzt. Der Beispielcode vom W3C nummeriert Kapitel als 1, 1.1, 1.1 .1 usw.
Beispiel • 01 • li : before
counter-reset : item content : counters (i tern ,
" ." ) ;
counter-increment: item
Werte
quotes
IE5 (Mac)
none I
Erblich: Ja
Version : C552
[ string sering 1+
qu otes ist eine Liste von elnern oder mehreren Typen von bffnenden und schl tesenden AnfOhrungszeichen, die durch Leerzeichen voneinander getren nt sind. So kbnnen spezielle AnfOhrungszeichen gewahlt werden, wenn die content -Eigenschaft AnfOhrungszeichen vor oder hinter eln spezlftsches Element setzt und dabei stll und tnhaltsabhanglge Darstellu ngen bewahrt bleiben . (AnfOhrungszeichen mOssen nicht gesetzt werden. Wenn der eingesetzte Inhalt eine einfache Zeichenkette tst, kann man genauso gut «, >, " ? oder beliebige andere Zeichen benutzen .) none verhindert die Darstellung von AnfUhrungszeichen in der conten t -Elgenschaft.
string string komm t Im mer paarwelse vor und deftntert eln Paa r aus bffnenden und schllef:>enden Hochkommas . Die erste Zelchenfolge string deflnlert die bffnenden Hochkommas, die zwelte Zelchenfolge string die schlle f:>enden Hochkommas . Jedes AnfUhrungszelchen muss in doppelte bffnende und schuesende Hochkom mas gesetzt werden und darf keine Leerzeichen enthalten. Wenn Leerzeichen enthalten sind , werden ste dargeste llt.
Darstellung
Beispiel
»Dies sind >eingebectete< Hochkom:nas . «
o
154
• q : lang (de l quotes : " » " " « " " >" " <" } ... Dies sind eingebettete Hochkommas .
4.11 Aural - Eigenschaften fur die Sprachausgabe
4.11 Aural - Eigenschaften fUr die 5prachausgabe Die aurale Darstellung eines Dokuments verwandelt das Dokument in »flachen« Text und fOttert damit den Sprachsynthesizer fur die Sprachausgabe. Sie tst gedacht fur Blinde, zum Lesenlernen, zur UnterstOtzung fur Menschen mit Leseschwachen, zur Unterhaltung , fur ein zukOnftiges »lnternetradlo« - es gibt vlelfaltlge Anwendungen. Sprachsynthesizer, die Texte in Sprache umwandeln (Text-toSpeech), sind bereits vielfach verfOgbar. Zwar ist noch deutlich zu erkennen, dass hier der Computer spricht, aber sie sprechen klar und verstandlkh und modulieren die Sprache erstaunlich gut. Eine der ersten Sprachumwandlungen fur Browser im Internet ist
Noch erscheint uns die Sprachausgabe genauso wie WebTV als eher exotische Anwendung. Andererseits ist es heute fUr die Besitzer von Palmtops fast selbstverstiindlich, die neueste Adressbuchsoftware aus dem Internet zu laden. Erschien uns das nicht vorzwei, drei Jahren als ganz schon exotisch?
Logox, eine kommerzielle Software der G DATA Software AG. Logox besteht aus einem kostenlosen Plug-in fur Internet Explorer auf dem PC und einem Softwarepaket fur Webentwickler, die Seiten mit Sprachausgabe aufbauen wollen. Logox arbeitet nicht mit Stylesheets, sondern verfolgt einen herstellerspezifischen Ansatz. Aurale Stylesheets werden von dem Sprachpaket nicht interpretiert - der Hersteller setzt auf seine eigene Entwicklung. Aber das W3C hat die Spezifikation von Styiesheets fOr die Sprachausgabe mit grol)em Druck vorangetrieben . Und so kbnnte das Stylesheet fur die Sprachausgabe Oberschriften ausdrOcken:
• hI , h2 , h3 , h4 ( voice-family : male ; richness : 80 ~ cue-before : url( "beep .au ") • p .heidi • p .peter • p .goat
azimuth : center-left azimuth : right volume : x-soft }
Vor einer Oberschrift spielt der Sprachsynthesizer einen Klang (beep .au) und spricht die Oberschrift dann mit einer sehr vollen mannlichen Stimme .
male tautstarke und 100 dementsprechend die hbchste Lautstarke darstellt.
percentage wird relativ zu elnem inharenten Wert berechnet. silent bedeutet kein Gerausch. Nicht zu verwechseln mit dem Wert 0 fOr number.
x- so f t
=
0 soft
=
25 medium
=
50 loud
=
75
x-loud = 100 Die Vorelnste llung tst med ium.
Werte none I normal spell-out
speak Erblich: Ja
(552
pause-before legt elne Pause fest, die vor dem Vorlesen elnes Eleanaloge Eigenschaft zu display dar. none unterdruckt die Sprachausgabe fur das Element und verbraucht dabei keine Zeit. normal tst die Voreinstellung und bewlrkt eine normale, sprachabhangige Aussprache eines Elements . spell-out buchstabiert den Text.
Werte time I percentage
pause -before Erblich: Nein
(552
pause-before legt eine Pause fest, die vor dem Vorlesen eines Elements eingelegt wird.
ti me gibt den Zeitraum fur eine Pause in absoluten Zeiteinheiten wie Sekunden und Millisekunden an.
p e r cen t age benutz t die Umkehrung des Wertes fur speech-rate. Wenn speech-rate m it 120 Wortern pro Minute festgelegt tst. betragt pause-before : 100% 500 ms .
156
4.11 Aural - Eigenschaften fur die Sprachausgabe
pause-after
Werte (552
Erblich : Nein
pause-after legt eine Pause fest, nachdem der Sprecher einen In-
time I percentage
halt vorgelesen hat.
time gibt den Zeitraum fur eine Pause in absoluten Zeiteinheiten wie Sekunden und Millisekunden an.
percentage benutzt die Umkehrung des Wertes fO r speech -rate . Wenn speech-rate mit 120 Wbrtern pro Minute festgelegt tst. betragt pause-after : 20% 100 ms .
pause
Werte (552
Erblich : Nein
pause stellt die Kurzform fur die belden Eigenschaften pause-befo-
[ time p e r c en t age]
{1 ,2}
re und pause-after dar. Wenn zwel Werte angegeben sind, bestlmmt der erste Wert p a us e b e fo re und der zwelte Wert pause -af te r . Wenn nur eln Wert angegeben rst. wlrd er auf belde Eigenschaften angewendet. Erlaubt sind absolute Zeiteinhelten in Sekunden und Miliisekunden oder alternativ Prozentangaben der Sprechgeschwindigkeit, wodurch das Stylesheet robuster gegen Anderungen der Sprechgeschwindkelt wlrd ,
cue -before legt einen Klang fest, der vor der Sprachausgabe eines Elements gespielt wird, um das Element vom vorangegangenen Element zu trennen .
ur L
("urladress") ist die Adresse elner Klangquelle. Wenn sich
die Uri zu etwas anderem auflbst als zu einer Audiodatei - z.B. ein Bild darstellt -, wird die Quelle ignoriert und die Eigenschaft wlrd behandelt, als ware der Wert none (Vorelnstellung) deklariert worden.
Werte u r L ( " urladdress ")
none
cue-after Erblich: Nein
C552
cue-after legt einen Klang fest, der nach der Sprachausgabe elnes Elements gespielt wird, um das Element vom nachsten Element zu trennen . ur I
(" urladress") ist die Adresse einer Klangquelle. Wenn sich
die Uri zu etwas anderem auflbst als zu einer Audiodatei - z.B. ein Bild darstellt - , wird die Quelle ignoriert und die Eigenschaft wird behandelt,
ats ware der Wert none (Voreinstellung) deklariert worden.
Beispiel • a (cue-before : ur l( "glocke .aiff ") ; cue -after : ur I ( "dong .wav ") } • hI (cue-before : ur l( "pop .au ") ; cue-after : url( "pop .au ") }
Werte
cue
cue-before &1
Erblich: Nein
cue-after
cue 1st elne generlsche Eigenschaft, die den Klang vor und nach ernem Stil festlegt und dam lt elne Kurzform der Eigenschaften cue-before und cue-after darstell t.
C552
Wenn zwei Werte angegeben sind, bestimm t der erste Wert c ue- be-
fore und der zwelte Wert cue-a fter. Wenn nur em Wert angegeben tst. wird er auf beide Eigenschaften angewendet.
158
4.11 Aural - Eigenschaften fur die Sprachausgabe
Beispiel • hI (cue-before : url("pop .au "); cue-after : rl( "pop . a u " ) • h l (cue : url( "pop .au ")}
play-during Erblich: Nein
Werte C552
play-during legt einen Klang fest, der wahrend des Lesens eines Elements gespielt wird.
ur l
(" urladdress·) I
mix? I repeat? auto I none I
urI ("urladdress") ist die Adresse elner Klangquelle. mix glbt an, dass der Sound vom Vorfahrenelement Obernommen und weiter eingesplelt wlrd, wahrend der Klang, der In ur l angegeben wurde, mit dem Sound des Vorfahren gemlscht wlrd. repeat bedeutet, dass der Sound wtederholt wtrd, falls er zu kurz rst. um die volle Dauer des Elements aufzufO llen. Ansonst en wird der Sound einmal gespielt und endet dann. Wenn der Sound zu lang fur die Dauer des Elements tst, wird er »abgeschnitten«, sobald das Element fertig ausgesprochen wurde. mix und repeat sind optional. auto 1st die Voreinstellung und glbt an, dass der Sound des Vorfahrenelements weiterspielt und nicht neu gestartet wird (was der Fall ware, wenn die Eigenschaft erblich ware).
none bedeutet Stille. Der Sound des Vorfahrenelements (falls es etnes gibt ) ist still, solange das augenblickliche Element dauert, und fahrt fort. sobald das augenbllckliche Element fertig ausgesprochen tst .
Beispiel • blockquote .sad ( play-during : ur I ( "vi o li ns . aif f " ) • blockquote q play-during : url( "harp .wav ") mix} • span .quiet ( play-during : none }
azimuth Erblich: Ja
Werte C552
azimuth legt fest. aus welcher horizontalen Richtung die Stimme kommt. Raumlicher Klang ist ein wichtiges stilistisches Hilfsmittel bei der Prasentation von Sprache.
angle beschreibt den Winkel, aus dem ein Element erklingt. Er wtrd
angle I
[
[ left-side far-left I left I center -left center I
in einem Bereich von -360° bis 360° angegeben. 0° bedeutet, dass
159
Kapitel 4
center-right right I far-right I right-side) &1 behind) I leftwards rightwards
Aile Stylesheet-Eigenschaften
der Klang direkt von der Mitte einer trnaglnaren Buhne ausstrahlt, 90 0 bedeutet, das der Klang von rechts kommt, 1800 ist der Klang von hinten, 270 0 (oder -90 0 ) der Klang von links . Negative Werte sind ebenfalls erlaubt, so ist die Angabe -90 0 gleichbedeutend mit 270 0 • left-side = 270 0 (-90°), kombiniert m it behind = 270° far-left = 300° (- 60°) , komb iniert mit behind = 240 ° left = 320° (-40 °), kornblnlert mit behind = 220° center-left = 340° (-20°), komb iniert mit behind = 200° c enter (Voreinstellung)= 0° (-360°), komb iniert m it behi nd = 180 ° center- right = 20 ° (-340°), komb iniert mit behind = 160° right = 40° (-3 20°), kom biniert mit behind = 1400 f ar -ri ght = 60 ° (-300°), kombin iert mit behind = 120 ° right-side = 90° (-270°), kornblniert mit behind = 90° leftwards bewegt den Klang nach links, relativ zum augenbllcklichen Winkel. rightwards bewegt den Klang nach rechts, relatlv zurn augenblicklichen Winkel.
Werte angle I below I level I above I higher I lower
elevation Erblich : Ja
(552
e levation legt fest, aus welcher vertikalen Richtung die Stimme kommt.
angle beschreibt den Winkel, aus dem ein Element erklingt. Er wtrd in einem Bereich von -90 0 bis 90 0 angegeben . 0 0 bedeutet, dass der Klang vom vorderen Horizont ausstrahlt, auf einer Ebene mit dem Zuborer, 90 0 bedeutet, dass der Klang direkt von oben kommt, -90 0 ist der Klang direkt von unten . below = -90° level = 0 ° (Voreinstellung) above = 90 ° higher fOgt dem Winkel 10° hinzu. lower zleht dem Winkel 10° abo Werte auserhalb des Bereichs von -90 0 bis 90 0 werden .abgeschnttten" .
speech-rate legt fest, in welcher Geschwindigkeit ein Element gesprochen wird.
number gibt die Sprechrate in W6rtern pro Minute an. Es handelt slch hier um eine Angabe, die stark von der jewe iligen Sprache abhangt, aber dennoch von den meisten Sprachsynthesizern unterstUtzt wlrd.
number x-slow slow I medium fast I x-fast faster slower
x-slow entspr lcht 80 W6rtern pro Minute. slow entsprlcht 120 W6rtern pro Minute . me dium lst die Voreinste llung und entsp rlcht ungefahr 180 bts 200 W6rtern pro Minute. fast entsp rlcht 300 W6rtern pro Minute . x -fast entsp rlcht 500 W6rtern pro Minute. faster fOgt der augenbllckllchen Sprechrate 40 W6rte rn pro Minute hlnzu. slower senkt die augenbllckllche Sprechrate um 40 W6rter pro Minute.
voice-fam ily Erblich: Ja
Werte (552
voice- fami ly ist elne Liste von Stimmfamilien, die bestimmte Stimmen enthalten - ahnlkh wie Schriftfamilien.
specific-voice bezeichnet spezlelle Stimmen. Belsplele sind comedian, t r i.no i ds . carlos, lani. Stlmmen werden ebenso behandelt wie Schriften . Sle k6nnen in elner Auswahlliste mit Alternativen angegeben werden . Wenn der Name einer Stimme aus mehreren durch Leerzeichen getrennten W6rtern besteht, wird empfohlen, den Namen in eintache Hochkommas zu setzen.
generic-voice glbt die Stlmmfamillen an. M6gliche Werte sind male, female und child (en tsprlcht elner generischen Schrlftfamille wle sans-serif und monospace).
161
Kapitel 4
Aile Stylesheet-Eigenschaften
Beispiel • body { voice-fam 'ly : carlos , robert , male ; }
Werte
pitch
fr equency
Erblich: Ja
(55 2
x- l ow I low I medium high I x- h i gh
p it c h spezifiziert die sprechende s tim me . Die stim m lage de r me nsc hlichen stimme Iiegt typische rweise bei 120 Hz fur rnannlkhe und 210 Hz fur weibliche stimmen. sprachen werden mit unterschiedlichen Betonungen und stimmlagen gesprochen , die eine zusatzlkhe Bedeutung einbringen kbnnen . frequency gibt die mlttlere 5prachfrequenz In Hertz (Hz) an .
x-low, low, medium (Vore lnstellung), high. x-high sind Werte,
die nicht in absoluten Hz-Werten angeg eben werden kbnn en, da ste auf der jeweiligen s timmfamilie beruhen .
Werte number
pitch-range (552
Erblich : Ja
pi t ch- range legt die Variationen der vorl esenden 5tim m e fes t. 5011 der Vorleser eher monoton oder mit einer variantenreichen Betonung sprechen? number ist ein Wert zwischen
a und 100 . a 5011 eine monoton e stim-
me und 50 (Voreinstellung) eine normale Betonung erzeugen. Hbhere Werte sind fOr animie rte Stimmen gedach t.
Werte
stress
number
Erblich : Ja
(552
stress legt die Betonu ng eines Elem ents durch die Sprechersti mme fest. Englisch z.B. ist eine betont e Sprache. in der die verschiede nen Sat zte ile unterschiedlich betont werden . Deutsch ist ei ne relativ monotone sprache. number ist ein Wert zwischen
a und
100. Die Bedeutu ng hanqt von
der jeweil igen Sprache abo Ein Level von 50 tst der Standard . Bei
162
4.11 Aural - Eigenschaften fur die Sprachausgabe
rnannlrchen Englisch sprechenden Stimmen mit einem mittleren
p itch von 122 Hz klingen Betonung und Intonation anders als bei einer italienischen Stimme .
richness
Werte
Erblich : Ja
(552
number
richness legt die Starke der Stimme fest - 5011 die Stimme eher voll oder dunn klingen? Eine reiche Stimme wird in einem groten Raum voll klingen , wahrend eine weiche Stimme den Raum nicht FUllen kann. number ist ein Wert zwischen
a und
100 . Die Bedeutung hangt von
der jeweiligen Sprache abo Ein Level von 50 ist der Standard . Bei mannlkhen Englisch sprechenden Stimmen mit einem mittleren pitch
von 122 Hz klingen Betonung und Intonation anders als bei einer italienischen Stimme .
speak-punctuation Erblich : Ja
Werte (552
speak -punctuation legt fest, ob 5atzzeichen vorgelesen werden.
code none
code bedeutet, dass die Interpunktion wie Semikola, Klammern und Doppelpunkte wortlkh gesprochen wird. none ist die Voreinstellung und bewirkt, dass die Interpunktion nicht gesprochen, sondern durch entsprechende Pausen ausgedrOcktwird.
speak-numeral Erblich : Ja
Werte (552
spea k-numeral legt fest, wie Zahlen vorgelesen werden.
digits continuous
digits bewirkt, dass Zahlen als individuelle Zeichen gelesen werden. Die Zahl 237 wird als "Zwei, Drei, Sieben" vorgelesen. continuous ist die Voreinstellung und spricht die volle Zahl aus. Die Zahl 237 wird als Zweihundertsiebenunddreitig vorgelesen.
163
Fuge einen
Stil
Kapitel 4
an den Mond
Aile Stylesheet-Eigenschaften
4.12 Paged Media - Stile fUr den Druck Wenn Stylesheets jetzt noch uber die Mechanismen verfiigen wiirden, die einen Seitendruck regeln, ware ein Browser ein Satzprogramm ...
Wahrend es sich bei der Ausgabe auf dem Monitor und auch bel der Sprachausgabe um eme »fortlaufende« Ausgabe handelt, muss der Druck eln HTML-Dokument in eine oder mehrere Seiten unterteilen . Fur die Aufnahme von Eigenschaften fur die Seitengestaltung der Druckausgabe hat CSSZ das Modell fur die visuelle Formatierung um eine neue Box erganzt : Die Seitenbox erweitert das Boxmodell , damit Autoren Papiergr6fSen, Rander, Ausrichtung des Papiers, Bedingungen fur einen Seitenumbruch usw. angeben k6nnen . Das Modell beinhaltet die Seitenausgabe, wie wir sie von den Desktop-Druckern kennen : Dokumente werden Seite fur Seite auf jeweils
Blatt n
I I
[Seit enbox
Blatt /
I
I
Transfer~
I
margin
Blatt
----f Transfe;:--"
t "l;
I
Zum Verstandnis des seitenmodells in CSS2 sollte nicht der typische Desktop-Drucker zum Vergleich herangezogen werden . Der Desktop-Drucker druckt in der Regei eine seite auf das passende Papier. 1m Offsetdruck hingegen kann eine seite auf ein !lDINA4+(( Papier - einen Bogen, der einige Zentime ter grof)er als DIN A4 ist - , meistens jedoch auf noch grof)ere Bogen gedruckt werden . Das ermoglicht !lAnschnitte(( - das Drucken von Elementen, die bis an den Papierrand gehen .
ein einzelnes Blatt gedruckt. Dies stellt aber nur eine M6glichkeit unter vielen dar. Hinzu kommen der doppelseitige Druck, der linke und rechte Seiten unterschiedlich formatiert, und der Druck mehrerer Seiten auf ein Blatt oder einen »Bogen«. Zusatzlkh werden »Signaturen« ausgegeben , bei denen es sich z.B. um Beschnittzeichen und eine Sei-
164
4.12 Paged Media - Stile fur den Druck
tenbeschreibung handeln kann, anhand derer beim Falten und Beschneiden des Papiers die richtige Reihenfolge festgeste llt wird. Ein Dokument kann das Papier fOr den Druck aus mehreren Peplerkassetten bezlehen und ein Dokument kann in eine Datei ausgegeben
Die @page-Regel @page ( s i ze : 21cm 29,7cm ; ma r q i n : 2cm; )
definiert eine SeitenboxgrMe von
werden . Der Inhalt kann uber die Seitenbox hinausgehen, wenn z.B.
21 ,0 x 29, 7 em und erzeugt einen
Bilder oder andere Elemente der Seite angeschnitten werden . Der An-
Abstand (margin ) von 2 cm zwischen
schnitt von Bildern, die uber den Seltenrand hinausgehen sollen , wird
den Randern der Seltenbox und dem
dureh einen negativen Abstand (margin) von der Seitenbox umgesetzt.
Seitenbereich.
Die jeweilige Realisierung ist dem User Agent, bel dem es sich jetzt
Die Eigenschaften border und padding kOnnen nich t auf die Seite einer Druckausgabe angewendet werden .
um den Druckertreiber handelt, und einem Seitenschneider uberlassen.
Regeln fUr den Druck Autoren geben Mate, Orientierung und die Rander der Seitenbox in der @page-Regel an. Eine @page-Regel besteht aus dem Schlusselwort @page, einem optionalen Seitenselektor, gefolgt ohne Leerraum von einer optionalen Seitenpseudoklasse und einem Block von Deklarationen (dem Seitenkontext) . Die Seitenregel @page enthalt die Abmessungen, die Orientierung (Hochformat oder Breitformat) und die Rander der Seite, z.B. @page quer :left { size : 29 ,7cm 21cm ; margin : 2cm } . Der Seitenselektor gibt an, auf welche Seiten die Deklarat ionen anzuwenden sind. Ein Seitenselektor kann z.B. die erste Seite , aile linken Seiten oder eine Seite mit einem spez tflzterten Namen ansprechen . Die Abm essungen der Seitenbox werden durch die size-Eigensch aft bestlmmt. Die Abmessungen des Seitenberelchs sind die Abmessungen der Seltenbox ohne margin. Inhalte lrn @page-Modell sind in Blbcken oder Boxen untergebracht. Boxen Iiegen horizontal auf der Seite. Dabei folgt die Oberkante elner Box hinter der Unterkante der vorgehenden Box. Anders als die zugrunde liegend e Seite kbnnen die Boxen die Eigenschaften margin, border und padding aufwelsen, die bet der Druckausgabe auch respektlert werden . Die Boxen werden vertikal auf unterschiedliche Weise ausgerichtet: anhand der Ober- und Unterkanten oder anhand der Grundlinie (baseline) des Textes in den Boxen . Der Text innerhalb einer Box liegt in einem rechteckigen Bereich, der Inllnebo x. Die Breite einer Inllnebox wird durch den umfassenden Block und die Hbhe durch die Zeilenhbhe bestimmt. Dabei kann eine Zeile hbher werden als die Box, in der sre Iiegt (wenn z.B. die Boxen 50 ausgerichtet wurden , dass die Grundlinien registerhaltig werden ). Die Pseudoklassen :first, :Ieft und :right wurden fOr die Seitenausgabe beim doppelseitigen Druck defin iert.
165
Kapitel 4
Werte
Aile Stylesheet-Eigenschaften
size
length t i . 2} auto I landscape I portrait I
IE5+ (PC) Ml N6 05+ C552
size gibt die Gral)e und Ausrichtung (Hoch/Querformat) der Seiten box an. Die Gral)e der Seite kann absolut oder relativ angegeben werden . Bei einer relativen Angabe 5011 der Druck auf die Seitengral)e angepasst werden .
length erzeugt elne absolute 5eitenbox . Wenn nur ein Wert angegeben ist, setzt er sowohl die Breite als auch die ttohe der Box. Mit zwei Werten werden Breite und ttohe der Box spezifiziert.
Da die 5eitenbox der umfassende Biock tst, sind Prozentangaben tut die 5eitenbox nicht erlaubt .
auto ist die Voreinstellung und setzt die 5eitenbox auf die Gral)e und Ausrichtung der 5eite. landscape Oberschreibt die Ausrichtung des Papiers. Die horizontaIe Kante ist langer als die vertikale Kante . portrait Oberschreibt die Ausrichtung des Papiers. Die vertikale Kante ist langer als die horizontale Kante .
Beispiel • @page
Werte [ crop none
size : auto ; margi n : 10% ; }
marks &
Zurzeit von keinem Browser untersWtzt
Erblich: Ja
I cross 1 I
C552
Beim professionellen Druck werden Beschnittzeichen auserhalb der 5eitenbox gedruckt. Die Beschnittzeichen (crop marks) werden fOr die Ausrichtung des Papiers benutzt. Gral)e, 5til und Position der Beschnittmarken werden dem User Agent Oberlassen. 1m Zeitschriften- und Buchdruck werden 5eiten auf grol)e Bogen gedruckt, die anschllesend auf die tatsachltche 5eitengral)e beschnitten werden . Anhand von Pass- und Beschnittmarken werden die 5chneidegerate ausgerichtet. crop druckt 5chnittmarken an den 5tellen, an denen die 5eite zuge-
gedruckt werden . cross druckt Passmarken (z. B. Passkreuze und 5iemenssterne). Diese Marken dienen in erster Linie zum Ausrichten der verschiedenen
•
Farbseparationen .
- - - 5chnittmarken
4.12 Paged Media - Stile fUr den Druck
Fuge einen
page-break-before
IE5+ (PC) Ml N605+
Werte
page-break-after
IE5+ (PC) Ml N605+
au 0 I always avoid I left I right
C552
Erblich: Ja
page-break bestimmt, ob em Seitenumbruch vor (be f o r e) oder nach (a f er ) einem Element durchgefOhrt werden 5011.
Stil
an den Mond
auto ts t die Vorelnstellung und erzwlngt kelnen Seltenumbruch . always erzwlngt stets einen Seltenumbruch vor/nach dem Element. avoid verrnetdet Seltenum brOche vor/nach dem Element. left veran lasst eln oder zwei SeltenumbrOche, so dass das Element stets vor/auf der Iinken Selte ausgegeben wlrd .
right veranl asst eln oder zwel SeltenumbrOche, so dass das Element stets vor/auf der rechten Selte ausgegeben wlrd .
page -break -inside
Zurzelt von kelnem Browser untersWtzt
Erblich : Ja
C552
page- break- ins ide bestimmt, ob inn erhalb ein es Elem ents ein
Werte auto I avoid
Seitenumbruch stattf inde n kann.
auto 1st die Vorelnstellung und erzwlngt kelnen Seltenumbruch . avoid verrnetdet SeltenumbrOche vor/nach dem Element.
page
Zurzelt von kelnem Browser untersWtzt
Werte
C552
auto I
Erblich: Ja
page gibt eine bestimmte Seite an. Wenn ein Blockelem ent mi t InlineInhalten eine Eigenschaft page aufwelst, die sich vom vorangega nge -
identifier
nen Block mi t Inlineinhal ten un tersche idet, werden ein oder zwel Selten in de r Druckausgabe eingefOgt. Die Boxen nach dem Seitenum bruch werden auf eine r Seite des spezifizierten Typs ausgegeben .
auto ist die Voreinste llung und druckt Seiten entsprechend den Angaben in der @page-Regel . identifier markiert eine bestimmte Seite , die in einem abweichen-
den Format ausgegeben werden 501 1.
Beispiel div :@page narrow {s'ze : 9cm 18cm; • @page rotated {size : landscape ; } • div {page : narrow ; }
In diesem Beispiel des W3C werden zwei Tabel/en auf 5e iten im Querformat ausgegeben. Wenn es moglich is t, sol/en sie auf einer 5e ite gedruckt werden, auf keinen Fal/ aber auf einer 5e tte im Hochformat (portrait), obwohl das Dokument im Hochformat angelegt wurde.
167
Fuge einen
Stil
an den Mond
Kapitel4
Aile Stylesheet-Eigenschaften
• table {page : rotated ; } ... und im Dokum ent: -cd.iv»
o o o o Werte integer
orphans widows
05+ 05+ (552
Erblich: Ja
o r pha ns (»Schusterj ungen«) gibt an, wie viele Zeilen ein Absatz am Ende einer Seite aufweisen muss . widows (»Hurenkinder«) regelt, aus wie vielen Zeilen ein Absatz am Anfang einer Seite mindestens bestehen muss .
int eger ist per Voreinstellung 2 . Wenn ein Absatz am Ende einer Seite weniger als zwei Zeilen aufweist, wird ein Seitenumbruch eingefOgt und der Absatz wtrd vollstandlq auf der nachsten Seite gesetzt - das Druckbild einer einzelnen Zeile am Ende einer Seite gilt als unharmonisch . Entsprechend wird ein Seitenumbruch vor einem Absatz eingefOgt, wenn der Absatz am Anfang einer Seite weniger als zwei Zeilen aufweist, und der Absatz wird vollstandlg an den Beginn der nachsten Seite gesetzt.
:first
05+
:Ieft :right
05+ 0 5+
Erblich : Ja
(552
Die Pseudoklassen : first , : lef t und : right wurden fur die Seltenausgabe deftnlert, um dem doppelseitigen Druck gerecht zu werden. Beim Druck von doppelseitigen Dokumenten wie BOchern oder Zeitschriften gibt es grundsatzlich drei Arten von Seiten : die erste, die linke und die rechte Seite .
Beispiel Aile Abstande betragen 2 cm, nur der Abstand von der Oberkante der ersten Seite betragt 10 cm : • @pa ge ( margin : 2cm; • @page : f i r s t
168
}
{ mar gin-top : lO cm;
}
Catch as Catch can Kapitel 5 Das Fischen nach Elementen - Selektoren
Was passiert, wenn der Grafiker Absatze mit und ohne Einzug einsetzen m6chte, oder die Werte in einer Spalte der Tabelle in roter Farbe anzeigen rnochte , aile anderen Spalten aber in Schwarz? Wie kommen Strukturformate zustande, die HTML gar nicht kennt, wie etwa eine Bildunterschrift oder Text in einer Marginalspalte? Zwar gibt es stets die letzte Ausflucht, einen stil durch das style-Attribut des Tags direkt lm Taganzuwenden, aber damit ware der grol)e Vorteil der globalen und externen stylesheets hin. Cascading stylesheets warten mit vielerlei Techniken auf, um Elemente In elnem HTML-Dokument herauszufischen und Ihnen den passenden stil zu verleihen : vom einfachen HTML-selektor, der die Darstellung von HTMLElementen neu definiert, bis hin zur kontextabhanglgen selektion und den kunstreichen Attributselektoren .
5.1 Das Selectoracle bei http://penguin.theopalgroup.com/cgibinlcss3explainerlselectorac1e.py Ubersetzt Selektoren in Klartext.
Versch iedene Arten von Selektoren
Zu den gro&en Herausforderungen beim Aufbau der Typografie und des Layouts mit 5tylesheets gehbrt die Auswahl der Elemente, auf die ein 5til anzuwenden ist. Absatze in
-Tags soilen in verschiedenen Layoutbereichen unterschiedlich formatiert werden, ein Link in der Navigationsleiste soil farbig hinterlegt werden, eln Link im Text nicht. Die Elemente
fur
die
Navigation
sollen
auf der
linken
5eite des
Browserfensters angeordnet werden. C55 Ibsen diese Probleme durch verschiedene Arten von 5elektoren, die nach bestimmten Regeln miteinander kombiniert werden, um auf individuelle Elemente, die tief in der 5chachtelstruktur des Dokuments Iiegen, zuzugreifen und ste in Form zu bringen . Zu den intuitiven 5elektoren gehbren der HTML-Elementselektor, der den Namen des HTMl -Tags benutzt (p {font- family : Arial} oder h l {background : gray} ), und der Klassenselektor, dessen Name durch das class-Attri-
but an ausgewahlte Tags weitergegeben wlrd ( . einzug {text -indent : O.5em} und 1m HTMl -Code -cp c l as see i nzuqc- ). Daruber hinaus gibt es den Universalselektor, der aile Elemente anspricht, den Kontextselektor, der auf Elemente innerhalb von bestimmten anderen Elementen zugreift, den id-5elektor, der ein HTMLElement mit der entsprechenden Identifikation durch ein id-Attribut auswahlt.
170
5.1 Verschiedene Arten von 5elektoren
Bezeichnung
Beispiel
Erklarung Aile Elemen te sind von den deklarlerten Eigen schaften
Unlversalse lektor
betroffen . HTML-E lemen tselektor
p
Aile
-Tags 1m Dokument sind betroffen.
Abste lgender Selektor
p em
Aile Vorkom men (Instances) elnes
-cems-Iags. die In elnern
... lIegen oder anders formu llert: Aile Vorkommen elnes -cerro-Iaqs.
(Kontextselektor)
aber nur, wenn ste In etnern
-Tag elngesch lossen sind . Auch als Kontextselektor bezelchnet. Klndselektor
p > em
Adjacent sibling selecto rs p:first-chlld
Aile p-Elemente, die eln em -Element enthalten . Aile c ps -Tags, die das erste Kind elnes Vorfahren sind (z.B. wenn
de r erste Absatz In elnem
rst.
die erste Zelle elner Tabelle).
Pseudollnkselektor
a:llnk
Eln Hyperllnk, bevor er besucht wurde .
a.vlslted
Eln Hyperllnk, der berelts besucht wurde.
p:actlve
Eln Hyperllnk, wahrend die Maustaste gedrOckt wlrd.
p:hover
Eln Hyperllnk, wahrend der Mauszelger ooer dem Hyperllnk hovert (schwebt).
p:focus
Eln Element. das Tastatur- oder andere Elngaben akzeptlert - d.h. 1m Fokus rst .
Attrlbutselektor
p:lang( de)
Eln -cpc--Iag, dessen lang-Attrlbut auf de gesetzt ts t (Sprache =Deutsch ). Aile Vorkommen des -cpc--Tags, In denen das ein_attrib-Att rlbut gesetzt wurde, egaI wle de r Wert von title lautet.
p[ tltIe= "lmportant"]
Aile Vorkommen des
- Tags, In denen das Attr lbut title den Wert "Important" zugewlesen bekam .
p[ tltle-="Interestlng"]
Aile Vorkommen des -cps-Tags, In denen das Attrtbut title einen Wert aus etner durch Leerzelchen vonelnander getrennten L1ste von Werten aufwetst, wobel dleser Wert genau dem Wert "Interesting" entsprlcht (den Wert, ohne die umsch lle&enden Klammern) .
Klassenselek tor
.m elne_klasse
Erm6g llch t versch ledene Klasslfikatlonen von Tags
ID-Selektor
p#Bezelchnung
Jedes Vorkommen von -cp», in dem
mi t unte rschledllchen Eigenschaften. id=Bezeichnung gesetzt wurde.
171
Kapitel 5
5.2
Das Fischen nach Elementen - Selektoren
Universalselektor und HTMLElementselektoren
Allen Methoden voran steht der Stern ».« , der Universalselektor. Er legt CSS-SelelolflH'cn MUlltr
Farben, Formate oder Schriften fOr aile Elemente in einem Dokument
Erl/MJltrung
9utlehnung
8.'rlf" Jedn ElcrnC'"'
Ur-... rtcl llClC'~tor
Betrlff, Jedt. p-Element
HTMl-EltnM"tlC'''~tor
Pb
BlttNltt Jedu Abl'.'9ude,. S. I.k,o,. b-Elcmenl , dOl Innt,.halb IIl nti p-Elementl lte9t
poem
Bllt,.iltt ell!. p-Elt-l'IIlInle , t:.lndl e lt:Ic'or
fest.
o o
<sty l e t y pe= " t e xt/ c s s " >
* {fon t : l 6p x "An d a l e Mono " ; color : darkslategray
die eln erl"l.flement
o
e"lhlllh." Oer Univcrt:lIllleleMlor
....lIenMethOodcn V'Oron Iteh' del'" $ 'CI""n . ... , der lJnI...trlol1lltlek,or Er ltgt FClrbtn. FllIl"onlll'e oder Schnfftn fill' 011.Eleme"'e I" Clncm Dolcumcnlfetl
o
-- >
HTML-Elementselektoren Die elnfachsten und am haufigsten verwendeten Selektoren sind HTML-Selektoren, die eine neue Darstellung eines HTML-Tags definieren o Ein HTML-Elementselektor Oberlagert die vorgegebenen Eigenschaften eines HTML-Elements (wie z.B. Schrift und Farbe) und deftniert es neu. Wahrend die Blockelemente p, hi und h2 ohne weitere Angaben den Voreinstellungen folgen (Text wird in der Schriftart Times oder Times New Roman dargestellt), Oberschreibt der HTML-Elementselektor die Voreinstellung :
CSS -Selek loren &Ioo.t"""O
B :"'''''''0 l)w.... ~ ..... tOt
tt jede:; P-£lement
a.tnHt ..edt, b-Element. ce.. IMefhab eees
p-E
font : llpx /l36% Geneva
SeIel tor
m«'It:;~t
8e-tnfft ale p.Elemente. dle",~ E1Ipment
.,r;thOlt. n
Der IIT;\ II. -Elell1ent selekt or OM-elnfaehsten und am h6unguen ....rwef'ld.te n Selekto ren SInd HTML-SeJekto ren , die erne neue Darstellung emes HTHl · Tags de flnieren ,
172
td { vertical -a lign : top ;
Hl "'l-EIemen;.~tor Abst~
font : l2px /l50% Verda na , sans -serif ; color : #333333}
a. tr;ff t J~'5 Elforroent
Bet
Db
• p
• th {
text -align : left ; vert ical-align : top ; }
• pre b
{ color : #003399}
• hl
color : #666666} font -family : Geneva , sans -serif ; l e t t e r - s p a c i n g : O.2em}
Typ: • knutzerdeflmerten Sill trutlle" (Klane) O HT ~l -Tag neu de"n lere"
Elne korrektere Notation des Klassenselektors setzt den
CSS-$elektor verwenden Dtflnltren In
0 (
Namen des HTML-Elements direkt vor den Klassenna-
eue Styfuhut ·O,llt O
• Nut dlues Dokument
HUfe
men und trennt den Namen des HTML-Elements und den Klassennamen durch den Punkt. Das erleichtert
174
5.3 Klassenselektoren
Der Text wird durch . haupt i nha l t formatiert. Der Teaser (einleitender Absatz) wird durch das Stylesheet . teaser realisiert. FOrdie EinzOge der Absatze ist das Stylesheet
teren
Eugt"itMarlitt
· einzug vetentwottncr:
Schulmei st crs Mar'ie
Der Kasten wird durch das Stylesheet . kasten gebildet, das mit einem «div> Tag verwendet wird . . ext ra ist etr. Klassenselektor, der mit Hi/fe eines «sosn» -Tags Texte innerhalb von Absatzen hervorhebt.
Ka pi t e l 1 schild4rtdioi
frtjhliche Bauemhochzo?1t,ID di~ unser Held unverwh~ns gerat .
In K a p l te l :2 M"W$istS'ich oIuf dem Hof desreich en
Schulzen,da.6 nicht "UoM; so ist, wllJ '" sebeint.
Diel.lsche Verd.lchligung scblagt in Ka p Lt e l 3 ihre KreiNundbringt Abn-eigungt n
undvcrheben zumVorschein. In Ke p I t e l 4 solleineReiu an die Stadt Kluhoiit und Abs..nd bringen.
Vo r der gnJncn Tanne ging es toll lind zu, Dami t ist je doch nicht et wa
lu ~ ti g
jene schlen ke, s teite Ioch ter des Nordens qerneint, die im Sorrurrer ihr dunke lgrHnes, rauhhaarige s Haup t im
Sonncnlich t ba de t und zu r Winte rze it, feenhaft gescillnOckt, cine einzige
Ga
ge he iligte n Pla tz beha up te t .
DIE:'Se- Tenne also war es nlcht, wohl aber dIe
stat «ne Schenke In dern thunnOlschen
Dor le Rlngelshausen. In c eren Sch~d ell1 cer ber T nenb aum prangt e, der bereltwlllIg wandt"rndt Handwerf,.;sburscht"n. vornervne
s tec er und mude Karrner unter semern
scnatten benerberq te und cer nur denen
seme spitzen
Nadeln :tlg tE::.
wetcne d t
Kreodestncheauf des W~ tes schwarzer Tafel "'cht gebuhr endermaeen
~abbalis~sch e n
loscnten.
Es gong also Ion und
Ius ~g
zu und gab so
vergnug te Geslch ter. ets ob, Wit t in alter. f1dtler Bauer m eote, das ganze Leben fur
'--
dIe Leutchen tin Tanz sei, zu wt lcht m die lle_b_e_nEngellrn Hrn mel eufsprelten. Was den
das Lesen des Stylesheets und besagt auf den ersten Blick, fur welche Elemente des Dokuments der Klassenselektor gedacht ist:
font : 12px/128% Verdana ; font : bo ld 16px /130% ; text -indent : 14px ; }
• p .hauptinhalt • p . teaser • p . einzug
Die Notation im HTML-Element andert sich nicht. 1m HTML-Tag wird weiterhin das class-Attribut mit dem Namen der Klasse verwendet.
Klassenselektoren und Container Klassen konnen nicht nur einem individuellen Tag, sondern durch ein
-Tag einem Bereich mit mehreren HTML-Elementen und mit Hilfe des <span>-Tags einem Bereich innerhalb eines HTML-Elements zugewiesen werden. Das errnogllcht komplexere Darstellungen mit einer einfachen Anwendung:
. kasten {
. ext r a
background : silver ; width : 160px ; height : 220px ; f ont : 20px/160% Georgia ; l e t t e r - s pa c i ng : 3px ; font -we ight : bold ; }
175
Kapitel 5
Das Fischen nach Elementen - Selektoren
und im HTML-Code:
o
o o o
Eugenie Marlitt
Schulmeis ers Marie
<span class= "extra ">Kapitel 1 schildert die frö ;hliche Bauernhochzeit , in die unser Held unversehens gerä ;t .
Klassen stellen auf der einen 5eite eine Alternative zu den HTML-
Elementselektoren dar und auf der anderen 5eite erweitern ste die vorgegebenen HTML-Elementselektoren, Mit Klassenselektoren gibt C55 dem Entwickler ein machtiges Werkzeug in die Hand, Wer wili, kann seine eigene Dokumentenstruktur aufbauen und HTML-Elemente wie
, und mehr oder minder OberflOssig mechen . Allerdings erschwert dieses Vorgehen den Aufbau und die Pflege des 5tylesheets - ein 5tylesheet, das ausschlie&lich auf Klassenselektoren aufbaut, verliert an Obersichtiichkeit und ist weniger effizient. Zu-
satzuch gehen Punkte im Ranking in den 5uchmaschinen verloren .
HTMl- und Klassenselektoren kombinieren Der Einsatz von Klassenselektoren und HTML-5elektoren, die einander erganzen, liefert elegante Klassifizierungen logisch zusammengehbriger Gruppen von HTML-Elementen , Die 5tildeklaration der Klasse notiert die Unterscheidungsmerkmale zwischen Layoutbereichen , z.S, Hintergrundfarbe und 5chriftart. Aile anderen Merkmale werden uber HTML-5elektoren fur diejeweiligen Elemente angegeben :
ID-Selektoren anneln den Klassenselektoren und unterscheiden sich von diesen auf den ersten Blick nur durch das fOh rende #-Zeichen des ID-Selektors (Im Gegensatz zum fOhrenden Punkt der Klassenselektoren) . Aber wahrend Klassen beliebig oft im Dokum ent vorkom men durfen, sind ID-Selektoren fur genau ein individuelles Element im Doku-
FUr Animationen und Elemente, die durch Skripte beeinflusst werden sollen, braucht das Stylesheet eine eindeutige Identifikation.
ment gedacht. ID-Selektoren wurden neben ihrer Bedeutung fur das Layout mit Stylesheets speztell fur JavaScript und DHTML eingefOhrt. Dort greifen die Skripte uber die ID direkt auf ein Element zu. Ein ID-Selektor beginnt mit dem Zeichen »#«, gefolgt vom Namen des Selektors . Der Name darf nur aus alphanumerischen Zeichen, elnem Bindestrich (-) und einem Punkt ( .) bestehen und nur ein Mal verwendet werden, damit das Elemen t eindeutig im Dokumen t identifiztert werden kann.
• #abc123 {color : red ; background : black ; }
o
Genau dieses eine Element kann durch das id-Attribut des HTML-Tags als abc123 angesprochen werden . ID-Selektoren werden also wle Klassenselek toren durch die direkte Bennung der Bezeichnung verwendet, nur dass hier anstelle des class-Att ributs das id-Attri but im Tag benutzt wird. Ihre Einmaligkeit pradestlnler t ID-Selektoren fur die Positionierung von Layoutelementen, in erster Linie fur div-Container, in denen die logisch zusarnrnengehorenden Inhalte untergebracht werden:
wi d t h : 100%; border : lpx H9l 8D53 solid} float : right ; widr.h : l4em; pos i ion :rela tive ; border : lpx #999999 solid} IInav -links {pos it ion :Eixed ;
#t ipp
1\
:
til
~
:>
1\
C
'M .-l I
.....
> C1l c
~
C
II
.,-i
'0
.,-i
II
'0
'0
'M
'M
>
>
. ,-i
'0
#nav-rechts
~
..c: u
...
III I
:>
C1l C II
1m j eweiligen Dokument macht es zwar keinen Unter-
'0
.,-i
'M
'0
V
1\ til
:
.,-i
C1l
..c:
II
1\
'0 0. V 0.
'M
~
V
wi d t h : 14 3px ; top : 9px ; l eft :9 px ; posi ti on :absolute ; wi dt h :gem ; t op : O; righ t :O;
schied, ob die HTML-Elemente uber einen Klassense-
:>
. ,-i
lektor oder einen ID-Selektor angesprochen werden,
'0 V
aber ID-Selekt oren verhindern eine weitere , versehentlich e Nutzung. Sie machen das Stylesheet sicherer und leichter lesbar.
o
-7
1
Cascading Stylesheets kOm en nahezu jedes HTML-Element pos ltlonieren - sel es ein Textabsatz in
-Tags, eine Tabelle oder ein Blld . Zudem hat HTML 4.0 zwel Tags gebracht, die spez lell fOr den Elnsatz m it Stylesheets gedacht sind : des < div>- und des <span> -Tag
-;;..-:,
Belde Tags nehmen eine logisch zusammengeh Orende Gruppe von mehreren HTML-Elementen auf - z.B, den typlschen Inhalt elner Navlgatl onslelste mit Hyper llnks, elnem Looo und besonderen Hlnwe isen . • Ohne Styl esheets zelgen und <span> kelne Auswir\..ungen auf den Inhalt. Sie 5011en vlelmehr eine Relhe von Eigenschaften fOr diese Gruppe von Eigenschaften zusammenfassen. Oas -Tag lst Insbesondere fOr die Poslt ionlerung gedacht. Es 5011 - zusammen mit e lnem Stylesheet - die Gruppe von HTML-Elementen aus dem Dokumen ten fluss herausnehmen und an elner vorgegebenen Position 1mDokument unterbrlngen . Olese Technik wlrd bereits von professione llen Anwendungen wle Adobe GoLlve und Macromedla Dreamweaver ..., terst ~ ~ mltsamt ihren posl t lc ( be rwn· IO l Z4p): I 620p~ Z-lndu 1 oder ~ Eben e« dar. I~ ~ 0 ! Z4PX H autO
. - ." o r:s:J
- .--,
==--..::-
178
o
5.5 Absteigende 5elektoren - Kontextselektoren
5.5
Absteigende Selektoren - Kontextselektoren
Kontextselektoren wirken nur unter bestimmten Bedingungen . rtehmen wir an, Sie wollen aile fett gekennzeichneten Passagen in roter Schrift darstellen - aber nur in Absetzen, also in
-Tags, wahrend ein fetter Text in einer Tabellenzelle die gleiche Farbe aufweisen 5011 wie der normale Text in Zellen. Ein Kontextselektor besteht aus einer Foige von etnzelnen Selektoren, die durch Leerzeichen voneinander getrennt sind . Dem letzten Selektor in der Foige gilt die Deklaration:
p b {
color : #990000 ;
o
HeIEen Sie uns , die Liste aktuell zu halten . Schicken Sie uns eine E-Mail< /b> oder wenden Sie sich tele Eonisch an unser Bürgertelefon< /b> .
o
Konzert im Schloss :< /b>
Der Stil weist den Browser an, fetten Text nur innerhalb
Noch ausgeklOgelter wird das Konzept der bed ingten Selektoren, wenn der Vor-Vorfahre stimmen muss: • div * p betrifft nur p-Eleme nte, die als Enkel oder Ur-Enkel in einem div-Eleme nt Iieg en (beachten Sie den Leerraum auf beiden Seiten des Sterns "". er ist zWing end erforderlich). Bislang bring en aber nur wenige Browser das Kuns tstUck fertig, den Grogvater etnes Elements zu erm itteln (zz. nur Internet Explorer 5+ Mac).
elnes
-Tags rot darzustellen. Also wlrd im Browser Text in Tabellenzellen zwar fett, aber nicht rot darge-
zllJJds zum HouplfeQSte!
stellt, die Worte »E-Mail« und »Burqerteleton« aber sehr
Helfen Sle IllS, die uste aktue ll zu netten , Senden Sle elne '- l11ail oder wenden Sle slch lelefonlsch lln lXlser BOr ge r le lefo n
wohl. Die Verschachtelung kann noch tiefer wirken:
12.
Konzerl im Schloss : Doneumetropolen 19 30 lJIy 1m Schloss
Volksh och sd l ule
14.
Erstkommunion
Kalholisdles Pfllrrllml
20.
Kirchenkonzert Fesl ilches Konzerl lln lliss llch des 125JIlhr Igen VerelnsJ
MGV Eintr"chl
• td P code , hl em {color : red ; }
21.
Erstkommunion
Klltholische Pfllrraml
Das Element wird in obigem Beispiel wie zuvor
27.
Aufslenen des Maib"ums auf clem Kirchplll lz mil muslkll ilscher Unl erNllUOQ
st . Josef Ge.eUsch"fl
• td P code {c o Lor i red ; } Das Element wird rot dargestellt , wenn es in einem Absatz
vorkom mt, der in elner TabellenzelIe
steht.
rot dargestellt und das Element <em> wird ebenfalls rot dargestellt, aber nur wenn es in einem hI -Element steht.
179
Kapitel 5
Das Fischen nach Elementen - Selektoren
Vollautomatik: Kontextselektoren und Klassifizierung Kontextselektoren sind besonders elegant, wenn es darum geht, komplexe Stylesheets fur eine automatische Nutzung durch Dritte vorzubereiten . Wenn sie sich anstelle von Klassenselektoren einsetzen lassen, erfordern sie weniger manuelle Eingriffe durch den Benutzer, der die Webseite anlegt. Das allerdings k6nnen Kontextselektoren besonders gut, wenn sie mit Klassen- oder ID-Selektoren eingesetzt werden . Die umfassenden HTML-Elemente, in denen Inhalte logisch gruppiert werden -, seien es nun Tabellen, span- oder div-Containter - , werden uber Klassen- oder ID-Selektoren klassifiziert. Anschliet>end de kla-
HLayerl p
{color : #3 3 3 3 3 3 ; fo nt : I 6p x 11 5 0 % Georgia , serif ; } {color : snow ; background : gray ; font : I8px /180% Verdana , sans-serif ;
• #LayerI h l #Layer2 p
{color : #6 6 6 6 6 6 ;
• #Layer2 h l
{font : I8px1180% Georgia . serif ; border : l p x solid silver ;
font : I6px1150% Verdana , sans-serif ;
}
{ font : llpx/130% "Anda l e I/:o no " ; color : #333333 ; vertical -align : top ; { color : green ; } • #Layer2 td i {color : tomato ; } • #Layer2 td #Layer2 p i
rieren Konte xtselektoren die Stile fOr die HTML-Elemente innerhalb der umfassenden HTML-Elemente. Diese Technik erztelt ein hohes Mat> an Automatismus - Textabsatze im Navigationscontainer werden automatisch anders formatiert als
Textabsatze in elner linken Spalte fur News und die Unternavigation . Hyperlinks in der Navigationsleiste werden durch !:~I~C~i) ~j.~(l·~_ -;.l!. ;IIS "'';'1
Kentextselekteren lind. belonden ek;lnl, wean es datum Ceht., komplae StyJuheet. fUr tine lutomati,che NutzunC durchDritteTorzu~reiten. Wennsie Instelle von Klauuuleittoru eincuettt werden. erfordem lie:weni:,ermanuelle EincrilTe dureh den Beuutzer.
Die um(usrnden UTML--Ekmente, in denenlnhalte Io:isch cruppiertwerden seien t' nun TlbelkD,span . oder eli\'· Cont. iot'f - , werden tiberKb'lC'n - oder ID-Selektoren klll.i(lZierlADlchliefkond dekJarierrD Konlextsekktoren die Stile fur die IITMI,Elemenle innerh.lb der umf.uC'ndC'n HTMI,ElemC'ntC'.
Pseudolinkselektoren gestaltet, wahrend Hyper-
Die Vcrfahr en der Aulom.tik
links in Artikeln und News ihr gewohntes norma-
Djese Techn'" erzrelt em hohes M4B oM\ AutCllTl"tl$rTlUS - Textabsbtze 1m I'l.3vloationscontltlnet werden aotom.rIIlIsdl ~ '~tlert
ers renecsetze
rt
les Aussehen behalten, ohne dass der Webdesigner durch class- und id-Attribute in den
eee-
I,",en Spalle fU' News end d e
einzelnen HTML-Elementen nachhelfen muss.
Ulte~v I~t lon .
-..,cr1p
ve. .
-..,.I!r lp
Ga.-
"""crl III Ulkd
h1nla1~
.e.,er ~b. 1 bID llu:IIert~ ~ :llS ...,. ~
AnlSIIeMcao lbdl ' t. . .o·
-,
[email protected] In der NltVIQlttlonsle lste werdlrl outomat lsch
o.rch Pseudo lnselektoren
gestaltet. wMYend Hyperl l.....s In Altll..eln lX'Id News lty gewohntes norma es Aus~
beha lten Insbesondere recetten 1m Tabellenlayout oder in div..contltlnem kOfTJTlt d eses ver'8tY..... zugute Der Irt\alt e rnef Taoelte In
einer Tebelle wlrd e-oes (ormatloert als c1ie LayOuttabelle selber
r•
•-.t;
18 0
Die HTML-E/emente, die innerha/b der Container benutzt werden, erha/ten individuelle Stile a/s direkte Abk6mmlinge des jeweiligen Containters. Moderne Browser haben keine Prob/eme , sich durch die Ahnengalerie zu hange/n und einen Text in -Tags innerhalb eines p-E/ements, das sich in einem div-E/ement befindet, exakt zu unterscheiden.
5.6 Pseudoklassen
5.6
Pseudoklassen
Pseudoklassen klassifizieren ein HTML-E/ement und beziehen dabei die Merkmale fur die Unterschei dungen nicht aus einem class-Attribut im Tag wie bei den zuvor beschriebenen Klassenselektoren , sondern aus der Interaktion mit dem Benutzer oder der HTML-5 truktur seiber. In C55 1 gibt es nur einen Elementtyp, der auf diese Weise klassifiziert werden kann, narnlk h das a-Element, der »ttyperlmk« . Durch die Erzeu-
Nichts geht ohne Rollover und ohne Rollover geht gar nichts .., die kleinen Effekte sagen dem Besucher einer Seite: Ich weiS, dass du da bist und ich interagiere sofort, wenn du nur willst
gung fiktiver Typen des a-Elements kann jeder Klasse eln eigener 5 til zugewiesen werden. Die fiktiven Typen sind : a: link
Beschreibt einen Hyperlink, der noch nicht vom Besucher besucht worden ist. Die gelinkte 5e ite liegt noch nkht im lokalen Cache des Browsers.
Webdesigner wiederum Iieben Effekte, fUr die sie nicht 24 GIFBilder in 12 verschiedenen Farben anlegen mUssen.
a:visited Beschreibt einen Hyperlink, der besucht wurde und im lokalen Speicher des Browsers Iiegt. a: active
Beschreibt einen Hyperlink, der angeklickt wurde, aber noch nicht ausgel6st wurde - der Zustand zwischen dem Klicken bis zum Loslassen der Maustaste, wahrend die Maustaste noch gedrOckt ist. Diese Klasse wlrd von allen Browsern ab Version 4 und h6her erkannt, alterdings nicht von NN 4 .xx.
Wahrend die ersten drei Pseudoklassen schon in C55 1 deftnle rt waren, kam :hover erst in C552 a/s Pseudoklasse dazu: a: hover
Beschreibt einen Hyperlink, wahrend der Mauszeiger uber dem Hyperlink liegt (to hover: schweben) . Diese Klasse wird von allen Browsern ab Version 4 und hoher erkannt, allerdings nicht von NN 4 .xx.
Pseudoklassen werden durch einen Doppelpunkt gefolgt von dem riamen der Pseudoklasse notiert. 5ie k6nnen weiterhin auch mit normalen Klassen komb iniert werden . Dank der Pseudoklassen kann das 5tylesheet die verschiedenen Zustande eines Hyperlinks untersch iedIIch gestalten, ohne dass Ereignlshandler wte mouseover oder mousedown irn Tagvermerk t werden .
Tipp: Um fOr Tests einen »Nuillink« anzulegen, der nirgendwohin fDhrt, aber aile Verhalten eines echten Links aufweist, linken 5 ie zu: jsvescnot;
181
Kapitel 5
Das Fischen nach Elementen - 5elektoren
Preiswerte Rollover·Effekte fUr die Navigation Mit Hilfe der Pseudoklassen kbnnen wlr nun endlich den schl ichten, voreingestellten Hyperlink rafflnlerter definieren und ersparen uns das Anlegen unzahllqer GIF-Bilder:
• • • • •
tex t -decora t i on : none ; } a color : i vo ry ; background : s lategray ; } a : link a :visited { co lor : slategray ; background : mintcream; } col o r : snow ; backg round : tomato ; } a :act ive c ol o r : tomato ; background : ivory ; } a : hover Ein generischer 5til fur a sorgt dafur, dass 5chrift und andere Merk-
male der Hyperlinks nicht in jedem Pseudoklassen-5elektor individuell deklariert werden mOssen. Das spart wieder einmal 5chreibarbeit und garantiert die Konsistenz. Effekte sind nicht auf Farbanderungen beschrankt. 5chrift und 5chriftgrbge kbnnen geandert werden , ein Rahmen kann kommen und verschwinden , der Hyperlink kann sich ausdehnen und wteder zusammenziehen :
• • • •
a : link { font-weight : norma l ; font -weight : bold ; oder a :hoover font-size : 103% ; } oder a :hoover font-style : cursive ; } a : hoover
Neue Klassen und neue Zustande in CSS2 C552 hat nrcht nur die neue Pseudoklasse : hover m ltgebracht, sonAfs war's ein GfF' " 1 00% HTML ohne JavaScript, aber mit Sti/.
konnte ein Element, das bereits besucht worden war - sich also im Zustand : v i s i t ed befand - nkht gle lchzeltlg 1m Zustand c
:acti ve oder : hover seln. Also gab es fur den Besucher, der auf einen bereits besuchten Hyperlink klickte , keine weitere visuelle Bestatigung seines Mausklicks . In C552 signalisiert ein Hyperlink, der bereits besucht worden tst, dass die Maus gerade auf diesen Hyperlink geklickt ist oder dass die Maus erneut Ober ihm
<'bo4J
bfC:0h l ... . rtf'f'f'r to t . .. . OCIOOOO"'>
schwebt:
( Ill hu! . ...l1te1 .htal '">a.mu I1UMnC / &>
• a :visited :active • a :vis ited :hover
182
background : red ; co lor : white ; ) background : snow ; color : gray ; }
5 .6 Pseudoklassen
Die Cascading-Regeln entschelden, welche Eigenschaften In welchem Zustand angewendet werden.
1m Brennpunkt: Das markierte Element :focus Wahrend die Pseudoklassen von a : l ink bis a : visi ted nur auf das Ankertag angewendet werden konnen, erfasst die Pseudoklasse : focus auch andere Elemente. Eln Elem ent gerat »ln den Fokus«, wenn
1mFokus Auch dols Ejngabeteld im FormtJlar wird betei'gt und stellt tcst . dan der Besucher mitrnxht: Ihr Kommentat:
der Besucher ein Element ankllckt oder slch mit der Tabulatortaste in eln Element (z.B. etn Eingabefeld in einem Formular) navigiert hat,
und blelbt aktlv, bis der Besucher ein anderes Element anklickt oder das Dokumentenfenster schliett. Zu den nahe Iiegendsten Anwendungen der Pseudoklasse : focus
background : beige ; } {vertica l -align : top} { f on t - wei gh t : bo ld ; bac kground : beige ; }
Die Hintergrundfarbe eines Eingabefe/des sodem. wenn der Benutzer das Fe/d tut die Eingabe anklickt: etn Mechanismus, der die /nteraktion mit dem Besucher deut//ch macht.
BAA
C = iSc:haUiO kOhl Habsch att en
Impa~ I S~
o,Jt
oee'lg'let
:OUt oee q'let ~
,Sonn ig ;nld"lt
IgM ,g>ot
183
Kapitel 5
5.7 Pseudoelemente sind fiktive Elemente, die es in HTML nicht gibt. Wahrend Stylesheets ansonsten ein Tag neu definieren (HTML-Selektoren) oder ihm eine Klasse oder eine Identifikation zuweisen (Klassen- oder IDSelektoren), werden hier Sti le fur ein HTML-Element definiert, fur das kein Tag existiert.
Das Fischen nach Elementen - Selektoren
Pseudoelemente
1m Gegensatz zur Pseudo klasse f i r s t : c h i l d sprechen Pseudoele mente Teile elnes HTML-E lem ents an - also nicht das ganze Element. In C551 glbt es zwet Pseudoe lemente: first-line und first - l e t -
ter. 5 1e konnen auf Blockelem ente (HTML-Elemente, die mi t etnern Zeilenumbruch enden wle p, h 1) angewendet werden und setze n neue typografische Felnheiten um . Pseudoe lemente werden du rch elne n Doppe lpunkt, gefolgt vom Namen des Pseudoelements, notiert und konnen mit normalen Klasse n kombiniert werden (p.lnitial:first-Iine) . C5 5 1 beschrelbt die beiden folgenden Pseudoelemente :
• : first-letter - erster Buchstabe In elnem Element • : first -line - erste Zelle In elnem Element
Klassische Textauszeichnungen : first-letter andert das ers te Zeichen eines Elements - das beliebteste Beispiel ist sicherlich die hangende Inltiale, die den edlen Anschein antiquarischer Werke erweckt.
: first-line verand ert die Darstellung der ersten Zeile. Ein 5chnellschuss-Teaser fur eilig e Redakteure ...
und Tricks Ü ;berschriften mit Autoheader und mehr
Von Zeilen und Zeichen : In CSSl gibt es zwei ?seudoelemente : first-line und first-Ietter . Sie können auf Blockelemente (HTML -Elemente , die mit einem Zeilenumbruch enden wie p . hI ) angewendet werden und set zen neue typografische Fei nheiten um.
Tipps un d Tri cks
. berschriften mit Autoheader und mehr on Zei len und Zeichen : In CSSI gibt es zwel Pseudoelemente : first-line und fir t-letter. Sie konnen auf Blockelemente (HTML-Elemente, die mi t einem Zeilenumbruch enden wie p, hl ) angewend et werden und set zen neue typografische Feinheiten um . V
#.
I-
bdt
FOfWiUd Re lo~d
Home
Boo k.~rtc.s
Print New Save f ind
Tipps und Tricla
llpps und Tricks
Oberschriften mit Autoheader und mehr cssi
lemente: first-line und V Pseudoe first-lettQr. sie konnen auf on Zeilen und Zeic hen: In
Internet Explorer 5.1 , Mozilla 1 und Opera 5 - kleine Unterschiede in der Darstellung machen den Charakter der Browser aus . Es sieht so aus, als waren die Browserkriege im Waffenstillstand.
gibt es zwei
Blockelemente (HT ML-Elemente, die mit einem Zeilenumbruch enden wie p, hr) angewendet werden und setzen neue typografische Feinheiten um.
Uberschrlften mit Autoheader und mehr V
on Zeilen und Zeichen : In CSSI gibt es zwei Pseudoelemente : first-line und first-letter . Sle konnen auf Blockelemen te (HTML-Elemente, die mit einem Zeilenumbruch enden wie p, hl ) angewendet werden und setzen neue typografische Feinhelten um.
185
Kapitel 5
Das Fischen nach Elementen - Selektoren
h l : first-line setzt die ers te Zeile der Uberschrlft In elner kleineren Schrift und p : first-letter den ersten Buchstaben des ers ten Absatzes als hanqende Initiale . FOr das »ttangen« sorgt float : left.
Mehr Pseudoelemente Speziell fOr den Druck gedacht sind : • : l ef t
linke Seite der Ausgabe
• : ri gh t
rechte Seite der Ausgabe
• : fi r s t
erste Seite der Ausgabe
CSS2 liefert zwei weitere Pseudoelemente: • : a f er - nach Elementinhalt • : before - vor Elementinhalt Das Pseudoelement : after beschre ibt den Raum nach dem Inhalt des definierten Elements. Damit kann eln abschlietender Text mit Hilfe de r content -Elgenschaft automatisch elngefOgt werden . • / * I m C55-Bereich : * / • h I : a f t er
{ con t en t :
':'
• p :after
{ con t en t :
' - Ende des Textes '
}
• I *Der Bereich nach dem Inhalt jedes p- und hI- Elements . ..
*/
: be fore beschreibt den Raum vor dem Inhalt des definlerte n Elements. Dam it kann eln Text mit Hilfe der content-Eigenschaft automatisch vor dem Element eingefOgt werden .
• I *Im C55-Bereich :
*/
• h I : be fore { content :
' Thema:
• p :before
'Text :
{content :
' '
} }
• / *Der Bereich vor dem Inhalt jedes Elements p und hl */
186
5.8 Attributsefektoren (neu in C552)
5 .8
Attributselektoren (neu in CSS2)
50 simpel Attributselektoren auch erscheinen rnoqen - in (551 finden wir nichts Ahnliches. Bislang unterstotzen die llgrof)en« Browser den Attributselektor nicht " ., der folgende Absatz ist also eher von akademischem Interesse . Ein Attributselektor enthalt einen HTML-Elementselektor oder einen
2war unterstutzen die Browser Attributselektoren noch nicht, aber sie offenbaren uns ein rnachtlges Werkzeug: Sie finden die Stecknadel im Heuhaufen.
universellen 5elektor und ein Attribut in viereckigen Klammern . Wenn nur Oberschriften mit einem href-Attribut angesprochen werden sollen, notieren wir
• hi
[href]
{co lor : gre e n ;}
Der 5til farbt aile Oberschriften gnm ein, wenn sie einen Link enthalten, ob dieser nun bereits besucht wurde oder nicht. Mit einem Attributselektor lassen sich aile Bilder, die Teil eines Hyperlinks sind und einen Rahmen aufweisen, andern:
• a [href] img[border]
Mozilla ist auf dem besten Wege, auch die Stile zu unterstOtzen, die heute noch als exotisch gelten. In diesem Sinne zeigt Mozilla zwar nicht die Oberschrift, aber Links in Oberschriften in Grun an. Der Attributselektor fOr Bilder, die einen Hyperlink darstellen und einen Rahmen aufweisen, funktioniert tadellos .
{border-co lor : blue ;}
Attributselektoren (n eu in
Attributselektoren (n eu in ~
Ein Attributse lektor entbe lt elnen HTM.-Elementse lektor oder einen un lversellen Selektor lXld eln Attribut in vierecklgen Klammem. Wenn nur UbersclY'i ften mit elnem href-Attribut anQesprochen werden sollen, not ieren wir • h t [hr ef] {co lor : green ;}
~IIIIIIII"'"
Mit elnem Attributselektor lassen slch aile Bllder, die Tell elnes Hyperllnks sind und einen Rahmen aufwelsen, Ilndem: • a[IYef] Img[border) {border-color : blue;}
187
Kapitel 5
Das Fischen nach Elementen - Selektoren
FOr Diagnosezwecke kbnnte sich der Webdesigner aile Elemente auszeichnen lassen, die ein Klassenattribut mit einem beliebigen Wert beinhalten : • *[ c l a s s ] {c o l o r : r e d ; background : yellow ; border : I p x solid orange ; } Seine eigentliche Macht entwickelt der Attributselektor, wenn er sich auf Attribute mit elnem bestimmten Wert bezleht , • element [a ttribute = "val e O] Erst wenn der Wert im Selektor wbrtlich dem Wert einer Eigenschaft entspricht, tritt die Stilregel in Kraft. Dabei ware eln Wert" 2 " etwas anderes als der Wert " 2px " - in diesem Sinne lst das »wortllch« in der Regel zu verstehen . Mit einem vorgegebenen Wert lassen sich aile Links einer Site, die auf erne bestimmte Seite fOhren , besonders hervorheben : • a [href= "http : / /meine . seite . de/ " } {font-weight : bold ;} Auf einfache Weise verbergen wir aile Bilder mit einem leeren alt-Attribut im auralen Stylesheet: • img [a l t = " " 1 {vis ibility : hidden ;} • p [cla s s ="wa rn i ng " ] {color : red ; background : white ;} • h l [id= "page-title " 1 {font -s ize : 250% ; border-bottom : I px solid g r a y ; } Attributselektoren stellen eine weitere »durchgreifende« Technik bei der Auswahl von Elementen in einem Dokument dar. Bislang sind sie aber nur in wenigen Browsern und dort auch nur in Ansatzen imple mentiert.
188
in estilt Kapitel 6 Bis zum letzten Tag: Beispiele
Ein Stylesheet 5011 neben der Gestaltung der Seite die Pflege der Selte und das Elnstellen neuer Inhalte In das tayoutgerust verelnfachen . Je seltener der »Redakteur« der Selte durch manuel Ie Eingrlffe In den HTML-Code belasttqt wird. desto besser: Klassenselektoren , die eln class-AUrlbut irn HTML-Element benotlgen, werden also vorzugsweise auf die Layoutstruktur besch rankt, so dass belm Satz des Inhalts die Elemente durch eln elnfaches HTML-Tag Ihre Form erhalten .
6.1 ~ Das Beispiel finden 5ie auf der CD zum Buch unter dem Navigationspunkt »Workshop'l.
Bis zum letzten Tag: Beispiele
Beispiel 1: Stile fur Schriftgestaltung
Das Layout auf der Basis von Tabellen wird auch in den Zeiten der modernen Browser und von CSS2 elne bevorzugte Technik bleiben. Durch stylesheets erlangen Tabellenlayouts eine hbhere Flexibilitat und Effizlenz in der Pflege und dem Ausbau . Einfach und strikt ist die Formatierung einer Site durch Stile fur die schrift- und Textgestaltung. Das Layout der Site wird konventionell durch zwei flexible Layouttabellen erstellt, die sich an die Gral:.e des Browserfensters anpassen . Die obere Tabelle beinhaltet einen Text auf der linken seite und die Hyperlinks fur die Navigation auf der rechten seite . Die untere Tabelle enthalt Bildausschnitte auf der linken und Texte und kleine Artikel mit Bildern auf der rechten seite . Wie es fur solche Layouttabellen typisch tst. wird die Tabelle durch »bllnde GIFs(( gefestigt, damit spalten nicht kollabieren .
Dcetscnnt: h 1
..
["'~tl:6..-[Mn. 2
...
1_ o--..u_ I_.,...._ ....wGtoh ~"'_
'.-4,
~-...
I
_
~
--
Uberschrift h2
Flief,text p
Uberschrift h3
...::
_ .-
-fP"----HI- Navigat lons-
Hyper/lnks r-"'~"dM'fbnoe-'"
DoH' T.... _
hi .....
... ....
. . . . . , _ t ~
.......... . - . ..
..
DwIt.u_I.~Mt'W'l_QNIk
Oben : 50 stellt sich das Dokument im Browser dar. Links: »Onr«: alles(( - 50 stellt sich das Dokument ohne 5tylesheets in Macromedia Dreamweaver dar.
190
Uberschrift h4
hH~dU'
~=-=.:...~ l~~~T _..,......... __
I
»Ieeser«
Flief,text
6.1 Beispiel 1: Stile fiir Schriftgestaltung
Oberschriften hI bis h4 Hier passiert nichts Aufregendes - zu beachten sind hochstens die au£>eren Rander gegen die um gebende Tabelle margin : l Op x nach oben in h2 und I Opx nach links in h4 (die vierte Stelle in der Deklara-
non von margin : top, right. botto m, left). • hl
{ c o l or : # 4A4A4A ; font : bold 18p x/1 40% Verdana, sans -ser i f ; letter-spac ing : l px ;
• h2 { color : #333333 ; font : bold 15px / 140% Verdana , sans-serif ; margin : I Opx Opx Opx ; • h3
}
co lor : #333333 ; font : bold 13px /140% Verdana , sans-serif ;
• h4
color : #333333 ; font : bold 14px/ 140% Verdana , sans-serif ; margin : Opx Opx Opx 10px ;
Der Sti/ h3 weist keine Eigenschaft fOrden linken inneren Rand auf, sondern hebt sich vom rechten Rand mit margin-right: 10px ab, da die Oberschriften h3 soete: rechts ausgerichtet werden sol/en.
Ausrichtung in den Tabellenzellen Der Stil fur td-Elemente sorgt dafOr, dass aile Inhalte von Tabellenzellen am oberen Rand ausgerichtet werden (per Voreinstellung sind Inhalte in Tabellen vertikal zentriert) . {vertical-align : top ; }
• td
Der Klassenselektor . rechts_unten sorgt fU r die Ausric ht ung von Texten in der Tabellenzelle unten rechts . •
. recht s_unten { te xt - a l ign : right ; vertica l-align : bottom ;
DafOr muss die Tabellenzelle unten rechts das class-Attribut enthalten :
o
class= "rechts_unten " >
Iextabsatze FOraile p-Elemente der Site sind die oberen und unteren Abstande gegen benachbarte Eleme nte durch margin : Opx Opx (Opx nach oben und unten, Opx nach rechts und links) deklariert. Das verhindert den Extradurchschuss, der per Voreinstellung Absatze in HTML voneinander trennt. • p
Elne Ube rschrift der Eb ene 4 Der Teaser ist elne herausgestellte zusallll1lenfassung des Artikels . Eln Text uber mehrere Zellen. wobei der Te stets am unteren Rand der Tabellenzelle ausoenchtet 1St. Die Brelte der Zelle passt sich an der GroBe des Browserlensters an .
t5er f
Texte in der Tabellenzelle unten rechts halten einen Abstand von lOp x gegen den linken Tabellenrand ein. •
los
tii r und to r
lm pre ssu m
. rechts_unten p { rna rq.i n-Te f
Opx;
)
Vcr Texten in der Tabellenzelle unten rechts kann eine Zusammenfassung des Inhalts erfolgen - auch »Teaser« oder »Lead« genannt. Der Teaser 5011 fett dargestellt werden. •
zeit
Bis zum letzten Tag: Beispiele
. teaser { font-weight : bo d ; )
Navigation und Hyperlinks Die Navigation erfolgt durch Textlinks in den Tabellenzellen oben rechts . DafOr wird elne Klasse nav elngerlchte t. • . nav { text -al ign : righ ; )
Die Uberschriften und die Hyperlinks werden rechtsbundig gesetzt.
In gleicher Weise wle die Tabellenzelle unten rechts werden aile Zellen fOr die Navigation durch ein class-Attribut vorbereitet.
o
class="nav' >
Die Hyperlinks sollen vorzugsweise in Arial und ohne Unterstreichung dargestellt werden . FOr die Rollover-Effekte werden Pseudoklassen verwendet. •
. nav a
color : #003366 ; text-decoration : none ; font : llpx Arial , sans-serif ; • . nav a :visited{ color : #870025 ; ) • . nav a : hover color : #003333 ; )
Bilder Bllder halten Abstand gegen den linken Rand der Tabellenzelle: • img { margin-top : Opx Opx Opx 10px ;
}
Die Layouttabelle Die elnzige Eigenschaft, die fur die beiden Tabellen notiert wird, ist width :
100%. Damit passt sich die Tabelle stets an die Gr6f>e des
Browserfensters an. • table ( width : 100% ;
)
Damlt die Tabelle elnen Abstand vom Rand des Browserfensters elnhalt, wlrd margin : 20px 20px fur das body-Element deklariert. Zudem sorgt das Stylesheet fur die Hintergrundfarbe. • body { margin : 20px 20px ; background-color : moccasin ; }
192
6.2 Beispiel 2: Eigenschaften »ausschalten«
6.2
Beispiel 2 : Eigenschaften »ausschalten«
Das folgende Beispiel ist ein klassisches Tabellenlayout in drei Spalten mit elner Kopfzeile fur das Logo. In der linken Spalte 1st die Navlgationsleiste, in der mittleren Spalte der Inhalt und in der rechten Spalte Raum fur Zusatzinformationen geplant. Da in der Regel nur der Inhalt der Seiten aktualisiert wird und das
Immer wieder wird es vorkommen, dass Eigenschaften tUr bestimmte Elemente wieder aut die Voreinstellungen gesetzt werden mUssen.
Logo sowie die Navigation entweder durch Templates in Macromedia Dreamweaver bzw. Vorlagen in Adobe GoLive oder als dynamische Inhalte von Skripten erzeugt werden, 5011 dieser mittlere Bereich moglichst ohne Eingriffe und Klassendeklarationen formatiert werden.
I (t
f=>~
[=-----
. 1C
I!IB (7)
II. Q
ier eine berschrift
Und vneoet bildet eine Tabel/e das GrundgerOst des Layouts. Die auf)ere Tabel/e besteht aus fOnf Spalten . Blinde GIFs trennen die Spalten links und rechts von der mittleren Spalte fOr die Inhalte . Die Produktbeschreibungen in der Mitte bestehen aus Tabel/en mit jeweils zwei Spa/ten .
r ier noch News
19 3
Kapitel 6
Bis zum letzten Tag: Beispiele
Randlos Mit marg in : Opx verschw lnde t das schmale . Schb nrahmchen. - eln kleiner Abstand der Inhalte vom Rahmen des Browserfensters, das in jedem Browser etwas anders ausfallt und gegen das im reinen HTML nur Framesets helfen : Der body-Sti/ setzt innere und augere Rander und Rahmen der Browser auger Kraft.
• body { mar g i n : Opx; paddi ng : Opx ;
Das volle Fenster Die Prozentangaben beziehen sich auf das umfassende Element der Tabelle- auf das body-Element des HTML-Dokuments. border-bottom dekoriert die umfassende Tabelle mit einem grauen Rand.
Die ausere Tabelle wird so hoch und breit aufgespannt, dass sie das gesamte Browserfenster ausfOllt:
• table { wi dth : 100%; padding - bot tom : 8px ; border-bottom : 10px solid s i lver ; }
Layouts furjede Spalte Die Breite der linken und der rechten Spalte ist mitjeweils 180 Pixeln nouett, die mittlere Spalte hingegen soli mit einer Breitenangabe von 100% stets die gesamte verfUgbare Breite einnehmen, so dass sie mit dem Browserfenster wachst und schrumpft.
Drel Klassen fur Zellen sorgen fOr ein differenziertes Erscheinungsbild In den drei Spalten .
• • • •
t d {ve rt ica l -a l ign : top } td .erste { wi d t h : 180px ; background : #F7F7DE; } t d . zwe i t e { wi d t h : 100%; background : #FFF7EF; } td .dr itt e { wi d t h : 180px ; background : beige ; }
Layouttabellen nehmen viele Arten von Inhalten auf: Oberschriften , Absatze und insbesondere immer wieder weitere Tabellen. Dieser Umstand will vorausgeplant werden .
Auf das blinde GIFverzlchtet auch dieses Layout nlcht. Es sorgt dafQr, dass der Freiraum zwischen den Tabellenspalten em Minimum beibehalt, auch wenn der Besucher das Browserfenster stark verkleinert.
194
Hfer elne Oberschrlll
Stifle Selten
T.:d
Torrone
~
I I
HlfIrAkntd1ft.«n Tn:t 1l.nd na pur LmD 1m Tm
Marzipan
...."
6.2 Beispiel 2: Eigenschaften »ausschalten«
Raum zwischen den Spalten Der Raum zwischen den drel Berelchen fO r die Navigation, fO r den Inhalt In der Mltt e und eine weltere Navigation oder aktuelle Neulgkelten auf der rechten Seite wlrd durch elne Tabellenspalte getre nnt. Fur die trennenden Spalten tst etne Breite angegeben:
• td . fre i { width: l 8px ;
Uberschriften links und rechts Die Oberschrlften der ersten Ebene h I sollen In der Iinken und rechten Spalte gleich aussehen:
• td .erste hl { ma r gi n : 20px 10px 8px ; font : bold l2px/l40% .~ial, sans-serif ; color : #666666 ; } • td .dritte hI { margin : 6px 10px 8px ; font : bold 12px/ 140% .~ial , sans-serif ; color : 11666666 ; }
Vom Inline- zum Blockelement Jeder Hyperlink wtrd In elner neuen Zelle dargeste llt - ohne -Tag
Der a-Stil notiert die Eigenschaft
und ohne die Elnklamme rung In -cp»-Tags. Jeder Hyperlink nimmt
display : block. Der Wert block
durch width : auto die maximaIe Brelte eln und halt glelchzeitlg durch padding : 6px l Opx Abstand gegen semen Vorganger bzw. Nachfolger sowle die umgebenden Tabellenrander.
(d i s pl ay : block ; width : auto ; padding : 6px lOpx ; border-bottom : lpx solid silver ; text-decoration : none ; font : 12px Arial , sans-serif ; a : first-child {bor de r - t op : lpx solid silver ; a :link {ba c kg r ound - c o l o r : wheat ; color : seagreen ; ) a :active {ba cXg r ound - co l or : khaki ; color : darkslategray ; } a :visited {ba c kg r ound - c o l o r : goldenrod ; color : brown ; ) a :hover {ba c kg r ound - c o l or : tomato ; color : white ;
• a
• • • • •
transform iert ein Inlineele ment (z.B. img oder a) in ein Blockelement, das zu einem Zeilenumbruch tunn. Die Pseudoklassen verleihen Links zusatzlich einen farbigen Hintergrund und farbige Schrift, die sich je nach Zus tand des Links andert.
Der erste Link der Navlgationsleiste wird zusatzlich mit einem Rahmen oben gegen die Umgebung abgesetzt. Die Pseudoklasse a : hover steht als letzte In der uste , damit der Stil dasStylesheet a : visited Dberschreibt und der Rollover-Effekt auch bel bereits besuchten Hyperlinks eintnt t.
Uberschriften in der Mitte In der mittleren Spalte darf die Oberschrift etwas grb&er ausfallen. Genauso wle die Oberschriften h2 fOr die Produktbeschreibungen In der
195
Kapitel 6
In der Kurznotation setzen zwei Angaben aile vier Abstande: Der erste Wert gibt den Abstand nach oben und nach unten an, der zweite Werte den Abstand nach rechts und nach links .
Bis zum letzten Tag: Beispiele
inneren Tabelle wird Wieder ein Abstand gegen den Rand der Tabellenzelle eingehalten .
Raum fUr Text Damit Inhalte nicht direkt am Rand der Zelle sltzen . notiert der p-Stil elnen auseren Rand (margin) von 10 Pixeln nach rechts und links . Der ausere Rand nach oben und unten hingegen eliminiert mit dem Wert »0« den Extradurchschuss zwischen zwei Absatzen .
• p {
ma rg in : Opx 10 px ; f ont : I Opx/13 0% Ve r dana , Helve t i ca , sans-ser i f ; col or : #33333 3 ; }
UmflieSen: Bilder mer ts t margin -IeEt : Opx no tiert,
denn die umgebende Box fOrdas BUd tst nicht die Tabeilenzeile, sondern der Absatz p, der ja bereits einen au&eren Rand gegen die Tabellenwand aufweist.
· img setz t Bllder auf die linke Seite des Textes und sorg t gle ichzeltlg fur den Abstand des Blldes gegen den urnruesenden Text.
• i mg
fl oat : l e Et ; ma rgi n : Opx 15px 5px Opx; }
Wenn das Chaos einzieht Wenn jetzt in der mittleren und der dritten Spalte Hyperlinks im Text stehen, glbt es
em klelnes
Desaster: Durch display : block wlrd je-
der Link irn Text zu etnern Zeilenumbruch fOhren. nochste Zeit. die besonderen Eigenschaften des a-Selektors fur die zwette und drttte Spalte der Layouttabelle zurOckzunehmen .
d isplay : i nl i ne nimmt die Eigenschaft disp lay : b lock zurOck und macht aus dem aElement Wieder ein normales Inlineelement, das nicht zu emem Zeilenumbruch fOhrt. Die Hintergrundfarbe wird mit background color : t r a ns pare n t ausgeschaltet, Hyperlinks werden wieoet unterstrichen. Hier Obernimmt ein Kontextselektor diese Aufgabe .
196
td .drit te a : link , td .zweite a : link . • td .dr it te a :hover , td .zweite a :hover . • td .dr itte a :act ive , td .zweite a :ac tive , • td .dritte a :visited , td . zweite a :visited background -color : transparent ; color : navy ; text-decorat ion : underli ne ; disp lay : inline ; padd i ng : Opx; margi n : Opx ; border : none ;
6.2 Beispiel 2: Eigenschaften »ausschalten«
NatOrlich ware es eleganter gewesen, nur fOr die erste Spalte Pseudoklassen anzulegen. Das hatte das ROcksetzen der Links fur die zweite und dritte Spalte erspart.
{ d i splay : block ; width : auto ; padding : 6px lOpx ; border-bottom :lpx solid silver ; text-decoration : none ; font : 12px Aria , sans-seri: ; a :first-child { border-top : Ipx solid silver a :link {background-color : wheat ; color : seagreen ; } a :active {background-color : khaki ; color : darkslategray ; } a :visited {background-color : goldenrod ; co lor : brown ; } a :hover {background-color : tomato ; color : whi t e : }
Wenn unterhalb der Navigation weitere Texte und normale Hyperlinks postnonrert werden sollen, mOssen die interessanten Linkstile aber
dennoch zurOckgesetzt werden.
·
tnT
,If t "
ID l
OSII
logo
... . .... """'....
SOOe sene n
'
St~lIol.a.
Oell-''''
". '_""f1 teollo6
d4
'i
"'.. ch
'" . .. . tt T• • • _ • .
"'
• ... P • • •
"""'" ...... if! ~. " "'" • ..,.....-. ...
M,doI......, _
....
,........... 4..
M .'O!D
~1oIWI.Ib'M_1
_4 • • 160 ..0.
.- .....lIlo«o.. I .
......... .
...
,u~.".I .
~
10'-01'1_
~f.'
,...:.d'Iol
I
h~ """;..l~'" "lM,.u T _.
....""'d-., .. ~ t ..
,et-cl l
........... ,.,t.. iJIG... "' .M.t
W.-wl
.~
_
_
.. .... . .-
...,.
.............w.. ..
.... T.d"r>d
_,lU"".
" • , .. ..".....'" U...... I~.....
....--_ .. _0.'
:~
, ... ~
1, '0111'• •,...-4
Nicht nur die Pseudo/lnks sind vorschnell eingesetzt worden, sondern auch der Stil fOr»schwebende" Bilder. Dieser Stil wirkt nun auch auf die bJinden GIFs, die fur den Abstand zwischen den Tabellenzellen sorgen.
." . '"
".~
::;t;",..-;~::.
_'II fl•• q.".~ ...
4..
d"9""'''''''''''''''''''''-·
6.",,_.d\~"G-.t~Mlo•
, ...... 1'. .
197
Kapitel 6
Bis zum letzten
Tag: Beispiele
lnllne oder nicht Inline? Wenn Inhalte dynamisch aus Datenbanken generiert werden, weist dieses Vorgehen ebenfal/s Vortel/e auf: Das Skript ttetett die innere Tabel/e ohne jegliches Wissen Ober Formate , Stile und Orogen . Also wird entweder ein Klassenselektor fOr die OIF-Bilder angelegt oder die Negierung des img-Stils wird als InJinestil injedem Bild angegeben.
Das Problem, das durch die Deklaratlon von f oat : left fur schwebende Bllder aufgetreten tst. kann durch einen Klassenselektor behoben werden . Es kann aber auch sinnvoll sein. einen eigenen stil fur die blinden GIF-Bllder einzusetzen . Auf dlese Weise muss der Redakteur spater den Bildern keine sonderbehandlung zukommen lassen sle wurden immer automatisch auf der linken seite neben dem Text liegen.
o
class="frei">
cimg arc» "bilder I b lind . gif " wi dt he "18 " height: "400"
sty le: "margin : Opx Opx ">
Rafinessen: Tabellen in Tabellen Damit sich die inneren Tabellen besser voneinander abheben, werden sle durch eine farbige Zeile voneinander getrennt. Gleichzeitig wird der Rahmen unten ausgeschaltet, der gerade fur die umfassende Tabelle deflnlert wurde . Auserdem 5011 der erste Textabsatz jeder inneren Tabelle fett ausgegeben werden .
• tab l e tabl e{ width : 100%; hei ght : a u to ; margin-bottom : 15px ; border-bottom : Opx ; border-top : 4px solid khaki } • t able table tr :first -child p { font -weight : bold ; color : 11 7777 77 ; font-size : llpx }
l05l1
logo S08e Sellen 'el"_
& ••• (11,. und
"" ... h.,..._ .". It,ioe • • 1'1"'''' . ~p.'l-a"t ...." d., r "'• . '"teh _4 ... ,...'" bor.WIl. I'll"" U, II1II., ~.I • • n _f'I9 •• otor""
Der Clou eines seitenlayouts mit stylesheets liegt darin, die HTMLstruktur linear zu halten. So k6nnen alternative Medlen wie die sprachausgabe und die Braillezelle, aber auch altere Browser einfacher mit diesen seiten umgehen . Hier erlaubt slch elne selte ein extremes Vorgehen: Entweder eln moderner Browser unterstOtzt die notwendigen Eigenschaften fur die aufwendlge Gestaltung oder der Browser bekommt ein stylesheet, mit dem der Besucher die seiten nett, aber linearisiert und ohne den Aufsehen erregenden Effekt sieht. Ein schlichter Textbrowser ohne Verstandnls fur stylesheets oder ein alternatives Ausgabemedium bekommen ebenfalls eine klare, aufgeraumte seite zu sehen .
HintergrUndiges Der Effekt der selt e beruht auf der Eigensch aft backgroundattachment : f ixed und der Option, elnen Hlntergrund zu positionleren. So bleibt das Bild im Hintergrund stehen , wenn das Dokument im Fenster gescrollt wird. Hierbel wlrd insbesondere ausgenutzt, dass der Ursprung des Koordinatensystems bei der Platzierung das Browserfenster ist und nlcht das Element seiber oder das HTML-Dokument. Der kleine Trick der seite besteht darin, dass zwei Bilder den Hintergrund bilden und dabei perfekt Obereinander liegen .
nen geringeren Kontrastumfang auf und geh6rt zu den belden div-Containern, In denen die Navigation und die Inhalte untergebracht sind. Posltlonierte Hintergrundbilder sind also nicht auf die Abmessungen der Elemente beschrankt, fur die sie defiDl~u"l l~
Ponte Ve cd d o
haltnls zum Browserfenster k6nnen sle Ober die Grenzen des definierenden Blocks hinausgehen - sie sind allerdings nur innerhalb der Grenzen des Elements slchtbar.
http : / /www .meyerw.eb.com/eric / II
Das Hintergrundbild fur das body-Element zeigt seinen vollen Kontrastumfang, das andere Hlntergrundbild weist el-
niert werden. Durch ihre Fixierung auf eine Position im Ver-
Wenn der Besucher die Selte saout, bleibt das Hintergundbild fest im Browserfenster. Der Effekt ist aufwendiger a/s er auf den ersten Blick erschelnt: Auch der Text und die Navigation stehen vor einem HintergrundbiJd. Das erste Mal gesehen auf den Seiten von Eric A. Meyer:
RurwJo
Sit wurde etwa 1350 erbaut uad ist die f ind l e Briicke In Florenl, die im 2. Weh:lt.riesnie hl umon wurd e. Sit rtibrt iiber den Amo lum Pllano Pi l auf dem reehtee FJuliurer. Diese. Gc:biiude, belonnen 1 58 uad In der Fol&enit n ark erweite rt, war von 1550 bit 1859 Re. ldenl der to.uo l.chen Gro!berzo&e. E.ttll l li'ilt tine wettere bnii bmte Oemiklepltrii. i n l1:~eto n d e re mit wersee YOO Andre a del Sarto , R.ffle~ Peru.&!no, Tili in uDd Tinloretto. Hinter dem Pllast erstreekt . lc:h dee VOat Boboli-Gltitn. ln dem wihrt nd dr. aUJi hrlirhr. M• •lkf..tin b 1m Mal xen eerte i m Freien ItIttfinden.
199
Kapitel 6
Das Hintergrundbild fOr das bodyElement Iiegt bei den Koordinaten 10 Pixel110 Pixel gemessen von der link en oberen Ecke des Browserfensters . Die div-Container fOr die Navigation und die Inhalte (fliess) benutzen jeweils das gleiche Hintergrundbild. Dieses ist genauso grof) wie das Hlntergrundbild des body -Elements, aber durch eine Tonwertkorrektur kontrastarmer. Es istjeweils nur innerhalb der Container sichtbar und erweckt den Anschein, es wOrde durch eu: Milchglas oder einen semitransparenten Hintergrund verdeckt.
Bis zum letzten Tag: Beispiele
• body {background : #FFFFFO ur I ("loewe-mt . jpg " ) no-repeat fixed lOpx lOpx }
Container fUr Inhalte Der groge Block fur Inhalte wird absolut positioniert. Der Stil dennlert das kontrastarmere Hintergrundbild an der gleichen Position wie das Hintergrundbild fOr das body-Element, so dass die Bilder perfekt ubereinander liegen :
• div .fliess
background : url ( "bilderlloewe .jpg "l no-repeat fi xed lOp x lOpx ; border : lpx solid gray ; po sition :absolute ; l eft :200 ; t op :40px ; width :60% }
Container fUr die Elemente der Navigation Das div-Element ist fest (fixed) posltlonlert. Das Absatzformat p definiert die Schriftfamilie und Schriftgrbge, die auch fur Hyperlinks benutzt wird.
Ole Eigenschaft display : block vetsetzt jeaen Hyperllnk der Navigation In eine neue Zel/e.
Die Uffizien Ponte Ve cchio Die Palazzi Rundgang : Stadtplan
200
• div .navigation margin : Opx Opx; background : #FFFFFO ur I ( "loewe . jpg " ) no-repeat fixed lOpx lOpx ; text-align : center ; position : fixed ; top : 320px ; left : lOpx ; width : 160px ; } • div .navigation a( display : block ; margin : Oem O.5em ; border-top : Ipx so lid #778899 ; font : bold 12px/200% Verdana : text-decoration : none : } • div .navigation a :first-child { border -top : none : } Der Interessante Stll rst display : block fur a und img-Elemente, die von Haus aus Inllneelem ente sind, also nlcht zu elnern Zellenum-
6.3 Beispiel 3: Ein einfaches C55-Layout
[] ~===~ ~~~E~~~~~~~===51!1~B Die Seite kann in Dreamweaver aufgebaut werden, auch wenn Dreamweaver nicht aile Funktionen korrekt darstellt. Auch als DreamSIl! etWd 1350 t1"b.tut unci1M ~ eumge 8rUck.et weaver-Vorlag e ist die Seite problemlos gee ignet. In ~.n 2 . Weltkries nicht ~ort wurde . Da Dreamweaver keine Kontextselektoren .bot donArno:urn Pa!a= PItn au! clem • 0.... Gebaude. besamen 1458 anlegen kann, werden sie manue ll erstellt. Die Fl_ ...... und in de1'F It.Irk enteztert. Vir von 1550 bd Stile k6nnen allerdings nach dem handischen 1859 Reodon:dot' hen Cro~. Eo Anlegen im St ilinspektor erweitert werden.
...-:::oif.....
j
e.m.JdesaIone.
~nu :
rwfa~l.
WerltenVt:Ol Andrea del Sarto,
•TizW\und Tintc:n n o. Hu\tor dem
Palaol onoIi -Carten,III dem wwmd del . t).ihrlichen MuakfNtlv" Un Maj
...,....
.•....
- ~_
Komate un Freen mttfUlden. ";t
Auf befinclenoidI
"10 . "" .11./ 1"
ttl
I IJ) O t;;. O
b ruch fO hren . Durch die Transfo rm ation von a und img In Blockelemente entsteht nach jedem Hyperllnk 1m Navigationscontainer ern Zellenumbruch . Die Links im Navigationscontainer werden durch einen Rahmen oberhalb de r Ele mente vo nelnander getre nnt. a : first -ch ild nlmmt den ersten Hyperllnk von dieser Dekoration aus . Der Effekt m it zwei fest posltionierten Hintergrundb ildern funktloniert in alteren Browsern natOrlich nicht. Da diese Browser die @import-Regel ignorieren, wird das Stylesheet m it diesen St ilen im style-
satzgestaltung angelegt und in elnem -Element verknOpft. Dazu muss die im portlerte Stylesheetdatei im Dokument nach der
Da die Textze ilen m it den Hyperlinks nur durch die Deklaration d isp l ay : block um brochen werden, werden sie von Textbrowsern oder »Pra«-CSS-Browsern in
verknOpften Datei aufgefOhrt werden . Wer die Stylesheets mit Dream-
einer Zeile als Navigationsleiste oben
weave r anlegt mu ss das - Tag urnkop le-
tm Browserfenster gerendert.
Element der Seite im portiert. FOr »rn tt telalte rltche« Browser wlrd e tn zweites Sty lesheet mit »unqefahrlk hen« Sti len fur die Schrift- und Ab-
ren, da Dreamweaver das Tag nach dem style-Element anlegt: <> < 1 ink r'e l e " s tylesheet II
o o o
href= "simple . css " type» " text /css " > cs ty Le type = "text I css " > < ! - - @import "ma g i e . c s s " : -- > < 1s t Y Lee-
Aufpassen, dass bel der Def inition der Stile in »slrnp le .css« ketne Stile angelegt werden , die du rch »rnagte .css« nicht Oberschrieben werden . Anso nsten mOssen diese Stile wie in Beispiel 6 .2 exp lizlt Oberschrieben werde n!
[] . _I' , •
..!
~
.:'... _~
.......' ••,.ZZI
~
. .~ .!!,
e
• I!IB
,~I
01. UffI,I.nP.nte YlKula Die Pa tull Ru'KI,anv: St.dtp len
Die Palazzi DorP.w.oM«!ici·~ri._Micbolo::oI"Cooimodo·M«!ici"tl.d'''5J.hrbUhd«u «Wtlt,lteht Plft,t:b« cMrKuC'bot Sill Lor-.nzoua~ sro&n PL.u. Cbo"i
cIoo _~ .Dor P.w. boborborJ< bou.. A po.u
Das folgende Beispiel ist (55 »pur« - es beruht einzig und allein auf den positionierenden Eigenschaft von (55 . Das Layout ist ein typisches »Dret-Spalten-Layout« und passt sich der Grage des Browserfensters an, selbst ein Bildschirm mit einer Auflasung von 640 x 480 Pixel kann aile drei 5palten im Fenster halten . Dabei ist der Inhalt der 5eite in Browsern, die 5tylesheets nicht unterstOtzen, sinnvoll zu erfassen und voll funkttonsfarug. Das Layout legt sechs Blocke fur die 5eite an: • Eine Navigationsleiste oben mit Textlinks, dem Logo und einem 5uchformular • Eine Logoleiste fur ein Logo oder fOr Bannerwerbung • Eine Navigationsleiste auf der linken 5eite, mit einem Logo und Textlinks • Eine Navigationsleiste auf der rechten 5eite mit Links zu anderen Sites oder kleinen Werbeblacken • Ein Block mit dem Inhalt, mit einer Beschreibung der angebotenen 5eminare und Online-Tutorials • Ein farbiger Block innerhalb des Inhaltsblocks, in dem die Tipps des Tages veroffentltcht werden
obere Navigationslelste Logoleiste Inhalte Die B/6cke des Layouts im Uberblick : Das Layout solt sich der Gr6E'>e des Monitors anpassen, ohne die dritte Spatte aus dem Viewport zu verlieren. Insbesondere mQssen die Layoutelemente elnen Textzoom in den verschiedenen Browsern verkraften . Fur Netscape 4 gibt es wieder ein einfaches Sty/esheet, mit dem Besuchern die /nha/te linear aufgelistet werden .
202
Tlpp des rages
6.4 Beispiel 4: Einfach nur Stylesheets I
Das Layout 5011 mit elnern Stylesheet fur Internet Explorer, Netscape und Opera, jeweils ab Version 5, sowohl fOr den PC als auch den Mac auskommen - die klelnen TOcken der Browser werden kaschlert. Ais weltere Anforderung stehen die dynamlsche Erwelterung und Anderung der Selten auf der Anforderungsliste - ste sollen ohne Anderung der Layoutmechanismen funktlonleren . Aile Layoutelemente 501len mit den Inhalten wachsen, ohne dass Anderungen an der Struktur der Seite durchgefOhrt werden mOssen. Das Layout beginnt mit drei Spalten, die jeweils einen Abstand von 9 Plxeln voneinander aufweisen und glelchzeitig einen Abstand von 9
Tipp: Die Beschreibung der Codeelemente benutzt Namen fOr die Farben der Elemente - hier und in den anderen Kapiteln des Buches werden Farbnamen aus rein didaktischen GrOnden benutzt. Wer Wert darauf legt, dass aile Farben in allen Browsern korrekt dargestellt werden, sollte stattdessen Iieber die sechsstelligen Hexadezimalcodes angeben.
Pixeln zum Rand des Browserfensters halten . Die mittlere Spalte fur die Inhalte wird den meisten Platz beanspruchen - also gibt diese Spalte die Hbhe fur aile drei Spalten vor und zleht die anderen Spalten mit.
Schritt 1: Der Hintergrund Der Abstand zum Rand des Browserfensters wird durch ein Stylesheet fur das body-Element gesteuert:
• body {margin : 9px 9px Opx 9px ; padding : Opx Opx ; background : white } margin besch relbt den ause ren Abstand . padding : Opx wlrd expllzlt deklarlert. da die Werte fur padding In Opera nlcht auf 0 gestellt sind. Die Hintergrundfarbe wird gesetzt, da Netscape 6 auf dem Mac das klassische Grau der digitalen Steinzeit vorgibt.
Schritt 2: Der umfassende Block fUr aile Den umfassenden Block bildet eln div-Container mit der Bezeichnung
ebeneO. Die Hinterg rundfarbe ist die emzlge Eigenschaft. die hler angegeben wlrd:. #ebeneO {background : khaki }
Schritt 3: Box in a Box Eln div-Contalner mi t der Bezelchnung ebenel wlrd In den dlv-Contalner ebeneO verschachtelt. ebenel hat
< I-body (
"'""Jt~~ r,
tpll 0 tpll l
Cck9rOUDd lvhtt.e )
etnen auseren Abstand von 143 Pixeln zum linken
•• beneO ( bt!cx¥ound tkhaki )
Rand (das schafft Platz fOr die linke Navigatlonsleiste)
'.bene1 (
und elnen Inneren Abstand von 9 Pixeln fOr den Frei-
-->
raum zwischen der linken und der mittleren Spalte . • #ebenel { margin-left : l43px ;
padding-left : 9px ; background : white }
JM~t~~r~~~:~'
Cck9roUfl,chvhite )
<~
ld.-.beneO-> < < / dr ~ l u .pielt. dh Ku.lk..
.
Jetzt ist bereits sichtbar, dass der Inhalt der zweiten Spalte die Hbhe von Spalte 1 und Spalte 2 bestimmt.
203
Kapitel 6
o
eee
D'tl ~ttn
Bis zum letzten Tag: Beispiele
• Schnu4
C)
Schritt 4 Eln dlv-Contalner mi t der Bezelchnung ebe ne2 wlrd In den dlv-Contalner ebene l ver-
<.t.yl. typ .. • .. t .. xt./c•• ·:>
bo4y I . .rqln : !JplC 9p x 0 Slpx; padd lntJ :D l bacltqroun4 l whae ; ) hbt'ntO I baclcqroun4 t naU ; ) fe b. n!!! I -..rq1n-le ft : 14:151:11: :
schachtelt.
•
pacldlft'ill-h ft :9px ; bac!tqrowul l ..111 t. : )
~ebene2
{ background : khaki}
'eb'l'n.: I baeleqrOUnd lkh.ltl; )
Die Hintergrundfarbe ist die einzige Eigen-
cd r v Id·"e-llotrl.tO'" >
cpre- >fllltr _p llta d l. RUli l k .
!I ter 11 51 1. 11. die IIWJl k .
schaft fur ebene2 . An dleser Stelle werden zwei Spalten und der Abstand ZWischen den belden Spalten dargestellt. 1m Browserfenster sind die BI6cke erst dann sichtbar, wenn ein Fulltext fur einen Test eingegeben wird.
Schritt 5 Mit der glelchen Technlk wlrd ebene3 In ebene2 verschachte lt, um die dritte Spalte einzusetzen .
#ebene3 {margin-right : 143px ; padding-right : 9px ; background : #FFF • #ma in background : #CCC Eln welterer dlv-Contalner mit der Bezelchnung main wlrd ebenfalls In
ebene2 verschachtelt. Die Verschachtelung der dlv-Contalner dtent u.a. dazu. die verschledenen Interpretatlonen von padding, margin und border zu negleren. Insbesondere der Renderlngfehler 1m Boxmodell der Windows IES- und IES .S-Versionen wurde ansonsten das Layout brechen .
ee e
Schritt 6: Die obere Navigationsleiste
( MArq Ul,:' p. '511( a 'px ; p-.ddlnq :Op x Opx : backqroun4 : vh1 te : J h bltn.G t bae kq r o und : Jthalr: l ; ) ho be n. ! « 1II&cqln-l d t : 14Jpx; packllnq- l e't t :9px ; backqrov.nd : "h1 t~ :
)
h b ~ n ~ : I baeko'rOu.nd:khakl:)
I ... rglll.·r lqh~ : 14Jpl( : padding-right : I pl(: baC'kQ'rou.nd : Ybl ~. : ) . . . 111. I bukgrouDod. : yblU ) ' navl ~ l . t . ( bAC'qrcund:clIirkkhak1 ) 'log o1ltl.u f baekqround:lUwlkl I hbltb~:S
< 1 . ~ y l lt "
earv ld--eHn.It=" "
Bin
204
.pl.l~
dl. R\1II Uc.
In ebenel wlrd vor ebene2 eln dlv-Contalner mit der Bezelchnung navleiste - die obere Navlgatlons leis te - verschachtelt und In na v l e i s t e eln welterer dlv-Contalner mit der Bezelchnung logolei ste, der Raum fOr das Logo der Selte oder elne Bannerwerbung oletet.
• #navleiste { background :darkkhaki • #logoleiste { background :# khaki } An dieser Stelle zeigt das Layout drei Spalten sowle die obere Navigationslelste mit dem Raum fur ein Banner. Jeder Block wird 50 grog, wie der Inhalt, den er aufnimmt.
6.4 Beispiel 4: Einfach nur Stylesheets I
Phase l ist abgeschlossen. Bis zu dieser
< !DOCTYPE HTML PUBLIC " - / / W3C/ / DTD HTML 4 .01//EN " Stelle erklart das Beispiel, wle ein ''ht t p : / / wv..'W . w3 . or g / TR/ h t mI 4 / s t r i c t . d t d '' > Layout generell m it drel Spalten aufgezogen wlrd und dafOr sorgt, dass stets aile atet Spalten die gle tche H6he eutwetser: <s t yl e> body { marg i n : 9px 9px 0 9px ; paddi ng : O; backg rou nd :white ; } #ebeneO { backg round : khaki ; widt h :l0 0% ; } #ebene l {margin-l eft : 143px ; padding-left :9px ; background :white ; } #ebene2 { background : khaki ; posi tion :relative ; widt h :inherit ;} #ebene3 { margi n -right : 143px ; padding-right :9px ;
backg round :white ;}
{background :white ; } #main
#navleiste{ background :darkkhaki ; }
#logo leiste { background :khaki ; }
#tippbox {float :right ;
widt h : 175px ;
background :wheat ;
position :relative ;}
#navlinks {position :absolute ;
wi dt h : 143px ;
top :9px ;
left :9px ;}
#navrechts { position :absolute ;
widt h : 143px ;
top : O;
righ t :O ; }
'--- -- - - - - - -- - - - -- - - ------i
205
Kapitel 6
o ha p:1I 127.0.0. 1/_.yOut/ cssdts ian/ schritt7.rnml
666 ' nev l1 nb
... ...,
Bis zum letzten Tag: Beispiele
Schritt 7
o
I
{
POIl.1C1Oft:Ab IlOluu ;
b.agr.:OW1d: kbMl ;
. 1dth : 14Jpx;
Ein div-Container mit der Bezeichnung
tippbox wtrd In mai n versc hachtelt. Seine wic htlgste Eigenschaft ist float :
'
h f t :tpx :)
right , die den Containe r bei jeder Fens' • .un I bal;l!;:ljJE:ound: vtut.co; ) , t.1ppb_
C
Uon: rlgbt; _ 14 th : 17Spx:
b&eklp.0Uft4: v h C'e r...:
pa.lt1oa: [deun:)
fDavndlta I position: ,ah!lolut.t ;
tergrof>e ohne weltere Posltionsangabe an
baek9'I:CUl4: khAII::l;
der rechten Grenze des umfassenden
_ ldItb : l Upx : c.op: 0:
eIGht:
a
I
Containers main halt. Die H6he des Containers passt sich automatisch an die Grof>e des Inhalts an:
• #t ipp
float : r ight ; width : 175px ; background :
#FFF3AC}
Schritt 8 Ein dlv-Container m it de r Bezeichnung navlinks , de r absolut posttioniert ist (seine Koordinaten beziehen sich auf das Dokument), wird in
ebeneO verschach te lt. Da der dlv-Contalner absolut positionlert wird, kann er vor oder hinter ebenel gesetzt werden : • #navlinks { position :absolute ; width :143px ; top :9px ; left :9px }
Schritt 9 Der dlv-Contalner m it der Bezelchnung navrechts hat keln 50 retchtes Spiel wie navlinks . Er 5011 unter der oberen Navlgatlonslelste auf der glelchen H6he wie die mlttlere Spalte lIegen. Er muss In ebene2 verschachtelt werden - und zwar vor oder nach ebene3 . Damlt navrechts auf der gle ichen H6he wre main lIegt, wlrd ebene2 relatlv pos tttonlert, Dann kann navrechts absolut pos itlonlert werden .
• #ebene2 • #navrechts
206
background : khaki ; position :relative ;} position : absolute ; width : 143px ; top : 0 ; right : O;}
6.4 Beispiel 4: Einfach nur Stylesheets I
Probleme mit dem Internet Explorer An dieser Stelle gibt es Probleme mit dem Internet Explorer fur Windows. Die Tippbox verschwindet, obwohl der Inhalt des main-Blocks die Box sauber urnruest, t ippbox muss fOr die korrekt e Darstellung im Internet Explorer auf dem PC relanv positioniert werden. Durch die relative Posltion ierung wird der z-lndex fO r t ippbox hoher als der zindex der main-Box, des Blocks fOr den Hauptinhalt. Die tippbox-Box kommt nach oben und ist wieder sichtbar. Wegen eines welteren Problems mit Windows Internet Explorer braucht ebene2 elne Breltenangabe (ebene2 ist die Referenz fur die rechte Navlgatlonsleiste navrechts, die so welt wle mbgllch nach rechts positioniert ist) . Internet Interpretlert das Schlusselwort auto fur die Eigenschaft widt h nicht . versteht aber inher i t (was keln Standard 1st) . Wlrd ebeneO auf elne Breite von 100% gesetzt und die Brelte von ebene2 auf inherit. erbt Internet Explorer den Wert von ebeneO . Aile anderen Browser erben den Wert auto von ebene1 (Windows Internet Explorer schelnt stets die letzte explizlt gesetzte Eigenschaft eines Vorfahren zu erben) .
Internet Explorer und die Tabellenbreite Wurde die Breite von ebene2 mit 100 % angegeben. kame es spater zu Renderlngproblemen. IES .S+ setzt Tabellen, deren Breite auf 100% gesetzt wird, auf 100% des Browserfensters. • #ebeneO • #ebene2
• #tippbox
background : khaki ; width : 100% ; } background : khaki ; position : relative ; width : inheri t ; float : ri ght ; width : 175px ; bac kground : wheat ; posit ion : r elative ;
Schritt 10: Aufraurnen Es wird Zeit, autzuraumen und Elemente zu ersetzen, die zu Problemen fUhren konnen. Der dlv-Contalner ebene3 wlrd nlcht mehr gebraucht und kann entfernt werden . Seine Deklaratlonen gehen auf mai n uber. • #main { margin -right : 143px ; padding-right : 9px ; background : white ; }
207
Kapitel 6
1m necriste« Schritt werden die Schriften fCir die Navigationselemente der Seite ang eleg t. Beim Anlegen von Oberschriften und sobald im Text der rechten Navigationsleiste AusdrCicke in langen Zeichenketten eingesetzt werden, kommt schnell ans Tages/icht, dass der Besucher durch Andern der Schriftgroge in sei nem Browser in der Lag e ts t, das Layout zu brechen : Der Text fliegt Ciber die vorges ehenen Grenzen hinaus .
Bis zum letzten Tag: Beispiele
666
,
Otts tst ck Ir'lkt
""_tJC)fl$lto$tt .
oer avwCont.tner wetSt
.
ce Q:etdle
"!itCH
~t' R..-.d
-BeZUQSsystem .., 1St
Does1St de<
j
W14 tb : 1Upx = Uip lflg,
XT
rl'du%tertn SymboUt'i ittn Jlnpuun._ Btowu rfarbe
XI
.. Ztichen u,tz
DoI:untn~
.-.11_1 (
b plorf:r ~ lt'l ll t Symbol~ i' ~tn
U OOl191n e i
also d.oS t
pOllUoa.:e.oluu' ,
f9".
St~IUI a.titt'
von
abSOlJt poSJ,tlOI"kf1.
I
hVOfllltnie is lt'
!a-1U IU (
Brelte ltUf Woe der
eee-e1. Er 1St
SvmbOUe-IIIt:
Adrtu"nlelilt'
lMMon bHndrtn
SeminarB Photosho p
lt ft :fpa: )
Doze nt :
Aktulohsiertft
,-,
~
• X XI
lOOl! 200l! IS OlI .,120" l OOl!
w zu enem w , n dem . ...tttr
90ll
J.lYII· Nachn chten
XE
GruncIo9
CJ _ - ~
•
B,Id.,I~"
Source
..
I
Gro&tr
eereen
. . zu_ Hfl
7S. 60ll SOlI X.
I
dtr
Fur ~r met'Y 8enJ~ zaNt oe CS, Klt lntr X · ,ODZtnten. mt ProQr.vrmen wie ~ Pnotoshop zu Oazu QehOf"en f01QV aftn n Fotostudtos eeeosc Wit ""tarbelt~ Tex Qnk von Prlt'Sststenen und
Ve~tn .
Sem inlJr Digitlile FOlogra fie OOZtf'lt Olpl.· lrlQ. OIetm¥ WUle-r
Der UInItle-g yom fotooraftsctw:n FIm aut clenChip SIt'
venprechtn
K"lt
l .....
~~~ dleser
Tu Ulnks N 5etten
rTIIt Referenn
Eine _1
n.
noe _Zekhenkette
IdYldtre PrOcluknon. vere;nfad'ltn dle
~cs: ::'~:F~:Z~:,~e::t~~ Q\U~Ut
• •-f.
Schritt 11: Relative GroSen einsetzen Eine Losung des Problems , das durch den Textzoom der moderne n Browser hervorgerufen wird, besteht in der Angabe von relativen Grogen anstelle der absoluten Mage fur Elemente wie die Navigationsleisten rechts und links. Diese beiden Boxen sind 143 Pixel breit - das entspr icht etwa 9 em.
• #main
• #navrech ts
margin-right : gem; padding-right : 9px ; background : white ;} position : absolute ; width : gem; top : Oem ; right : Oem}
Der Besucher hat - Je nach Browser, mit dem er die Seiten betrachtet verschiedene Moglichkeiten, die Schriftgrogen zu andern. Das hier vorgestel lte Verfahren lost einige der Probleme, die dabei auftreten konnen, aber nicht aile. Die Spannbreite der Techniken in den Browsern ist zu grog, um allen Eventualitaten vorzubeugen. Auch die Tippbox wird mit einer variabien Breite versehen, nicht aber die linke Navigationsleiste . Overflow-Probleme in der linken Navigationsleiste fOhren nicht zu BrOchen im Layout.
208
6.4 Beispiel 4: Einfach nur Stylesheets I
< lOOCTYPE HTML PUBLIC " - I IW3CI IDTD HTML 4 . 01 1 IEN" ''http : / /www .w3 .org / TR/htm14 /s trict .dtd'' > Dre i Spalten &ndas h; Schr itt12< /title> <style> body {margin : 9px 9px 0 9px ; padding : 0 ; background : white } #ebene O { ba c kg rou nd : khaki ; width : 100% } #ebene l { ma r g in- I e Et : 143px ; paddi ng-IeEt : 9px ; background : white } #ebene2 { ba c kg ro nd : khaki ; pos it ion : re lat ive ; width : inherit } #main {ma r gin -r i gh t : gem ; borde r- r ight : I px so lid rosybrown ; padding-right : 9px ; background : white } #navleiste {ba c kg r ound : darkkhaki ; width : 100% } #logoleiste {background : khaki ; clear : r ight ; text-a l ign : center} #tippbox { El oa t : right ; width : llem ; background : wheat ; '<-=-b-o""""'d:y-> - - - - - - - - - - - - - - - - - - - - - - - ' - - - - - - - , ttnavlinks
-cdi v id= "ebene2 "> -cdi v id= "navrechts "> Rechte Navigationsleiste -cdi v id= "ebene3 ">
Oberschrift Hauptinhalt
Aktuelle Tipps
Hauptinhalt
--I < I d i v»
position : relative } {position : absolute ; width : 143px ; top : 9px ; leEt : 9px } {position : absolute ; width : gem; top : Oem ; right : Oem} {ma r g i n : Oem ; padding-leEt :0 .3em ; padding-right : Semi background : rosybrown } h3 {margin : Opx; padding : 3px ; background : rosybr-own } Eorm {float : right ; width : IO .Sem ; text -align : right ; margin : 0 ; line-height : O. 7em } input {Eont-size : O.Bem ;} {border : none }
209
Kapitel 6
Bis zum letzten Tag: Beispiele
Schritt 12 Die obere Navigationsleiste nimmt ein Suchformular auf. Seine wichtig ste Eigenscha ft ist float : right. Das Suchform ular wird als erstes Element In den div-Container navleiste eingebu nden . Die Breitenangabe ist zwingend erforderlich, da das Formular frel schwebe nd deklariert lst ( fl oa t : r i gh t ). 1m Sinne des vorangegangenen Absatzes Ober relative Gr6gen notiert das Stylesheet fur das Form ular in nav l eiste die Brelte relanv mit width : 10 . Sem. Damit wachst das Suchformular entsprechend der gewahlten Schriftgr6ge des jewelligen Browsers . text -align : right richtet das Formu lar am rechten Rand des umfassenden Blocks aus. • #navleiste form { float : right ; width : 10 .Sem; text-al ign : right ;
}
Die Eigenschaf t float : right kann dazu fOhren, dass Elemente des Logoblocks Oberlagert werden . Darum deklartert logoleiste die EIgenschaft clear : right und Elemente In logoleiste rich ten slch unte rhalb von schwebenden Elementen auf der rechten Seite aus. In Hinsicht auf die Probleme mit der Vererbung der Brelte im Internet Explorer 5/5 .5 unter Windows, die in 5chrltt 9 besprochen wurden, erhalt der div-Contalner navleiste die Deklaratlon width : 100%. • #logoleiste
background : khaki ; clear : right ; }
• #navleiste form
float : right ; width : 10 .Sem; text -ali gn : right ; margin : Oem ; line -height : 0 .7em;
1:1 _
eo
•
•
---
•
. ) _ _ " ......... _ ....... _
IT
_ ... IolI_
...
;
.........
u...- ..... htl C Ollor .......
001"""_ " .b6*..."
OoolHo. -llIII . ... ..... II'.
00&.
- - --""'- - ~age 210
• #navleiste input ( font-size : O.Bem ;
I
...... l no
~"'otM1leCl' hlNotI~" ~fIUV""
......... 1
. ' / .,
Engin eering 0
CSS2-Positionierung und Dreamweaver/GoLive : Die Site kann nicht mehr in Dreamwea ver oder GoLive gepflegt und erweitert werden . Grafische Webeditoren sind noch nicht in der Lage, die Seiten darzustellen . Dennoch macht es Sinn , sie in Dreamweaver/GoLive einzustellen : Die Funktion aet Templates- oder Musterseiten, mit der neue Seiten erzeugt und die Navigation einer bestehenden Site schnell uber samtliche Seiten einer Site erweitert und veienoert werden kann, funktioniert auch weiterhin und garantiert etne stabile Sites truk tur.
6.4 Beispiel 4: Einfach nur Stylesheets I
Stile fUr die Schriftgestaltung Bleibt nur noch, die Stile fur die Schriftgestaltung der Seite anzulegen . Zu beachten ist dabei, dass sarntllche Texte und Bilder innerhalb der verschiedenen div-Container bis an den Rand des Containers reichen und auf Abstand gebracht werden mOssen.
•
•
• •
#navl inks a { border : none ; margin -left : O.6 em; font-family : Verdana , Aria l . s ans -serif ; font-size : O. Sem; d i s p lay : b l ock; text -decoration : none ; #navlinks h3 {f ont - s i ze : 0 . gem; color : #28302 8 ; margi n : O.Be m O.lem 0 .4em 0 .4em ; #navli nks p { f ont : O.Bem Ar ia l , s an s-serif ; marg i n- r i gh t : l em; ma rg i n- lef t : l em; color : #O EOFO E; #navl i nk s a :link {co lor : #FFFFFF ; } #navlinks a : vi sited {col or : #FOEFCA ; #navlinks a : hover {color : da rks l a t egr ay ; }
di s play : bl oc k fOr Links in der
--- -....-
--
Image Engineering
~ftoop,b"rtf.
00IQ1taIe 'otoqrah e
LI, ..... """"S.u
c.Iot' M.",~
...tIod4>"O"
NdtI4~ tnll
ProotanM"Mn ..... ~ Phot.GtJ'1OO
N dWl ~ec:." . Duu Q4nor." Fotoorilen It't
I
et4nitJ ... MIt.ItbM., ron Pfn..-nehn
""'-----. F~
_-
I.-.;JlIlNtl 0" M:llHI
l ...
~"'tll
....
_oe",-,,"trrgbiIt
~ ..fth r1)r _..,. t
Fu'1'TWMI" ",.I'r~: . . dtotdl~
,_-.....-.....
w i. st. U. " sie "left
c.... 'NMr "'ll . . .
....-..
__
~ h N or..ec
....... loftHl'
-_.
F~I'CI'I~
I.II4DrutI«
&Ikl.-.d'l ....
s.. ·4f'lPftod'4rl..,.t~'".~ '
.",_~cM~ • .-rI"~~"",,",
~.
bow"tltf dIoI
~ Qu~
_141Ott fotogll'~
Film dtOUIe 11:. . . .'"' . Hd'C nut m FetMtudto. 1ft zit*..m.n MHI ·und P'nhU1loen . M. YeI"~\I'ld 1ft
sondem
d« PrHM 1Y,t." ... 4'n"
=~ "'Ofc)em den ~ m(d~,**,
6Hdda terbanken Fi.# utI.ur.o. &Met und Prwu ~ die '-Ute~ ~""~ ,..... IlId«MQII'll'lt ....... • ,t.tet'NllbI~
linken und rechten Navigationsleiste sind fur Textbrowser und Browser gedacht, die Stylesheets nicht interpretieren . Dank d isplay : block erscheinen die Links in diesen Browsern in einer horizontalen Zeile, wahrend in Browsern mit CSS-UnterstQtzungjeder Link eine Zeilenschaitung erzeugt.
-_-
-..-. ....... .....
NnaiIII ,~1ftIII
:~ -r
: ~ ';.;._.,:.
_..
w.m"' ..... '1ftQiJ'n
-
IIItn Sotltn MNn
woe..n. MW4:,*,s..~
1 SMt" ~'I'OnTobl ll
Nl.t:\nJdft ~ Pot~. MltOtn
.....
8Ild«f ....~ a . W Must.., Gen«.won ~Mf'..,g,....,urd PIrt1 tIfJ,....-c-~.... und mit Sd'tw..,.. hi Udd.c~.,... An;h'W
211
Kapitel 6
6 .5 Wieder einmal kommtdas technische Spa gat zum Tragen, das durch die Formatierung mit Stylesheets rnogflch wird : Die Inhalte der Site sind »llnear« in ihrer inhaltlichen Folge, um so fUr Textbrowser, altere Browser und alternative Ausgabetechniken funktlonsfahlg vorzuIiegen, die Gestaltung ftir die modernen Browser bringt die technisch machbare Funktiona Iitat .
Bis zum letzten Tag: Beispiele
Beispiel 5: Einfach nur 5tylesheets II
Das Schone an frames war die Navigationsleiste , die im klassischen frameset auf der linken Seite festgemauert im Browserfenster stand . Sie erfOlite die Anforderung, dass der Kontext »Bei wem bin ich, wohin kann ich sonst noch« stets erhalten blieb, auch wenn sich der Besucher durch lange Seiten scrollte . Cascading Stylesheets sind durchaus in der Lage, uns dieses feature zurOckzubringen und es auch noch einfacher in die Welt zu setzen als mit Frames. Die Navigationsleiste im vorangegangenen Beispiel wird durch das Stylesheet
• #nav l inks { position :abso lu ce ; width : 143px ; top :9px ; left : 9px ; } formatiert. Damit die Navigationsleiste im Browserfenster fest steht, auch wenn der Besucher durch die Seite scrollt, wird das Stylesheet um eine Deklaration erweitert:
• #nav l inks { pos ition : fixed ; Il po s i t i o n : abso lute ; width :143px ; t op : 9px ; left :9px ; } Damit wird das Browserfenster der Bezugspunkt des div-Containers, der Sichjetzt nicht mehr vom Fleck bewegt. Was macht die Eigenschaft posi t ion :absolute 1m Kommentar? Sie bleibt als »Netz mit doppeltem Boden« fur den Internet Explorer unter Windows. Wahrend aile Browser ab Version S die feste Positionierung beherrschen , wird ste im Internet Explorer unter Windows weder in den Versionen 5/5 .5 noch in der Version 6 unterstOtzt. Da der Internet Explorer in allen Versionen den Wert fixed Ignortert, tritt die deklarlerte Eigenschaft pos i t ion : abso lute In Kraft und der Internet Explorer verschiebt die Navigationsleiste, wenn die Seite gescrollt wird.
212
6.5 Beispiel 5: Einfach nur 5tylesheets II
I!IB
Ole Darstellung der CSS-Selte 1st linear und voll funktlonsfahig In allen Browsern, die Stylesh eets nicht unters tQtzen .
w ~ ~.MO"'.r$~.~..,Mhs.t:proogr...,..,..w,.~P~~"'" .~oMrQwrUPrnt... ~IM
U6H und T.lIU
rnan«.~.~ItI'l
prvf.IIofiONI..,......"
toro.m
,s..
Oft !ltd St ... U"ld,~dem Sd'rftst1.d. 1M" SctM. d« ... r'MtC"...
MICh~1~Nnd'ch Oft~ .
OlB
COO, nQht 0 2OO2 r'MlH
~
...... Il.a.te
,~tloIIt ....
"'''lhl'lOWwrm' 'Y· L!I::IzJ:IaI.Ic
Mit 5tylesheets macht Netscape 4 .x Klelnholz aus dem
-=.== -
(55-Layout. Also emp flehlt es slch, das 5tylesheet vor Netscape 4 .x (und anderen alteren Browsern) zu verbergen. Die elnfachste Lbsung tst eln elnfaches 5 tylesheet fur Netscape und aile Browser, die 5tylesheets gar ntcht oder nur fehlerhaft Interpret leren. Zu den ersten . gro&en. Sites, die dlesem Trend folgen, gehbrt die europalsche Lycos-5lte http://iscriDt.dk/lycos/2/ .
---
,.,..
~ ~
213
Kapitel 6
Bis zum letzten Tag: Beispiele
Die Konstruktion mit dem C55-Kommentarzeichen »//« nutzt einen Fehler im Internet Explorer 5 und hoher : Internet Explorer 5+ ignoriert das Kommentarzeichen und Oberschrelbt mit position :absolute d ie zuvor gesetzte Eigenschaft posi t i on : fi xed. Benutzern , die im Microsoft-Flagschiff surfen , werden also die ganze 5eite scrollen , wahrend fur Netscape 6 und Opera 5 die Navigationsleiste 50 fest im Browserfenster steht als ware sie ein Frame.
Netscape 4.x gelinkt In Browsern, die keine 5tylesheets unterstOtzen , werden die Inhalte linear und voll funkttonsfahlg dargestellt. Die Problematik des C55-Layouts Iiegt in Netscape 4 .x, das nicht in der Lage ist, die Inhalte sinnvoll darzustellen . Das 5tylesheet mit den hier vorgestellten 5tilen wird darum nicht durch eln -Tagverknupft, sondern importiert. Netscape 4 .x ignoriert die @import-Regel im <style>-Tag. Damit erbffnet sich ein Weg, alten Browsern, die 5tylesheets zwar interpretieren, aber die Positionierung uber 5tylesheets nicht ausreichend unterstOtzen , mit einem eigenen 5tylesheet zu versorgen , ohne dass eine Browserabfrage durch ern Java5cript durchgefOhrt wird : Zuerst wird ein 5tylesheet durch eln -Tag verknOpft, danach wird ein 5tylesheet durch die @import-Regel geladen . Das Styl esheet fur die VerknOpfung Ober das -Tag enthalt Hintergrundfarbe und Stile fur die Textgestaltung, die fOr eine einfache Gestaltung der Seite sorgen . Die Stylesheetdatei simple.css mit einfachen Textstilen fur Browser wie IE3/4 und Netscape 4 muss vor der @import-Regel verknupft werden, damit die Stile aus der @importRegel in modernen Browsern die Regeln aus simple.css uberschreiben.
O O O o o <style t y pe = .. text /css ">
o
@import ur l( . . / i v e n t . c s s ) ; -->
o O< / he a d >
214
6.6 Beispiel 6: Wie gedruckt - das Stylesheet fUr den Drucker
6.6
Beispiel 6 : Wie gedruckt - das 5tylesheet fUr den Drucker
Das Web ist ein multimediales Medium. Auch wenn das Internet bei den meisten Besuchern auf dem Monitor des Computers landet ..., wenn es richtig interessant und wichtig wlrd, drucken wir die Seiten auf unserem Desktop-Drucker. Alternative Stylesheets definieren alternative Stile, die anstelle der vordefinierten oder automatisch vorgezoge-
Die neue Browsergeneration druckt - aber nicht mehreinen unkontrollierbaren Screenshot, der Bilder durchschneidet und Texte zensiert.
nen Stylesheets eingesetzt werden. Ihre wichtigste Anwendung wird in der Formatierung des Dokuments fur verschiedene Medien liegen:
O O
r_ - ~ _
r-
ne v,'s....... Showdown fOr da •
.=.-
Fakten, Fakten, Fakten: Abgeschnittene Oberschriften, OberflOssige Seitenelemente, verschluckter Text. Ausgabe : Fokus mit Mozilla 0 .9 .8, Spiegel mit Internet Explorer 5 .1 .
lIuHn-Duell
--- _. V~
......rt""""""IIIl"'''H.c.h
C':.:::::=::..-::-"E::-:'=- ,----------~---
2 15
Kapitel 6
Bis zum letzten Tag: Beispiele
Immer noch ist der gr6fSte Tell des Webdesigns rein visuell und die meisten Seiten lassen sich nicht besonders gut ausdrucken . Navigationsleisten machen den Druck schwer lesbar. Wie oft sehen wir schon die kleine Schaltflache »Lesbare Druckversion «? Dabei ist der Druck die zweitwichtigste Ausgabeform des Webs. Dabei k6nnen wir Besuchern unserer Seiten, die mit Internet Explorer 4 .5+, Opera 5+ und MoziliaiNetscape 6 surfen , durchaus elne vernOnftige Druckausgabe bieten . Der Medientyp fur den Druck wird in der @import-Anweisung angegeben :
@import url(seite .css) print , projection ; Die Stile in seite .css werden sowohl fur den Druck als auch die Projektion benutzt, beides seitenbasierte Ausgabeverfahren . Auch in gelinkten Stylesheets k6nnen mehrere Ausgabeziele angegeben werden:
Stylesheet fUr den Druck Um dem Interessenten ein besseres und bereinigtes Druckbild zu bieten, werden also zwei Stylesheets angelegt: eines fur die Bildschirmausgabe, elnes fur den Druck. / * Sti le fur den Monitor * / body {color : silver ; backgrou ~d : black ; } a : ink color : yellow ; background : #333333 ; text -deco~ation : none ; a :visited {color : white ; background : #333333 ; text-decoration : none ; a :active {color : black ; background : white ; text-decoration : none ; } hI , h2 , h3 {color : ¥CCCCCC ; background : black ; padding -bottom : Ipx ; border-bottom : Ipx solid gray ; }
216
/ * Stile fur den Druck * / body {color : black ; background : white ; } a :link , a :visited {background : white ; color : black ; text-decoration : underline ; font-weight : bold ; ni . h2 , h3 { background : white ; color : black ; padding-bottom : Ipx ; border-bottom : Ipx solid gray ; . ke i nd r uc k {display :none ; }
6.6 Beispiel 6: Wie gedruckt - das Styleshee t fUr den Drucker
Pseudolinks werden in der Druckausgabe wieder unterstrichen und ohne Hintergru nd gedruckt. Die klass ifizierte Deklaratlon . keindruck unterdruckt das Banner im Druck . Beide Stylesheets werden im headElement des Dokuments eingefUgt:
Was auf dem Papier keinen Sinn macht ... 1m HTML-Dokument werden aile Elemente wie Banner und Menuleisten, die nicht ausgedruckt werden sollen, mit einem
-Tag und dem entsprechenden Klasseneintrag eingerahmt. Das reicht, um sie im Druck zu unterd rucken . Auf dem Monitor werden sre natUrlich weiter angezeigt.
o
cdiv class= "keindruck ">Banner , MenOleisten und anderes , was im Druck ni c h t gezeigt werden sol1c /div>
Die Umkehrung ist naturlkh auch denkbar: Drucken , aber nicht auf dem Monitor anzeigen .. . aber nicht ohne weiteres machbar. Denn altere Browser, die das Attribut nicht kennen, werden die Elemente unweigerlich anzeigen.
Stile fUr den Druck Die nahe liegendste Methode, spezlelle Stile fOr den Druck einzufOgen, ist das link-Element:
o
clink rel= "stylesheet " type= "text/css ' h r e f e " . . . " media= "print " />
Stylesheets fOr den Druck stellen in einigen Browsern eine Gefahr fOr die Ausgabe auf dem Monitor dar, wenn das media-Attribut nicht korrekt erkannt wird und Stile fur den Druck falschlkherwetse auf die Monitorausgabe angewendet werden . Man stelle sich nur einmal vor, das Werbebanner verschwindet bel der Monitorausgabe . Um die Ausgabe auf dem Monitor nicht durch falsch erkannte Stilregeln in Gefahr zu bringen, kann die @import-Regel im style-Element eingesetzt werden . Sie wird von alteren und fehlerhaften Browsern wie Netscape 4 .x ignoriert. Um Stylesheets fur den Druck vor modernen Browsern zu schutzen , kbnnen sle Innerhalb etner Importlerten Style she etdatei durch @media
pr i nt abgeschottet werden .
217
Kapitel 6
Eine Kompatib ilitatsliste tur die UnterstOtzung von Styl esheets fur den Druck gibt es bei
h e ep : II \\'YW . c ode s t yl e . orglcss Imedi alpri n t - Brows erSum~a
ry .shtml , Die Kompatibilitatsliste behandelt nur die Gefahren, die durch Stylesheets fUr den Druck auf die Monitorausgabe zukom men, nicht aber, ob Stile fUr das j eweilige Medium korrekt angewendet werden .
Bis zum letzten Tag: Beispiele
Stile fUr @media print Stile fur den Druck lassen sich global im style-Element des Dokuments vereinbaren:
o <sty l e > • @med ia screen • { p {font -family : Ve r da na , sans-ser if ; font : l 4px /l5 0%; co lor : darKgray } } • @med 'a p r in { p { font : l 4px /1 30 % Georg ia ; color :black ; margin : Opx Opx; ext-align : j us t i fy ; } hr { page-break-after : always ; } hr :before { content : "Ende Kapite l " counter{kapitel) " ". counter-increment : kapitel ; }} • @media screen ,print • { hl {co l or : darkgray ; font : 15px /20 0% Helvetica ; marg in-bottom : 3em; }} • @page { size : 14cm 14cm; marks : crops ; orphans : 4 ; widows : 4 ; } • @page:first { margin : Gem 4cm lcm lcm • @page:left { margin : lcm lcm lcm 4cm } • @page:right { margin : lcm 4cm lcm lcm o
Sie kbnnen aber auch innerhalb einer Stylesheetdatei notiert werden. Unter den moderne n Browsern erkennen Internet Explorer ab Version 5, Mozilla 1. Netscape 6 und Opera die @media-Regel korrekt und zetgen das Dokument in differenzierten Stilen , Nur Internet Explorer 5+ auf dem Mac erkennt die @page-Regel nlcht, sondern kann erst dann spezielle Stile fur den Druck anwenden, wenn die Stylesheets Ober
218
6.6 Beispiel 6: Wie gedruckt - das Stylesheet fUr den Drucker
aklt • • • • ,.
- 1_ . f • • t ••t
I
....
"0_'••••
• • ,UI I "';
l_ _ •_ _. --. I I (i.iiJ ~
A
...-
---. . .,. ---..,0_
_
'¥__ .............. _....
DlQUIeFotol,1rn
-
~ttl""""'No
",.....'-"~n'tNI:... ~
r.oe~~,.
~ ~ .-
U'r«-C. ~saz
'1I'llJo~ ~
.............~ I
--
l
Ivmt Arti1..c1 und Wortshopi
!'>ge2
I San von Dokumcntm. scim C5 nun Zeiud>riften.~ 00.::.. A)"" . .... ~erSlelle - ' :sich Saaprogramme wit Adobe Pa,eMaker. lnDc::sign oder Quart.XPm.5. _on. _SM:
C--.tlf... ~"tl r . d l t _ . G......
Te . ~nppmgrammc~nd fUr den
~_
Pqel
1..."A
w.. C<>pyrichl C 2002 m
O fTene Sm1lnare Bildatthi ...'C Cdor ManagementDiJilalc Foco,:rZiePhotoshop ~os l'lop E.~ pc ns ......)00 1 und Sau Webde$i, n OnUnr--WorUhops BildluJbeihUll 8 ilddateflbM en Digitale Fo4~l(" Druclm Wcbdrsi,:n RaJlmeonDurchlUhnm, Fi rTnC'n ~ mi nate AGO!
Nurnmphnrimmsrr
Semlnare
._......,
==,.-_. ...
ODd
Workshops
Ted'",
l~II.1l
1--=
w..
~
BiJd_Uuy mil Adobo rholoshop
:---..:::.':j
Rr il'lW'11trmmr BcruI'sJNPPC"l1 dtdt die digillJe Bikjbeatbeitun, mil Programmen w )t Adobe f'hotos.hoplU den BPisferti,kciten. Oazu,eh6rm FoIoJ:mfrn in foto5rudio& C'beMo wie MiW'bdlCt\"On Pres.$t:SIt'Jlcn uncj Versic:hetungen.
.....
o.. " ," ~
".......
Color Menaganml Demitder Druckhil t. was del' Bikbchinn\'C:f'IPkht. m&,s.m nichtnor aile 0nI1C blibrint Wl:nIm. f1fizimlC' Arbritsabllufc C'l1ordcm c1ntides Vcntindni. da Techniken.
DIgItate EpJognfJc
_It
Sic ~ tine sd'Incllne Produklion. \'C1einfldlendie AblJiut'c im Focstldi o und lid... heutc die Jldd>
I
http-J/I27 .0.0.I I.._
Das gle lche Dokument, zwel Ausgaben: Unterschled/lche Schrlften, em anderer Satzsplegel, bes tlmmte Elemente werden fOr die Druckausgabe unte rotuo«. Stand der Technlk: Ju/l 2002.
AIrunzIldiee Bdde1uno! !'rin.. ocII1Irt die Ictzle SlUnde und IUrebcmo viele Bildet bcl!MI cine S)'t1Cmllisc:hc NulZun, des ~ F\Jknliall . Mil den BildafassunpJ'Cflkn der neusccn Ocnen:tionlaucn Iich Hilder unciPrinu cffirieal diJi isieml und mil Sdtwvc fUr Bilddatcnl:enkcn in an Archiv
Kleine Unterschiede Hintergrundfarben und -bllder st6ren auf Druckseiten fast immer. Also werden sie ausgesc haltet:
• body {background : none ; } Schrifte n fur den Druck sollt en in Punktgr6f,en angegeben werden:
• =main p
font : 9pt /130% Georgia , Times , Seri: ; color : black ; margin : lOp IOpt ;
Texte werden schwarz gedruckt. Eine Ausnahme bilden Hyperlinks : Damit auf dem Papier besser nachvollzogen werden kann, dass sich hinter einem Begriff ein Link verbirgt, wird er blau und unterstrichen gedruckt.
• #main hI , h2 , h3 , h4 , h5 , h6 { color : black ; } • a { color : blue ; text-decoration : underline ; } Die Navigationsleisten und das Suchfeld werden bei der Druckausgabe unterdrOckt:
• #nav-rechts { display : none ; • #tippbox { display : none ; } • #nav-oben { display : none ; } Seitenumbr Oche innerhalb von Absatzen wOrde der Stil
• . a bs a t z { page-break-inside : avo i.d : } verbergen, aber zurzeit wird diese Eigenschaft leider von keinem Mainstream-Browser unte rstOtzt.
220
Gib dem Tag 'nen Stil Kapitel 7
HTML is a Box in a Box
HTML ist die wahrscheinlich kleinste Programmiersprache der Welt. Nicht einmal eln HP-Taschenrechner der ersten Generation hatte einen 50 kleinen Befehlssatz. Gerade in Hinsicht auf die Formatierung der Inhalte durch Stylesheets lohnt es skh, die Konstrukte von HTML genauer unter die Lupe zu nehmen, denn sie sind die Trager der visuellen Gestaltung .
7.1 Catch the Spirit ... HTML und Stylesheets sind ein Paar. Wenn die Struktur von HTML stimmt, herrschen optimale Bedingungen fUr Cascading Stylesheets. Ein paar der folgenden Betrachtungen rnogen esoterisch anmuten, aber sie sind grundlegend fur das Verstandnls der komplexeren Eigenschaften von Stylesheets.
HTML is a Box in a Box
Die wahrscheinlich kleinste Programmiersprache der Welt
Das »Markup« im Namen HyperText Markup Language verrat die Natur von HTML: HTML besteht aus Markierungen, die »Tags« genannt werden . So wle im traditionellen satz der Redakteur dem Setzer durch Marken am Rande des Papiers Oberschriften, Teaser und Absatze markie rte, markiert HTML Inhalte fur den »User Agent« - den Browser - als Oberschriften , Leads und Absatze.
Tags, Attribute, Eigenschaften und Elemente Eln Tag ist eine Anweisung in HTML, die in spitzen Klammern notlert wird. Eine Reihe von Tags schllefst Inhalte ein und endet dann mit einem »Ende-Tag«:
, das Tag fur einen Absatz,
fur eine Tabelle, -ch1> fur eine Oberschrift. Andere Tags brauchen kein Ende-Tag (z .B. «hr » . die Linie, oder , der Zeilenumbruch) . Attribute sind Eigenschaften eines Tags, die in den spitzen Klam-
mern des Tags notiert werden und die Darstellung des Inhalts verandern kbnnen , wie z.B. das noshade-Attribut der Linie (xhr noshade» , oder Aktionen steuern wie die Attribute von Formularelementen oder das target-Attribut des Hyperlinks. Einige Attribute wiederum kbnnen verschiedene Werte annehmen . Der beruhrnteste Vertreter ist sicherlich . Wenig bekannt lst. dass Attribute in HTML-Tags auch Erelgnlsse wle etnen Mauskllck abfangen kbnnen : onmouseover»
"this . bgColor=red " onmouseout = "t h i s . bgcolor=green ". Container enthalten Inhalte, die im Viewport - also in der Regel im
