Websites erstellen mit Contao 3

Peter Müller arbeitet seit vielen Jahren als IT-Dozent und und ist als Autor des CSS-Bestsellers »Little Boxes« bekannt, der es versteht, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen.

... 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 ... 29
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
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
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 ... 111
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
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 ... 154
6.6.2 ... Die Layoutbereiche aus dem Seitenlayout im ... 154
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
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 -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
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
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
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 ... 331
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
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
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 [NachrichtenarchivMenü]« 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
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
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 ... 511
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
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: »« ... 543
20.3.3 ... Die Beschreibung der Seite: »« ... 546
20.4 ... Abfangjäger: 404 und 403 ... 547
20.4.1 ... Statusmeldungen: Der Webserver schickt eine Nummer mit ... 547
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
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
23.7 ... Das manuelle Update per FTP ... 607
23.8 ... Webstatistiken mit Google Analytics und Piwik ... 609
TEIL V ... Tipps und Tricks ... 611
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
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

"Praxisorientierter Leitfaden für Anwender und Administratoren." Leo Feyer, Core-Entwickler von Contao.