CSS-Layouts

Document Sample
CSS-Layouts Powered By Docstoc
					Auf einen Blick

    Geleitwort des Fachgutachters ...............................                 15

    Vorwort ...................................................................   17

1   Philosophie guten Webdesigns ..............................                   21

2   Der Weg zu robusten, flexiblen Layouts .................                      51

3   Das YAML-Framework ............................................ 153

4   Layoutentwicklung mit YAML ................................. 235

5   Tipps und Tricks ...................................................... 307

6   YAML und TYPO3 – die Theorie .............................. 323

7   YAML und TYPO3 in der Praxis ............................... 365

8   YAML und xt:Commerce .......................................... 391

A   Inhalt der CD-ROM ................................................. 403

B   Die Referenzkarte .................................................... 405

    Index ........................................................................ 407
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 ............................................... 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




                                                                                                                    5
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 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



6
                                                                                                   Inhalt




       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 mit floats ............................................................     105
       2.12.1 Beeinflussung der Spaltenreihenfolge ............................                     106
       2.12.2 Gleichlange Spalten .......................................................           111
       2.12.3 Strukurunabhä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 IE/Win – Guillotine-Bug ................................................              117
       2.13.3 IE – Peekaboo-Bug ........................................................            119
       2.13.4 IE/Win – Unscrollable-Content-Bug ...............................                     121
       2.13.5 IE – Doubled-Float-Margin-Bug ....................................                    123
       2.13.6 IE/Win – Escaping-Floats-Bug .......................................                  124
       2.13.7 IE/Win – 3-Pixel-Jog-Bug ..............................................               126
       2.13.8 IE/Win – Italics-Bug ......................................................           127
       2.13.9 IE – Expanding Box Problem ..........................................                 129
       2.13.10 IE/Win – Disappearing-List-Background-Bug .................                          133
       2.13.11 IE – Extreme-Font-Size-Bug ...........................................               134
       2.13.12 IE – 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




                                                                                                       7
    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   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 IE-Clearings ......................                     171
           3.4.4     Grafikfreie Trennlinien und Spaltenhintergründe im
                     Basis-Layout ..................................................................   172
                                                                                                  Inhalt




      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 Listennavigation »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




                                                                                                      9
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 Dreamweaver ..................................                       232
            3.7.2     JavaScript ftod.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
                                                                                                         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 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 Valider Code .................................................................          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 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


6   YAML und TYPO3 – die Theorie ............................................... 323
    6.1     Begriffe ........................................................................................ 324
    6.2     Was ist TypoScript? ...................................................................... 324
    6.3     Die beiden Template Varianten ................................................... 325



                                                                                                              11
Inhalt




            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    YAML und TYPO3 in der Praxis ................................................ 365
     7.1    Eine neue Seite anlegen ...............................................................     365
     7.2    Seiteninhalt anlegen ....................................................................   368
     7.3    Der Rich 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
                                                                                                              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


8    YAML und xt:Commerce .......................................................... 391
     8.1       Template-Erstellung mit xt:Commerce – 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    Inline PHP-Code in der Datei index.html .......................                         393
     8.2       Praktische Überlegungen .............................................................            398


Anhang ........................................................................................... 401
A    Inhalt der CD-ROM ................................................................................ 403
B    Die Referenzkarte ................................................................................... 405

Index ............................................................................................................ 407




                                                                                                                   13
Geleitwort des Fachgutachters



Das Internet als Kommunikationsmedium ist noch sehr jung, dennoch hat es eine
sehr bewegte Vergangenheit. Geschaffen wurde das »World Wide Web« als
Oberfläche für den wissenschaftlichen Austausch. Niemand dachte damals an das
Internet als weltweites Kommunikations- und Werbemedium für Jedermann.
Niemand dachte, dass das Web einmal integraler Bestandteil ganzer Geschäfts-
modelle werden würde und dass Menschen sich professionell mit der Erstellung
von Webseiten beschäftigen würden. Der Internetboom glich einer Goldgräber-
stimmung, nur dass die Werkzeuge nicht professionell, sondern selbst entwickelt
waren. Niemand konnte auf profundes HTML-Wissen zurückgreifen. Zudem war
nicht nur das damalige HTML semantisch weitaus ärmer als heute, die Browser
interpretierten auch noch weniger der zur Verfügung stehenden schmalen Stan-
dards, als sie es heute tun.

Es wurde mit Tricks und Kniffen gearbeitet um ein ansehnliches Ergebnis zu
erzielen. Vergleichsmaßstab war dabei das Bekannte, das Druckerzeugnis.
Gerade wenn es um Optik und das Erstellen von Seiten ging, wurde das Internet
nicht als eigenständiges Medium wahrgenommen. Man entwarf die Seiten inner-
halb eines meist recht komplexen Tabellenrasters. Erst der gewonnene »Browser-
krieg« durch Microsoft machte es möglich, Internetseiten ohne Tabellenraster zu
erstellen, denn der miserable Netscape 4 verlor stark an Marktanteil. Aus heuti-
ger Sicht ist es grotesk, dass der Internet Explorer die Tür zu modernem Webde-
sign aufstieß. Spätestens seit 2001 ist es seitens der Browser kein Problem, Web-
seiten zu interpretieren, deren Struktur und Layout getrennt in HTML und CSS
erstellt werden. Der größte Problemfaktor sitzt hierbei vor dem Bildschirm: die
meisten Webdesigner und Webentwickler scheinen sich nicht weiterzuentwi-
ckeln. Das Wissen über modernes Webdesign ist noch immer sehr rar gesät, trotz
einer sehr aktiven Weblogger-Kultur und immer mehr guter Bücher zum Thema.
In den letzten Jahren gab es immer wieder Ansätze, die Entwicklung moderner
Webseiten durch die Nutzung sogenannter Frameworks zu vereinfachen. Man
versprach sich, dadurch die Entwicklung einer Weboberfläche damit genauso zu
vereinfachen, wie die Entwicklung von PHP-Applikationen durch PHP-Frame-
works vereinfacht wurde. Die Erstellung von Weboberflächen würde mittels
eines Frameworks nicht zum Kinderspiel werden, aber doch wesentlich einfa-
cher. Denn das größte Problem eines jeden Webentwicklers bleiben die Browser,
vor allem der Internet Explorer.




                                                                              15
Geleitwort des Fachgutachters




      Auch der Autor dieses Buches – Dirk Jesse – wollte sich die Arbeit erleichtern und
      einen Baukasten für selbst zu entwickelnde Seiten erstellen. Über diese Idee
      kamen wir ins Gespräch und tauschten fortan Links, Meinungen, Denkansätze
      und vieles mehr aus. Dirk schaffte alleine in relativ kurzer Zeit das, was neben
      ihm nur Yahoo! als Firma mit vielen Angestellten schaffte: die Konstruktion eines
      eigenen Frameworks zur Erstellung von Weboberflächen. Im Gegensatz zu Grids
      von Yahoo! war sein YAML von Anfang sehr gut dokumentiert und ist bis heute
      eine Fundgrube für wichtige Problemlösungen. Es freut mich, dass Dirk sich der
      Mühe unterzogen hat, in diesem Buch nicht nur YAML zu dokumentieren, son-
      dern uns alle an seinem großen Wissen über Browserbugs und Ansätze moder-
      nen Webdesigns teilhaben zu lassen. Mittels dieses Buches und des darin
      beschriebenen Frameworks sollte es nun jedem möglich sein, seine Webseiten
      modern und damit in Struktur und Design getrennt zu erstellen.

      Jens Grochtdreis arbeitet als Senior Frontend Engineer bei SinnerSchraderStu-
      dios Frankfurt. Er engagiert sich als Gründer der Webkrauts (www.web-
      krauts.de) und Betreiber der CSS-FAQ (www.css-faq.de) um die Verbreitung von
      Wissen über modernes Webdesign. Sein Wissen verbreitet er auch über sein
      Weblog (blog.grochtdreis.de).

      Jens Grochtdreis
      Frankfurt am Main




      16
Vorwort



Angefangen hat alles im März 2005. Damals stand ich vor der Aufgabe, in kurzer
Zeit zwei relativ ähnliche CSS-Layouts zu entwerfen. Gedrängt vom Zeitdruck
und angestachelt von dem Gedanken, beiden ein gemeinsames Grundgerüst zu
geben, war dies die Geburtsstunde eines flexiblen Basis-Layouts, das sich später
zur Grundlage des YAML-Frameworks entwickeln sollte. Vermutlich war es rein
zufällig genau der richtige Zeitpunkt für den Start. Der Firefox-Browser, der
jüngste Spross der Mozilla-Familie, war ein knappes halbes Jahr zuvor in der Ver-
sion 1.0 erschienen und begann seinen rasanten Aufstieg. Das beflügelte offen-
sichtlich auch die weltweite Webstandards-Gemeinde, die zur gleichen Zeit inte-
ressante neue Layouttechniken entwickelte und in zahlreichen Artikeln
veröffentlichte.

Dass ich mit YAML etwas entworfen hatte, dass sich von den üblichen im Inter-
net veröffentlichten CSS-Templates unterschied, wurde mir erst eine Weile nach
der Veröffentlichung meines ersten Entwurfes im Oktober 2005 bewusst.
Zunächst war ich nur überrascht vom großen Feedback und den zahlreichen Fra-
gen. Die folgenden Monate waren außerordentlich spannend und enthielten
einige Grundsatzdiskussionen mit verschiedenen Kollegen der Webstandards-
Bewegung. Erst in einer dieser Diskussionen um die Jahreswende fiel letztlich
der Begriff »Framework«, der zusammen mit einer überarbeiteten Dokumenta-
tion der Version 2.0 half, die in YAML steckenden Ideen besser zu erklären und
damit Anwendern einfacher zugänglich zu machen.



Was erwartet Sie in diesem Buch?
Dieses Buch wendet sich grundsätzlich an alle, die an CSS-Layouts auf der Grund-
lage von Webstandards interessiert sind.

