Upload
lykhanh
View
223
Download
1
Embed Size (px)
Citation preview
Auf einen Blick
Auf einen Blick
TEIL I Contao kennenlernen und installieren
1 Das ist Contao ......................................................................................................... 31
2 Schnelldurchlauf: So funktioniert Contao ..................................................... 41
3 Der Offline-Webspace: XAMPP und MAMP .................................................. 57
4 Die Installation von Contao ................................................................................ 77
TEIL II Die erste Website mit Contao
5 Ein kurzer Rundgang im Backend ..................................................................... 113
6 Die erste Website mit Contao ........................................................................... 129
7 Contao und CSS: Webseiten gestalten ........................................................... 163
8 Das CSS-Framework von Contao ...................................................................... 201
9 Navigationen erstellen in Contao .................................................................... 231
10 Inhaltselemente für Texte und Bilder ............................................................. 265
11 Weitere nützliche Inhaltselemente ................................................................. 303
TEIL III Formulare, Erweiterungen und mobile Version
12 Kontakt: der Formulargenerator von Contao ............................................... 333
13 Suchfunktion: die Beispielsite durchsuchen ................................................ 365
14 Bloggen: die Erweiterung »Nachrichten« ...................................................... 387
15 Die Erweiterungen »Events« und »FAQ« ....................................................... 431
16 Die Erweiterung »Newsletter« .......................................................................... 451
17 Startseite und Sidebar gestalten ...................................................................... 465
18 Mobile Webseiten ................................................................................................. 485
TEIL IV Systemverwaltung
19 Der Theme-Manager ............................................................................................ 513
20 SEO: die Optimierung für Suchmaschinen ................................................... 529
21 Mitglieder: im Frontend angemeldete Besucher ........................................ 555
22 Benutzer: im Backend angemeldete Mitarbeiter ........................................ 577
23 Wartung: die Website im Alltag ....................................................................... 593
TEIL V Tipps und Tricks
24 Tipps und Tricks bei der Arbeit mit Inhalten ................................................ 613
25 Tipps und Tricks zur Systemverwaltung ........................................................ 631
Inhalt
5
Inhalt
Geleitwort zur dritten Auflage von Thomas Weitzel .............................................................. 23
Geleitwort zur ersten Auflage von Leo Feyer ............................................................................ 25
Vorwort zur dritten Auflage ............................................................................................................ 27
TEIL I Contao kennenlernen und installieren
1 Das ist Contao 31
1.1 Contao ist ein Content-Management-System ................................................ 31
1.1.1 Brauchen Sie überhaupt ein Content-Management-System? ........... 31
1.1.2 Ein CMS auf dem eigenen Webspace erfordert Know-how ................ 32
1.1.3 Contao unterstützt Sie bei Inhalt, Gestaltung und Funktionen ......... 33
1.2 Die Website zum Programm: »contao.org« .................................................... 34
1.3 Ein paar Highlights von Contao ......................................................................... 35
1.3.1 Klassiker: Was an Contao schon immer Klasse war ............................ 35
1.3.2 Und das ist neu: Highlights in Contao 3 ................................................ 37
1.4 Die Community im Web: »contao-community.de« ....................................... 38
1.4.1 Tipps zur Benutzung des Forums ........................................................... 39
1.4.2 Fragen zum Buch bitte auch im Forum stellen .................................... 39
2 Schnelldurchlauf: So funktioniert Contao 41
2.1 Das Frontend ist die Website .............................................................................. 42
2.2 Das Backend ist die Verwaltungsabteilung ..................................................... 43
2.3 Die Seitenstruktur ist das Fundament der Website ....................................... 45
2.4 Themes bestimmen das Aussehen der Site ..................................................... 46
2.5 Module erzeugen den Quelltext für das Frontend ........................................ 47
2.6 Jede Seite hat ein Seitenlayout .......................................................................... 48
2.7 Seitenlayouts verbinden die Seiten mit Stylesheets ..................................... 50
2.8 Jeder Artikel gehört zu einer Seite .................................................................... 52
2.9 Ein Artikel besteht aus Inhaltselementen ....................................................... 53
Inhalt
6
2.10 Das Backend ist für Redakteure sehr übersichtlich ....................................... 55
2.11 Zusammenfassung – so tickt Contao ............................................................... 56
3 Der Offline-Webspace: XAMPP und MAMP 57
3.1 Der Webspace auf Ihrem Rechner ..................................................................... 57
3.1.1 Statische Webseiten: der Webspace als Lagerhalle ............................. 58
3.1.2 Content-Management-System: der Webspace als Werkstatt ........... 58
3.2 Windows: Offline-Webspace mit XAMPP ........................................................ 59
3.2.1 XAMPP für Windows installieren ........................................................... 59
3.2.2 Das XAMPP Control Panel ....................................................................... 60
3.2.3 Testen, ob der Webserver funktioniert ................................................. 62
3.2.4 Der Sicherheitscheck von XAMPP .......................................................... 63
3.3 OS X: Offline-Webspace mit MAMP .................................................................. 63
3.3.1 MAMP installieren ................................................................................... 64
3.3.2 Das Programmfenster von MAMP ......................................................... 64
3.3.3 Testen, ob der Webserver funktioniert ................................................. 65
3.4 Der Webserver: Apache serviert Webseiten ................................................... 66
3.4.1 Der Apache ist ein Webserver ................................................................ 66
3.4.2 »Document Root«: der Ordner für die Webseiten ............................... 67
3.5 PHP: Programmiersprache und Interpreter ..................................................... 68
3.5.1 PHP ist auf php.net zu Hause ................................................................. 68
3.5.2 PHP: als Modul oder als CGI? .................................................................. 69
3.6 MySQL serviert SQL-Datenbanken .................................................................... 71
3.6.1 Eine relationale Datenbank besteht aus Tabellen ............................... 71
3.6.2 SQL ist eine Sprache zur Verwaltung von Datenbanken ..................... 72
3.7 phpMyAdmin verwaltet die Datenbanken von MySQL ................................ 73
3.7.1 phpMyAdmin starten .............................................................................. 73
3.7.2 Eine Datenbank anlegen mit phpMyAdmin ......................................... 74
4 Die Installation von Contao 77
4.1 Vorbereitung .......................................................................................................... 77
4.1.1 Die Systemvoraussetzungen .................................................................. 77
4.1.2 Die richtige Contao-Version für dieses Buch ........................................ 78
Inhalt
7
4.2 Offline: Contao auf Ihrem Rechner installieren ............................................. 78
4.3 Die Demo »Music Academy« offline installieren ........................................... 89
4.4 Online: Contao im Web installieren .................................................................. 91
4.4.1 Informationen über Webhoster im Forum ........................................... 91
4.4.2 Den Contao-Check installieren ............................................................... 91
4.4.3 Der Contao-Check: Voraussetzungen prüfen ....................................... 92
4.4.4 Installation, Teil 1 – Dateien auf den Webspace kopieren .................. 94
4.4.5 Installation, Teil 2 – Zugangsdaten für die Datenbank ....................... 97
4.4.6 Installation, Teil 3 – das Installtool im Überblick ................................. 97
4.5 »Safe Mode Hack«: der FTP-Modus von Contao ............................................ 99
4.5.1 SMH: »Sie müssen den Safe Mode Hack auf diesem
Server verwenden« .................................................................................. 99
4.5.2 Eine Alternative zum SMH: PHP als CGI oder Fast-CGI ........................ 99
4.5.3 Online: So richten Sie den Safe Mode Hack ein .................................... 100
4.6 Hilfe bei sonstigen Installationsproblemen .................................................... 102
4.7 Umzug: von XAMPP und MAMP auf den Online-Webspace ....................... 103
4.8 Know-how: Dateiberechtigungen – das 1 × 1 zu 644 ..................................... 106
4.8.1 Besitzer, Benutzer und Berechtigungen: 644 und 755 ......................... 106
4.8.2 PHP und Contao: Benutzerrechte, Modul und (Fast)CGI ..................... 107
4.8.3 Was der Safe Mode Hack genau macht ................................................ 108
4.8.4 Sicherheitsloch: »Alles auf 777« ist keine gute Idee ............................. 108
TEIL II Die erste Website mit Contao
5 Ein kurzer Rundgang im Backend 113
5.1 Überblick: das Backend ........................................................................................ 113
5.1.1 Ganz oben im Backend: der Infobereich ............................................... 114
5.1.2 Links: der Navigationsbereich (Backend-Module) ................................ 116
5.1.3 Rechts: der Arbeitsbereich ...................................................................... 117
5.2 Das Backend-Modul »System � Einstellungen« .............................................. 118
5.2.1 Der »Titel der Webseite« ......................................................................... 119
5.2.2 Das Format für Angaben von Datum und Zeit ..................................... 120
5.3 Der Dateimanager: »System � Dateiverwaltung« .......................................... 121
5.3.1 Ordner erstellen mit dem Dateimanager ............................................. 122
5.3.2 Dateien mit dem Dateimanager hochladen ......................................... 123
Inhalt
8
5.3.3 »Synchronisieren«: Abgleich zwischen Datenbank und
Ordner »files« ........................................................................................... 124
5.3.4 Template-Ordner erstellen im Backend-Modul »Templates« ............ 125
5.4 Der Erweiterungskatalog: Erweiterungen installieren ................................. 126
5.4.1 Die Erweiterungsliste auf »contao.org« ................................................ 126
5.4.2 Eine Erweiterung aus dem Backend heraus installieren ..................... 127
6 Die erste Website mit Contao 129
6.1 »No root page found« – die Seitenstruktur erstellen ................................... 130
6.1.1 Der Startpunkt für eine neue Website .................................................. 131
6.1.2 Der Sprachen-Fallback für den Startpunkt ist wichtig ........................ 133
6.1.3 Die Startseite für die Beispielsite erstellen ........................................... 134
6.1.4 Die Seitenstruktur für die Beispielsite erweitern ................................. 135
6.2 »No layout specified« – Theme und Seitenlayout erstellen ........................ 136
6.2.1 Das erste Theme erstellen ...................................................................... 137
6.2.2 Das erste Seitenlayout erstellen und zuweisen ................................... 139
6.3 Frontend-Module für den Kopf- und den Fußbereich ................................... 140
6.3.1 Frontend-Module für den Kopf- und den Fußbereich erstellen ......... 141
6.3.2 Die Module für den Kopf- und den Fußbereich im
Seitenlayout einbinden ........................................................................... 142
6.4 Der erste Artikel und zwei Inhaltselemente ................................................... 143
6.4.1 Der Artikelbaum: die Übersicht über alle Artikel ................................. 143
6.4.2 Die Einstellungen für einen Artikel ........................................................ 144
6.4.3 Inhaltselemente zu einem Artikel hinzufügen ..................................... 146
6.4.4 Den Artikel mit dem Seitenlayout verbinden ....................................... 148
6.4.5 Inhalt für die anderen Seiten erstellen mit
»Mehrere bearbeiten« ............................................................................. 149
6.5 Ein Frontend-Modul für die Navigation: »Nav – Main« ............................... 150
6.5.1 Ein Navigationsmodul erstellen ............................................................. 150
6.5.2 Das Navigationsmodul im Seitenlayout einbinden ............................. 151
6.5.3 Die Seite »News« erstellen ..................................................................... 152
6.6 Ein kurzer Blick in den Quelltext ........................................................................ 154
6.6.1 Der Style-Block im <head> ...................................................................... 154
6.6.2 Die Layoutbereiche aus dem Seitenlayout im <body .......................... 154
Inhalt
9
6.7 Templates erstellen das HTML für den Quelltext ........................................... 156
6.7.1 In Contao gibt es viele verschiedene Arten von Templates ................ 156
6.7.2 Das HTML der Navigation im Quelltext ................................................ 157
6.7.3 Backend-Modul »Templates«: Templates update-sicher
anpassen ................................................................................................... 158
6.7.4 Ein kurzer Blick in das Template »nav_default.html5« ....................... 160
6.8 Das Contao-Prinzip: altogether now ................................................................ 161
7 Contao und CSS: Webseiten gestalten 163
7.1 Übersicht: Contao und CSS ................................................................................. 163
7.1.1 Gestatten: das CSS-Framework von Contao ......................................... 163
7.1.2 Interne oder externe Stylesheets ........................................................... 164
7.1.3 So funktionieren interne Stylesheets .................................................... 164
7.2 Der CSS-Editor von Contao: »Themes � Stylesheets« .................................... 165
7.2.1 Die Gruppe »Selektor und Kategorie« ................................................... 166
7.2.2 Breite und Höhe: die Gruppe »Abmessungen« .................................... 167
7.2.3 Elemente positionieren: die Gruppe »Position« ................................... 168
7.2.4 Box-Modell, Teil 1 – die Gruppe »Abstand und Ausrichtung« ............ 168
7.2.5 Box-Modell, Teil 2 – die Gruppe »Hintergrund« ................................... 169
7.2.6 Box-Modell, Teil 3 – die Gruppe »Rahmen« .......................................... 170
7.2.7 Text gestalten: die Gruppe »Schrift« ..................................................... 170
7.2.8 Die Gruppen Aufzählung und »Eigener Code« ..................................... 171
7.3 Das erste Stylesheet ............................................................................................. 172
7.3.1 Das erste Stylesheet erstellen: »Layout � Themes � Stylesheets« ....... 172
7.3.2 Styles für »html« und »body« erstellen ................................................. 174
7.3.3 Effektive Bedienung: Tasten und Maus in Kombination .................... 175
7.3.4 Einen Style für »#wrapper« erstellen .................................................... 176
7.3.5 Die Symbole zur Bearbeitung von Styles im Überblick ........................ 178
7.3.6 Das Stylesheet mit dem Seitenlayout verbinden ................................. 179
7.3.7 Der integrierte CSS-Reset ........................................................................ 180
7.4 Grundlegende Gestaltung für die Beispielsite ................................................ 182
7.4.1 Google Web Fonts: die Schriftart »Droid Sans« einbinden ................. 182
7.4.2 Den Kopfbereich gestalten ..................................................................... 184
7.4.3 Den Fußbereich gestalten ....................................................................... 185
7.4.4 Den Inhaltsbereich gestalten ................................................................. 187
7.4.5 Übung: die Navigation mit einem internen Stylesheet gestalten ..... 189
7.4.6 Die Beispielsite ist schon ein bisschen »responsive« ........................... 191
Inhalt
10
7.5 Tipps zur Arbeit mit internen Stylesheets ....................................................... 192
7.5.1 »Filtern«: nur Styles einer bestimmten Kategorie anzeigen .............. 192
7.5.2 »Suchen«: bestimmte Kommentare oder Selektoren suchen ............ 193
7.5.3 »Versionierung«: Versionen vergleichen und wiederherstellen ........ 194
7.5.4 Variablen in Themes und Stylesheets ................................................... 196
7.6 Arbeiten mit externen Stylesheets ................................................................... 197
7.6.1 Externe Stylesheets speichern und im Seitenlayout einbinden ......... 197
7.6.2 Teamwork: interne und externe Stylesheets zusammen ................... 199
8 Das CSS-Framework von Contao 201
8.1 Das CSS-Framework von Contao im Überblick ............................................... 201
8.1.1 CSS-Editor und CSS-Framework sind nicht dasselbe ........................... 201
8.1.2 Die Komponenten des CSS-Frameworks ............................................... 202
8.2 XHTML, HTML5 und Contao ................................................................................ 203
8.2.1 Von HTML über XHTML zu HTML5 ......................................................... 203
8.2.2 Neuerungen in HTML5: vereinfachte Schreibweise und
neue Elemente ......................................................................................... 204
8.2.3 In Contao haben Sie die Wahl zwischen XHTML oder HTML5 ............ 205
8.2.4 HTML5 oder XHTML: Ausgabeformat im Seitenlayout
definieren ................................................................................................. 205
8.2.5 Alle Templates gibt es als HTML5 und als XHTML ................................ 206
8.3 Die HTML-Struktur: das Seitentemplate »fe_page« ..................................... 207
8.3.1 Das HTML-Grundgerüst von Contao ..................................................... 207
8.3.2 Der <head>-Bereich der »fe_page« ....................................................... 209
8.3.3 Der Style-Block von »$this->framework« .............................................. 210
8.3.4 Stylesheets einbinden: »$this->stylesheets« ....................................... 211
8.3.5 »fe_page.html5« enthält neue HTML5-Strukturelemente ................. 212
8.3.6 »html5shim« – HTML5 für Internet Explorer 7 und 8 via
JavaScript .................................................................................................. 212
8.4 Der Kern des CSS-Frameworks: »layout.css« .................................................. 213
8.4.1 Teil 1 – ein paar allgemeine Styles ......................................................... 213
8.4.2 Teil 2 – »Holy Grail«: Weblayouts und der heilige Gral ....................... 214
8.4.3 Teil 3 – Media Query – auf kleinen Bildschirmen kein
»Holy Grail« .............................................................................................. 215
8.4.4 Teil 4 – flexible Bilder und Videos mit »max-width:100%« ................. 216
8.4.5 Teil 5 – die Bildergalerien von Contao formatieren ............................. 217
8.4.6 Teil 6 – nützliche Klassen und zusätzliche Layoutbereiche ................ 217
Inhalt
11
8.5 Der CSS-Reset von Contao im Detail ................................................................. 219
8.5.1 Teil 1 – der Reset ....................................................................................... 219
8.5.2 Teil 2 – grundlegende Formatierung ..................................................... 220
8.5.3 Teil 3 – grundlegende Schriftformatierung .......................................... 220
8.5.4 Teil 4 – Abstände ...................................................................................... 221
8.6 Das »Responsive Grid« von Contao .................................................................. 221
8.6.1 Was ist überhaupt »responsive«? .......................................................... 222
8.6.2 Und was bitte ist ein »Grid«? ................................................................. 222
8.6.3 Responsive Grid, Teil 1 – das Fundament für das Grid ......................... 224
8.6.4 Responsive Grid, Teil 2 – das Grid wird ein Grid ................................... 225
8.6.5 Responsive Grid, Teil 3 – das Grid wird responsive .............................. 226
8.7 Contao und CSS3 ................................................................................................... 227
8.7.1 Eine kurze Geschichte von CSS ............................................................... 227
8.7.2 Wofür man CSS3 heute schon nutzen kann ......................................... 228
8.7.3 Die Browser-Präfixe: »-moz-«, »-webkit-«, »-o-« und »-ms-« ............. 229
8.7.4 Interne Stylesheets und CSS3 ................................................................. 229
8.7.5 Fallback ältere IEs mit »CSS3 Pie« .......................................................... 230
9 Navigationen erstellen in Contao 231
9.1 So funktioniert Contao: Seiten, Module und Artikel ..................................... 231
9.2 Die Navigationsmodule von Contao im Überblick ......................................... 232
9.3 Die Seitenstruktur der Beispielsite erweitern ................................................. 234
9.4 Eine vertikale Navigation mit zwei Ebenen .................................................... 236
9.5 Eine horizontale Dropdown-Navigation .......................................................... 242
9.6 Horizontale und vertikale Navigation zusammen ......................................... 249
9.7 Meta-Navigation: eine »Individuelle Navigation« ........................................ 250
9.8 Sitemap: das Inhaltsverzeichnis der Website ................................................. 255
9.9 Weitere Navigationsmodule im Überblick ...................................................... 260
9.9.1 Quicknavigation und Quicklink .............................................................. 260
9.9.2 Navigationspfad: die Breadcrumb-Navigation »Sie sind hier« .......... 261
9.9.3 Buchnavigation: von einer Seite zur nächsten und zurück ................. 262
Inhalt
12
10 Inhaltselemente für Texte und Bilder 265
10.1 Artikel und Inhaltselemente im HTML-Quelltext .......................................... 266
10.2 Das Inhaltselement »Überschrift«: »ce_headline« ....................................... 267
10.2.1 Die Überschrift ändern: »Die Abenteuer des Lorem Ipsum« .............. 268
10.2.2 Die Überschrift gestalten ........................................................................ 269
10.3 Das Inhaltselement »Text«: »ce_text« ............................................................ 270
10.3.1 Die Eingabemaske des Inhaltselements »Text« ................................... 270
10.3.2 Der Editor TinyMCE im Überblick ........................................................... 271
10.3.3 Hyperlinks erstellen im Editor TinyMCE ................................................ 272
10.4 Das Inhaltselement »Text« mit einem Bild erweitern .................................. 275
10.4.1 Fotos auf den Webspace hochladen ...................................................... 275
10.4.2 Im Seitenlayout: »MooTools« laden und »Mediabox« aktivieren ...... 277
10.4.3 Ein Bild zum Inhaltselement »Text« hinzufügen ................................. 278
10.4.4 Das HTML für das eingefügte Bild ......................................................... 280
10.4.5 Eingefügte Bilder per CSS gestalten ...................................................... 281
10.5 Das Inhaltselement »Bild«: »ce_image« ......................................................... 282
10.5.1 Das Inhaltselement »Bild« im Einsatz ................................................... 282
10.5.2 »Bild-Einstellungen«: die Möglichkeiten der Bildanpassung ............. 284
10.6 Das Inhaltselement »Galerie«: »ce_gallery« .................................................. 287
10.6.1 Eine Bildergalerie erstellen ..................................................................... 288
10.6.2 Praktisch: die Reihenfolge der Bilder per Drag & Drop festlegen ...... 290
10.6.3 Das HTML für die Bildergalerie ............................................................... 291
10.6.4 »Meta-Informationen«: die Beschriftung für die Fotos eingeben ..... 292
10.6.5 Zauberhaft: Dateien in der Dateiverwaltung nachträglich
umbenennen ............................................................................................ 294
10.7 Das Inhaltselement »Top-Link«: »ce_toplink« ............................................... 296
10.7.1 Das Inhaltselement »Top-Link« einfügen ............................................. 297
10.7.2 Das Inhaltselement »Top-Link« gestalten ............................................ 298
10.7.3 Optional: »Top-Link« als Modul im Seitenlayout einbinden .............. 299
10.8 Syndikation: Drucken, PDF, Facebook, Twitter und G+ ................................ 300
10.8.1 Die Links zur Syndikation aktivieren ...................................................... 300
10.8.2 Die Links zur Syndikation per CSS gestalten ......................................... 301
Inhalt
13
11 Weitere nützliche Inhaltselemente 303
11.1 Das Inhaltselement »Tabelle«: »ce_table« ..................................................... 303
11.1.1 Der Eingabeassistent für das Inhaltselement »Tabelle« ..................... 304
11.1.2 Importieren der Daten mit einer CSV-Datei ......................................... 306
11.1.3 Das HTML für das Inhaltselement »Tabelle« ........................................ 308
11.1.4 Das Inhaltselement »Tabelle« per CSS gestalten ................................. 309
11.2 Das Inhaltselement »Akkordeon«: »ce_accordion« ...................................... 311
11.2.1 Seitenlayout vorbereiten und Artikel erstellen .................................... 312
11.2.2 Das Eingabeformular für das Inhaltselement »Akkordeon« ............... 313
11.2.3 Zugeschaut und mitgebaut: drei Akkordeons erstellen ...................... 314
11.2.4 Das HTML für ein Akkordeon .................................................................. 316
11.2.5 Das CSS zur Gestaltung eines Akkordeons ........................................... 316
11.2.6 Akkordeons mit Grafiken zur Statusanzeige ........................................ 318
11.2.7 Wie man Akkordeons sonst noch einsetzen kann ............................... 319
11.3 Externe Videos auf Webseiten einbinden ....................................................... 320
11.3.1 Video einbinden mit dem Inhaltselement »HTML«: »ce_html« ........ 320
11.3.2 Video einbinden mit einem Link im Inhaltselement »Text« ............... 323
11.4 Das Inhaltselement »Video/Audio« .................................................................. 324
11.5 Weitere Inhaltselemente im Überblick ............................................................ 326
11.5.1 Das Inhaltselement »Code«: »ce_code« ............................................... 326
11.5.2 Die »Include«-Elemente im Kurzüberblick ............................................ 328
TEIL III Formulare, Erweiterungen und mobile Version
12 Kontakt: der Formulargenerator von Contao 333
12.1 Ein Kontaktformular für die Beispielsite erstellen ......................................... 333
12.2 Das Kontaktformular gestalten ......................................................................... 345
12.2.1 Das HTML für das Kontaktformular ....................................................... 345
12.2.2 Das CSS für das Kontaktformular .......................................................... 347
12.3 Formulardaten auf der Seite »Vielen Dank« ausgeben ................................ 350
12.4 Formularfelder: die Feldtypen im Formulargenerator .................................. 351
12.4.1 Formularfelder einfügen: die Feldtypen im Überblick ........................ 351
12.4.2 Überschrift und Erklärung für zusätzliche Informationen .................. 353
12.4.3 Formularfelder gruppieren: »fieldset« und »legend« .......................... 353
12.4.4 Das Passwortfeld: automatisch mit Bestätigungsfeld ........................ 354
Inhalt
14
12.4.5 Das Select-Menü: Auswahllisten per Klick ............................................ 354
12.4.6 Das Radio-Button-Menü: Optionsfelder deluxe ................................... 357
12.4.7 Das Checkbox-Menü: Kontrollkästchen deluxe ................................... 359
12.4.8 »Datei-Upload«: Besucher können Dateien hochladen ...................... 361
12.4.9 Die Sicherheitsfrage zur Spamvermeidung .......................................... 362
13 Suchfunktion: die Beispielsite durchsuchen 365
13.1 Die Suchfunktion im Überblick .......................................................................... 365
13.2 Teil 1 – die Seite »Suchen« erstellen ................................................................. 366
13.3 Teil 2 – ein einfaches Suchformular im Kopfbereich ..................................... 374
13.4 Alternative zu Teil 2 – ein flexibleres Suchformular ...................................... 379
13.5 Die Syntax der Suchfunktion im Überblick ...................................................... 385
14 Bloggen: die Erweiterung »Nachrichten« 387
14.1 Übersicht: die Zutaten für das Nachrichtensystem ....................................... 388
14.2 Das »Newsarchiv«: Beiträge erstellen .............................................................. 389
14.2.1 Das »Newsarchiv«: ein Nachrichtenarchiv erstellen ........................... 389
14.2.2 Nachrichtenbeiträge und Teaser erstellen ........................................... 390
14.2.3 Inhaltselemente für die Newsbeiträge erstellen ................................. 394
14.3 Teaser und Beiträge im Frontend ausgeben ................................................... 395
14.3.1 Das Frontend-Modul »News – Beitrag anzeigen
[Nachrichtenleser]« erstellen ................................................................. 395
14.3.2 Das Frontend-Modul »News – Teaser anzeigen
[Nachrichtenarchiv]« erstellen ............................................................... 397
14.3.3 Das Frontend-Modul »News – Teaser anzeigen« einbinden .............. 398
14.3.4 Die URL eines Nachrichtenbeitrags ....................................................... 401
14.3.5 Optional: Template anpassen – den Link» Zurück« optimieren ......... 402
14.4 HTML und CSS: Teaser und Beiträge gestalten ............................................... 403
14.4.1 Das HTML des Moduls »News – Teaser anzeigen« .............................. 403
14.4.2 Das CSS zur Gestaltung der Teaserübersicht ........................................ 405
14.4.3 Das HTML des Moduls »News – Beitrag anzeigen« ............................. 406
14.4.4 Das CSS zur Gestaltung der einzelnen Beiträge ................................... 407
Inhalt
15
14.5 Bilder zu Teasern und Beiträgen hinzufügen .................................................. 408
14.5.1 Bilder zum Teaser hinzufügen ................................................................ 408
14.5.2 Bilder zum Beitrag in der Einzelansicht hinzufügen ............................ 410
14.6 RSS-Feeds zum Abonnieren der Beiträge erstellen ........................................ 411
14.7 Interaktion mit Besuchern: die Kommentarfunktion ................................... 414
14.7.1 Die Kommentarfunktion aktivieren ...................................................... 414
14.7.2 Kommentare schreiben und überprüfen .............................................. 416
14.7.3 Die Kommentare gestalten .................................................................... 417
14.7.4 Kommentare im Backend verwalten ..................................................... 418
14.8 Navigation: Beiträge monatsweise auswählen ............................................. 420
14.8.1 Das Frontend-Modul »Monat auswählen
[Nachrichtenarchiv-Menü]«
erstellen .................................................................................................... 421
14.8.2 Das Frontend-Modul »News – Monat auswählen« einbinden .......... 421
14.8.3 Das HTML des Frontend-Moduls »News – Monat auswählen« ......... 423
14.8.4 Das CSS für das Modul »News – Monat auswählen« .......................... 424
14.8.5 Benutzerfreundlich: ein Link, um alle Beiträge anzuzeigen ............... 425
14.9 Know-how: Nachrichten, Modultypen und Templates ................................ 427
14.9.1 Die Modultypen und die Modultemplates »mod_news*« .................. 427
14.9.2 Die vier Subtemplates »news_*« ........................................................... 428
15 Die Erweiterungen »Events« und »FAQ« 431
15.1 Terminverwaltung: die Erweiterung »Events« ............................................... 432
15.2 Einen Veranstaltungskalender erstellen .......................................................... 433
15.3 Der noch ungestaltete Kalender im Überblick ................................................ 438
15.4 HTML und CSS: den Kalender gestalten ........................................................... 440
15.4.1 Das HTML vom Frontend-Modul »Kalender« ....................................... 440
15.4.2 Das CSS zum Gestalten eines Kalenders ............................................... 442
15.4.3 Das HTML der Einzelansicht eines Events (Eventleser) ....................... 445
15.5 Die FAQ-Erweiterung: häufig gestellte Fragen ............................................... 446
15.5.1 Die Kurzanleitung für die FAQ-Erweiterung ......................................... 446
15.5.2 Die FAQ-Erweiterung gestalten ............................................................. 448
Inhalt
16
16 Die Erweiterung »Newsletter« 451
16.1 Das Backend-Modul »Newsletter« .................................................................... 452
16.1.1 Einen Verteiler erstellen .......................................................................... 453
16.1.2 Abonnenten verwalten: die Empfänger des Newsletters ................... 454
16.1.3 Einen Newsletter erstellen ..................................................................... 454
16.1.4 Einen Newsletter versenden .................................................................. 456
16.2 Newsletter im Frontend anzeigen ..................................................................... 457
16.2.1 Die Kurzanleitung zur Darstellung der Newsletter auf der Site ......... 458
16.2.2 Das HTML der Frontend-Module zur Newsletter-Darstellung ........... 459
16.3 Newsletter im Frontend abonnieren und kündigen ...................................... 460
16.3.1 Die Kurzanleitung zum Abonnieren und Kündigen ............................. 461
16.3.2 Das HTML der Frontend-Module »Abonnieren« und
»Kündigen« ............................................................................................... 462
17 Startseite und Sidebar gestalten 465
17.1 Ein neues Seitenlayout für die Startseite ......................................................... 466
17.2 Newsbeiträge und Termine auf der Startseite ............................................... 468
17.2.1 Die Frontend-Module für Newsbeiträge und Termine
erstellen .................................................................................................... 468
17.2.2 Die Frontend-Module auf der Startseite in den Artikel
einbinden .................................................................................................. 469
17.2.3 Newsbeiträge und Termine auf der Startseite gestalten .................... 470
17.2.4 Datum der Nachrichten ohne Uhrzeit darstellen ................................ 472
17.3 Sidebar: ein zufällig ausgewähltes Bild ........................................................... 474
17.3.1 Das Modul »Sidebar – Zufallsbild« erstellen ........................................ 474
17.3.2 Das Modul »Sidebar – Zufallsbild« gestalten ....................................... 475
17.4 Sidebar: der Minikalender ................................................................................... 476
17.4.1 Das Modul »Eventliste« erstellen und einbinden ................................ 477
17.4.2 Ein Modul für den Minikalender erstellen und einbinden .................. 477
17.4.3 Den Minikalender gestalten ................................................................... 478
17.5 Sidebar: Lesetipps als Dropdown-Menü .......................................................... 480
17.5.1 Lesetipps erstellen ................................................................................... 480
17.5.2 Lesetipps auswählen ohne Klick auf »Los«-Button .............................. 481
17.6 Sidebar: Newsletter abonnieren ........................................................................ 482
Inhalt
17
18 Mobile Webseiten 485
18.1 Die Besonderheiten von mobilen Webseiten ................................................. 485
18.1.1 960 Pixel? Das Web ist nicht aus Papier ............................................... 485
18.1.2 Contao und mobile Webseiten .............................................................. 486
18.2 Die Beispielsite auf kleinen Bildschirmen ........................................................ 487
18.2.1 Die Beispielseiten bei diversen Auflösungen ........................................ 487
18.2.2 Eine nur auf den ersten Blick gute Lösung ............................................ 490
18.3 »Themes � Frontend-Module«: Navigation für mobile Seiten .................... 491
18.3.1 Ein Frontend-Modul für die Hauptnavigation erstellen ...................... 491
18.3.2 Ein Frontend-Modul für die Meta-Navigation erstellen ...................... 492
18.3.3 Ein Frontend-Modul für die Navigation in der linken Spalte .............. 492
18.4 »Themes � Seitenlayout«: Layouts für mobile Seiten .................................... 493
18.4.1 Neue Seitenlayouts für mobile Seiten erstellen ................................... 493
18.4.2 Die Seitenlayouts für mobile Seiten zuweisen ..................................... 494
18.4.3 »Toggle View« – zwischen mobiler Version und
Desktop-Version wechseln ..................................................................... 497
18.5 »Themes � Stylesheet«: mobile Seiten gestalten ........................................... 498
18.5.1 Navigieren ohne Klick auf »Los« ............................................................ 499
18.5.2 Ein neues Stylesheet erstellen und einbinden ..................................... 499
18.5.3 Boxen wie im richtigen Leben: »box-sizing: border-box« ................... 500
18.5.4 Die Abstände für die Layoutbereiche anpassen ................................... 501
18.5.5 Die Navigation im Kopfbereich gestalten ............................................. 502
18.5.6 Aufräumen im Fußbereich: den Anmeldelink gestalten ..................... 504
18.5.7 Abgeschnittene Inhalte verhindern: »overflow« und
»max-width« ............................................................................................ 505
18.5.8 Die Navigation in der linken Spalte gestalten ...................................... 507
18.6 Suchfunktion und Kleinigkeiten ........................................................................ 508
TEIL IV Systemverwaltung
19 Der Theme-Manager 513
19.1 Ein Theme bestimmt das Aussehen der Website ........................................... 513
19.1.1 Der Theme-Manager verwaltet bekannte Komponenten .................. 514
19.1.2 »Theme One« von der Beispielsite exportieren .................................... 515
19.1.3 All-in-one: das Innenleben einer CTO-Datei ......................................... 516
19.1.4 Was nicht in einem Theme enthalten ist .............................................. 517
Inhalt
18
19.2 Einige Quellen für Contao-Themes ................................................................... 517
19.2.1 Einsatzgebiete: Wozu man Themes einsetzen kann ........................... 518
19.2.2 InetRobots – Themes vom Chef: www.Contao-Themes.com ............. 519
19.2.3 RockSolid Themes: rocksolidthemes.com ............................................. 519
19.2.4 Weitere Websites mit Contao-Themes ................................................. 520
19.3 Die »Music Academy«: Beispielsite im neuen Look ....................................... 521
19.4 Über die Anpassung von Themes ...................................................................... 524
19.4.1 Was im neuen Theme fehlt .................................................................... 525
19.4.2 In Artikeln eingebundene Frontend-Module sind Inhalt .................... 525
19.4.3 Reparatur: Anpassung von in Artikeln eingebundenen
Modulen .................................................................................................... 527
19.5 Sicherheitshinweise für Themes (nicht nur für Contao) ............................... 527
19.5.1 Das potenzielle Problem ......................................................................... 528
19.5.2 Vertrauenswürdige Quellen ................................................................... 528
19.5.3 Ein Theme prüfen .................................................................................... 528
19.5.4 Backend-Benutzer: Angriff von innen ................................................... 528
20 SEO: die Optimierung für Suchmaschinen 529
20.1 Lesbare Adressen: URLs umschreiben ............................................................... 530
20.1.1 Content-Management-Systeme und URLs ........................................... 530
20.1.2 »System � Einstellungen«: drei wichtige URL-Einstellungen .............. 531
20.1.3 Drei Voraussetzungen zum Umschreiben der URLs ............................ 532
20.1.4 Die Rewrite-Regel zum URL-Umschreiben in der ».htaccess« ............ 533
20.1.5 Contao im Unterordner: die »RewriteBase« in der ».htaccess« ......... 534
20.1.6 So wird’s gemacht: URLs umschreiben in der Praxis ........................... 535
20.1.7 Perfekt: URLs ohne »items« und »events« ............................................ 536
20.2 Flache oder Ordner-URLs – Contao kann beides ............................................ 538
20.2.1 URLs bei statischen Webseiten und bei CMSystemen ........................ 538
20.2.2 Contao erzeugt von Haus aus flache URLs ............................................ 538
20.2.3 Contao 3 kann auch Ordner-URLs .......................................................... 540
20.3 Seitenalias, Seitentitel und Seitenbeschreibung optimieren ...................... 541
20.3.1 Seitenname und Seitenalias im Backend von Contao ......................... 541
20.3.2 Der Titel der Seite: »<title> ... </title>« ................................................. 543
20.3.3 Die Beschreibung der Seite: »<meta name="description">« .............. 546
20.4 Abfangjäger: 404 und 403 .................................................................................. 547
20.4.1 Statusmeldungen: Der Webserver schickt eine Nummer mit ............ 547
Inhalt
19
20.4.2 404-Seite nicht gefunden: Darf’s vielleicht was anderes sein? .......... 549
20.4.3 403 Zugriff verweigert: Diese Seite gibt es, aber nicht für Sie ........... 551
20.5 Eine XML-Sitemap für Google & Co. ................................................................. 552
20.5.1 Die Google Webmaster-Tools ................................................................ 552
20.5.2 Eine XML-Sitemap in Contao erstellen .................................................. 553
21 Mitglieder: im Frontend angemeldete Besucher 555
21.1 Mitglieder und Benutzer: der Unterschied ...................................................... 555
21.2 Mitgliedergruppen und Mitglieder einrichten ............................................... 557
21.2.1 Mitgliedergruppen einrichten ................................................................ 557
21.2.2 Neue Mitglieder erstellen ....................................................................... 557
21.3 Seiten für die An- und Abmeldung erstellen ................................................... 558
21.4 Frontend-Module für die An- und Abmeldung erstellen .............................. 560
21.4.1 Die Frontend-Module zur Anmeldung im Überblick ........................... 560
21.4.2 Ein Modul für das Anmeldeformular: »[Login-Formular]« ................. 560
21.4.3 Ein Modul zur Abmeldung: »[Automatischer Logout]« ....................... 561
21.4.4 Modul für den Link zur Anmeldeseite: »[Eigener HTML-Code]« ........ 561
21.4.5 Anmeldenamen und Abmeldelink: »[Eigener HTML-Code]« .............. 562
21.5 Die erstellten Module einbinden und gestalten ............................................ 563
21.5.1 Die Frontend-Module zum An- und Abmelden in Artikeln
einbinden .................................................................................................. 563
21.5.2 Die Links zur An- und Abmeldung im Fußbereich einbinden ............. 564
21.5.3 Die Links und das Formular zur Anmeldung gestalten ....................... 565
21.5.4 Testen, ob die An- und Abmeldung funktionieren ............................... 567
21.6 Einen geschützten Downloadbereich einrichten ........................................... 568
21.7 Weitere Möglichkeiten zur Mitgliederverwaltung ........................................ 572
21.7.1 Das Modul »Passwort vergessen« ......................................................... 573
21.7.2 Das Modul »Persönliche Daten« ............................................................ 574
21.7.3 Die automatische Registrierung für Mitglieder ................................... 575
22 Benutzer: im Backend angemeldete Mitarbeiter 577
22.1 Benutzerverwaltung: die Übersicht .................................................................. 577
22.2 Die Benutzergruppe »Redakteure – Nachrichten« ........................................ 578
Inhalt
20
22.3 Die Benutzerin »Helen Lewis« einrichten ........................................................ 583
22.4 Die Benutzergruppe »Redakteure – Artikel« .................................................. 587
22.4.1 Die Benutzergruppe »Redakteure – Artikel« einrichten ...................... 587
22.4.2 Benutzer der Benutzergruppe »Redakteure – Artikel«
zuweisen ................................................................................................... 588
22.5 Zugriffsrechte für Seiten und Artikel setzen ................................................... 589
22.5.1 Zugriffsrechte: Was mit Seite und Artikel gemacht werden
darf ............................................................................................................ 590
22.5.2 Zugriffsrechte für die freigegebenen Seiten setzen ............................ 590
23 Wartung: die Website im Alltag 593
23.1 Das »System-Log« schreibt mit .......................................................................... 593
23.2 Die »Systemwartung« im Überblick ................................................................. 594
23.2.1 »Systemwartung«: Suchindex neu aufbauen ...................................... 595
23.2.2 »Systemwartung«: Daten bereinigen ................................................... 596
23.2.3 Cache leeren für Redakteure: »Persönliche Daten –
Daten bereinigen« ................................................................................... 597
23.3 Den »Cache-Flow« in Contao kontrollieren .................................................... 598
23.3.1 Cache as cache can: Cache gibt es in Contao und im Browser ........... 598
23.3.2 Der »Cache-Modus« von Contao in »System � Einstellungen« ........... 599
23.3.3 Die »Cache-Einstellungen« in der Seitenstruktur definieren ............. 599
23.4 Backups erstellen: Datenbank und Dateien sichern ...................................... 600
23.4.1 Die MySQL-Datenbank sichern .............................................................. 600
23.4.2 Die Daten auf dem Webspace sichern .................................................. 601
23.5 Updates: die Versionsnummern von Contao .................................................. 602
23.5.1 Das Bugfix-Release: 3.0.x ........................................................................ 602
23.5.2 Das Minor-Release: 3.x.0 ......................................................................... 602
23.5.3 Das Major-Release: x.0.0 ......................................................................... 603
23.5.4 Sollte ich eine funktionierende Contao-Website updaten? ................ 603
23.5.5 Checkliste vor einem Update .................................................................. 604
23.6 Der »Live Update«-Service: das automatische Update ................................. 605
23.6.1 Mit dem »Contao-Check« prüfen, ob der Webspace geeignet ist ...... 605
23.6.2 Das »Live Update« kann auch Installationen reparieren .................... 605
23.6.3 Das »Live Update« macht auch ein Datenbank-Backup ...................... 606
23.6.4 Machen Sie vor dem ersten »Live Update« ein Komplett-Backup ..... 606
23.6.5 Eine »Live Update ID« erwerben ............................................................ 606
Inhalt
21
23.7 Das manuelle Update per FTP ............................................................................ 607
23.8 Webstatistiken mit Google Analytics und Piwik ............................................ 609
TEIL V Tipps und Tricks
24 Tipps und Tricks bei der Arbeit mit Inhalten 613
24.1 Text im Fußbereich mit dem TinyMCE pflegen .............................................. 613
24.2 Recycling: Inhalte auf mehreren Seiten wiederholen ................................... 615
24.2.1 Möglichkeit 1: Für einzelne Seiten – Verknüpfungen .......................... 616
24.2.2 Möglichkeit 2: Für alle Seiten eines Seitenlayouts –
Frontend-Modul ....................................................................................... 617
24.3 Die Erweiterung für Google Maps: [dlh_googlemaps] ................................. 618
24.3.1 Die Erweiterung [dlh_googlemaps] im Überblick ................................ 618
24.3.2 Schritt 1: Eine Karte erstellen in »Inhalte � Google Maps« ................... 619
24.3.3 Schritt 2: Karten-Elemente – eine Info-Sprechblase hinzufügen ....... 620
24.3.4 Schritt 3: Das Inhaltselement »Google Map« in Contao
einbinden .................................................................................................. 620
24.3.5 Gewusst wie: die manuelle Ermittlung der Geo-Koordinaten ........... 621
24.4 Artikelteaser auf Übersichtsseiten .................................................................... 622
24.4.1 Teasertexte für die drei Artikel erstellen ............................................... 623
24.4.2 Die Teasertexte auf der Seite »Artikel« einbinden ............................... 624
24.4.3 Das HTML für die Teasertexte auf der Seite »Artikel erstellen« ......... 625
24.5 Mehrere Artikel auf einer Seite .......................................................................... 626
24.5.1 Methode 1: Nur ein Artikel pro Seite und Spalte .................................. 626
24.5.2 Methode 2: Mehrere ganze Artikel pro Seite und Spalte .................... 627
24.5.3 Methode 3: Mehrere angeteaserte Artikel pro Seite und Spalte ........ 627
24.5.4 Die Frontend-Module »Artikelliste« und »Artikelnavigation« ............ 629
25 Tipps und Tricks zur Systemverwaltung 631
25.1 Wichtige Konfigurationsdateien von Contao ................................................. 631
25.1.1 Die Systemkonfiguration: »localconfig.php« ....................................... 631
25.1.2 Die Sprachkonfiguration: »langconfig.php« ......................................... 633
25.1.3 Infos zu Datenbanktabellen: »dcaconfig.php« ..................................... 633
Inhalt
22
25.2 Tipps und Tricks zum TinyMCE ........................................................................... 634
25.2.1 Ein Stylesheet für den TinyMCE: »files/tinymce.css« .......................... 634
25.2.2 Textbausteine im TinyMCE: Inhalte aus Vorlage einfügen ................ 636
25.2.3 Die Symbolleisten des TinyMCE anpassen ............................................ 636
25.2.4 Konfiguration des TinyMCE pro Benutzergruppe anpassen ............... 638
25.3 Layouts für Fortgeschrittene .............................................................................. 639
25.3.1 Eigene Layoutbereiche erstellen und aktivieren .................................. 640
25.3.2 Eigene Seitentemplates erstellen .......................................................... 640
25.3.3 Contao mit anderen CSS-Frameworks nutzen ..................................... 641
25.4 Mehrere Websites in einer Contao-Installation ............................................. 642
25.4.1 Ein Startpunkt für jede Website ............................................................. 642
25.4.2 Mehrsprachige Websites ........................................................................ 642
25.4.3 Mehrere Domains in einer Contao-Installation ................................... 644
25.4.4 Domainumleitung: www.domain.de zu domain.de
(oder umgekehrt) ..................................................................................... 645
25.4.5 Zusammenfassung: mehrere Websites in mehreren Sprachen ......... 645
25.5 Die Inserttags im Überblick ................................................................................. 646
25.5.1 Inserttags für Link-Elemente .................................................................. 646
25.5.2 Benutzereigenschaften: Inserttags für Frontend-Benutzer ................ 648
25.5.3 Umgebungsvariablen .............................................................................. 649
25.5.4 Include-Elemente ..................................................................................... 650
25.5.5 Verschiedenes: Datum, E-Mail und Sprachen ...................................... 651
Index ..................................................................................................................................... 653
41
2
Kapitel 2
2 Schnelldurchlauf: So funktioniert Contao
In diesem Kapitel sehen Sie anhand der Online-Demo, wie Contao
tickt. Begriffe wie Frontend, Backend, Seitenstruktur, Themes, Module,
Seitenlayouts, Artikel und Inhaltselemente werden kurz erklärt und in
Aktion gezeigt.
Die Themen im Überblick:
� Das Frontend ist die Website, Seite 42
� Das Backend ist die Verwaltungsabteilung, Seite 43
� Die Seitenstruktur ist das Fundament der Website, Seite 45
� Themes bestimmen das Aussehen der Site, Seite 46
� Module erzeugen den Quelltext für das Frontend, Seite 47
� Jede Seite hat ein Seitenlayout, Seite 48
� Seitenlayouts verbinden die Seiten mit Stylesheets, Seite 50
� Jeder Artikel gehört zu einer Seite, Seite 52
� Ein Artikel besteht aus Inhaltselementen, Seite 53
� Das Backend ist für Redakteure sehr übersichtlich, Seite 55
� Zusammenfassung – so tickt Contao, Seite 56
Anhand der Online-Demo Music Academy möchte ich Ihnen in diesem Kapitel einen
schnellen Überblick geben, damit Sie gleich zu Anfang eine Vorstellung davon
bekommen, wie Contao tickt:
� CMS-Einsteiger werden vielleicht nicht gleich jedes Detail verstehen und richtig
einordnen können, lernen hier aber die wichtigsten Begriffe und Zusammen-
hänge kennen, ohne gleich das CMS installieren zu müssen.
� CMS-Umsteiger finden die Funktionsprinzipien von Contao auf wenigen Seiten kom-
primiert und können sie beim Lesen mit bereits bekannten Systemen vergleichen.
Auf den folgenden Seiten machen Sie Bekanntschaft mit Begriffen wie Frontend,
Backend, Seitenstruktur, Themes, Modul, Seitenlayouts, Artikel, Inhaltselement und
Rechteverwaltung und sehen, wie diese Komponenten bei Contao zusammenarbeiten.
2 Schnelldurchlauf: So funktioniert Contao
42
2.1 Das Frontend ist die Website
Contao besteht aus einem Frontend und einem Backend. Das Frontend ist die eigent-
liche Website, so wie ein Besucher sie sieht. Um das Frontend im Browser zu sehen,
geben Sie die ganz normale Adresse der Website ein:
� demo.contao.org/ (ohne www davor)
Das Frontend sieht so aus wie in Abbildung 2.1. Diese Webseite lag nicht fix und fertig
auf dem Webspace, sondern ist nach der Eingabe der URL von Contao automatisch
erstellt worden.
Abbildung 2.1 Das Frontend der Online-Demo »Music Academy«
Dieses Kapitel können Sie online oder offline lesen
Die Abbildungen in diesem Kapitel sind so gewählt, dass die Lektüre ohne Internetzu-
gang problemlos möglich ist. Mehr Spaß macht es aber wahrscheinlich, wenn Sie wäh-
rend der Lektüre die Music Academy im Browser öffnen und die Maus bereithalten:
� demo.contao.org/
Die Live-Demo lebt übrigens wirklich, und falls etwas nicht so ist, wie hier beschrieben,
liegt das eventuell daran, dass gleichzeitig noch andere Neugierige etwas ausprobie-
ren. Die Demo wird stündlich wieder zurückgesetzt. Die Demo-Site Music Academy ist
auch im Download-Paket von Contao enthalten, sodass Sie sie selbst installieren und
genau untersuchen können.
2.2 Das Backend ist die Verwaltungsabteilung
43
2
Registrierte Benutzer wie z.B. die Studenten der Music Academy können sich im
Frontend anmelden (Front End Login) und haben dann Zugriff auf Informationen,
die für nicht angemeldete Besucher (Gäste) unsichtbar bleiben. Die Studentin Donna
Evans (Benutzername »d.evans«, Passwort »donnaevans«) sieht nach einem Login
z.B. Informationen über ihren Kurs Violin Master Class (Abbildung 2.2).
Abbildung 2.2 Ein angemeldeter Frontend-Benutzer sieht mehr ...
2.2 Das Backend ist die Verwaltungsabteilung
Das Backend ist der Administrationsbereich, also die Verwaltungsabteilung der Web-
site. Im Backend wird aber nicht nur verwaltet, sondern auch richtig gearbeitet. Die
Struktur der Website, das Seitenlayout und die Inhalte für die einzelnen Webseiten –
alles wird hier im Backend erstellt und verwaltet.
Zutritt zum Backend haben nur Mitarbeiter, und deshalb werden am Eingang Benut-
zername und Passwort kontrolliert. Um das Backend aufzurufen, hängen Sie an die
URL des Frontends einfach /contao/ hinten an:
� demo.contao.org/contao/
Am besten öffnen Sie das Backend in einem neuen Tab oder einem zweiten Browser-
fenster, damit Sie leicht zwischen Front- und Backend hin- und herwechseln können.
Abbildung 2.3 zeigt das Anmeldeformular für das Backend.
Der Administrator der Music Academy heißt Kevin Jones, und nach einer Anmeldung
mit dem Benutzernamen »k.jones« und dem Passwort »kevinjones« sehen Sie das
Backend aus Abbildung 2.4.
2 Schnelldurchlauf: So funktioniert Contao
44
Abbildung 2.3 Die Anmeldung zum Backend von Contao
Abbildung 2.4 Das Backend nach erfolgreicher Anmeldung als »k.jones«
Im Backend gibt es drei Bereiche, die Sie später genauer kennenlernen:
.1 Infobereich (oben)
.2 Navigationsbereich (links)
.3 Arbeitsbereich (rechts)
Kevin Jones ist der Administrator der Site und hat Zugriff auf das gesamte Backend.
Der Administrator ist der Chef und darf alles. Die Benutzer Helen Lewis und James
Infobereich
ArbeitsbereichNavigationsbereich
2.3 Die Seitenstruktur ist das Fundament der Website
45
2
Wilson hingegen sehen nur den Teil des Backends, den sie für ihre Arbeit benötigen
(siehe Abschnitt 2.10 ab Seite 55).
2.3 Die Seitenstruktur ist das Fundament der Website
Contao ist ein seitenbasiertes Content-Management-System, und ein hierarchisch
aufgebauter Seitenbaum bildet das Rückgrat der Website. Wie ein Skelett einem Kör-
per verleiht der Seitenbaum einer Website sowohl Stabilität als auch Flexibilität.
Unter anderem dient die Seitenstruktur als Grundlage für die Navigation. Abbildung
2.5 zeigt oben die Navigation im Frontend und darunter die Seitenstruktur im
Backend.
Abbildung 2.5 Navigation im Frontend und Seitenstruktur im Backend
Das Backend lernen Sie später genauer kennen
Beim Schnelldurchlauf in diesem Kapitel machen Sie nur ein paar ausgesuchte Zwi-
schenstopps im Backend. In Kapitel 5, »Ein kurzer Rundgang im Backend«, lernen Sie
das Backend genauer kennen (ab Seite 113).
Frontend
Backend
2 Schnelldurchlauf: So funktioniert Contao
46
Die in der Navigation hervorgehobenen Webseiten finden Sie im Backend im Bereich
Seitenstruktur.
Mithilfe der Seitenstruktur können Sie die Site ganz einfach verwalten und mit weni-
gen Klicks neue Seiten hinzufügen oder die Reihenfolge der vorhandenen Seiten ver-
ändern. Änderungen in der Seitenstruktur wirken sich direkt auf die Navigation aus.
In der Online-Demo können Sie das live ausprobieren:
� Löschen Sie zum Beispiel die Seite Teachers im Backend, indem Sie auf das rote x
rechts daneben klicken.
� Wechseln Sie zum Frontend, und laden Sie die Startseite neu.
Die Seite Teachers ist in der Navigation nicht mehr zu sehen. We don't need no edu-
cation …
2.4 Themes bestimmen das Aussehen der Site
Das Aussehen einer Contao-Site wird von einem Theme bestimmt. Das wird »ßiehm«
gesprochen, mit einem wunderschönen »Tie-Eitsch« am Anfang und einem ziemlich
langen »ieh« in der Mitte. Nach einem Klick auf das Backend-Modul Themes im Naviga-
tionsbereich sehen Sie in der Online-Demo das Theme Music Academy (Abbildung 2.6).
Abbildung 2.6 Das Backend-Modul »Themes« im Überblick
Versehentliche Bearbeitungsschritte kann man rückgängig machen
Die Online-Demo ist unkaputtbar, und nach dem stündlichen Reset ist die Seite
Teachers sowieso wieder da. Contao bietet aber auch eine sehr komfortable Funktion,
um versehentliche Bearbeitungsschritte rückgängig zu machen: Im Navigationsbe-
reich gibt es unten links im Bereich System einen Menüpunkt namens Wiederher-
stellen. Probieren Sie ihn ruhig aus.
StylesheetsModuleSeitenlayouts
2.5 Module erzeugen den Quelltext für das Frontend
47
2
Ein Theme besteht aus Stylesheets, Modulen und Seitenlayouts, die mit einem Klick auf
die entsprechenden Symbole rechts neben dem Theme bearbeitet werden können.
2.5 Module erzeugen den Quelltext für das Frontend
Module sind in Contao kleine Programme, die den Quelltext für das Frontend erzeu-
gen. Um z.B. aus dem Seitenbaum die Navigation im Frontend zu erstellen, kommt
ein solches Modul zum Einsatz.
Eine Übersicht über verwendete Module finden Sie im Backend in Themes �
Module. Die in diesem Bereich gelisteten Module erzeugen allesamt HTML für das
Frontend und werden deshalb auch Frontend-Module genannt. Auf der Beispielsite
sieht es dort so aus wie in Abbildung 2.7.
Abbildung 2.7 Die Frontend-Module der »Music Academy«
Sie müssen die Frontend-Module natürlich nicht selbst programmieren. Für alle
wichtigen Funktionen stehen fertige Modultypen bereit, deren Namen hellgrau in
eckigen Klammern hinter den Modulnamen stehen. Rechts am Rand gibt es für jedes
Modul farbige Symbole zum Bearbeiten, Duplizieren, Verschieben, Löschen und für
Detailinformationen.
Die Hauptnavigation im Frontend wird z.B. von dem Modul Navigation – Main
navigation erzeugt, das auf dem Modultyp Navigationsmenü basiert und mit
Modul bearbeiten
2 Schnelldurchlauf: So funktioniert Contao
48
wenigen Klicks einsatzbereit ist. Zur Bearbeitung eines Moduls klicken Sie auf das in
Abbildung 2.7 rechts unten hervorgehobene gelbe Bleistiftsymbol. Sie sehen dann
die Eingabemaske aus Abbildung 2.8.
Abbildung 2.8 Das Modul »Navigation – Main navigation«
Was bei einem Navigationsmenü die Optionen wie Startlevel, Stoplevel und
Hard Limit genau bedeuten, erfahren Sie in Kapitel 9, »Navigationen erstellen in
Contao«.
2.6 Jede Seite hat ein Seitenlayout
Jede Seite basiert auf einem Seitenlayout, das die Seite in Layoutbereiche einteilt.
Wenn Sie in der Online-Demo im Backend-Modul Themes � Seitenlayouts rechts
neben Default layout [Standard] auf den gelben Bleistift klicken, können Sie die
Einstellungen für das Layout bearbeiten.
Abbildung 2.9 zeigt drei wichtige Einstellungen aus dem Standardlayout der Music
Academy. Sie können die einzelnen Bereiche auf dieser Seite wie z.B. Titel und
Standard oder Kopf- und Fusszeile mit einem Klick auf die grünen Überschriften
komfortabel ein- und ausblenden, sodass die Seite immer übersichtlich bleibt.
Templates definieren, welches HTML die Module erzeugen
Frontend-Module werden bequem per Eingabemaske im Backend konfiguriert. Wel-
ches HTML ein Modul genau erzeugt, wird über sogenannte Templates gesteuert.
2.6 Jede Seite hat ein Seitenlayout
49
2
Abbildung 2.9 Ein Seitenlayout – die wichtigsten Einstellungen
Diese Einstellungen erzeugen folgendes Seitenlayout:
.1 eine Kopfzeile ohne feste Höhe
.2 ein zweispaltiges Layout mit einer 200 px breiten linken Spalte
.3 ein zentriertes, statisches Layout mit einer Breite von 870 px
Abbildung 2.10 zeigt dieses Seitenlayout im Frontend.
Abbildung 2.10 Das Seitenlayout im Frontend
Kopfzeile
Linke Spalte: 200px
Statisches Layout – zentriert – 870px breit
2 Schnelldurchlauf: So funktioniert Contao
50
Aber ein Seitenlayout teilt die Seite nicht nur in Layoutbereiche ein, sondern
bestimmt auch, wo die einzelnen Elemente erscheinen. In Abbildung 2.10 können Sie
sehen, dass die Hauptnavigation innerhalb der Kopfzeile sitzt. Das wird im Seitenlay-
out definiert.
Wenn Sie das Default layout [Standard] bearbeiten, können Sie im Bereich
Frontend-Module sehen, dass das Modul Navigation – Main navigation dem
Bereich Kopfzeile zugeordnet ist ( siehe Abbildung 2.11).
Abbildung 2.11 Modul »Navigation – Main navigation« in »Kopfzeile«
2.7 Seitenlayouts verbinden die Seiten mit Stylesheets
In einem Seitenlayout passiert aber noch mehr, denn Seitenlayouts verbinden die
Seiten auch mit den Stylesheets. Im Backend-Modul Themes � Stylesheets sind die
vier Stylesheets basic, default, mobile und print gespeichert, mit denen die Site der
Music Academy gestaltet wird. In Klammern dahinter wird jeweils der definierte
Medientyp angezeigt. Abbildung 2.12 zeigt das Backend-Modul Themes � Style-
sheets mit den vier Stylesheets.
Im Backend-Modul Themes � Seitenlayouts werden für jedes definierte Seitenlay-
out die gewünschten Stylesheets ausgewählt. Abbildung 2.13 zeigt, dass für das Sei-
tenlayout Default neben den beiden Stylesheets basic und default auch der
sogenannte Layout-Builder aus dem CSS-Framework aktiviert wurde.
2.7 Seitenlayouts verbinden die Seiten mit Stylesheets
51
2
Abbildung 2.12 Im Backend-Bereich »Stylesheets« gibt es vier Stylesheets.
Abbildung 2.13 Mit dem Seitenlayout »Default« sind diverse Stylesheets verbunden.
Probieren Sie es ruhig einmal aus:
� Deaktivieren Sie im Seitenlayout zum Beispiel den Layout-Builder und die Style-
sheets basic und default.
� Klicken Sie unten auf der Seite auf die Schaltfläche Speichern.
� Rufen Sie das Frontend im Browser auf, und laden Sie es neu.
2 Schnelldurchlauf: So funktioniert Contao
52
Nach dieser Aktion sieht das Frontend im Browser etwas anders aus, denn die Forma-
tierungen aus den beiden Stylesheets fehlen.
2.8 Jeder Artikel gehört zu einer Seite
In Contao werden Inhalte in Artikeln gespeichert, und ein Artikel gehört immer zu
einer bestimmten Seite. Zur Illustration zeigt Abbildung 2.14 einen Artikel mit der
Überschrift »Impressions« auf der gleichnamigen Seite im Frontend.
Abbildung 2.14 Der Artikel »Impressions« im Frontend
Im Backend-Modul Artikel sehen Sie die bereits bekannte Seitenstruktur, aber die-
ses Mal mit den dazugehörigen Artikeln (Abbildung 2.15). Mit einem Klick auf die
Plus- und Minuszeichen können Sie diesen Artikelbaum bei Bedarf ein- und aus-
klappen. Auf der Seite Impressions wird ein gleichnamiger Artikel gelistet, der in
der [Hauptspalte] erscheint.
Ein Artikel ist genau genommen nur ein »Container«, ein Bereich auf einer Webseite,
der ein oder mehrere Inhaltselemente enthält. Die eigentlichen Inhalte (Texte, Grafi-
Seite
Artikel
2.9 Ein Artikel besteht aus Inhaltselementen
53
2
ken etc.) werden in diesen Inhaltselementen aufbewahrt. Ohne Inhaltselemente ist
ein Artikel im Frontend nur ein leerer Bereich und nicht zu sehen.
Abbildung 2.15 Der Artikel »Impressions« auf der Seite »Impressions«
2.9 Ein Artikel besteht aus Inhaltselementen
Artikel bestehen also aus Inhaltselementen, in denen die eigentlichen Inhalte gespei-
chert werden. Contao stellt für verschiedene Inhaltstypen vorgefertigte Inhaltsele-
mente bereit. So gibt es z.B. spezielle Inhaltselemente für Überschriften, Texte (mit
und ohne Bilder), Bildergalerien, Tabellen, Listen und vieles mehr.
Abbildung 2.16 zeigt, dass der Artikel Impressions aus drei Inhaltselementen
besteht. So können Sie die Abbildung in Ihrem Browser sehen:
� Öffnen Sie im Backend das Backend-Modul Artikel.
� Suchen Sie im Seitenbaum den Artikel Impressions [Hauptspalte].
� Klicken Sie auf das gelbe Bleistiftsymbol, um den Artikel zu bearbeiten.
Mehrere Artikel pro Seite
Auf einer Seite können natürlich auch mehrere Artikel erscheinen. Und umgekehrt
kann ein Artikel auch auf verschiedenen Seiten auftauchen, ohne dass er kopiert wer-
den muss.
Seite
Artikel
2 Schnelldurchlauf: So funktioniert Contao
54
Jetzt sehen Sie die Inhaltselemente des Artikels (Abbildung 2.16).
Abbildung 2.16 Der Artikel »Impressions« – Einstellungen und Inhaltselemente
Im oberen Bereich werden die Einstellungen des Artikels angezeigt, auch Meta-Daten
genannt. Dazu zählen z.B. der Titel des Artikels, der Autor und das Änderungsdatum.
Diese Einstellungen werden im Frontend nicht angezeigt. Unterhalb der Einstellun-
gen sehen Sie drei Inhaltselemente:
.1 ein Inhaltselement vom Typ Text mit Überschrift und Fließtext
.2 ein Inhaltselement vom Typ Galerie mit ein paar Fotos
.3 noch ein Inhaltselement vom Typ Text, dieses Mal ohne Überschrift
Abbildung 2.17 zeigt diese drei Inhaltselemente im Frontend.
Ein Artikel wird durch Inhaltselemente bildlich gesprochen in Scheibchen unterteilt,
und diese Scheibchen können einzeln bearbeitet werden. Für Redakteure ist der Vor-
teil, dass sie nie den ganzen Artikel in einem Editorfenster bearbeiten, sondern sich
immer nur um einen Teil kümmern müssen: Divide et impera.
Soll z.B. die Bildergalerie unterhalb der Textelemente am Ende des Artikels erschei-
nen, klicken Sie einfach auf das Inhaltselement Galerie und ziehen es mit der Maus
nach unten, bis es unterhalb des Inhaltselements Text steht. Einfacher geht es nicht.
Probieren Sie es aus.
Metadaten des Artikels(Artikeleinstellungen)
Inhaltselement Text (mit Überschrift)
Inhaltselement Galerie
Inhaltselement Text (ohne Überschrift)
2.10 Das Backend ist für Redakteure sehr übersichtlich
55
2
Abbildung 2.17 Der Artikel »Impressions« – Inhaltselemente im Frontend
2.10 Das Backend ist für Redakteure sehr übersichtlich
Contao hat ein sehr ausgefeiltes Rechtesystem, sodass jeder Mitarbeiter nur den Teil
des Systems sieht, den er benötigt bzw. sehen soll. Neben den Frontend-Benutzern,
die Sie ab Seite 42 schon kennengelernt haben, gibt es noch Backend-Benutzer, die
bei der Verwaltung der Website helfen.
Professor James Wilson z.B. unterrichtet den Kurs Elements of Jazz Piano und ist ver-
antwortlich für die inhaltliche Pflege der Seiten unterhalb von Courses. Wenn er sich
Inhaltselemente erleichtern den Redakteuren die Arbeit
Die Sache mit den Inhaltselementen ist ungewohnt, aber ziemlich pfiffig und ein
wichtiger Grund, warum Redakteuren die Bearbeitung der Inhalte in Contao leichter
fällt als in vielen anderen CM-Systemen, in denen immer der ganze Artikel in einem
Editorfenster erscheint.
Artikel »Impressions«
Inhaltselement Text (mit Überschrift)
Inhaltselement Galerie
Inhaltselement Text (ohne Überschrift)
2 Schnelldurchlauf: So funktioniert Contao
56
mit seinem Benutzernamen »j.wilson« und seinem Passwort »jameswilson« anmel-
det, sieht das Backend aus wie in Abbildung 2.18.
Abbildung 2.18 Übersichtlich – das Backend für »James Wilson«
Auch im Backend-Modul Dateiverwaltung sieht Professor Wilson nur die Dateien
für den von ihm betreuten Bereich der Website.
2.11 Zusammenfassung – so tickt Contao
In Contao arbeiten mehrere Komponenten zusammen, um eine Webseite zu erstellen:
� Texte, Grafiken etc. werden in Inhaltselementen gespeichert.
� Inhaltselemente gehören zu einem Artikel, der sie zusammenfasst.
� Artikel gehören zu einer Seite, auf der sie dargestellt werden.
� Die Seitenstruktur definiert, welche Seiten es gibt.
� Ein Theme bestimmt das Aussehen der Site und besteht aus Stylesheets, Modulen
und Seitenlayouts.
� Jede Seite basiert auf einem Seitenlayout, das diverse Dinge definiert:
– welche Layoutbereiche es auf einer Seite gibt
– welches Modul in welchem Layoutbereich erscheint
– welche Stylesheets zur Gestaltung der Seiten benutzt werden
� Module erzeugen den HTML-Quelltext für das Frontend.
� Stylesheets bestimmen das Aussehen der Webseiten und werden über das Seiten-
layout mit einer Seite verbunden.
Soweit dieser Schnelldurchlauf. Natürlich gibt es in Contao noch eine Menge anderer
interessanter Abteilungen wie z.B. Nachrichten, Kalender, Events, Systemverwaltung
etc., aber das Buch hat ja auch gerade erst angefangen.
129
6
Kapitel 6
6 Die erste Website mit Contao
In diesem Kapitel erstellen Sie die erste Site mit Contao. Die Reise
beginnt mit der Erstellung einer Seitenstruktur und geht über Themes
und Seitenlayouts weiter zu Frontend-Modulen, einem Artikel und
einer Navigation. Sie endet mit einem Blick in den Quelltext, einem
Exkurs zu Templates und einem Überblick über das Zusammenspiel
der Komponenten in Contao.
Die Themen im Überblick:
� »No root page found« – die Seitenstruktur erstellen, Seite 130
� »No layout specified« – Theme und Seitenlayout erstellen, Seite 136
� Frontend-Module für den Kopf- und den Fußbereich, Seite 140
� Der erste Artikel und zwei Inhaltselemente, Seite 143
� Ein Frontend-Modul für die Navigation: »Nav – Main«, Seite 150
� Ein kurzer Blick in den Quelltext, Seite 154
� Templates erstellen das HTML für den Quelltext, Seite 156
� Das Contao-Prinzip: altogether now, Seite 161
Anfangs kommen einem bei der Arbeit mit Contao Begriffe wie Seite, Theme, Seiten-
layout, Artikel, Inhaltselement, Frontend-Modul und Template wie einzelne Puzzle-
teile vor, die nicht so richtig zusammenpassen wollen. Dieses Kapitel erläutert das
Zusammenspiel dieser Komponenten und hilft Ihnen bei der Eingewöhnung.
Abbildung 6.1 zeigt, wie die Startseite der Beispielsite am Ende von Kapitel 17, »Start-
seite und Sidebar gestalten«, ausssehen wird. Nur damit Sie schon mal wissen, wohin
die Reise geht. Aber auch die längste Reise beginnt mit dem ersten Schritt, und der
wird noch nicht ganz so aussehen.
6 Die erste Website mit Contao
130
Abbildung 6.1 Die Startseite der Beispielsite am Ende von Kapitel 17
6.1 »No root page found« – die Seitenstruktur erstellen
Wenn Sie das Frontend der frisch installierten Beispielsite aufrufen, ist es recht über-
sichtlich. Links oben steht die Meldung No root page found, und sonst ist nichts
zu sehen (siehe Abbildung 6.2).
Abbildung 6.2 Das Frontend nach der Installation einer leeren Site
Das ist nicht gerade spektakulär, aber der Befund No root page found entspricht
den Tatsachen, denn im Backend gibt es tatsächlich noch keine »root page«. Genau
genommen, gibt es überhaupt noch gar keine Seiten.
6.1 »No root page found« – die Seitenstruktur erstellen
131
6
6.1.1 Der Startpunkt für eine neue Website
Die erste Seite, die Sie im Seitenbaum erstellen, ist gleich etwas ganz Besonderes,
nämlich die im Frontend monierte fehlende »root page«, die im deutschsprachigen
Backend Startpunkt einer Webseite genannt wird. Mit dem Begriff Webseite ist
in diesem Fall übrigens die Website gemeint.
Ein Startpunkt ist übrigens nicht identisch mit der Startseite für Besucher im Front-
end. Ein Startpunkt dient lediglich zu Verwaltungszwecken im Backend und taucht
im Frontend nicht auf.
Abbildung 6.3 zeigt die Einstellungen aus dem ToDo im Überblick.
ToDo: Den »Startpunkt einer Webseite« erstellen
1. Rufen Sie das Backend von Contao auf, und melden Sie sich als Administrator
an: localhost/contaobuch/contao/ (bei MAMPP mit Port 8888).
2. Öffnen Sie das Backend-Modul Layout � Seitenstruktur. Dort steht momentan
nur Keine Einträge gefunden.
3. Klicken Sie oben im Arbeitsbereich auf Neue Seite. Daraufhin erscheint eine
Zeile mit dem Titel der Webseite »Websites erstellen mit Contao«, den Sie in
System � Einstellungen vergeben haben.
4. Oberhalb dieser Zeile steht der Hinweis Legen Sie als nächstes die (neue) Posi-
tion des Elements fest. Klicken Sie dazu ganz rechts auf das braune Symbol mit
dem weißen Pfeil nach rechts, um eine neue Seite einzufügen.
5. Geben Sie im Feld Seitenname »Startpunkt Beispielsite Contaobuch« ein 1. Der
Seitenname dient nur zur Verwaltung im Backend.
6. Wählen Sie als Seitentyp die Option Startpunkt einer Webseite 2. Das Feld Seiten-
alias wird automatisch ausgefüllt.
7. Blenden Sie den Bereich Meta-Informationen ein, und geben Sie im Feld Sei-
tentitel den Text »Beispielsite Contaobuch« ein. Der Seitentitel erscheint im
Frontend als Teil des <title> und überschreibt den Eintrag Titel der Webseite
aus System � Einstellungen.
8. Öffnen Sie den Bereich DNS-Einstellungen. Geben Sie im Pflichtfeld Sprache
den Wert »de« ein, und aktivieren Sie direkt daneben das Kontrollkästchen für
den Sprachen-Fallback 3.
9. Aktivieren Sie im Bereich Veröffentlichung weiter unten das Kontrollkästchen
Seite veröffentlichen 4.
10. Bestätigen Sie Ihre Einstellungen mit Speichern und schliessen.
6 Die erste Website mit Contao
132
Abbildung 6.3 Den Startpunkt einer Webseite erstellen
Das Häkchen bei Seite veröffentlichen ist wichtig, denn sonst wird zwar in der
Datenbank eine Seite angelegt, sie bleibt aber offline.
Nach dem Klick auf Speichern und schliessen sieht der Seitenbaum im Backend
so aus wie in Abbildung 6.4. Am rechten Seitenrand sehen Sie Symbole zur Bearbei-
tung der Seite. Wenn Sie mit der Maus kurz über einem Symbol verweilen, bekom-
men Sie einen kleinen Hinweis.
6.1 »No root page found« – die Seitenstruktur erstellen
133
6Abbildung 6.4 Die Seitenstruktur mit dem Startpunkt einer Webseite
6.1.2 Der Sprachen-Fallback für den Startpunkt ist wichtig
Viele der zahlreichen Einstellungen für einen Startpunkt, die Sie in Abbildung 6.3
sehen, werden erst relevant, wenn in einer Contao-Installation mehrere Websites
verwaltet werden. Eine Sache hingegen ist bereits jetzt wichtig und deshalb sofort
erledigt worden, damit sie später nicht zu Problemen führt, und das ist der Sprachen-
Fallback.
Der Hintergrund dieser Einstellung ist, dass jeder Browser dem Webserver mitteilt, in
welcher Sprache er die Webseiten am liebsten hätte. Die bevorzugte Sprache kann
man in jedem Browser einstellen, bei Firefox z.B. unter Extras � Einstellungen �
Inhalt � Sprachen.
Ist im Startpunkt die Sprache de eingetragen, werden die Webseiten nur an Browser
ausgeliefert, die sich als Sprache Deutsch wünschen. Besucher mit anderen Sprach-
wünschen bekämen die Meldung No root page found, da für die vom Browser
gewünschte Sprache kein Startpunkt existiert.
Das gilt auch für Suchmaschinenrobots, die sich oft Englisch als erste Sprache wün-
schen. Ohne Sprachen-Fallback würden diese Robots nur die Meldung No root page
found bekommen, und Ihre Webseiten wären in den Suchmaschinen nicht vorhan-
den. Das Gemeinste daran ist, dass Sie selbst diesen Fehler nicht bemerken, denn
solange in Ihrem Browser de als erste Sprache eingestellt ist, scheint die Welt in Ord-
nung zu sein.
Das Häkchen bei Sprachen-Fallback bewirkt, dass die Webseiten unterhalb dieses
Startpunktes ausgeliefert werden, wenn es für die vom Browser gewünschte Sprache
keinen eigenen Startpunkt gibt.
Wenn kein Sprachen-Fallback aktiviert wurde ...
Falls der Sprachen-Fallback nicht aktiviert wurde, gibt es eine kaum zu übersehende,
knallrote Fehlermeldung: Bei keinem der aktiven Website-Startpunkte ohne expli-
zite DNS-Angabe wurde die Option »Sprachen-Fallback« ausgewählt.
6 Die erste Website mit Contao
134
6.1.3 Die Startseite für die Beispielsite erstellen
Nachdem der Startpunkt einer Webseite jetzt eingerichtet ist, erstellen Sie in die-
sem Abschnitt die Startseite für die Besucher der Website.
Nach diesem ToDo sieht der Seitenbaum so aus wie in Abbildung 6.5. Falls Sie nicht
alle Seiten sehen, klicken Sie auf das Pluszeichen vor dem Startpunkt oder oben im
Arbeitsbereich auf Alle umschalten.
Abbildung 6.5 Der Seitenbaum mit Startpunkt und Startseite
Sie können das ganz einfach ausprobieren. Öffnen Sie den Startpunkt zur Bearbeitung
(Klick auf den gelben Bleistift), deaktivieren Sie den Sprachen-Fallback, und klicken Sie
auf Speichern und schliessen.
Vergessen Sie nicht, den Sprachen-Fallback wieder einzuschalten.
ToDo: Eine Startseite für die Beispielsite erstellen
1. Öffnen Sie das Backend-Modul Layout � Seitenstruktur.
2. Klicken Sie im Arbeitsbereich oben auf Neue Seite.
3. Klicken Sie in der Zeile Startpunkt Beispielsite Contaobuch ganz rechts auf das
braune Symbol mit dem weißen Pfeil nach rechts, um die neue Seite als Unter-
seite zum Startpunkt einzufügen.
4. Schreiben Sie im Bereich Name und Typ in das Feld Seitenname das Wort »Start-
seite«.
5. Prüfen Sie, ob bei Seitentyp die Option Reguläre Seite ausgewählt ist.
6. Aktivieren Sie weiter unten im Bereich Veröffentlichung die Option Seite ver-
öffentlichen. Sie können sich die zahlreichen anderen Optionen auf dieser
Seite gerne anschauen, aber lassen Sie sie vorerst unverändert. Diese Optionen
kommen später an die Reihe.
7. Beenden Sie die Bearbeitung mit einem Klick auf Speichern und schliessen, um
zum Seitenbaum zurückzukehren.
6.1 »No root page found« – die Seitenstruktur erstellen
135
6
Wie Sie sehen, hat die Startseite ein anderes Symbol und ist etwas nach rechts einge-
rückt. Wenn Sie auf das Minuszeichen vor dem Startpunkt Beispielsite Contao-
buch klicken, sollte die Startseite nicht mehr zu sehen sein. Sehen Sie die Startseite
trotzdem noch, befinden sich Startseite und Startpunkt auf einer Ebene. Verschieben
Sie dann die Startseite mit einem Klick auf den blauen Pfeil, und fügen Sie sie mit den
braun hinterlegten Pfeilen an der richtigen Stelle wieder ein.
6.1.4 Die Seitenstruktur für die Beispielsite erweitern
Eine Contao-Website kann aus Hunderten oder Tausenden von Webseiten bestehen,
aber zum Üben fangen Sie erst einmal mit vier an. Später werden es dann noch mehr.
Eine Seite ist auch nur ein Datensatz
Wenn Contao eine Seite erstellt, dann ist das normalerweise keine statische Webseite,
die als Datei irgendwo auf dem Webspace gespeichert wird, sondern nur ein Daten-
satz in einer Datenbanktabelle. Deshalb heißt die Startseite hier auch nicht
index.html oder index.php, sondern einfach nur Startseite. Eine im Browser sicht-
bare Webseite wird daraus erst durch das am Ende dieses Kapitels beschriebene
Zusammenspiel aller Komponenten.
ToDo: Die Seitenstruktur für die Beispielsite erweitern
1. Öffnen Sie das Backend-Modul Layout � Seitenstruktur.
2. Klicken Sie im Arbeitsbereich oben auf den Link Neue Seite.
3. Klicken Sie in der Zeile Startseite rechts auf das kleine braune Symbol mit dem
Pfeil nach unten, um die neue Seite auf derselben Ebene wie die Startseite ein-
zufügen.
4. Schreiben Sie im Bereich Name und Typ in das Feld Seitenname den Wert
»Downloads«.
5. Prüfen Sie, ob Reguläre Seite unter Seitentyp ausgewählt ist.
6. Aktivieren Sie weiter unten im Bereich Veröffentlichung die Option Seite ver-
öffentlichen.
7. Beenden Sie die Bearbeitung dieses Mal der Abwechslung halber mit einem
Klick auf Speichern und neu ((Alt) + (N)). Sie bekommen dann sofort das For-
mular für die nächste neue Seite.
8. Erstellen Sie zwei weitere reguläre Seiten mit den Seitennamen Kontakt und
Impressum, und vergessen Sie nicht, die Seiten zu veröffentlichen.
9. Beenden Sie die Erstellung der letzten Seite mit einem Klick auf die Schaltfläche
Speichern und schliessen ((Alt) + (C)).
6 Die erste Website mit Contao
136
Nach diesem ToDo sieht der Seitenbaum im Backend so aus wie in Abbildung 6.6.
Abbildung 6.6 Der erweiterte Seitenbaum mit vier Seiten
Und so setzt sich dieser übersichtliche kleine Seitenbaum zusammen:
� Ganz oben steht die nicht anklickbare Überschrift »Websites erstellen mit Con-
tao«. Das ist der Name für die gesamte Contao-Installation, den Sie im Backend-
Modul System � Einstellungen festgelegt haben.
� Darunter gibt es den Startpunkt einer Webseite mit dem sprechenden Namen
Startpunkt Beispielsite Contaobuch. Das ist der Name der Website.
� Unterhalb des Startpunktes gibt es eingerückt vier reguläre Webseiten: Start-
seite, Downloads, Kontakt und Impressum.
Diese vier Webseiten sollten alle auf derselben Ebene liegen und gerade untereinan-
derstehen, mit keinerlei Einrückungen nach links oder rechts. Wenn Sie auf das
Minuszeichen vor dem Startpunkt Beispielsite Contaobuch klicken, sollten die
vier regulären Seiten nicht mehr zu sehen sein.
6.2 »No layout specified« – Theme und Seitenlayout erstellen
Falls Sie nach der Erstellung des Seitenbaums das Frontend bereits im Browser
betrachtet haben, sehen Sie zwar immer noch keine Webseite, aber die Meldung links
oben hat sich geändert und lautet jetzt No layout specified (siehe Abbildung 6.7).
Abbildung 6.7 »No layout specified« – neue Meldung im Frontend
6.2 »No layout specified« – Theme und Seitenlayout erstellen
137
6
Im Schnelldurchlauf am Anfang des Buches haben Sie gesehen, dass jede Seite im Sei-
tenbaum auf einem Seitenlayout basiert. Zur Beseitigung der Fehlermeldung benöti-
gen Sie also ein Seitenlayout, und das gehört immer zu einem Theme.
6.2.1 Das erste Theme erstellen
Ein Theme bestimmt das Aussehen der Website und ist eine Sammlung aus Seiten-
layouts, Stylesheets und Frontend-Modulen, die durch Templates und Layoutgrafi-
ken ergänzt werden. Mit einem Theme kann man einer Site ein anderes Design
geben, ohne ihren Inhalt zu verändern.
Ein Theme muss zunächst einen Namen haben und wissen, in welchen Ordnern die
dazugehörigen Dateien aufbewahrt werden. Das Theme, das Sie im folgenden ToDo
erstellen, heißt schlicht und einfach Theme One, da es Ihr erstes Theme ist.
Bevor Sie das folgende ToDo abarbeiten, sollten Sie prüfen, ob Sie, wie in Abschnitt
5.3.4 auf Seite 125 beschrieben, einen Template-Ordner namens theme_one erstellt
haben. Falls nicht, sollten Sie das nachholen.
Nach der Erstellung des Themes und dem Schließen des Dialogfeldes sieht das
Backend-Modul Themes so aus wie in Abbildung 6.8.
ToDo: Ein neues Theme erstellen
1. Öffnen Sie das Backend-Modul Layout � Themes.
2. Klicken Sie im Arbeitsbereich oben auf den Link Neues Theme.
3. Geben Sie im Feld Theme-Titel »Theme One« ein.
4. Geben Sie im Feld Autor Ihren Namen ein.
5. Klicken Sie im Bereich Ordner auf die Schaltfläche Auswahl ändern, und wäh-
len Sie den Ordner themes/theme_one/. Dieser Ordner liegt unterhalb von files
und enthält alle Dateien, die für das Theme benötigt werden, wie zum Beispiel
Layoutgrafiken.
6. Klicken Sie im Bereich Bildschirmfoto auf die Schaltfläche Auswahl ändern,
und wählen Sie aus dem Ordner themes/theme_one/ die Datei screenshot.png,
die Sie auf Seite 123 mit dem Dateimanager von Contao hochgeladen haben.
7. Öffnen Sie im Bereich Templates-Ordner die Auswahlliste, und wählen Sie den
Ordner theme_one. Falls in der Liste kein Ordner erscheint, müssen Sie, wie auf
Seite 125 beschrieben, einen Template-Ordner erstellen.
8. Beenden Sie die Erstellung des Themes mit Speichern und schliessen.
6 Die erste Website mit Contao
138
Abbildung 6.8 Das frisch erstellte Theme im Backend
Unter »T« wie »Theme One« wird das neue Theme gelistet. Das Bildschirmfoto hat
übrigens eine Größe von 175 × 120 Pixeln. Die Abbildung ist ihrer Zeit ein bisschen
voraus, aber so wissen Sie schon einmal ungefähr, wohin die Reise geht.
In Abbildung 6.8 sehen Sie rechts sieben Symbole zum Bearbeiten eines Themes, die
in Tabelle 6.1 der Reihe nach erklärt werden.
Bearbeiten der Theme-Einstellungen
Der gelbe Bleistift steht für die Bearbeitung. Hier können Sie die Einstellungen
für das aktuelle Theme ändern: Name, Autor und die zugewiesenen Ordner.
Theme löschen
Ein Klick auf das rote X löscht das Theme. Es erscheint eine Sicherheitsfrage,
und danach wird gelöscht.
Details zum Theme anzeigen
Ein Klick auf das kleine »i« im blauen Kreis zeigt alle Details zum Theme in
einer kleinen Übersicht.
Stylesheets erstellen und bearbeiten
Mit dem CSS-Symbol können Sie die Stylesheets für das Theme erstellen.
Das werden Sie demnächst noch ausführlich tun.
Frontend-Module erstellen und bearbeiten
Ein Klick auf das fünfte Symbol führt Sie zur Bearbeitung der Frontend-
Module, die den Quelltext für das Frontend erzeugen. Auch das werden Sie
in diesem Kapitel noch kennenlernen.
Seitenlayouts erstellen und bearbeiten
Ein Seitenlayout sorgt für die Darstellung der Seite. Direkt im Anschluss an
diesen Abschnitt erstellen Sie das erste Seitenlayout.
Tabelle 6.1 Die Symbole zur Bearbeitung von Themes
Symbole zur Bearbeitung (vergrößert)
6.2 »No layout specified« – Theme und Seitenlayout erstellen
139
6
So viel zur Erstellung des ersten Themes. Im folgenden Abschnitt erstellen Sie
zunächst ein Seitenlayout.
6.2.2 Das erste Seitenlayout erstellen und zuweisen
Das erste Seitenlayout ist ein echter Klassiker: zentriert, 960 Pixel breit, mit drei Spal-
ten sowie einem Header und einem Footer.
Damit haben Sie das erste Seitenlayout erstellt. Jetzt müssen Sie im Seitenbaum noch
festlegen, für welche Seiten es gelten soll. Da das Standardlayout zunächst einmal für
alle Seiten gilt, weisen Sie es dem Startpunkt zu. Und genau das machen Sie im fol-
genden ToDo.
Theme exportieren
Ein Theme zu exportieren bedeutet, alle Stylesheets, Frontend-Module, Sei-
tenlayouts und auch die zum Theme gehörenden Ordner in einem ZIP-
Archiv zu speichern. Dieses ZIP-Archiv kann in einer anderen Contao-Instal-
lation mit der gleichen Versionsnummer wieder importiert werden.
ToDo: Ein Seitenlayout erstellen
1. Öffnen Sie das Backend-Modul Layout � Themes.
2. Öffnen Sie die Seitenlayouts zur Bearbeitung (2. Symbol von rechts).
3. Klicken Sie im Arbeitsbereich rechts oben auf Neues Layout.
4. Geben Sie als Titel für das Layout »Standardlayout« ein.
5. Aktivieren Sie im Bereich Zeilen das Symbol ganz rechts mit einer Kopf- und
einer Fußzeile. Vergeben Sie für beide keine Höhe.
6. Wählen Sie im Bereich Spalten das dreispaltige Layout ganz rechts. Geben Sie
für die Breite der linken und der rechten Spalte jeweils »180« ein, und wählen Sie
als Einheit aus der Dropdown-Liste daneben px.
7. Blenden Sie den Bereich Stylesheets ein, und prüfen Sie, ob in der Gruppe CSS-
Framework der Layout-Builder aktiviert ist.
8. Öffnen Sie den Bereich Experten-Einstellungen, und prüfen Sie, ob das Seiten-
template fe_page und das Ausgabeformat auf HTML eingestellt sind.
9. Aktivieren Sie im Bereich Statisches Layout das gleichnamige Kontrollkästchen.
Das Layout soll eine Gesamtbreite von 960 px mit der Ausrichtung zentriert
haben.
10. Beenden Sie die Bearbeitung mit Speichern und schliessen.
Tabelle 6.1 Die Symbole zur Bearbeitung von Themes (Forts.)
6 Die erste Website mit Contao
140
Die Zuweisung des Seitenlayouts wird an alle Seiten unterhalb des Startpunktes ver-
erbt, sofern für diese kein eigenes Seitenlayout definiert wurde.
Wenn Sie das Standardlayout erstellt und zugewiesen haben, klicken Sie im Seiten-
baum auf das weiße Symbol mit dem roten Strich direkt vor dem Wort Startseite.
Dadurch wird ein neuer Tab oder Browserfenster geöffnet, in dem Sie eine leere
weiße Seite sehen (siehe Abbildung 6.9).
Abbildung 6.9 Seitenlayout erstellt und zugewiesen – leere Seite
Es ist vielleicht schwer zu glauben, aber diese leere Seite ist ein echter Fortschritt. Ers-
tens gibt es keine störende Meldung mehr, und zweitens ist das Grundgerüst der
Seite zum Teil schon vorhanden. Im Quelltext.
6.3 Frontend-Module für den Kopf- und den Fußbereich
In Contao gibt es zwei Sorten von Modulen:
� Backend-Module finden Sie im Navigationsbereich des Backends. Sie sind in die
Gruppen Inhalte, Layout, Benutzerverwaltung und System aufgeteilt.
ToDo: Das Seitenlayout dem Startpunkt zuweisen
1. Öffnen Sie das Backend-Modul Layout � Seitenstruktur.
2. Öffnen Sie den Startpunkt Beispielseite Contaobuch mit einem Klick auf den
gelben Bleistift daneben zur Bearbeitung.
3. Öffnen Sie den Bereich Layout-Einstellungen, und aktivieren Sie das Kontroll-
kästchen vor Ein Layout zuweisen.
4. Wählen Sie in der Auswahlliste Seitenlayout das Standardlayout. Lassen Sie
das Layout für mobile Seiten vorerst unverändert.
5. Beenden Sie die Bearbeitung mit Speichern und schliessen.
6.3 Frontend-Module für den Kopf- und den Fußbereich
141
6
� Frontend-Module sind, vereinfacht gesagt, kleine PHP-Programme, die irgendet-
was machen und als Ergebnis HTML für das Frontend ausgeben. Sie werden im
Backend-Modul Themes verwaltet.
Wenn Sie irgendwo in Contao einfach nur das Wort Module lesen, sind fast immer
Frontend-Module gemeint.
In diesem Abschnitt erstellen Sie den Inhalt für die Kopf- und die Fußzeile der Web-
seiten. Dazu kommt ein Frontend-Modul namens Eigener HTML-Code zum Ein-
satz, in das Sie, wie der Name andeutet, eigenes HTML schreiben.
6.3.1 Frontend-Module für den Kopf- und den Fußbereich erstellen
In den folgenden ToDos erstellen Sie zunächst jeweils ein Frontend-Modul für Kopf-
und Fußbereich. Im nächsten Abschnitt werden diese Module dann in das Seitenlay-
out eingebunden.
So viel zum Frontend-Modul für den Kopfbereich. Das Modul für den Fußbereich
folgt im nächsten ToDo. Darin kopieren Sie das Header-Modul und ändern es dann
etwas ab.
ToDo: Das Frontend-Modul »Layout – Header« erstellen
1. Öffnen Sie das Backend-Modul Layout � Themes.
2. Öffnen Sie die Frontend-Module zur Bearbeitung (3. Symbol von rechts).
3. Klicken Sie im Arbeitsbereich oben auf Neues Modul.
4. Geben Sie im Feld Titel »Layout – Header« ein.
5. Wählen Sie als Modultyp den Eintrag Eigener HTML-Code.
6. Geben Sie in das Feld HTML-Code den folgenden Quelltext ein:
<hgroup><h1>Beispielsite</h1><h2>Websites erstellen mit Contao</h2></hgroup>
7. Klicken Sie auf Speichern und Schliessen, um das Modul zu speichern.
ToDo: Das Frontend-Modul »Layout – Footer« erstellen
1. Öffnen Sie gegebenenfalls das Backend-Modul Layout � Themes � Frontend-
Module.
2. Duplizieren Sie das Modul Layout – Header mit einem Klick auf das grüne Kreuz
rechts neben dem gelben Bleistift. Nach dem Kopieren erscheint rechts oben im
Arbeitsbereich der Link Ablage leeren und darunter ein braunes Symbol mit
einem weißen Pfeil nach unten.
6 Die erste Website mit Contao
142
Im Backend sehen Sie jetzt zwei Frontend-Module: Layout – Footer und Layout –
Header. Hinter jedem Modul steht in eckigen Klammern und hellgrauer Schrift der
Modultyp, auf dem das Modul basiert.
6.3.2 Die Module für den Kopf- und den Fußbereich im Seitenlayout einbinden
Nachdem Sie die beiden Module erstellt haben, werden Sie sie jetzt in das Seitenlay-
out einbinden, damit Contao weiß, in welchem Layoutbereich der von den Modulen
erzeugte Quelltext angezeigt werden soll.
Die Entscheidung ist in diesem Fall ziemlich einfach, denn das Modul Layout – Hea-
der soll in der Kopfzeile stehen und Layout – Footer in der Fußzeile.
3. Fügen Sie das Modul mit einem Klick auf das braune Symbol mit dem weißen
Pfeil nach unten ein.
4. Ändern Sie den Eintrag im Feld Titel in Layout – Footer.
5. Ändern Sie den Quelltext im Feld HTML-Code wie folgt:
<p>Made with Contao.</p>
6. Klicken Sie auf Speichern und schliessen ((Alt) + (C)).
»Ablage leeren«: Kopieren oder Verschieben abbrechen
Um einen begonnenen Kopier- oder Verschiebevorgang abzubrechen, klicken Sie ein-
fach oben rechts im Arbeitsbereich auf Ablage leeren.
ToDo: Die Frontend-Module im Seitenlayout einbinden
1. Öffnen Sie das Backend-Modul Layout � Themes.
2. Öffnen Sie die Seitenlayouts zur Bearbeitung (2. Symbol von rechts).
3. Klicken Sie im Arbeitsbereich rechts neben dem Seitenlayout Standardlayout
auf den gelben Bleistift, um die Einstellungen zu bearbeiten.
4. Suchen Sie den Bereich Frontend-Module, und blenden Sie ihn ein.
5. Klicken Sie im Bereich Eingebundene Module zweimal auf das grüne Kreuz
rechts neben der Liste Spalte, um die vorhandene Zeile zweimal zu duplizieren.
6. Wählen Sie in der ersten Zeile aus der Liste Modul den Eintrag Layout – Header
[Eigener HTML-Code] und in der Liste Spalte die Kopfzeile.
7. Wählen Sie in der dritten Zeile aus der Liste Modul den Eintrag Layout – Footer
[Eigener HTML-Code] und in der Liste Spalte die Fusszeile.
8. Lassen Sie alle anderen Einstellungen unverändert.
9. Klicken Sie auf Speichern und schliessen ((Alt) + (C)).
6.4 Der erste Artikel und zwei Inhaltselemente
143
6
Im Frontend sehen die Seiten jetzt so aus wie in Abbildung 6.10.
Abbildung 6.10 Die Startseite mit Header und Footer
Im nächsten Abschnitt erstellen Sie einen Artikel und zwei Inhaltselemente, sodass
im Hauptbereich der Startseite ein wenig Inhalt erscheint.
6.4 Der erste Artikel und zwei Inhaltselemente
In diesem Abschnitt machen Sie den ersten Abstecher in die Gruppe Inhalte, in der
Sie nach der Erstellung und Freischaltung der Site wahrscheinlich die meiste Zeit
zubringen werden. In der Gruppe Inhalte sind nämlich alle Backend-Module ver-
sammelt, die mit der Erstellung und Verwaltung von Inhalten zu tun haben. Das
wichtigste steht gleich am Anfang und heißt Artikel.
6.4.1 Der Artikelbaum: die Übersicht über alle Artikel
Contao zeigt Ihnen im Backend-Modul Inhalte � Artikel mit dem Artikelbaum eine
Übersicht aller vorhandenen Artikel, die auf den ersten Blick eine verblüffende Ähn-
lichkeit mit dem Seitenbaum hat.
Falls der Artikelbaum bei Ihnen nicht wie in Abbildung 6.11 in voller Länge zu sehen
ist, klicken Sie im Arbeitsbereich oben auf den Link Alle umschalten.
Bei genauerem Hinsehen ist der Artikelbaum eine erweiterte Version des Seiten-
baums aus dem Backend-Modul Seitenstruktur. Der Artikelbaum zeigt alle in die-
sem Kapitel erstellten Seiten und darunter jeweils einen gleichnamigen Artikel mit
dem hellgrauen Zusatz [Hauptspalte] und einigen Symbolen zur Bearbeitung der
Artikel rechts daneben.
6 Die erste Website mit Contao
144
Abbildung 6.11 Der Artikelbaum – Übersicht über die Artikel
Wenn Sie sich wundern, woher diese Artikel stammen: Contao erstellt beim Anlegen
einer Seite automatisch einen gleichnamigen Artikel in der Hauptspalte. Da diese
Kombination im Alltag mit Abstand am häufigsten benötigt wird, ist das eine sehr
praktische Sache.
Neu in Contao 3 ist übrigens das kleine, aber feine Symbol einstellungen des Arti-
kels bearbeiten rechts neben dem gelben Bleistift, mit dem Sie direkt zu den im fol-
genden Abschnitt beschriebenen Einstellungen für den Artikel gelangen.
6.4.2 Die Einstellungen für einen Artikel
Nach einem Klick auf den gelben Bleistift rechts neben dem Artikel Startseite
[Hauptspalte] sehen Sie unterhalb der Bedienelemente zum Filtern und Suchen die
Artikel-Einstellungen und den Hinweis Keine Einträge gefunden. Mit Einträge
sind Inhaltselemente gemeint, und das stimmt, denn in diesem Artikel gibt es noch
keine Inhaltselemente (siehe Abbildung 6.12).
Abbildung 6.12 Die Einstellungen für den Artikel »Startseite«
6.4 Der erste Artikel und zwei Inhaltselemente
145
6
Zur Bearbeitung der Artikel-Einstellungen klicken Sie wie immer auf den gelben Blei-
stift. Daraufhin erscheint die in Abbildung 6.13 dargestellte Eingabemaske.
Abbildung 6.13 Die wichtigsten Einstellungen für einen Artikel
Die wichtigsten Einstellungen für einen Artikel sind die folgenden:
� Titel: Der Artikeltitel erscheint im Artikelbaum und wird als Überschrift verwen-
det, wenn der Teasertext angezeigt wird. Ohne aktivierten Teaser erscheint dieser
Titel nicht auf der Webseite.
� Autor: Hier geben Sie den Autor des Artikels ein. Vorgegeben ist der momentan
angemeldete Benutzer.
� Artikelalias wird meist leer gelassen und von Contao automatisch generiert.
Kann benutzt werden, um einen Artikel direkt aufzurufen. Im Quelltext wird der
Artikelalias als Wert für das Attribut id verwendet, sofern in den Experten-Einstel-
lungen keine andere ID vergeben wurde.
� Anzeigen in: Hier können Sie auswählen, in welchem Layoutbereich der Artikel
dargestellt werden soll. Damit der Artikel im Frontend allerdings auch wirklich
6 Die erste Website mit Contao
146
dort erscheint, muss dem Layoutbereich im Backend-Modul Seitenlayouts das
Modul Artikel zugewiesen worden sein. Der Satz klingt komplizierter, als er in
Wirklichkeit ist.
� Falls Sie Suchbegriffe eingeben, erscheinen diese automatisch im Meta-Element
keywords. Allerdings gibt es kaum noch eine Suchmaschine, die dieses Element tat-
sächlich auswertet.
� Artikel veröffentlichen: Sobald Sie das Kontrollkästchen aktivieren, wird der
Artikel im Frontend angezeigt (sofern die dazugehörige Seite auch veröffentlicht
ist). Bei einer Live-Site kann es durchaus sinnvoll sein, dass Sie das erst tun, wenn
der Artikel fertig ist. Über die Frontend-Vorschau oben im Infobereich können
Sie sich auch unveröffentlichte Artikel im Frontend anschauen.
� Mit den Feldern Anzeigen von und Anzeigen bis können Sie das Erscheinen
eines Artikels zeitlich eingrenzen.
In dieser Aufzählung nicht erwähnte Einstellungen wie Teasertext und die Kon-
trollkästchen zur Syndikation in den Experten-Einstellungen kommen später
noch dran.
6.4.3 Inhaltselemente zu einem Artikel hinzufügen
Im Schnelldurchlauf in Kapitel 2 haben Sie gelesen, dass Artikel aus Inhaltselementen
bestehen und die eigentlichen Inhalte in diesen Inhaltselementen gespeichert werden.
In diesem Abschnitt fügen Sie dem Artikel die ersten beiden Inhaltselemente hinzu.
Da der Inhalt des Textes momentan keine große Rolle spielt, benutze ich durchge-
hend Fülltext, der oft auch Blindtext genannt wird. Der bekannteste ist wahrschein-
lich »Lorem ipsum ...«, den Sie z.B. von loremipsum.de oder lipsum.com
herunterladen können. Auf der Buch-CD finden Sie in den Beispieldateien für dieses
Kapitel auch die Datei loremipsum.txt, die die beiden in Abbildung 6.15 gezeigten
Absätze enthält.
Im folgenden ToDo fügen Sie dem Artikel zwei Inhaltselemente hinzu: eine Über-
schrift und darunter ein bisschen Fülltext.
ToDo: Inhaltselemente zu einem Artikel hinzufügen
1. Öffnen Sie das Backend-Modul Inhalte � Artikel.
2. Klicken Sie im Arbeitsbereich rechts auf den gelben Bleistift neben dem Artikel
Startseite [Hauptspalte].
3. Klicken Sie im Arbeitsbereich oben auf den Link Neues Element. Danach erschei-
nen oben rechts in den Artikel-Einstellungen ein Hinweis und ein kleines brau-
nes Symbol mit einem Pfeil nach unten.
6.4 Der erste Artikel und zwei Inhaltselemente
147
6
Nach dem Speichern kehren Sie zur Seite mit den Einstellungen für den Artikel
zurück. Darunter erscheinen jetzt, wie in Abbildung 6.14 zu sehen, die soeben erstell-
ten Inhaltselemente.
Abbildung 6.14 Das erste selbst erstellte Inhaltselement
4. Klicken Sie auf das kleine braune Symbol, um das Inhaltselement direkt nach
den Artikel-Einstellungen einzufügen.
5. Wählen Sie in der Liste Elementtyp den Eintrag Überschrift aus.
6. Geben Sie im Feld Überschrift den Text »Willkommen auf der Beispielsite« ein,
und prüfen Sie, ob in der Liste daneben die Überschriftebene h1 ausgewählt ist.
7. Beenden Sie die Bearbeitung mit Speichern und neu ((Alt) + (N)). Contao prä-
sentiert Ihnen danach ein Formular zur Erstellung des Inhaltselements Text.
Unterhalb des Eingabefeldes für eine Überschrift sehen Sie im Bereich Text/
HTML/Code den Editor TinyMCE, in den Sie Fließtext eingeben und ganz einfach
formatieren können.
8. Geben Sie im Editor zwei kurze Absätze beliebigen Blindtext ein.
9. Klicken Sie auf Speichern und schliessen ((Alt) + (C)).
6 Die erste Website mit Contao
148
Falls Sie im Inhaltselement Text den gesamten Text sehen möchten, klicken Sie auf
den grünen Pfeil links unten.
Artikel und Inhaltselemente erscheinen noch nicht im Frontend, da der Artikel noch
nicht im Seitenlayout eingebunden ist.
6.4.4 Den Artikel mit dem Seitenlayout verbinden
Im folgenden ToDo prüfen Sie, ob für die Hauptspalte erstellte Artikel im Seitenlay-
out eingebunden werden, sodass der eben erstellte Artikel auch tatsächlich in der
Hauptspalte erscheint.
Contao ordnet die Zeilen mit den eingebundenen Modulen nach dem Speichern in
der Reihenfolge, in der sie im Quelltext auftreten. Viel wichtiger ist aber, dass der
Artikel im Frontend in der Hauptspalte erscheint (siehe Abbildung 6.15).
Details zu Inhaltselementen folgen später
In Contao gibt es für viele Inhaltstypen wie Überschriften, Texte (mit Bildern und
ohne), Bildergalerien, Tabellen, Listen und vieles mehr vorgefertigte Elemente. Wann
man welche wie wo am besten einsetzt, erfahren Sie in den Kapiteln 10, »Inhaltsele-
mente für Texte und Bilder«, und 11, »Weitere nützliche Inhaltselemente«.
ToDo: Den Artikel im Seitenlayout einbinden
1. Öffnen Sie das Backend-Modul Layout � Themes � Seitenlayouts.
2. Öffnen Sie das Standardlayout zur Bearbeitung.
3. Blenden Sie den Bereich Frontend-Module ein.
4. Prüfen Sie, ob dort eine Zeile existiert, bei der in der Liste Modul der Eintrag
Artikel [Artikel] und in der Liste Spalte die Hauptspalte ausgewählt ist. Sollte
das nicht der Fall sein, erstellen Sie sie, indem Sie eine der vorhandenen Zeilen
mit einem Klick auf das grüne Kreuz duplizieren und dann entsprechend ändern.
5. Lassen Sie alle anderen Einstellungen unverändert.
6. Klicken Sie auf Speichern und schliessen ((Alt) + (C)).
6.4 Der erste Artikel und zwei Inhaltselemente
149
6
Abbildung 6.15 Der Artikel erscheint in der Hauptspalte.
6.4.5 Inhalt für die anderen Seiten erstellen mit »Mehrere bearbeiten«
Die Seiten Downloads, Kontakt und Impressum schauen momentan noch ein
bisschen neidisch auf die Startseite, weil die immerhin schon eine Überschrift und
zwei Textabsätze hat.
Im folgenden ToDo lernen Sie die phantastische Option Mehrere bearbeiten ken-
nen, mit der Sie die vorhandenen Inhaltselemente einfach in andere Artikel kopieren
und dann die Überschrift entsprechend ändern.
ToDo: »Mehrere bearbeiten« – Inhalte für die anderen Seiten
1. Öffnen Sie das Backend-Modul Artikel, und klicken Sie im Arbeitsbereich auf
den gelben Bleistift rechts neben dem Artikel Startseite [Hauptspalte].
2. Klicken Sie im Artikel oben rechts auf den Link Mehrere bearbeiten.
3. Aktivieren Sie darunter das Kontrollkästchen nach Alle auswählen, um alle
Inhaltselemente zu markieren.
4. Klicken Sie unten auf die Schaltfläche Kopieren, um die markierten Inhaltsele-
mente in die Ablage zu kopieren.
5. Klicken Sie links im Navigationsbereich auf das Backend-Modul Artikel.
6. Klicken Sie im Arbeitsbereich rechts auf den gelben Bleistift neben dem Artikel
Downloads [Hauptspalte].
7. Fügen Sie die kopierten Inhaltselemente mit einem Klick auf das braune Symbol
mit dem weißen Pfeil nach unten aus der Ablage in den Artikel Downloads ein.
6 Die erste Website mit Contao
150
Nach diesem ToDo haben Sie jetzt vier Webseiten mit einem Header, einem Footer,
einer Überschrift und ein bisschen Blindtext im Inhaltsbereich. Jetzt fehlt nur noch
eine Navigation, damit Sie sich bequem hin- und herbewegen können.
6.5 Ein Frontend-Modul für die Navigation: »Nav – Main«
In diesem Abschnitt erstellen Sie ein Frontend-Modul für die Hauptnavigation, das
aus dem Seitenbaum eine Navigation erzeugt und das über das Seitenlayout so ein-
gebunden wird, dass es in der linken Spalte erscheint.
6.5.1 Ein Navigationsmodul erstellen
Das Erstellen der Hauptnavigation besteht aus zwei Schritten: Zuerst müssen Sie das
Modul erstellen und konfigurieren, danach wird im Seitenlayout festgelegt, in wel-
chem Bereich das Modul erscheinen soll.
8. Öffnen Sie die das Inhaltselement Überschrift zur Bearbeitung, und ändern Sie
den Text der Überschrift in »Downloads«.
9. Klicken Sie auf Speichern und schliessen ((Alt) + (C)).
10. Wiederholen Sie diese Schritte sinngemäß, sodass Sie auch auf den Seiten Kon-
takt und Impressum jeweils eine Überschrift und ein bisschen Text einfügen.
ToDo: Ein Navigationsmodul erstellen
1. Öffnen Sie das Backend-Modul Layout � Themes.
2. Öffnen Sie die Frontend-Module zur Bearbeitung (3. Symbol von rechts).
3. Klicken Sie im Arbeitsbereich oben auf Neues Modul.
4. Geben Sie im Feld Titel »Nav – Main« ein.
5. Lassen Sie das Feld Überschrift einfach leer, da die Navigation keine Überschrift
haben soll.
6. Prüfen Sie, ob als Modultyp Navigationsmenü ausgewählt ist.
7. Lassen Sie alle anderen Optionen wie Startlevel, Stoplevel und Hardlimit
unverändert, und denken Sie nicht zu viel darüber nach. Das kommt ausführlich
in Kapitel 9, »Navigationen erstellen mit Contao«.
8. Überprüfen Sie, ob im Bereich Template-Einstellungen das Navigationstem-
plate nav_default ausgewählt ist.
9. Klicken Sie auf Speichern und schliessen ((Alt) + (C)).
6.5 Ein Frontend-Modul für die Navigation: »Nav – Main«
151
6
Abbildung 6.16 zeigt die wichtigsten im ToDo gemachten Einstellungen im Über-
blick.
Abbildung 6.16 Die wichtigsten Einstellungen für das Modul »Nav – Main«
Das Modul Nav – Main ist nach wenigen Klicks fertig zum Einsatz, aber noch gibt es
im Browser nichts zu sehen, denn Contao muss noch wissen, in welchen Layoutbe-
reich die Navigation eingebaut werden soll.
Das Modul muss übrigens nicht unbedingt Nav – Main heißen, aber wenn alle Navi-
gationsmodule mit Nav beginnen, stehen sie später alle schön ordentlich unterein-
ander und lassen sich so besser von anderen Modulen für Events, News, FAQ oder das
Layout unterscheiden.
6.5.2 Das Navigationsmodul im Seitenlayout einbinden
In diesem Abschnitt wird das soeben erstellte Navigationsmodul mit dem Seitenlay-
out verbunden oder, wie es im Contao-Jargon heißt, »eingebunden«. Nach dem fol-
genden ToDo erscheint die Navigation im Frontend.
Das Template »nav_default«
Im Template nav_default wird festgelegt, welches HTML das Navigationsmodul
erzeugen soll. Mehr dazu erfahren Sie ab Seite 156. Momentan ist es nur wichtig, dass
es ein solches Template gibt.
ToDo: Das Navigationsmodul im Seitenlayout einbinden
1. Öffnen Sie das Backend-Modul Layout � Themes � Seitenlayouts.
2. Klicken Sie rechts neben dem Standardlayout auf den gelben Bleistift, um die
Einstellungen zu bearbeiten. Sie können gerade nicht benötigte Bereiche per
Klick auf die grüne Überschrift ausblenden.
6 Die erste Website mit Contao
152
Jetzt weiß Contao, dass der vom Navigationsmodul erzeugte Quelltext in der linken
Spalte dargestellt werden soll. Abbildung 6.17 zeigt, wie das im Frontend aussieht
((Alt) + (F)).
Abbildung 6.17 Die Navigation erscheint in der linken Spalte.
Die vier Webseiten aus dem Seitenbaum werden als ungeordnete Liste dargestellt.
Klicken Sie sich am besten einmal durch die Navigation. Der Titel der Webseiten
ändert sich, und die jeweils aktuelle Seite ist in der Navigation kein Link mehr. Alles
automatisch.
6.5.3 Die Seite »News« erstellen
Um ein Gefühl für die Flexibilität des Navigationsmoduls zu bekommen, erweitern
Sie im folgenden ToDo die Seitenstruktur um die Seite News, die danach automa-
tisch in der Navigation erscheint.
3. Blenden Sie den Bereich Frontend-Module ein. Dort sind unter der Überschrift
»Eingebundene Module« bereits drei Zeilen vorhanden.
4. Fügen Sie eine neue Zeile hinzu, indem Sie eine beliebige vorhandene Zeile mit
einem Klick auf das grüne Kreuz daneben duplizieren.
5. Wählen Sie in der Liste Modul das Modul Nav – Main [Navigationsmenü] und
in der Liste Spalte die Linke Spalte.
6. Lassen Sie alle anderen Einstellungen unverändert.
7. Klicken Sie auf Speichern und schliessen ((Alt) + (C)).
6.5 Ein Frontend-Modul für die Navigation: »Nav – Main«
153
6
Damit die Seite News nicht ganz leer ist, kopieren Sie am besten wie weiter oben
beschrieben mit der Funktion Mehrere bearbeiten Überschrift und Text von einer
anderen Seite und ändern die Überschrift in »News«. Das Frontend sieht dann nach
dem Neuladen der Seite so aus wie in Abbildung 6.18.
Abbildung 6.18 Die Hauptnavigation bildet den Seitenbaum ab.
In Contao erstellen Sie mit wenigen Klicks und ohne selbst zu programmieren eine
sehr flexible Navigation. Gestaltet wird die Navigation später per CSS.
Die Arbeit mit einem Frontend-Modul besteht übrigens fast immer aus den zwei
gezeigten Schritten:
� Zuerst wird das Frontend-Modul im Bereich Layout � Themes � Frontend-
Module erstellt.
� Dann wird das Frontend-Modul ins Seitenlayout eingebunden, damit Contao
weiß, wo der vom Modul erzeugte Quelltext hingehört.
ToDo: Die Seitenstruktur um die Seite »News« erweitern
1. Öffnen Sie das Backend-Modul Layout � Seitenstruktur.
2. Fügen Sie unterhalb der Startseite eine neue Seite vom Typ Reguläre Seite ein.
3. Der Seitenname ist News.
4. Aktivieren Sie weiter unten die Option Seite veröffentlichen.
5. Klicken Sie auf Speichern und Schliessen.
6 Die erste Website mit Contao
154
Zunächst werden Sie die Module in das Seitenlayout einbinden, sodass sie automa-
tisch auf allen Seiten erscheinen. Später lernen Sie die Möglichkeit kennen, ein
Modul in einen Artikel einzubinden, sodass es nur auf einer Seite erscheint. Aber
immer schön eins nach dem anderen.
6.6 Ein kurzer Blick in den Quelltext
Nach der Erstellung der Navigation wird es Zeit, einmal einen kurzen Blick in den
Quelltext zu werfen. Dieser Quelltext ist nicht irgendwo fix und fertig auf dem Web-
space gespeichert, sondern wird dynamisch von Contao erstellt, wenn ein Browser
die Seite anfordert.
6.6.1 Der Style-Block im <head>
Im <head>-Bereich des Quelltextes gibt es einen Style-Block, in dem das Layout der
Seite definiert wird. Listing 6.1 zeigt diesen Style-Block etwas übersichtlicher forma-
tiert:
<style> #wrapper{ width:960px; margin:0 auto } #left{ width:180px; right:180px } #right{ width:180px } #container{ padding-left:180px; padding-right:180px }</style>
Listing 6.1 Der Style-Block im <head>
Diesen Style-Block generiert der Layout-Builder als Teil des CSS-Frameworks aus den
im Seitenlayout gemachten Angaben. Ergänzt wird dieser Block durch Styles, die
Contao im Ordner assets/contao/css/ in der Datei layout.css aufbewahrt, aber dazu
erfahren Sie im Abschnitt über das CSS-Framework von Contao noch mehr.
6.6.2 Die Layoutbereiche aus dem Seitenlayout im <body
Der Style-Block formatiert die Layoutcontainer, die etwas weiter unten im <body> der
Seite stehen. Listing 6.2 zeigt einen Ausschnitt aus dem vorhandenen Quelltext:
<body id="top" class=" win firefox gecko fx14"><div id="wrapper"> <header id="header"> </header> <div id="container"> <div id="main"> </div> <aside id="left"> </aside> </div>
6.6 Ein kurzer Blick in den Quelltext
155
6
<footer> </footer></div> </body>
Listing 6.2 HTML-Grundgerüst der Startseite
Die Layoutbereiche Kopfzeile, Hauptspalte, Linke Spalte und Fußzeile, die im
Seitenlayout von Contao definiert wurden, sind in Listing 6.2 fett hervorgehoben.
Der Layoutbereich Rechte Spalte ist zwar im Seitenlayout ebenfalls bereits defi-
niert, taucht aber im Quelltext nicht auf, weil darin noch keinerlei Inhalt vorhanden
ist. Er würde zwischen <aside id="left"> und <footer> stehen. In Tabelle 6.2, die die
fünf Layoutbereiche von Contao in der Reihenfolge des Auftretens im Quelltext
zeigt, ist die rechte Spalte bereits mit aufgenommen.
Bemerkenswert ist dabei die Reihenfolge der Layoutbereiche: Die Hauptspalte #main
erscheint vor den beiden Seitenspalten. Bis Contao 2.11 und bei allen klassischen,
float-basierten Layouts ist diese Reihenfolge anders: Zuerst kommt #left, dann #
right und erst danach der Inhaltsbereich #main.
Wenn die Spalten im Browser nebeneinander dargestellt werden, ist die Reihenfolge
im Quelltext nicht so wichtig, aber für Suchmaschinen und mobile Endgeräte wäre es
an sich besser, wenn der Inhaltsbereich #main im Quelltext zuerst kommt. Suchma-
schinen finden so den Inhalt schneller, und auf dem Smartphone und anderen klei-
nen Bildschirmen, auf denen die Spalten untereinanderstehen, muss man nicht erst
lange scrollen, um zum Inhalt zu gelangen.
Um die Reihenfolge aus Tabelle 6.2 zu erreichen, wurde das CSS-Framework von Con-
tao auf das »Holy-Grail«-Prinzip umgestellt, bei dem mit dem geschickten Einsatz
von float und negativen Margins genau diese Reihenfolge erreicht wird. Mehr zum
»Holy Grail« erfahren Sie im Abschnitt über das CSS-Framework.
Nr. Name im Seitenlayout HTML-Element im Quelltext
1. Kopfzeile <header id="header"></header>
2. Hauptspalte <div id="main"></div>
3. Linke Spalte <aside id="left"></aside>
4. Rechte Spalte <aside id="right"></aside>
5. Fusszeile <footer id="footer"></footer>
Tabelle 6.2 Reihenfolge der Layoutbereiche im Quelltext
6 Die erste Website mit Contao
156
6.7 Templates erstellen das HTML für den Quelltext
Zum Abschluss dieses Kapitels werfen Sie noch einen kurzen Blick auf die Funktions-
weise von Templates.
6.7.1 In Contao gibt es viele verschiedene Arten von Templates
Der Begriff Template benennt in Contao zum Teil sehr verschiedene Dinge. Zunächst
einmal gibt es eine grobe Unterscheidung in zwei große Gruppen:
� Frontend-Templates – Endung .sql
Ein Frontend-Template ist eine Datei mit der Endung .sql und eine komplette Web-
site inklusive Inhalt, Stylesheets, Benutzer und allem Drum und Dran und wird
auch Website-Template oder Contao-Template genannt.
Ein Frontend-Template wird mit dem Installtool importiert und überschreibt alle
in der Datenbank vorhandenen Daten. Sie können also nicht mal eben so ein
neues Frontend-Template ausprobieren: neues Frontend-Template = neue Web-
site = alte Website weg.
� Alle anderen Templates – Endung .html5 oder .xhtml
Diese Templates erzeugen die HTML-Ausgabe für das Frontend, die vollständig auf
solchen Templates basiert, und haben die Endungen .html5 oder .xhtml, je nach-
dem, welches Ausgabeformat Sie im Seitenlayout festgelegt haben. Da Sie in die-
sem Kapitel das Ausgabeformat HTML gewählt haben, ist die relevante Template-
Endung .html5.
Die Templates mit den Endungen .html5 und .xhtml kann man in drei Untergruppen
aufteilen, die für unterschiedliche Bereiche einer Webseite zuständig sind:
� Seitentemplates wie »fe_page.html5«
Seitentemplates erzeugen die grundlegende HTML-Struktur für die Webseiten
und werden im Contao-Jargon manchmal auch Layouts genannt, was aber eher
missverständlich sein dürfte. Für die meisten Websites sollte ein einziges Seiten-
template ausreichen, und sofern nichts wirklich Wichtiges dagegenspricht, sollte
das fe_page.html5 sein.
� Modultemplates wie »mod_newslist.html5«
Modultemplates kümmern sich um das HTML für ein Frontend-Modul oder ein
Inhaltselement und werden auch Views genannt. Es gibt sehr viele Modultempla-
tes, denn in Contao basiert die HTML-Ausgabe für alle Module und Inhaltsele-
mente auf einem Template.
� Subtemplates wie »news_short.html5«
Subtemplates sind sehr viel seltener als Modultemplates und werden auch Par-
6.7 Templates erstellen das HTML für den Quelltext
157
6
tials genannt. Sie sind für einen Teil der HTML-Ausgabe eines Moduls zuständig,
insbesondere für wiederkehrende, sich wiederholende Inhalte.
Die Templates werden übrigens gut versteckt in den Unterordnern von system/
modules aufbewahrt. Dort hat jedes Modul einen Unterordner namens templates.
Geändert und angepasst werden Templates aber niemals direkt in diesen Ordnern,
sondern immer über das Backend-Modul Layout � Templates. Gleich folgt mehr
dazu, aber zunächst werfen wir noch einen Blick auf das HTML der Navigation.
6.7.2 Das HTML der Navigation im Quelltext
Der Quelltext für die Navigation auf der Beispielsite wird vom Modultemplate mod_
navigation.html5 und dem Subtemplate nav_default.html5 erzeugt. Listing 6.3 zeigt
den Quelltext, wobei ich die Werte von href durch Punkte ersetzt habe, um das Lis-
ting übersichtlicher zu halten. Das Modultemplate mod_navigation.html5 erzeugt
das umschließende div und den Skiplink, das Subtemplate die ungeordnete Liste
dazwischen.
<!-- indexer::stop --><nav class="mod_navigation block"><a href="…" class="invisible">Navigation überspringen</a><ul class="level_1"> <li class="active first"> <span class="active first">Startseite</span> </li> <li class="sibling"> <a href="…" title="News" class="sibling">News</a> </li> <li class="sibling"> <a href="…" title="Downloads" class="sibling">Downloads</a> </li> <li class="sibling"> <a href="…" title="Kontakt">Kontakt</a> </li> <li class="sibling last"> <a href="…" title="Impressum" class="sibling last">Impressum</a>
Templates vs. Frontend-Templates
Wenn ich in diesem Buch von Templates spreche, meine ich immer die Dateien mit
der Endung .html5 bzw. .xhtml. Ein Frontend-Template mit der Endung .sql wird
immer mit vollem Namen angesprochen und als Frontend-Template, Website-Tem-
plate oder Contao-Template bezeichnet.
6 Die erste Website mit Contao
158
</li></ul><a … id="skipNavigation1" class="invisible"> </a> </nav><!-- indexer::continue -->
Listing 6.3 Die vertikale Navigation im Quelltext
Der Quelltext der Navigation ist wie folgt aufgebaut:
� Die Navigation ist im Quelltext von einem nav-Element mit den Klassen mod_navi-
gation und block umgeben. nav ist ein HTML5-Element zur Auszeichnung wichti-
ger Navigationsblöcke.
� Am Anfang und am Ende befindet sich ein zweiteiliger Skiplink, der mit der Klasse
invisible ausgeblendet wird.
� Kern der Navigation ist die ungeordnete Liste mit der Klasse level_1.
� Der aktive Navigationspunkt bekommt im li die Klasse active zugewiesen.
Außerdem wird der Link durch ein span ersetzt, das ebenfalls die Klasse active hat.
� Die anderen Listenelemente enthalten alle einen Hyperlink.
� Der erste und der letzte Listenpunkt haben zusätzlich noch die Klassen first bzw.
last.
Es handelt sich also um eine klassische ungeordnete Liste mit einem umgebenden
div und einem integrierten Skiplink. Durch die geschickte Vergabe der Klassen im
HTML ist es später ziemlich leicht, die Navigation per CSS nach Wunsch zu stylen.
<!-- indexer::stop --> und <!-- indexer::continue --> sind übrigens Anweisungen
für die interne Suchmaschine von Contao, damit sie die Zeilen dazwischen nicht in
den Suchindex aufnimmt.
6.7.3 Backend-Modul »Templates«: Templates update-sicher anpassen
Die Templates in den Ordnern unterhalb von system/modules/ sollten Sie unter kei-
nen Umständen selbst ändern. Erstens ist es gefährlich, mit der bloßen Hand in einen
Seltsame URLs: »index.php/startseite.html«
Falls Ihnen im Quelltext URLs wie index.php/startseite.html aufgefallen sind – die
werden Sie in Kapitel 20, »Das erste Theme erstellen«, in eine elegantere Variante
ändern.
6.7 Templates erstellen das HTML für den Quelltext
159
6
laufenden Motor zu greifen, und zweitens sind Änderungen in diesem Ordner nicht
update-sicher und werden beim nächsten Update von Contao überschrieben.
Für update-sichere Änderungen an Templates gibt es das Backend-Modul Templa-
tes, das im Ordner /templates direkt unterhalb des Hauptordners eine Kopie des Ori-
ginal-Templates aus dem Systemordner anlegt. Diese Kopie können Sie nach
Belieben untersuchen, bearbeiten und verändern. Bei einem Update lässt Contao die
Templates in diesem Ordner in Ruhe.
Contao sucht ein Template zunächst im Ordner /templates, wo die von Ihnen geän-
derten Templates aufbewahrt werden. Gibt es das gesuchte Template dort, wird es
benutzt. Gibt es das gesuchte Template nicht, läuft Contao schnell weiter zum System-
ordner und nimmt das Original. Langer Rede kurzer Sinn:
� Um sich das Template nav_default.html5 anzuschauen, öffnen Sie nicht das Origi-
nal aus dem Systemordner im Editor.
� Sie erstellen mit dem Backend-Modul Templates eine Kopie von nav_
default.html5 und untersuchen diese Kopie.
Genau das machen Sie im folgenden ToDo.
Nach diesem ToDo erscheint im Backend-Modul Templates ein Template mit dem
Namen nav_default.html5. Rechts daneben gibt es fünf Symbole:
� Der gelbe Bleistift dient zum Umbenennen des Templates.
� Mit dem grünen Kreuz können Sie eine Kopie des Templates erstellen.
� Der blaue Pfeil dient dazu, das Template in einen anderen Ordner zu verschieben.
� Ein blau-weißes Symbol dient zum Bearbeiten des Templates in einem Editor.
� Last, but not least gibt es ein rotes X: Damit löschen Sie das Template.
Abbildung 6.19 zeigt das Template und die fünf Symbole im Backend.
ToDo: Eine Kopie des Subtemplates »nav_default.html5« erstellen
1. Öffnen Sie in der Gruppe Layout das Backend-Modul Templates.
2. Klicken Sie im Arbeitsbereich oben auf den Link Neues Template.
3. Wählen Sie in der beeindruckend langen Liste der templates den Eintrag nav_
default.html5, indem Sie den Dateinamen in das Suchfeld eingeben und das
Template dann per Tastatur oder Maus auswählen.
4. Das Zielverzeichnis ist der Ordner templates/theme_one.
5. Klicken Sie auf die Schaltfläche Template erstellen.
6 Die erste Website mit Contao
160
Abbildung 6.19 Eine Kopie des Subtemplates »nav_default.html5«
Im Dateisystem auf Ihrem Webspace wurde im Ordner templates/theme_one direkt
unterhalb des Root-Ordners die Datei nav_default.html5 erstellt, und zwar mit einem
Speicherdatum, das noch nicht allzu lange her sein dürfte. Das Originaltemplate liegt
nach wie vor ungeändert im Systemordner.
Wenn also nach der Untersuchung des Templates im nächsten Abschnitt wider
Erwarten etwas völlig danebengehen sollte und Contao im Frontend keine Naviga-
tion mehr darstellt, dann löschen Sie einfach im Backend-Modul Templates die
Kopie von nav_default.html5, und alles ist wieder so wie vorher.
6.7.4 Ein kurzer Blick in das Template »nav_default.html5«
Falls Sie noch nie eine PHP-Anweisung wie <?php echo "Hallo"; ?> gesehen haben,
erschrecken Sie nicht:
� PHP-Anweisungen beginnen im Quelltext immer mit <?php und enden mit ?>.
� PHP-Anweisungen werden vom PHP-Interpreter abgearbeitet und durch Quell-
text ersetzt.
Der Befehl echo hat nichts mit der Akustik in gebirgigen Gegenden zu tun, sondern ist
PHP für »Schreibe in den Quelltext«. Die Anweisung <?php echo "Hallo"; ?> schreibt
also einfach das Wort »Hallo« in den Quelltext – ohne die Anführungsstriche.
Das Grundprinzip des Quelltextes in nav_default.html5 ist wie folgt:
� Zuerst wird eine ungeordnete Liste erstellt. Diese Liste bekommt die Ebene der
Seite in der Seitenstruktur gleich als Klasse mitgeliefert. Für die erste Ebene lautet
das Ergebnis <ul class="level_1">.
� Nach <ul> folgt ein foreach, und vor </ul> steht das entsprechende endforeach.
Das bedeutet nichts anderes, als dass der ganze Block dazwischen für jeden Menü-
punkt wiederholt wird. For each heißt für jeden. Programmierer nennen das eine
Schleife.
� Bei der Erstellung der Listenpunkte li innerhalb der Schleife wird zwischen akti-
ven und nicht aktiven Menüpunkten unterschieden:
– Die Bedingung if ($item['isActive']) lautet frei übersetzt »Wenn das Ding
aktiv ist«, also wenn der Menüpunkt für die gerade dargestellte Seite steht.
6.8 Das Contao-Prinzip: altogether now
161
6
– In dem Fall wird im Listenpunkt anstelle eines Hyperlinks ein span erzeugt, und
sowohl das li als auch das span bekommen die Klasse active (und noch ein paar
andere, falls welche definiert wurden).
– Ist der Menüpunkt nicht aktiv, gilt der Block unterhalb von else.
– Hier wird ein li mit einem Hyperlink a erstellt, bei dem abgefragt wird, ob Attri-
bute wie accesskey oder tabindex eingebaut werden sollen.
Das ist der Aufbau des Subtemplates für die Navigationsliste. Wie gesagt: Wenn Sie
PHP-Befehle vorher noch nie gesehen haben, wirkt das ein bisschen – sagen wir mal
– unübersichtlich. Wer mit PHP vertraut ist, wird keine Schwierigkeiten haben, hier
seine eigenen Änderungen und Wünsche umzusetzen.
Sie haben in diesem Abschnitt das Prinzip der Templates kennengelernt und dabei
eine Kopie des Templates nav_default.html5 erstellt. Diese Kopie benötigen Sie vor-
erst nicht mehr und löschen sie im folgenden ToDo gleich wieder. Contao benutzt
dann wieder das Original aus dem Systemordner.
6.8 Das Contao-Prinzip: altogether now
In diesem Kapitel haben Sie Ihre erste Website mit Contao erstellt. Sie ist zwar weder
fertig noch besonders hübsch, aber auch so eine provisorische Seite ist für ein CMS
bereits harte Arbeit. Die folgende Übersicht zeigt, was dabei genau passiert.
Los geht es immer mit dem Aufruf der URL im Browser:
� Der Besucher gibt im Browser eine URL ein, zum Beispiel:
http://localhost/contaobuch/
� Der Browser braust daraufhin los, sucht den Webserver und findet ihn auf demsel-
ben Rechner.
� Der Webserver schaut in den Ordner htdocs/contaobuch, sieht, dass dort Contao
zuständig ist. Also sagt er Bescheid, dass da eine Seite gewünscht wird – wenn
möglich, auf Deutsch.
� Contao prüft die Seitenstruktur. Dort gibt es einen Startpunkt mit der Sprache de.
Passt.
ToDo: Die Kopie des Subtemplates »nav_default.html5« löschen
1. Öffnen Sie in der Gruppe Layout das Backend-Modul Templates.
2. Öffnen Sie, falls nötig, den Ordner theme_one.
3. Klicken Sie auf das rote X rechts neben nav_default.html5.
4. Bestätigen Sie die Sicherheitsabfrage mit einem Klick auf OK.
6 Die erste Website mit Contao
162
� Zu diesem Startpunkt gehören mehrere Seiten. Contao nimmt, weil in der URL
keine bestimmte Seite gewünscht wurde, die erste reguläre Seite unterhalb des
Startpunktes, die den Status veröffentlicht hat, und das ist die Seite mit dem
Namen Startseite.
� Zur Darstellung dieser Seite im Frontend benutzt Contao ein Theme, das aus Sei-
tenlayouts, Stylesheets und Frontend-Modulen besteht.
� Da für die Startseite nichts anderes definiert wurde, nimmt Contao als Seitenlay-
out das Standardlayout, das dem übergeordneten Startpunkt zugewiesen
wurde.
� Das Seitenlayout definiert die Layoutstruktur der Webseite:
– Die Seite hat ein zentriertes, dreispaltiges Layout mit einer Breite von 960 px.
– Die linke und rechte Spalte haben eine Breite von jeweils 180 px.
– Es gibt einen Kopf- und einen Fußbereich.
– Gestaltet wird die Seite momentan nur vom Layout-Builder aus dem CSS-Frame-
work, das im Seitenlayout aktiviert ist. Im nächsten Kapitel kommen andere
Styles und Stylesheets hinzu.
� Im Seitenlayout wird außerdem definiert, welche Frontend-Module in welchem
Layoutbereich (Spalte) erscheinen:
– Das HTML aus dem Modul Layout – Header kommt in die Kopfzeile.
– Das Modul Artikel sorgt dafür, dass alle Artikel, die den Status veröffent-
licht haben und der Hauptspalte zugeordnet sind, auf der entsprechenden
Seite in der Hauptspalte erscheinen.
– Das Modul Nav – Main erscheint in der linken Spalte.
– Das HTML aus dem Modul Layout – Footer erscheint in der Fußzeile.
Mit all diesen Informationen erstellt Contao den Quelltext der Webseite, den der
Webserver an den Besucher ausliefert.
Fazit: Das »Seitenlayout« ist der Dreh- und Angelpunkt
Ohne Seitenstruktur geht in Contao gar nichts, aber der eigentliche Dreh- und Angel-
punkt ist das Seitenlayout. Es verbindet Seitenstruktur, Frontend-Module, Style-
sheets und Artikel miteinander, sodass aus all diesen Komponenten im Browser eine
ganz normale Webseite wird. Eigentlich ist es ganz einfach, wenn man erst einmal
verstanden hat, wie alles ineinandergreift.
Index
653
Index
Und hier das Stichwortverzeichnis, weil man Papier ja nicht
durchsuchen kann.
403 - Forbidden ....................................................... 551
404 - Nicht Gefunden............................................ 548
404 - Not Found ...................................................... 549
A
Ablage leeren (Backend)....................................... 142
Administrator
Konto ändern ...................................................... 578
Konto erstellen .......................................................88
Passwort vergessen ........................................... 448
Akkordeon (Inhaltselement).....................311, 319
Apache............................................................................ 66
Arbeitsbereich (Backend) .................................... 117
Artikel
als PDF speichern ............................................... 300
Artikel-Einstellungen ...............................144, 300
auf Facebook empfehlen................................. 300
auf Twitter empfehlen ..................................... 300
ausdrucken ........................................................... 300
im Seitenlayout einbinden ............................. 148
in Online-Demo ..................................................... 52
mehrere in einer Spalte.................................... 622
Teaser anzeigen .................................................. 622
Artikelteaser einsetzen......................................... 622
Auswahllisten (Formulare) ................................. 354
B
Backend
Arbeitsbereich ..................................................... 117
Aufbau....................................................................... 44
Benutzereinstellungen ..................................... 115
Benutzerpasswort ändern .............................. 115
Benutzerverwaltung ................................555, 577
Dateiverwaltung ................................................ 121
in Online-Demo ..................................................... 43
Infobereich............................................................ 114
Navigationsbereich ........................................... 116
persönliche Daten ändern .............................. 115
Seitenstruktur ............................ 45, 130, 136, 234
Systemeinstellungen......................................... 118
Tastenkürzel......................................................... 117
Template-Ordner erstellen ............................. 125
Vorschaubilder ausstellen .............................. 124
Backend-Module
Definition .............................................................. 140
Module deaktivieren ......................................... 432
Übersicht ............................................................... 116
Backups erstellen .................................................... 600
Bearbeitung mehrerer Datensätze ........236, 422,
542, 545, 564, 591, 592
Benutzer ..................................................................... 577
Admin-Konto erstellen..................................... 578
Begrüßungsmail ................................................. 587
Benutzer einrichten ........................................... 583
in Online-Demo .....................................................55
Rechtevererbung ................................................ 585
und Zugriffsrechte ............................................. 589
Unterschied zu Mitgliedern ........................... 555
Benutzerfunktion (Backend-Modul)............... 117
Benutzerfunktionen
Daten bereinigen................................................ 597
rückgängig...............................................................46
Benutzergruppe
Ausgenommene Felder .................................... 582
erlaubte Module freigeben ............................. 578
Page- und Filemounts ...................................... 580
Rechte für Erweiterungen ............................... 581
Zugriffsrechte setzen ........................................ 589
Benutzerrechte vs. Gruppenrechte ................. 585
Bild (Inhaltselement)............................................. 282
Bild-Einstellungen .................................................. 284
An Rahmen anpassen....................................... 285
exaktes Format ................................................... 286
Proportional......................................................... 284
Index
654
Bilder
Bild-Einstellungen.............................................. 284
maximale Frontend-Breite ............................. 287
Bildergalerie
Bildunterschriften .............................................. 292
erstellen ................................................................. 288
HTML-Struktur .................................................... 291
Blog......................................................................387, 429
BOM ............................................................................. 632
Browser
Präfixe für CSS3................................................... 229
Viewport ................................................................ 488
Bugfix-Release ......................................................... 602
C
Cache
Browser-Cache löschen.................................... 598
Cache-Modus wählen ....................................... 599
Cachezeit festlegen............................................ 599
Daten bereinigen.......................................482, 596
deaktivieren ......................................................... 482
CAPTCHA ................................................................... 362
Checkbox-Menü...................................................... 359
Checkliste vor Update........................................... 604
chmod ................................................................106, 107
chown .......................................................................... 106
CMS
Brauchen Sie ein CMS? ........................................ 31
erfordert Know-how ............................................ 32
Funktionsweise ...................................................... 58
und URLs ............................................................... 530
Was ist das? ............................................................. 31
Contao
Backups erstellen ............................................... 600
Bedeutung des Namens ...................................... 31
Bugfix-Release..................................................... 602
Cache-Einstellungen ......................................... 598
Contao-Check ......................................................... 91
CSS-Framework................................................... 202
Dateiverwaltung ................................................ 121
Erweiterungen installieren............................. 126
Erweiterungsliste ............................................... 126
geeigneter Webspace........................................... 91
Inserttags (Übersicht)....................................... 646
Konfigurationsdateien .................................... 631
Live Update .......................................................... 605
Log-Dateien .......................................................... 593
Major Release ...................................................... 603
manuelles Update.............................................. 607
Mehrere Websites............................................... 642
Minor Release ...................................................... 602
offline installieren.................................................78
online installieren .................................................91
Suchfunktion erstellen ..................................... 365
Systemvoraussetzungen ....................................77
Überblick Funktionsweise...............56, 161, 231
und CSS3 ................................................................ 227
Contao 3.0
externe Stylesheets ............................................ 197
Inhaltselemente in Events .............................. 433
Inhaltselemente in Nachrichten .................. 388
Mobile Webseiten............................................... 485
synchronisieren .................................................. 124
Überblick Neuerungen ........................................37
contao.org.................. 34, 42, 78, 94, 102, 117, 126,
227, 604, 605
Contao-Check .................................................... 91, 109
Contao-Forum.............................................................38
Contao-Template .................................................... 156
Content-Management-System ............................31
Copyright-Hinweis ................................................. 615
CSS
box-sizing:border-box...................................... 500
Dopplung von div .............................................. 209
horizontale Navigation ................................... 244
horizontales Dropdown .................................. 246
overflow:hidden ........................................219, 287
overflow-y ............................................................. 175
Style-Block im ...................................................... 211
vertikale Navigation ................................189, 240
CSS3
box-sizing:border-box...................................... 500
Browser-Präfixe .................................................. 229
Eigenschaften (Übersicht)............................... 228
Geschichte ............................................................. 227
und IE8 ................................................................... 230
und interne Stylesheets ................................... 229
CSS3 Pie ....................................................................... 230
CSS-Framework...............................................163, 202
Holy Grail ..............................................37, 214, 486
Media Query ...............................................215, 226
responsive ................................... 37, 215, 221, 226
CSS-Grid-Frameworks ........................................... 222
CSS-Klassen: Events ......................................440, 442
CSS-Klassen: FAQ .................................................... 448
CSS-Klassen: Formulare ....................................... 351
CSS-Klassen: Framework
block ...............................................................244, 287
clear ......................................................................... 218
invisible .................................................................. 218
Index
655
CSS-Klassen: Inhaltselemente
ce_comments ...................................................... 417
ce_image ............................................................... 283
ce_table.................................................................. 309
ce_text .................................................................... 266
ce_toplink ............................................................. 298
image_container................................................ 280
CSS-Klassen: Kalender .................................440, 442
CSS-Klassen: Module
mod_article .......................................................... 266
mod_articlenav .................................................. 263
mod_booknav ..................................................... 262
mod_breadcrumb.............................................. 261
mod_customnav ................................................ 253
mod_eventreader .............................................. 445
mod_lostPasswort............................................. 573
mod_navigation ................................................ 157
mod_personalData ........................................... 574
mod_quicklink .................................................... 260
mod_quicknav .................................................... 261
mod_sitemap ...................................................... 258
Navigationsmenü .............................................. 240
submenu ................................................................ 241
trail .......................................................................... 241
CSS-Klassen: Nachrichten ..........................427, 428
CSS-Klassen: Newsletter....................................... 459
CSS-Klassen: Sonstige
float_left ................................................................ 280
pagination ............................................................ 398
pdf_link .................................................................. 301
CSV-Datei importieren ......................................... 306
D
Dateiberechtigungen ..................................... 99, 106
Dateimanager .......................................................... 121
Dateiverwaltung ..................................................... 121
Dateien hochladen ............................................ 123
Ordner erstellen .................................................. 122
Datenbank
erstellen ......................................................74, 80, 97
exportieren (SQL-Dump) ........................103, 600
importieren (SQL-Dump) ................................ 104
Kollation................................................................... 85
Tabellen anlegen ................................................... 85
dcaconfig.php........................................ 601, 633, 638
DIFF (Versionierung) ...................................... 37, 194
DocumentRoot ........................................................... 67
Double Opt-In .......................................................... 461
E
Entwicklungsumgebung � XAMPP/MAMP
Erweiterungen
[backup_db] ......................................................... 600
[bom_checker]..................................................... 632
[boxes4ward] ....................................................... 618
[ce_page_teaser] ................................................ 626
[changelanguage].............................................. 643
[dlh_googlemaps].............................................. 618
[dlstats] .................................................................. 571
[easy_themes] ..................................................... 513
[efg].......................................................................... 351
[Favicon] ................................................................ 530
[moretag] .............................................................. 350
[slickmap].............................................................. 260
[table4ward]......................................................... 308
[x_backend_notes] ......................... 127, 233, 600
installieren ............................................................ 126
zur Mitgliederverwaltung............................... 575
Erweiterungen (Core)
Events (Kalender) ............................................... 432
FAQ .......................................................................... 446
Formulargenerator ........................................... 333
Nachrichten.......................................................... 387
Newsletter ............................................................. 451
Erweiterungen auf contao.org........................... 126
Events � Kalender
Extension Repository............................................ 126
F
Facebook .................................................................... 300
FAQ ............................................................................... 446
Favicon einbinden.................................................. 530
fe_page..................................................... 156, 207, 640
Feed
für Nachrichten................................................... 411
Fehlermeldungen
403 Forbidden...................................................... 551
404 Not found ..................................................... 549
No layout specified............................................ 136
No pages found ..........................................130, 133
Filemount .................................................................. 580
Firefox
Browser-Cache löschen .................................... 598
Sprache einstellen .............................................. 133
Tastenkürzel ändern ......................................... 118
Floats clearen............................................................ 219
Index
656
Folder-URLs ........................................................ 38, 540
Formatdefinitionen � Styles
Formulare
Anmeldeformular gestalten .......................... 565
Formularfelder
Checkbox-Menü.........................................356, 359
Datei-Upload ....................................................... 361
Erklärung............................................................... 353
Fieldset ................................................................... 353
Passwortfeld ........................................................ 354
Radio-Button-Menü .......................................... 357
Select-Menü.......................................................... 354
Sicherheitsabfrage............................................. 362
Überschrift ............................................................ 353
Übersicht ............................................................... 351
Formulargenerator ................................................ 333
Frontend........................................................................ 42
HTML-Grundgerüst ..................................154, 207
Online-Demo .......................................................... 42
Frontend-Module ................................................... 140
Frontend-Template......................................... 87, 156
Frontend-Vorschau............................. 140, 401, 568
FTP-Modus ................................................................... 99
Funktionen
Feed abonnieren ................................................. 411
Kommentarfunktion ........................................ 414
Kontaktformular................................................ 333
Suchfunktion ....................................................... 365
G
Galerie (Inhaltselement) ...................................... 287
GitHub - Ticket System ........................................ 604
Google Analytics ................................................ 609
Google Maps ........................................................ 618
Google-Konto .............................................552, 609
Webmaster-Tools ............................................... 552
Grid-Layouts ............................................................. 222
Gruppenrechte ........................................................ 585
H
Hard Limit ................................................................. 238
Holy Grail...................................................37, 214, 486
.htaccess
Apache-Konfiguration ..................................... 100
Backup machen .................................................. 602
fehlt bei Installation ............................................96
PHP als FAST-CGI ..................................................99
URL umschreiben ............................................... 532
RewriteBase .......................................................... 534
HTC-Dateien ............................................................. 230
htdocs .............................................................................67
HTML
div-Struktur .................................................154, 207
embed ..................................................................... 320
iframe ..................................................................... 320
meta-Elemente .................................................... 546
title........................................................................... 543
HTML5
neue Strukturelemente .................................... 205
und Contao ........................................................... 205
vereinfachte Schreibweise .............................. 204
HTML5 oder XHTML .............................................. 205
HTTP
Request und Response...................................... 547
Status Codes ......................................................... 548
I
Inaktive Backend-Module ................................... 432
<!--indexer::stop--> ................................................ 158
Infobereich (Backend) ........................................... 114
Inhaltselemente
Akkordeon............................................................. 311
Artikel ..................................................................... 328
Artikel-Teaser ...................................................... 328
Bild ........................................................................... 282
Code......................................................................... 326
Download.....................................................329, 571
Downloads...................................................329, 571
Formular.......................................................328, 342
Galerie .................................................................... 287
HTML ...................................................................... 320
Hyperlink............................................................... 299
in Events ................................................................ 433
in Nachrichten..................................................... 388
in Online-Demo .....................................................53
Inhaltselement .................................................... 328
Kommentar .......................................................... 328
Modul...................................................................... 328
Tabelle .................................................................... 303
Text ....................................................... 146, 270, 323
Top-Link ................................................................. 296
Überschrift ............................................................ 267
initconfig.php .......................................................... 601
Index
657
Inserttags
{{date::Y}} .............................................................. 615
{{env::request}}.................................................... 299
{{form::xxx}} ........................................................ 350
{{insert_article::ID}} .................................613, 617
{{insert_content::ID}} ..............................613, 617
{{link::abmelden}} .............................................. 562
{{link::ID}} .............................................................. 462
{{link:ID}} ............................................................... 562
{{link_url::ID}} ..................................................... 272
{{page::mainTitle}} ............................................ 492
{{user::username}} ............................................. 562
für Datum ............................................................. 651
für E-Mail-Adressen........................................... 651
für Include-Elemente ........................................ 650
für Link-Elemente............................................... 646
für Mitglieder....................................................... 648
für Sprachen......................................................... 651
für Umgebungsvariablen ............................... 649
Übersicht ............................................................... 646
Installation
.htaccess fehlt ......................................................... 96
Admin-Konto anlegen ........................................ 88
Contao-Check ......................................................... 91
Datenbanktabellen anlegen ............................. 85
Datenbankverbindung prüfen......................... 84
FTP-Zugangsdaten eingeben......................... 100
Live Update .......................................................... 605
manuelles Update.............................................. 607
Offline ........................................................................ 78
online ......................................................................... 91
Passwort für Installtool ...................................... 81
Potenzielle Probleme ........................................... 99
potenzielle Probleme ................................. 82, 102
Systemvoraussetzungen ....................................77
Überblick Online-Installation .......................... 97
Umzug auf Online-Webspace ....................... 103
Verschlüsselungschlüssel................................... 82
Installtool
FTP-Zugangsdaten eingeben......................... 100
Passwort ändern ................................................... 81
Passwort vergessen ........................................... 631
schützen.................................................................... 83
J
jQuery
Colorbox ................................................................ 277
und MooTools .............................................. 38, 277
K
Kalender ..................................................................... 432
Kollation........................................................................85
Kommentare ...................................................328, 414
Kontaktformular erstellen .................................. 333
Kontrollkästchen (Formulare)........................... 359
Kopiervorgang abbrechen (Backend) ............. 142
L
langconfig.php ................................................601, 633
Layoutbereiche
eigene erstellen ................................................... 640
Übersicht ............................................................... 155
Lightbox ..................................................................... 277
Little Boxes.......................... 209, 219, 261, 319, 485
Live Update ............................................................... 605
localconfig.php ...............................................601, 631
Lokale Installation .....................................................78
M
Mac – Contao installieren.......................................63
Major Release ........................................................... 603
MAMP
installieren ...............................................................63
ist Offline-Webspace ............................................57
Umzug auf Online-Webspace........................ 103
Manuelles Update (FTP) ....................................... 607
Media Query .......................................... 215, 226, 486
Mediabox ................................................................... 277
Mehrere bearbeiten ..................236, 422, 542, 545,
564, 591, 592
Mehrsprachige Website ....................................... 642
meta
description ............................................................ 546
keywords ............................................................... 547
robots...................................................................... 545
viewport ................................................................. 487
meta.txt ...................................................................... 292
Meta-Navigation ..................................................... 250
Meta-Viewport-Tag ................................................ 487
Minor Release........................................................... 602
Mitglieder .................................................................. 555
An- und Abmeldung.......................................... 567
Mitgliederregistrierung ................................... 575
neue erstellen....................................................... 557
Index
658
Passwort vergessen ........................................... 573
Persönliche Daten ändern .............................. 574
Unterschied zu Benutzern .............................. 555
Mitgliedergruppen................................................. 557
Mitgliederverwaltung ........................................... 572
Mobile Webseiten............................................ 37, 485
mod_cache ................................................................ 534
mod_rewrite............................................................. 532
Module ...........................................................................47
Artikelnavigation......................................233, 263
Automatischer Logout..................................... 561
Buchnavigation .........................................233, 262
Definition .............................................................. 140
Eigener HTML-Code .................................141, 561
für Kopf- und Fußbereich ................................ 141
Individuelle Navigation .........................233, 251
Login-Formular................................................... 560
Navigationsmenü .................... 47, 233, 238, 249
Navigationsmodule .................................232, 491
Navigationspfad .......................................233, 261
Passwort vergessen ........................................... 573
Persönliche Daten.............................................. 574
Quicklink ......................................................233, 492
Quicknavigation .......................................233, 491
Sitemap .................................................................. 233
Modultemplates...................................................... 156
MooTools
moo_accordion .................................................. 312
moo_analytics .................................................... 609
moo_mediabox .................................................. 277
MooTools laden .................................................. 277
und jQuery ............................................................ 277
Multi-Domain .......................................................... 644
Music Academy
Dateien entfernen ................................................. 89
installieren............................................................... 89
Online-Demo .......................................................... 41
Theme importieren............................................ 521
MySQL ............................................................................ 71
Datenbank erstellen............................................. 74
und phpMyAdmin ................................................ 73
und SQL ..................................................................... 72
N
Nachrichten .............................................................. 387
Anzahl Beiträge pro Seite ............................... 398
Archiv erstellen ................................................... 389
Beitrag erstellen.................................................. 390
Meta-Info unterm Beitrag .............................. 408
Teaser anzeigen .................................................. 397
Übersicht ............................................................... 388
und Inhaltselemente......................................... 388
Nachrichtenbeitrag
Bilder hinzufügen............................................... 408
Nur mit Teaser..................................................... 400
Weiterleitung zu Seite, Artikel oder URL ... 401
Navigation
basiert auf Seitenstruktur..................................45
Breadcrumb.......................................................... 261
Buchnavigation .................................................. 262
horizontal und vertikal.................................... 249
horizontal zwei Ebenen ................................... 242
Meta-Navigation................................................ 250
Navigationspfad ................................................ 261
Sitemap .................................................................. 255
vertikal zwei Ebenen ......................................... 236
Navigationsbereich (Backend)........................... 116
Newsletter.................................................................. 451
abonnieren ........................................................... 461
Double-Opt-In ..................................................... 461
Frontend-Module ......................................459, 462
im Frontend anzeigen ...................................... 457
kündigen................................................................ 461
O
Online-Demo
Artikel ........................................................................52
Backend.....................................................................43
Inhaltselemente .....................................................53
Module ......................................................................47
Rechtesystem im Backend .................................55
Seitenlayout ............................................................48
Seitenstruktur .........................................................45
Stylesheets ...............................................................50
Themes ......................................................................46
Optionsfelder (Formulare) .................................. 357
Ordner-URLs ............................................................. 540
P
Pagemount ................................................................ 580
Paginierung............................................................... 398
Papierdenken ........................................................... 485
Passwort ändern (Admin) ................................... 578
Passwort vergessen
für Admin-Konto ................................................ 448
für Installtool....................................................... 631
für Mitglieder....................................................... 573
Index
659
PDF ............................................................................... 300
Persönliche Daten (Backend-Modul) .............. 117
PHP .................................................................................. 68
als CGI........................................................................ 69
als Modul.................................................................. 69
Interpreter........................................ 58, 69, 99, 107
phpinfo() ....................................................................... 70
phpMyAdmin.............................................................. 73
aufrufen/starten ................................................... 73
Datenbank erstellen...............................74, 80, 97
Datenbank exportieren ..........................103, 600
Piwik ............................................................................ 609
R
Radio-Button-Menü............................................... 357
Rastersysteme (Layout)........................................ 222
Responsive Grid ...................................................... 221
Responsive Webdesign......................................... 222
RewriteBase............................................................... 534
RewriteRule ............................................................... 533
Rich Text Editor (RTE) � TinyMCE
RSS-Feed ..................................................................... 411
S
Safe Mode Hack (SMH) .........................99, 100, 108
Seitenalias.................................................................. 541
Seitenlayouts
Ausgabeformat ..........................................139, 205
für mobile Seiten ................................................ 486
in Online-Demo ..................................................... 48
neu erstellen ......................................................... 139
TinyMCE-Stylesheet .......................................... 635
zweispaltig............................................................ 466
Seitenname ............................................................... 541
Seitenstruktur .......................................................... 130
Automatische Weiterleitung ......................... 623
Beispielsite erweitern ..............................135, 234
Cachezeit festlegen..................................... 37, 599
im Menü verstecken.......................................... 236
in Online-Demo ..................................................... 45
und Navigation...................................................... 45
Seitentemplates .............................................156, 640
Select-Menü .............................................................. 354
SEO................................................................................ 529
Google Sitemap .................................................. 552
Seitentitel definieren ........................................ 543
URLs umschreiben ............................................. 530
Servicenavigation � Meta-Navigation
Sicherheit
777 ist keine gute Idee ....................................... 108
Hinweise zu Themes ......................................... 527
Installtool schützen .............................................83
Spamschutz .......................................................... 362
XAMPP Sicherheitscheck....................................63
Sidebar
auf Startseite........................................................ 474
Lesetipps ................................................................ 480
Quicklink-Navigation....................................... 480
Submit ausblenden............................................ 481
zufälliges Bild ...................................................... 474
Sitemap ....................................................................... 552
Sortierbare Tabelle ................................................. 311
Spamschutz............................................................... 362
Sprachen-Fallback..........................................133, 642
SQL ...................................................................................72
Startlevel .................................................................... 238
Startpunkt einer Website ...........................131, 642
Statische Webseiten..................................................58
Stoplevel..................................................................... 238
Styles............................................................................ 174
Stylesheets................................................................. 163
basic.css (Reset)................................................... 180
das CSS-Framework..................................163, 202
im Backend bearbeiten .................................... 174
im Seitenlayout einbinden ............................. 179
in Online-Demo .....................................................50
Integration in Seitenlayouts.......................... 641
intern und extern ............................................... 199
intern vs. extern .................................................. 164
internes Stylesheet erstellen .......................... 172
system/contao.css ............................................. 213
tinymce.css ..................................................634, 635
Stylesheets, extern
im Seitenlayout einbinden ...................... 37, 197
zusammen mit intern....................................... 199
Stylesheets, intern
CSS-Dateien bereinigen ................................... 596
im Backend bearbeiten .................................... 164
Tipps zum CSS-Editor...............................175, 192
und CSS3 ................................................................ 229
zusammen mit extern ...................................... 199
Subtemplates............................................................ 156
Suchfunktion............................................................ 365
Suchindex neu aufbauen .................................... 595
Suchmaschinenoptimierung � SEO
Suchsyntax................................................................ 385
Synchronisieren ...................................................... 124
Syndikation ............................................................... 300
Index
660
SyntaxHighlighter.................................................. 326
Systemeinstellungen ............................................ 118
Anmeldedauer..................................................... 121
Cache-Modus ....................................................... 599
Dateien hochladen ............................................ 124
Datums- und Zeitformat................................. 120
Inaktive Backend-Module .............................. 432
maximale Frontend-Breite ............................. 287
Speicherzeiten ..................................................... 121
Titel der Webseite............................................... 119
Verschlüsselungsschlüssel................................. 83
Zugriffsrechte (Standard) ............................... 590
System-Log................................................................ 593
Systemvoraussetzungen ........................................ 77
Systemwartung
Daten bereinigen............................. 482, 596, 597
Suchindex neu aufbauen ................................ 595
T
Tabelle (Inhaltselement) ...................................... 303
Task Center (Backend-Modul) ........................... 117
Teaser
Bilder hinzufügen............................................... 408
für Artikel .............................................................. 622
für Nachrichten.......................397, 398, 403, 405
Meta-Info unterhalb ......................................... 408
Templates
Änderung geht nicht......................................... 482
Definitionen ......................................................... 156
fe_page ............................................... 156, 207, 640
Frontend-Templates ................................156, 157
nav_default ....................................... 157, 160, 253
Unterordner erstellen ....................................... 125
XHTML und HTML5 .......................................... 206
Text ein- und ausblenden ................................... 311
Textbausteine erstellen ....................................... 636
Theme-Manager...................................................... 513
Themes ....................................................................... 513
[easy_themes] ..................................................... 513
aktivieren in Seitenlayouts ............................ 523
anpassen ............................................................... 524
cto-Datei ................................................................ 516
Einsatzgebiete ..................................................... 518
enthaltene Komponenten .............................. 514
exportieren ........................................................... 515
Fehler nach Importieren.................................. 524
importieren .......................................................... 522
in Online-Demo ..................................................... 46
Music Academy importieren ......................... 521
neu erstellen ......................................................... 137
nicht enthalten.................................................... 517
Quellen für ............................................................ 517
Sicherheitshinweise........................................... 527
Symbole zur Bearbeitung ............................... 138
Template-Ordner erstellen ............................. 125
und Multi-Site-Installationen ..............518, 644
von InetRobots .................................................... 519
von RockSolid ...................................................... 519
$this->framework ................................................... 210
$this->head................................................................ 211
$this->stylesheets ................................................... 211
TinyMCE ..................................................................... 271
CSS-Klassen anzeigen ....................................... 635
HTML-Elemente markieren............................ 272
Hyperlinks erstellen .......................................... 272
im Überblick ......................................................... 271
in dcaconfig.php................................................. 638
Symbolleisten anpassen .................................. 636
Textbausteine ...................................................... 636
Textgröße Editorfenster .................................. 635
tiny_templates .................................................... 636
und Fußbereich ................................................... 613
Vorlagen (Templates) ....................................... 636
tinymce.css.......................................................634, 635
tinyMCE.php ............................................................. 637
Top-Link (Inhaltselement) .................................. 296
Twitter ......................................................................... 300
U
Update
Checkliste .............................................................. 604
Live Update........................................................... 605
manuell (FTP)....................................................... 607
Sollte ich updaten? ............................................ 603
URLs umschreiben ................................................. 530
flache URLs ........................................................... 538
Ordner-URLs......................................................... 540
URL-Suffix.................................................................. 541
UTF-8 (ohne BOM) .................................................. 632
V
Verschieben abbrechen (Backend) .................. 142
Versionen vergleichen (Backend) ....37, 118, 194
Videos einbinden.................................................... 320
Viewport ..................................................................... 488
Index
661
W
Webseite vs. Website ............................................. 120
Webserver ..................................................................... 66
404 - Nicht Gefunden ....................................... 548
Antwortnummern ............................................. 547
DocumentRoot.......................................................67
htdocs ........................................................................ 67
mod_rewrite ........................................................ 532
startet nicht............................................................. 62
Statuscodes .......................................................... 547
testen ......................................................................... 62
und PHP .................................................................... 69
Website-Template .................................................. 156
Webspace
erkunden mit phpinfo() ...................................... 70
prüfen mit Contao-Check .................................. 91
Weiterleitung
301 permanent .................................................... 623
Windows – Contao installieren ............................ 59
WYSIWYG-Editor ..................................................... 271
X
XAMPP
Control Panel .......................................................... 60
ist Offline-Webspace ............................................ 57
Sicherheitscheck .................................................... 63
Umzug auf Online-Webspace ....................... 103
Webserver testen ................................................... 62
XML
Feed-Datei ............................................................. 411
XML-Dateien bereinigen ................................. 596
XML-Sitemap (Google)..................................... 552
Y
YAML............................................................................ 641
Z
Zugriffsrechte
für Seiten und Artikel........................................ 589
in Systemeinstellungen.................................... 590
Linux ....................................................................... 106
Übersicht anzeigen lassen .............................. 592
Unterschied zu Zugriffsschutz ...................... 589
Zugriffsschutz .................................................568, 589
für Downloads..................................................... 568