Inhalt Geleitwort des Fachgutachters '" '" 15 Vorwort zur zweiten Auflage 17 1 Philosophie guten Webdesigns 21 1.1 Einleitung 21 1.2 Modernes Webdesign mit (X)HTML und CSS 22 1.2.1 Arbeiten nach Webstandards 22 1.2.2 Webseiten sind nicht aus Papier 22 1.2.3 Alles ist variabel, nichts ist fix 23 1.2.4 Trennung von Inhalt, Layout und Dynamik 26 1.3»Design for our future selves«27 1.4 Die Welt der Browser 28 1.4.1 Internet Explorer 5.x und 6 28 1.4.2 Internet Explorer 5/Mac 28 1.4.3 Internet Explorer 7 29 1.4.4 Die Mozilla-Familie: Firefox, Netscape und Co. 29 1.4.5 Opera 30 1.4.6 Safari und Konqueror 30 1.4.7 Textbasierte Webbrowser 30 1.4.8 Screenreader 32 1.5 Entwurfskonzepte zur Layouterstellung 32 1.5.1 Graceful Degradation 33 1.5.2 Progressive Enhancement 35 1.5.3 Welcher Weg ist nun der bessere? 36 1.6 (X)HTML und Doctype 36 1.6.1 Darstellungsmodi 37 1.6.2 Semantischer Code 39 1.7 Standard-CSS der Browser 42 1.8 Die Arbeit mit dem Buch 43 1.8.1 Verwendung des Pixelrasters 43 1.8.2 Aufbau der Codebeispiele 44 1.8.3 Hinweise zu den Browserbug-Beispielen in Kapitel 3 46 1.8.4 Hinweise zum YAML-Framework, Kapitel4 und 5 46 1.8.5 Hinweise zum TYP03-Template 46 1.8.6 Hinweise zur Weiterentwicklung und zur Buch-DVD 46
2.9 2 Der Weg zu robusten und flexiblen Layouts 47 2.1 Der Weg ist das Ziel 47 2.2 Strukturiertes Arbeiten mit CSS 48 2.2.1 Einbinden der Stylesheets 48 2.2.2 Medienspezifische Stildefinitionen 49 2.2.3 Mehr Ordnung durch funktionale Gliederung 50 2.3 Kaskade und Spezifitat 51 2.3.1 Die vier Stufen der Kaskade 51 2.3.2 Die Spezifitat eines Selektors 52 2.4 CSSDOC- Ein Weg zu gut kommentierten Stylesheets 54 2.4.1 Ansatz for den CSSDOC-Standard 55 2.4.2 Grundlagen 55 2.4.3 Obersicht der am haufigsten verwendeten Tags 57 2.5 Reset CSS 61 2.5.1 Eric Meyers Reset CSS 62 2.5.2 Ein alternatives Reset CSS 64 2.5.3 Fazit 66 2.6 Das Box-Modell 67 2.6.1 Das Box-Modell des Internet Explorers 69 2.6.2 Der Box-Modell-Hack 71 2.6.3 Anwendungsgrenzen des Box-Modell Hacks 75 2.6.4 Einschrankungen des Box-Modells 75 2.7 Das Kombinationsmodell fur flexible Breiten 76 2.7.1 Die Problemstellung: Mischung von Einheiten 76 2.7.2 Die t.osung: Verschachtelte Container 77 2.7.3 Was andert sich mit CSS 37 79 2.8 Die Elementtypen in CSS 80 2.8.1 Elementtypen und ihre Eigenschaften 80 2.8.2 Die CSS-Eigenschaft display... 81 Langen- und Gro~enangaben 82 2.9.1 Absolute Einheiten 82 2.9.2 Relative Einheiten 82 2.9.3 Relative und absolute Bezuge in CSS 83 2.9.4 Prozentwerte 85 2.10 Die CSS-Eigenschaft position 86 2.10.1 position:static 86 2.10.2 position:relative 87 2.10.3 position:absolute 88 2.10.4 position:fixed... 89 2.10.5 position:relative + position:absolute 91 2.10.6 Zwei Spalten mit absoluter Positionierung 92 6
7 2.10.7 Zwei Spalten mit Fu~zeile. 93 2.10.8 Drei Spalten mit Kopf- und Fu~zeile - ein Meilenstein.. 94 2.11 Die CSS-Eigenschaft float.. 98 2.11.1 Grundlagen im Umgangmitfloats. 99 2.11.2 Zwei Spalten mit Footer. 102 2.11.3 Drei Spalten mit Footer.. 104 2.11.4 Globale und lokale Wirkung der Eigenschaft clear.. 106 2.12 Markup-freies Clearing von floats. 108 2.12.1 Die Clearfix-Methode. 108 2.12.2 Die Overflow-Methode. 111 2.12.3 2.12.4 Clearing mittels eines zusatzlichen floats Clearing mit display:table. 112.. 113 2.13 Flexible Layouts mit floats. 115 2.13.1 Beeinflussung der Spaltenreihenfolge. 115 2.13.2 Gleichlange Spalten.. 121 2.13.3 Strukuru nabhanglge Layoutgestaltu ng. 123 2.14 Grid Layouts - ein Gestaltungskonzept. 124 2.14.1 Aligemeines. 124 2.14.2 Flexible Grids statt fixer Breiten. 127 2.14.3 Fazit.. 131 2.15 Gestaltung von Inhaltselementen.. 131 2.15.1 Schriftgestaltung mit relativen Einheiten. 131 2.15.2 Basisschriftgrobe und Skalierung. 132 2.15.3 Umrechnungstabelle fur relative Schriftgrofsen.. 133 2.16 Menugestaltung mit Navigationslisten. 134 2.16.1 Vertikale Listennavigation.. 135 2.16.2 Horizontale Listennavigation.. 138 3 Abseits des Standards - Umgang mit Parsing- und CSS-Bugs 141 3.1 Browserunterstutzung fur CSS 2.x.. 141 3.1.1 Internet Explorer und die Eigenschaften min-heightlmax-height und min-width/max-width... 142 3.1.2 Internet Explorer und die Pseudo-Elemente :before und :after. 146 3.2 Browserweichen,.'". 146 3.2.1 @import-regel.. 147 3.2.2 @media-regel.. 148 3.2.3 Trickreiche Kommentare fur den Internet Explorer/Mac. 149 3.2.4 Conditional Comments.. 149 3.2.5 Parser-Bugs des Internet Explorers. 151
3.2.6 5tern-5elektor 152 3.2.7 Escape-Zeichen 152 3.2.8 Der Child-5elektor 153 3.2.9 Gezielte Zugriffe auf aile Internet-Explorer-Versionen 153 3.2.10 Anwendungsbeispiel: Browsertest 156 3.3 haslayout - das interne Layoutkonzept des Internet Explorers 157 3.3.1 Arger programmiert 158 3.3.2 Grundlagen fur die Vergabe von haslayout 158 3.4 C55-Bugs des Internet Explorers 160 3.4.1 Internet Explorer - Float-Modell-Bug 160 3.4.2 Internet Explorer/Win - Guillotine-Bug 162 3.4.3 Internet-Explorer - Peekaboo-Bug 164 3.4.4 IE/Win - Unscrollable-Content-Bug 166 3.4.5 Internet-Explorer - Doubled-Float-Margin-Bug.. 168 3.4.6 IEIWin - Escaping-Floats-Bug 170 3.4.7 IE/Win - 3-Pixel-Jog-Bug 172 3.4.8 IE/Win -Italics-Bug 174 3.4.9 Internet Explorer - Expanding-Box-Problem 176 3.4.10 IE/Win - Disappearing-List-Background-Bug 180 3.4.11 Internet Explorer - Extreme-Font-5ize-Bug 182 3.4.12 IE-Float-Clearing-Bug 183 3.4.13 Internet Explorer 7 - overflow:auto im Print-Layout 185 3.5 C55-Bugs in Mozilla, Opera und Co 187 3.5.1 Firefox 2.x - overflow:hidden I auto im Print-Layout 187 3.5.2 Mozilla und Firefox - Clearing-Bug 189 3.5.3 Netscape 7: Probleme mit overflow:hidden 189 3.5.4 Opera - Prozentrechnung nur mit ganzen Zahlen 191 3.5.5 Opera - Weitere C55-Bugs 191 3.6 Was bedeutet der Internet Explorer 7 fur Webentwickler? 192 3.6.1 Neue Funktionen fur den Nutzer 192 3.6.2 5eitenzoom des Internet Explorers 7 192 3.6.3 Anderungen in der Rendering Engine 193 4 Das YAML-Framework.: : 197 4.1 Voruberlegungen... 197 4.1.1 Gestaltung kontra Bugfixing 197 4.1.2 L6sungen fur 5tandardaufgaben 198 4.1.3 Wiederverwendbare Bausteine 198 4.2 Freiheit und Kontrolle 198 4.2.1 Die wichtigsten Features 199
4.3 Das Framework im Detail.. 200 4.3.1 Der Aufbau des Download-Pakets. 201 4.4 Das XHTML-Grundgerust. 205 4.4.1 Die Struktur des Quelltextes. 206 4.4.2 Die Reihenfolge der Spalten.. 210 4.4.3 Das Clearing von #col3.. 211 4.4.4 Grafikfreie Spaltentrennlinien und Spaltenhintergrunde im Basislayout 4.5.3 Einbindung der CSS-Bausteine in den. 216 4.4.5 Skip-link-Navigation. 217 4.5 Die CSS-Bausteine.. 220 4.5.1 Das Konzept. 220 4.5.2 Baustein-Klassen und Namenskonventionen. 221 XHTML-Quelltext. 223 4.5.4 Das zentrale Stylesheet.. 224 4.5.5 Das Basis-Stylesheet base.css. 224 4.5.6 CSS-Anpassungen fur den Internet Explorer. 233 4.5.7 Die Erstellung des Screen-Layouts. 245 4.5.8 Navigationselemente. 247 4.5.9 Gestaltung der Inhalte. 257 4.5.10 Die Erstellung eines Drucklayouts. 263 4.6 Layouterweiterung: Subtemplates. 270 4.6.1 Struktureller Aufbau von Subtemplates. 270 4.6.2 Alternatives Layoutkonzept mit Subtemplates.. 277 5 layoutentwicklung mit YAMl 279 5.1 Konzepte der Layoutentwicklung. 279 5.1.1 Das Bottom-Up-Prinzip im Webdesign.. 279 5.1.2 Das Top-Down-Prinzip des YAML-Frameworks. 280 5.2 Vom Rohbau zum fertigen Layout. 281 5.2.1 Empfohlene Projektstruktur.. 282 5.2.2 Das Basislayout.. 284 5.2.3 Festlegung einiger Bezeichnungen. 286 5.2.4 Vorgaben fur das Layout 3col_standard. 287 5.2.5 Erstellung des Screen-Layouts.. 288 5.2.6 Gestaltung der Hauptnavigation.. 292 5.2.7 Gestaltung der Inhalte.. 293 5.2.8 Einbinden einer Druckvorlage.. 294 5.2.9 Anpassungen fur den Internet Explorer.. 294 5.3 Grundvariationen des Basislayouts.. 296 5.3.1 Layoutvariationen mit drei Spalten.. 298
5.3.2 Layoutvariationen mit zwei Spalten 300 5.3.3 Freie Verwendung der Content-Spalten 303 5.4 Freie Spaltenanordnung 305 5.4.1 Spalten in beliebiger Reihenfolge 306 5.4.2 Spaltenanordnungen 1-3-2 und 2-3-1 307 5.4.3 Spaltenanordnungen 1-2-3 und 3-2-1 309 5.4.4 Spaltenanordnung 2-1-3 und 3-1-2 (neue Vorgehensweise) 311 5.4.5 Spaltenanordnung 2-1-3 und 3-1-2 (alte Vorgehensweise).. 316 5.5 Das Feintuning des Layouts 317 5.5.1 Festlegung der Layoutbreite 317 5.5.2 Zentrierung des Layouts 317 5.5.3 Festlegen der Spaltenbreiten 319 5.5.4 Hinweise fur robuste und flexible Layouts 319 5.5.5 Grafikfreie Gestaltung der Spalten 322 5.5.6 Faux-Columns-Teehnik 324 5.5.7 Grafisehe Umrandungen flexibler Layouts 326 5.6 Ausgewahlte Beispiellayouts 331 5.6.1 Layoutentwurf 2eoL/eft_seo 331 5.6.2 Layoutentwurf 3eoUixed_seo 335 5.7 Layoutentwieklung mit Subtemplates 338 5.7.1 Layoutentwurf»flexible Grids«339 5.8 Aufbereiten der Inhalte 343 5.8.1 Markup-freies float-clearing in Spalte #eol3 343 5.8.2 Beispiele zum Clearing mit.floatbox 344 5.9 Optimierungen fur den Praxiseinsatz 346 5.9.1 Anpassen des Quelltextes 346 5.9.2 Optimieren der Stylesheets 347 5.10 Was tun, wenn's klemmt? 349 5.10.1 Valider Code 349 5.10.2 Prufen von pfadangaben 350 5.10.3 Kaskaden- und Spezlfttatskonflikte in den Stildefinitionen 351 5.10.4 CSS-UnterstUtzung und Browser-Bugs 351 5.11 Einbinden von YAML in ein Content-Management-System 351 6 Tipps und Tricks 353 6.1 Debugging-Stylesheet 353 6.1.1 Kontrollautomatik fur iehaeks.ess 353 6.1.2 Pixelraster fur Positions- und Geometriekontrolle 355 10
Inhalt 6.1.3 Hervorheben von Elementen 355 6.2 Bearbeitungshilfen fur Dreamweaver 356 6.2.1 Dreamweaver MX 2004 (V7.0) 356 6.2.2 Dreamweaver 8 357 6.3 JavaScript-Hilfen 358 6.3.1 Dynamisch generierte Blindtexte 358 6.3.2 UnterstLitzung fur min-width/max-width im Internet Explorer 360 6.4 Praktische Tipps zum Grafikeinsatz 360 6.4.1 5kalierbare Bilder mit (55 360 6.4.2 Image-Replacement-Techniken 362 6.5 Tipps fur Browsertests 364 6.5.1 Mozilla und Firefox 364 6.5.2 Netscape und Opera 366 6.5.3 Internet Explorer 366 6.5.4 Browsertests unter Windows Vista 368 6.6 Tools zur Webseitenentwicklung 369 6.6.1 Web Developer Extension 369 6.6.2 Firebug - Das Ailround-Tool zur Webentwicklung 370 6.6.3 Web Accessibility Toolbar und Developer Toolbar fur den Internet Explorer 372 6.6.4 Web Developer Toolbar fur Opera 8 und 9 374 6.6.5 Die Firefox-Erweiterung HTML-Validator 375 6.6.6 5creenshot-Generatoren 377 7 Integration von YAML in Templavoila 379 7.1 Begriffsbestimmungen 379 7.2 Alles ist Template 380 7.3 Von der HTML-Vorlage zur Datenstruktur 382 7.3.1 Erzeugen der Datenstruktur (Mapping) 384 7.3.2 Mapping der Header-Teile 386 7.3.3 Template-Objekte 388 7.3.4 Icons fur die Datenstruktur und das Ternplate-Objekt 391 7.4 TypoScript-Bibliotheken 391 7.4.1 config-array 391 7.4.2 temp.buildheaderdata 392 7.4.3 page-objekt 393 7.4.4 lib.header 393 7.4.5 lib.nav 395 7.4.6 lib.teaser 396 7.4. 7 Iib.selectorBox... 397
7.4.8 lib.submenu 398 7.4.9 IibJooter 399 7.4.10 Anderungen an css_styled_content 400 7.4.11 Image Replacement 400 7.5 TypoScript anpassen 402 7.5.1 TypoScript Object Browser (TSOB) 403 7.5.2 Elemente verandern 404 7.5.3 Constant Editor 404 7.6 YAML-Beispiele 407 7.7 Mehrsprachigkeit 408 7.7.1 Template einsprachig machen 409 7.7.2 Eine Sprache aus dem Template entfernen 409 7.7.3 Reihenfolge der Flaggen andern 409 7.7.4 Zusatzliche Sprachen hinzufugen 410 7.7.5 Asiatische, arabische und hebraische Sprachen 411 7.8 Flexible Content-Elemente (FCE) 411 7.8.1 FCEs und Mehrsprachigkeit 413 7.8.2 Weitere Tips zur Verwendung von FCEs 413 8 YAML und xt:commerce : 415 8.1 Template-ErstelJung fur xt:commerce - etwas Theorie 415 8.1.1 Die Template Engine Smarty 415 8.1.2 Arbeiten mit Smarty 416 8.1.3 Struktur von xt:commerce Templates.. 417 8.1.4 Integration von YAML 418 8.1.5 Smarty-Variablen in der Datei index.html 419 8.2 xt:commerce-templates mit YAML erstellen 422 8.2.1 Installation 422 8.2.2 Bestandteile des Screenlayouts 422 8.2.3 Layout anpassen 423 8.2.4 Shop mit 2-Spalten-Layout 425 8.2.5 Verwendung von Subtemplates im xt:commerce-template 425 Anhang.. ~ ; 439 A Inhalt der DVD-ROM 441 B Die Referenzkarte 443 Index 445