Im ersten Teil des Buches (Kapitel 1 und 2) werden die Grundlagen für die Erstel-
lung moderner, barrierearmer CSS-Layouts besprochen. Dieser Teil bietet Ein-
steigern einen schrittweisen Zugang zur Layoutentwicklung mit CSS, während
sich die umfassende Referenz der Parsing- und CSS-Bugs des Internet Explorers
an Fortgeschrittene und CSS-Profis richtet. Gleichzeitig liefert dieser Teil den
fachlichen Hintergrund für den nachfolgenden Hauptteil.




                                                                               17
Vorwort




     Kapitel 3 und 4 stehen ganz im Zeichen des YAML-Frameworks. In Kapitel 3 wer-
     den alle Bestandteile des Frameworks ausführlich beschrieben bevor sich Kapitel
     4 den vielfältigen praktischen Anwendungsmöglichkeiten des Frameworks wid-
     met. YAML-Anwender erhalten hier alle wichtigen Informationen rund um das
     Framework sowie zahlreiche Inspirationen für die Anwendung. Den Abschluss
     des zweiten Teils bildet das Kapitel 5 mit praktischen Tipps und Hinweisen zu
     nützlichen Enwickler-Werkzeugen.

     Der dritte Teil des Buches (Kapitel 6 bis 8) bietet einen Einstieg in Arbeitsweise
     von TYPO3 und xt:Commerce und beschäftigt sich mit der Integration des YAML-
     Frameworks in diese beiden Systeme.



     Softlinks
     Durch die Softlinks können Sie bequem den im Text befindlichen Hyperlinks fol-
     gen ohne sie abtippen zu müssen. Das Web ist ständigen Aktualisierungen unter-
     worfen und auf diese Weise sind alle Hyperlinks stets aktuell. Besuchen Sie bitte
     unsere Webseiten unter den URLs http://www.yaml.de oder http://yaml.
     t3net.de/. Dort geben Sie den Softlink einfach in das auf der Startseite befindli-
     che Formular ein und gelangen dadurch sehr schnell zum gewünschten Link.



     Ein großes Dankeschön
     Bedanken möchte ich mich als erstes bei Jana – der Frau, die ich im Juni dieses
     Jahres geheiratet habe. Obwohl sie bereits im Verlauf der Entwicklung von
     YAML oft genug auf mich verzichten musste, während ich mich in den Tiefen
     und Untiefen des CSS-Designs herum trieb, hat sie mir auch während der Arbeit
     an diesem Buch jederzeit den Rücken gestärkt.

     Besonderer Dank geht an Jens Grochtdreis. Er hat meine Arbeit am Manuskript
     mit zahlreichen Tipps und kritischen Hinweisen als fachlicher Lektor begleitet. Er
     war zudem die treibende Kraft, die mich zur Veröffentlichung der ersten YAML-
     Version im Oktober 2005 angeregt hat. Ich danke weiter Ulrich van Stipriaan, der
     mich immer wieder von meinen Abwegen zurück auf den tugendhaften Pfad der
     deutschen Sprache geführt hat, sowie Sven Kausche, der mir während der letzten
     Tage der Manuskripterstellung auch zu unmöglichen Zeiten helfend zur Seite
     stand.

     Ein riesengroßes Dankeschön gilt meinem Co-Autor Dieter Bunkerd und seinem
     Kollegen Detlef Schäbel bei T3Net.de, die beide mit einem unglaublichen Enthu-



     18
                                                                               Vorwort




siasmus hinter dem YAML-Projekt stehen und mit der Arbeit am TYPO3-Temp-
late einen entscheidenden Anteil am Erfolg haben.

Gleiches gilt für Reinhard Hiebl, der sich der Integration von YAML in das CMS
Joomla widmet. Sowohl Dieter Bunkerd als auch Reinhard Hiebl unterstützen
mich seit langem bei der Moderation der YAML-Support-Foren.

Zum Abschluss danke ich allen Beteiligten bei Galileo Press, die dieses Buch erst
ermöglicht haben.

Dirk Jesse
Dresden




                                                                              19
                                                                 Browserweichen    1.5



   http://www.einfach-fuer-alle.de/artikel/efa-relaunch/2006/teil2/
   (Softlink 110)
   http://www.vorsprungdurchwebstandards.de/theory/retro-coding/
   (Softlink 111)
   http://www.vorsprungdurchwebstandards.de/theory/semantischer-code/
   (Softlink 112)



1.5     Browserweichen
Die Feinheiten von CSS führen in den verschiedenen Browsern immer wieder zu
kleineren und größeren Fehlern in der Darstellung. Die Weiterentwicklung der
Browser führt allgemein zu einer immer besseren CSS-Unterstützung und weni-
ger Fehlern in der Interpretation der vom W3C festgelegten Standards. Die Auf-
gabe des Webdesigners liegt jedoch nicht allein in der Layoutentwicklung für die
neueste Browsergeneration. Moderne Browser, einschließlich des Internet
Explorers ab Version 5, bieten eine solide Unterstützung von CSS 2 und sind
somit grundsätzlich in der Lage, moderne CSS-Layouts darzustellen. Die Heraus-
forderung besteht darin, eine möglichst große Bandbreite von Browsern und
Browserversionen zu erfassen, um die Zugänglichkeit einer Webseite für einen
größtmöglichen Nutzerkreis zu gewährleisten.

Die Unterschiede in der CSS-Unterstützung verschiedener Browserversionen,
CSS-Bugs und Feinheiten in der Auslegung der Standards, verlangen jedoch
immer wieder nach individuellen Anpassungen. Gleichzeitig sollten veraltete
Browserversionen sicher von CSS-Deklarationen ausgeschlossen werden, wenn
diese den Browser überfordern. In diesem Fall ist es besser, dem Nutzer eine
unformatierte, aber benutzbare Seite auszuliefern. Durchsucht man das Internet
nach »Browserweichen« finden sich ohne Frage zahllose Beispiele. Viele dieser
Ansätze basieren auf JavaScript. Die meisten von Ihnen scheitern jedoch an einer
zuverlässigen Browsererkennung, da sie dafür lediglich den Browsernamen
abfragen. Der Opera-Browser ist beispielsweise bekannt dafür, sich als Internet
Explorer vorzustellen. Seine sichere Erkennung ist auf diesem Wege nicht mög-
lich. Sicher wäre hingegen die Abfrage der Unterstützung eines bestimmten Java-
Script-Objektes. Doch dazu muss JavaScript angeschaltet sein. JavaScript ist für
diesen Einsatzzweck eher ungeeignet. Gesucht sind saubere Lösungen, deren
Einsatz frei von Nebenwirkungen und Abhängigkeiten wie der Verfügbarkeit
von JavaScript ist. Auch Parser-Hacks als Browserweichen innerhalb eines nor-
malen Stylesheets scheiden daher in den meisten Fällen aus.




                                                                             37
1   Philosophie guten Webdesigns




    Ich bremse nur ungern die Euphorie, aber Browserweichen sind kein Bestandteil
    der W3C-Spezifikation. Es sind Tricks und Kniffe, die aus der Praxis geboren sind
    und den Alltag erleichtern. Allerdings lässt sich beileibe nicht jeder Browser ge-
    zielt ansprechen. Doch hoffnungslos ist die Suche nicht. Im Folgenden stelle ich
    verschiedene Methoden vor, die den gestellten Anforderungen gerecht werden.


    1.5.1    @import-Regel
    Die CSS-Regel @import wird zur Einbindung externer Stylesheets innerhalb von
    CSS verwendet.

    @import url(url_des_einzubindenden_stylesheets)

    Veraltete Browser, wie beispielsweise der Netscape 4.x, kennen diese Regel nicht
    und ignorieren das eingebundene Stylesheet daher. Die Schreibweise der Regel
    entscheidet darüber, welche weiteren Browser ausgeschlossen werden.

    Schreibweise                         Ausschluss folgender Browser
    @import url(stylesheet_url)          Netscape 4.x
                                         Internet Explorer 3 und 4/Windows
                                         (IE 4 liest das Stylesheet solange es im gleichen Ver-
                                         zeichnis wie die HTML-Datei liegt.)
    @import url("stylesheet_url")        Netscape 4.x
                                         Internet Explorer 3 und 4/Windows
                                         Internet Explorer 4.01 und 4.5/Mac
                                         Konqueror 2.1.2/Linux
    @import "stylesheet_url"             Netscape 4.x
                                         Internet Explorer 3 und 4/Windows
                                         Konqueror 2.1.2/Linux

    Tabelle 1.1 Ausschluss alter Browser über die @import-Regel


    1.5.2    @media-Regel
    Ebenso wie die @import-Regel bietet die @media-Regel die Möglichkeit, veraltete
    Browser von den CSS-Deklarationen auszuschließen.

    @media all { ... }

    Auch bei dieser Regel erfolgt der Ausschluss einzig und allein aufgrund der feh-
    lenden CSS-Unterstützung in älteren Browsern.

    Schreibweise                         Ausgeschlossene Browser
    @media all { ... }                   Netscape 4.x
                                         Internet Explorer 4.01/Windows
                                         Internet Explorer 5.0/Mac

    Tabelle 1.2 Ausschluss alter Browser über die @media-Regel



    38
                                                                 Browserweichen    1.5



Der Netscape 4.x. erkennt zumindest die Regel @media screen { ... } und lässt
sich auf diese Weise getrennt von den anderen aufgeführten Browsern anspre-
chen.


1.5.3    Trickreiche Kommentare für den IE/Mac
Der Internet Explorer 5/Mac unterscheidet sich in vielen Bereichen von der Win-
dows-Version. Seine Unterstützung verlangt daher in der Regel nach besonderer
Zuwendung. Auch wenn dieser Browser mittlerweile als veraltet gilt, ist seine
Unterstützung in einigen Fällen immer noch gewünscht. Der Internet Explorer
5/Mac hat Schwierigkeiten mit der korrekten Erkennung von Kommentarenden.
Unter Ausnutzung dieser speziellen Schwäche lassen sich Stildefinitionen gezielt
vor dem Mac-Browser verstecken.

/* Verstecken vor dem IE/Mac \*/
   div.test { ... }
/* */

