Peter Müller Websites erstellen mit Contao
Auf einen Blick TEIL I Contao kennenlernen 1 Das ist Contao... 27 2 Schnelldurchlauf: So funktioniert Contao... 35 TEIL II Contao installieren 3 XAMPP: Der Offline-Webspace... 55 4 Die Installation von Contao... 77 TEIL III Schritt für Schritt zur ersten Website 5 Ein kurzer Rundgang im Backend... 111 6 Die erste Website mit Contao... 127 TEIL IV Webseiten gestalten mit Contao 7 Contao und CSS: Interne Stylesheets... 169 8 Externe Stylesheets und CSS-Framework... 197 9 Navigationen erstellen in Contao... 215 TEIL V Artikel und Inhaltselemente 10 Inhaltselemente für Text und Bilder... 257 11 Weitere nützliche Inhaltselemente... 289 TEIL VI Contao und Formulare 12 Der Formulargenerator von Contao... 315 13 Suchfunktion: Die Beispielsite durchsuchen... 347 TEIL VII Die Erweiterungen von Contao 14 Die Erweiterung»Nachrichten«... 373 15 Die Erweiterungen»Kalender«und»FAQ«... 413 16 Die Erweiterung»Newsletter«... 431 17 Die Startseite gestalten... 445 TEIL VIII Systemverwaltung 18 Der Theme-Manager in Aktion... 465 19 SEO: Die Optimierung für Suchmaschinen... 483 20 Mitglieder: Im Frontend angemeldete Besucher... 507 21 Benutzer: Im Backend angemeldete Mitarbeiter... 527 22 Wartung: Die Website im Alltag... 543 TEIL IX Contao für Fortgeschrittene 23 Contao und moderne Webstandards... 561 24 Tipps und Tricks bei der Arbeit mit Inhalten... 577 25 Tipps und Tricks zur Systemverwaltung... 599
Inhalt Geleitwort des Fachgutachters... 21 Vorwort zur zweiten Auflage... 23 TEIL I Contao kennenlernen 1 Das ist Contao... 27 1.1 Contao ist ein Content-Management-System... 27 1.1.1 Brauchen Sie ein Content-Management-System?... 27 1.1.2 Contao unterstützt Sie bei Inhalt, Gestaltung und Funktionen... 28 1.2 Die Website zum Programm:»www.contao.org«... 29 1.3 Ein paar Highlights von Contao... 30 1.4 Die Community im Web:»www.contao-community.de«... 32 1.4.1 Tipps zur Benutzung des Forums... 33 1.4.2 Fragen zum Buch bitte auch im Forum stellen... 33 2 Schnelldurchlauf: So funktioniert Contao... 35 2.1 Das Frontend ist die Website... 36 2.2 Das Backend ist die Verwaltungsabteilung... 37 2.3 Die Seitenstruktur ist das Fundament der Website... 39 2.4 Themes bestimmen das Aussehen der Site... 40 2.5 Module erzeugen den Quelltext für das Frontend... 41 2.6 Jede Seite hat ein Seitenlayout... 42 2.7 Seitenlayouts verbinden die Seiten mit Stylesheets... 45 2.8 Jeder Artikel gehört zu einer Seite... 46 2.9 Ein Artikel besteht aus Inhaltselementen... 47 2.10 Das Backend ist für Redakteure sehr übersichtlich... 50 2.11 Zusammenfassung so tickt Contao... 51 TEIL II Contao installieren 3 XAMPP: Der Offline-Webspace... 55 3.1 XAMPP ist Webspace auf Ihrem Rechner... 55 3.1.1 Statische Webseiten: Der Webspace als Lagerhalle... 56 3.1.2 Content-Management-System: Der Webspace als Werkstatt... 56 5
Inhalt 3.2 Die Installation von XAMPP Lite (Windows)... 57 3.2.1 XAMPP Lite installieren... 58 3.2.2 Das XAMPP Control Panel... 58 3.2.3 Testen, ob der Webserver funktioniert... 60 3.3 Der Sicherheitscheck von XAMPP... 61 3.3.1 Den Sicherheitscheck aufrufen... 61 3.3.2 Einen Passwortschutz für MySQL und phpmyadmin einrichten... 63 3.3.3 Passwortschutz für das XAMPP-Verzeichnis einrichten... 64 3.3.4 Die neuen Sicherheitseinstellungen testen... 65 3.4 Der Webserver: Apache serviert Webseiten... 66 3.4.1 Der Apache ist ein Webserver... 66 3.4.2 DocumentRoot:»htdocs«, der Ordner für die Webseiten... 66 3.5 PHP: Programmiersprache und Interpreter... 67 3.6 MySQL serviert SQL-Datenbanken... 70 3.6.1 Eine relationale Datenbank besteht aus Tabellen... 70 3.6.2 SQL ist die Sprache zur Verwaltung von Datenbanken... 72 3.6.3 MySQL verwaltet mehrere relationale Datenbanken... 72 3.6.4 phpmyadmin verwaltet die Datenbanken von MySQL... 73 3.7 XAMPP-Matrix die Komponenten im Überblick... 75 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 Online: Contao im Web installieren... 89 4.3.1 Informationen über Webhoster im Forum... 89 4.3.2 Webspace prüfen: Der Contao-Check... 90 4.3.3 Dateien auf den Webspace kopieren... 91 4.3.4 Zugangsdaten für die Datenbank... 93 4.3.5 Die Installation im Überblick... 93 4.4»Safe Mode Hack«: Der FTP-Modus von Contao... 95 4.4.1»Sie benötigen wahrscheinlich den Safe Mode Hack«... 95 4.4.2 Eine Alternative zum SMH: PHP als CGI oder Fast-CGI... 96 4.4.3 Online: So richten Sie den Safe Mode Hack ein... 96 4.4.4 Offline-Webspace: SMH bei einer lokalen Installation umgehen... 98 4.5 Sonstige potenzielle Installationsprobleme... 99 6
Inhalt 4.5.1 PHP-Version zu alt:»parse error «... 99 4.5.2 Hilfe bei sonstigen Installationsproblemen... 100 4.6 Umzug: Von XAMPP auf den Online-Webspace... 101 4.7 Know-how: Dateiberechtigungen das 1 1 zu 644... 104 4.7.1 Besitzer, Benutzer und Berechtigungen: 644 und 755... 104 4.7.2 PHP und Contao: Benutzerrechte, Modul und (Fast)CGI... 105 4.7.3 Was der Safe Mode Hack genau macht... 106 4.7.4 Sicherheitsloch:»Alles auf 777«ist keine gute Idee... 106 TEIL III Schritt für Schritt zur ersten Website 5 Ein kurzer Rundgang im Backend... 111 5.1 Überblick: Das Backend... 111 5.1.1 Ganz oben im Backend: Der Infobereich... 112 5.1.2 Links: Der Navigationsbereich (Backend-Module)... 114 5.1.3 Rechts: Der Arbeitsbereich... 114 5.2 Das Backend-Modul»System Einstellungen«... 116 5.2.1 Der»Titel der Webseite«... 116 5.2.2 Das Format für Angaben von Datum und Zeit... 118 5.3 Der Dateimanager:»System Dateiverwaltung«... 119 5.3.1 Ordner erstellen mit dem Dateimanager... 119 5.3.2 Dateien mit dem Dateimanager hochladen... 120 5.3.3 Template-Ordner erstellen im Backend-Modul»Templates«... 122 5.4 Der Erweiterungskatalog: Erweiterungen installieren... 123 5.4.1 Die Erweiterungsliste auf»contao.org«... 123 5.4.2 Die Erweiterung [BackupDB] aus dem Backend heraus installieren... 124 5.4.3 Die Erweiterung [BackupDb] erleichtert ein Backup der Datenbank... 126 6 Die erste Website mit Contao... 127 6.1»No pages found«die Seitenstruktur erstellen... 127 6.1.1 Der Startpunkt für eine neue Website... 128 6.1.2 Der Sprachen-Fallback für den Startpunkt... 130 6.1.3 Die Startseite für die Beispielsite erstellen... 130 6.1.4 Die Seitenstruktur für die Beispielsite erweitern... 132 6.1.5 Drei Klick-Tipps für die Arbeit mit dem Seitenbaum... 133 6.2»No layout specified«theme und Seitenlayout erstellen... 134 6.2.1 Das erste Theme erstellen... 134 7
Inhalt 6.2.2 Das erste Seitenlayout erstellen... 136 6.2.3 Ein kurzer Blick in den Quelltext... 138 6.3 Das erste Frontend-Modul:»Navigation Hauptnavi«... 139 6.3.1 Ein Navigationsmodul erstellen... 140 6.3.2 Das Navigationsmodul im Seitenlayout einbinden... 141 6.4 Frontend-Module für den Kopf- und den Fußbereich... 143 6.4.1 Module für den Kopf- und den Fußbereich erstellen... 143 6.4.2 Die Module für den Kopf- und den Fußbereich im Seitenlayout einbinden... 144 6.5 Das erste Stylesheet erstellen und zuweisen... 145 6.5.1 Das erste Stylesheet im Backend erstellen... 146 6.5.2 Stylesheet bearbeiten: Einen Style für»body«erstellen... 147 6.5.3 Weitere Styles für»html«,»#wrapper«und»#container«erstellen... 148 6.5.4 Das Stylesheet mit dem Seitenlayout verbinden... 150 6.5.5 Weitere Styles für Kopfbereich, Hauptspalte und Fußbereich... 151 6.6 Der erste Artikel und zwei Inhaltselemente... 154 6.6.1 Der Artikelbaum: Die Übersicht über alle Artikel... 154 6.6.2 Die Einstellungen für einen Artikel... 155 6.6.3 Inhaltselemente zu einem Artikel hinzufügen... 157 6.6.4 Den Artikel mit dem Seitenlayout verbinden... 158 6.7 Templates erstellen das HTML für den Quelltext... 159 6.7.1 In Contao gibt es viele verschiedene Arten von Templates... 159 6.7.2 Das HTML der Navigation im Quelltext... 161 6.7.3 Backend-Modul»Templates«: Templates updatesicher anpassen... 162 6.7.4 Ein kurzer Blick in das Template»nav_default.xhtml«... 164 6.8 Das Contao-Prinzip: Altogether now... 165 TEIL IV Webseiten gestalten mit Contao 7 Contao und CSS: Interne Stylesheets... 169 7.1 Übersicht: Contao und CSS... 169 7.1.1 Gestatten: Das CSS-Framework von Contao... 169 7.1.2 Interne oder externe Stylesheets... 170 7.2 So funktionieren interne Stylesheets... 171 7.3 Der interne CSS-Editor: CSS per HTML-Formular... 172 7.3.1 Die Gruppe»Selektor und Kategorie«... 172 8
Inhalt 7.3.2 Die Gruppe»Abmessungen«... 173 7.3.3 Die Gruppe»Position«... 173 7.3.4 Die Gruppe»Abstand und Ausrichtung«... 174 7.3.5 Die Gruppe»Hintergrund«... 175 7.3.6 Die Gruppe»Rahmen«... 176 7.3.7 Die Gruppe»Schrift«... 176 7.3.8 Die Gruppen Aufzählung und Eigener Code... 177 7.4 Der interne CSS-Editor in der Praxis... 178 7.4.1 Das Stylesheet»bildschirm«mit dem internen CSS-Editor bearbeiten... 178 7.4.2 Tasten und Maus: Tipps für die Arbeit mit dem internen CSS-Editor... 180 7.5 CSS-Dateien importieren:»basic.css«... 181 7.5.1 Das Reset-Stylesheet»basic.css«herunterladen... 181 7.5.2 Das Reset-Stylesheet»basic.css«importieren... 182 7.5.3 Das Reset-Stylesheet»basic.css«im Detail... 185 7.6 Suchen und Filtern von Styles... 188 7.6.1 Styles mit bestimmten Selektoren suchen... 188 7.6.2 Filtern nach Kategorie... 189 7.7 Die Erweiterung [csseditor]... 191 7.7.1 Die Erweiterung [csseditor] installieren und kennenlernen... 191 7.7.2 Interne Stylesheets extern bearbeiten... 192 7.7.3 Einschränkungen bei der Arbeit mit [csseditor]... 193 7.8 Übung: Navigation gestalten mit internem Stylesheet... 194 7.9 Fazit: Interne Stylesheets und»seitenlayouts«... 196 8 Externe Stylesheets und CSS-Framework... 197 8.1 Externe Stylesheets sind ganz normale CSS-Dateien... 197 8.2 Externe Stylesheets in Contao einbinden... 198 8.2.1 Schritt 1: Stylesheets nach»tl_files/themes/ blaues_theme«kopieren... 199 8.2.2 Schritt 2: Ein zentrales Stylesheet erstellen... 199 8.2.3 Schritt 3: Das zentrale Stylesheet im Seitenlayout einbinden... 201 8.3 Fazit: Externe Stylesheets und»seitenlayouts«... 202 8.4 Teamwork: Interne und externe Stylesheets zusammen... 203 8.4.1 Nacheinander: Extern entwickeln, intern pflegen... 203 8.4.2 Miteinander: Externe Stylesheets plus interne... 204 8.5 Contao und CSS: Jeder so wie er gerne möchte... 204 9
Inhalt 8.6 Das CSS-Framework von Contao im Detail... 205 8.6.1 Das HTML-Grundgerüst von Contao in»fe_page.xhtml«... 205 8.6.2»$this->framework«: Die Einstellungen aus dem Seitenlayout... 207 8.6.3 Stylesheets einbinden:»$this->stylesheets«und»$this->head«... 209 8.6.4 Das CSS-Framework von Contao aus Benutzersicht... 209 8.6.5 Der Kern des CSS-Frameworks:»system/contao.css«... 211 9 Navigationen erstellen in Contao... 215 9.1 So funktioniert Contao: Seiten, Module und Artikel... 215 9.2 Die Navigationsmodule von Contao im Überblick... 216 9.3 Die Seitenstruktur der Beispielsite erweitern... 218 9.4 Eine vertikale Navigation mit zwei Ebenen... 220 9.5 Eine horizontale Navigation mit zwei Ebenen... 226 9.6 Horizontale und vertikale Navigation zusammen... 235 9.7 Metanavigation: Eine»Individuelle Navigation«... 238 9.8 Sitemap: Das Inhaltsverzeichnis der Website... 245 9.9 Weitere Navigationsmodule im Überblick... 249 9.9.1 Quicknavigation und Quicklink... 249 9.9.2 Navigationspfad: Die Breadcrumb-Navigation»Sie sind hier«... 251 9.9.3 Buchnavigation: Von einer Seite zur nächsten und zurück... 252 TEIL V Artikel und Inhaltselemente 10 Inhaltselemente für Text und Bilder... 257 10.1 Artikel und Inhaltselemente im HTML-Quelltext... 257 10.2 Das Inhaltselement»Überschrift«:»ce_headline«... 259 10.2.1 Eine Überschrift einfügen:»die Abenteuer des Lorem Ipsum«... 260 10.2.2 Das Inhaltselement»Überschrift«gestalten... 261 10.3 Das Inhaltselement»Text«:»ce_text«... 262 10.3.1 Die Eingabemaske des Inhaltselements»Text«... 262 10.3.2 Der Editor TinyMCE im Überblick... 262 10.3.3 Hyperlinks erstellen im Editor TinyMCE... 264 10.3.4 Das Inhaltselement»Text«mit einem Bild erweitern... 267 10
Inhalt 10.3.5 Das HTML für das eingefügte Bild und ein CSS-Bilderrahmen... 270 10.4 Das Inhaltselement»Bild«:»ce_image«... 272 10.4.1 Das Inhaltselement»Bild«im Einsatz... 272 10.4.2»Bild-Einstellungen«: Die Möglichkeiten der Bildanpassung... 274 10.5 Das Inhaltselement»Galerie«:»ce_gallery«... 276 10.5.1 Eine Bildergalerie erstellen... 277 10.5.2 Das HTML für die Bildergalerie... 279 10.5.3 Beschriftung von Galerien:»meta.txt«... 280 10.6 Das Inhaltselement»Top-Link«: «ce_toplink»... 283 10.6.1 Das Inhaltselement»Top-Link«einfügen... 283 10.6.2 Das Inhaltselement»Top-Link«gestalten... 285 10.6.3 Optional:»Top-Link«als Modul im Seitenlayout einbinden... 286 10.7 Syndikation: Drucken, PDF, Facebook und Twitter... 286 10.7.1 Die Links zur Syndikation aktivieren... 287 10.7.2 Die Links zur Syndikation per CSS gestalten... 288 11 Weitere nützliche Inhaltselemente... 289 11.1 Das Inhaltselement»Tabelle«:»ce_table«... 289 11.1.1 Der Eingabeassistent für das Inhaltselement»Tabelle«... 289 11.1.2 Importieren der Daten mit einer CSV-Datei... 291 11.1.3 Das HTML für das Inhaltselement»Tabelle«... 293 11.1.4 Das Inhaltselement»Tabelle«per CSS gestalten... 294 11.2 Das Inhaltselement»Akkordeon«:»ce_accordion«... 296 11.2.1 Seitenlayout vorbereiten und Artikel erstellen... 297 11.2.2 Das Eingabeformular für das Inhaltselement»Akkordeon«... 298 11.2.3 Zugeschaut und mitgebaut: Drei Akkordeons erstellen... 300 11.2.4 Das HTML für ein Akkordeon... 301 11.2.5 Das CSS zur Gestaltung eines Akkordeons... 301 11.2.6 Optional: Akkordeons mit Grafiken zur Statusanzeige... 303 11.3 Externe Videos auf Webseiten einbinden... 304 11.3.1 Video einbinden mit einem Link im Inhaltselement»Text«... 304 11.3.2 Video einbinden mit dem Inhaltselement»HTML«:»ce_html«... 306 11.4 Weitere Inhaltselemente im Überblick... 308 11.4.1 Das Inhaltselement»Code«:»ce_code«... 308 11.4.2 Das Inhaltselement»Aufzählung«:»ce_list«... 310 11
Inhalt 11.4.3 Das Inhaltselement»Modul«... 311 11.4.4 Die»Include«-Elemente im Kurzüberblick... 311 TEIL VI Contao und Formulare 12 Der Formulargenerator von Contao... 315 12.1 Ein Kontaktformular für die Beispielsite erstellen... 315 12.2 Das Kontaktformular gestalten... 327 12.2.1 Das HTML für das Kontaktformular... 327 12.2.2 Das CSS für das Kontaktformular... 329 12.3 Formulardaten auf der Seite»Vielen Dank«ausgeben... 331 12.4 Formularfelder: Die Feldtypen im Formulargenerator... 333 12.4.1 Formularfelder einfügen: Die Feldtypen im Überblick... 333 12.4.2 Überschrift und Erklärung für zusätzliche Informationen... 334 12.4.3 Formularfelder gruppieren:»fieldset«und»legend«... 335 12.4.4 Das Passwortfeld: Automatisch mit Bestätigungsfeld... 335 12.4.5 Das Select-Menü: Auswahllisten per Klick... 336 12.4.6 Das Radio-Button-Menü: Optionsfelder deluxe... 338 12.4.7 Das Checkbox-Menü: Kontrollkästchen deluxe... 341 12.4.8»Datei-Upload«: Besucher können Dateien hochladen... 343 12.4.9 Die Sicherheitsfrage zur Spamvermeidung... 344 12.5 Nützliche Erweiterungen zur Arbeit mit Formularen... 346 13 Suchfunktion: Die Beispielsite durchsuchen... 347 13.1 Die Suchfunktion im Überblick... 347 13.2 Teil 1: Eine Suchseite erstellen... 348 13.3 Teil 2: Ein Suchformular im Kopfbereich einbinden... 356 13.4 Alternative: Ein flexibleres Suchformular... 362 13.5 Die Syntax der Suchfunktion im Überblick... 368 TEIL VII Die Erweiterungen von Contao 14 Die Erweiterung»Nachrichten«... 373 14.1 Übersicht: Die Zutaten für das Nachrichtensystem... 374 14.2 Beiträge erstellen im Backend-Modul»Nachrichten«... 375 14.2.1»Newsarchiv«: Ein Nachrichtenarchiv erstellen... 375 14.2.2 Nachrichtenbeiträge schreiben... 376 14.3 Teaser und Beiträge auf den Webseiten ausgeben... 380 12
Inhalt 14.3.1 Eine Weiterleitungsseite zur Anzeige eines Beitrags in der Einzelansicht... 380 14.3.2 Das Frontend-Modul»Nachrichten Teaser anzeigen [Nachrichtenarchiv]«erstellen... 382 14.3.3 Das Frontend-Modul»Nachrichten Beitrag anzeigen [Nachrichtenleser]«erstellen... 383 14.3.4 Das Frontend-Modul»Nachrichten Teaser anzeigen«einbinden... 384 14.3.5 Das Frontend-Modul»Nachrichten Beitrag anzeigen«einbinden... 385 14.4 HTML und CSS: Teaser und Beiträge gestalten... 387 14.4.1 Das HTML des Moduls»Nachrichten Teaser anzeigen«... 387 14.4.2 Das CSS für das Modul»Nachrichten Teaser anzeigen«... 389 14.4.3 Das HTML des Moduls»Nachrichten Beitrag anzeigen«... 390 14.4.4 Das CSS für das Modul»Nachrichten Beitrag anzeigen«... 391 14.5 Bilder zu Teasern und Beiträgen hinzufügen... 392 14.6 Einen Feed zum Abonnieren der Beiträge erstellen... 395 14.7 Die Kommentarfunktion... 397 14.7.1 Die Kommentarfunktion aktivieren... 397 14.7.2 Kommentare schreiben und überprüfen... 399 14.7.3 Kommentare und Fehlermeldungen gestalten... 400 14.7.4 Kommentare im Backend verwalten... 402 14.8 Navigation: Beiträge monatsweise auswählen... 403 14.8.1 Das Frontend-Modul»Monat auswählen [Nachrichtenarchiv-Menü]«erstellen... 404 14.8.2 Neues Seitenlayout: Das Frontend-Modul»Nachrichten Monat auswählen«einbinden... 404 14.8.3 Das HTML des Frontend-Moduls»Nachrichten Monat auswählen«... 406 14.8.4 Das CSS für das Modul»Nachrichten Monat auswählen«... 406 14.8.5 Benutzerfreundlich: Ein Link, um alle Nachrichten anzuzeigen... 408 14.9 Know-how: Nachrichten, Modultypen und Templates... 410 14.9.1 Die Modultypen und die Modultemplates»mod_news*.xhtml«... 410 14.9.2 Die vier Subtemplates»news_*.xhtml«... 411 13
Inhalt 15 Die Erweiterungen»Kalender«und»FAQ«... 413 15.1 Die Erweiterung»Kalender«in der Übersicht... 413 15.2 Einen Kalender erstellen... 415 15.3 Einen Kalender gestalten... 420 15.3.1 Das HTML vom Frontend-Modul»Kalender«... 420 15.3.2 Das CSS zum Gestalten eines Kalenders... 422 15.3.3 HTML und CSS zur Gestaltung der Einzelansicht eines Events... 425 15.4 Die FAQ-Erweiterung: Häufig gestellte Fragen... 426 15.4.1 Die Kurzanleitung für die FAQ-Erweiterung... 426 15.4.2 Die FAQ-Erweiterung gestalten... 428 16 Die Erweiterung»Newsletter«... 431 16.1 Das Backend-Modul»Newsletter«... 432 16.1.1 Einen Verteiler erstellen... 432 16.1.2 Abonnenten verwalten: Die Empfänger des Newsletters... 434 16.1.3 Einen Newsletter erstellen... 434 16.1.4 Einen Newsletter versenden... 436 16.2 Newsletter im Frontend anzeigen... 437 16.2.1 Die Kurzanleitung zur Darstellung der Newsletter auf der Site... 438 16.2.2 Das HTML der Frontend-Module zur Newsletterdarstellung... 439 16.3 Newsletter im Frontend abonnieren und kündigen... 440 16.3.1 Die Kurzanleitung zum Abonnieren und Kündigen... 441 16.3.2 Das HTML der Frontend-Module»Abonnieren«und»Kündigen«... 442 17 Die Startseite gestalten... 445 17.1 Ein neues Seitenlayout für die Startseite... 446 17.2 Inhalt für die Hauptspalte: Newsbeiträge und Termine... 448 17.2.1 Die Frontend-Module für Newsbeiträge und Termine erstellen... 448 17.2.2 Die Frontend-Module auf der Startseite im Artikel einbinden... 449 17.2.3 Newsbeiträge und Termine auf der Startseite gestalten... 450 17.2.4 Datum der Nachrichten ohne Uhrzeit darstellen... 452 14
Inhalt 17.3 Sidebar erstellen: Lesetipps und Zufallsbild... 454 17.3.1 Sidebar: Lesetipps mit einem Quicklink-Modul... 454 17.3.2 Sidebar: Ein zufällig ausgewähltes Bild... 455 17.3.3 Die Sidebar gestalten... 455 17.3.4 Optional: Lesetipps auswählen ohne Klick auf»los«-button... 457 17.4 Der Minikalender in der Sidebar... 458 17.4.1 Eine neue Seite mit dem Modul»Eventliste«erstellen... 458 17.4.2 Ein Modul für den Minikalender erstellen und einbinden... 459 17.4.3 Den Minikalender gestalten... 460 17.5 Newsletter abonnieren in der Sidebar... 461 TEIL VIII Systemverwaltung 18 Der Theme-Manager in Aktion... 465 18.1 Ein Theme bestimmt das Aussehen der Website... 465 18.1.1 Der Theme-Manager verwaltet bekannte Komponenten... 465 18.1.2»Blaues Theme«von der Beispielsite exportieren... 467 18.1.3 All-in-one: Das Innenleben einer CTO-Datei... 468 18.1.4 Was nicht in einem Theme enthalten ist... 468 18.2 Das»Cover Theme«: Die Beispielsite im neuen Look... 469 18.3 Über die Anpassung von Themes... 473 18.4 Sonderfall: In Artikeln eingebundene Module... 475 18.4.1 Im Seitenlayout eingebundene Module sind unproblematisch... 475 18.4.2 In Artikeln eingebundene Frontend-Module sind Inhalt... 475 18.4.3 Was mit in Artikeln eingebundenen Modulen schiefgehen kann... 476 18.4.4 Reparatur: Anpassung von in Artikeln eingebundenen Modulen... 478 18.5 Sicherheitshinweise für Contao-Themes... 479 18.5.1 Das potenzielle Problem... 479 18.5.2 Vertrauenswürdige Quellen... 479 18.5.3 Ein Theme prüfen... 480 18.5.4 Angriff von innen... 480 18.6 Fazit: Themes sind klasse... 480 15
Inhalt 19 SEO: Die Optimierung für Suchmaschinen... 483 19.1 Lesbare Adressen: URLs umschreiben... 484 19.1.1 Content-Management-Systeme und URLs... 484 19.1.2 Die drei URL-Einstellungen von Contao... 485 19.1.3 Drei Voraussetzungen zum Umschreiben der URLs... 486 19.1.4 Die Rewrite-Regel zum URL-Umschreiben in der».htaccess«... 487 19.1.5 Contao im Unterordner: Die RewriteBase in der».htaccess«... 488 19.1.6 So wird s gemacht: URLs umschreiben in der Praxis... 489 19.2 Flache oder hierarchische URLs?... 490 19.2.1 URLs bei statischen Webseiten und bei CMSystemen... 491 19.2.2 Contao erzeugt von Haus aus flache URLs... 491 19.2.3 Hierarchische URLs in Contao... 492 19.3 Die Optimierung von Seiten... 493 19.3.1 Seitenname und Seitenalias im Backend von Contao... 493 19.3.2 Der Titel der Seite:»<title>... </title>«... 495 19.3.3 Die Beschreibung der Seite:»<meta name="description">«... 497 19.4 Abfangjäger: 404 und 403... 498 19.4.1 Statusmeldungen: Der Webserver schickt eine Nummer mit... 499 19.4.2 404-Seite nicht gefunden: Darf s vielleicht was anderes sein?... 500 19.4.3 403 Zugriff verweigert: Diese Seite gibt es, aber nicht für Sie... 503 19.5 Eine XML-Sitemap für Google & Co... 504 19.5.1 Die Google Webmaster-Tools... 504 19.5.2 Eine XML_Sitemap in Contao erstellen... 504 19.5.3 Erweiterungen zur Arbeit mit XML-Sitemaps... 506 20 Mitglieder: Im Frontend angemeldete Besucher... 507 20.1 Mitglieder und Benutzer: Der Unterschied... 507 20.2 Mitgliedergruppen und Mitglieder einrichten... 509 20.2.1 Mitgliedergruppen einrichten... 509 20.2.2 Mitglieder einrichten... 509 20.3 Seiten für die An- und Abmeldung erstellen... 510 20.4 Frontend-Module für die An- und Abmeldung erstellen... 511 20.4.1 Die Frontend-Module zur Anmeldung im Überblick... 512 16
Inhalt 20.4.2 Ein Modul für das Anmeldeformular:»[Login-Formular]«... 512 20.4.3 Ein Modul zur Abmeldung:»[Automatischer Logout]«... 513 20.4.4 Modul für den Link zur Anmeldeseite:»[Eigener HTML-Code]«... 513 20.4.5 Anmeldenamen und Abmeldelink:»[Eigener HTML-Code]«... 514 20.5 Die erstellten Module einbinden und gestalten... 515 20.5.1 Die Frontend-Module zum An- und Abmelden in Artikeln einbinden... 515 20.5.2 Die Links zur An- und Abmeldung im Fußbereich einbinden... 515 20.5.3 Die Links und das Formular zur Anmeldung gestalten... 516 20.5.4 Testen, ob die An- und Abmeldung funktionieren... 519 20.6 Einen geschützten Downloadbereich einrichten... 520 20.7 Weitere Möglichkeiten zur Mitgliederverwaltung... 524 20.7.1 Das Modul»Passwort vergessen«... 524 20.7.2 Das Modul»Persönliche Daten«... 526 20.7.3 Die automatische Registrierung für Mitglieder... 526 21 Benutzer: Im Backend angemeldete Mitarbeiter... 527 21.1 Benutzerverwaltung: Die Übersicht... 527 21.2 Die Benutzergruppe»Redakteure Nachrichten«... 528 21.3 Die Benutzerin»Helen Lewis«einrichten... 533 21.4 Die Benutzergruppe»Redakteure Artikel«... 537 21.4.1 Die Benutzergruppe»Redakteure Artikel«einrichten... 537 21.4.2 Benutzer der Benutzergruppe»Redakteure Artikel«zuweisen... 538 21.5 Zugriffsrechte für Seiten und Artikel setzen... 539 21.5.1 Zugriffsrechte: Was mit Seite und Artikel gemacht werden darf... 540 21.5.2 Zugriffsrechte für die freigegebenen Seiten setzen... 541 22 Wartung: Die Website im Alltag... 543 22.1 Das System-Log protokolliert Aktivitäten von Contao... 543 22.2 Die Systemwartung im Überblick... 544 22.2.1 Systemwartung: Daten bereinigen... 545 22.2.2 Systemwartung: Suchindex neu aufbauen... 546 22.3 Den»Cache-Flow«in Contao kontrollieren... 547 17
Inhalt 22.3.1 Cache as cache can: Cache gibt es in Contao und im Browser... 547 22.3.2 Der»Cache-Modus«von Contao in»system Einstellungen«... 548 22.3.3 Die»Cache-Einstellungen«in der Seitenstruktur definieren... 548 22.3.4»Daten bereinigen«, um den Cache zu leeren... 549 22.4 Backups erstellen: Datenbank und Dateien sichern... 550 22.4.1 Die MySQL-Datenbank sichern mit der Erweiterung [BackupDB]... 550 22.4.2 Die Daten auf dem Webspace sichern... 551 22.5 Updates: Die Versionsnummern von Contao... 552 22.5.1 Das Bugfix-Release: 2.10.x... 552 22.5.2 Das Minor-Release: 2.x.0... 553 22.5.3 Das Major-Release: x.0.0... 553 22.5.4 Sollte ich eine funktionierende Contao-Website updaten?... 553 22.5.5 Checkliste vor einem Update... 554 22.6 Der Live Update Service: Das automatische Update... 555 22.7 Das manuelle Update per FTP... 556 22.8 Webstatistiken mit Google Analytics... 557 TEIL IX Contao für Fortgeschrittene 23 Contao und moderne Webstandards... 561 23.1 Das Web im Wandel: Der Weg zu HTML5... 561 23.1.1 Von Layouttabellen zu CSS3... 561 23.1.2 Von HTML über XHTML zu HTML5... 562 23.1.3 Neuerungen in HTML5 eine vereinfachte Schreibweise... 562 23.1.4 Neuerungen in HTML5 komplett neue Strukturelemente... 563 23.1.5 Fazit: HTML5 ist die Zukunft... 564 23.2 Contao unterstützt den IE6 nicht mehr... 564 23.3 Contao und HTML5... 565 23.3.1 HTML5 oder XHTML: Das Ausgabeformat wird im Seitenlayout definiert.... 566 23.3.2 Alle Templates gibt es als XHTML und als HTML5... 566 23.3.3 Das Seitentemplate»fe_page.html5«... 567 18
Inhalt 23.3.4»html5shim«HTML5 für Internet Explorer 7 und 8 via JavaScript... 568 23.3.5 Der Problemfall: IE7 und IE8 ohne JavaScript... 569 23.3.6 Fazit: HTML5 ist die Zukunft, XHTML auf Nummer sicher... 571 23.4 Contao und CSS3... 571 23.4.1 Eine kurze Geschichte von CSS... 571 23.4.2 Wofür man CSS3 heute schon nutzen kann... 572 23.4.3 Die Browser-Präfixes:»-moz-«,»-webkit-«,»-o-«und»-ms-«... 574 23.4.4 Conditional Comments, Media Queries und globale Variablen... 574 23.4.5 Interne Stylesheets und CSS3... 575 23.4.6 Fallback für IE6 bis IE8 mit»css3 Pie«... 575 24 Tipps und Tricks bei der Arbeit mit Inhalten... 577 24.1 Text im Fußbereich mit dem TinyMCE pflegen... 577 24.2 Recycling: Inhalte auf mehreren Seiten wiederholen... 579 24.2.1 Möglichkeit 1: Für einzelne Seiten Verknüpfungen... 579 24.2.2 Möglichkeit 2: Für alle Seiten eines Seitenlayouts Frontend-Modul... 581 24.3 Anfahrtsskizze mit Google Maps: [dlh_googlemaps]... 583 24.3.1 Die Erweiterung [dlh_googlemaps] im Überblick... 583 24.3.2 Schritt 1: Eine Karte erstellen in»inhalte Google Maps«... 584 24.3.3 Schritt 2: Karten-Elemente eine Info-Sprechblase hinzufügen... 584 24.3.4 Schritt 3: Das Inhaltselement»Google Map«in Contao einbinden... 586 24.3.5 Gewusst wie: Die manuelle Ermittlung der Geo- Koordinaten... 586 24.4 Newsbeiträge mit Inhaltselementen... 587 24.5 Artikelteaser auf Übersichtsseiten... 590 24.5.1 Teasertexte für die drei Artikel erstellen... 591 24.5.2 Die Teasertexte auf der Seite»Artikel erstellen«einbinden... 592 24.5.3 Das HTML für die Teasertexte auf der Seite»Artikel erstellen«... 593 24.6 Mehrere Artikel auf einer Seite... 595 24.6.1 Methode 1: Nur ein Artikel pro Seite und Spalte... 595 19
Inhalt 24.6.2 Methode 2: Mehrere ganze Artikel pro Seite und Spalte... 595 24.6.3 Methode 3: Mehrere angeteaserte Artikel pro Seite und Spalte... 596 24.6.4 Die Frontend-Module»Artikelliste«und»Artikelnavigation«... 597 25 Tipps und Tricks zur Systemverwaltung... 599 25.1 Wichtige Konfigurationsdateien von Contao... 599 25.1.1 Die Systemkonfiguration:»localconfig.php«... 599 25.1.2 Die Sprachkonfiguration:»langconfig.php«... 601 25.1.3 Infos zu Datenbanktabellen:»dcaconfig.php«... 601 25.2 Tipps und Tricks zum TinyMCE... 602 25.2.1 Ein Stylesheet für den TinyMCE:»tl_files/tinymce.css«... 602 25.2.2 Textbausteine im TinyMCE: Inhalte aus Vorlage einfügen... 603 25.2.3 Die Symbolleisten des TinyMCE anpassen... 604 25.2.4 Konfiguration des TinyMCE pro Benutzergruppe anpassen... 606 25.3 Layouts für Fortgeschrittene... 607 25.3.1 Eigene Layoutbereiche erstellen und aktivieren... 608 25.3.2 Eigene Seitentemplates erstellen... 609 25.3.3 Contao mit anderen CSS-Frameworks nutzen... 609 25.4 Mehrere Websites in einer Contao-Installation... 610 25.4.1 Ein Startpunkt für jede Website... 610 25.4.2 Mehrsprachige Website mit automatischer Sprachwahl... 611 25.4.3 Mehrere Domains in einer Contao-Installation... 612 25.4.4 Zusammenfassung: Mehrere Websites in mehreren Sprachen... 613 25.5 Die Inserttags im Überblick... 614 25.5.1 Inserttags für Link-Elemente... 614 25.5.2 Benutzereigenschaften: Inserttags für Frontend- Benutzer... 615 25.5.3 Umgebungsvariablen... 616 25.5.4 Include-Elemente... 617 25.5.5 Verschiedenes: Datum, E-Mail und Sprachen... 618 Index... 619 20
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. 2 Schnelldurchlauf: So funktioniert Contao Die Themen im Überblick: Das Frontend ist die Website, Seite 36 Das Backend ist die Verwaltungsabteilung, Seite 37 Die Seitenstruktur ist das Fundament der Website, Seite 39 Themes bestimmen das Aussehen der Site, Seite 40 Module erzeugen den Quelltext für das Frontend, Seite 41 Jede Seite hat ein Seitenlayout, Seite 42 Seitenlayouts verbinden die Seiten mit Stylesheets, Seite 45 Jeder Artikel gehört zu einer Seite, Seite 46 Ein Artikel besteht aus Inhaltselementen, Seite 47 Das Backend ist für Redakteure sehr übersichtlich, Seite 50 Zusammenfassung so tickt Contao, Seite 51 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 Zusammenhänge kennen, ohne gleich das CMS installieren zu müssen. CMS-Umsteiger finden die Funktionsprinzipien von Contao auf wenigen Seiten komprimiert und können sie beim Lesen mit bereits bekannten Systemen vergleichen. Auf den folgenden Seiten machen Sie Bekanntschaft mit den Begriffen Frontend, Backend, Seitenstruktur, Themes, Modul, Seitenlayouts, Artikel, Inhaltselement und Rechteverwaltung und sehen, wie diese Komponenten zusammenarbeiten. 35
2 Schnelldurchlauf: So funktioniert Contao Dieses Kapitel können Sie online oder offline lesen Die Abbildungen in diesem Kapitel sind so gewählt, dass die Lektüre ohne Internetzugang problemlos möglich ist. Mehr Spaß macht es aber wahrscheinlich, wenn Sie während 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 ausprobieren. 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.1 Das Frontend ist die Website Contao besteht aus einem Frontend und einem Backend. Das Frontend ist die eigentliche 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«36
Das Backend ist die Verwaltungsabteilung 2.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 Website. 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 Benutzername 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 Browserfenster, 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. 37
2 Schnelldurchlauf: So funktioniert Contao Abbildung 2.3 Die Anmeldung zum Backend von Contao Infobereich Navigationsbereich Arbeitsbereich 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 Wilson hingegen sehen nur den Teil des Backends, den sie für ihre Arbeit 38
Die Seitenstruktur ist das Fundament der Website 2.3 benötigen (siehe Abschnitt 2.10,»Das Backend ist für Redakteure sehr übersichtlich«, ab Seite 50). Das Backend lernen Sie später genauer kennen Beim Schnelldurchlauf in diesem Kapitel machen Sie nur ein paar ausgesuchte Zwischenstopps im Backend. In Kapitel 5,»Ein kurzer Rundgang im Backend«, lernen Sie das Backend genauer kennen (ab Seite 111). 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örper so 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 39
2 Schnelldurchlauf: So funktioniert Contao 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 wenigen 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 z. B. 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. Versehentliche Bearbeitungsschritte kann man rückgängig machen Die Online-Demo ist unkaputtbar, und nach dem stündlichen Reset ist die Seite Teachers wieder da. Contao bietet aber auch eine sehr komfortable Funktion, um versehentliche Bearbeitungsschritte rückgängig zu machen: Im Navigationsbereich gibt es unten links im Bereich Benutzerfunktionen einen Menüpunkt namens Rückgängig. Probieren Sie ihn ruhig aus. 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 Navigationsbereich, sehen Sie in der Online-Demo das Theme Music Academy (Abbildung 2.6). Abbildung 2.6 Das Backend-Modul»Themes«im Überblick 40
Module erzeugen den Quelltext für das Frontend 2.5 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 erzeugen. 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. 41
2 Schnelldurchlauf: So funktioniert Contao Die Hauptnavigation im Frontend wird z. B. von dem Modul Navigation Main navigation erzeugt, das auf dem Modultyp Navigationsmenü basiert und mit wenigen Einstellungen 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«, ab Seite 221. Templates definieren, welches HTML die Module erzeugen Frontend-Module werden bequem per Eingabemaske im Backend konfiguriert. Welches HTML ein Modul genau erzeugt, wird über Templates gesteuert. Mehr dazu lesen Sie in Abschnitt 6.7,»Templates erstellen das HTML für den Quelltext«, ab Seite 159. 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 42
Jede Seite hat ein Seitenlayout 2.6 und Standard oder Kopf- und Fusszeile mit einem Klick auf die grünen Überschriften komfortabel ein- und ausblenden, sodass die Seite immer übersichtlich bleibt. Abbildung 2.9 Ein Seitenlayout die wichtigsten Einstellungen Diese Einstellungen erzeugen folgendes Seitenlayout: 1 eine Kopfzeile mit einer festen Höhe von 273 px 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. 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 Seitenlayout definiert. 43
2 Schnelldurchlauf: So funktioniert Contao Abbildung 2.10 Das Seitenlayout im Frontend 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 (Abbildung 2.11). Abbildung 2.11 Modul»Navigation Main navigation«in»kopfzeile«44
Seitenlayouts verbinden die Seiten mit Stylesheets 2.7 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 drei Stylesheets basic, music_academy und print gespeichert, mit denen die Music Academy gestaltet wird. In Klammern dahinter wird jeweils der definierte Medientyp angezeigt. Abbildung 2.12 zeigt das Backend-Modul Themes Stylesheets mit den drei Stylesheets. Abbildung 2.12 Im Backend-Bereich»Stylesheets«gibt es drei Stylesheets. Im Backend-Modul Themes Seitenlayouts werden für jedes definierte Seitenlayout die gewünschten Stylesheets ausgewählt. Abbildung 2.13 zeigt, dass für das Default layout [Standard] die beiden Stylesheets basic und music_academy aktiviert wurden. Abbildung 2.13 Mit dem»default layout«sind zwei Stylesheets verbunden. 45
2 Schnelldurchlauf: So funktioniert Contao Probieren Sie es einmal aus: Deaktivieren Sie im Seitenlayout die Stylesheets basic und music_academy. Klicken Sie unten auf der Seite auf die Schaltfläche Speichern. Rufen Sie das Frontend im Browser auf, und laden Sie es neu. Nach dieser Aktion sieht das Frontend im Browser etwas anders aus, denn die Formatierungen 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 46
Ein Artikel besteht aus Inhaltselementen 2.9 Im Backend-Modul Artikel sehen Sie die bereits bekannte Seitenstruktur, aber dieses Mal mit den dazugehörigen Artikeln (Abbildung 2.15). Mit einem Klick auf die Plus- und Minus-Zeichen können Sie diesen Artikelbaum bei Bedarf ein- und ausklappen. Auf der Seite Impressions wird ein gleichnamiger Artikel gelistet, der in der [Hauptspalte] erscheint. Abbildung 2.15 Der Artikel»Impressions«auf der Seite»Impressions«Ein Artikel ist genau genommen nur ein»container«, ein Bereich auf einer Webseite, der ein oder mehrere Inhaltselemente enthält. Die eigentlichen Inhalte (Texte, Grafiken etc.) werden in diesen Inhaltselementen aufbewahrt. Ohne Inhaltselemente ist ein Artikel im Frontend nur ein leerer Bereich und nicht zu sehen. 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 werden muss. 2.9 Ein Artikel besteht aus Inhaltselementen Artikel bestehen also aus Inhaltselementen, in denen die eigentlichen Inhalte gespeichert werden. Contao stellt für verschiedene Inhaltstypen vorgefertigte Inhaltselemente bereit. So gibt es z. B. spezielle Inhaltselemente für Überschriften, Texte (mit und ohne Bilder), Bildergalerien, Tabellen, Listen und vieles mehr. 47
2 Schnelldurchlauf: So funktioniert Contao 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. 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 Metadaten genannt. Dazu zählen z. B. der Titel des Artikels, der Autor und das Änderungsdatum. Diese Einstellungen werden im Frontend nicht angezeigt. Unterhalb der Einstellungen 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 48
Ein Artikel besteht aus Inhaltselementen 2.9 Abbildung 2.17 zeigt diese drei Inhaltselemente im Frontend. Abbildung 2.17 Der Artikel»Impressions«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 Vorteil, 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 erscheinen, 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. 49
2 Schnelldurchlauf: So funktioniert Contao 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 CMSystemen, in denen immer der ganze Artikel in einem Editorfenster erscheint. 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 auf Seite 36 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 verantwortlich für die inhaltliche Pflege der Seiten unterhalb von Courses. Wenn er sich mit seinem Benutzernamen»j.wilson«und seinem Passwort»jameswilson«anmeldet, 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. 50
Zusammenfassung so tickt Contao 2.11 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 Seitenlayout 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 und dergleichen mehr, aber das Buch hat ja auch gerade erst angefangen. 51
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 Modulen bis zum ersten Stylesheet und endet schließlich mit einem ersten Artikel, einem Blick auf ein Template und einem Überblick über das Zusammenspiel der Komponenten in Contao. 6 Die erste Website mit Contao Die Themen im Überblick:»No pages found«die Seitenstruktur erstellen, Seite 127»No layout specified«theme und Seitenlayout erstellen, Seite 134 Das erste Frontend-Modul:»Navigation Hauptnavi«, Seite 139 Frontend-Module für den Kopf- und den Fußbereich, Seite 143 Das erste Stylesheet erstellen und zuweisen, Seite 145 Der erste Artikel und zwei Inhaltselemente, Seite 154 Templates erstellen das HTML für den Quelltext, Seite 159 Das Contao-Prinzip: Altogether now, Seite 165 Anfangs kommen einem bei der Arbeit mit Contao Begriffe wie Seite, Seitenlayout, Theme, Frontend-Modul, Stylesheet, Artikel und Inhaltselement wie einzelne Puzzleteile vor, die nicht so richtig zusammenpassen wollen. Dieses Kapitel erläutert das Zusammenspiel dieser Komponenten und hilft Ihnen bei der Eingewöhnung. 6.1»No pages found«die Seitenstruktur erstellen Wenn Sie unter der Adresse http://localhost/contaobuch das Frontend der frisch installierten Beispielsite aufrufen, ist es recht übersichtlich. Links oben steht die Meldung»No pages found«, und sonst ist nichts zu sehen (Abbildung 6.1). 127
6 Die erste Website mit Contao Abbildung 6.1 Das Frontend nach der Installation einer leeren Site Das ist nicht gerade spektakulär, aber der Befund»No pages found«entspricht den Tatsachen, denn im Backend gibt es tatsächlich noch keine Seiten. 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 ein sogenannter Startpunkt einer Webseite. Mit dem Begriff Webseite ist in diesem Fall die Website gemeint, denn Contao kann in einer Installation mehrere Websites verwalten, und im Seitenbaum beginnt jede Site mit einem solchen Startpunkt. Ein Startpunkt ist übrigens nicht identisch mit der Startseite für Besucher im Frontend. Ein Startpunkt dient lediglich zu Verwaltungszwecken im Backend und taucht im Frontend nicht auf. Abbildung 6.2 zeigt die Einstellungen aus dem folgenden 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/ 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. Klicken Sie in dieser Zeile ganz rechts auf das blinkende braune Symbol mit dem Pfeil nach rechts, um eine neue Seite einzufügen. 5. Geben Sie im Feld Seitenname»Beispielsite Contaobuch«ein 1. 6. Wählen Sie als Seitentyp die Option Startpunkt einer Webseite 2. Daraufhin wird das Feld Seitenalias automatisch ausgefüllt. 128