Websites erstellen mit Contao - ReadingSample Konfiguration, Administration, Erweiterungen, Theme Manager, SEO u.v.m ... »fe_page.xhtml ... 9.3 Die Seitenstruktur der Beispielsite

Galileo Computing

Websites erstellen mit Contao

Installation, Konfiguration, Administration, Erweiterungen, Theme Manager, SEO u.v.m.

Bearbeitet vonPeter Müller

erweitert 2011. Buch.ISBN 978 3 8362 1814 6

Format (B x L): 16,8 x 24 cm

Weitere Fachgebiete > EDV, Informatik > Professionelle Anwendung > Web Graphik &Design, Web-Publishing

schnell und portofrei erhältlich bei

Die Online-Fachbuchhandlung beck-shop.de ist spezialisiert auf Fachbücher, insbesondere Recht, Steuern und Wirtschaft.Im Sortiment finden Sie alle Medien (Bücher, Zeitschriften, CDs, eBooks, etc.) aller Verlage. Ergänzt wird das Programmdurch Services wie Neuerscheinungsdienst oder Zusammenstellungen von Büchern zu Sonderpreisen. Der Shop führt mehr

als 8 Millionen Produkte.

http://www.beck-shop.de/Mueller-Websites-erstellen-Contao/productview.aspx?product=9088161&utm_source=pdf&utm_medium=clickthru_lp&utm_campaign=pdf_9088161&campaign=pdf/9088161

http://www.beck-shop.de/trefferliste.aspx?toc=8265

http://www.beck-shop.de/trefferliste.aspx?toc=8265

Peter Müller

Websites erstellen mit Contao

Auf einen Blick

TEIL I Contao kennenlernen1 Das ist Contao .......................................................... 272 Schnelldurchlauf: So funktioniert Contao .................... 35

TEIL II Contao installieren3 XAMPP: Der Offline-Webspace ................................. 554 Die Installation von Contao ....................................... 77

TEIL III Schritt für Schritt zur ersten Website5 Ein kurzer Rundgang im Backend ............................... 1116 Die erste Website mit Contao .................................... 127

TEIL IV Webseiten gestalten mit Contao7 Contao und CSS: Interne Stylesheets .......................... 1698 Externe Stylesheets und CSS-Framework .................... 1979 Navigationen erstellen in Contao ............................... 215

TEIL V Artikel und Inhaltselemente10 Inhaltselemente für Text und Bilder ........................... 25711 Weitere nützliche Inhaltselemente ............................. 289

TEIL VI Contao und Formulare12 Der Formulargenerator von Contao ............................ 31513 Suchfunktion: Die Beispielsite durchsuchen ................ 347

TEIL VII Die Erweiterungen von Contao14 Die Erweiterung »Nachrichten« .................................. 37315 Die Erweiterungen »Kalender« und »FAQ« ................. 41316 Die Erweiterung »Newsletter« ................................... 43117 Die Startseite gestalten ............................................. 445

TEIL VIII Systemverwaltung18 Der Theme-Manager in Aktion .................................. 46519 SEO: Die Optimierung für Suchmaschinen .................. 48320 Mitglieder: Im Frontend angemeldete Besucher .......... 50721 Benutzer: Im Backend angemeldete Mitarbeiter .......... 52722 Wartung: Die Website im Alltag ................................ 543

TEIL IX Contao für Fortgeschrittene23 Contao und moderne Webstandards .......................... 56124 Tipps und Tricks bei der Arbeit mit Inhalten ............... 57725 Tipps und Tricks zur Systemverwaltung ...................... 599

5

Inhalt

Geleitwort des Fachgutachters ........................................................................ 21Vorwort zur zweiten Auflage .......................................................................... 23

TEIL I Contao kennenlernen

1 Das ist Contao .......................................................................... 27

1.1 Contao ist ein Content-Management-System ............................... 271.1.1 Brauchen Sie ein Content-Management-System? ............. 271.1.2 Contao unterstützt Sie bei Inhalt, Gestaltung und

Funktionen ..................................................................... 281.2 Die Website zum Programm: »www.contao.org« ......................... 291.3 Ein paar Highlights von Contao .................................................... 301.4 Die Community im Web: »www.contao-community.de« .............. 32

1.4.1 Tipps zur Benutzung des Forums ..................................... 331.4.2 Fragen zum Buch bitte auch im Forum stellen ................. 33

2 Schnelldurchlauf: So funktioniert Contao ............................... 35

2.1 Das Frontend ist die Website ....................................................... 362.2 Das Backend ist die Verwaltungsabteilung ................................... 372.3 Die Seitenstruktur ist das Fundament der Website ....................... 392.4 Themes bestimmen das Aussehen der Site ................................... 402.5 Module erzeugen den Quelltext für das Frontend ........................ 412.6 Jede Seite hat ein Seitenlayout ..................................................... 422.7 Seitenlayouts verbinden die Seiten mit Stylesheets ...................... 452.8 Jeder Artikel gehört zu einer Seite ............................................... 462.9 Ein Artikel besteht aus Inhaltselementen ..................................... 472.10 Das Backend ist für Redakteure sehr übersichtlich ........................ 502.11 Zusammenfassung – so tickt Contao ............................................. 51

TEIL II Contao installieren

3 XAMPP: Der Offline-Webspace ............................................... 55

3.1 XAMPP ist Webspace auf Ihrem Rechner ..................................... 553.1.1 Statische Webseiten: Der Webspace als Lagerhalle .......... 563.1.2 Content-Management-System: Der Webspace als

Werkstatt ........................................................................ 56

Inhalt

6

3.2 Die Installation von XAMPP Lite (Windows) ................................ 573.2.1 XAMPP Lite installieren .................................................. 583.2.2 Das XAMPP Control Panel .............................................. 583.2.3 Testen, ob der Webserver funktioniert ............................ 60

3.3 Der Sicherheitscheck von XAMPP ................................................ 613.3.1 Den Sicherheitscheck aufrufen ........................................ 613.3.2 Einen Passwortschutz für MySQL und

phpMyAdmin einrichten ................................................. 633.3.3 Passwortschutz für das XAMPP-Verzeichnis einrichten .... 643.3.4 Die neuen Sicherheitseinstellungen testen ....................... 65

3.4 Der Webserver: Apache serviert Webseiten ................................. 663.4.1 Der Apache ist ein Webserver ......................................... 663.4.2 DocumentRoot: »htdocs«, der Ordner für die

Webseiten ...................................................................... 663.5 PHP: Programmiersprache und Interpreter ................................... 673.6 MySQL serviert SQL-Datenbanken ............................................... 70

3.6.1 Eine relationale Datenbank besteht aus Tabellen ............. 703.6.2 SQL ist die Sprache zur Verwaltung von Datenbanken ..... 723.6.3 MySQL verwaltet mehrere relationale Datenbanken ........ 723.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 ............................................................................... 774.1.1 Die Systemvoraussetzungen ............................................ 774.1.2 Die richtige Contao-Version für dieses Buch .................... 78

4.2 Offline: Contao auf Ihrem Rechner installieren ............................. 784.3 Online: Contao im Web installieren ............................................. 89

4.3.1 Informationen über Webhoster im Forum ....................... 894.3.2 Webspace prüfen: Der Contao-Check .............................. 904.3.3 Dateien auf den Webspace kopieren ............................... 914.3.4 Zugangsdaten für die Datenbank ..................................... 934.3.5 Die Installation im Überblick ........................................... 93

4.4 »Safe Mode Hack«: Der FTP-Modus von Contao .......................... 954.4.1 »Sie benötigen wahrscheinlich den Safe Mode Hack« ...... 954.4.2 Eine Alternative zum SMH: PHP als CGI oder Fast-CGI .... 964.4.3 Online: So richten Sie den Safe Mode Hack ein ............... 964.4.4 Offline-Webspace: SMH bei einer lokalen

Installation umgehen ....................................................... 984.5 Sonstige potenzielle Installationsprobleme ................................... 99

Inhalt

7

4.5.1 PHP-Version zu alt: »Parse error…« ................................. 994.5.2 Hilfe bei sonstigen Installationsproblemen ...................... 100

4.6 Umzug: Von XAMPP auf den Online-Webspace ........................... 1014.7 Know-how: Dateiberechtigungen – das 1×1 zu 644 ..................... 104

4.7.1 Besitzer, Benutzer und Berechtigungen: 644 und 755 ..... 1044.7.2 PHP und Contao: Benutzerrechte, Modul und (Fast)CGI ... 1054.7.3 Was der Safe Mode Hack genau macht ........................... 1064.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 ............................................................... 1115.1.1 Ganz oben im Backend: Der Infobereich .......................... 1125.1.2 Links: Der Navigationsbereich (Backend-Module) ............ 1145.1.3 Rechts: Der Arbeitsbereich .............................................. 114

5.2 Das Backend-Modul »System � Einstellungen« .............................. 1165.2.1 Der »Titel der Webseite« ................................................. 1165.2.2 Das Format für Angaben von Datum und Zeit ................. 118

5.3 Der Dateimanager: »System � Dateiverwaltung« ........................... 1195.3.1 Ordner erstellen mit dem Dateimanager ......................... 1195.3.2 Dateien mit dem Dateimanager hochladen ..................... 1205.3.3 Template-Ordner erstellen im Backend-Modul

»Templates« .................................................................... 1225.4 Der Erweiterungskatalog: Erweiterungen installieren .................... 123

5.4.1 Die Erweiterungsliste auf »contao.org« ............................ 1235.4.2 Die Erweiterung [BackupDB] aus dem Backend

heraus installieren ........................................................... 1245.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 .......................... 1276.1.1 Der Startpunkt für eine neue Website ............................. 1286.1.2 Der Sprachen-Fallback für den Startpunkt ....................... 1306.1.3 Die Startseite für die Beispielsite erstellen ....................... 1306.1.4 Die Seitenstruktur für die Beispielsite erweitern .............. 1326.1.5 Drei Klick-Tipps für die Arbeit mit dem Seitenbaum ........ 133

6.2 »No layout specified« – Theme und Seitenlayout erstellen ............ 1346.2.1 Das erste Theme erstellen ............................................... 134

Inhalt

8

6.2.2 Das erste Seitenlayout erstellen ....................................... 1366.2.3 Ein kurzer Blick in den Quelltext ..................................... 138

6.3 Das erste Frontend-Modul: »Navigation – Hauptnavi« ................. 1396.3.1 Ein Navigationsmodul erstellen ....................................... 1406.3.2 Das Navigationsmodul im Seitenlayout einbinden ........... 141

6.4 Frontend-Module für den Kopf- und den Fußbereich ................... 1436.4.1 Module für den Kopf- und den Fußbereich erstellen ....... 1436.4.2 Die Module für den Kopf- und den Fußbereich im

Seitenlayout einbinden .................................................... 1446.5 Das erste Stylesheet erstellen und zuweisen ................................. 145

6.5.1 Das erste Stylesheet im Backend erstellen ....................... 1466.5.2 Stylesheet bearbeiten: Einen Style für »body« erstellen .... 1476.5.3 Weitere Styles für »html«, »#wrapper« und

»#container« erstellen ..................................................... 1486.5.4 Das Stylesheet mit dem Seitenlayout verbinden .............. 1506.5.5 Weitere Styles für Kopfbereich, Hauptspalte und

Fußbereich ...................................................................... 1516.6 Der erste Artikel und zwei Inhaltselemente .................................. 154

6.6.1 Der Artikelbaum: Die Übersicht über alle Artikel ............. 1546.6.2 Die Einstellungen für einen Artikel .................................. 1556.6.3 Inhaltselemente zu einem Artikel hinzufügen .................. 1576.6.4 Den Artikel mit dem Seitenlayout verbinden ................... 158

6.7 Templates erstellen das HTML für den Quelltext .......................... 1596.7.1 In Contao gibt es viele verschiedene Arten von

Templates ....................................................................... 1596.7.2 Das HTML der Navigation im Quelltext ........................... 1616.7.3 Backend-Modul »Templates«: Templates update-

sicher anpassen ............................................................... 1626.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 .......................................................... 1697.1.1 Gestatten: Das CSS-Framework von Contao .................... 1697.1.2 Interne oder externe Stylesheets ..................................... 170

7.2 So funktionieren interne Stylesheets ............................................ 1717.3 Der interne CSS-Editor: CSS per HTML-Formular ......................... 172

7.3.1 Die Gruppe »Selektor und Kategorie« .............................. 172

Inhalt

9