Dreh- und Angelpunkt dieses Parser-Hacks ist der Backslash am Ende des ersten
Kommentars, durch den der IE/Mac das Kommentarende nicht mehr erkennt
und die darauf folgenden Anweisungen bis zum nächsten korrekten Kommentar-
ende */ ignoriert. In die andere Richtung lässt sich eine ähnliche Brücke bauen.
Die Anweisung innerhalb dieses Kommentars wird nur im IE/Mac ausgeführt.

/* Nur für IE/Mac \*//*/
   div.test { ... }
/* */

Der hierbei ausgenutzte Parser-Bug des IE/Mac hat keine Nebenwirkungen in
anderen Browsern, da er nur innerhalb eines Kommentars verwendet wird und
somit keinen Einfluss auf die Validität des Stylesheets hat.


1.5.4    Conditional Comments
Unter Windows bietet der Internet Explorer ab der Version 5 sogenannte Condi-
tional Comments (CC) mit deren Hilfe man verschiedene Browserversionen
gezielt ansprechen kann, um ihnen exklusiven Code ((X)HTML und/oder CSS)
zukommen zu lassen. Der Aufbau eines solchen Kommentars ist recht einfach.

<!-- [if operator IE version]-->
  <p>Hier steht beliebiger Code, der nur im IE ausgeführt
  wird</p>
<![endif]-->

Listing 1.4 XHTML-Auszug: Aufbau eines Conditional Comments




                                                                             39
1   Philosophie guten Webdesigns




    Die Bedingung (Condition) steht immer in eckigen Klammern im ersten Kom-
    mentarblock. Sie enthält die Abfrage nach dem verwendeten Browser. Die bei-
    den fett markierten Ausdrücke operator und version sind optional und können
    verwendet werden, um bestimmte Browserversionen anzusprechen oder auszu-
    schließen. Die einfachste Variante wäre also <!--[if IE] -->, womit automa-
    tisch alle Browserversionen erfasst werden.

    Die große Flexibilität wird durch die Operatoren und die Angabe bestimmter
    Browserversionen erreicht.

     Operator           Bedeutung
    !                   nicht
    lt                  kleiner als (less than)
    lte                 kleiner als oder gleich (less than or equal)
    gt                  größer als (greater than)
    gte                 größer als oder gleich (greater than or equal)


    Ein paar Beispiele sollen die Anwendung verdeutlichen. Mit [if lt IE 7] wer-
    den alle Browserversionen vor dem Internet Explorer 7 angesprochen. Die 5.x
    Versionen des Internet Explorers arbeiten generell im Quirks Mode. Um diesen
    Browsern speziellen Code zukommen zu lassen, eignet sich [if IE 5]. Wollen
    Sie hingegen nur den Internet Explorer 5.5 ansprechen, müssen Sie zusätzlich die
    erste Nachkommastelle mit angeben, z. B. durch [if IE 5.5]. Um Conditional
    Comments (CC) als Browserweiche für Stylesheets zu verwenden, bindet man im
    ersten Schritt das Standard-Stylesheet ein und fügt anschließend über den CC die
    gegebenenfalls erforderlichen Anpassungen oder Korrekturen für den Internet
    Explorer ein.

    <link href="standard.css" rel="stylesheet" type="text/css"/>
    <!--[if lt IE 7]>
       <link href="ie_fixes.css" rel="stylesheet"
        type="text/css" />
    <![endif]-->

    Listing 1.5 XHTML-Auszug: Browserweiche per Conditional Comments für IE 5.x und IE 6


    Diese Methode hat gleich mehrere Vorteile. Zum einen muss ihr Standard-CSS
    keinerlei Hacks für den Internet Explorer mehr enthalten und wird dadurch kür-
    zer und übersichtlicher. Zum anderen können Sie mit Conditional Comments
    gezielt auf einzelne Browserversionen eingehen.

    Der Internet Explorer 7 steht vor der Tür. Dieser neue Browser wird (wenn über-
    haupt) viel weniger Hacks benötigen als noch der Internet Explorer 6. Microsoft



    40
                                                      Parser-Bugs des Internet Explorers   1.6



selbst empfiehlt daher diese Methode ausdrücklich, um Webseiten auf den Inter-
net Explorer 7 vorzubereiten, denn viele Parser-Hacks werden in diesem Browser
nicht mehr funktionieren.

Aus Sicht der Webstandards mag man bemängeln, dass sich Conditional Com-
ments außerhalb des Standards bewegen und damit der Internet Explorer wieder
einmal sein eigenes Süppchen kocht. Diese Kritik ist zwar grundsätzlich berech-
tigt, jedoch nur in dem Sinne, dass Conditional Comments von anderen Browser-
herstellern nicht übernommen werden sollten. Die Priorität muss stattdessen auf
einer möglichst fehlerfreien Interpretation der bestehenden Standards durch den
Webbrowser liegen.

Im Bezug auf den Internet Explorer bin ich jedoch der Meinung, dass diese
Methode in der Praxis die mit Abstand sauberste Lösung ist, um ihn mit den nöti-
gen Anpassungen zu versorgen. Modernes Webdesign im Internet Explorer (bis
zur Version 6) ist ohne Bug-Fixes und Workarounds beinahe unmöglich. Conditi-
onal Comments ermöglichen valides Standard-CSS und eine übersichtliche und
nachvollziehbare Behandlung der Ausnahmen.

 Hinweis
 Beachten Sie, dass im Zusammenhang mit den Standalone-Fassungen des Internet
 Explorers (siehe Kapitel 5, Tipps und Tricks, Abschnitt 5.2.3) die Versionserkennung
 über Conditional Comments in der Regel nicht korrekt funktioniert. Die erkannte
 Browserversion entspricht in diesem Fall der Version des auf dem System korrekt
 installierten Internet Explorers. Weitere Informationen finden Sie unter
 http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/
 overview/ccomment_ovw.asp (Softlink 113).




1.6      Parser-Bugs des Internet Explorers
Die Verwendung von Conditional Comments ermöglicht es Ihnen, dem Internet
Explorer speziellen Code zu übergeben, und zwar in Abhängigkeit der Versions-
nummer. Allerdings hat dies den Nachteil, dass Sie im ungünstigsten Fall zwei bis
drei Stylesheets pflegen müssen, um alle Browserversionen zu erfassen.

Der Internet Explorer hat neben seinen CSS-Bugs, auf die ich im Verlauf des fol-
genden Kapitels im Detail eingehen werde, auch zahlreiche Parser-Bugs, also Feh-
ler beim Lesen von CSS. Diese Parser-Bugs können dazu verwendet werden, um
innerhalb eines Stylesheets bzw. innerhalb einer CSS-Regel einzelne Browserver-
sionen gezielt anzusprechen. Auch dieses Feld ist nicht gerade klein. Für den All-
tag ist es allerdings nicht erforderlich, alle Bugs zu kennen, da viele ein identi-




                                                                                     41
1   Philosophie guten Webdesigns




    sches Fehlverhalten hervorrufen. Ich werde mich daher auf die wichtigsten
    Parser-Bugs beschränken, die ich auch in den weiteren Kapiteln des Buches ver-
    wende.


    1.6.1    Stern-Selektor
    Valide        IE 5.01/Win      IE 5.5/Win   IE 5/Mac   IE 6/Win      IE 7/Win
    Ja            Ja               Ja           Ja         Ja            Nein


    Alle Versionen vor dem Internet Explorer 7 beinhalten einen Fehler im Umgang
    mit dem Universal-Selektor »*«. Mit diesem können beliebige Elemente ange-
    sprochen werden.

    * html #container { eigenschaft: wert }

    Diese spezielle Deklaration ist eigentlich unsinnig, denn sie wählt alle Elemente
    aus, die vom <HTML>-Element gefolgt werden. Das <HTML>-Element ist jedoch das
    erste Element in einer HTML-Datei. Die Deklaration greift daher ins Leere. Der
    Internet Explorer ignoriert in diesem Fall jedoch den Stern und führt die entspre-
    chende Anweisung für #container aus.


    1.6.2    Escape-Zeichen
    Valide        IE 5.01/Win      IE 5.5/Win   IE 5/Mac   IE 6/Win      IE 7/Win
    Nein          Ja               Ja           Nein       Ja            Nein


    Die Versionen 5.x und 6 des Internet Explorers haben Probleme mit dem Escape-
    Zeichen \ oder auch Backslash genannt. Der Parser-Bug verhält sich unterschied-
    lich in den verschiedenen Browserversionen.

    div.test { \eigenschaft: wert } /* nur IE5.x */
    div.test { ei\genschaft: wert } /* nur IE 6.0 */

    In der ersten Zeile wird das Escape-Zeichen der CSS-Eigenschaft vorangestellt. In
    diesem Fall wird die Anweisung ausschließlich vom Internet Explorer 5.x ver-
    standen, wohingegen sie vom IE 6 ignoriert wird.

    In der zweiten Zeile wird das Escape-Zeichen in den Namen der CSS-Eigenschaft
    eingebettet. In diesem Fall akzeptiert der Internet Explorer 6 die Anweisung,
    wohingegen der Internet Explorer 5.x die Anweisung ignoriert.




    42
                                                       Parser-Bugs des Internet Explorers   1.6



 Hinweis
 Die erste Variante wird vom Internet Explorer 6 nur dann ignoriert, wenn das Escape-
 Zeichen einem der ersten sechs Buchstaben des Alphabets (A–F) vorangestellt wird.
 Ein Beispiel: \background: #000 würde vom IE 6 wie gewünscht ignoriert, während
 \margin: 0px vom IE 6 erkannt wird.
 Bei der zweiten Variante ist es genau umgehrt. Sie funktioniert im IE 6 nicht, wenn
 das Escape-Zeichen einem der ersten 6 Buchstaben des Alphabets (A–F) vorange-
 stellt wird. Ein Beispiel: paddin\g: 0px würde erkannt werden, während p\adding:
 0px auch im Internet Explorer 6 ignoriert wird. Beachten Sie, dass dieser Hack in
 jedem Fall zu nicht-validem Code führt. Sie sollten ihn daher nur innerhalb von
 Stylesheets verwenden, die ausschließlich für den Internet Explorer gedacht sind.



