Contao

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

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