7.3.2 Die Gruppe »Abmessungen« ............................................ 1737.3.3 Die Gruppe »Position« ..................................................... 1737.3.4 Die Gruppe »Abstand und Ausrichtung« .......................... 1747.3.5 Die Gruppe »Hintergrund« .............................................. 1757.3.6 Die Gruppe »Rahmen« .................................................... 1767.3.7 Die Gruppe »Schrift« ....................................................... 1767.3.8 Die Gruppen Aufzählung und Eigener Code ..................... 177

7.4 Der interne CSS-Editor in der Praxis ............................................. 1787.4.1 Das Stylesheet »bildschirm« mit dem inter-

nen CSS-Editor bearbeiten .............................................. 1787.4.2 Tasten und Maus: Tipps für die Arbeit mit dem

internen CSS-Editor ......................................................... 1807.5 CSS-Dateien importieren: »basic.css« ........................................... 181

7.5.1 Das Reset-Stylesheet »basic.css« herunterladen ............... 1817.5.2 Das Reset-Stylesheet »basic.css« importieren ................... 1827.5.3 Das Reset-Stylesheet »basic.css« im Detail ....................... 185

7.6 Suchen und Filtern von Styles ...................................................... 1887.6.1 Styles mit bestimmten Selektoren suchen ........................ 1887.6.2 Filtern nach Kategorie ..................................................... 189

7.7 Die Erweiterung [csseditor] .......................................................... 1917.7.1 Die Erweiterung [csseditor] installieren und

kennenlernen .................................................................. 1917.7.2 Interne Stylesheets extern bearbeiten .............................. 1927.7.3 Einschränkungen bei der Arbeit mit [csseditor] ................ 193

7.8 Übung: Navigation gestalten mit internem Stylesheet .................. 1947.9 Fazit: Interne Stylesheets und »Seitenlayouts« .............................. 196

8 Externe Stylesheets und CSS-Framework ............................... 197

8.1 Externe Stylesheets sind ganz normale CSS-Dateien ..................... 1978.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 ...................... 1998.2.3 Schritt 3: Das zentrale Stylesheet im Seitenlayout

einbinden ........................................................................ 2018.3 Fazit: Externe Stylesheets und »Seitenlayouts« ............................. 2028.4 Teamwork: Interne und externe Stylesheets zusammen ................ 203

8.4.1 Nacheinander: Extern entwickeln, intern pflegen ............. 2038.4.2 Miteinander: Externe Stylesheets plus interne ................. 204

8.5 Contao und CSS: Jeder so wie er gerne möchte ............................ 204

Inhalt

10

8.6 Das CSS-Framework von Contao im Detail ................................... 2058.6.1 Das HTML-Grundgerüst von Contao in

»fe_page.xhtml« .............................................................. 2058.6.2 »$this->framework«: Die Einstellungen aus dem

Seitenlayout .................................................................... 2078.6.3 Stylesheets einbinden: »$this->stylesheets« und

»$this->head« ................................................................. 2098.6.4 Das CSS-Framework von Contao aus Benutzersicht ......... 2098.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 ..................... 2159.2 Die Navigationsmodule von Contao im Überblick ........................ 2169.3 Die Seitenstruktur der Beispielsite erweitern ................................ 2189.4 Eine vertikale Navigation mit zwei Ebenen ................................... 2209.5 Eine horizontale Navigation mit zwei Ebenen .............................. 2269.6 Horizontale und vertikale Navigation zusammen .......................... 2359.7 Metanavigation: Eine »Individuelle Navigation« ........................... 2389.8 Sitemap: Das Inhaltsverzeichnis der Website ................................ 2459.9 Weitere Navigationsmodule im Überblick .................................... 249

9.9.1 Quicknavigation und Quicklink ....................................... 2499.9.2 Navigationspfad: Die Breadcrumb-Navigation

»Sie sind hier« ................................................................. 2519.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 .......................... 25710.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 ..................... 26110.3 Das Inhaltselement »Text«: »ce_text« ........................................... 262

10.3.1 Die Eingabemaske des Inhaltselements »Text« ................. 26210.3.2 Der Editor TinyMCE im Überblick .................................... 26210.3.3 Hyperlinks erstellen im Editor TinyMCE ........................... 26410.3.4 Das Inhaltselement »Text« mit einem Bild erweitern ........ 267

Inhalt

11

10.3.5 Das HTML für das eingefügte Bild und ein CSS-Bilderrahmen ........................................................... 270

10.4 Das Inhaltselement »Bild«: »ce_image« ........................................ 27210.4.1 Das Inhaltselement »Bild« im Einsatz ............................... 27210.4.2 »Bild-Einstellungen«: Die Möglichkeiten der

Bildanpassung ................................................................. 27410.5 Das Inhaltselement »Galerie«: »ce_gallery« ................................... 276

10.5.1 Eine Bildergalerie erstellen .............................................. 27710.5.2 Das HTML für die Bildergalerie ........................................ 27910.5.3 Beschriftung von Galerien: »meta.txt« ............................. 280

10.6 Das Inhaltselement »Top-Link«: «ce_toplink» ............................... 28310.6.1 Das Inhaltselement »Top-Link« einfügen ......................... 28310.6.2 Das Inhaltselement »Top-Link« gestalten ......................... 28510.6.3 Optional: »Top-Link« als Modul im Seitenlayout

einbinden ........................................................................ 28610.7 Syndikation: Drucken, PDF, Facebook und Twitter ....................... 286

10.7.1 Die Links zur Syndikation aktivieren ................................ 28710.7.2 Die Links zur Syndikation per CSS gestalten ..................... 288

11 Weitere nützliche Inhaltselemente ......................................... 289

11.1 Das Inhaltselement »Tabelle«: »ce_table« ..................................... 28911.1.1 Der Eingabeassistent für das Inhaltselement »Tabelle« ..... 28911.1.2 Importieren der Daten mit einer CSV-Datei ..................... 29111.1.3 Das HTML für das Inhaltselement »Tabelle« .................... 29311.1.4 Das Inhaltselement »Tabelle« per CSS gestalten ............... 294

11.2 Das Inhaltselement »Akkordeon«: »ce_accordion« ........................ 29611.2.1 Seitenlayout vorbereiten und Artikel erstellen ................. 29711.2.2 Das Eingabeformular für das Inhaltselement

»Akkordeon« ................................................................... 29811.2.3 Zugeschaut und mitgebaut: Drei Akkordeons erstellen .... 30011.2.4 Das HTML für ein Akkordeon .......................................... 30111.2.5 Das CSS zur Gestaltung eines Akkordeons ....................... 30111.2.6 Optional: Akkordeons mit Grafiken zur Statusanzeige ...... 303

11.3 Externe Videos auf Webseiten einbinden ..................................... 30411.3.1 Video einbinden mit einem Link im Inhaltselement

»Text« ............................................................................. 30411.3.2 Video einbinden mit dem Inhaltselement »HTML«:

»ce_html« ........................................................................ 30611.4 Weitere Inhaltselemente im Überblick ......................................... 308

11.4.1 Das Inhaltselement »Code«: »ce_code« ............................ 30811.4.2 Das Inhaltselement »Aufzählung«: »ce_list« ..................... 310

Inhalt

12

11.4.3 Das Inhaltselement »Modul« ........................................... 31111.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 ......................... 31512.2 Das Kontaktformular gestalten ..................................................... 327

12.2.1 Das HTML für das Kontaktformular ................................. 32712.2.2 Das CSS für das Kontaktformular ..................................... 329

12.3 Formulardaten auf der Seite »Vielen Dank« ausgeben .................. 33112.4 Formularfelder: Die Feldtypen im Formulargenerator ................... 333

12.4.1 Formularfelder einfügen: Die Feldtypen im Überblick ...... 33312.4.2 Überschrift und Erklärung für zusätzliche

Informationen ................................................................. 33412.4.3 Formularfelder gruppieren: »fieldset« und »legend« ......... 33512.4.4 Das Passwortfeld: Automatisch mit Bestätigungsfeld ....... 33512.4.5 Das Select-Menü: Auswahllisten per Klick ....................... 33612.4.6 Das Radio-Button-Menü: Optionsfelder deluxe ............... 33812.4.7 Das Checkbox-Menü: Kontrollkästchen deluxe ................ 34112.4.8 »Datei-Upload«: Besucher können Dateien hochladen ..... 34312.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 .................................................... 34713.2 Teil 1: Eine Suchseite erstellen ..................................................... 34813.3 Teil 2: Ein Suchformular im Kopfbereich einbinden ...................... 35613.4 Alternative: Ein flexibleres Suchformular ...................................... 36213.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 ....................... 37414.2 Beiträge erstellen im Backend-Modul »Nachrichten« .................... 375

14.2.1 »Newsarchiv«: Ein Nachrichtenarchiv erstellen ................ 37514.2.2 Nachrichtenbeiträge schreiben ........................................ 376

14.3 Teaser und Beiträge auf den Webseiten ausgeben ........................ 380

Inhalt

13

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 ............................. 38714.4.1 Das HTML des Moduls »Nachrichten – Teaser

anzeigen« ........................................................................ 38714.4.2 Das CSS für das Modul »Nachrichten – Teaser

anzeigen« ........................................................................ 38914.4.3 Das HTML des Moduls »Nachrichten – Beitrag

anzeigen« ........................................................................ 39014.4.4 Das CSS für das Modul »Nachrichten – Beitrag

anzeigen« ........................................................................ 39114.5 Bilder zu Teasern und Beiträgen hinzufügen ................................. 39214.6 Einen Feed zum Abonnieren der Beiträge erstellen ...................... 39514.7 Die Kommentarfunktion .............................................................. 397

14.7.1 Die Kommentarfunktion aktivieren .................................. 39714.7.2 Kommentare schreiben und überprüfen .......................... 39914.7.3 Kommentare und Fehlermeldungen gestalten ................. 40014.7.4 Kommentare im Backend verwalten ................................ 402

14.8 Navigation: Beiträge monatsweise auswählen .............................. 40314.8.1 Das Frontend-Modul »Monat auswählen

[Nachrichtenarchiv-Menü]« erstellen ............................... 40414.8.2 Neues Seitenlayout: Das Frontend-Modul

»Nachrichten – Monat auswählen« einbinden .................. 40414.8.3 Das HTML des Frontend-Moduls »Nachrichten –

Monat auswählen« .......................................................... 40614.8.4 Das CSS für das Modul »Nachrichten – Monat

auswählen« ..................................................................... 40614.8.5 Benutzerfreundlich: Ein Link, um alle Nachrichten

anzuzeigen ...................................................................... 40814.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

Inhalt

14

15 Die Erweiterungen »Kalender« und »FAQ« ............................. 413

15.1 Die Erweiterung »Kalender« in der Übersicht ............................... 41315.2 Einen Kalender erstellen .............................................................. 41515.3 Einen Kalender gestalten ............................................................. 420

15.3.1 Das HTML vom Frontend-Modul »Kalender« ................... 42015.3.2 Das CSS zum Gestalten eines Kalenders ........................... 42215.3.3 HTML und CSS zur Gestaltung der Einzelansicht

eines Events .................................................................... 42515.4 Die FAQ-Erweiterung: Häufig gestellte Fragen ............................. 426

15.4.1 Die Kurzanleitung für die FAQ-Erweiterung .................... 42615.4.2 Die FAQ-Erweiterung gestalten ....................................... 428

16 Die Erweiterung »Newsletter« ................................................. 431

16.1 Das Backend-Modul »Newsletter« ............................................... 43216.1.1 Einen Verteiler erstellen .................................................. 43216.1.2 Abonnenten verwalten: Die Empfänger des

Newsletters ..................................................................... 43416.1.3 Einen Newsletter erstellen ............................................... 43416.1.4 Einen Newsletter versenden ............................................ 436

16.2 Newsletter im Frontend anzeigen ................................................ 43716.2.1 Die Kurzanleitung zur Darstellung der Newsletter auf

der Site ........................................................................... 43816.2.2 Das HTML der Frontend-Module zur

Newsletterdarstellung ..................................................... 43916.3 Newsletter im Frontend abonnieren und kündigen ...................... 440

16.3.1 Die Kurzanleitung zum Abonnieren und Kündigen .......... 44116.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 ...................................... 44617.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 ... 45017.2.4 Datum der Nachrichten ohne Uhrzeit darstellen .............. 452

Inhalt

15

17.3 Sidebar erstellen: Lesetipps und Zufallsbild .................................. 45417.3.1 Sidebar: Lesetipps mit einem Quicklink-Modul ............... 45417.3.2 Sidebar: Ein zufällig ausgewähltes Bild ............................. 45517.3.3 Die Sidebar gestalten ...................................................... 45517.3.4 Optional: Lesetipps auswählen ohne Klick auf