1.6.3    Der Kind-Selektor
Valide        IE 5.01/Win    IE 5.5/Win     IE 5/Mac       IE 6/Win       IE 7/Win
Ja            Ja             Ja             Ja             Ja             Nein


Der Internet Explorer hat massive Schwierigkeiten beim Verständnis des Kind-
Selektors, die mit der Schreibweise des Selektors zusammenhängen. Seine Ver-
ständnisprobleme mit diesem Selektor sind so groß, dass ich Ihnen generell emp-
fehle, auf seine Verwendung im alltäglichen Gebrauch zu verzichten. Ich werde
hier nur auf einen speziellen Fall dieses Bugs eingehen, den ich im nachfolgen-
den Abschnitt einsetzen werde.

html > body #container { eigenschaft: wert }

Diese spezielle (aber eigentlich vollkommen korrekte) Schreibweise wird aus-
schließlich vom Internet Explorer 5.0 erkannt. Der IE 5.5 und 6.0 ignorieren die
Anweisung. Der Grund hierfür sind die Leerzeichen vor und nach dem > Zeichen.
Lassen Sie diese weg und schreiben stattdessen html>body, so schließen Sie auch
den Internet Explorer 5.0 aus.


1.6.4    Gezielte Zugriffe auf alle Internet Explorer Versionen
Im Alltag werden Sie immer wieder auf Probleme im Internet Explorer stoßen,
die eine spezielle Anpassung erfordern. Am häufigsten wird es sich dabei ver-
mutlich um die Korrektur des fehlerhaften Box-Modells handeln. Aber auch
andere Probleme lassen sich über Parser-Bugs leicht bereinigen. Für die folgen-
den Beispiele gehe ich davon aus, dass diese Anweisungen mittels eines Conditi-
onal Comments (<!--[if IE]> ... <![endif]-->) ausschließlich dem Internet
Explorer zugänglich gemacht werden.




                                                                                      43
1   Philosophie guten Webdesigns




    Warum gehe ich diesen Weg? Ich möchte die Anpassungen für alle Versionen des
    Internet Explorers in einem einzigen Stylesheet zusammenfassen. Dadurch wer-
    den Doppeldefinitionen vermieden und die erforderlichen Hacks bleiben über-
    sichtlich. Innerhalb dieses Stylesheets werden dann gezielt einzelne Browserver-
    sionen angesprochen.

    Exklusiver Zugriff auf den Internet Explorer 5.0
    Den Zugriff auf den Internet Explorer 5.0 habe ich bereits im vorigen Abschnitt
    besprochen. Es ist keine Kombination von Parser-Hacks erforderlich.

    html > body #container { eigenschaft: korrekturwert }


    Exklusiver Zugriff auf den Internet Explorer 5.5
    Der exklusive Zugriff auf den Internet Explorer 5.5 ist schon aufwändiger. Aller-
    dings stirbt dieser Browser langsam aus und muss nur noch selten berücksichtigt
    werden.

    * html #container { eigenschaft: korrekturwert }
    * html #container { ei\genschaft: standardwert }
    * html > body #container { eigenschaft: standardwert }

    Mit der ersten Anweisung werden alle 5er Versionen und der Internet Explorer
    6 erfasst. In der zweiten Zeile werden daher die Korrekturen für den Internet
    Explorer 6 und in der dritten Zeile auch für den IE 5.0. zurückgesetzt. Durch
    diese Reihenfolge gelangt der Korrekturwert nur zum Internet Explorer 5.5.

    Exklusiver Zugriff auf den Internet Explorer 6.0
    Durch die Kombination aus dem Stern-Selektor-Hack und dem Einsatz des
    Escape-Zeichens im Eigenschaftsnamen wird nur der Internet Explorer 6 ange-
    sprochen.

    * html #container { ei\genschaft: korrekturwert}


    Zugriff auf den Internet Explorer 5.x
    Der Zugriff auf die 5er Version kann sinnvoll sein, da sich diese Browserversio-
    nen unabhängig vom vorgegebenen Doctype immer im Quirks Mode befinden
    und in den meisten Fällen gleich behandelt werden können.

    * html #container { eigenschaft: korrekturwert}
    * html #container { ei\genschaft: standardwert }

    Über die erste Zeile werden wieder die Versionen 5.x und 6 angesprochen. Die
    zweite Zeile setzt anschließend die Eigenschaft für den Internet Explorer 6 wie-
    der auf den Standardwert zurück.



    44
                                                   Parser-Bugs des Internet Explorers   1.6



Zugriff auf Internet Explorer 5.x und 6.0
Im Zuge der Anpassung von Webseiten an den kommenden Internet Explorer 7,
sollten Hacks, die nur in den älteren Browserversionen benötigt werden, vor
dem IE 7 versteckt werden.

* html #container { eigenschaft: korrekturwert}

Der Stern-Selektor-Hack ist hierfür bereits ausreichend. Der Internet Explorer 7
interpretiert den Universal-Selektor korrekt und ignoriert daher diese CSS-
Anweisung.

Exklusiver Zugriff auf den Internet Explorer 7.0
Auch wenn die Hoffnungen auf einen überwiegend bugfreien Internet Explorer
7 derzeit groß sind, muss immer mit Fehlern gerechnet werden.

#container { eigenschaft: korrekturwert}
* html #container { eigenschaft: standardwert}

Mit der ersten Zeile erhalten alle Explorer-Versionen einschließlich des IE 7 die
Korrekturanweisung. Die zweite Zeile nimmt anschließend die Korrektur für alle
älteren Browser wieder zurück, so dass die Version 7 gezielt angesprochen wer-
den kann.

Anwendungsbeispiel: Browsertest
Für dieses Buch habe die alle zuvor beschriebenen Codebeispiele zusammenge-
fasst und daraus einen kleinen Browsertest entwickelt. Sie finden die Datei brow-
sertest.html im Verzeichnis Buchinhalte/Kapitel 1.

Das Beispiel generiert insgesamt acht quadratische Boxen. Jede der Boxen ent-
spricht dabei einer der sechs Browserkombinationen und enthält die entspre-
chenden Parser-Hacks. Hinzu kommen zwei weitere Boxen für den IE/Mac sowie
alle anderen Browser (Firefox, Opera usw.). Abhängig davon, in welchem Brow-
ser Sie sich das Beispiel anschauen, werden ein oder mehrere Boxen rot aufleuch-
ten. Abbildung 1.2 zeigt die Ausgabe im Internet Explorer 5.0. Es werden alle
Kombinationen rot markiert, die diese Browserversion erreichen.




                                                                                  45
1   Philosophie guten Webdesigns




    Abbildung 1.2 Browsertest im Internet Explorer 5.0



    1.7      Die Arbeit mit dem Buch
    Wie aus dem ersten Kapitel schon ersichtlich wird, kommt ein Buch über Web-
    design nicht ohne Quellcode-Beispiele und Screenshots aus. Auch ich werde hier
    keine Ausnahme machen. Allerdings ist mir bewusst, dass zu viel Code und bunte
    Bilder eher den Lesefluss stören als dem Verständnis helfen. In den nachfolgen-
    den Kapiteln werde ich sowohl die Grundlagen der Layoutentwicklung mit CSS
    als auch später die Arbeit mit dem YAML-Framework anhand zahlreicher Bei-
    spiele erklären. Ich werde mich dabei jeweils auf die relevanten Auszüge aus dem
    (X)HTML- und CSS-Quellcode beschränken. Sie finden alle Beispiele aus dem
    Buch als vollständige HTML-Dateien auf der Buch-CD.


    1.7.1    Die Verwendung des Pixelrasters
    Im Verzeichnis Layouthilfen/Pixelraster der Buch-CD befindet sich ein Pixelras-
    ter, das Ihnen hilft, Maßangaben und Positionierungen in Ihren Layouts zu kon-
    trollieren. Es liegt auf der CD in mehreren verschiedenen Dateiformaten (GIF,
    PNG, TIFF, BMP) und teilweise in transparenter Ausführung vor.

    Das Pixelraster beinhaltet ein Grundraster von 10 × 10 Pixeln. 50- und 100-Pixel-
    Grenzlinien sind besonders hervorgehoben. Am linken und oberen Rand befindet
    sich die Legende, die die Pixelmaße der Grenzlinien enthält. Das Pixelraster ent-
    hält zwei orangefarbene vertikale Streifen.




    46
        »Yet Another Multicolumn Layout« (kurz YAML) ist ein (X)HTML/CSS-
        Framework zur Erstellung moderner und flexibler Layouts auf Grund-
        lage von float-Umgebungen. Dabei stehen ein möglichst hohes Maß an
        Flexibilität und Zugänglichkeit im Vordergrund.




3       Das YAML-Framework

3.1     Vorüberlegungen
Der Begriff des Frameworks kommt aus der Softwaretechnik und beschreibt kom-
ponentenbasierte Entwicklungsansätze (beispielsweise bei der objektorientierten
Softwareentwicklung). Frameworks werden im Allgemeinen mit dem Ziel einer
Wiederverwendung »architektonischer Muster« entwickelt und genutzt. Verein-
facht kann man Frameworks als Baukastensysteme verstehen. Sie stellen inner-
halb eines definierten Anwendungsgebiets flexible Bausteine für die Lösung wie-
derkehrender Standardaufgaben bereit und sorgen für das reibungslose
Zusammenspiel der einzelnen Bausteine. Doch (X)HTML und CSS sind keine Pro-
grammiersprachen und das Webdesign ist ein sehr weitläufiges Themengebiet.
Wie kann hier ein (X)HTML/CSS-Framework die Arbeitsabläufe optimieren?
Dazu im Folgenden einige Vorüberlegungen.


