Dirk Jesse CSS-Layouts Praxislösungen mityaml Galileo Press
Geleitwort des Fachgutachters 15 Vorwort 17 Was erwartet Sie in diesem Buch? 17 Softlinks 18 Ein großes Dankeschön 18 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 Die Welt der Browser 27 1.3.1 Internet Explorer 5.x und 6 27 1.3.2 Internet Explorer 5/Mac 28 1.3.3 Internet Explorer 7 28 1.3.4 Die Mozilla-Familie: Firefox und Netscape & Co 28 1.3.5 Opera 29 1.3.6 Safari und Konqueror 29 1.3.7 Textbasierte Webbrowser 30 1.3.8 Screenreader 31 1.4 (X)HTML und Doctype 31 1.4.1 Darstellungsmodi 32 1.4.2 Semantischer Code 34 1.5 Browserweichen 37 1.5.1 @import-regel 38 1.5.2 @media-regel 38 1.5.3 Trickreiche Kommentare für den IE/Mac 39 1.5.4 Conditional Comments 39 1.6 Parser-Bugs des Internet Explorers 41 1.6.1 Stern-Selektor 42 1.6.2 Escape-Zeichen 42 1.6.3 Der Kind-Selektor 43 1.6.4 Gezielte Zugriffe auf alle Internet Explorer Versionen... 43
1.7 Die Arbeit mit dem Buch 46 1.7.1 Die Verwendung des Pixelrasters 46 1.7.2 Aufbau der Codebeispiele 47 1.7.3 Hinweise zu den Browserbug-Beispielen in Kapitel 2 49 1.7.4 Hinweise zum YAML-Framework 49 1.7.5 Hinweise zum TYPO3-Template 49 2 Der Weg zu robusten, flexiblen Layouts 51 2.1 Der Weg ist das Ziel 51 2.2 Strukturiertes Arbeiten mit CSS 52 2.2.1 Einbindung der Stylesheets 52 2.2.2 Medienspezifische Stil-Definitionen 53 2.2.3 Mehr Ordnung durch funktionale Gliederung 54 2.3 Kaskade und Spezifität 55 2.3.1 Die vier Stufen der Kaskade 55 2.3.2 Die Spezifität eines Selektors 56 2.4 Browserunterstützung für CSS 2.x 57 2.4.1 IE und die Eigenschaften min-/max-height und min-/max-width 58 2.4.2 IE und die Pseudo-Elemente :before und :after 61 2.5 Das Box-Modell 62 2.5.1 Das Box-Modell des Internet Explorers 64 2.5.2 Der Box-Modell-Hack 65 2.5.3 Anwendungsgrenzen des Box-Modell Hacks 69 2.5.4 Limitierungen des Box-Modells 69 2.6 Das Kombinationsmodell für flexible Breiten 70 2.6.1 Die Problemstellung: Mischung von Einheiten 70 2.6.2 Die Lösung: Verschachtelte Container 72 2.6.3 Was ändert sich mit CSS3? 73 2.7 Die Elementtypen in CSS 74 2.7.1 Elementtypen und ihre Eigenschaften 74 2.7.2 Die CSS-Eigenschaft display 75 2.8 Längen- und Größenangaben 75 2.8.1 Absolute Einheiten 76 2.8.2 Relative Einheiten 76 2.8.3 Relative und Absolute Bezüge in CSS 76 2.8.4 Prozentwerte [%] 79 2.9 Die CSS-Eigenschaft position 79 2.9.1 position:static 80 2.9.2 position:relative 80
2.9.3 position:absolute 81 2.9.4 position:fixed 82 2.9.5 position:relative + position:absolute 84 2.9.6 Zwei Spalten mit absoluter Positionierung 85 2.9.7 Zwei Spalten mit Fußzeile 86 2.9.8 Drei Spalten mit Kopf- und Fußzeile - ein Meilenstein.. 87 2.10 Die CSS-Eigenschaft float 91 2.10.1 Grundlagen im Umgang mit floats 91 2.10.2 Zwei Spalten mit Footer 94 2.10.3 Drei Spalten mit Footer 96 2.10.4 Globale und lokale Wirkung der Eigenschaft clear 98 2.11 Markupfreies Clearen von floats 100 2.11.1 Die Clearfix-Methode 100 2.11.2 Die Overflow-Methode 102 2.11.3 Clearing mittels eines zusätzlichen Floats 104 2.12 Flexible Layouts mitfloats 105 2.12.1 Beeinflussung der Spaltenreihenfolge 106 2.12.2 Gleichlange Spalten 111 2.12.3 Strukturunabhängige Layoutgestaltung 114 2.13 CSS-Bugs des Internet Explorers 114 2.13.1 haslayout - das interne Layoutkonzept des Internet Explorers 115 2.13.2 le/win-guillotine-bug 117 2.13.3 le-peekaboo-bug 119 2.13.4 le/win - Unscrollable-Content-Bug 121 2.13.5 le-doubled-float-margin-bug 123 2.13.6 le/win - Escaping-Floats-Bug 124 2.13.7 IE/Win-3-Pixel-Jog-Bug 126 2.13.8 le/win-ltalics-bug 127 2.13.9 IE - Expanding Box Problem 129 2.13.10 le/win - Disappearing-List-Background-Bug 133 2.13.11 IE - Extreme-Font-Size-Bug 134 2.13.12 le-float-clearing-bug 136 2.14 Was bringt der Internet Explorer 7? 137 2.14.1 Neuerungen der Rendering Engine 137 2.14.2 CSS-Bugs im IE7 138 2.15 CSS-Bugs in Mozilla, Opera & Co 139 2.15.1 Mozilla und Firefox - Clearing-Bug 139 2.15.2 Netscape 7: Probleme mit overflow:hidden 140 2.15.3 Opera-Bugs 141
2.16 Gestaltung von Grundelementen 142 2.16.1 Schriftgestaltung mit relativen Einheiten 142 2.16.2 Basisschriftgröße und Skalierung 143 2.16.3 Umrechnungstabelle für relative Schriftgrößen 144 2.17 Menügestaltung mit Navigationslisten 145 2.17.1 Vertikale Listennavigation 146 2.17.2 Horizontale Listennavigation 149 Das YAML-Framework 153 3.1 Vorüberlegungen 153 3.1.1 Gestaltung kontra Bugfixing 153 3.1.2 Lösungen für Standardaufgaben 154 3.1.3 Wieder verwendbare Bausteine 154 3.2 Freiheit und Kontrolle 154 3.2.1 Die wichtigsten Features 155 Flexibilität in der Layoutgestaltung 155 Robustheit im Code 155 Browserkompatibilität 155 Funktional gegliederte Stylesheets 155 3.3 Der Aufbau des Frameworks 156 3.3.1 Die Verzeichnisstruktur 157 Verzeichnis: artikel 157 Verzeichnis: css 157 Verzeichnis: css/explorer 157 Verzeichnis: css/main 158 Verzeichnis: css/modifications 158 Verzeichnis: css/navigation 159 Verzeichnis: css/print 159 Verzeichnis: Hilfsmittel 159 Verzeichnis: layout_storage 160 3.4 Das XHTML-Grundgerüst 160 3.4.1 Die Struktur des Quelltexts 161 3.4.2 Die Reihenfolge der Spalten 164 3.4.3 Das Clearing von #col3 166 Globales Clearing macht #col3 zur längsten Spalte 166 Eine spezielle Clearing-Lösung für den Internet Explorer 167 Anwendungsgrenzen für das le-clearings 171 3.4.4 Grafikfreie Trennlinien und Spaltenhintergründe im Basis-Layout 172
3.4.5 Skip-Link Navigation 173 Skip-Link Navigation im Basis-Layout 173 Unsichtbar und barrierefrei 174 3.5 Das CSS-Konzept 175 3.5.1 Einbindung des Layouts in den Quelltext 177 Einbindung des zentralen Stylesheets 177 Einbindung der CSS-Anpassungen für den Internet Explorer 177 3.5.2 Das zentrale Stylesheet 178 3.5.3 Das Basis-Stylesheet base.css 179 Einheitliche Ausgangsbedingungen schaffen 179 Der Rohbau des Basis-Layouts 181 Standardvorgaben für Listen und Zitate 185 Weitere Bestandteile 186 3.5.4 CSS-Anpassungen für den Internet Explorer 186 Einbindung der CSS-Anpassungen in das YAML-Layout 187 Layoutunabhängige Anpassungen im Detail 189 Layoutabhängige Anpassungen im Detail 199 3.5.5 Die Erstellung des Screenlayouts 201 Die Funktion der basemod-stylesheets 201 Das Layoutkonzept von www.yaml.de 201 3.5.6 Navigationselemente 203 Horizontale Listen navigation»sliding Door«204 Horizontale Listennavigation»Shiny Buttons«209 Vertikale Listennavigation»vlist«213 3.5.7 Gestaltung der Inhalte 218 Auszeichnung externer Hyperlinks 219 3.5.8 Die Erstellung eines Drucklayouts 220 Typographische Anpassungen 221 Anpassung des Layouts 221 Spalten für den Druck auswählen 222 Linearisierung der Spalten 222 Kennzeichnung der Spalten (optional) 223 Auszeichnung von Akronymen, Abkürzungen und externen Link-URLs 224 3.6 Layouterweiterung: Subtemplates 225 3.6.1 Struktureller Aufbau 226 Der Container.subcolumns 227 Die Raumaufteilung über DIV-Blöcke 228
Die Inhaltscontainer 229 CSS-Anpassungen für Subtemplates im Internet Explorer 231 3.6.2 Alternatives Layoutkonzept mit Subtemplates 231 3.7 Hilfsmittel 232 3.7.1 Stylesheets für den Dreamweaver 232 3.7.2 JavaScriptftod.js 233 3.7.3 JavaScript minmax.js 234 4 Layoutentwicklung mit YAML 235 4.1 Konzepte der Layoutentwicklung 235 4.1.1 Das Bottom-Up-Prinzip im Webdesign 235 4.1.2 Das Top-Down-Prinzip des YAML-Frameworks 236 4.2 Vom Rohbau zum fertigen Layout 237 4.2.1 Einbau der Grundbausteine 238 4.2.2 Einheitliche Bezeichnungen 240 4.2.3 Vorgaben für das Layout»3col_vlines«241 4.2.4 Gestaltung der Hauptnavigation 242 4.2.5 Erstellung des Screenlayouts 242 4.2.6 Gestaltung der Inhalte 247 4.2.7 Einbindung einer Druckvorlage 250 4.2.8 Anpassungen für den Internet Explorer 250 4.3 Grundvariationen des Basis-Layouts 251 4.3.1 Layoutvariationen mit 3 Spalten 252 4.3.2 Layoutvariationen mit 2 Spalten 254 4.3.3 Freie Verwendung der Content-Spalten 256 4.4 Freie Spaltenanordnung 257 4.4.1 Spalten in beliebiger Reihenfolge 258 4.4.2 Die Klassiker 1-3-2 und 2-3-1 259 4.4.3 Die natürliche Ordnung 1-2-3 und 3-2-1 262 4.4.4 Der Einfluss negativer margins 2-1-3 und 3-1-2 264 4.5 Das Feintuning des Layouts 267 4.5.1 Festlegung der Layoutbreite 267 4.5.2 Zentrierung des Layouts 268 4.5.3 Festlegung der Spaltenbreiten 269 4.5.4 Hinweise für robuste flexible Layouts 270 4.5.5 Grafikfreie Spaltentrenner 272 4.5.6 Faux Columns-Technik 274 4.5.7 Grafische Umrandungen flexibler Layouts 276 10
4.6 Ausgewählte Beispiellayouts 281 4.6.1 Layoutentwurf»2col_left_vlines«281 4.6.2 Layoutentwurf»2col_right_vlines«285 4.6.3 Weitere Kombinationen für 2-Spalten-Layouts 288 4.6.4 Layoutentwurf»3col_fixed«289 4.7 Aufbereitung der Inhalte 293 4.7.1 Markupfreies float-clearing in Spalte #col3 293 4.7.2 Beispiele zum Clearing mit.floatbox 293 4.8 Layouten mit Subtemplates 295 4.8.1 Layoutentwurf»Subtemplates #1«296 4.9 Optimierung für den Praxiseinsatz 299 4.9.1 Anpassung des Quelltexts 300 4.9.2 Optimierung der Stylesheets 301 4.10 Was tun, wenn's klemmt? 302 4.10.1 ValiderCode 303 4.10.2 Prüfung von Pfadangaben 303 4.10.3 Kaskaden- und Spezifitätskonflikte in den Stil-Definitionen 304 4.10.4 CSS-Unterstützung und Browser-Bugs 304 4.11 Einbindung von YAML in ein CMS 304 5 Tipps BHMiflHBflMMflBHflflBHHBEHEHEH^H und Tricks 307 5.1 Praktische Tipps zum Grafikeinsatz 307 5.1.1 Skalierbare Bilder mit CSS 307 5.1.2 Image Replacement Techniken 309 5.2 Tipps für Browsertests 310 5.2.1 Mozilla und Firefox 310 5.2.2 Netscape und Opera 312 5.2.3 Internet Explorer 312 5.3 Tools zur Webseitenentwicklung 314 5.3.1 Werkzeugleisten für Webentwickler 314 5.3.2 Die Erweiterung HTML-Validator 318 5.3.3 Die Erweiterung View formatted Source 320 5.3.4 Screenshot-Generatoren 321 j 6 YAML und TYPO3 - die Theorie 323 6.1 Begriffe 324 6.2 Was isttyposcript? 324 6.3 Die beiden Template-Varianten 325 11
6.3.1 Die importierbare t3d Datei 325 6.3.2 Das Komplettpaket 326 6.4 Von der HTML-Vorlage zum TYPO3-Template 326 6.4.1 Arbeitsteilung 326 6.4.2 Arbeitsablauf 327 6.5 TYPO3 Extensions 327 6.5.1 Notwendige Extensions 327 6.5.2 Optionale Extensions (empfohlen) 327 6.6 Der Extension-Manager 328 6.6.1 Vorbereitungen 328 6.6.2 Backend-Sprachen auswählen und Übersetzungen herunterladen 329 6.6.3 Extensions installieren 330 6.6.4 Fehlermeldungen beim Installieren von Extensions 332 6.7 TYPO3 Templates 333 6.7.1 Statische Templates 333 6.7.2 Das statische Template css_styled_content 335 6.8 Eine eigenes TYPO3-Template erstellen 336 6.8.1 Die HTML-Vorlage 336 6.8.2 Der Autoparser 339 6.8.3 Das default PAGE-Objekt 340 6.8.4 Das TEMPLATE cobject 340 6.8.5 Inhalt des cobjects TEMPLATE auf die Seite kopieren... 341 6.8.6 Der Template Selector 341 6.8.7 Das Haupt-Template 342 6.8.8 Erweiterungs-Templates 345 6.8.9 Der SysOrdner Template Storage 346 6.8.10 Der Constant Editor 357 6.8.11 TSconfig 360 7 YAAAL und TYPO3 in der Praxis 365 7.1 Eine neue Seite anlegen 365 7.2 Seiteninhalt anlegen 368 7.3 Der Rieh Text Editor (RTE) 371 7.3.1 Die wichtigsten Bedienelemente 371 7.3.2 Besonderheiten 374 7.3.3 Bilder und Grafiken im RTE 376 7.3.4 Das Inhaltselement»Text mit Bild«378 7.4 Arbeiten mit Benutzergruppen und Redakteuren 380 7.4.1 Dateifreigabe einrichten 380 12
7.4.2 Benutzergruppen anlegen und Rechte definieren 381 7.4.3 Backend Benutzer anlegen und Gruppenzugehörigkeit festlegen 385 7.4.4 Zugriffsrechte für die Seiten setzen 386 8 YAAAL und xt:commerce 8.1 Template-Erstellung mit xtcommerce - etwas Theorie 391 8.1.1 Die Template Engine Smarty 391 8.1.2 Verzeichnisstruktur 392 8.1.3 Überlegungen zur Integration von YAML 392 8.1.4 lnlinephp-codeinderdateiindex.html 393 8.2 Praktische Überlegungen 398 Anhang A Inhalt der CD-ROM 403 B Die Referenzkarte 405 Index 407