»Los«-Button ................................................................... 45717.4 Der Minikalender in der Sidebar .................................................. 458

17.4.1 Eine neue Seite mit dem Modul »Eventliste« erstellen ..... 45817.4.2 Ein Modul für den Minikalender erstellen und

einbinden ........................................................................ 45917.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 .......................... 46518.1.1 Der Theme-Manager verwaltet bekannte

Komponenten ................................................................. 46518.1.2 »Blaues Theme« von der Beispielsite exportieren ............. 46718.1.3 All-in-one: Das Innenleben einer CTO-Datei ................... 46818.1.4 Was nicht in einem Theme enthalten ist .......................... 468

18.2 Das »Cover Theme«: Die Beispielsite im neuen Look .................... 46918.3 Über die Anpassung von Themes ................................................. 47318.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 ....................................... 47918.5.1 Das potenzielle Problem ................................................. 47918.5.2 Vertrauenswürdige Quellen ............................................. 47918.5.3 Ein Theme prüfen ............................................................ 48018.5.4 Angriff von innen ............................................................ 480

18.6 Fazit: Themes sind klasse ............................................................. 480

Inhalt

16

19 SEO: Die Optimierung für Suchmaschinen .............................. 483

19.1 Lesbare Adressen: URLs umschreiben .......................................... 48419.1.1 Content-Management-Systeme und URLs ....................... 48419.1.2 Die drei URL-Einstellungen von Contao ........................... 48519.1.3 Drei Voraussetzungen zum Umschreiben der URLs .......... 48619.1.4 Die Rewrite-Regel zum URL-Umschreiben in der

».htaccess« ...................................................................... 48719.1.5 Contao im Unterordner: Die RewriteBase in der

».htaccess« ...................................................................... 48819.1.6 So wird’s gemacht: URLs umschreiben in der Praxis ......... 489

19.2 Flache oder hierarchische URLs? .................................................. 49019.2.1 URLs bei statischen Webseiten und bei CMSystemen ...... 49119.2.2 Contao erzeugt von Haus aus flache URLs ....................... 49119.2.3 Hierarchische URLs in Contao ......................................... 492

19.3 Die Optimierung von Seiten ........................................................ 49319.3.1 Seitenname und Seitenalias im Backend von Contao ....... 49319.3.2 Der Titel der Seite: »<title> ... </title>« ........................... 49519.3.3 Die Beschreibung der Seite:

»<meta name="description">« ........................................ 49719.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 ............................................. 50419.5.1 Die Google Webmaster-Tools ......................................... 50419.5.2 Eine XML_Sitemap in Contao erstellen ............................ 50419.5.3 Erweiterungen zur Arbeit mit XML-Sitemaps ................... 506

20 Mitglieder: Im Frontend angemeldete Besucher ..................... 507

20.1 Mitglieder und Benutzer: Der Unterschied ................................... 50720.2 Mitgliedergruppen und Mitglieder einrichten .............................. 509

20.2.1 Mitgliedergruppen einrichten .......................................... 50920.2.2 Mitglieder einrichten ...................................................... 509

20.3 Seiten für die An- und Abmeldung erstellen ................................. 51020.4 Frontend-Module für die An- und Abmeldung erstellen ............... 511

20.4.1 Die Frontend-Module zur Anmeldung im Überblick ........ 512

Inhalt

17

20.4.2 Ein Modul für das Anmeldeformular: »[Login-Formular]« .......................................................... 512

20.4.3 Ein Modul zur Abmeldung: »[Automatischer Logout]« ..... 51320.4.4 Modul für den Link zur Anmeldeseite:

»[Eigener HTML-Code]« .................................................. 51320.4.5 Anmeldenamen und Abmeldelink:

»[Eigener HTML-Code]« .................................................. 51420.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 ...... 51620.5.4 Testen, ob die An- und Abmeldung funktionieren ........... 519

20.6 Einen geschützten Downloadbereich einrichten ........................... 52020.7 Weitere Möglichkeiten zur Mitgliederverwaltung ........................ 524

20.7.1 Das Modul »Passwort vergessen« .................................... 52420.7.2 Das Modul »Persönliche Daten« ...................................... 52620.7.3 Die automatische Registrierung für Mitglieder ................. 526

21 Benutzer: Im Backend angemeldete Mitarbeiter .................... 527

21.1 Benutzerverwaltung: Die Übersicht .............................................. 52721.2 Die Benutzergruppe »Redakteure – Nachrichten« ......................... 52821.3 Die Benutzerin »Helen Lewis« einrichten ...................................... 53321.4 Die Benutzergruppe »Redakteure – Artikel« ................................. 537

21.4.1 Die Benutzergruppe »Redakteure – Artikel« einrichten .... 53721.4.2 Benutzer der Benutzergruppe »Redakteure – Artikel«

zuweisen ......................................................................... 53821.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 .................. 54322.2 Die Systemwartung im Überblick ................................................. 544

22.2.1 Systemwartung: Daten bereinigen ................................... 54522.2.2 Systemwartung: Suchindex neu aufbauen ........................ 546

22.3 Den »Cache-Flow« in Contao kontrollieren .................................. 547

Inhalt

18

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 .................. 54922.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 ............................. 55122.5 Updates: Die Versionsnummern von Contao ................................ 552

22.5.1 Das Bugfix-Release: 2.10.x .............................................. 55222.5.2 Das Minor-Release: 2.x.0 ................................................ 55322.5.3 Das Major-Release: x.0.0 ................................................ 55322.5.4 Sollte ich eine funktionierende Contao-Website

updaten? ......................................................................... 55322.5.5 Checkliste vor einem Update ........................................... 554

22.6 Der Live Update Service: Das automatische Update ..................... 55522.7 Das manuelle Update per FTP ...................................................... 55622.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 ................................... 56123.1.1 Von Layouttabellen zu CSS3 ............................................ 56123.1.2 Von HTML über XHTML zu HTML5 ................................ 56223.1.3 Neuerungen in HTML5 – eine vereinfachte

Schreibweise ................................................................... 56223.1.4 Neuerungen in HTML5 – komplett neue

Strukturelemente ............................................................ 56323.1.5 Fazit: HTML5 ist die Zukunft ........................................... 564

23.2 Contao unterstützt den IE6 nicht mehr ........................................ 56423.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 ........... 56623.3.3 Das Seitentemplate »fe_page.html5« ............................... 567

Inhalt

19

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 .................. 56923.3.6 Fazit: HTML5 ist die Zukunft, XHTML auf Nummer

sicher .............................................................................. 57123.4 Contao und CSS3 ......................................................................... 571

23.4.1 Eine kurze Geschichte von CSS ........................................ 57123.4.2 Wofür man CSS3 heute schon nutzen kann ..................... 57223.4.3 Die Browser-Präfixes: »-moz-«, »-webkit-«, »-o-«

und »-ms-« ...................................................................... 57423.4.4 Conditional Comments, Media Queries und globale

Variablen ........................................................................ 57423.4.5 Interne Stylesheets und CSS3 .......................................... 57523.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 ............................. 57724.2 Recycling: Inhalte auf mehreren Seiten wiederholen .................... 579

24.2.1 Möglichkeit 1: Für einzelne Seiten – Verknüpfungen ....... 57924.2.2 Möglichkeit 2: Für alle Seiten eines Seitenlayouts –

Frontend-Modul ............................................................. 58124.3 Anfahrtsskizze mit Google Maps: [dlh_googlemaps] ..................... 583

24.3.1 Die Erweiterung [dlh_googlemaps] im Überblick ............. 58324.3.2 Schritt 1: Eine Karte erstellen in

»Inhalte � Google Maps« .................................................. 58424.3.3 Schritt 2: Karten-Elemente – eine Info-Sprechblase

hinzufügen ...................................................................... 58424.3.4 Schritt 3: Das Inhaltselement »Google Map« in

Contao einbinden ........................................................... 58624.3.5 Gewusst wie: Die manuelle Ermittlung der Geo-

Koordinaten .................................................................... 58624.4 Newsbeiträge mit Inhaltselementen ............................................. 58724.5 Artikelteaser auf Übersichtsseiten ................................................ 590

24.5.1 Teasertexte für die drei Artikel erstellen .......................... 59124.5.2 Die Teasertexte auf der Seite »Artikel erstellen«

einbinden ........................................................................ 59224.5.3 Das HTML für die Teasertexte auf der Seite »Artikel

erstellen« ........................................................................ 59324.6 Mehrere Artikel auf einer Seite .................................................... 595

24.6.1 Methode 1: Nur ein Artikel pro Seite und Spalte ............. 595

Inhalt

20

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 ................................ 59925.1.1 Die Systemkonfiguration: »localconfig.php« ..................... 59925.1.2 Die Sprachkonfiguration: »langconfig.php« ...................... 60125.1.3 Infos zu Datenbanktabellen: »dcaconfig.php« .................. 601

25.2 Tipps und Tricks zum TinyMCE .................................................... 60225.2.1 Ein Stylesheet für den TinyMCE: »tl_files/tinymce.css« ..... 60225.2.2 Textbausteine im TinyMCE: Inhalte aus Vorlage

einfügen .......................................................................... 60325.2.3 Die Symbolleisten des TinyMCE anpassen ....................... 60425.2.4 Konfiguration des TinyMCE pro Benutzergruppe

anpassen ......................................................................... 60625.3 Layouts für Fortgeschrittene ........................................................ 607

25.3.1 Eigene Layoutbereiche erstellen und aktivieren ............... 60825.3.2 Eigene Seitentemplates erstellen ..................................... 60925.3.3 Contao mit anderen CSS-Frameworks nutzen .................. 609

25.4 Mehrere Websites in einer Contao-Installation ............................ 61025.4.1 Ein Startpunkt für jede Website ....................................... 61025.4.2 Mehrsprachige Website mit automatischer Sprachwahl ... 61125.4.3 Mehrere Domains in einer Contao-Installation ................ 61225.4.4 Zusammenfassung: Mehrere Websites in mehreren

Sprachen ......................................................................... 61325.5 Die Inserttags im Überblick .......................................................... 614

25.5.1 Inserttags für Link-Elemente ............................................ 61425.5.2 Benutzereigenschaften: Inserttags für Frontend-

Benutzer ......................................................................... 61525.5.3 Umgebungsvariablen ....................................................... 61625.5.4 Include-Elemente ............................................................ 61725.5.5 Verschiedenes: Datum, E-Mail und Sprachen .................. 618

Index ............................................................................................................ 619

35

In diesem Kapitel sehen Sie anhand der Online-Demo, wie Contao tickt. Begriffe wie Frontend, Backend, Seitenstruktur, Themes, Module, Sei-tenlayouts, 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 Kapiteleinen schnellen Überblick geben, damit Sie gleich zu Anfang eine Vorstellungdavon bekommen, wie Contao tickt:

� CMS-Einsteiger werden vielleicht nicht gleich jedes Detail verstehen und rich-tig einordnen können, lernen hier aber die wichtigsten Begriffe und Zusam-menhänge kennen, ohne gleich das CMS installieren zu müssen.

� CMS-Umsteiger finden die Funktionsprinzipien von Contao auf wenigen Sei-ten komprimiert und können sie beim Lesen mit bereits bekannten Systemenvergleichen.

Auf den folgenden Seiten machen Sie Bekanntschaft mit den Begriffen Frontend,Backend, Seitenstruktur, Themes, Modul, Seitenlayouts, Artikel, Inhaltselement undRechteverwaltung und sehen, wie diese Komponenten zusammenarbeiten.

36

Schnelldurchlauf: So funktioniert Contao2

2.1 Das Frontend ist die Website

Contao besteht aus einem Frontend und einem Backend. Das Frontend ist die ei-gentliche Website, so wie ein Besucher sie sieht. Um das Frontend im Browser zusehen, 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 undfertig auf dem Webspace, sondern ist nach der Eingabe der URL von Contao au-tomatisch erstellt worden.

Abbildung 2.1 Das Frontend der Online-Demo »Music Academy«

Dieses Kapitel können Sie online oder offline lesen

Die Abbildungen in diesem Kapitel sind so gewählt, dass die Lektüre ohne Internetzu-gang problemlos möglich ist. Mehr Spaß macht es aber wahrscheinlich, wenn Sie wäh-rend 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 auchim Download-Paket von Contao enthalten, sodass Sie sie selbst installieren und genauuntersuchen können.

37

Das Backend ist die Verwaltungsabteilung 2.2

