CSS-Layouts: Praxislösungen mit YAML
Gespeichert in:
| 1. Verfasser: | |
|---|---|
| Format: | Buch |
| Sprache: | German |
| Veröffentlicht: |
Bonn
Galileo Press
2007
|
| Ausgabe: | 1. Aufl. |
| Schlagworte: | |
| Online-Zugang: | Inhaltstext Inhaltsverzeichnis |
| Beschreibung: | 414 S. Ill., graph. Darst. 1 CD-ROM (12cm)+ 1 Beil. |
| ISBN: | 9783898428378 3898428370 |
Internformat
MARC
| LEADER | 00000nam a2200000 c 4500 | ||
|---|---|---|---|
| 001 | BV022215976 | ||
| 003 | DE-604 | ||
| 005 | 20070327 | ||
| 007 | t | ||
| 008 | 070108s2007 gw ad|| |||| 00||| ger d | ||
| 015 | |a 07,N01,0045 |2 dnb | ||
| 016 | 7 | |a 982212003 |2 DE-101 | |
| 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)634762240 | ||
| 035 | |a (DE-599)BVBBV022215976 | ||
| 040 | |a DE-604 |b ger |e rakddb | ||
| 041 | 0 | |a ger | |
| 044 | |a gw |c XA-DE-NW | ||
| 049 | |a DE-739 |a DE-Aug4 |a DE-Di1 |a DE-83 | ||
| 082 | 0 | |a 006.76 |2 22/ger | |
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 084 | |a 004 |2 sdnb | ||
| 100 | 1 | |a Jesse, Dirk |e Verfasser |4 aut | |
| 245 | 1 | 0 | |a CSS-Layouts |b Praxislösungen mit YAML |c Dirk Jesse |
| 250 | |a 1. Aufl. | ||
| 264 | 1 | |a Bonn |b Galileo Press |c 2007 | |
| 300 | |a 414 S. |b Ill., graph. Darst. |e 1 CD-ROM (12cm)+ 1 Beil. | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 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 | |q text/html |u http://deposit.dnb.de/cgi-bin/dokserv?id=2884743&prov=M&dok_var=1&dok_ext=htm |3 Inhaltstext |
| 856 | 4 | 2 | |m Digitalisierung UB Passau |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=015427271&sequence=000002&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 943 | 1 | |a oai:aleph.bib-bvb.de:BVB01-015427271 | |
Datensatz im Suchindex
| _version_ | 1805088585895903232 |
|---|---|
| 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.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
1.3.2 Internet Explorer 5/Mac. 28
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
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 YAML-Framework . 49
1.7.5 Hinweise zum TYPCe-Template . 49
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
2.4.2
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
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 position.static . 80
2.9.2 position:relative. 80
Inhalt
2.9.3 position:absolute . 81
2.9.4
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
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
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 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
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
2.15
2.15.1 Mozilla und Firefox -
2.15.2
2.15.3
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
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
Robustheitim 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 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
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 JavaScript ftod.js . 233
3.7.3
ЯШШШВЯШШ
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
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
4.5.7 Grafische Umrandungen flexibler Layouts. 276
10
Inhalt
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
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
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
6.1 Begriffe. 324
6.2 Was ist TypoScript?. 324
6.3 Die beiden Template Varianten . 325
Inhalt
6.3.1 Die importierbare t3d Datei . 325
6.3.2 Das Komplettpaket. 326
6.4 Von der HTML-Vorlage zum
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 TYPCe-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
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.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
УАЛАІ'
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
ii
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 |
| 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.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
1.3.2 Internet Explorer 5/Mac. 28
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
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 YAML-Framework . 49
1.7.5 Hinweise zum TYPCe-Template . 49
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
2.4.2
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
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 position.static . 80
2.9.2 position:relative. 80
Inhalt
2.9.3 position:absolute . 81
2.9.4
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
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
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 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
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
2.15
2.15.1 Mozilla und Firefox -
2.15.2
2.15.3
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
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
Robustheitim 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 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
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 JavaScript ftod.js . 233
3.7.3
ЯШШШВЯШШ
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
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
4.5.7 Grafische Umrandungen flexibler Layouts. 276
10
Inhalt
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
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
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
6.1 Begriffe. 324
6.2 Was ist TypoScript?. 324
6.3 Die beiden Template Varianten . 325
Inhalt
6.3.1 Die importierbare t3d Datei . 325
6.3.2 Das Komplettpaket. 326
6.4 Von der HTML-Vorlage zum
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 TYPCe-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
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.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
УАЛАІ'
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
ii
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 |
| 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 | BV022215976 |
| classification_rvk | ST 252 |
| ctrlnum | (OCoLC)634762240 (DE-599)BVBBV022215976 |
| 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. |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>00000nam a2200000 c 4500</leader><controlfield tag="001">BV022215976</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20070327</controlfield><controlfield tag="007">t</controlfield><controlfield tag="008">070108s2007 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="016" ind1="7" ind2=" "><subfield code="a">982212003</subfield><subfield code="2">DE-101</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)634762240</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)BVBBV022215976</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-739</subfield><subfield code="a">DE-Aug4</subfield><subfield code="a">DE-Di1</subfield><subfield code="a">DE-83</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">004</subfield><subfield code="2">sdnb</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</subfield><subfield code="c">Dirk Jesse</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">1. Aufl.</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 (12cm)+ 1 Beil.</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="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="q">text/html</subfield><subfield code="u">http://deposit.dnb.de/cgi-bin/dokserv?id=2884743&prov=M&dok_var=1&dok_ext=htm</subfield><subfield code="3">Inhaltstext</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Passau</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=015427271&sequence=000002&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="943" ind1="1" ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-015427271</subfield></datafield></record></collection> |
| id | DE-604.BV022215976 |
| illustrated | Illustrated |
| index_date | 2024-07-02T16:27:21Z |
| indexdate | 2024-07-20T09:10:22Z |
| institution | BVB |
| isbn | 9783898428378 3898428370 |
| language | German |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-015427271 |
| oclc_num | 634762240 |
| open_access_boolean | |
| owner | DE-739 DE-Aug4 DE-Di1 DE-83 |
| owner_facet | DE-739 DE-Aug4 DE-Di1 DE-83 |
| physical | 414 S. Ill., graph. Darst. 1 CD-ROM (12cm)+ 1 Beil. |
| publishDate | 2007 |
| publishDateSearch | 2007 |
| publishDateSort | 2007 |
| publisher | Galileo Press |
| record_format | marc |
| spelling | Jesse, Dirk Verfasser aut CSS-Layouts Praxislösungen mit YAML Dirk Jesse 1. Aufl. Bonn Galileo Press 2007 414 S. Ill., graph. Darst. 1 CD-ROM (12cm)+ 1 Beil. txt rdacontent n rdamedia nc rdacarrier Cascading Style Sheets (DE-588)4467617-7 gnd rswk-swf Cascading Style Sheets (DE-588)4467617-7 s DE-604 text/html http://deposit.dnb.de/cgi-bin/dokserv?id=2884743&prov=M&dok_var=1&dok_ext=htm Inhaltstext Digitalisierung UB Passau application/pdf http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=015427271&sequence=000002&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA Inhaltsverzeichnis |
| spellingShingle | Jesse, Dirk CSS-Layouts Praxislösungen mit YAML Cascading Style Sheets (DE-588)4467617-7 gnd |
| subject_GND | (DE-588)4467617-7 |
| title | CSS-Layouts Praxislösungen mit YAML |
| title_auth | CSS-Layouts Praxislösungen mit YAML |
| title_exact_search | CSS-Layouts Praxislösungen mit YAML |
| title_exact_search_txtP | CSS-Layouts Praxislösungen mit YAML |
| title_full | CSS-Layouts Praxislösungen mit YAML Dirk Jesse |
| title_fullStr | CSS-Layouts Praxislösungen mit YAML Dirk Jesse |
| title_full_unstemmed | CSS-Layouts Praxislösungen mit YAML Dirk Jesse |
| title_short | CSS-Layouts |
| title_sort | css layouts praxislosungen mit yaml |
| title_sub | Praxislösungen mit YAML |
| topic | Cascading Style Sheets (DE-588)4467617-7 gnd |
| topic_facet | Cascading Style Sheets |
| url | http://deposit.dnb.de/cgi-bin/dokserv?id=2884743&prov=M&dok_var=1&dok_ext=htm http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=015427271&sequence=000002&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT jessedirk csslayoutspraxislosungenmityaml |