3.1.1   Gestaltung kontra Bugfixing
In Kapitel 1, Philosophie guten Webdesigns, habe ich einen Überblick über die
derzeitige Browserwelt gegeben. Die Leistungsfähigkeit der einzelnen Browser in
Bezug auf die fehlerfreie Unterstützung von CSS ist dabei sehr unterschiedlich.
Bei der Erstellung eines Layouts sind daher Tests in den verschiedenen Browsern
und die Beseitigung von Darstellungsfehlern, aufgrund von Browserbugs, unab-
dingbar. Der Aufwand, der für das Testen und Bugfixing erforderlich ist, geht als
Zeit für die eigentliche Gestaltungsaufgabe verloren. Browsertests gehören zu
jeder Qualitätskontrolle dazu. Auf sie zu verzichten wäre ein Fehler. Gerade das
Bugfixing aber ist jedoch eine lästige Aufgabe. Ein Framework sollte daher ein
möglichst robustes Basis-Layout bereitstellen und die am häufigsten auftretenden
Browser-Bugs bereits von vornherein berücksichtigen. So bleibt mehr Zeit für
das Wesentliche – die Gestaltung des Layouts.




                                                                             153
3   Das YAML-Framework




    3.1.2      Lösungen für Standardaufgaben
    Wenn wir uns im Internet umschauen, wird schnell klar, dass der überwiegende
    Teil der Webseiten gewisse Gemeinsamkeiten aufweist. Unabhängig davon, ob
    es sich um grafisch aufwändig gestaltete Auftritte oder schlichte, schlanke Web-
    seiten handelt, werden in den meisten Fällen spaltenbasierte Layouts verwendet.

    Obgleich das optische Erscheinungsbild jedes Mal ein anderes ist, basieren doch
    80 bis 90 Prozent aller Webseiten im Internet auf dem Spaltenprinzip. Auch die
    Anzahl der jeweils verwendeten Spalten variiert nicht stark. Zwei bis drei Spalten
    sind die Regel. Einspaltige Layouts finden sich fast nur im Zusammenhang mit
    Foren, mehr als drei Spalten sind ebenso selten. Wenn jedoch das Spaltenprinzip
    so dominierend ist, wäre dann eine einheitliche und wiederverwendbare
    Arbeitsgrundlage nicht ein großer Vorteil? Ein Framework sollte daher eine mög-
    lichst flexible technische Basis bereitstellen, mit der sich Standardaufgaben
    schnell und unkompliziert realisieren lassen. Dabei sollten Layouts mit fixen und
    flexiblen Breiten gleichermaßen möglich sein.


    3.1.3      Wieder verwendbare Bausteine
    Moderne Webseiten auf der Basis von Webstandards basieren auf der Trennung
    von Inhalt und Layout. Doch auch innerhalb des Layouts lassen sich einzelne
    Funktionsbereiche klar voneinander abgrenzen:

          Screen- und Printlayout regeln die Darstellung der Inhalte für zwei unter-
          schiedliche Ausgabemedien.
          Navigationselemente sind die Wegweiser durch eine Webseite und bedürfen
          besonderer Sorgfalt bei der Gestaltung.
          Die Gestaltung von Texten, Tabellen und Formularen ist ein ebenso komple-
          xes Thema wie das Screenlayout selbst.

    Ein Framework sollte daher funktional gegliederte Bausteine beinhalten, die sich
    je nach Bedarf miteinander kombinieren lassen.



    3.2        Freiheit und Kontrolle
    Das YAML-Framework wurde als Basis für die Entwicklung flexibler, mehrspalti-
    ger Layouts entworfen. Selbstverständlich schließt dies auch die Erstellung von
    Layouts mit fixen Breiten ein. Der Schwerpunkt lag jedoch auf den Anforderun-
    gen, die sich aus der Arbeit mit variablen Größen ergeben.




    154
                                                             Freiheit und Kontrolle   3.2



3.2.1   Die wichtigsten Features
Ein Framework zeichnet sich nicht durch einen fest vorgegebenen Funktionsum-
fang aus. Vielmehr stellt es die Rahmenbedingungen für eine möglichst große
Gestaltungsfreiheit des Webdesigners bereit und sorgt kontrolliert im Hinter-
grund für das reibungslose Zusammenspiel der einzelnen Bausteine.

Flexibilität in der Layoutgestaltung
Die Gestaltungsmöglichkeiten des YAML-Frameworks gehen weit über ein einfa-
ches 3-Spalten-Layout hinaus. Die flexible Basis ermöglicht beispielsweise die
freie Platzierung der Spalten am Bildschirm – unabhängig von der Reihenfolge
der Inhalte im Quelltext. Der dynamische Charakter der verwendeten float-
Umgebungen ermöglicht mit nur wenigen Handgriffen die Modifikation hin zu
1- oder 2-Spalten-Layouts. Zusätzlich bieten die sogenannten Subtemplates bei-
nahe unbegrenzte Möglichkeiten für eine weitere Gliederung der Inhalte. Das
YAML-Framework bietet innerhalb des Basis-Layouts eine sehr einfache Möglich-
keit, vertikale Trennlinien zwischen den einzelnen Spalten und einfarbige Spal-
tenhintergründe ohne jeglichen Grafikeinsatz zu erzeugen.

Robustheit im Code
Der Aufbau der XHTML- und CSS-Struktur der Grundbausteine garantiert eine
fast vollständige Unabhängigkeit von den späteren Inhalten. Die Kapselung der
Hauptelemente der Webseite in separaten DIV-Containern sichert die korrekte
Positionierung der Elemente am Bildschirm, unabhängig von der Art der späte-
ren Nutzung der Container.

Browserkompatibilität
Die Grundbausteine von YAML garantieren eine browserübergreifend korrekte
Darstellung des Layouts. Alle für die Darstellung des Layouts erforderlichen
browserspezifischen CSS-Anpassungen sind hier bereits integriert. Die während
der Layouterstellung üblicherweise erforderlichen umfangreichen Kompatibili-
tätstests in den verschiedenen Browsern können so auf ein Minimum reduziert
werden.

Funktional gegliederte Stylesheets
Das Baukasten-Prinzip ermöglicht eine besonders effiziente Nutzung des vorhan-
denen Codes bei der Layouterstellung. Die Grundbausteine stellen ein Basis-Lay-
out mit voller Funktionalität bereit. Zusätzliche Bausteine nutzen die CSS-Kas-
kade und ergänzen oder modifizieren diese Basis. Diese CSS-Bausteine sind
funktional gegliedert und universell einsetzbar. Einmal geschrieben und getestet,




                                                                               155
3   Das YAML-Framework




    können sie bei Bedarf eingebunden werden und stehen zum Einsatz für zukünf-
    tige Projekte bereit. Beispiele dafür sind die verschiedenen Layoutvariationen
    mittels der basemod-Dateien, siehe Kapitel 4, Layoutentwicklung mit YAML, oder
    auch die vorgefertigten Stylesheets für den Druck.



    3.3      Der Aufbau des Frameworks
    Das Download-Paket des YAML-Frameworks beinhaltet eine Kopie der Webseite
    http://www.yaml.de. Sie erhalten somit mit dem Download-Paket nicht nur die
    CSS- und Beispieldateien des Frameworks, sondern zugleich die vollständige
    Online-Dokumentation sowie einige nützliche Hilfsmittel zur Layoutentwick-
    lung.




    Abbildung 3.1   Die Projekthomepage www.yaml.de


    Die Erläuterungen in diesem Kapitel stützen sich auf die zum Zeitpunkt der
    Manuskripterstellung aktuelle Version 2.5.2 des Frameworks. Bevor ich auf die
    einzelnen Bestandteile des Frameworks genauer eingehe, soll zunächst die Ver-
    zeichnisstruktur des Download-Pakets erläutert werden.



    156
         Dieses Kapitel gibt eine kurze Einführung in die tägliche Arbeit mit
         TYPO3.




7        YAML und TYPO3 in der Praxis

7.1      Eine neue Seite anlegen
Wenn Sie das Komplettpaket verwenden oder die t3d-Datei importiert haben, ist
bereits ein Seitenbaum vorhanden. Dieser dient jedoch nur der Demonstration.
Sie können diese Seiten ganz nach Belieben löschen oder ändern. Wir werden
nun eine neue Seite anlegen und diese Schritt für Schritt mit Inhalt füllen. Es gibt
(wie immer bei TYPO3) mehrere Wege, Seiten oder Inhalte anzulegen. Wir wer-
den im Folgenden die TYPO3-Assistenten zu Hilfe nehmen.




Abbildung 7.1   Neue Seiten anlegen


Markieren Sie die Seite Home, indem Sie auf deren Namen (nicht auf das Symbol)
klicken. Der verwendete Backend-Skin (daimi_skin) sorgt dafür, dass die aktive
Seite nun hervorgehoben ist. Klicken Sie dann mit der rechten Maustaste auf das
Symbol der markierten Seite, und es erscheint der oben abgebildete Assistent.
Wählen Sie Neu. Es erscheint der nächste Assistent.

Alle Elemente in TYPO3 sind letztlich Datensätze, die in der Datenbank gespei-
chert werden. Diese Elemente weisen einen Typ (um welches Inhaltselement
handelt es sich?) und eine eindeutige Nummer (UID) auf, anhand derer TYPO3
sie identifizieren und zuordnen kann. Sie können innerhalb des Assistenten auf



                                                                                365
7   YAML und TYPO3 in der Praxis




    das Fragezeichen-Symbol klicken und erhalten dadurch in einem Popup-Fenster
    Hilfe zu den jeweiligen Schritten. Haben Sie also einen Popup-Blocker installiert,
    so sollten Sie Popup-Fenster für die jeweilige Domain, die Sie gerade bearbeiten,
    zulassen. Klicken Sie nun bitte auf den ersten Menüpunkt, um den Assistenten
    für eine neue Seite aufzurufen.




    Abbildung 7.2   Datensatz-Assistent




    Abbildung 7.3   Seiten-Assistent


    Da wir im ersten Schritt die Seite Home markiert haben, erscheinen nun deren
    schon vorhandene Unterseiten (eine Ebene). Die Pfeile markieren die Positionen,
    an denen Sie die neue Seite platzieren können. Entscheiden Sie sich bitte für die
    Position direkt darunter und klicken Sie auf das Pfeil-Symbol unter der schon
    vorhandenen Seite Home.

    TYPO3 hat die neue Seite angelegt und Sie müssen nun die Einstellungen dafür
    vornehmen.

    Eine neue Seite wird manchmal versteckt erzeugt. Das ist abhängig von der Posi-
    tion im Seitenbaum, an der Sie die neue Seite erzeugen. Entfernen Sie also das
    Häkchen in der Checkbox , wenn es gesetzt ist.



    366
                                                               Eine neue Seite anlegen   7.1