Registrierte Benutzer wie z. B. die Studenten der Music Academy können sich imFrontend anmelden (Front End Login) und haben dann Zugriff auf Informationen,die für nicht angemeldete Besucher (Gäste) unsichtbar bleiben. Die StudentinDonna Evans (Benutzername »d.evans«, Passwort »donnaevans«) sieht nach einemLogin 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 derWebsite. Im Backend wird aber nicht nur verwaltet, sondern auch richtig gearbei-tet. Die Struktur der Website, das Seitenlayout und die Inhalte für die einzelnenWebseiten, alles wird hier im Backend erstellt und verwaltet.

Zutritt zum Backend haben nur Mitarbeiter, und deshalb werden am Eingang Be-nutzername und Passwort kontrolliert. Um das Backend aufzurufen, hängen Siean 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 Brow-serfenster, damit Sie leicht zwischen Front- und Backend hin- und herwechselnkönnen. Abbildung 2.3 zeigt das Anmeldeformular für das Backend.

Der Administrator der Music Academy heißt Kevin Jones, und nach einer Anmel-dung mit dem Benutzernamen »k.jones« und dem Passwort »kevinjones« sehenSie das Backend aus Abbildung 2.4.

38


Abbildung 2.3 Die Anmeldung zum Backend von Contao

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 Back-end. Der Administrator ist der Chef und darf alles. Die Benutzer Helen Lewis undJames Wilson hingegen sehen nur den Teil des Backends, den sie für ihre Arbeit

Infobereich

Arbeitsbereich

Navigations-bereich

39

Die Seitenstruktur ist das Fundament der Website 2.3

benötigen (siehe Abschnitt 2.10, »Das Backend ist für Redakteure sehr über-sichtlich«, ab Seite 50).

2.3 Die Seitenstruktur ist das Fundament der Website

Contao ist ein seitenbasiertes Content-Management-System, und ein hierarchischaufgebauter Seitenbaum bildet das Rückgrat der Website. Wie ein Skelett einemKörper so verleiht der Seitenbaum einer Website sowohl Stabilität als auch Flexi-bilität. Unter anderem dient die Seitenstruktur als Grundlage für die Navigation.Abbildung 2.5 zeigt oben die Navigation im Frontend und darunter die Seiten-struktur im Backend.

Abbildung 2.5 Navigation im Frontend und Seitenstruktur im Backend

Das Backend lernen Sie später genauer kennen

Beim Schnelldurchlauf in diesem Kapitel machen Sie nur ein paar ausgesuchte Zwi-schenstopps im Backend. In Kapitel 5, »Ein kurzer Rundgang im Backend«, lernen Siedas Backend genauer kennen (ab Seite 111).

40


Die in der Navigation hervorgehobenen Webseiten finden Sie im Backend im Be-reich Seitenstruktur.

Mithilfe der Seitenstruktur können Sie die Site ganz einfach verwalten und mitwenigen Klicks neue Seiten hinzufügen oder die Reihenfolge der vorhandenenSeiten verändern. Änderungen in der Seitenstruktur wirken sich direkt auf dieNavigation 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 rechtsdaneben klicken.

� Wechseln Sie zum Frontend, und laden Sie die Startseite neu.

Die Seite Teachers ist in der Navigation nicht mehr zu sehen.

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 undeinem ziemlich langen »ieh« in der Mitte. Nach einem Klick auf das Backend-Modul Themes im Navigationsbereich, sehen Sie in der Online-Demo das ThemeMusic Academy (Abbildung 2.6).

Abbildung 2.6 Das Backend-Modul »Themes« im Überblick

Versehentliche Bearbeitungsschritte kann man rückgängig machen

Die Online-Demo ist unkaputtbar, und nach dem stündlichen Reset ist die Seite Tea-chers wieder da. Contao bietet aber auch eine sehr komfortable Funktion, um verse-hentliche Bearbeitungsschritte rückgängig zu machen: Im Navigationsbereich gibt esunten links im Bereich Benutzerfunktionen einen Menüpunkt namens Rückgängig. Pro-bieren Sie ihn ruhig aus.

41

Module erzeugen den Quelltext für das Frontend 2.5

Ein Theme besteht aus Stylesheets, Modulen und Seitenlayouts, die mit einem Klickauf die entsprechenden Symbole rechts neben dem Theme bearbeitet werdenkönnen.

2.5 Module erzeugen den Quelltext für das Frontend

Module sind in Contao kleine Programme, die den Quelltext für das Frontend er-zeugen. 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 � Mo-

dule. Die in diesem Bereich gelisteten Module erzeugen allesamt HTML für dasFrontend und werden deshalb auch Frontend-Module genannt. Auf der Beispiel-site 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 allewichtigen Funktionen stehen fertige Modultypen bereit, deren Namen hellgrauin eckigen Klammern hinter den Modulnamen stehen. Rechts am Rand gibt es fürjedes Modul farbige Symbole zum Bearbeiten, Duplizieren, Verschieben, Löschenund für Detailinformationen.

42


Die Hauptnavigation im Frontend wird z. B. von dem Modul Navigation – Mainnavigation erzeugt, das auf dem Modultyp Navigationsmenü basiert und mit we-nigen Einstellungen einsatzbereit ist. Zur Bearbeitung eines Moduls klicken Sieauf das in Abbildung 2.7 rechts unten hervorgehobene gelbe Bleistiftsymbol. Siesehen 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 HardLimit genau bedeuten, erfahren Sie in Kapitel 9, »Navigationen erstellen inContao«, ab Seite 221.

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 rechtsneben Default layout [Standard] auf den gelben Bleistift klicken, können Siedie Einstellungen für das Layout bearbeiten.

Abbildung 2.9 zeigt drei wichtige Einstellungen aus dem Standardlayout derMusic Academy. Sie können die einzelnen Bereiche auf dieser Seite wie z. B. Titel

Templates definieren, welches HTML die Module erzeugen

Frontend-Module werden bequem per Eingabemaske im Backend konfiguriert. Wel-ches HTML ein Modul genau erzeugt, wird über Templates gesteuert. Mehr dazu lesenSie in Abschnitt 6.7, »Templates erstellen das HTML für den Quelltext«, ab Seite 159.

43

Jede Seite hat ein Seitenlayout 2.6

und Standard oder Kopf- und Fusszeile mit einem Klick auf die grünen Über-schriften komfortabel ein- und ausblenden, sodass die Seite immer übersichtlichbleibt.

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 be-stimmt auch, wo die einzelnen Elemente erscheinen. In Abbildung 2.10 könnenSie sehen, dass die Hauptnavigation innerhalb der Kopfzeile sitzt. Das wird imSeitenlayout definiert.

44


Abbildung 2.10 Das Seitenlayout im Frontend

Wenn Sie das Default layout [Standard] bearbeiten, können Sie im Bereich Front-

end-Module sehen, dass das Modul Navigation – Main navigation dem BereichKopfzeile zugeordnet ist (Abbildung 2.11).

Abbildung 2.11 Modul »Navigation – Main navigation« in »Kopfzeile«

45

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 dieSeiten auch mit den Stylesheets. Im Backend-Modul Themes � Stylesheets sinddie drei Stylesheets basic, music_academy und print gespeichert, mit denen dieMusic Academy gestaltet wird. In Klammern dahinter wird jeweils der definierteMedientyp angezeigt. Abbildung 2.12 zeigt das Backend-Modul Themes � Style-

sheets 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 Seiten-layout die gewünschten Stylesheets ausgewählt. Abbildung 2.13 zeigt, dass fürdas Default layout [Standard] die beiden Stylesheets basic und music_academy ak-tiviert wurden.

Abbildung 2.13 Mit dem »Default layout« sind zwei Stylesheets verbunden.

46


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 dieFormatierungen 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 immerzu einer bestimmten Seite. Zur Illustration zeigt Abbildung 2.14 einen Artikel mitder Überschrift Impressions auf der gleichnamigen Seite im Frontend.

Abbildung 2.14 Der Artikel »Impressions« im Frontend

47

Ein Artikel besteht aus Inhaltselementen 2.9

Im Backend-Modul Artikel sehen Sie die bereits bekannte Seitenstruktur, aberdieses Mal mit den dazugehörigen Artikeln (Abbildung 2.15). Mit einem Klick aufdie Plus- und Minus-Zeichen können Sie diesen Artikelbaum bei Bedarf ein- undausklappen. Auf der Seite Impressions wird ein gleichnamiger Artikel gelistet, derin 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 Web-seite, der ein oder mehrere Inhaltselemente enthält. Die eigentlichen Inhalte(Texte, Grafiken etc.) werden in diesen Inhaltselementen aufbewahrt. Ohne In-haltselemente ist ein Artikel im Frontend nur ein leerer Bereich und nicht zu se-hen.

2.9 Ein Artikel besteht aus Inhaltselementen

Artikel bestehen also aus Inhaltselementen, in denen die eigentlichen Inhalte ge-speichert werden. Contao stellt für verschiedene Inhaltstypen vorgefertigte In-haltselemente bereit. So gibt es z. B. spezielle Inhaltselemente für Überschriften,Texte (mit und ohne Bilder), Bildergalerien, Tabellen, Listen und vieles mehr.

Mehrere Artikel pro Seite

Auf einer Seite können natürlich auch mehrere Artikel erscheinen. Und umgekehrt kannein Artikel auch auf verschiedenen Seiten auftauchen, ohne dass er kopiert werdenmuss.

48


Abbildung 2.16 zeigt, dass der Artikel Impressions aus drei Inhaltselementen be-steht. 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 Metada-ten genannt. Dazu zählen z. B. der Titel des Artikels, der Autor und das Ände-rungsdatum. Diese Einstellungen werden im Frontend nicht angezeigt. Unterhalbder 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

49

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 unter-teilt, und diese Scheibchen können einzeln bearbeitet werden. Für Redakteure istder 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 er-scheinen, klicken Sie einfach auf das Inhaltselement Galerie und ziehen es mit derMaus nach unten, bis es unterhalb des Inhaltselements Text steht. Einfacher gehtes nicht. Probieren Sie es aus.

50


2.10 Das Backend ist für Redakteure sehr übersichtlich

Contao hat ein sehr ausgefeiltes Rechtesystem, sodass jeder Mitarbeiter nur denTeil des Systems sieht, den er benötigt bzw. sehen soll. Neben den Frontend-Be-nutzern, 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 istverantwortlich für die inhaltliche Pflege der Seiten unterhalb von Courses. Wenner sich mit seinem Benutzernamen »j.wilson« und seinem Passwort »jameswil-son« 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 Da-teien für den von ihm betreuten Bereich der Website.

Inhaltselemente erleichtern den Redakteuren die Arbeit

Die Sache mit den Inhaltselementen ist ungewohnt, aber ziemlich pfiffig und ein wich-tiger Grund, warum Redakteuren die Bearbeitung der Inhalte in Contao leichter fällt alsin vielen anderen CMSystemen, in denen immer der ganze Artikel in einem Editorfens-ter erscheint.

51

Zusammenfassung – so tickt Contao 2.11

2.11 Zusammenfassung – so tickt Contao

In Contao arbeiten mehrere Komponenten zusammen, um eine Webseite zu er-stellen:

� 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, Modu-len 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 Sei-tenlayout mit einer Seite verbunden.

Soweit dieser Schnelldurchlauf. Natürlich gibt es in Contao noch eine Menge an-derer interessanter Abteilungen wie z. B. Nachrichten, Kalender, Events, System-verwaltung und dergleichen mehr, aber das Buch hat ja auch gerade erst angefan-gen.

127

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 Puzzle-teile vor, die nicht so richtig zusammenpassen wollen. Dieses Kapitel erläutert dasZusammenspiel 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 frischinstallierten Beispielsite aufrufen, ist es recht übersichtlich. Links oben steht dieMeldung »No pages found«, und sonst ist nichts zu sehen (Abbildung 6.1).

128

Die erste Website mit Contao6

Abbildung 6.1 Das Frontend nach der Installation einer leeren Site

Das ist nicht gerade spektakulär, aber der Befund »No pages found« entsprichtden 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 istin diesem Fall die Website gemeint, denn Contao kann in einer Installation meh-rere Websites verwalten, und im Seitenbaum beginnt jede Site mit einem solchenStartpunkt.

Ein Startpunkt ist übrigens nicht identisch mit der Startseite für Besucher imFrontend. Ein Startpunkt dient lediglich zu Verwaltungszwecken im Backend undtaucht im Frontend nicht auf. Abbildung 6.2 zeigt die Einstellungen aus dem fol-genden 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 nurKeine Einträge gefunden.

