Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
Einleitung
29
TEIL I Contao kennenlernen und installieren
35
1 Das ist Contao
37
1.1 Contao ist ein Content-Management-System
37
1.1.1 Brauchen Sie überhaupt ein Content-Management-System?
37
1.1.2 Ein CMS auf dem eigenen Webspace erfordert Know-how
39
1.2 Die Website zum Programm: »contao.org«
39
1.3 Was Contao so beliebt macht
41
1.3.1 Contao hilft Ihnen bei der Erstellung und Verwaltung von Inhalten
41
1.3.2 Contao vereinfacht die Gestaltung der Webseiten
42
1.3.3 Contao hat viele Funktionen eingebaut und ist beliebig erweiterbar
42
1.4 Die Community im Web: das Forum zu Contao
43
1.4.1 Tipps zur Benutzung des Forums
44
1.4.2 Fragen zum Buch bitte auch im Forum stellen
44
2 Der Offline-Webspace: XAMPP und MAMP
47
2.1 Der Webspace auf Ihrem Rechner
48
2.1.1 Statische Webseiten: der Webspace als Lagerhalle
48
2.1.2 Content-Management-System: der Webspace als Werkstatt
48
2.2 Windows: Offline-Webspace mit XAMPP
50
2.2.1 XAMPP für Windows installieren
50
2.2.2 Das XAMPP Control Panel
51
2.2.3 Testen, ob der Webserver funktioniert
52
2.2.4 Der Sicherheitscheck von XAMPP
54
2.3 OS X: Offline-Webspace mit MAMP
54
2.3.1 MAMP installieren
54
2.3.2 Das Programmfenster von MAMP
55
2.3.3 Testen, ob der Webserver funktioniert
56
2.4 Der Webserver: Apache serviert Webseiten
57
2.4.1 Der Apache ist ein Webserver
57
2.4.2 »Document Root«: der Ordner für die Webseiten
57
2.5 PHP: Programmiersprache und Interpreter
59
2.5.1 PHP ist auf php.net zu Hause
59
2.5.2 PHP: als Modul oder als CGI?
60
2.6 MySQL serviert SQL-Datenbanken
61
2.6.1 Eine relationale Datenbank besteht aus Tabellen und Beziehungen
62
2.6.2 SQL ist eine Sprache zur Verwaltung von Datenbanken
64
2.7 phpMyAdmin verwaltet die Datenbanken von MySQL
64
2.7.1 phpMyAdmin starten
65
2.7.2 Eine neue Datenbank anlegen mit phpMyAdmin
66
3 Die Installation von Contao
69
3.1 Die Installation vorbereiten
69
3.1.1 Die Systemvoraussetzungen
69
3.1.2 Die richtige Contao-Version für dieses Buch
70
3.2 Offline: Contao auf Ihrem Rechner installieren
70
3.2.1 Schritt 1: Contao-Dateien in den Ordner »contaobuch« kopieren
71
3.2.2 Schritt 2: Datenbank erstellen mit phpMyAdmin
72
3.2.3 Schritt 3: Das Installtool starten und die Lizenz akzeptieren
73
3.2.4 Schritt 4: »Installtool-Passwort« – ein Passwort für das Installtool festlegen
74
3.2.5 Schritt 5: »Datenbankverbindung« – Kontakt mit der Datenbank aufnehmen
76
3.2.6 Schritt 6: »Tabellen prüfen« – die Datenbanktabellen anlegen
77
3.2.7 Schritt 7: »Ein Template importieren« – oder auch nicht
78
3.2.8 Schritt 8: Ein Administratorkonto anlegen
79
3.3 Online: Contao im Web installieren
82
3.3.1 Informationen über Webhoster im Contao-Forum
82
3.3.2 Die Ordnerstruktur auf dem Webspace
83
3.3.3 Der Contao Check
83
3.3.4 Online-Installation, Teil 1 – Dateien auf den Webspace kopieren
87
3.3.5 Online-Installation, Teil 2 – die Zugangsdaten für die Datenbank
90
3.3.6 Online-Installation, Teil 3 – das Installtool im Überblick
90
3.4 Hilfe bei sonstigen Installationsproblemen
91
3.5 Umzug: von XAMPP und MAMP auf den Online-Webspace
93
3.5.1 Schritt 1: Die lokale Contao-Installation entschlacken
93
3.5.2 Schritt 2: Dateien auf den Online-Webspace übertragen
93
3.5.3 Schritt 3: Die lokale Datenbank exportieren
93
3.5.4 Schritt 4: Den SQL-Dump auf den Webspace importieren
94
3.6 »Safe Mode Hack«: der FTP-Modus von Contao
95
3.6.1 »Sie müssen den Safe Mode Hack auf diesem Server verwenden«
96
3.6.2 Eine Alternative zum SMH: PHP als FastCGI
97
3.6.3 So richten Sie den Safe Mode Hack ein
98
3.7 Know-how: Dateiberechtigungen – das 1 × 1 zu 644
99
3.7.1 Besitzer, Benutzer und Berechtigungen: 644 und 755
99
3.7.2 PHP und Contao: Benutzerrechte, Apache-Modul und (Fast)CGI
101
3.7.3 Was der Safe Mode Hack genau macht
101
3.7.4 Sicherheitsloch: »Alles auf 777« ist keine gute Idee
102
4 Schnelldurchlauf: So funktioniert Contao
103
4.1 »Music Academy«: die Beispielsite installieren
104
4.1.1 Vorbereitungen für eine neue Contao-Installation
104
4.1.2 Das Installtool von Contao aufrufen
105
4.1.3 Die Erweiterung [music_academy] suchen
105
4.1.4 Im Backend: die Erweiterung [music_academy] installieren
106
4.1.5 Im Installtool: die Beispielsite »Music Academy« importieren
107
4.2 Das Frontend ist die Website
108
4.3 Das Backend ist die Verwaltungsabteilung
110
4.4 Die Seitenstruktur ist das Fundament der Website
111
4.5 Themes bestimmen das Aussehen der Site
113
4.6 Module erzeugen den Quelltext für das Frontend
113
4.7 Jede Seite hat ein Seitenlayout
115
4.8 Seitenlayouts verbinden die Seiten mit Stylesheets
117
4.9 Jeder Artikel gehört zu einer Seite
117
4.10 Ein Artikel besteht aus Inhaltselementen
119
4.11 Das Backend ist für Redakteure sehr übersichtlich
121
4.12 Zusammenfassung – so tickt Contao
121
TEIL II Die erste Website mit Contao
123
5 Ein kurzer Rundgang im Backend
125
5.1 Überblick: die wichtigsten Bereiche im Backend
125
5.1.1 Ganz oben im Backend: der Infobereich
126
5.1.2 Links: der Navigationsbereich (Backend-Module)
128
5.1.3 Rechts: der Arbeitsbereich
129
5.2 Das Backend-Modul »System • Einstellungen«
131
5.2.1 Der »Titel der Webseite«
131
5.2.2 Das Format für Angaben von Datum und Zeit
132
5.3 Der Dateimanager: »System • Dateiverwaltung«
134
5.3.1 Ordner erstellen mit dem Dateimanager
134
5.3.2 Dateien mit dem Dateimanager hochladen
135
5.3.3 »Synchronisieren«: Abgleich zwischen Datenbank und Ordner »files«
138
5.3.4 Template-Ordner erstellen im Backend-Modul »Templates«
139
5.4 Der Erweiterungskatalog und die Erweiterungsverwaltung
140
5.4.1 Der Erweiterungskatalog auf »contao.org«
140
5.4.2 Eine Erweiterung aus dem Backend heraus installieren
141
6 Die ersten Schritte zur eigenen Website
143
6.1 »Keinen Startpunkt gefunden« – die Seitenstruktur erstellen
144
6.1.1 Der Startpunkt für eine neue Website
145
6.1.2 Der Sprachen-Fallback für den Startpunkt ist wichtig
147
6.1.3 Die Startseite für die Beispielsite erstellen
148
6.1.4 Die Seitenstruktur für die Beispielsite erweitern
149
6.2 »Kein Layout angegeben« – Theme und Seitenlayout erstellen
150
6.2.1 Das erste Theme erstellen
151
6.2.2 Das erste Seitenlayout erstellen und zuweisen
153
6.3 Frontend-Module für den Kopf- und den Fußbereich
155
6.3.1 Frontend-Module für den Kopf- und den Fußbereich erstellen
155
6.3.2 Die Module für den Kopf- und den Fußbereich im Seitenlayout einbinden
157
6.4 Der erste Artikel und zwei Inhaltselemente
158
6.4.1 Der Artikelbaum: die Übersicht über alle Artikel
159
6.4.2 Die Einstellungen für einen Artikel
159
6.4.3 Inhaltselemente zu einem Artikel hinzufügen
161
6.4.4 Prüfen, ob Artikel im Seitenlayout eingebunden sind
163
6.4.5 Inhalt für die anderen Seiten erstellen mit »Mehrere bearbeiten«
164
6.5 Ein Frontend-Modul für die Navigation: »Nav – Main«
166
6.5.1 Ein Navigationsmodul erstellen
166
6.5.2 Das Navigationsmodul im Seitenlayout einbinden
167
6.5.3 Die Seite »News« erstellen
168
6.6 Ein kurzer Blick in den Quelltext
170
6.6.1 Der Style-Block im <head>
170
6.6.2 Die Layoutbereiche aus dem Seitenlayout im <body>
170
6.7 Templates erstellen das HTML für den Quelltext
172
6.7.1 Frontend-Templates haben die Endung .sql
172
6.7.2 Alle anderen Templates mit der Endung .html5 oder .xhtml
172
6.7.3 Debugmodus: Template-Marker zeigen, welches Template den Quelltext erzeugt
173
6.7.4 Das HTML der Navigation im Quelltext
176
6.7.5 Backend-Modul »Templates«: Templates update-sicher anpassen
177
6.7.6 Ein kurzer Blick in das Template »nav_default.html5«
179
6.8 Das Contao-Prinzip: altogether now
180
7 Contao und CSS: Webseiten gestalten
183
7.1 Übersicht: Contao und CSS
183
7.1.1 Gestatten: das CSS-Framework von Contao
183
7.1.2 Interne oder externe Stylesheets
184
7.1.3 So funktionieren interne Stylesheets
184
7.2 Das erste Stylesheet erstellen
185
7.2.1 Ein internes Stylesheet erstellen: »Layout • Themes • Stylesheets«
186
7.2.2 Styles für »html« und »body« erstellen
188
7.2.3 CSS-Editor bedienen: Tasten und Maus in Kombination
190
7.2.4 Einen Style für »#wrapper« erstellen
190
7.2.5 Das Stylesheet mit dem Seitenlayout verbinden
192
7.2.6 Die Symbole zur Bearbeitung von Styles im Überblick
193
7.2.7 Der integrierte CSS-Reset
194
7.3 Grundlegende Gestaltung der Beispielsite
197
7.3.1 Google Fonts: die Schriftart »Droid Sans« einbinden
197
7.3.2 Den Kopfbereich gestalten
199
7.3.3 Den Fußbereich gestalten
200
7.3.4 Die Layoutbereiche für den Inhaltsbereich gestalten
202
7.3.5 Überschrift und Fließtext im Inhaltsbereich gestalten
203
7.3.6 Übung: die Navigation mit einem internen Stylesheet gestalten
204
7.3.7 Die Beispielsite ist schon ein bisschen »responsive«
207
7.4 Der CSS-Editor von Contao im Überblick
208
7.4.1 Die Gruppe »Selektor und Kategorie«
209
7.4.2 Breite und Höhe: die Gruppe »Abmessungen«
210
7.4.3 Elemente positionieren: die Gruppe »Position«
210
7.4.4 Box-Modell, Teil 1 – die Gruppe »Abstand und Ausrichtung«
211
7.4.5 Box-Modell, Teil 2 – die Gruppe »Hintergrund«
211
7.4.6 Box-Modell, Teil 3 – die Gruppe »Rahmen«
213
7.4.7 Text gestalten: die Gruppe »Schrift«
213
7.4.8 Die Gruppen »Aufzählung« und »Eigener Code«
214
7.5 Tipps zur Arbeit mit internen Stylesheets
215
7.5.1 »Filtern«: nur Styles einer bestimmten Kategorie anzeigen
215
7.5.2 »Suchen«: bestimmte Kommentare oder Selektoren suchen
217
7.5.3 »Versionierung«: Versionen vergleichen und wiederherstellen
217
7.5.4 Variablen in Themes und Stylesheets verwenden
219
7.5.5 Praktisch: Stylesheets von der Buch-CD importieren
221
7.6 CSS mit externen Stylesheets in Contao
221
7.6.1 Externe Stylesheets speichern und im Seitenlayout einbinden
222
7.6.2 Teamwork: interne und externe Stylesheets zusammen
223
8 Navigationen erstellen in Contao
225
8.1 So funktioniert Contao: Seiten, Module und Artikel
225
8.2 Die Navigationsmodule von Contao im Überblick
226
8.3 Die Seitenstruktur der Beispielsite erweitern
228
8.4 Eine vertikale Navigation mit zwei Ebenen
231
8.4.1 Schritt 1: »Layout • Seitenstruktur« – Seiten im Menü verstecken
231
8.4.2 Schritt 2: Der Modultyp »Navigationsmenü« im Detail
232
8.4.3 Schritt 3: Die zweite Navigationsebene per CSS gestalten
234
8.5 Eine horizontale Dropdown-Navigation
237
8.5.1 Schritt 1: Das Navigationsmodul in die Kopfzeile verschieben
237
8.5.2 Schritt 2: Die erste Navigationsebene gestalten
238
8.5.3 Schritt 3: Dropdown – horizontale Navigation zum Ausklappen
241
8.6 Horizontale und vertikale Navigation zusammen
244
8.7 Meta-Navigation: eine »Individuelle Navigation«
245
8.7.1 Schritt 1: Das Modul »Nav – Meta« erstellen
246
8.7.2 Schritt 2: Das Modul »Nav – Meta« einbinden
247
8.7.3 Schritt 3: Die Meta-Navigation im Quelltext
248
8.7.4 Schritt 4: Die Meta-Navigation gestalten
249
8.8 Sitemap: das Inhaltsverzeichnis der Website
250
8.8.1 Schritt 1: »Nav – Sitemap« – ein Modul zur Erstellung einer Sitemap
251
8.8.2 Schritt 2: Das Modul »Nav – Sitemap« in einen Artikel einbinden
252
8.8.3 Schritt 3: Das HTML für das Modul »Nav – Sitemap«
253
8.8.4 Schritt 4: Das CSS zur Gestaltung der Sitemap
254
8.9 Weitere Navigationsmodule im Überblick
255
8.9.1 Quicknavigation und Quicklink
256
8.9.2 Navigationspfad: die Breadcrumb-Navigation »Sie sind hier«
257
8.9.3 Buchnavigation: von einer Seite zur nächsten und zurück
258
9 Inhaltselemente für Texte und Bilder
261
9.1 Artikel und Inhaltselemente im HTML-Quelltext
261
9.2 Das Inhaltselement »Überschrift«: »ce_headline«
263
9.2.1 Die Überschrift ändern: »Die Abenteuer des Lorem Ipsum«
264
9.2.2 Überschriften im Inhaltsbereich gestalten
265
9.3 Das Inhaltselement »Text«: »ce_text«
266
9.3.1 Die Eingabemaske des Inhaltselements »Text«
266
9.3.2 Der Editor TinyMCE im Überblick
268
9.3.3 Text bearbeiten im Editor
268
9.3.4 Hyperlinks erstellen im Editor TinyMCE
269
9.3.5 Bilder und Tabellen möglichst nicht mit dem TinyMCE einfügen
272
9.4 Das Inhaltselement »Text« mit einem Bild erweitern
272
9.4.1 Fotos auf den Webspace hochladen
272
9.4.2 Im Seitenlayout: »MooTools« laden und »Mediabox« aktivieren
273
9.4.3 Ein Bild zum Inhaltselement »Text« hinzufügen
274
9.4.4 Das HTML für das eingefügte Bild
277
9.4.5 Eingefügte Bilder per CSS gestalten
278
9.5 Das Inhaltselement »Bild«: »ce_image«
279
9.5.1 Das Inhaltselement »Bild« im Einsatz
279
9.5.2 Die Bildunterschrift gestalten
280
9.5.3 »Bild-Einstellungen«: die Möglichkeiten der Bildanpassung, Teil 1
282
9.5.4 »Bild-Einstellungen«: die Möglichkeiten der Bildanpassung, Teil 2
283
9.6 Das Inhaltselement »Galerie«: »ce_gallery«
285
9.6.1 Eine Bildergalerie erstellen
285
9.6.2 Praktisch: die Reihenfolge der Bilder per Drag & Drop festlegen
288
9.6.3 Das HTML für die Bildergalerie
289
9.6.4 »Meta-Informationen«: die Beschriftung für die Fotos eingeben
290
9.6.5 Zauberhaft: Dateien in der Dateiverwaltung nachträglich umbenennen
292
9.7 Das Inhaltselement »Top-Link«: »ce_toplink«
294
9.7.1 Das Inhaltselement »Top-Link« einfügen
294
9.7.2 Das Inhaltselement »Top-Link« gestalten
295
9.7.3 Optional: »Top-Link« als Modul im Seitenlayout einbinden
297
9.8 Syndikation: Drucken, PDF, Facebook, Twitter und G+
298
9.8.1 Die Links zur Syndikation aktivieren
298
9.8.2 Die Links zur Syndikation per CSS gestalten
299
10 Weitere nützliche Inhaltselemente
303
10.1 Das Inhaltselement »Tabelle«: »ce_table«
303
10.1.1 Der Eingabeassistent für das Inhaltselement »Tabelle«
304
10.1.2 Importieren der Daten mit einer CSV-Datei
305
10.1.3 Das HTML für das Inhaltselement »Tabelle«
308
10.1.4 Das Inhaltselement »Tabelle« per CSS gestalten
309
10.1.5 Tabelle im Frontend sortierbar machen
311
10.2 Das Inhaltselement »Akkordeon«: »ce_accordion«
312
10.2.1 Seitenlayout vorbereiten und Artikel erstellen
313
10.2.2 Das Eingabeformular für das Inhaltselement »Akkordeon«
315
10.2.3 Zugeschaut und mitgebaut: drei Akkordeons erstellen
316
10.2.4 Das HTML für ein Akkordeon
317
10.2.5 Das CSS zur Gestaltung eines Akkordeons
318
10.2.6 Akkordeons mit Grafiken zur Statusanzeige
319
10.2.7 Nach dem Laden der Seite soll das erste Akkordeon eingeklappt sein
321
10.2.8 Wie man Akkordeons sonst noch einsetzen kann
323
10.3 Externe Videos auf Webseiten einbinden
323
10.3.1 Teil 1: Das Inhaltselement »HTML«: »ce_html« vorbereiten
323
10.3.2 Teil 2: Video einbinden mit dem Inhaltselement »HTML«
325
10.3.3 Die Alternative: das Inhaltselement »Youtube«
327
10.4 Das Inhaltselement »Video/Audio«: »ce_player«
328
10.4.1 Schritt 1: Hochladen der Audiodatei
329
10.4.2 Schritt 2: Im Seitenlayout das JavaScript-Template aktivieren
329
10.4.3 Schritt 3: MP3-Datei im Artikel einbinden
329
10.5 Das Inhaltselement »Markdown«: »ce_markdown«
330
10.5.1 Was ist »Markdown« überhaupt?
330
10.5.2 Das Inhaltselement »Markdown« in Contao
332
10.5.3 Contao verwandelt das Markdown in HTML
332
10.5.4 Spezielle Editoren für Markdown
334
10.6 Weitere Inhaltselemente im Überblick: Code und Co.
334
10.6.1 Das Inhaltselement »Code«: »ce_code«
335
10.6.2 Die »Include«-Elemente im Kurzüberblick
336
TEIL III Formulare und Core-Erweiterungen
339
11 Kontakt: der Formulargenerator von Contao
341
11.1 Ein Kontaktformular für die Beispielsite erstellen
341
11.1.1 Schritt 1: »Vielen Dank« – eine Weiterleitungsseite erstellen
343
11.1.2 Schritt 2: Die Eigenschaften für das Kontaktformular definieren
344
11.1.3 Schritt 3: Die Formularfelder für das Kontaktformular einfügen
347
11.1.4 Schritt 4: Das Kontaktformular auf der Seite »kontakt.html« einbinden
350
11.1.5 Schritt 5: Die Formularüberprüfung testen
351
11.1.6 Schritt 6: Das Kontaktformular abschicken
353
11.2 Das Kontaktformular gestalten
354
11.2.1 Das HTML für das Kontaktformular
354
11.2.2 Schnell: das Stylesheet »Formulare« aktivieren
356
11.2.3 Individuell: das Kontaktformular selbst gestalten
357
11.3 Formulardaten auf der Seite »Vielen Dank« ausgeben
360
11.4 Formularfelder: die Feldtypen im Formulargenerator
362
11.4.1 Formularfelder einfügen: die Feldtypen im Überblick
362
11.4.2 Überschrift und Erklärung für zusätzliche Informationen
364
11.4.3 Formularfelder gruppieren: »fieldset« und »legend«
364
11.4.4 Das Passwortfeld: automatisch mit Bestätigungsfeld
365
11.4.5 Das Select-Menü: Auswahllisten per Klick
365
11.4.6 Das Radio-Button-Menü: Optionsfelder deluxe
368
11.4.7 Das Checkbox-Menü: Kontrollkästchen deluxe
370
11.4.8 »Datei-Upload«: Besucher können Dateien hochladen
372
11.4.9 Die Sicherheitsfrage zur Spamvermeidung
373
12 Suchfunktion: die Beispielsite durchsuchen
375
12.1 Die Suchfunktion im Überblick
375
12.2 Die Seite »Suchen«: Suchformular und -ergebnisse
376
12.2.1 Schritt 1: Die Suchseite im Seitenbaum erstellen
376
12.2.2 Schritt 2: Das Modul »Anwendung – Suchfunktion« erstellen
377
12.2.3 Schritt 3: Das Modul »Anwendung – Suchfunktion« in einen Artikel einbinden
379
12.2.4 Schritt 4: Das HTML des Moduls »Anwendung – Suchfunktion«
381
12.2.5 Schritt 5: Das CSS zur Gestaltung der Suchseite
382
12.3 Ein einfaches Suchformular im Kopfbereich
384
12.3.1 Schritt 1: Das Modul »Anwendung – Suchformular« erstellen
385
12.3.2 Schritt 2: Das Modul »Anwendung – Suchformular« im Seitenlayout einbinden
386
12.3.3 Schritt 3: Das HTML für das Suchformular
387
12.3.4 Schritt 4: Das Suchformular im Kopfbereich positionieren
387
12.3.5 Schritt 5: Den Platz für das absolut positionierte Suchformular schützen
388
12.4 Alternative: ein flexibleres Suchformular
390
12.4.1 Schritt 1: Ein Suchformular mit dem Formulargenerator erstellen
390
12.4.2 Schritt 2: Ein Textfeld zum Suchformular hinzufügen
391
12.4.3 Schritt 3: Bildschaltfläche – eine Grafik zum Abschicken des Formulars
392
12.4.4 Schritt 4: Ein Frontend-Modul mit dem Suchformular erstellen
392
12.4.5 Schritt 5: Das Modul im Seitenlayout einbinden
393
12.4.6 Schritt 6: Das Suchformular gestalten und positionieren
394
12.5 Die Syntax der Suchfunktion im Überblick
396
13 Bloggen: die Erweiterung »Nachrichten«
397
13.1 Übersicht: die Zutaten für das Nachrichtensystem
398
13.2 Das »Newsarchiv«: Beiträge erstellen
399
13.2.1 Die Seitenstruktur vorbereiten: Weiterleitungsseite erstellen
399
13.2.2 Das »Newsarchiv«: ein Nachrichtenarchiv erstellen
400
13.2.3 Newsbeitrag erstellen, Teil 1: Titel und Teaser
401
13.2.4 Newsbeitrag erstellen, Teil 2: Inhaltselemente hinzufügen
405
13.3 Teaser und Beiträge im Frontend ausgeben
406
13.3.1 Das Frontend-Modul »News – Beitrag anzeigen [Nachrichtenleser]« erstellen
406
13.3.2 Das Frontend-Modul »News – Teaser anzeigen [Nachrichtenarchiv]« erstellen
407
13.3.3 Das Frontend-Modul »News – Teaser anzeigen« einbinden
409
13.3.4 Social Media: Beiträge auf Twitter, Facebook und Google+ empfehlen
412
13.3.5 SEO: die URL eines Nachrichtenbeitrags
413
13.3.6 Optional: Template anpassen – den Link »Zurück« optimieren
415
13.4 HTML und CSS: Teaser und Beiträge gestalten
416
13.4.1 Das HTML des Moduls »News – Teaser anzeigen«
416
13.4.2 Das CSS zur Gestaltung der Teaserübersicht auf der Seite »News«
418
13.4.3 Das HTML des Moduls »News – Beitrag anzeigen«
419
13.4.4 Das CSS zur Gestaltung der einzelnen Beiträge
420
13.4.5 Optional: Datum und Autor lieber unterhalb des Beitrags?
422
13.5 Bilder zu Teasern und Beiträgen hinzufügen
422
13.5.1 Bilder zu einem Teaser hinzufügen
422
13.5.2 Bilder zum Beitrag in der Einzelansicht hinzufügen
424
13.6 RSS-Feeds zum Abonnieren der Beiträge erstellen
425
13.7 Interaktion mit Besuchern: die Kommentarfunktion
428
13.7.1 Die Kommentarfunktion aktivieren
428
13.7.2 Kommentare schreiben und überprüfen
430
13.7.3 Die Kommentare gestalten
431
13.7.4 Optional: Kommentarformular – Beschriftung vor Eingabefeldern
432
13.7.5 Kommentare im Backend verwalten
433
13.7.6 Optional: Anzahl der Kommentare in der Übersicht anzeigen
433
13.8 Navigation: Beiträge monatsweise auswählen
435
13.8.1 Das Frontend-Modul »News – Monat auswählen [Nachrichtenarchiv Menü]« erstellen
436
13.8.2 Das Frontend-Modul »News – Monat auswählen« einbinden
437
13.8.3 Das HTML des Frontend-Moduls »News – Monat auswählen«
439
13.8.4 Das CSS für das Modul »News – Monat auswählen«
440
13.8.5 Benutzerfreundlich: ein Link, um alle Beiträge anzuzeigen
442
13.9 Know-how: Nachrichten, Modultypen und Templates
444
13.9.1 Die Modultypen und die Modultemplates »mod_news*«
444
13.9.2 Die vier Subtemplates »news_*«
445
14 Die Core-Erweiterungen »Events« und »FAQ«
447
14.1 Terminverwaltung: die Erweiterung »Events«
448
14.2 Einen neuen Kalender erstellen
449
14.2.1 Schritt 1: Die Weiterleitungsseite »Termine« erstellen
449
14.2.2 Schritt 2: Einen Kalender zur Verwaltung der Termine erstellen
450
14.2.3 Schritt 3: »Neues Event« – Termine erstellen im »Seminarkalender«
450
14.2.4 Schritt 4: Frontend-Module erstellen in »Themes • Frontend-Module«
453
14.2.5 Schritt 5: Frontend-Module einbinden in »Inhalte • Artikel«
454
14.3 Der noch ungestaltete Kalender im Überblick
455
14.3.1 Kalender und Termin in der Einzelansicht
455
14.3.2 SEO: Der Aufbau einer URL für ein Event
456
14.4 Das HTML für Kalender und Events
457
14.4.1 Das HTML vom Frontend-Modul »Kalender«
457
14.4.2 Das HTML der Einzelansicht eines Events (Eventleser)
459
14.5 Das CSS zum Gestalten eines Kalenders
460
14.5.1 Kalender gestalten, Teil 1: Tabelle und Kopfbereich
461
14.5.2 Kalender gestalten, Teil 2: Tage und Events
463
14.6 Die FAQ-Erweiterung: häufig gestellte Fragen
464
14.6.1 Die Kurzanleitung für die FAQ-Erweiterung
465
14.6.2 Die FAQ-Erweiterung gestalten
466
15 Die Core-Erweiterung »Newsletter«
469
15.1 Die Zentrale: das Backend-Modul »Newsletter«
471
15.1.1 Einen neuen Verteiler erstellen
471
15.1.2 Abonnenten verwalten: die Empfänger des Newsletters
472
15.1.3 Einen Newsletter erstellen
473
15.1.4 Einen Newsletter versenden
475
15.2 Newsletter im Frontend anzeigen
478
15.2.1 Die Kurzanleitung zur Darstellung der Newsletter im Frontend
478
15.2.2 Das HTML der Frontend-Module zur Newsletterdarstellung
479
15.3 Newsletter im Frontend abonnieren und kündigen
480
15.3.1 Die Kurzanleitung zum Abonnieren und Kündigen
481
15.3.2 Das HTML der Frontend-Module »Abonnieren« und »Kündigen«
482
16 Ein neues Seitenlayout für die Startseite
485
16.1 Der Start: Ein neues Seitenlayout für die Startseite
486
16.2 Newsbeiträge und Termine als Liste auf der Startseite
488
16.2.1 Die Frontend-Module für Newsbeiträge und Termine erstellen
488
16.2.2 Die Frontend-Module in den Artikel auf der Startseite einbinden
489
16.2.3 Ein neues Stylesheet für die Startseite erstellen
491
16.2.4 Newsbeiträge und Termine auf der Startseite gestalten
491
16.2.5 Optional: Datum der Nachrichten ohne Uhrzeit darstellen
494
16.3 Sidebar, Teil 1: ein zufällig ausgewähltes Bild
495
16.3.1 Das Modul »Startseite – Sidebar – Zufallsbild« erstellen
495
16.3.2 Die Module in der Sidebar gestalten
496
16.4 Sidebar, Teil 2: der Minikalender
498
16.4.1 Vorbereitung: Ein Modul »Eventliste« erstellen und einbinden
498
16.4.2 Ein Modul für den Minikalender erstellen und einbinden
499
16.4.3 Den Minikalender in der Sidebar gestalten
500
16.5 Sidebar, Teil 3: Lesetipps als Dropdown-Menü
502
16.5.1 Ein Modul »Quicklink« für die Lesetipps erstellen und einbinden
502
16.5.2 Optional: Lesetipps auswählen ohne Klick auf den »Los«-Button
503
16.6 Sidebar, Teil 4: Newsletter abonnieren
504
16.7 Sidebar, Teil 5: ein Content-Slider in der Sidebar
506
16.7.1 Überblick: »Content-Slider« statt »Zufallsbild«
507
16.7.2 Vorbereitungen im Seitenlayout »Startseite«
508
16.7.3 Einen neuen Artikel auf der Startseite erstellen
509
16.7.4 Einen Slider in dem neuen Artikel erstellen
509
16.7.5 Den Content-Slider konfigurieren
511
16.7.6 Die HTML-Struktur für einen Content-Slider
512
16.7.7 Den Content-Slider gestalten
513
TEIL IV Contao »responsiv« und »mobil«
515
17 Das CSS-Framework von Contao
517
17.1 Das CSS-Framework von Contao im Überblick
517
17.1.1 CSS-Editor und CSS-Framework sind nicht dasselbe
517
17.1.2 Die Komponenten des CSS-Frameworks
519
17.2 XHTML 1.0, HTML5 und Contao
520
17.2.1 Von HTML über XHTML 1.0 zu HTML5
521
17.2.2 Neuerungen in HTML5: vereinfachte Schreibweise und neue Elemente
521
17.2.3 In Contao haben Sie die Wahl zwischen XHTML und HTML5
522
17.2.4 HTML5 oder XHTML: Ausgabeformat im Seitenlayout definieren
523
17.2.5 Alle Templates gibt es als HTML5 und als XHTML
523
17.3 Die HTML-Struktur: das Seitentemplate »fe_page«
524
17.3.1 Das HTML-Grundgerüst von Contao
525
17.3.2 Der <head>-Bereich der »fe_page«
526
17.3.3 Der Style-Block von »$this->framework«
527
17.3.4 Stylesheets einbinden: »$this->stylesheets«
528
17.3.5 Die »fe_page.html5« enthält neue HTML5-Strukturelemente
529
17.3.6 »html5shim« – HTML5 für Internet Explorer 7 und 8 via JavaScript
530
17.4 CSS-Framework, Teil 1: »layout.css«
531
17.4.1 Teil 1 – ein paar allgemeine Styles
531
17.4.2 Teil 2 – »Holy Grail«: Weblayouts und der heilige Gral
532
17.4.3 Teil 3 – die Bildergalerien von Contao formatieren
533
17.4.4 Teil 4 – nützliche Klassen und zusätzliche Layoutbereiche
534
17.5 CSS-Framework, Teil 2: »responsive.css«
536
17.5.1 Media Query – auf kleinen Bildschirmen kein »Holy Grail«
536
17.5.2 Flexible Bilder mit »max-width:100%«
537
17.6 CSS-Framework, Teil 3: »reset.css«
538
17.6.1 Teil 1 – der Reset
538
17.6.2 Teil 2 – grundlegende Formatierung
539
17.6.3 Teil 3 – grundlegende Schriftformatierung
540
17.6.4 Teil 4 – Abstände
541
17.7 CSS-Framework, Teil 4: »form.css«
541
17.7.1 Grundformatierung von Eingabefeldern
541
17.7.2 Normalisierung und grundlegende Gestaltung diverser Elemente
542
17.7.3 Formatierung für Schaltflächen und Buttons
544
17.8 Contao, der interne CSS-Editor und CSS3
545
17.8.1 Eine kurze Geschichte von CSS
546
17.8.2 Wofür man CSS3 heute schon nutzen kann
546
17.8.3 Die Browser-Präfixe: -moz-, -webkit-, -o- und -ms-
547
17.8.4 Interne Stylesheets und CSS3
547
17.8.5 Fallback für ältere IEs mit »CSS3Pie«
548
17.9 Know-how: So funktioniert der Holy Grail
549
17.9.1 Hauptspalte »#main«: Im Quelltext zuerst, am Bildschirm in der Mitte
549
17.9.2 Schritt 1: Platz schaffen für die Sidebars
551
17.9.3 Schritt 2: Alle drei Inhaltsspalten werden nach links gefloatet
551
17.9.4 Intermezzo mit Gedankenspiel: Die Ausgangsposition im Detail
552
17.9.5 Schritt 3: Die linke Spalte rutscht nach links, Teil 1
553
17.9.6 Schritt 4: Die linke Spalte rutscht nach links, Teil 2
555
17.9.7 Schritt 5: Die rechte Spalte rutscht nach rechts
555
17.9.8 Der »Holy Grail«: Fazit und Einschränkungen
556
18 Die Beispielsite wird responsiv
559
18.1 Responsives Webdesign und Contao
559
18.1.1 960 Pixel? Das Web ist nicht aus Papier
560
18.1.2 Responsives Webdesign: ein HTML – mehrere Stylesheets
560
18.1.3 Contao und responsive Webseiten
561
18.2 Bestandsaufnahme: Die Beispielsite
563
18.2.1 Die Beispielseiten in einem großen Browserfenster
563
18.2.2 Die Beispielseiten in kleinen Viewports
564
18.2.3 Der erste Schritt zur Flexibilisierung: eine Breite in Prozent
566
18.3 Die responsive Navigation im Überblick
567
18.3.1 Die Navigation für kleine Viewports bis 768 px
567
18.3.2 Die Navigation in mittleren Viewports von 768 px bis 944 px
568
18.3.3 Die Navigation in großen Viewports ab 944 px
569
18.4 Die Navigation für kleine Viewports erstellen
569
18.4.1 Schritt 1: Menübutton erstellen
569
18.4.2 Schritt 2: Das Stylesheet »navigation« umbenennen und anpassen
570
18.4.3 Schritt 3: Neues Stylesheet erstellen und Menübutton positionieren
572
18.4.4 Schritt 4: Den Menübutton gestalten
573
18.4.5 Intermezzo: Das Suchfeld positionieren und gestalten
575
18.4.6 Schritt 5: Die Gestaltung des Navigationsbereichs
577
18.4.7 Schritt 6: Die Links im Navigationsbereich gestalten
579
18.4.8 Schritt 7: Right on »:target« – die Navigation in Aktion
581
18.5 Das Layout für kleine Viewports optimieren
583
18.5.1 Das Stylesheet »layout-small« erstellen und einbinden
584
18.5.2 Abstände der Layoutbereiche optimieren: »body« und »#wrapper«
584
18.5.3 Abstände der Layoutbereiche im Wrapper optimieren
585
18.6 Die Inhalte für kleine Viewports optimieren
587
18.6.1 Stylesheets »inhalte-943« erstellen und einbinden
587
18.6.2 Startseite: »Die neuesten Nachrichten« und »Die nächsten Termine«
587
18.6.3 Startseite: Die Bilder im Slider optimieren
589
18.6.4 Meta-Navigation, Sitemap und Newsmenü für alle Bildschirmbreiten
592
18.6.5 Optimierungen an Inhalten auf verschiedenen Seiten
593
18.6.6 Feinschliff: Abstände für die Navigation korrigieren
597
19 Mobile Seitenlayouts und 12Spalten Grid
599
19.1 Mobile Seitenlayouts und responsives Webdesign
599
19.1.1 »Media Queries«: Die Beispielseiten passen sich dem Viewport an
599
19.1.2 »Mobile Seitenlayouts«: Contao serviert zum Teil anderes HTML
600
19.1.3 Wie Contao mobile Geräte erkennt
601
19.2 »Music Academy«: Mobile Seitenlayouts in Aktion
602
19.2.1 Die »Music Academy« reagiert nicht auf die Viewportgröße
603
19.2.2 Die »Music Academy« sieht auf mobilen Geräten ganz anders aus
604
19.2.3 Überblick: Die Seitenlayouts in der »Music Academy«
606
19.2.4 Vergleich: Die Einstellungen in »Default« und in »Default mobile«
607
19.2.5 Fazit: mobile Seitenlayouts und responsives Webdesign
608
19.3 Mobile Seitenlayouts für die »Beispielsite Contaobuch«
609
19.3.1 Beispiel 1: Die Startseite mit Zufallsbild statt Slider
609
19.3.2 Beispiel 2: Die Startseite mit einem Anrufbutton in der Sidebar
610
19.4 Gridlayouts mit dem 12-Spalten Grid von Contao
612
19.4.1 Das Contao-Grid hat zwölf Spalten, die zusammen 960 px breit sind
613
19.4.2 Layoutraster werden einfach durch Zuweisen der Gridklassen erstellt
614
19.4.3 Das Contao-Grid passt sich bei kleinen Viewports automatisch an
615
19.4.4 »Seitenlayout«: Voraussetzungen für das Arbeiten mit dem Grid
616
19.4.5 »Inhaltselemente«: Regeln bei der Arbeit mit den Gridklassen
617
19.5 Das CSS zum 12-Spalten Grid
618
19.5.1 Das 12-Spalten Grid, Teil 1 – das Fundament
618
19.5.2 Das 12-Spalten Grid, Teil 2 – das Grid wird ein Grid
619
19.5.3 Das 12-Spalten Grid, Teil 3 – das Grid wird responsive
620
TEIL V Systemverwaltung
623
20 SEO: die Optimierung für Suchmaschinen
625
20.1 Lesbare Adressen: URLs umschreiben
626
20.1.1 Content-Management-Systeme und URLs
626
20.1.2 »System • Einstellungen«: drei wichtige URL-Einstellungen
627
20.1.3 Drei Voraussetzungen zum Umschreiben der URLs
628
20.1.4 Die Rewrite-Regel zum URL-Umschreiben in der ».htaccess«
629
20.1.5 Contao im Unterordner: die »RewriteBase« in der ».htaccess«
630
20.1.6 So wird’s gemacht: URLs umschreiben in der Praxis
631
20.1.7 Perfekt: URLs ohne »items« und »events«
632
20.2 Flache oder Ordner-URLs – Contao kann beides
633
20.2.1 URLs bei statischen Webseiten und bei CMSystemen
633
20.2.2 Contao erzeugt von Haus aus flache URLs
634
20.2.3 Contao kann auch Ordner-URLs
635
20.3 Seitenalias, Seitentitel und Seitenbeschreibung optimieren
637
20.3.1 Seitenname und Seitenalias im Backend von Contao
637
20.3.2 Der Titel der Seite: »<title> ... </title>«
639
20.3.3 Die Beschreibung der Seite: »<meta name="description">«
642
20.4 Abfangjäger: 404 und 403
644
20.4.1 Statusmeldungen: Der Webserver schickt eine Nummer mit
644
20.4.2 404-Seite nicht gefunden: Darf’s vielleicht was anderes sein?
646
20.4.3 403 Zugriff verweigert: Diese Seite gibt es, aber nicht für Sie
648
20.5 Eine XML-Sitemap für Google & Co.
650
20.5.1 Die Google Webmaster-Tools
650
20.5.2 Eine XML-Sitemap in Contao erstellen
650
21 Mitglieder: im Frontend angemeldete Besucher
653
21.1 Mitglieder und Benutzer: der Unterschied
653
21.2 Mitgliedergruppen und Mitglieder einrichten
655
21.2.1 Mitgliedergruppen einrichten
655
21.2.2 Neue Mitglieder erstellen
655
21.3 Seiten für die An- und Abmeldung erstellen
656
21.4 Frontend-Module für die An- und Abmeldung erstellen
658
21.4.1 Die Frontend-Module zur Anmeldung im Überblick
658
21.4.2 Modul Nr. 1: Das Anmeldeformular – »[Login-Formular]«
659
21.4.3 Modul Nr. 2: Die Abmeldung – »[Automatischer Logout]«
660
21.4.4 Modul Nr. 4: Der Link zur Anmeldeseite – »[Eigener HTML-Code]«
661
21.4.5 Modul Nr. 4: Anmeldename und Abmeldelink – »[Eigener HTML-Code]«
662
21.5 Die erstellten Module einbinden
663
21.5.1 Die Frontend-Module zum An- und Abmelden in Artikeln einbinden
663
21.5.2 Die Links zur An- und Abmeldung im Fußbereich einbinden
665
21.6 Die Frontend-Module gestalten
667
21.6.1 Das HTML für die Links und das Formular zur Anmeldung
667
21.6.2 Das CSS für die Links und das Formular zur Anmeldung
668
21.6.3 Testen, ob An- und Abmeldung funktionieren
669
21.7 Einen geschützten Downloadbereich einrichten
670
21.7.1 Schritt 1: Zugriffsschutz für die Seite »Downloads« einrichten
671
21.7.2 Schritt 2: Den Ordner »Downloads« in der Dateiverwaltung schützen
672
21.7.3 Schritt 3: Das Inhaltselement »Downloads« konfigurieren
673
21.8 Weitere Möglichkeiten zur Mitgliederverwaltung
676
21.8.1 Das Modul »Passwort vergessen«
676
21.8.2 Das Modul »Persönliche Daten«
677
21.8.3 Die automatische Registrierung für Mitglieder
678
22 Benutzer: im Backend angemeldete Mitarbeiter
679
22.1 Benutzerverwaltung: die Übersicht
679
22.2 Die Benutzergruppe »Redakteure – Nachrichten«
681
22.2.1 Schritt 1: Name eingeben und erlaubte Module freigeben
681
22.2.2 Schritt 2: Pagemounts und Filemounts einrichten
682
22.2.3 Schritt 3: Rechte für Erweiterungen – »Nachrichten-Rechte«
683
22.2.4 Schritt 4: Erlaubte Felder – Berechtigungen für die Tabelle »tl_news«
684
22.3 Die Benutzerin »Helen Lewis« einrichten
686
22.3.1 Schritt 1: Benutzername und Passwort
686
22.3.2 Schritt 2: Benutzergruppen und Rechtevererbung
687
22.3.3 Schritt 3: Testen – ein Klick, und Kevin Jones ist Helen Lewis
688
22.4 Die Benutzergruppe »Redakteure – Artikel«
690
22.4.1 Die Benutzergruppe »Redakteure – Artikel« einrichten
690
22.4.2 Benutzer der Benutzergruppe »Redakteure – Artikel« zuweisen
691
22.5 Zugriffsrechte für Seiten und Artikel setzen
693
22.5.1 Zugriffsrechte: Was mit Seite und Artikel gemacht werden darf
693
22.5.2 Zugriffsrechte für die freigegebenen Seiten setzen
694
23 Wartung: die Website im Alltag
697
23.1 Das »System-Log« schreibt mit
697
23.2 Die »Systemwartung« im Überblick
698
23.2.1 »Systemwartung«: Suchindex neu aufbauen
698
23.2.2 »Systemwartung«: Daten bereinigen
700
23.2.3 Cache leeren für Redakteure: »Persönliche Daten – Daten bereinigen«
702
23.3 Den »Cache-Flow« in Contao kontrollieren
703
23.3.1 Cache as cache can: Cache gibt es in Contao und im Browser
703
23.3.2 Der »Cache-Modus« von Contao in »System • Einstellungen«
703
23.3.3 Die »Cache-Einstellungen« in der Seitenstruktur definieren
704
23.4 Backups erstellen: Datenbank und Dateien sichern
705
23.4.1 Die MySQL-Datenbank sichern
705
23.4.2 Die Daten auf dem Webspace sichern
706
23.5 Updates: die Versionsnummern von Contao
707
23.5.1 Das Bugfix-Release: 3.3.x
707
23.5.2 Das Minor-Release: 3.x.0
707
23.5.3 Das Major-Release: x.0.0
708
23.5.4 »Long-Term-Support«: LTS-Releases werden länger unterstützt
708
23.5.5 Sollte ich eine funktionierende Contao-Website updaten?
709
23.5.6 Checkliste vor einem Update
710
23.6 Der »Live Update«-Service im Backend von Contao
711
23.6.1 Mit dem »Contao-Check« prüfen, ob der Webspace geeignet ist
711
23.6.2 Das »Live Update« kann auch bestehende Installationen reparieren
711
23.6.3 Das »Live Update« macht auch ein Datenbank-Backup
712
23.6.4 Machen Sie vor dem ersten »Live Update« ein Komplett-Backup
712
23.6.5 Eine »Live Update ID« erwerben
712
23.7 Das manuelle Update per FTP
713
23.7.1 Schritt 1: Backup von Datenbank und Dateien
713
23.7.2 Schritt 2: Aktuelle Contao-Version herunterladen und entpacken
713
23.7.3 Schritt 3: Das entpackte Archiv vorbereiten
714
23.7.4 Schritt 4: Das Archiv auf den Webspace kopieren und synchronisieren
714
23.7.5 Schritt 5: Datenbank mit dem Installtool aktualisieren
715
23.8 Webstatistiken mit Google Analytics und Piwik
715
24 Themes und Frontend-Templates
717
24.1 Ein Theme bestimmt das Aussehen der Website
717
24.1.1 Der Theme-Manager verwaltet bekannte Komponenten
717
24.1.2 »Theme One« von der Beispielsite exportieren und analysieren
719
24.1.3 All-in-one: das Innenleben einer CTO-Datei
719
24.1.4 Ein Blick in die Datei »theme_one.cto«
720
24.1.5 Was nicht in einem Theme enthalten ist: Inhalte, Seiten usw.
720
24.2 Einige Quellen für Contao-Themes
721
24.2.1 Einsatzgebiete: Wozu man Themes einsetzen kann
721
24.2.2 Der Contao Theme-Store: »themes.contao.org«
722
24.2.3 RockSolid Themes: rocksolidthemes.com
723
24.2.4 Weitere Websites mit Contao-Themes
724
24.3 Die Beispielsite im Look der »Music Academy«
724
24.3.1 Schritt 1: Theme im Backend importieren
724
24.3.2 Schritt 2: Theme »Music Academy« aktivieren
726
24.4 Über die Anpassung von Themes
728
24.4.1 Was im neuen Theme fehlt
728
24.4.2 In Artikeln eingebundene Frontend-Module sind Inhalt
728
24.4.3 Reparatur: Anpassung von in Artikeln eingebundenen Modulen
730
24.5 Frontend-Templates: Theme plus Seiten, Inhalte und Benutzer
731
24.5.1 »Theme« vs. »Frontend-Template«
731
24.5.2 Frontend-Templates sind nützlich zum »Einfrieren« von Websites
731
24.5.3 In den Beispieldateien: ein Frontend-Templates für (fast) jedes Kapitel
732
24.6 Sicherheitshinweise (nicht nur für Contao)
733
24.6.1 Das potenzielle Problem
734
24.6.2 Vertrauenswürdige Quellen
734
24.6.3 Ein Theme prüfen
734
24.6.4 Backend-Benutzer: Angriff von innen
734
TEIL VI Tipps und Tricks
735
25 Tipps und Tricks bei der Arbeit mit Inhalten
737
25.1 Text im Fußbereich mit dem TinyMCE pflegen
737
25.2 Recycling: Inhalte auf mehreren Seiten wiederholen
740
25.2.1 »Verknüpfungen«: zum Einfügen auf einzelnen Seiten
740
25.2.2 »Frontend-Module«: zum Einfügen auf allen Seiten eines Seitenlayouts
742
25.3 Artikelteaser auf Übersichtsseiten
742
25.3.1 Teasertexte für die drei Artikel erstellen
743
25.3.2 Die Teasertexte auf der Seite »Artikel« einbinden
744
25.3.3 Das HTML für die Teasertexte auf der Seite »Artikel erstellen«
745
25.3.4 Alternative zur Teaserliste: automatische Weiterleitung auf die erste Unterseite
747
25.4 Mehrere Artikel auf einer Seite
748
25.4.1 Methode 1: Nur ein Artikel pro Seite und Spalte
748
25.4.2 Methode 2: Mehrere komplette Artikel pro Seite und Spalte
748
25.4.3 Methode 3: Mehrere angeteaserte Artikel pro Seite und Spalte
749
25.4.4 Die Frontend-Module »Artikelliste« und »Artikelnavigation«
751
25.5 Die Erweiterung für Google Maps: [dlh_googlemaps]
751
25.5.1 Die Erweiterung [dlh_googlemaps] im Überblick
752
25.5.2 Schritt 1: Eine Karte erstellen in »Inhalte • Google Maps«
753
25.5.3 Schritt 2: Karten-Elemente – eine Info-Sprechblase hinzufügen
753
25.5.4 Schritt 3: Das Inhaltselement »Google Map« in Contao einbinden
754
25.5.5 Gewusst wie: die manuelle Ermittlung der Geo-Koordinaten
754
26 Tipps und Tricks zur Systemverwaltung
757
26.1 Tipps und Tricks zum TinyMCE
757
26.1.1 Vordefinierte CSS-Klassen im TinyMCE-Stylesheet »files/tinymce.css«
758
26.1.2 Die Schrift im TinyMCE gestalten im Stylesheet »files/tinymce.css«
759
26.1.3 Textbausteine im TinyMCE: Inhalte aus der Vorlage einfügen
760
26.2 Layouts für Fortgeschrittene
761
26.2.1 »Sticky Footer« ohne Änderungen am Seitentemplate »fe_page«
761
26.2.2 »Fullpage-Layout«: Header und Footer so breit wie das Browserfenster
762
26.2.3 Seitenlayout: eigene Layoutbereiche erstellen und aktivieren
763
26.2.4 Seitentemplate Marke Eigenbau: »fe_irgendwas«
764
26.2.5 Contao mit anderen CSS-Frameworks nutzen
765
26.3 Die Systemkonfiguration: »localconfig.php«
766
26.4 Die Sprachkonfiguration: »langconfig.php«
767
26.4.1 Ein Beispiel: »Mehr …« statt »Weiterlesen …«
768
26.4.2 Der Aufbau der Einträge in der »langconfig.php«
768
26.4.3 Ein zweites Beispiel: Die Überschrift »Einen Kommentar schreiben« ändern
769
26.5 Infos zu Datenbanktabellen: »dcaconfig.php«
770
26.6 Mehrere Websites in einer Contao-Installation
772
26.6.1 Jede Website muss einen eigenen Startpunkt haben
772
26.6.2 Mehrsprachige Websites
772
26.6.3 Begrenzt nützlich: mehrere Domains in einer Contao-Installation
774
26.6.4 Domainumleitung: www.domain.de zu domain.de (oder umgekehrt)
774
26.6.5 Zusammenfassung: mehrere Websites in mehreren Sprachen
775
26.7 Die Inserttags im Überblick
776
26.7.1 Inserttags für Link-Elemente
776
26.7.2 Benutzereigenschaften: Inserttags für Frontend-Benutzer
778
26.7.3 Seiteneigenschaften: Inserttags für alles rund um Seiten
779
26.7.4 Umgebungsvariablen
780
26.7.5 Include-Elemente
780
26.7.6 Verschiedenes: Datum, E-Mail und Sprachen
781
27 Einige Erweiterungen von Drittanbietern
785
27.1 Nützliche Helfer im Backend
785
27.1.1 »EasyThemes« ist auch bei nur einem Theme nützlich
785
27.1.2 »Sticky Backend Footer« fixiert die Speichern-Leiste im Arbeitsbereich
787
27.2 Kleine Erweiterungen für das Frontend
788
27.2.1 »Social Images«: Bilder für soziale Netze bereitstellen
788
27.2.2 Mehrspaltige Inhalte im Inhaltsbereich
788
27.3 Isotope, MetaModels und ungefähr 1.632 weitere Erweiterungen …
790
27.3.1 »Isotope eCommerce« – ein Shop-System für Contao
790
27.3.2 »MetaModels« – Datenstrukturen jenseits des Seitenbaums
791
27.4 Ausblick: Erweiterungsverwaltung wird Composer
792
Index
795