Websites erstellen mit Contao 3

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.2 ... Die Website zum Programm: »contao.org« ... 34
1.3 ... Ein paar Highlights von Contao ... 35
1.4 ... Die Community im Web: »contao-community.de« ... 38

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.2 ... Windows: Offline-Webspace mit XAMPP ... 59
3.3 ... OS X: Offline-Webspace mit MAMP ... 63
3.4 ... Der Webserver: Apache serviert Webseiten ... 66
3.5 ... PHP: Programmiersprache und Interpreter ... 68
3.6 ... MySQL serviert SQL-Datenbanken ... 71
3.7 ... phpMyAdmin verwaltet die Datenbanken von MySQL ... 73

4. Die Installation von Contao ... 77
4.1 ... Vorbereitung ... 77
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.5 ... »Safe Mode Hack«: der FTP-Modus von Contao ... 99
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


TEIL II Die erste Website mit Contao ... 111

5. Ein kurzer Rundgang im Backend ... 113
5.1 ... Überblick: das Backend ... 113
5.2 ... Das Backend-Modul »System Einstellungen« ... 118
5.3 ... Der Dateimanager: »System Dateiverwaltung« ... 121
5.4 ... Der Erweiterungskatalog: Erweiterungen installieren ... 126

6. Die erste Website mit Contao ... 129
6.1 ... »No root page found« -- die Seitenstruktur erstellen ... 130
6.2 ... »No layout specified« -- Theme und Seitenlayout erstellen ... 136
6.3 ... Frontend-Module für den Kopf- und den Fußbereich ... 140
6.4 ... Der erste Artikel und zwei Inhaltselemente ... 143
6.5 ... Ein Frontend-Modul für die Navigation: »Nav -- Main« ... 150
6.6 ... Ein kurzer Blick in den Quelltext ... 154
6.7 ... Templates erstellen das HTML für den Quelltext ... 156
6.8 ... Das Contao-Prinzip: altogether now ... 161

7. Contao und CSS: Webseiten gestalten ... 163
7.1 ... Übersicht: Contao und CSS ... 163
7.2 ... Der CSS-Editor von Contao: »Themes Stylesheets« ... 165
7.3 ... Das erste Stylesheet ... 172
7.4 ... Grundlegende Gestaltung für die Beispielsite ... 182
7.5 ... Tipps zur Arbeit mit internen Stylesheets ... 192
7.6 ... Arbeiten mit externen Stylesheets ... 197

8. Das CSS-Framework von Contao ... 201
8.1 ... Das CSS-Framework von Contao im Überblick ... 201
8.2 ... XHTML, HTML5 und Contao ... 203
8.3 ... Die HTML-Struktur: das Seitentemplate »fe_page« ... 207
8.4 ... Der Kern des CSS-Frameworks: »layout.css« ... 213
8.5 ... Der CSS-Reset von Contao im Detail ... 219
8.6 ... Das »Responsive Grid« von Contao ... 221
8.7 ... Contao und CSS3 ... 227

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

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.3 ... Das Inhaltselement »Text«: »ce_text« ... 270
10.4 ... Das Inhaltselement »Text« mit einem Bild erweitern ... 275
10.5 ... Das Inhaltselement »Bild«: »ce_image« ... 282
10.6 ... Das Inhaltselement »Galerie«: »ce_gallery« ... 287
10.7 ... Das Inhaltselement »Top-Link«: »ce_toplink« ... 296
10.8 ... Syndikation: Drucken, PDF, Facebook, Twitter und G+ ... 300