3. Klicken Sie oben im Arbeitsbereich auf Neue Seite. Daraufhin erscheint eine Zeile mitdem Titel der Webseite Websites erstellen mit Contao, den Sie in System � Einstellun-

gen vergeben haben.

4. Klicken Sie in dieser Zeile ganz rechts auf das blinkende braune Symbol mit dem Pfeilnach 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 dasFeld Seitenalias automatisch ausgefüllt.

129

»No pages found« – Die Seitenstruktur erstellen 6.1

Das Häkchen bei Seite veröffentlichen ist wichtig, denn sonst wird zwar in derDatenbank eine Seite angelegt, diese bleibt aber offline und ist im Frontend nichtzu sehen.

Nach dem Klick auf Speichern und schliessen sieht der Seitenbaum im Backendso aus wie in Abbildung 6.3. Am rechten Seitenrand sehen Sie Symbole zur Bear-beitung der Seite. Wenn Sie mit der Maus kurz über einem Symbol verweilen, be-kommen Sie einen kleinen Hinweis. Für den folgenden Abschnitt ist der gelbe Blei-stift ganz links am wichtigsten. Ein Klick darauf öffnet die Seite zur Bearbeitung.

Abbildung 6.2 Den Startpunkt einer Webseite erstellen

7. Aktivieren Sie im Bereich DNS-Einstellungen das Kontrollkästchen für den Sprachen-

Fallback 3.

8. Aktivieren Sie im Bereich Veröffentlichung weiter unten das Kontrollkästchen Seite

veröffentlichen 4.

9. Bestätigen Sie die Einstellungen mit Speichern und schliessen.

ToDo: Den »Startpunkt einer Webseite« erstellen (Forts.)

130


Abbildung 6.3 Die Seitenstruktur mit dem Startpunkt einer Webseite

6.1.2 Der Sprachen-Fallback für den Startpunkt

Viele der zahlreichen Einstellungen für einen Startpunkt, die Sie in Abbildung 6.2sehen, werden erst wichtig, wenn in einer Contao-Installation mehrere Websitesverwaltet werden. Eine Sache hingegen ist bereits jetzt wichtig und deshalb soforterledigt worden, damit sie später nicht zu Problemen führt, und das ist der Spra-chen-Fallback.

Der Hintergrund dieser Einstellung ist, dass ein Browser dem Webserver mitteilt,in welcher Sprache er die Webseiten am liebsten hätte. Die bevorzugte Sprachekann man in jedem Browser einstellen, im Firefox z. B. unter Extras � Einstel-

lungen � Inhalt � Sprachen.

Ist im Startpunkt nur die Sprache de eingetragen, werden die Webseiten von Con-tao nur an Browser ausgeliefert, die sich als Sprache Deutsch wünschen. Auslän-dische Browser mit anderen Sprachwünschen bekämen die Meldung »No pagesfound«, da in der vom Browser gewünschten Sprache keine Seiten existieren.

Sie selbst merken davon nichts, solange in Ihrem Browser de als erste Sprache ein-gestellt ist. Das Häkchen bei Sprachen-Fallback bewirkt, dass die Webseiten un-terhalb dieses Startpunktes angezeigt werden, wenn es keine passende Sprache gibt.

6.1.3 Die Startseite für die Beispielsite erstellen

Nachdem der Startpunkt einer Webseite jetzt eingerichtet ist, erstellen Sie in die-sem Abschnitt die Startseite für die Besucher der Website.

Wenn kein Sprachen-Fallback aktiviert wurde ...

Falls der Sprachen-Fallback nicht aktiviert wurde, gibt es eine kaum zu übersehende,knallrote Fehlermeldung: »Bei keinem der aktiven Website-Startpunkte ohne expliziteDNS-Angabe wurde die Option »Sprachen-Fallback« ausgewählt.«

Sie können das ganz einfach ausprobieren. Öffnen Sie den Startpunkt zur Bearbeitung(Klick auf den gelben Bleistift), deaktivieren Sie den Sprachen-Fallback und klicken aufSpeichern und schliessen.

Vergessen Sie nicht, den Sprachen-Fallback wieder einzuschalten.

131


Nach diesem ToDo sieht der Seitenbaum so aus wie in Abbildung 6.4. Falls Sienicht alle Seiten sehen, klicken Sie auf das Pluszeichen vor dem Startpunkt oderoben im Arbeitsbereich auf Alle öffnen/schliessen.

Abbildung 6.4 Der Seitenbaum mit Startpunkt und Startseite

Wie Sie sehen, hat die Startseite ein anderes Symbol und ist etwas nach rechts ein-gerückt. Wenn Sie auf das Minus-Zeichen vor dem Startpunkt Beispielsite Contao-buch klicken, sollte die Startseite nicht mehr zu sehen sein. Sehen Sie die Startseitetrotzdem noch, befinden sich die Startseite und der Startpunkt auf einer Ebene.Verschieben Sie dann die Startseite mit einem Klick auf den blauen Pfeil, und fügenSie sie mit den braun hinterlegten Pfeilen an der richtigen Stelle wieder ein.

ToDo: Eine Startseite für die Beispielsite erstellen

1. Öffnen Sie das Backend-Modul Layout � Seitenstruktur.

2. Klicken Sie im Arbeitsbereich oben auf Neue Seite.

3. Klicken Sie in der Zeile Beispielsite Contaobuch ganz rechts auf das blinkende brauneSymbol mit dem Pfeil nach rechts, um die neue Seite als Unterseite des Startpunkteseinzufügen.

4. Schreiben Sie im Bereich Name und Typ in das Feld Seitenname das Wort »Startseite«.

5. Prüfen Sie, ob bei Seitentyp die Option Reguläre Seite ausgewählt ist.

6. Aktivieren Sie weiter unten im Bereich Veröffentlichung die Option Seite veröffent-

lichen.

7. Sie können sich die zahlreichen anderen Optionen auf dieser Seite gerne anschauen,aber lassen Sie sie vorerst unverändert. Diese Optionen kommen später an die Reihe.

8. Beenden Sie die Bearbeitung mit einem Klick auf Speichern und schliessen, um zumSeitenbaum zurückzukehren.

Eine Seite ist auch nur ein Datensatz

Wenn Contao eine Seite erstellt, dann ist das normalerweise keine statische Webseite,die als Datei irgendwo auf dem Webspace gespeichert wird, sondern nur ein Datensatzin einer Datenbanktabelle. Deshalb heißt die Startseite hier auch nicht index.html oderindex.php, sondern einfach nur Startseite. Eine im Browser sichtbare Webseite wird dar-aus erst durch das am Ende dieses Kapitels beschriebene Zusammenspiel aller Kompo-nenten.

132


6.1.4 Die Seitenstruktur für die Beispielsite erweitern

Eine Contao-Website kann aus Hunderten oder Tausenden von Webseiten beste-hen, aber zum Üben fangen Sie erst einmal mit vier an. Später werden es dannnoch mehr.

Nach diesem ToDo sieht der Seitenbaum im Backend so aus wie in Abbildung 6.5.

Abbildung 6.5 Der erweiterte Seitenbaum mit vier Seiten

Und so setzt sich dieser übersichtliche kleine Seitenbaum zusammen:

� Ganz oben steht die nicht anklickbare Überschrift Websites erstellen mit Con-tao. Das ist der Name für die gesamte Contao-Installation, den Sie in System �Einstellungen festgelegt haben.

ToDo: Die Seitenstruktur für die Beispielsite erweitern

1. Öffnen Sie das Backend-Modul Layout � Seitenstruktur.

2. Klicken Sie im Arbeitsbereich oben auf den Link Neue Seite.

3. Klicken Sie in der Zeile Startseite rechts auf das kleine braune Symbol mit dem Pfeilnach unten, um die neue Seite auf derselben Ebene wie die Startseite einzufügen.

4. Schreiben Sie im Bereich Name und Typ in das Feld Seitenname den Wert »Downloads«.

5. Prüfen Sie, ob Reguläre Seite unter Seitentyp ausgewählt ist.

6. Aktivieren Sie weiter unten im Bereich Veröffentlichung die Option Seite veröffent-

lichen.

7. Beenden Sie die Bearbeitung dieses Mal der Abwechslung halber mit einem Klick aufSpeichern und neu ((Alt) + (n)). Sie bekommen dann sofort das Formular für dienächste neue Seite.

8. Erstellen Sie zwei weitere reguläre Seiten mit den Seitennamen »Kontakt« und»Impressum« und vergessen Sie nicht, die Seiten zu veröffentlichen.

9. Beenden Sie die Erstellung der letzten Seite mit einem Klick auf die Schaltfläche Spei-

chern und schliessen ((Alt) + (c)).

Klick auf Symbol:Seitenvorschau

Klick auf Seitennamen verkürzt den Seitenbaum

Artikel auf dieser Seite bearbeiten

133


� Darunter gibt es einen Startpunkt einer Webseite mit dem Namen BeispielsiteContaobuch. Das ist der Name der Website.

� Innerhalb des Startpunktes gibt es vier reguläre Webseiten: Startseite, Down-loads, Kontakt und Impressum.

Diese vier Webseiten sollten übrigens alle auf derselben Ebene liegen und geradeuntereinander stehen, mit keinerlei Einrückungen nach links oder rechts. WennSie auf das Minuszeichen vor dem Startpunkt Beispielsite Contaobuch klicken, soll-ten die vier regulären Seiten nicht mehr zu sehen sein.

6.1.5 Drei Klick-Tipps für die Arbeit mit dem Seitenbaum

Bei der Arbeit mit dem Seitenbaum gibt es einige sehr hilfreiche Klicks, die inAbbildung 6.5 gekennzeichnet sind:

1 Ein Klick auf das Symbol vor dem Seitennamen zeigt eine Vorschau dieser Seitein einem neuen Tab oder Browserfenster an. Momentan kommt zwar nur dieMeldung „No layout specified“, aber später werden Sie diese Vorschau oft be-nutzen.

2 Ein Klick auf das letzte Symbol ganz rechts bringt Sie später direkt zur Bearbei-tung der Artikel für diese Seite. Momentan gibt es da noch nicht so viel zu tun,aber später ist das sehr praktisch.

3 Ein Klick auf den Seitennamen verkürzt den Seitenbaum und beginnt ihn mitder angeklickten Seite. Die vorherigen Ebenen stehen als Navigationspfadhellgelb hervorgehoben über dem Seitenbaum.

Besonders die Verkürzung des Seitenbaums in ist zwar sehr praktisch, verwirrtaber anfangs manchmal, weil Seiten scheinbar einfach verschwunden sind. Nacheinem Klick auf das Wort Startseite im Seitenbaum, sieht dieser etwas kürzer aus(Abbildung 6.6).

Abbildung 6.6 Der verkürzte Seitenbaum

134


Durch diesen Klick ändert sich im Arbeitsbereich so einiges:

� Oberhalb des Seitenbaums erscheint ein hellgelbes Rechteck, in dem eineBreadcrumb-Navigation die Hierarchie des kompletten Seitenbaums anzeigt:Alle > Beispielsite Contaobuch > Startseite.

� Im Seitenbaum selbst wird die Startseite zum Anfangspunkt des Seitenbaumsund die anderen Seiten scheinen verschwunden zu sein.

Um wieder den kompletten Seitenbaum anzuzeigen, klicken Sie einfach in derBreadcrumb-Navigation auf den Link Alle.

6.2 »No layout specified« – Theme und Seitenlayout erstellen

Falls Sie nach der Erstellung des Seitenbaums das Frontend bereits im Browserbetrachtet haben, sehen Sie zwar immer noch keine Webseite, aber die Meldunglinks oben hat sich geändert und lautet jetzt »No layout specified« (Abbildung6.7).

Abbildung 6.7 »No layout specified« – neue Meldung im Frontend

Im Schnelldurchlauf am Anfang des Buches haben Sie gesehen, dass jede Seite ausdem Seitenbaum auf einem Seitenlayout basiert. Zur Beseitigung der Fehlermel-dung benötigen Sie also ein Seitenlayout, und da ein solches Seitenlayout immerzu einem Theme gehört, müssen Sie zunächst einmal ein Theme erstellen.

6.2.1 Das erste Theme erstellen

Ein Theme bestimmt das Aussehen der Website und ist eine Sammlung aus Sei-tenlayouts, Stylesheets und Frontend-Modulen, die durch Templates und Layout-Grafiken ergänzt werden. Mit einem Theme kann man einer Site ein anderes De-sign geben, ohne den Inhalt zu verändern.

135

»No layout specified« – Theme und Seitenlayout erstellen 6.2