Abbildung 7.4   Seiteneinstellungen (oberer Bereich)


Der Seitentitel     sollte kurz und knapp den Inhalt beschreiben. Er erscheint in
den Menüs.

Der Untertitel      ist optional und muss nur angegeben werden, wenn der Seiten-
titel alleine nicht ausreicht, um den Inhalt zu beschreiben. Das Template ist aller-
dings so eingerichtet, dass der Untertitel automatisch in das title Attribut des
Links geschrieben wird. Dadurch ist er zum einen für Suchmaschinen sichtbar
und relevant. Zum anderen sieht ihn der Benutzer als Tooltip, wenn er mit Maus
darauf zeigt. Machen Sie also Gebrauch vom Untertitel und lassen Sie ihn nicht
auf jeder Seite einfach leer.




Abbildung 7.5   Vorlagen auswählen mit dem Template Selector


Im unteren Bereich der Seiteneigenschaften können Sie eine HTML-Vorlage für
die neue Seite auswählen. Wenn Sie dies nicht tun, wird die Standardvorlage
benutzt und es werden keine Subtemplates ausgewählt.



                                                                                  367
7   YAML und TYPO3 in der Praxis




    Wir möchten für die neue Seite ein zweispaltiges Layout festlegen und gleichzei-
    tig die Möglichkeit haben, die Hauptinhaltsspalte durch Subtemplates zu erwei-
    tern. Auf diese Weise können wir im oberen Bereich der Seite Inhalt einfügen,
    der sich über die gesamte Breite erstreckt, und darunter zweispaltigen Inhalt dar-
    stellen. Wählen Sie also bitte layout_2col_left_vlines.html als Vorlage und
    50-50.html als Inhaltsvorlage.

    Vor den geänderten Seitenoptionen sehen Sie jeweils einen kleinen roten Pfeil.
    Damit teilt TYPO3 Ihnen mit, welche Optionen geändert wurden, und dass die
    Seite gespeichert werden muss, damit die Änderungen wirksam werden. Spei-
    chern Sie also die Seite, indem Sie auf das dritte Diskettensymbol von links
    (Dokument sichern und schließen) klicken.

    Änderungen an der Seite können Sie jederzeit wieder durchführen, indem Sie sie
    markieren und dann auf Seiteneigenschaften bearbeiten klicken.



    7.2      Seiteninhalt anlegen
    Die Seite ist nun gespeichert und erscheint im Frontend als leere Seite. Diejeni-
    gen Inhalte, die per TypoScript erzeugt wurden (das Menü, der Header und der
    Footer) sind bereits vorhanden.




    Abbildung 7.6   Seiteninhalt anlegen


    Markieren Sie jetzt die neue Seite (Meine Seite), so sehen Sie die oben abgebildete
    Bildschirmmaske. Sie müssen sich dazu im Modul Web Seite befinden, auswähl-
    bar im linken Frame des Backends. Sie sollten ein Häkchen in die Checkbox Zeige
    verborgene Inhalte an setzen. Das sorgt dafür, dass auch versteckte Inhalte im
    Backend sichtbar bleiben. Es ruft nicht nur bei Anfängern Verwirrung hervor,
    wenn versteckte (ausgeblendete) Inhaltselemente scheinbar »verschwunden«
    sind. Die Einstellung wirkt sich systemweit für den momentan angemeldeten
    Benutzer aus. Sie müssen sie also nur einmal vornehmen.




    368
                                                               Seiteninhalt anlegen   7.2



TYPO3 bietet für verschiedene Aufgaben jeweils unterschiedliche Backend-
Ansichten. Wenn Sie eine Seite zum Beispiel in eine Fremdsprache übersetzt
haben, empfiehlt es sich, die Ansicht Sprachen auszuwählen (Dropdown-Box
ganz oben). Die Spalten sind dann untereinander angeordnet und die Sprachen
nebeneinander. Mit der Ansicht Sprachen können Sie auch die Übersetzung der
Seite vornehmen. Dazu später mehr. Wechseln Sie in die verschiedenen Ansich-
ten, um sich einen Überblick zu verschaffen und kehren Sie zum Schluss wieder
zur Ansicht Spalten zurück.

Die sechs Backend-Spalten LINKS, NORMAL, RECHTS, SUB-LINKS, SUB-MITTE
und SUB-RECHTS nehmen die Seiteninhalte auf. Sie repräsentieren die Spalten
im Frontend.




Abbildung 7.7   Backend-Spalten und die Position im Frontend


Inhalte, die Sie in der Spalte LINKS eingeben, erscheinen im Frontend an der
Position     unter dem Hauptmenü. NORMAL wird an Position          dargestellt,
SUB-LINKS an Position        und SUB-RECHTS an der Position      . Die Spalte
RECHTS wird auf dieser Seite nicht benutzt, weil es sich um ein zweispaltiges
Layout handelt.

Die in einer TYPO3-Standardinstallation vorhandene Spalte RAND ist im vorlie-
genden Template ausgeblendet, weil sie nicht benötigt wird.




                                                                              369
7   YAML und TYPO3 in der Praxis




    Klicken Sie nun auf eines der Symbole (Symbol mit einem grünen Pluszeichen)
    oder eine Schaltfläche (Seiteninhalt anlegen oder neuer Inhalt), um einen neuen
    Seiteninhalt zu erstellen. Hier haben Sie die Qual der Wahl. Man könnte durch-
    aus zu dem Schluss kommen, dass die Programmierer von TYPO3 hier etwas
    übertrieben haben. Aber warten Sie es ab, die Seite ist ja nur am Anfang leer,
    wenn sich viele Elemente auf der Seite befinden, sparen Sie sich dadurch häufig
    das Hinauf- und Herunterscrollen.




    Abbildung 7.8   Die verschiedenen Inhaltstypen (Auszug)


    Der folgende Assistent verlangt eine Auswahl des Inhaltstyps. Im Backend sind
    wesentlich mehr zu sehen (der Screenshot ist gekürzt). In den meisten Fällen
    wird das der Typ Normaler Text sein. Klicken Sie bitte auf den entsprechenden
    Radio-Button.




    Abbildung 7.9   Seiteninhalt editieren




    370
                                                              Der Rich Text Editor (RTE)   7.3



Die obige Abbildung zeigt einen Ausschnitt des nun folgenden Bildschirms. Es
wurde bereits die Überschrift (Der erste Testinhalt) eingegeben und der Daten-
satz wurde gespeichert. Die erste Zeile zeigt Ihnen den Pfad zur Seite, auf der Sie
gerade Inhalt anlegen oder editieren. Die zweite Zeile informiert Sie über die
UID (416) des Datensatzes, daneben steht die Überschrift. Lassen Sie bitte die
Überschrift niemals leer, auch wenn Sie eigentlich keine benötigen. In diesem
Fall verwenden Sie einen beschreibenden Text als Überschrift und setzen den
Typ auf versteckt. Wenn sich viele Inhaltselemente auf der Seite befinden, finden
Sie den gesuchten auf diese Weise sehr viel schneller, als wenn Sie aus einer Liste
auswählen müssen und die Überschrift jedes Mal [kein Titel] lautet.

Wie Sie sehen, ist die Auswahl, die Sie im vorangegangen Assistenten bezüglich
des Inhaltstyps getroffen haben, nicht bindend. Sie können den Inhaltstyp auch
hier jederzeit wieder ändern. Sie erhalten dann einen Warnhinweis.

Inhalte und Inhaltstypen
Wenn Sie bereits Inhalte eingegeben haben, die zum anschließend veränderten
Inhaltstyp nicht passen, gehen diese Inhalte nicht verloren, sie sind nur nicht mehr
sichtbar.


Ein Beispiel: Sie entscheiden sich zunächst für das Inhaltselement Text um später
festzustellen, dass eigentlich das Element Überschrift genügen würde. Sie haben
aber bereits Fließtext erfasst und ändern nun den Inhaltstyp. Im Frontend (und
auch im Backend) wird der Fließtext nun zwar nicht mehr angezeigt, aber er ist
weiterhin vorhanden. Wenn Sie die Änderung wieder rückgängig machen, ist der
Text wieder an Ort und Stelle.



7.3     Der Rich Text Editor (RTE)
Mit der TYPO3 Extension html Area RTE sind Sie in die Lage, Texte, Bilder und
Tabellen im Backend komfortabel zu erfassen – so als würden Sie dies mit einer
Textverarbeitung tun. Zur Darstellung aller Elemente wird dieselbe CSS-Datei
(content.css) wie im Frontend verwendet. Somit ist eine echte WYSIWYG (What
you see is what you get) Darstellung gewährleistet.


7.3.1   Die wichtigsten Bedienelemente
Obwohl die einzelnen Elemente durch ihre Symbole oft selbsterklärend sind,
möchte ich sie trotzdem kurz erläutern – die Ziffern wurden von mir zur Veran-
schaulichung eingefügt.




                                                                                    371
Index

