CSS-Layouts: Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3]
Gespeichert in:
| 1. Verfasser: | |
|---|---|
| Format: | Buch |
| Sprache: | German |
| Veröffentlicht: |
Bonn
Galileo Press
2007
|
| Ausgabe: | 1. Aufl., 1. korr. Nachdr. |
| Schriftenreihe: | Galileo Computing
|
| Schlagworte: | |
| Online-Zugang: | Inhaltsverzeichnis |
| Beschreibung: | 414 S. Ill., graph. Darst. 1 CD-ROM (12 cm), 1 Referenzkt. |
| ISBN: | 9783898428378 3898428370 |
Internformat
MARC
| LEADER | 00000nam a2200000 c 4500 | ||
|---|---|---|---|
| 001 | BV022367696 | ||
| 003 | DE-604 | ||
| 005 | 20071122 | ||
| 007 | t | ||
| 008 | 070327s2007 gw ad|| |||| 00||| ger d | ||
| 015 | |a 07,N01,0045 |2 dnb | ||
| 020 | |a 9783898428378 |c Gb. : EUR 29.90, EUR 30.80 (AT), sfr 49.90 |9 978-3-89842-837-8 | ||
| 020 | |a 3898428370 |c Gb. : EUR 29.90, EUR 30.80 (AT), sfr 49.90 |9 3-89842-837-0 | ||
| 024 | 3 | |a 9783898428378 | |
| 035 | |a (OCoLC)180147806 | ||
| 035 | |a (DE-599)BVBBV022367696 | ||
| 040 | |a DE-604 |b ger |e rakddb | ||
| 041 | 0 | |a ger | |
| 044 | |a gw |c XA-DE-NW | ||
| 049 | |a DE-20 |a DE-355 |a DE-92 |a DE-M347 |a DE-1102 |a DE-863 |a DE-1051 |a DE-858 |a DE-634 | ||
| 082 | 0 | |a 006.76 |2 22/ger | |
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 084 | |a ST 253 |0 (DE-625)143628: |2 rvk | ||
| 100 | 1 | |a Jesse, Dirk |e Verfasser |4 aut | |
| 245 | 1 | 0 | |a CSS-Layouts |b Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] |c Dirk Jesse |
| 250 | |a 1. Aufl., 1. korr. Nachdr. | ||
| 264 | 1 | |a Bonn |b Galileo Press |c 2007 | |
| 300 | |a 414 S. |b Ill., graph. Darst. |e 1 CD-ROM (12 cm), 1 Referenzkt. | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 490 | 0 | |a Galileo Computing | |
| 650 | 0 | 7 | |a Cascading Style Sheets |0 (DE-588)4467617-7 |2 gnd |9 rswk-swf |
| 689 | 0 | 0 | |a Cascading Style Sheets |0 (DE-588)4467617-7 |D s |
| 689 | 0 | |5 DE-604 | |
| 856 | 4 | 2 | |m Digitalisierung UB Regensburg |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=015576928&sequence=000003&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 999 | |a oai:aleph.bib-bvb.de:BVB01-015576928 | ||
Datensatz im Suchindex
| DE-BY-863_location | 1911 |
|---|---|
| DE-BY-FWS_call_number | 1911/2015:555 |
| DE-BY-FWS_katkey | 295538 |
| DE-BY-FWS_media_number | 083100986795 |
| _version_ | 1806175914701094912 |
| adam_text | Inhalt
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
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
1.3.3 Internet Explorer 7 ........................................................ 28
1.3.4 Die Mozilla-Familie: Firefox und Netscape &
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)HTMLund Doctype................................................................. 31
1.4.1 Darstellungsmodi .......................................................... 32
1.4.2 Semantischer Code....................................................... 34
1.5 Browserweichen .......................................................................... 37
1.5.1 (fJimport-Regel ............................................................. 38
1.5.2 @media-Regel .............................................................. 38
1.5.3 Trickreiche Kommentare für den
1.5.4
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
Inhalt
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
1.7.5 Hinweise zum
2 Der Weg zu robusten, flexiblen Layouts .........
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
min-Anax-width ............................................................ 58
2.4.2
2.5 Das Box-Modell ........................................................................... 62
2.5.1 Das Box-Model! des Internet Explorers ......................... 64
2.5.2 Der Box-Modell-Hack ................................................... 65
2.5.3 Anwendungsgrenzen des Box-Modell
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
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
2.9.1
2.9.2 position:relative ............................................................ 80
Inhalt
2.9.3 position. absolute .........................................,................ 81
2.9.4 positioirfixed ................................................................ 82
2.9.5 positionirelative + 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
2.10.1 Grundlagen im Umgang mit
2.10.2 Zwei Spalten mit
2.10.3 Drei Spalten mit
2.10.4 Globale und lokale Wirkung der Eigenschaft
2.11 Markupfreies Clearen von
2.11.1 Die Clearfix-Methode.................................................... 100
2.11.2 Die Overflow-Methode ................................................. 102
2.11.3 Clearing mittels eines zusätzlichen
2.12 Flexible Layouts mit
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
2.13.3 lE-Peekaboo-Bug........................................................ 119
2.13.4
2.13.5
2.13.6 lE/Win-Escaping-Floats-Bug ....................................... 124
2.13.7 IE/Win-3-Pixel-Jog-Bug .............................................. 126
2.13.8
2.13.9
2.13.10
2.13.11
2.13.12
2.14
2.14.1 Neuerungen der
2.14.2 CSS-Bugs im IE7 ............................................................ 138
2.15 CSS-Bugs in Mozilla,
2.15.1 Mozilla und Firefox -
2.15.2
2.15.3
2.16 Gestaltung von
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
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:
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 Quelitexts ........................................... 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
3.4.4 Grafikfreie Trennlinien und Spaltenhintergründe im
Basis-Layout.................................................................. 172
Inhalt
3.4.5
Skip-Link
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
3.5.6 Navigationselemente .................................................... 203
Horizontale Listennavigation
Horizontale Listennavigation
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
Inhalt
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
3.7.2 JavaScriptftod.js ........................................................... 233
3.7.3
4 Layoutentwicklung mit YAML
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
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
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 Spaitentrenner ............................................. 272
4.5.6
4.5.7 Grafische Umrandungen flexibler Layouts...................... 276
10
Inhalt
4.6 Ausgewählte Beispiellayouts ........................................................ 281
4.6.1 Layoutentwurf »2coljeft_vlines«................................... 281
4.6.2 Layoutentwurf »2col_right__vlines«................................. 285
4.6.3 Weitere Kombinationen für 2-S palte
4.6.4 Layoutentwurf »3col_fixed«........................................... 289
4.7 Aufbereitung der Inhalte.............................................................. 293
4.7.1 Markupfreies
4.7.2 Beispiele zum Clearing mit .floatbox.............................. 293
4.8
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
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.1 Praktische Tipps zum Grafikeinsatz............................................... 307
5.1.1 Skalierbare Bilder mit CSS ............................................. 307
5.1.2 Image
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
5.3.4 Screenshot-Generatoren ............................................... 321
EBBĐ
6.1 Begriffe ........................................................................................ 324
6.2 Was ist TypoScript?...................................................................... 324
6.3 Die beiden Template-Varianten ................................................... 325
6 YAML und TYPO3 -
11
Inhalt
6.3.1 Die ¡mportierbare t3d Datei .......................................... 325
6.3.2 Das Komplettpaket ....................................................... 326
6.4 Von der HTML-Vorlage zum TYPCB-Template............................. 326
6.4.1 Arbeitsteilung ............................................................... 326
6.4.2 Arbeitsablauf................................................................. 327
6.5 TYPO3
6.5.1 Notwendige
6.5.2 Optionale
6.6 Der
6.6.1 Vorbereitungen ............................................................. 328
6.6.2 Backend-Sprachen auswählen und Übersetzungen
herunterladen ............................................................... 329
6.6.3
6.6.4 Fehlermeldungen beim Installieren von
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
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
6.8.7 Das Haupt-Template ..................................................... 342
6.8.8 Erweiterungs-Templates ................................................ 345
6.8.9 Der SysOrdner Template
6.8.10 Der
6.8.11 TSconfig........................................................................ 360
7 YAML und TYPO3 in der Praxis................................................ 365
7.1 Eine neue Seite anlegen ............................................................... 365
7.2 Seiteninhalt anlegen .................................................................... 368
7.3 Der Rieh Text Editor
7.3.1 Die wichtigsten Bedienelemente ................................... 371
7.3.2 Besonderheiten ............................................................. 374
7.3.3 Bilder und Grafiken im
7.3.4 Das Inhaltselement »Text mit Bild«................................ 378
7.4 Arbeiten mit Benutzergruppen und Redakteuren ......................... 380
7.4.1 Dateifreigabe einrichten ................................................ 380
12
Inhalt
8 YAML und xfcCommerce
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.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
8.2 Praktische Überlegungen ............................................................. 398
ЩЯШШШШЩЕШЯШЯШЯШШШШШЯШКШШШШШШШ^І
A
В
Index............................................................................................................ 407
Anhang .......
|
| adam_txt |
Inhalt
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
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
1.3.3 Internet Explorer 7 . 28
1.3.4 Die Mozilla-Familie: Firefox und Netscape &
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)HTMLund Doctype. 31
1.4.1 Darstellungsmodi . 32
1.4.2 Semantischer Code. 34
1.5 Browserweichen . 37
1.5.1 (fJimport-Regel . 38
1.5.2 @media-Regel . 38
1.5.3 Trickreiche Kommentare für den
1.5.4
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
Inhalt
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
1.7.5 Hinweise zum
2 Der Weg zu robusten, flexiblen Layouts .
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
min-Anax-width . 58
2.4.2
2.5 Das Box-Modell . 62
2.5.1 Das Box-Model! des Internet Explorers . 64
2.5.2 Der Box-Modell-Hack . 65
2.5.3 Anwendungsgrenzen des Box-Modell
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
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
2.9.1
2.9.2 position:relative . 80
Inhalt
2.9.3 position.'absolute .,. 81
2.9.4 positioirfixed . 82
2.9.5 positionirelative + 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
2.10.1 Grundlagen im Umgang mit
2.10.2 Zwei Spalten mit
2.10.3 Drei Spalten mit
2.10.4 Globale und lokale Wirkung der Eigenschaft
2.11 Markupfreies Clearen von
2.11.1 Die Clearfix-Methode. 100
2.11.2 Die Overflow-Methode . 102
2.11.3 Clearing mittels eines zusätzlichen
2.12 Flexible Layouts mit
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
2.13.3 lE-Peekaboo-Bug. 119
2.13.4
2.13.5
2.13.6 lE/Win-Escaping-Floats-Bug . 124
2.13.7 IE/Win-3-Pixel-Jog-Bug . 126
2.13.8
2.13.9
2.13.10
2.13.11
2.13.12
2.14
2.14.1 Neuerungen der
2.14.2 CSS-Bugs im IE7 . 138
2.15 CSS-Bugs in Mozilla,
2.15.1 Mozilla und Firefox -
2.15.2
2.15.3
2.16 Gestaltung von
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
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:
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 Quelitexts . 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
3.4.4 Grafikfreie Trennlinien und Spaltenhintergründe im
Basis-Layout. 172
Inhalt
3.4.5
Skip-Link
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
3.5.6 Navigationselemente . 203
Horizontale Listennavigation
Horizontale Listennavigation
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
Inhalt
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
3.7.2 JavaScriptftod.js . 233
3.7.3
4 Layoutentwicklung mit YAML
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
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
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 Spaitentrenner . 272
4.5.6
4.5.7 Grafische Umrandungen flexibler Layouts. 276
10
Inhalt
4.6 Ausgewählte Beispiellayouts . 281
4.6.1 Layoutentwurf »2coljeft_vlines«. 281
4.6.2 Layoutentwurf »2col_right_vlines«. 285
4.6.3 Weitere Kombinationen für 2-S palte
4.6.4 Layoutentwurf »3col_fixed«. 289
4.7 Aufbereitung der Inhalte. 293
4.7.1 Markupfreies
4.7.2 Beispiele zum Clearing mit .floatbox. 293
4.8
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
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.1 Praktische Tipps zum Grafikeinsatz. 307
5.1.1 Skalierbare Bilder mit CSS . 307
5.1.2 Image
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
5.3.4 Screenshot-Generatoren . 321
EBBĐ
6.1 Begriffe . 324
6.2 Was ist TypoScript?. 324
6.3 Die beiden Template-Varianten . 325
6 YAML und TYPO3 -
11
Inhalt
6.3.1 Die ¡mportierbare t3d Datei . 325
6.3.2 Das Komplettpaket . 326
6.4 Von der HTML-Vorlage zum TYPCB-Template. 326
6.4.1 Arbeitsteilung . 326
6.4.2 Arbeitsablauf. 327
6.5 TYPO3
6.5.1 Notwendige
6.5.2 Optionale
6.6 Der
6.6.1 Vorbereitungen . 328
6.6.2 Backend-Sprachen auswählen und Übersetzungen
herunterladen . 329
6.6.3
6.6.4 Fehlermeldungen beim Installieren von
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
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
6.8.7 Das Haupt-Template . 342
6.8.8 Erweiterungs-Templates . 345
6.8.9 Der SysOrdner Template
6.8.10 Der
6.8.11 TSconfig. 360
7 YAML und TYPO3 in der Praxis. 365
7.1 Eine neue Seite anlegen . 365
7.2 Seiteninhalt anlegen . 368
7.3 Der Rieh Text Editor
7.3.1 Die wichtigsten Bedienelemente . 371
7.3.2 Besonderheiten . 374
7.3.3 Bilder und Grafiken im
7.3.4 Das Inhaltselement »Text mit Bild«. 378
7.4 Arbeiten mit Benutzergruppen und Redakteuren . 380
7.4.1 Dateifreigabe einrichten . 380
12
Inhalt
8 YAML und xfcCommerce
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.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
8.2 Praktische Überlegungen . 398
ЩЯШШШШЩЕШЯШЯШЯШШШШШЯШКШШШШШШШ^І
A
В
Index. 407
Anhang . |
| any_adam_object | 1 |
| any_adam_object_boolean | 1 |
| author | Jesse, Dirk |
| author_facet | Jesse, Dirk |
| author_role | aut |
| author_sort | Jesse, Dirk |
| author_variant | d j dj |
| building | Verbundindex |
| bvnumber | BV022367696 |
| classification_rvk | ST 252 ST 253 |
| ctrlnum | (OCoLC)180147806 (DE-599)BVBBV022367696 |
| dewey-full | 006.76 |
| dewey-hundreds | 000 - Computer science, information, general works |
| dewey-ones | 006 - Special computer methods |
| dewey-raw | 006.76 |
| dewey-search | 006.76 |
| dewey-sort | 16.76 |
| dewey-tens | 000 - Computer science, information, general works |
| discipline | Informatik |
| discipline_str_mv | Informatik |
| edition | 1. Aufl., 1. korr. Nachdr. |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>01803nam a2200409 c 4500</leader><controlfield tag="001">BV022367696</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20071122 </controlfield><controlfield tag="007">t</controlfield><controlfield tag="008">070327s2007 gw ad|| |||| 00||| ger d</controlfield><datafield tag="015" ind1=" " ind2=" "><subfield code="a">07,N01,0045</subfield><subfield code="2">dnb</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783898428378</subfield><subfield code="c">Gb. : EUR 29.90, EUR 30.80 (AT), sfr 49.90</subfield><subfield code="9">978-3-89842-837-8</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">3898428370</subfield><subfield code="c">Gb. : EUR 29.90, EUR 30.80 (AT), sfr 49.90</subfield><subfield code="9">3-89842-837-0</subfield></datafield><datafield tag="024" ind1="3" ind2=" "><subfield code="a">9783898428378</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)180147806</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)BVBBV022367696</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rakddb</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">ger</subfield></datafield><datafield tag="044" ind1=" " ind2=" "><subfield code="a">gw</subfield><subfield code="c">XA-DE-NW</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-20</subfield><subfield code="a">DE-355</subfield><subfield code="a">DE-92</subfield><subfield code="a">DE-M347</subfield><subfield code="a">DE-1102</subfield><subfield code="a">DE-863</subfield><subfield code="a">DE-1051</subfield><subfield code="a">DE-858</subfield><subfield code="a">DE-634</subfield></datafield><datafield tag="082" ind1="0" ind2=" "><subfield code="a">006.76</subfield><subfield code="2">22/ger</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 253</subfield><subfield code="0">(DE-625)143628:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Jesse, Dirk</subfield><subfield code="e">Verfasser</subfield><subfield code="4">aut</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">CSS-Layouts</subfield><subfield code="b">Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3]</subfield><subfield code="c">Dirk Jesse</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">1. Aufl., 1. korr. Nachdr.</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Galileo Press</subfield><subfield code="c">2007</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">414 S.</subfield><subfield code="b">Ill., graph. Darst.</subfield><subfield code="e">1 CD-ROM (12 cm), 1 Referenzkt.</subfield></datafield><datafield tag="336" ind1=" " ind2=" "><subfield code="b">txt</subfield><subfield code="2">rdacontent</subfield></datafield><datafield tag="337" ind1=" " ind2=" "><subfield code="b">n</subfield><subfield code="2">rdamedia</subfield></datafield><datafield tag="338" ind1=" " ind2=" "><subfield code="b">nc</subfield><subfield code="2">rdacarrier</subfield></datafield><datafield tag="490" ind1="0" ind2=" "><subfield code="a">Galileo Computing</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Cascading Style Sheets</subfield><subfield code="0">(DE-588)4467617-7</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="689" ind1="0" ind2="0"><subfield code="a">Cascading Style Sheets</subfield><subfield code="0">(DE-588)4467617-7</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Regensburg</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=015576928&sequence=000003&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="999" ind1=" " ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-015576928</subfield></datafield></record></collection> |
| id | DE-604.BV022367696 |
| illustrated | Illustrated |
| index_date | 2024-07-02T17:05:49Z |
| indexdate | 2024-08-01T11:13:00Z |
| institution | BVB |
| isbn | 9783898428378 3898428370 |
| language | German |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-015576928 |
| oclc_num | 180147806 |
| open_access_boolean | |
| owner | DE-20 DE-355 DE-BY-UBR DE-92 DE-M347 DE-1102 DE-863 DE-BY-FWS DE-1051 DE-858 DE-634 |
| owner_facet | DE-20 DE-355 DE-BY-UBR DE-92 DE-M347 DE-1102 DE-863 DE-BY-FWS DE-1051 DE-858 DE-634 |
| physical | 414 S. Ill., graph. Darst. 1 CD-ROM (12 cm), 1 Referenzkt. |
| publishDate | 2007 |
| publishDateSearch | 2007 |
| publishDateSort | 2007 |
| publisher | Galileo Press |
| record_format | marc |
| series2 | Galileo Computing |
| spellingShingle | Jesse, Dirk CSS-Layouts Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] Cascading Style Sheets (DE-588)4467617-7 gnd |
| subject_GND | (DE-588)4467617-7 |
| title | CSS-Layouts Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] |
| title_auth | CSS-Layouts Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] |
| title_exact_search | CSS-Layouts Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] |
| title_exact_search_txtP | CSS-Layouts Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] |
| title_full | CSS-Layouts Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] Dirk Jesse |
| title_fullStr | CSS-Layouts Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] Dirk Jesse |
| title_full_unstemmed | CSS-Layouts Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] Dirk Jesse |
| title_short | CSS-Layouts |
| title_sort | css layouts praxislosungen mit yaml grundlagen praxiseinsatz und integration schnell zu robusten und flexiblen css layouts alle wichtigen browser bugs von ie 5 bis ie 7 inkl einsatz in typo3 |
| title_sub | Praxislösungen mit YAML ; [Grundlagen, Praxiseinsatz und Integration ; schnell zu robusten und flexiblen CSS-Layouts ; alle wichtigen Browser-Bugs von IE 5 bis IE 7 ; inkl. Einsatz in TYPO3] |
| topic | Cascading Style Sheets (DE-588)4467617-7 gnd |
| topic_facet | Cascading Style Sheets |
| url | http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=015576928&sequence=000003&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT jessedirk csslayoutspraxislosungenmityamlgrundlagenpraxiseinsatzundintegrationschnellzurobustenundflexiblencsslayoutsallewichtigenbrowserbugsvonie5bisie7inkleinsatzintypo3 |
Inhaltsverzeichnis
THWS Würzburg Magazin
| Signatur: |
1911 2015:555 |
|---|---|
| Exemplar 1 | ausleihbar Verfügbar Bestellen |