Ein Theme muss zunächst einen Namen haben und wissen, in welchen Ordnerndie dazugehörigen Dateien aufbewahrt werden. Das Theme, das Sie im folgendenToDo erstellen, heißt schlicht und einfach Blaues Theme, da Blau die Farbe derWahl für die Beispielsite ist, die Sie in den nächsten Kapiteln erstellen.

Bevor Sie das folgende ToDo abarbeiten, sollten Sie prüfen, ob Sie, wie in Ab-schnitt 5.3.3 auf Seite 122 beschrieben, einen Template-Ordner namens blaues_theme erstellt haben. Falls nicht, sollten Sie das nachholen.

Nach der Erstellung des Themes und dem Schließen des Dialogfeldes sieht dasBackend-Modul Themes so aus wie in Abbildung 6.8.

Abbildung 6.8 Das frisch erstellte Theme im Backend

ToDo: Ein neues Theme erstellen

1. Öffnen Sie das Backend-Modul Layout � Themes.

2. Klicken Sie im Arbeitsbereich oben auf den Link Neues Theme.

3. Geben Sie im Feld Theme-Titel »Blaues Theme« ein.

4. Geben Sie im Feld Autor Ihren Namen ein.

5. Aktivieren Sie im Bereich Ordner das Kontrollkästchen rechts neben dem WortDateisystem und wählen Sie den Ordner themes/blaues_theme/. Dieser Ordner liegtunterhalb von tl_files und enthält die Layout-Grafiken.

6. Klicken Sie im Bereich Templates-Ordner auf auswahl Ändern, und wählen Sie denOrdner blaues_theme. Dieser Ordner liegt unterhalb von templates und enthält spe-ziell für das Theme angepasste Templates. Falls hier kein Ordner erscheint, müssenSie, wie auf Seite 122 beschrieben, einen Template-Ordner erstellen.

7. Wählen Sie als Bildschirmfoto folgende Datei aus:

themes/blaues_theme/screenshot.png

8. Beenden Sie die Erstellung des Themes mit Speichern und schliessen.

136


Unter »B« wie »Blaues Theme« wird das neue Theme gelistet. Das Bildschirmfotohat eine Größe von 175 × 120 Pixel. Die Abbildung ist ihrer Zeit ein bisschen vo-raus, aber so wissen Sie schon einmal ungefähr, wohin die Reise geht. Rechtssehen Sie sieben Symbole, die zum Bearbeiten des Themes dienen (Abbildung6.8). Das sind der Reihe nach:

� Bearbeiten der Theme-Einstellungen

Der gelbe Bleistift steht für die Bearbeitung. Hier können Sie die Einstellungenfür das aktuelle Theme ändern: Name, Autor und die zugewiesenen Ordner.

� Theme löschen

Ein Klick auf das rote X löscht das Theme. Es erscheint eine Sicherheitsfrage,und danach wird gelöscht.

� Details zum Theme anzeigen

Ein Klick auf das kleine »i« im blauen Kreis zeigt alle Details zum Theme ineiner kleinen Übersicht.

� Stylesheets erstellen und bearbeiten

Mit dem CSS-Symbol können Sie die Stylesheets für das Theme erstellen. Daswerden Sie in diesem Kapitel auch noch tun.

� Frontend-Module erstellen und bearbeiten

Ein Klick auf das fünfte Symbol führt Sie zur Bearbeitung der Frontend-Module, die den Quelltext für das Frontend erzeugen. Auch das werden Sie indiesem Kapitel noch kennenlernen.

� Seitenlayouts erstellen und bearbeiten

Ein Seitenlayout sorgt für die Darstellung der Seite. Direkt im Anschluss andiesen Abschnitt erstellen Sie das erste Seitenlayout.

� Theme exportieren

Ein Theme zu »exportieren« bedeutet, dass alle Stylesheets, Frontend-Module,Seitenlayouts und auch die beiden zum Theme gehörenden Ordner in ein ZIP-Archiv gepackt und lokal gespeichert werden. Dieses ZIP-Archiv kann aufeiner anderen Contao-Site wieder importiert werden.

So viel zur Erstellung eines Themes. In den folgenden Abschnitten werden Sie derReihe nach ein Seitenlayout, ein paar Frontend-Module und ein erstes Stylesheeterstellen.

6.2.2 Das erste Seitenlayout erstellen

Das erste Seitenlayout ist ein echter Klassiker: zentriert, 960 Pixel breit, mit 3Spalten sowie einem Header und einem Footer.

137

»No layout specified« – Theme und Seitenlayout erstellen 6.2

Wenn Sie nach der Erstellung des Seitenlayouts ganz oben im Infobereich aufFrontend-Vorschau ((Alt) + (f)) klicken, wird ein neues Tab oder Browserfens-ter geöffnet, in dem Sie einen gelben Balken und eine leere weiße Seite sehen(Abbildung 6.9).

Abbildung 6.9 Seitenlayout erstellt – leere Seite in der Frontend-Vorschau

Der gelbe Balken am oberen Bildschirmrand enthält einen Frame mit Bedienele-menten für die Frontend-Vorschau, die später bei der Arbeit mit mehreren Benut-

ToDo: Ein Seitenlayout erstellen


2. Öffnen Sie die Seitenlayouts zur Bearbeitung (2. Symbol von rechts).

3. Klicken Sie im Arbeitsbereich rechts oben auf Neues Layout.

4. Geben Sie als Titel für das Layout »Standardlayout« ein.

5. Aktivieren Sie direkt darunter das Kontrollkästchen Standardlayout.

6. Aktivieren Sie im Bereich Kopf- und Fusszeile die Kontrollkästchen Kopfzeile einfü-

gen und Fusszeile einfügen, vergeben Sie aber für beide keine Höhe.

7. Wählen Sie im Bereich Spaltenkonfiguration das dreispaltige Layout ganz rechts.Geben Sie für die Breite der linken und der rechten Spalte jeweils »182 px« ein.

8. Überspringen Sie die folgenden Bereiche, und prüfen Sie, ob im Bereich Experten-

Einstellungen das Seitentemplate fe_page ist.

9. Ändern Sie das Ausgabeformat von HTML auf XHTML Strict. Mehr zur Auswahl desAusgabeformats erfahren Sie im Hinweiskasten weiter unten in diesem Abschnitt.

10. Aktivieren Sie in den Skript-Einstellungen das MooTools-Template moo_mediabox.Das ist ein JavaScript-Programm, das später zur Erzeugung einer sogenannten»Lightbox« benötigt wird.

11. Aktivieren Sie im Bereich Statisches Layout das gleichnamige Kontrollkästchen. DasLayout soll eine Gesamtbreite von »960 px« haben, mit der Ausrichtung »zentriert«.

12. Beenden Sie die Bearbeitung mit Speichern und schliessen.

138


zern und unveröffentlichten Elementen richtig praktisch werden. Mit einemKlick auf das X ganz rechts können Sie diesen Frame bei Bedarf entfernen. Dannsehen Sie nur noch die leere Webseite.

Es ist vielleicht schwer zu glauben, aber diese leere Seite ist ein echter Fortschritt.Erstens gibt es keine störende Meldung mehr, und zweitens ist das Grundgerüstder Seite bereits da. Im Quelltext.

6.2.3 Ein kurzer Blick in den Quelltext

Der Quelltext ist nicht irgendwo auf dem Webspace gespeichert, sondern wirderst auf Anforderung des Browsers dynamisch von Contao erstellt. Da es bis jetztnoch keinerlei Artikel oder andere Inhalte gibt, wird die Seite leer ausgeliefert,aber das Grundgerüst ist im Quelltext bereits vorhanden. HTML-Grundgerüst derStartseite zeigt die wichtigsten div-Elemente:

<body id="top" class="win firefox fx6">...<div id="wrapper">

<div id="header"> </div><div id="container"><div id="left"> </div><div id="right"> </div><div id="main">

<div id="clear"> </div></div>

</div><div id="footer"> </div>

</div>...</body>

Listing 6.1 HTML-Grundgerüst der Startseite

Ausgabeformat: HTML5 oder XHTML

In einem Seitenlayout von Contao können Sie wählen, ob Contao den Quelltext für dasFrontend als HTML oder als XHTML ausgeben soll. Die Option HTML steht dabei fürHTML5.

HTML5 bietet momentan noch sehr wenig konkreten Mehrwert, bringt aber auf der an-deren Seite einige potenzielle Fallstricke mit sich. Auch wenn die Zukunft ganz sicherHTML5 gehören wird, verwenden Sie in diesem Buch XHTML 1.0 Strict. Mit XHTMLsind Sie erst einmal auf der sicheren Seite und müssen sich keine Gedanken über Pro-bleme in älteren Browsern machen.

Mehr zu den Vor- und Nachteilen der verschiedenen Ausgabeformate erfahren Sie inAbschnitt 23.3, »Contao und HTML5«, ab Seite 565.

139

Das erste Frontend-Modul: »Navigation – Hauptnavi« 6.3

Die fünf großen Layoutbereiche, die Contao standardmäßig zur Verfügung stellt,sind in HTML-Grundgerüst der Startseite hervorgehoben:

� Kopfzeile: <div id="header"></div>

� Linke Spalte: <div id="left"></div>

� Rechte Spalte: <div id="right"></div>

� Hauptspalte: <div id="main"></div>

� Fußzeile: <div id="footer"></div>

Bei Bedarf können Sie später auch eigene Layoutbereiche einrichten, aber meis-tens reichen diese fünf.

Das in Abschnitt 8.6 vorgestellte CSS-Framework von Contao unterstützt übri-gens nicht mehr den Internet Explorer 6. Im Quelltext finden Sie dazu folgendenHinweis:



Listing 6.2 Der Warnhinweis für Besucher mit dem IE6

6.3 Das erste Frontend-Modul: »Navigation – Hauptnavi«

In Contao gibt es zwei Sorten von Modulen:

� Backend-Module finden Sie im Navigationsbereich des Backends. Sie dienenzur Verwaltung der Site und sind in die fünf Gruppen Inhalte, Layout,Benutzerverwaltung, System und Benutzerfunktionen aufgeteilt.

� Frontend-Module sind, vereinfacht gesagt, kleine PHP-Programme, die irgend-etwas machen und als Ergebnis HTML bzw. XHTML für das Frontend ausge-ben. Sie werden im Backend-Modul Themes verwaltet.

Der Quelltext wird später genauer erläutert

Falls Sie im Quelltext überraschende Dinge wie z. B. einen Styleblock oder seltsame Ele-mente wie <div class="inside"> finden, nehmen Sie sie erst einmal hin. In Abschnitt8.6, »Das CSS-Framework von Contao im Detail«, werden diese Dinge ab Seite 205 imDetail erläutert.

140


Wenn Sie irgendwo in Contao einfach nur das Wort Module lesen, sind fastimmer Frontend-Module gemeint. In diesem Abschnitt erstellen Sie ein Front-end-Modul, das aus dem Seitenbaum eine Navigation erzeugt und das über dasSeitenlayout so eingebunden wird, dass es in der linken Spalte erscheint.

6.3.1 Ein Navigationsmodul erstellen

Das Erstellen der Hauptnavigation besteht aus zwei Schritten: Zuerst müssen Siedas Modul erstellen und konfigurieren, danach wird im Seitenlayout festgelegt,in welchem Bereich das Modul erscheinen soll.

Abbildung 6.10 (oben auf Seite 141) zeigt die im ToDo gemachten Einstellungenim Überblick.

Das Modul Navigation – Hauptnavi ist nach wenigen Klicks fertig zum Einsatz,aber noch gibt es im Browser nichts zu sehen, denn Contao muss noch wissen, inwelchen Layoutbereich die Navigation eingebaut werden soll. Das Modul mussübrigens nicht unbedingt »Navigation – Hauptnavi« heißen, aber wenn alle Navi-gationsmodule mit Navigation beginnen, stehen sie später alle schön ordentlichuntereinander und lassen sich so besser von anderen Modulen für Events, News,FAQ oder für das Layout unterscheiden.

ToDo: Ein Navigationsmodul erstellen


2. Öffnen Sie für »Blaues Theme« die Frontend-Module zur Bearbeitung (3. Symbol vonrechts).

3. Klicken Sie im Arbeitsbereich oben auf Neues Modul.

4. Geben Sie im Feld Titel »Navigation – Hauptnavi« ein.

5. Lassen Sie das Feld Überschrift einfach leer, da die Navigation keine Überschrifthaben soll.

6. Prüfen Sie, ob als Modultyp Navigationsmenü ausgewählt ist.

