Einleitung ... 29
TEIL I Contao kennenlernen und installieren ... 35
1. Das ist Contao ... 37
1.1 ... Contao ist ein Content-Management-System ... 37
1.2 ... Die Website zum Programm: »contao.org« ... 39
1.3 ... Was Contao so beliebt macht ... 41
1.4 ... Die Community im Web: das Forum zu Contao ... 43
2. Der Offline-Webspace: XAMPP und MAMP ... 47
2.1 ... Der Webspace auf Ihrem Rechner ... 48
2.2 ... Windows: Offline-Webspace mit XAMPP ... 50
2.3 ... OS X: Offline-Webspace mit MAMP ... 54
2.4 ... Der Webserver: Apache serviert Webseiten ... 57
2.5 ... PHP: Programmiersprache und Interpreter ... 59
2.6 ... MySQL serviert SQL-Datenbanken ... 61
2.7 ... phpMyAdmin verwaltet die Datenbanken von MySQL ... 64
3. Die Installation von Contao ... 69
3.1 ... Die Installation vorbereiten ... 69
3.2 ... Offline: Contao auf Ihrem Rechner installieren ... 70
3.3 ... Online: Contao im Web installieren ... 82
3.4 ... Hilfe bei sonstigen Installationsproblemen ... 91
3.5 ... Umzug: von XAMPP und MAMP auf den Online-Webspace ... 93
3.6 ... »Safe Mode Hack«: der FTP-Modus von Contao ... 95
3.7 ... Know-how: Dateiberechtigungen -- das 1 × 1 zu 644 ... 99
4. Schnelldurchlauf: So funktioniert Contao ... 103
4.1 ... »Music Academy«: die Beispielsite installieren ... 104
4.2 ... Das Frontend ist die Website ... 108
4.3 ... Das Backend ist die Verwaltungsabteilung ... 110
4.4 ... Die Seitenstruktur ist das Fundament der Website ... 111
4.5 ... Themes bestimmen das Aussehen der Site ... 113
4.6 ... Module erzeugen den Quelltext für das Frontend ... 113
4.7 ... Jede Seite hat ein Seitenlayout ... 115
4.8 ... Seitenlayouts verbinden die Seiten mit Stylesheets ... 117
4.9 ... Jeder Artikel gehört zu einer Seite ... 117
4.10 ... Ein Artikel besteht aus Inhaltselementen ... 119
4.11 ... Das Backend ist für Redakteure sehr übersichtlich ... 121
4.12 ... Zusammenfassung -- so tickt Contao ... 121
TEIL II Die erste Website mit Contao ... 123
5. Ein kurzer Rundgang im Backend ... 125
5.1 ... Überblick: die wichtigsten Bereiche im Backend ... 125
5.2 ... Das Backend-Modul »System Einstellungen« ... 131
5.3 ... Der Dateimanager: »System Dateiverwaltung« ... 134
5.4 ... Der Erweiterungskatalog und die Erweiterungsverwaltung ... 140
6. Die ersten Schritte zur eigenen Website ... 143
6.1 ... »Keinen Startpunkt gefunden« -- die Seitenstruktur erstellen ... 144
6.2 ... »Kein Layout angegeben« -- Theme und Seitenlayout erstellen ... 150
6.3 ... Frontend-Module für den Kopf- und den Fußbereich ... 155
6.4 ... Der erste Artikel und zwei Inhaltselemente ... 158
6.5 ... Ein Frontend-Modul für die Navigation: »Nav -- Main« ... 166
6.6 ... Ein kurzer Blick in den Quelltext ... 170
6.7 ... Templates erstellen das HTML für den Quelltext ... 172
6.8 ... Das Contao-Prinzip: altogether now ... 180
7. Contao und CSS: Webseiten gestalten ... 183
7.1 ... Übersicht: Contao und CSS ... 183
7.2 ... Das erste Stylesheet erstellen ... 185
7.3 ... Grundlegende Gestaltung der Beispielsite ... 197
7.4 ... Der CSS-Editor von Contao im Überblick ... 208
7.5 ... Tipps zur Arbeit mit internen Stylesheets ... 215
7.6 ... CSS mit externen Stylesheets in Contao ... 221
8. Navigationen erstellen in Contao ... 225
8.1 ... So funktioniert Contao: Seiten, Module und Artikel ... 225
8.2 ... Die Navigationsmodule von Contao im Überblick ... 226
8.3 ... Die Seitenstruktur der Beispielsite erweitern ... 228
8.4 ... Eine vertikale Navigation mit zwei Ebenen ... 231
8.5 ... Eine horizontale Dropdown-Navigation ... 237
8.6 ... Horizontale und vertikale Navigation zusammen ... 244
8.7 ... Meta-Navigation: eine »Individuelle Navigation« ... 245
8.8 ... Sitemap: das Inhaltsverzeichnis der Website ... 250
8.9 ... Weitere Navigationsmodule im Überblick ... 255
9. Inhaltselemente für Texte und Bilder ... 261
9.1 ... Artikel und Inhaltselemente im HTML-Quelltext ... 261
9.2 ... Das Inhaltselement »Überschrift«: »ce_headline« ... 263
9.3 ... Das Inhaltselement »Text«: »ce_text« ... 266
9.4 ... Das Inhaltselement »Text« mit einem Bild erweitern ... 272
9.5 ... Das Inhaltselement »Bild«: »ce_image« ... 279
9.6 ... Das Inhaltselement »Galerie«: »ce_gallery« ... 285
9.7 ... Das Inhaltselement »Top-Link«: »ce_toplink« ... 294
9.8 ... Syndikation: Drucken, PDF, Facebook, Twitter und G+ ... 298
10. Weitere nützliche Inhaltselemente ... 303
10.1 ... Das Inhaltselement »Tabelle«: »ce_table« ... 303
10.2 ... Das Inhaltselement »Akkordeon«: »ce_accordion« ... 312
10.3 ... Externe Videos auf Webseiten einbinden ... 323
10.4 ... Das Inhaltselement »Video/Audio«: »ce_player« ... 328
10.5 ... Das Inhaltselement »Markdown«: »ce_markdown« ... 330
10.6 ... Weitere Inhaltselemente im Überblick: Code und Co. ... 334
TEIL III Formulare und Core-Erweiterungen ... 339
11. Kontakt: der Formulargenerator von Contao ... 341
11.1 ... Ein Kontaktformular für die Beispielsite erstellen ... 341
11.2 ... Das Kontaktformular gestalten ... 354
11.3 ... Formulardaten auf der Seite »Vielen Dank« ausgeben ... 360
11.4 ... Formularfelder: die Feldtypen im Formulargenerator ... 362
12. Suchfunktion: die Beispielsite durchsuchen ... 375
12.1 ... Die Suchfunktion im Überblick ... 375
12.2 ... Die Seite »Suchen«: Suchformular und -ergebnisse ... 376
12.3 ... Ein einfaches Suchformular im Kopfbereich ... 384
12.4 ... Alternative: ein flexibleres Suchformular ... 390
12.5 ... Die Syntax der Suchfunktion im Überblick ... 396
13. Bloggen: die Erweiterung »Nachrichten« ... 397
13.1 ... Übersicht: die Zutaten für das Nachrichtensystem ... 398
13.2 ... Das »Newsarchiv«: Beiträge erstellen ... 399
13.3 ... Teaser und Beiträge im Frontend ausgeben ... 406
13.4 ... HTML und CSS: Teaser und Beiträge gestalten ... 416
13.5 ... Bilder zu Teasern und Beiträgen hinzufügen ... 422
13.6 ... RSS-Feeds zum Abonnieren der Beiträge erstellen ... 425
13.7 ... Interaktion mit Besuchern: die Kommentarfunktion ... 428
13.8 ... Navigation: Beiträge monatsweise auswählen ... 435
13.9 ... Know-how: Nachrichten, Modultypen und Templates ... 444
14. Die Core-Erweiterungen »Events« und »FAQ« ... 447
14.1 ... Terminverwaltung: die Erweiterung »Events« ... 448
14.2 ... Einen neuen Kalender erstellen ... 449
14.3 ... Der noch ungestaltete Kalender im Überblick ... 455
14.4 ... Das HTML für Kalender und Events ... 457
14.5 ... Das CSS zum Gestalten eines Kalenders ... 460
14.6 ... Die FAQ-Erweiterung: häufig gestellte Fragen ... 464
15. Die Core-Erweiterung »Newsletter« ... 469
15.1 ... Die Zentrale: das Backend-Modul »Newsletter« ... 471
15.2 ... Newsletter im Frontend anzeigen ... 478
15.3 ... Newsletter im Frontend abonnieren und kündigen ... 480
16. Ein neues Seitenlayout für die Startseite ... 485
16.1 ... Der Start: Ein neues Seitenlayout für die Startseite ... 486
16.2 ... Newsbeiträge und Termine als Liste auf der Startseite ... 488
16.3 ... Sidebar, Teil 1: ein zufällig ausgewähltes Bild ... 495
16.4 ... Sidebar, Teil 2: der Minikalender ... 498
16.5 ... Sidebar, Teil 3: Lesetipps als Dropdown-Menü ... 502
16.6 ... Sidebar, Teil 4: Newsletter abonnieren ... 504
16.7 ... Sidebar, Teil 5: ein Content-Slider in der Sidebar ... 506
TEIL IV Contao »responsiv« und »mobil« ... 515
17. Das CSS-Framework von Contao ... 517
17.1 ... Das CSS-Framework von Contao im Überblick ... 517
17.2 ... XHTML 1.0, HTML5 und Contao ... 520
17.3 ... Die HTML-Struktur: das Seitentemplate »fe_page« ... 524
17.4 ... CSS-Framework, Teil 1: »layout.css« ... 531
17.5 ... CSS-Framework, Teil 2: »responsive.css« ... 536
17.6 ... CSS-Framework, Teil 3: »reset.css« ... 538
17.7 ... CSS-Framework, Teil 4: »form.css« ... 541
17.8 ... Contao, der interne CSS-Editor und CSS3 ... 545
17.9 ... Know-how: So funktioniert der Holy Grail ... 549
18. Die Beispielsite wird responsiv ... 559
18.1 ... Responsives Webdesign und Contao ... 559
18.2 ... Bestandsaufnahme: Die Beispielsite ... 563
18.3 ... Die responsive Navigation im Überblick ... 567
18.4 ... Die Navigation für kleine Viewports erstellen ... 569
18.5 ... Das Layout für kleine Viewports optimieren ... 583
18.6 ... Die Inhalte für kleine Viewports optimieren ... 587
19. Mobile Seitenlayouts und 12Spalten Grid ... 599
19.1 ... Mobile Seitenlayouts und responsives Webdesign ... 599
19.2 ... »Music Academy«: Mobile Seitenlayouts in Aktion ... 602
19.3 ... Mobile Seitenlayouts für die »Beispielsite Contaobuch« ... 609
19.4 ... Gridlayouts mit dem 12-Spalten Grid von Contao ... 612
19.5 ... Das CSS zum 12-Spalten Grid ... 618
TEIL V Systemverwaltung ... 623
20. SEO: die Optimierung für Suchmaschinen ... 625
20.1 ... Lesbare Adressen: URLs umschreiben ... 626
20.2 ... Flache oder Ordner-URLs -- Contao kann beides ... 633
20.3 ... Seitenalias, Seitentitel und Seitenbeschreibung optimieren ... 637
20.4 ... Abfangjäger: 404 und 403 ... 644
20.5 ... Eine XML-Sitemap für Google & Co. ... 650
21. Mitglieder: im Frontend angemeldete Besucher ... 653
21.1 ... Mitglieder und Benutzer: der Unterschied ... 653
21.2 ... Mitgliedergruppen und Mitglieder einrichten ... 655
21.3 ... Seiten für die An- und Abmeldung erstellen ... 656
21.4 ... Frontend-Module für die An- und Abmeldung erstellen ... 658
21.5 ... Die erstellten Module einbinden ... 663
21.6 ... Die Frontend-Module gestalten ... 667
21.7 ... Einen geschützten Downloadbereich einrichten ... 670
21.8 ... Weitere Möglichkeiten zur Mitgliederverwaltung ... 676
22. Benutzer: im Backend angemeldete Mitarbeiter ... 679
22.1 ... Benutzerverwaltung: die Übersicht ... 679
22.2 ... Die Benutzergruppe »Redakteure -- Nachrichten« ... 681
22.3 ... Die Benutzerin »Helen Lewis« einrichten ... 686
22.4 ... Die Benutzergruppe »Redakteure -- Artikel« ... 690
22.5 ... Zugriffsrechte für Seiten und Artikel setzen ... 693
23. Wartung: die Website im Alltag ... 697
23.1 ... Das »System-Log« schreibt mit ... 697
23.2 ... Die »Systemwartung« im Überblick ... 698
23.3 ... Den »Cache-Flow« in Contao kontrollieren ... 703
23.4 ... Backups erstellen: Datenbank und Dateien sichern ... 705
23.5 ... Updates: die Versionsnummern von Contao ... 707
23.6 ... Der »Live Update«-Service im Backend von Contao ... 711
23.7 ... Das manuelle Update per FTP ... 713
23.8 ... Webstatistiken mit Google Analytics und Piwik ... 715
24. Themes und Frontend-Templates ... 717
24.1 ... Ein Theme bestimmt das Aussehen der Website ... 717
24.2 ... Einige Quellen für Contao-Themes ... 721
24.3 ... Die Beispielsite im Look der »Music Academy« ... 724
24.4 ... Über die Anpassung von Themes ... 728
24.5 ... Frontend-Templates: Theme plus Seiten, Inhalte und Benutzer ... 731
24.6 ... Sicherheitshinweise (nicht nur für Contao) ... 733
TEIL VI Tipps und Tricks ... 735
25. Tipps und Tricks bei der Arbeit mit Inhalten ... 737
25.1 ... Text im Fußbereich mit dem TinyMCE pflegen ... 737
25.2 ... Recycling: Inhalte auf mehreren Seiten wiederholen ... 740
25.3 ... Artikelteaser auf Übersichtsseiten ... 742
25.4 ... Mehrere Artikel auf einer Seite ... 748
25.5 ... Die Erweiterung für Google Maps: [dlh_googlemaps] ... 751
26. Tipps und Tricks zur Systemverwaltung ... 757
26.1 ... Tipps und Tricks zum TinyMCE ... 757
26.2 ... Layouts für Fortgeschrittene ... 761
26.3 ... Die Systemkonfiguration: »localconfig.php« ... 766
26.4 ... Die Sprachkonfiguration: »langconfig.php« ... 767
26.5 ... Infos zu Datenbanktabellen: »dcaconfig.php« ... 770
26.6 ... Mehrere Websites in einer Contao-Installation ... 772
26.7 ... Die Inserttags im Überblick ... 776
27. Einige Erweiterungen von Drittanbietern ... 785
27.1 ... Nützliche Helfer im Backend ... 785
27.2 ... Kleine Erweiterungen für das Frontend ... 788
27.3 ... Isotope, MetaModels und ungefähr 1.632 weitere Erweiterungen ... ... 790
27.4 ... Ausblick: Erweiterungsverwaltung wird Composer ... 792
Index ... 795