!important 55                             Aufbau des Frameworks 156
#col1 164                                 Auflösung 47, 76
#col2 164                                 Ausgabemedium 24, 26, 76
#col3 164                                   Bildschirm 24
#footer 163, 185                            Drucker 24
#header 182                                 mobile Endgeräte 24
#ie_clearing 167, 168                     Außenabstand 62, 116
#main 163, 183                            automaketemplate 327
#nav 183                                  Autoparser 339
#page 163, 164, 182                       Autoren-Stylesheet 55
#page_margins 163, 164, 182, 244
#topnav 182, 183                          B
* {border 0} 180
* {font-size 100%} 180                    Backend 324
* {margin 0 180                           Backend-Benutzer 385
.clear_columns 172                        Backend-Skin 365
.clearfix 101                             Backend-Spalten 369
.floatbox 191, 293                        Backend-Sprachen 329
.skip 175                                 Backslash-Hack 217
.subcolumns 227                           Barrierefreiheit 34, 36, 174, 316
@import-Regel 38, 178, 238                base.css 158, 179, 186, 227
@media handheld 54                        basemod.css 201, 202
@media-Regel 38, 190, 239                 basemod_[layout].css 241
3-Pixel-Jog-Bug   CSS-Bugs                basemod_2col_left.css 202
                                          basemod_3col_abb.css 202
A                                         basemod-Dateien 158, 201
                                          Basis-Layout 160, 165, 169, 175, 181,
A List Apart 109, 159, 204                  238
a[href^]= 219, 220                          Schematischer Aufbau 162
ab_linklist 328                           Basisschriftgröße 143
Abkürzungen 224                           Basis-Stylesheet    base.css
Absatzformate 372                         Baukastensystem 153, 155
Absolute Einheiten 76                     beispiel_[layout].css 240
ACT 352                                   beispiel_[layout].html 240
Akronyme 224                              Beispiellayouts 281
Allowed excludefields 384                 Benutzergruppen 380
Almost Standard Mode      Darstellungs-   Benutzer-Stylesheet 55
  modi                                    Benutzerverwaltung 380
Alpha-Transparenz 137                     Betriebssystem 23
Alt-Attribut 31, 309, 377                   Linux 29
anamorph 379                                Mac OS X 28, 29
Anpassungen für den IE 239, 250             Windows 95, 98 oder Me 27
api_macmade 328                             Windows Vista 28
Apple 29                                    Windows XP 27
Attribut 33                               Bezeichnungen 240




      407
Index



Bilder 218, 315                          Clearfix-Methode 100, 166, 186, 191
Bildschirm 53, 76                        CMS 304
Bildschirmauflösung 23, 24, 47, 76       COA 348, 352
Bildunterschriften 379                   Condition 348, 355, 356
BITV 349                                 Conditional Comment 39, 60, 158, 177,
Blindtexte 233                             188, 190, 313
Block Formatting Context 115             Constant Editor 357
Block-Elemente 74, 315                   Constants 342
border     Rahmen                        Content Formatierung       content.css
Bottom-Up-Prinzip 235                    content.css 54, 158, 175, 218, 247
Box-Modell 62                            Cookies 315
  Anwendungsgrenzen 69                   CSS
  Box-Modell des Internet Explorers 64     CSS 2 57
  Box-Modell-Hack 65                       CSS 2.1 57
  Box-Modell-Hack     Tantek-Hack          CSS 3 73
  Limitierungen des Box-Modells 69       CSS     Cascading Stylesheets
Boxsizing 73                             css_styled_content 327, 355
Braillezeile 31                          CSS-Anpassungen für den Internet
Browser 27, 321                            Explorer 175
  Firefox 28                               Einbindung 177, 187
  Konqueror 29                           CSS-Bugs 49, 65, 114, 116, 164, 186
  Lynx 30                                  3-Pixel-Jog-Bug 200
  Opera 29                                 CSS-Bugs im IE7 138
  Safari 29                                Disappearing-List-Background-Bug 148,
  Screenreader 31                             185, 193, 194
  Screenshot-Generatoren 321               Doubled-Float-Margin-Bug 197
  Textbasierte Webbrowser 30               Escaping-Floats-Bug 195
Browser-Bugs 21, 153, 302                  Expanding-Box-Problem-Bug 198
Browserfenster 47                          Guillotine-Bug 196
Browserkompatibilität 155                  IE – Doubled-Float-Margin-Bug 123
Browsertest 45, 310                        IE – Expanding-Box-Problem 129
Browserweichen 37                          IE – Extreme-Font-Size-Bug 134
  @import 38                               IE – Float-Clearing-Bug 136
  @media-Regel 38                          IE – Peekaboo-Bug 119
  Conditional Comments 39                  IE/Win – 3-Pixel-Jog-Bug 126
  JavaScript 37                            IE/Win – Disapearing-List-Background-
  Kommentarhack für IE/Mac 39                 Bug 133
  Parser-Hacks 37                          IE/Win – Escaping-Floats-Bug 124
                                           IE/Win – Guillotine-Bug 117
C                                          IE/Win – Italics-Bug 127
                                           IE/Win – Unscrollable-Content-Bug 121
calc() 74                                  Italics-Bug 199
Cascading Stylesheets 21                   Kommentare in CSS-Dateien 189
clear 93                                   Mozilla und Firefox – Clearing Bug 139
   both 93                                 Netscape 7 – Probleme mit overflow
   left 93                                    hidden 140
   lokale und globale Wirkung 98           Opera-Bugs 141
   none 93                               CSS-Ergänzungsbausteine 237
   right 93                              CSS-Frames 83




408
                                                                               Index



CSS-Grundbausteine 237                     Einheiten     Maßeinheiten
CSS-Unterstützung 57, 302                  Einheitenmischung 70
CUR 352, 354                               elastisch 25
                                           Elementfluss 81, 82, 93
D                                          Elementtypen 74
                                           EM [em] 308
Darstellungsmodi 32, 33                    Enable images in the RTE 375, 376
  Almost Standard Mode 33                  Enable links accessibility icons 375
  Quirks Mode 32                           ersetzte Elemente 75, 91
Dateifreigabe 380                          ersetzte Elemente     replaced
Datenbank 332, 365, 374                    Erstellen der Schattengrafiken 276
DB Mounts 381                              Erweiterungs-Templates 345
Debugging-Hilfe 190                        Escape-Zeichen 42, 67
Designer 336                               Escaping-Floats-Bug      CSS-Bugs
Disappearing-List-Background-Bug    CSS-   example.html 338
  Bugs                                     Excaping-Floats-Bug 195
display 75                                 Expanding-Box-Problem 198
  block 75                                 Expanding-Box-Problem-Bug        CSS-Bugs
  inline 75, 197                           ExpressionEngine 305
  inline-block 75                          Extension 327
  list-item 75                             Extension-Manager 328
  none 75                                  externe Stylesheets 315
DIV-Container 338                          externen Link-URLs 224
Doctype 33, 47, 162
Doctype Definition 32                      F
Doctype      Dokumenttyp
Document Object Model 32                   Farben 54
DOCUMENT_BODY 339                          Faux Columns 182
DOCUMENT_HEADER 339                        Fehlermeldungen 332
Dokumenttyp 162                            Feintuning des Layouts 267
DOM 32                                     Festlegung der Spaltenbreiten 269
DOM-Inspektor 317                          File Mounts 382
Doubled-Float-Margin-Bug 150, 197, 212     Firefox 28, 180, 310, 314, 318
Doubled-Float-Margin-Bug     CSS-Bugs         Nutzerprofile 311
Download-Paket 156                            portable Version 312
Dreamweaver 159, 190, 232                     Profilmanager 310
dropdown_sitemap 328                       Firefox Portable 312
Drucker 53                                 firstLabelGeneral 356
Druck-Stylesheets 159, 175, 220, 250       fix 25
  Anpassung des Layouts 221                Flash 27, 310
  Kennzeichnung der Spalten 223            flexibel 25
  Spaltenauswahl 222                       Flexible Layouts 105
  Typographische Anpassungen 221              Strukurunabhängige Layoutgestaltung
Drupal 305                                       114
DTD       Doctype-Definition               Fließtext 371, 376
                                           float 75, 91, 315
E                                             left 91
                                              none 91
Einfach für Alle 35                           right 91




                                                                                409
Index



Float-Bugs    CSS-Bugs                    HTML-Vorlage 336
Flock 314                                 Hyperlinks 218
Fontgrößen     Schriftgrößen                Auszeichnung externer Hyperlinks 219
font-size 143
Formulare 315                             I
Formularelemente 181
frameset 32                               IE Column Clearings 163
Framework 153                             IE-Clearing 163, 167, 201
Freie Spaltenanordnung 257                   Anwendungsgrenzen# 171
Freie Verwendung der Content-Spalten         Funktionsschema 169
   256                                    iehacks.css 158, 187, 231
Fremdsprachen 347                         iehacks_[layout].css 187, 241
Frontend 324                              iehacks_vlist.css 216
ftod.js 160, 233                          IFSUB 354
Full Standards Mode 33                    Image Replacement 309
Funktional gegliederte Stylesheets 155,   In Search of the holy grail 109
   176                                    In Search of the One True Layout 112
                                          Include Access Lists 382
G                                         Inculde static 335
                                          indexed_search 328
General Storage 333                       Inhaltsbereich 62, 72
Gestaltung der Inhalte 247                Inhaltscontainer 339
Gleichlange Spalten 111                   Inhaltselement 333
Globales Clearing 166                     Inhaltsvorlage 368
GPL 391                                   Inline CSS 53, 309, 355
Grafiken 307                              Inline PHP-Code 396
  mit Schriftgröße skalieren 307          Inline-Elemente 74
grafikfreie Spaltentrenner 246, 257       Innenabstand      padding
Grafische Schatten 276                    Internet Explorer 27, 64, 83, 114, 312,
Grundbaustein 158, 177                       315
Grundelemente 142                            Internet Explorer 5.0 44
Grundvariationen 251                         Internet Explorer 5.5 44
Guillotine-Bug 196                           Internet Explorer 5.x 27, 168
Guillotine-Bug     CSS-Bugs                  Internet Explorer 5/Mac 28, 190
                                             Internet Explorer 6 27, 33
H                                            Internet Explorer 6.0 44, 168
                                             Internet Explorer 7 28, 137
hasLayout 100, 115, 138, 150, 165, 171,      Internet Explorer 7.0 45, 58, 170
  185, 195, 200, 317                         Internet Explorer 7.0 194
Hauptnavigation 242                          Parser-Bugs 41
Haupt-Template 342                           Standalone-Fassungen 312
HELLO WORLD 334, 341                      Internet Explorer Developer Toolbar 316
HMENU 348                                 IProcFunc 353
Hover-Effekt 147                          Italics-Bug 198
HTML 31                                   Italics-Bug    CSS-Bugs
HTML 4.01 32, 35
htmlarea 328
HTML-Code 359




410
                                                                              Index




J                                          Layouttabellen 34
                                           Layoutunabhängige Anpassungen 187
Java Applets 315                           leveltitle 352
JavaScript 27, 37, 60, 160, 315            Linearisieren von Spalten 222
  ftod.js 160                              Linkliste 328
  minmax.js 160                            Listen 34, 218
JavaScript-Expressions 59, 245             Listen-Elemente 75
JavaScript-Menü 352                        Listennavigation
Joomla! 305                                  Horizontale Listennavigation 149
jph_codesnippets 328                         Vertikale Listennavigation 146
Justierung 379                             Lynx 30


K                                          M
Kaskade 55, 155, 302                       mainTemplate 340
kb_md5fepw 328                             margin     Außenabstand
Kind-Selektor 43                           Marker 339
Klick-vergrössern 378, 379                 Markup 36, 94
Kombinationen für 2-Spalten-Layouts 288    Markupfreies Clearing 100, 293
Kombinationsmodell 70, 163                  Clearfix-Methode 100
Kommentar 348                               mittels eines zusätzlichen Floats 104
Komplettpaket 326, 333, 365                 Overflow-Methode 102
Konqueror 29                               Markup-Sprache 36
                                           Maßeinheiten 24, 76
L                                           EM 308
                                            Pixel 307
LABEL 381                                   Prozentwerte 308
layout_2col_left.css 203                   mc_googlesitemap 328
layout_3col_abb.css 203                    Medienspezifische Stil-Definitionen 53
layout_3col_standard.css 202               Medientypen 55
Layoutabhängige Anpassungen 187            metatags 328
Layoutabhängige Anpassungen                Microsoft 316
   iehacks_[layout].css                    Millimeter [mm]      Maßeinheiten
layoutabhängige Anpassungsdatei 157,       min-/max-height 58, 137, 181, 234
   176, 217                                min-/max-width 58, 160, 234, 245
   Stuktureller Aufbau 188                 minmax.js 60, 160, 234, 245
Layoutbeispiele 160                        Mirror list 329
   Layoutentwurf „2col_left_vlines“ 281    Mobile Geräte 53
   Layoutentwurf „2col_right_vlines“ 285   mod.SHARED.colPos_list 360
   Layoutentwurf „3col_fixed“ 289          Modern Template Building 326, 345
   Layoutentwurf „Subtemplates #1“ 296     Monitor     Monitor
   Layoutentwurf 3col_vlines 241           Mountpoint 385, 386
   Layoutvariationen mit 2 Spalten 254     Mozilla 28, 310, 314
   Layoutvariationen mit 3 Spalten 252
Layoutbreite 267                           N
Layouts
   elastisch 25, 309                       nav_shinybuttons.css 210
   fix 25                                  nav_slidingdoor.css 205
   flexibel 25                             nav_slidingdoorII.css 205



                                                                                411
Index



Navigationselemente 54, 154, 159, 175,      Pfadangaben 303
  203                                       Phoenix     Firefox
  Horizontale Listennavigation              Pica [pc]    Maßeinheiten
    »Shiny Buttons« 209                     Pixel    Maßeinheiten
  Horizontale Listennavigation              Pixelraster 46, 48
    »Sliding Door« 204                      PNG-Grafiken 137
  Vertikale Listennavigation »vlist« 213    PopUp-Blocker 366
Navigationslisten 34, 145, 159              PopUp-Fenster 366
Negative Margins 109, 200                   position 79, 315
Netscape 28, 180, 227, 312                    3-Spalter mit fixer Breite 87
newloginbox 328                               3-Spalter mit flexibler Breite 89
nicht ersetzte Elemente 75                    absolute 81, 84
non-replaced elements      nicht ersetzte     fixed 82, 137
  Elemente                                    relative 80, 84, 182
Nutzerprofile 312                             static 80
                                            Position is Everything 117
O                                           Präfix 339, 377
                                            print_[xyz].css 223
Offset 80                                   Printdesign 22
Online-Dienste 322                          Printlayout    Druck-Stylesheets
Online-Dokumentation 156                    Prozentwerte [%]      Maßeinheiten
Online-Validatoren 315                      Pseudo-Elemente 61
Open Source 28, 30, 310                     Punkt [pt] 76
Opera 29, 66, 181, 312, 318
Optimierung 299                             Q
Optimierung der Stylesheets 301
Option Split 349                            Qualitätskontrolle 153
Optionale Bausteine 177                     Qualitätsmerkmal 115
overflow                                    Quellcode 336
  auto 102                                  Quelltext-Modus 373
  hidden 103, 112, 227                      Quirks Mode 32, 40, 59, 64, 117, 163
  visible 199
Overflow-Methode 102, 186, 192              R
P                                           Rahmen 62, 72
                                            Redakteur 341, 362, 380
padding 62, 72, 180                         Reiternavigation 353
padding 0} 180                              Relative Einheiten 76, 142
PAGE Objekt 340                             Rendering 32
Page TSconfig 360                           replaced    ersetzte Elemente
PAGE_TARGET 342                             Repository 329
page-break-after                            Resize-Funktion 315
  always 223                                Rich Text Editor 371