7. Lassen Sie alle anderen Optionen wie Startlevel, Stoplevel und Hardlimit unverän-dert, und denken Sie nicht zu viel darüber nach. Damit befassen Sie sich in Kapitel9, »Navigationen erstellen in Contao«, ausführlich.

8. Überprüfen Sie, ob im Bereich Template-Einstellungen das Navigationstemplate nav_default ausgewählt ist.

9. Klicken Sie auf Speichern und schliessen ((Alt) + (c)).

Das Template »nav_default«

Im Template nav_default wird festgelegt, welches HTML das Navigationsmodul erzeu-gen soll. Mehr dazu erfahren Sie am Ende dieses Kapitels ab Seite 159. Momentan istes nur wichtig, dass es ein solches Template gibt.

141

Das erste Frontend-Modul: »Navigation – Hauptnavi« 6.3

Abbildung 6.10 Einstellungen für das Modul »Navigation – Hauptnavi«

6.3.2 Das Navigationsmodul im Seitenlayout einbinden

In diesem Abschnitt wird das soeben erstellte Navigationsmodul mit dem Seiten-layout verbunden oder, wie es im Contao-Jargon heißt, »eingebunden«. Nachdem folgenden ToDo erscheint die Navigation im Frontend.

Jetzt weiß Contao, dass der vom Navigationsmodul erzeugte Quelltext in der lin-ken Spalte dargestellt werden soll. Abbildung 6.11 zeigt, wie das in der Front-

end-Vorschau aussieht ((Alt) + (f)).

ToDo: Das Navigationsmodul im Seitenlayout einbinden

1. Öffnen Sie das Backend-Modul Layout � Themes � Seitenlayouts.

2. Klicken Sie rechts neben dem Standardlayout [Standard] auf den gelben Bleistift, umdie Einstellungen zu bearbeiten. Sie können gerade nicht benötigte Bereiche perKlick auf die grüne Überschrift ausblenden.

3. Blenden Sie den Bereich Frontend-Module ein. Dort ist unter der Überschrift Einge-

bundene Module bereits eine Zeile vorhanden: Modul Artikel und Spalte Kopfzeile.

4. Ändern Sie diese Zeile, und wählen Sie in der Liste Modul das Modul Navigation –Hauptnavi und in der Liste Spalte die Linke Spalte.

5. Lassen Sie alle anderen Einstellungen unverändert.

6. Klicken Sie auf Speichern und schliessen ((Alt) + (c)).

142


Abbildung 6.11 Die Navigation erscheint in der linken Spalte.

Die vier Webseiten aus dem Seitenbaum werden als ungeordnete Liste darge-stellt. Klicken Sie sich am besten einmal durch die Navigation. Der Titel derWebseiten ändert sich, und die jeweils aktuelle Seite ist kein Link mehr. Alles au-tomatisch.

Um ein bisschen Gefühl für die Flexibilität des Navigationsmoduls zu bekommen,erweitern Sie im folgenden ToDo die Seitenstruktur.

Die Navigation in der Frontend-Vorschau sieht jetzt so aus wie in Abbildung 6.12.

Abbildung 6.12 Die Hauptnavigation bildet den Seitenbaum ab.

ToDo: Die Seitenstruktur um die Seite »Nachrichten« erweitern

1. Schließen Sie im Browser den Tab mit der Frontend-Vorschau.

2. Fügen Sie im Backend-Modul Layout � Seitenstruktur unterhalb der Startseite eineneue Seite vom Typ Reguläre Seite ein.

3. Der Seitenname ist »Nachrichten«.

4. Aktivieren Sie weiter unten die Option Seite veröffentlichen.

5. Klicken Sie auf Speichern und Schliessen.

143

Frontend-Module für den Kopf- und den Fußbereich 6.4

In Contao erstellen Sie mit wenigen Klicks und ohne selbst zu programmiereneine sehr flexible Navigation. Gestaltet wird die Navigation später per CSS.

Die Arbeit mit einem Frontend-Modul besteht übrigens fast immer aus den zweigezeigten Schritten:

� Zuerst wird das Frontend-Modul im Bereich Layout � Themes � Frontend-

Module erstellt.

� Dann wird das Frontend-Modul eingebunden, damit Contao weiß, wo dervom Modul erzeugte Quelltext hingehört.

Zunächst werden die Module in einem Seitenlayout eingebunden, später kanndas auch in Artikeln geschehen. Aber immer schön eins nach dem anderen.

6.4 Frontend-Module für den Kopf- und den Fußbereich

In diesem Abschnitt erstellen Sie den Inhalt für die Kopf- und die Fußzeile derWebseiten. Dazu kommt ein Frontend-Modul namens Eigener HTML-Code zumEinsatz, in das Sie, wie der Name andeutet, eigenes HTML schreiben, das dannauf der Seite eingebunden wird.

6.4.1 Module für den Kopf- und den Fußbereich erstellen

In den folgenden ToDos erstellen Sie einen Kopfbereich und einen Fußbereich,die im nächsten Abschnitt in das Seitenlayout eingebunden werden.

So viel zum Header-Modul. Das Modul für den Fußbereich folgt gleich im nächs-ten ToDo, in dem Sie das Header-Modul kopieren und dann ändern.

ToDo: Die Modul »Layout – Header« erstellen


2. Öffnen Sie die Frontend-Module zur Bearbeitung (3. Symbol von rechts).

3. Klicken Sie im Arbeitsbereich oben auf Neues Modul.

4. Geben Sie im Feld Titel »Layout – Header« ein.

5. Wählen Sie als Modultyp den Eintrag Eigener HTML-Code, den Sie ganz am Ende derListe in der Rubrik Verschiedenes finden.

6. Geben Sie in das Feld HTML-Code den folgenden Quelltext ein:

<h1>Beispielsite</h1>

<p id="slogan">Websites erstellen mit Contao</p>

7. Klicken Sie auf Speichern und Schliessen, um das Modul zu speichern.

619

Index

A

Ablage leeren 144Admin-Konto ändern 528Admin-Passwort vergessen 428Akkordeon (Inhaltselement) 296Apache � Webserver 66Arbeitsbereich (Backend) 114Artikel

als PDF speichern 286Artikel-Einstellungen 155, 286auf Facebook empfehlen 286auf Twitter empfehlen 286ausdrucken 286im Seitenlayout einbinden 158in Online-Demo 46mehrere in einer Spalte 590Teaser anzeigen 590

Artikelteaser 590Ausgabeformat 136Auswahllisten (Formulare) 336

B

BackendArbeitsbereich 114Aufbau 38, 111Backend-Module deaktivieren 413Benutzereinstellungen 113Benutzerpasswort ändern 113Benutzerverwaltung 507, 527Dateiverwaltung 119in Online-Demo 37Infobereich 112Navigationsbereich 114Persönliche Daten ändern 113Seitenstruktur 39, 127, 132, 218Systemeinstellungen 116Tastenkürzel 114Template-Ordner erstellen 122Vorschaubilder ausstellen 122

Backend-Module 114, 139Backups erstellen 550Bearbeitung mehrerer Datensätze 189,

220, 405, 472, 494, 497, 516, 541, 542

Benutzer 527Admin-Konto erstellen 528Begrüßungsmail 537Benutzer einrichten 533in Online-Demo 50Rechtevererbung 534und Zugriffsrechte 539Unterschied zu Mitgliedern 507

BenutzerfunktionenDaten bereinigen 550Rückgängig 40

BenutzergruppeAusgenommene Felder 532erlaubte Module freigeben 528Page- und Filemounts 530Rechte für Erweiterungen 531Zugriffsrechte setzen 539

Benutzerrechte vs. Gruppenrechte 535Bild (Inhaltselement) 272Bild-Einstellungen 274

An Rahmen anpassen 275Exaktes Format 275Proportional 275

BilderBild-Einstellungen 274Maximale Frontend-Breite 276

BildergalerieBildunterschriften 280erstellen 277HTML-Struktur 279

Blog 373, 412BOM 600Browser

IE6 nicht unterstützt 564Präfixes für CSS3 574

Browser, Hinweis für IE6 139Bugfix-Release (V2.10.x) 552

C

CacheBrowser-Cache löschen 548Cache-Modus wählen 548Cachezeit festlegen 548Daten bereinigen 457, 545

620

Index

Cache (Forts.)deaktivieren 457

CAPTCHA 344Checkbox-Menü 341Checkliste vor Update 554chmod 104, 105chown 104CMS 27

Funktionsweise 56und URLs 484

Conditional Comments 574Contao

Backups erstellen 550Bedeutung des Namens 27Bugfix-Release 552Contao-Check 90CSS-Framework 205Dateiverwaltung 119Erweiterungen installieren 123Erweiterungsliste 123geeigneter Webspace 90Inserttags (Übersicht) 614Live Update 555Major Release 553manuelles Update 556Mehrere Websites 610Minor Release 553offline installieren 78online installieren 89Suchfunktion erstellen 347Systemvoraussetzungen 77Überblick Funktionsweise 51, 165, 215und CSS (Fazit) 204und CSS3 571

Contao-Check 90, 107Content-Management-System � CMS 27Copyright-Hinweis 579CSS

absolute Positionierung 244Dopplung von div 207globale Variablen 574horizontal Dropdown 232horizontal zweite Ebene 230horizontale Navigation 228overflow:hidden 212, 276overflow-y 149relative Positionierung 244Reset-Stylesheets 187Style-Block im 209

CSS (Forts.)und Contao (Fazit) 204vertikale Navigation 194, 223

CSS � Stylesheets 169CSS3

Browser-Präfixes 574Eigenschaften (Übersicht) 572Geschichte 561, 571und IE8 575und interne Stylesheets 575

CSS3 Pie 575CSS-Framework 169, 205CSS-Klassen Events 420, 422CSS-Klassen FAQ 428CSS-Klassen Formulare 333CSS-Klassen Framework

block 212, 229, 276clear 212inside 212invisible 212

CSS-Klassen Inhaltselementece_comments 400ce_image 273ce_table 294ce_text 258ce_toplink 285image_container 270

CSS-Klassen Kalender 420, 422CSS-Klassen Module

mod_article 258mod_articlenav 253mod_booknav 252mod_breadcrumb 251mod_customnav 241mod_eventreader 425mod_lostPasswort 525mod_navigation 161mod_personalData 526mod_quicklink 250mod_quicknav 250mod_sitemap 247Navigationsmenü 223submenu 224trail 224

CSS-Klassen Nachrichten 410, 411CSS-Klassen Newsletter 439CSS-Klassen Sonstige

external (für Links) 267float_left 270

621

Index

CSS-Klassen Sonstige (Forts.)pagination 382pdf_link 288

CSV-Datei importieren 291

D

Dateiberechtigungen 104Dateimanager � Dateiverwaltung 119Dateiverwaltung 119

Dateien hochladen 120Ordner erstellen 119

Datenbankerstellen 73, 80, 93exportieren (SQL-Dump) 101importieren (SQL-Dump) 102Kollation 84Tabellen anlegen 85

dcaconfig.php 394, 552, 601, 606DocumentRoot 66Double Opt-In 441

E

Entwicklungsumgebung � XAMPP 55Erweiterungen

[autonews] 590[backboneit_mod_article] 582[BackupDB] 124, 469, 550[boxes] 582[ce_page_teaser] 594[changelanguage] 612[cleardefault] 346[clearlog] 544[conditionalforms] 346[conditionalselectmenu] 346[countryselect] 346[csseditor] 191[dlh_googlemaps] 583[dlstats] 522[easy_themes] 481[efg] 346[ext404] 503[Favicon] 484[folderurl] 492[formcheck] 346[googleanalytics] 558[helpmessage] 346[metagallery] 283

Erweiterungen (Forts.)[moretag] 331[nusoap] 124[path] 492[PiwikTrackingTag] 558[sessionform] 346[tags] 412[tags_news] 412[urlcleaner] 492[x_backend_notes] 217, 448, 549FAQ 426Formulargenerator 315Kalender 413Nachrichten 373Newsletter 431zur Mitgliederverwaltung 526

Erweiterungen auf contao.org 123Erweiterungen installieren 123Events � Kalender 413Extension Repository 123

F

Facebook 286FancyUpload 122FAQ 426Favicon einbinden 484fe_page.xhtml 160, 205, 609Feed

für Nachrichten 395Fehlermeldungen

403 Forbidden 503404 Not found 500No layout specified 134No pages found 127, 130Parse error 99

Filemount 530Firefox

Browser-Cache löschen 548Sprache einstellen 130Tastenkürzel ändern 115

Formatdefinitionen � Styles 147Formulare

Abhängiges Select-Menü 346Anmeldeformular gestalten 516im Contao-Forum 346Quicktipps 346