11. Weitere nützliche Inhaltselemente ... 303
11.1 ... Das Inhaltselement »Tabelle«: »ce_table« ... 303
11.2 ... Das Inhaltselement »Akkordeon«: »ce_accordion« ... 311
11.3 ... Externe Videos auf Webseiten einbinden ... 320
11.4 ... Das Inhaltselement »Video/Audio« ... 324
11.5 ... Weitere Inhaltselemente im Überblick ... 326


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.3 ... Formulardaten auf der Seite »Vielen Dank« ausgeben ... 350
12.4 ... Formularfelder: die Feldtypen im Formulargenerator ... 351

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.3 ... Teaser und Beiträge im Frontend ausgeben ... 395
14.4 ... HTML und CSS: Teaser und Beiträge gestalten ... 403
14.5 ... Bilder zu Teasern und Beiträgen hinzufügen ... 408
14.6 ... RSS-Feeds zum Abonnieren der Beiträge erstellen ... 411
14.7 ... Interaktion mit Besuchern: die Kommentarfunktion ... 414
14.8 ... Navigation: Beiträge monatsweise auswählen ... 420
14.9 ... Know-how: Nachrichten, Modultypen und Templates ... 427

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.5 ... Die FAQ-Erweiterung: häufig gestellte Fragen ... 446

16. Die Erweiterung »Newsletter« ... 451
16.1 ... Das Backend-Modul »Newsletter« ... 452
16.2 ... Newsletter im Frontend anzeigen ... 457
16.3 ... Newsletter im Frontend abonnieren und kündigen ... 460

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.3 ... Sidebar: ein zufällig ausgewähltes Bild ... 474
17.4 ... Sidebar: der Minikalender ... 476
17.5 ... Sidebar: Lesetipps als Dropdown-Menü ... 480
17.6 ... Sidebar: Newsletter abonnieren ... 482

18. Mobile Webseiten ... 485
18.1 ... Die Besonderheiten von mobilen Webseiten ... 485
18.2 ... Die Beispielsite auf kleinen Bildschirmen ... 487
18.3 ... »Themes Frontend-Module«: Navigation für mobile Seiten ... 491
18.4 ... »Themes Seitenlayout«: Layouts für mobile Seiten ... 493
18.5 ... »Themes Stylesheet«: mobile Seiten gestalten ... 498
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.2 ... Einige Quellen für Contao-Themes ... 517
19.3 ... Die »Music Academy«: Beispielsite im neuen Look ... 521
19.4 ... Über die Anpassung von Themes ... 524
19.5 ... Sicherheitshinweise für Themes (nicht nur für Contao) ... 527

20. SEO: die Optimierung für Suchmaschinen ... 529
20.1 ... Lesbare Adressen: URLs umschreiben ... 530
20.2 ... Flache oder Ordner-URLs -- Contao kann beides ... 538
20.3 ... Seitenalias, Seitentitel und Seitenbeschreibung optimieren ... 541
20.4 ... Abfangjäger: 404 und 403 ... 547
20.5 ... Eine XML-Sitemap für Google & Co. ... 552

21. Mitglieder: im Frontend angemeldete Besucher ... 555
21.1 ... Mitglieder und Benutzer: der Unterschied ... 555
21.2 ... Mitgliedergruppen und Mitglieder einrichten ... 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.5 ... Die erstellten Module einbinden und gestalten ... 563
21.6 ... Einen geschützten Downloadbereich einrichten ... 568
21.7 ... Weitere Möglichkeiten zur Mitgliederverwaltung ... 572

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.5 ... Zugriffsrechte für Seiten und Artikel setzen ... 589

23. Wartung: die Website im Alltag ... 593
23.1 ... Das »System-Log« schreibt mit ... 593
23.2 ... Die »Systemwartung« im Überblick ... 594
23.3 ... Den »Cache-Flow« in Contao kontrollieren ... 598
23.4 ... Backups erstellen: Datenbank und Dateien sichern ... 600
23.5 ... Updates: die Versionsnummern von Contao ... 602
23.6 ... Der »Live Update«-Service: das automatische Update ... 605
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.3 ... Die Erweiterung für Google Maps: [dlh_googlemaps] ... 618
24.4 ... Artikelteaser auf Übersichtsseiten ... 622
24.5 ... Mehrere Artikel auf einer Seite ... 626

25. Tipps und Tricks zur Systemverwaltung ... 631
25.1 ... Wichtige Konfigurationsdateien von Contao ... 631
25.2 ... Tipps und Tricks zum TinyMCE ... 634
25.3 ... Layouts für Fortgeschrittene ... 639
25.4 ... Mehrere Websites in einer Contao-Installation ... 642
25.5 ... Die Inserttags im Überblick ... 646

Index ... 653