Parser-Bugs 41, 65, 137                     rlmp_tmplselector 327
  Escape-Zeichen 42                         Robustheit des Layouts 155, 192
  Kind-Selektors 43                         rtehtmlarea 328
  Universal-Selektor * 42
Parser-Hacks 45
PDA     mobile Endgeräte



412
                                                                               Index




S                                         Standardbausteine 177
                                          Standardformatierung für Listen und
Safari 29, 181                               Zitate 185
Satzart 372                               Standardformatierungen 179
Schatteneffekt 164                        Standards 24
Schichten-Modell 26                       Standardschriftgröße 143, 308
   Dynamik 27                             Standards-Compliant Mode 33
   Inhalt und Struktur 26                 Standardvorlage 367
   Präsentation 26                        statische Templates 333, 335
Schriftart 25, 362                        Stern-Selektor 42
Schriftgröße 25                           Stern-Selektor-Hack 68
Screenlayout 54, 154, 175, 242            strict 31, 36
Screenreader 31, 349, 354                 Strukturebene 107
Screenshot-Generatoren 321                Stylesheet 338
Screenshots 46                            Subparts 333, 345
SeaMonkey       Mozilla-Suite             Subtemplates 155, 186, 225, 295, 342
Seitenbaum 366                               Der Container .subcolumns 227
Seiteneigenschaften 367                      Inhaltscontainer 229
Seiteninhalt 370                             Klassendefinitionen 228
Seitenoptionen 368                           Struktureller Aufbau 226
Seitentitel 367                           Suchmaschinen 367
Seitenverhältnis 22                       SweeTS 325
Selektor 52                               Syntaxfehler im Quellcode 302
Semantischer Code 34, 36, 309             Sys-Ordner 345, 346
Setup 343
Shiny Buttons 159                         T
simulateStaticDocuments 343
Skalierung 143                            t3d-Datei 325, 333, 365
Skip-Links 173, 186                       Tabellen 218, 315
Sliding Door 159, 204                     Tabellenlayout 22, 34
Smarty 391                                Tabindex 315
Smarty-Templates 392                      Tantek-Hack 65
Softlink 326                              Template Selector 339, 341
Spaltenreihenfolge 106, 155, 163, 164     Template Storage 333
Spaltenreihenfolge 1-2-3 262              TER 330
Spaltenreihenfolge 1-3-2 259              Textersetzung    Image Replacement
Spaltenreihenfolge 2-1-3 264              Textfluss 93
Spaltenreihenfolge 2-3-1 259              Textformate 372
Spaltenreihenfolge 3-1-2 264              Tidy 318
Spaltenreihenfolge 3-2-1 262              Top-Down-Prinzip 235, 236
Spaltentrenner 166, 172, 201              Transformation 374
Spezifität 55, 56, 302                    transitional 32, 36
Sprachausgabe 31                          TSconfig 360
Sprachen 369                              tt_news 328
Standard Mode 33, 117, 217                TYPO3 305, 323
Standard Mode       Darstellungmodi       TYPO3-Assistenten 365
Standard Mode       Full Standards Mode   Typographische Einheit 76
Standard Mode       Standards-Compliant   TypoScript 324
   Mode                                   TypoScript-Referenz 338
Standardaufgaben 154


                                                                                413
Index




U                                        X
Überschriften 218, 309, 372              xampp 326
Übersetzungen 329                        x-Höhe [ex] 76
UID 374                                  XHTML 340
Umrechnung relativer Schriftgrößen 144   XHTML 1.0 32, 35
ungeordnete Liste 353                       Transitional 47
unsichtbar 174                           XHTML 1.1 und 2.0 32
Untertitel 367                           XML-Prolog 33, 59, 342
User TSconfig 360                        xt:Commerce 305, 391
                                         xtc4 392
V
                                         Y
Validator 60
valide 41                                YAML-Framework 49, 114, 153
Valider Code 303                           Aufbereitung der Inhalte 293
Validierung von HTML Seiten 318            CSS-Anpassungen für den Internet
Validierungsservice 303                      Explorer 186
vertikale Scrollbalken 47, 180             Das CSS-Konzept 175
vertikale Trennlinien 241                  Die Erstellung des Drucklayouts 220
Verzeichnisstruktur 392                    Gestaltung der Inhalte 218
View formatted Source Extension 320        Layoutentwicklung 235
Viewport 24, 47, 82, 180, 271              Layoutkonzept von www.yaml.de 201
vlist 159                                  Optimierung für den Praxiseinsatz 299
voice-family 66                            Subtemplates 225
Vorlage 368                                Updates 201
                                           Verzeichnisstruktur 157
W                                          XHTML-Grundgerüst 160

Web Accessibility Toolbar 315            Z
Web Developer Extension 314, 315, 318
Webdesign 21                             Zauber-Bild 376
Webkrauts 108                            Zentimeter [cm]     Maßeinheiten
Webstandards 22, 34, 154                 zentrales Stylesheet 157, 176, 177, 202,
Word Wide Web       WWW                     238
word-wrap                                   Einbindung 177
 break-word 198                          Zentrierung des Layouts 268
World Wide Web 23                        z-index 184
Wurzelverzeichnis 342                    Zoll (Inch) [in]  Maßeinheiten
WWW 23                                   Zugänglichkeit 26, 315
WYSIWYG 371                              Zugriffsrechte 386
WYSIWYG-Editor 232




414