FormularfelderCheckbox-Menü 338, 341

622

Index

Formularfelder (Forts.)Datei-Upload 343Erklärung 334Fieldset 335Passwortfeld 335Radio-Button-Menü 338Select-Menü 336Sicherheitsabfrage 344Überschrift 334Übersicht 333

Formulargenerator 315Frontend 36

HTML-Grundgerüst 138, 205Online-Demo 36

Frontend-Modul � Module 41Frontend-Module � Module 139Frontend-Template 86, 159Frontend-Vorschau 137, 387, 519FTP-Modus 95Funktionen

Feed abonnieren 395Kommentarfunktion 397Kontaktformular 315Suchfunktion 347

G

Galerie (Inhaltselement) 276Google

Google Analytics 557Google Maps 583Google-Konto 504, 557Webmaster-Tools 504

Grids (Layoutraster) 205Gruppenrechte 535

H

Hard Limit 222.htaccess 92, 96, 486, 488, 490

RewriteBase 488HTC-Dateien 575htdocs 66HTML

div-Struktur 138, 205embed 306h1 oder h2 262iframe 306meta-Elemente 497

HTML (Forts.)title 495

HTML5Geschichte 561Neue Struktur-Elemente 563und Contao 565vereinfachte Schreibweise 562

HTML5 oder XHTML 566HTTP

Request und Response 499Status Codes 500

I

IE6 - Warnhinweis 564Inaktive Backend-Module 413 162Infobereich (Backend) 112Inhaltselemente

Akkordeon 296Artikel 311Artikel-Teaser 311Aufzählung 310Bild 272Code 308Download 312, 522Downloads 312, 522Formular 312, 324Galerie 276HTML 306Hyperlink 286in Online-Demo 47Inhaltselement 311Kommentar 311Modul 311Tabelle 289Text 157, 262, 304Top-Link 283Überschrift 259

initconfig.php 552Inserttags

{{date::Y}} 579{{env::main_name}} 236{{env::request}} 286{{form::xxx}} 332{{insert_article::ID}} 577, 581{{insert_content::ID}} 577, 581{{link::abmelden}} 514{{link::ID}} 442

623

Index

Inserttags (Forts.){{link:ID}} 513{{link_url::ID}} 265{{user::username}} 514für Datum 618für E-Mail-Adressen 618für Include-Elemente 617für Link-Elemente 614für Mitglieder 615für Sprachen 618für Umgebungsvariablen 616Übersicht 614

Installation.htaccess fehlt 92Admin-Konto anlegen 87Contao-Check 90Datenbanktabellen anlegen 85Datenbankverbindung prüfen 83FTP-Zugangsdaten eingeben 96Live Update 555manuelles Update 556Offline 78Offline SMH umgehen 98Online 89Passwort für Installtool 81Potenzielle Probleme 81, 95, 99, 100Systemvoraussetzungen 77Überblick Online-Installation 93Umzug auf Online-Webspace 101Verschlüsselungschlüssel 82

InstalltoolFTP-Zugangsdaten eingeben 96Passwort ändern 81Passwort vergessen 599schützen 83

Internet Explorer 6 Warnhinweis 139

K

Kalender 413Kategorien (Backend) 189Kollation 84Kommentare 311, 397Kontaktformular erstellen 315Kontrollkästchen (Formulare) 341Kopiervorgang abbrechen 144

L

langconfig.php 552, 601Layoutbereiche

eigene erstellen 608Übersicht 139

Lightbox 269Live Update 555localconfig.php 552, 599Lokale Installation 78

auf Online-Webspace 101

M

Major Release (Vx.0.0) 553Manuelles Update (FTP) 556Media Queries 574Mediabox 269Mehrere bearbeiten 189, 220, 405, 472,

494, 497, 516, 541, 542Mehrsprachige Website 611<meta name= 496, 497, 498meta.txt 280Metanavigation 238Minor Release (V2.x.0) 553Mitglieder 507

An- und Abmeldung 519Mitgliederregistrierung 526Passwort vergessen 524Persönliche Daten ändern 526Unterschied zu Benutzern 507

Mitglieder einrichten 509Mitgliedergruppen 509Mitgliederverwaltung 524mod_cache 488mod_rewrite 486Module 41

Artikelnavigation 217, 253Automatischer Logout 513Buchnavigation 217, 252Definition 139Eigener HTML-Code 143, 513für Kopf- und Fußbereich 143Individuelle Navigation 217, 239Login-Formular 512Navigationsmenü 42, 217, 221, 235Navigationsmodule 216Navigationspfad 217, 251Passwort vergessen 524

624

Index

Module (Forts.)Persönliche Daten 526Quicklink 217Quicknavigation 217Sitemap 217

Modultemplates 160MooTools

moo_accordion 297moo_analytics 558moo_mediabox 136

Multi-Domain 612Music Academy

Dateien entfernen 88Online-Demo 35

MySQL 70Datenbank erstellen 73Datenbanken in Ordnern 72Passwort für root 63und phpMyAdmin 73und SQL 72

N

Nachrichten 373Anzahl Beiträge pro Seite 382Archiv erstellen 375Beitrag erstellen 376Beitrag in Einzelansicht 380Meta-Info unterm Beitrag 392Teaser anzeigen 382Übersicht 374

Navigationbasiert auf Seitenstruktur 39Breadcrumb 251Buchnavigation 252Dropdown mit MooTools 234horizontal und vertikal 235horizontal zwei Ebenen 226Metanavigation 238Navigationspfad 251Sitemap 245vertikal zwei Ebenen 220

Navigationsbereich (Backend) 114Newsletter 431

abonnieren 441Double-Opt-In 441Frontend-Module 439, 442im Frontend anzeigen 437

Newsletter (Forts.)kündigen 441newsletter.css 440

O

Online-DemoArtikel 46Backend 37Inhaltselemente 47Module 41Rechtesystem im Backend 50Seitenlayout 42Seitenstruktur 39Stylesheets 45Themes 40

Optionsfelder (Formulare) 338

P

Pagemount 530Paginierung 382Passwort ändern (Admin) 528Passwort vergessen

für Admin-Konto 428für Installtool 599für Mitglieder 524

PDF 286PHP 67

als CGI 68als Modul 68

phpinfo() 69phpMyAdmin 73

aufrufen/starten 73, 74Datenbank erstellen 73, 80, 93

Piwik 558

R

Radio-Button-Menü 338RewriteBase 488RewriteRule 487Rich Text Editor (RTE) � TinyMCE 262RSS-Feed 395

S

Safe Mode Hack (SMH) 95, 96, 106Safe Mode Hack � FTP-Modus 95

625

Index

Seitenalias 493Seitenlayouts

Ausgabeformat 136, 566in Online-Demo 42neu erstellen 136tinymce.css ignorieren 603und CSS-Framework 209zweispaltig 446

Seitenname 493Seitenstruktur 127

Beispielsite erweitern 132, 218Cachezeit festlegen 548drei Klick-Tipps 133im Menü verstecken 220in Online-Demo 39und Navigation 39

Seitentemplates 160, 609Select-Menü 336SEO 483

Google Sitemap 504Seitentitel definieren 495URLs umschreiben 484

Servicenavigation � Metanavigation 238Sicherheit

777 ist keine gute Idee 106Hinweise zu Themes 479Installtool schützen 83Spamschutz 344XAMPP Sicherheitscheck 61

Sidebarauf Startseite 454Lesetipps 454per CSS gestalten 455Quicklink-Navigation 454Submit ausblenden 457zufälliges Bild 455

Sitemap 504Slimbox 269Sortierbare Tabelle 295Spamschutz 344Sprachen-Fallback 130SQL 72Startlevel 222Startpunkt einer Website 128Statische Webseiten 56Stoplevel 222Styles 147Stylesheets 169

basic.css (Reset) 181

Stylesheets (Forts.)Conditional Comments 147Das CSS-Framework 169, 205im Backend bearbeiten 147im Seitenlayout einbinden 150in Online-Demo 45Integration in Seitenlayouts 609intern und extern 203intern vs. extern 170Internes Stylesheet erstellen 145newsletter.css 440system/contao.css 211tinymce.css 602, 603und Contao (Fazit) 204

Stylesheets, externim Seitenlayout einbinden 201Integration in Seitenlayouts 202Möglichkeiten Bearbeitung 199, 200Vorgehensweise 198zusammen mit intern 203

Stylesheets, intern[csseditor] und Firebug 193CSS importieren 181CSS-Dateien bereinigen 545Einschränkungen 184, 193Erweiterung [csseditor] 191extern bearbeiten 192Funktion Filtern 189Funktion Suchen 188im Backend bearbeiten 171Integration in Seitenlayouts 196Styles ausblenden 196Tipps zum CSS-Editor 180, 188zusammen mit extern 203

Stylesheets, interneund CSS3 575

Subtemplates 160Suchfunktion 347Suchindex neu aufbauen 546Suchmaschinenoptimierung � SEO 483Suchsyntax 368Syndikation 286SyntaxHighlighter 308Systemeinstellungen 116

Anmeldedauer 118Cache-Modus 548Dateien hochladen 122Datums- und Zeitformat 118Inaktive Backend-Module 413

626

Index

Systemeinstellungen (Forts.)Maximale Frontend-Breite 276Speicherzeiten 118Titel der Webseite 116Verschlüsselungsschlüssel 83Zugriffsrechte (Standard) 540

System-Log 543System-Log löschen 544Systemvoraussetzungen 77Systemwartung

Daten bereinigen 457, 545, 550Suchindex neu aufbauen 546

T

Tabelle (Inhaltselement) 289Teaser

bei Nachrichten mit TinyMCE 394Bilder hinzufügen 392für Artikel 590für Nachrichten 382, 384, 387, 389Meta-Info unterhalb 392

TemplatesÄnderung geht nicht 457Definitionen 159nav_default.xhtml 161, 164, 241Unterordner erstellen 122XHTML und HTML5 566

Text ein- und ausblenden 296Textbausteine erstellen 603Theme-Manager 465Themes 465

[easy_themes] 481aktivieren in Seitenlayouts 471anpassen 473cto-Datei 468Das Cover-Theme 469enthaltene Komponenten 465exportieren 467Fehler nach Importieren 473importieren 470In Artikeln eingebundene Module 475in Online-Demo 40neu erstellen 134nicht enthalten 468Sicherheitshinweise 479Symbole zur Bearbeitung 136Template-Ordner erstellen 122und mehrere Websites 481, 613

$this->framework 207, 209$this->head 209$this->stylesheets 209TinyMCE 262

CSS-Klassen anzeigen 602für Nachrichtenteaser 394HTML-Elemente markieren 264Hyperlinks erstellen 264im Überblick 262in dcaconfig.php 394, 606Symbolleisten anpassen 604Textbausteine 603Textgröße Editorfenster 603tiny_templates 603und Fußbereich 577Vorlagen (Templates) 603

tinymce.css 602, 603tinyMCE.php 605Top-Link (Inhaltselement) 283Twitter 286

U

UpdateCheckliste 554Live Update 555manuell (FTP) 556Sollte ich updaten? 553

URLs umschreiben 484URL-Suffix 493UTF-8 (ohne BOM) 600

V

Verschieben abbrechen 144Videos einbinden 304

W

Webseite vs. Website 117Webserver 66

Antwortnummern 499DocumentRoot 66error.log 67Fehler 404 - Nicht Gefunden 500htdocs 66mod_rewrite 486startet nicht 60Statuscodes 499

627

Index

Webserver (Forts.)testen 60und PHP 68

Website-Template � Frontend-Template 86, 159

Webspaceerkunden mit phpinfo() 69prüfen mit Contao-Check 90

WYSIWYG-Editor � TinyMCE 262

X

XAMPP 55Control Panel 58Installation 57ist Offline-Webspace 55Sicherheit testen 65Sicherheitscheck 61Übersicht 75Umzug auf Online-Webspace 101Verzeichnis schützen 64

XAMPP (Forts.)Webserver testen 60

XMLFeed-Datei 395XML-Dateien bereinigen 545XML-Sitemap (Google) 504

Y

YAML 205, 609

Z

Zugriffsrechtefür Seiten und Artikel 539in Systemeinstellungen 540Linux 104Übersicht anzeigen lassen 542Unterschied zu Zugriffsschutz 539

Zugriffsschutz 520, 539für Downloads 520

Documents

Websites erstellen mit Contao - ReadingSample Konfiguration, Administration, Erweiterungen, Theme Manager, SEO u.v.m ... »fe_page.xhtml ... 9.3 Die Seitenstruktur der Beispielsite