Websites erstellen mit Contao

Buchcover......Page 1
Websites erstellen mit Contao......Page 2
Liebe Leserin, lieber Leser......Page 3
Auf einen Blick......Page 4
Impressum......Page 5
Inhalt......Page 6
Geleitwort des Fachgutachters......Page 20
Vorwort......Page 22
TEIL I - Contao kennenlernen......Page 24
1.1.1 Brauchen Sie ein Content-Management-System?......Page 26
1.1.2 Contao unterstützt Sie bei Inhalt, Gestaltung und Funktionen......Page 27
1.2 Die Website zum Programm: www.contao.org......Page 28
1.3 Ein paar Highlights von Contao......Page 29
1.4 Die Community im Web: »www.contao-community.de«......Page 31
2 Schnelldurchlauf: So funktioniert Contao......Page 32
2.1 Das Frontend ist die Website......Page 33
2.2 Das Backend ist die Verwaltungsabteilung......Page 34
2.3 Die Seitenstruktur ist das Fundament der Website......Page 36
2.4 Themes bestimmen das Aussehen der Site......Page 37
2.5 Module erzeugen den Quelltext für das Frontend......Page 38
2.6 Jede Seite hat ein Seitenlayout......Page 39
2.7 Seitenlayouts verbinden die Seiten mit Stylesheets......Page 42
2.8 Jeder Artikel gehört zu einer Seite......Page 43
2.9 Ein Artikel besteht aus Inhaltselementen......Page 44
2.10 Das Backend ist für Redakteure sehr übersichtlich......Page 47
2.11 Zusammenfassung – so tickt Contao......Page 48
TEIL II - Contao installieren......Page 50
3.1.1 Statische Webseiten: Der Webspace als Lagerhalle......Page 52
3.1.2 Content-Management-System: Der Webspace als Werkstatt......Page 53
3.2 Die Installation von XAMPP Lite (Windows)......Page 54
3.2.2 Das XAMPP Control Panel......Page 55
3.2.3 Testen, ob der Webserver funktioniert......Page 57
3.3.1 Den Sicherheitscheck aufrufen......Page 58
3.3.2 Einen Passwortschutz für MySQL und phpMyAdmin einrichten......Page 59
3.3.4 Die neuen Sicherheitseinstellungen testen......Page 61
3.4.1 DocumentRoot: »htdocs«, der Ordner für die Webseiten......Page 63
3.4.2 Der PHP-Übersetzer: Als Modul oder als CGI......Page 64
3.5.1 MySQL verwaltet mehrere Datenbanken......Page 67
3.5.2 SQL ist die Sprache zur Verwaltung von Datenbanken......Page 68
3.6 phpMyAdmin verwaltet die Datenbanken von MySQL......Page 69
3.7 XAMPP-Matrix – die Komponenten im Überblick......Page 70
4.1 Vorbereitung: Die Systemvoraussetzungen......Page 72
4.2 Offline: Contao auf Ihrem Rechner installieren......Page 73
4.3.1 Informationen über Webhoster im Forum......Page 83
4.3.2 Webspace prüfen: Das Contao-Systemdiagnosetool......Page 84
4.3.3 Dateien auf den Webspace kopieren......Page 85
4.3.5 Die Installation im Überblick......Page 87
4.4 Safe Mode Hack: Der FTP-Modus von Contao......Page 88
4.4.1 »Sie benötigen wahrscheinlich den Safe Mode Hack«......Page 89
4.4.3 Online: So richten Sie den Safe Mode Hack ein......Page 90
4.4.4 Offline-Webspace: SMH bei einer lokalen Installation umgehen......Page 92
4.5 Alte PHP-Version: Parse error…......Page 93
4.6 Sonstige potenzielle Probleme bei der Installation......Page 94
4.7 Umzug: Von XAMPP auf den Online-Webspace......Page 95
4.8.1 Besitzer, Benutzer und Berechtigungen: 644 und 755......Page 98
4.8.2 PHP und Contao: Benutzerrechte, Modul und (Fast)CGI......Page 99
4.8.4 Sicherheitsloch: »Alles auf 777« ist keine gute Idee......Page 100
5.1 Überblick: Das Backend......Page 102
5.2 Ganz oben: Der Infobereich......Page 103
5.3 Links: Der Navigationsbereich (Backend-Module)......Page 104
5.4 Rechts: Der Arbeitsbereich......Page 105
5.5 »System Einstellungen«......Page 106
5.5.1 Der »Titel der Webseite«......Page 107
5.5.2 Das Format für Angaben von Datum und Zeit......Page 108
5.6 Der Dateimanager: »System Dateiverwaltung«......Page 109
5.6.1 Ordner erstellen mit dem Dateimanager......Page 110
5.6.2 Dateien mit dem Dateimanager hochladen......Page 111
5.7.2 Erweiterungen aus dem Backend heraus installieren......Page 113
TEIL III - Schritt für Schritt zur ersten Website......Page 116
6.1 »No pages found« – Die Seitenstruktur erstellen......Page 118
6.1.1 Der Startpunkt für eine neue Website......Page 119
6.1.2 Sprachen-Fallback für den Startpunkt aktivieren......Page 120
6.1.3 Die Startseite für die Beispielsite erstellen......Page 122
6.1.4 Die Seitenstruktur für die Beispielsite erweitern......Page 123
6.2.1 Das erste Theme erstellen......Page 125
6.2.2 Das erste Seitenlayout erstellen......Page 127
6.2.3 Ein kurzer Blick in den Quelltext......Page 128
6.3 Das erste Frontend-Modul: »Navigation – Hauptnavi«......Page 129
6.3.1 Ein Navigationsmodul erstellen......Page 130
6.3.2 Das Navigationsmodul im Seitenlayout einbinden......Page 131
6.4.1 Module für den Kopfund den Fußbereich erstellen......Page 133
6.4.2 Die Module für den Kopfund den Fußbereich im Seitenlayout einbinden......Page 134
6.5 Das erste Stylesheet erstellen und zuweisen......Page 135
6.5.2 Stylesheet bearbeiten: Einen Style für »body« erstellen......Page 136
6.5.3 Das Stylesheet mit dem Seitenlayout verbinden......Page 138
6.5.4 Weitere Styles für Kopfbereich, Hauptspalte und Fußbereich......Page 140
6.6.1 Der Artikelbaum: Die Übersicht über alle Artikel......Page 143
6.6.2 Die Einstellungen für einen Artikel......Page 144
6.6.3 Inhaltselemente zu einem Artikel hinzufügen......Page 145
6.6.4 Den Artikel mit dem Seitenlayout verbinden......Page 147
6.7.1 Es gibt verschiedene Arten von Templates......Page 148
6.7.2 Das HTML der Navigation im Quelltext......Page 150
6.7.3 Backend-Modul »Templates«: Templates update-sicher anpassen......Page 151
6.7.4 Ein kurzer Blick in das Template »nav_default.tpl«......Page 153
6.8 Das Contao-Prinzip: Altogether now......Page 154
7.1.1 Gestatten: Das CSS-Framework von Contao......Page 156
7.2 Arbeiten mit internen Stylesheets......Page 157
7.2.1 Der interne CSS-Editor: CSS per HTML-Formular......Page 158
7.2.2 Übung: Header und Footer mit dem internen CSS-Editor gestalten......Page 159
7.2.3 Tipps für die Arbeit mit dem internen CSS-Editor......Page 161
7.2.4 Integration von internen Stylesheets in »Seitenlayouts«......Page 162
7.3.2 Das Reset-Stylesheet »basic.css« importieren......Page 163
7.3.3 Das Reset-Stylesheet »basic.css« im Detail......Page 166
7.4 Das Suchen und Filtern von Styles in internen Stylesheets......Page 168
7.4.1 Styles mit bestimmten Selektoren suchen......Page 169
7.4.2 Filtern nach Kategorie......Page 170
7.5.1 Die Erweiterung »[csseditor]« installieren und kennenlernen......Page 172
7.5.3 Einschränkungen bei der Arbeit mit »[csseditor]«......Page 174
7.6 Übung: Gestaltung der Navigation per CSS......Page 175
7.7 Externe Stylesheets: CSS außerhalb der Datenbank......Page 177
7.7.1 Vorgehensweise: Die Arbeit mit externen Stylesheets......Page 178
7.7.2 Integration von externen Stylesheets in »Seitenlayouts«......Page 182
7.8 Teamwork: Interne und externe Stylesheets zusammen......Page 183
7.9 Fazit: Jeder kann so arbeiten wie er gerne möchte......Page 184
7.10.1 Das HTML-Grundgerüst von Contao in »fe_page.tpl«......Page 185
7.10.2 »$this->framework«: Die Einstellungen aus dem Seitenlayout......Page 187
7.10.4 Das CSS-Framework von Contao aus Benutzersicht......Page 189
7.10.5 Der Kern des CSS-Frameworks: »system/contao.css«......Page 191
7.10.6 Patches für IE6 und 7: »system/iefixes.css«......Page 192
8.1 Übersicht: Seiten, Module und Artikel......Page 194
8.2 Die Navigationsmodule im Überblick......Page 195
8.3 Die Seitenstruktur der Beispielsite erweitern......Page 196
8.4 Vertikale Navigation mit zwei Ebenen......Page 198
8.5 Horizontale Navigation mit zwei Ebenen......Page 204
8.6 Horizontale und vertikale Navigation zusammen......Page 212
8.7 Metanavigation: Eine »Individuelle Navigation«......Page 216
8.8 Sitemap: Das Inhaltsverzeichnis der Website......Page 222
8.9.1 Quicknavigation und Quicklink......Page 227
8.9.2 Navigationspfad: Die Breadcrumb-Navigation »Sie sind hier«......Page 228
8.9.3 Buchnavigation: Von einer Seite zur nächsten und zurück......Page 229
TEIL IV - Inhalte erstellen und verwalten......Page 232
9.1 Artikel und Inhaltselemente im HTML-Quelltext......Page 234
9.2 Das Inhaltselement »Überschrift«: »ce_headline«......Page 235
9.3 Das Inhaltselement »Text«: »ce_text«......Page 238
9.3.2 Der Editor TinyMCE im Überblick......Page 239
9.3.3 Hyperlinks erstellen im Editor TinyMCE......Page 241
9.3.4 Das Inhaltselement »Text« mit einem Bild erweitern......Page 244
9.3.5 Das HTML für das eingefügte Bild und ein CSS-Bilderrahmen......Page 247
9.4.1 Das Inhaltselement »Bild« im Einsatz......Page 248
9.4.2 »Bild-Einstellungen«: Die Möglichkeiten der Bildanpassung......Page 251
9.5.1 Eine Bildergalerie erstellen......Page 253
9.5.2 Die Bildergalerie im HTML......Page 256
9.5.3 Beschriftung von Galerien: »meta.txt«......Page 257
9.6 Das Inhaltselement »Top-Link«: «ce_toplink»......Page 259
9.7.1 Die Links zur Syndikation aktivieren......Page 262
9.7.2 Die Links zur Syndikation per CSS gestalten......Page 263
10.1.1 Der Eingabeassistent für das Inhaltselement »Tabelle«......Page 266
10.1.2 Importieren der Daten mit einer CSV-Datei......Page 268
10.1.3 Das HTML für das Inhaltselement »Tabelle«......Page 270
10.1.4 Das Inhaltselement »Tabelle« per CSS gestalten......Page 271
10.2 Das Inhaltselement »Akkordeon«: »ce_accordion«......Page 273
10.2.1 Seitenlayout vorbereiten und Artikel erstellen......Page 274
10.2.2 Das Eingabeformular für das Inhaltselement »Akkordeon«......Page 275
10.2.3 Zugeschaut und mitgebaut: Drei Akkordeons erstellen......Page 277
10.2.5 Das CSS zur Gestaltung eines Akkordeons......Page 278
10.2.6 Optional: Grafiken zur Statusanzeige......Page 280
10.3.1 Inhaltselement »Text«: Ein Link in einer Mediabox......Page 281
10.3.2 Das Inhaltselement »HTML«: »ce_html«......Page 283
10.4.1 Das Inhaltselement »Code«: »ce_code«......Page 285
10.4.2 Das Inhaltselement »Aufzählung«: »ce_list«......Page 287
10.4.4 Die »Include«-Elemente im Kurzüberblick......Page 288
11.1 Ein Kontaktformular für die Beispielsite erstellen......Page 290
11.2.1 Das HTML für das Kontaktformular......Page 301
11.2.2 Das CSS für das Kontaktformular......Page 303
11.3.1 Formularfelder einfügen: Die Feldtypen im Überblick......Page 305
11.3.2 Überschrift und Erklärung für zusätzliche Informationen......Page 306
11.3.4 Das Passwortfeld: Automatisch mit Bestätigungsfeld......Page 307
11.3.5 Das Select-Menü: Auswahllisten per Klick......Page 308
11.3.6 Das Radio-Button-Menü: Optionsfelder deluxe......Page 310
11.3.7 Das Checkbox-Menü: Kontrollkästchen deluxe......Page 313
11.3.8 »Datei-Upload«: Besucher können Dateien hochladen......Page 314
11.3.9 Die Sicherheitsfrage zur Spamvermeidung......Page 315
11.4 Sinnvolle Erweiterungen zur Arbeit mit Formularen......Page 317
12 Suchfunktion: Die Beispielsite durchsuchen......Page 318
12.1 Teil 1: Eine Suchseite erstellen......Page 319
12.2 Teil 2: Das Suchformular erstellen und einbinden......Page 327
12.3 Die Syntax der Suchfunktion im Überblick......Page 335
13 Die Erweiterung »Nachrichten«......Page 336
13.2 Das Backend-Modul »Nachrichten«: Beiträge erstellen......Page 337
13.2.1 »Newsarchiv«: Ein Nachrichtenarchiv erstellen......Page 338
13.2.2 Nachrichtenbeiträge schreiben......Page 339
13.3.1 Eine neue Seite zur Anzeige eines Beitrags (Einzelansicht)......Page 342
13.3.2 Das Modul »Nachrichten – Teaser anzeigen [Nachrichtenarchiv]«......Page 344
13.3.3 Das Modul »Beitrag anzeigen [Nachrichtenleser]«......Page 345
13.3.4 Einbinden des Moduls »Nachrichten – Teaser anzeigen«......Page 346
13.3.5 Einbinden des Moduls »Nachrichten – Beitrag anzeigen«......Page 347
13.4.1 Das HTML des Moduls »Nachrichten – Teaser anzeigen«......Page 349
13.4.2 Das CSS für das Modul »Nachrichten – Teaser anzeigen«......Page 351
13.4.3 Das HTML des Moduls »Nachrichten – Beitrag anzeigen«......Page 352
13.4.4 Das CSS für das Modul »Nachrichten – Beitrag anzeigen«......Page 353
13.5 Bilder zu Teasern und Beiträgen hinzufügen......Page 354
13.6 Einen Feed zum Abonnieren der Beiträge erstellen......Page 357
13.7.1 Die Kommentarfunktion aktivieren......Page 359
13.7.2 Kommentare schreiben und überprüfen......Page 360
13.7.3 Kommentare und Fehlermeldungen gestalten......Page 361
13.7.4 Kommentare im Backend verwalten......Page 363
13.8 Navigation: Beiträge monatsweise auswählen......Page 364
13.8.2 Das Modul »Nachrichten – Monat auswählen« einbinden......Page 365
13.8.3 Das HTML des Moduls »Nachrichten – Monat auswählen«......Page 366
13.8.4 Das CSS für das Modul »Nachrichten – Monat auswählen«......Page 367
13.9.1 Die Modultypen und die Modultemplates »mod_news*.tpl«......Page 369
13.9.2 Die vier Subtemplates »news_*.tpl«......Page 370
14.1 Die Erweiterung »Kalender«: Termine verwalten......Page 372
14.1.1 Die Erweiterung »Kalender« in der Übersicht......Page 373
14.2.1 Das HTML vom Frontend-Modul »Kalender«......Page 378
14.2.2 Das CSS zum Gestalten eines Kalenders......Page 380
14.2.3 HTML und CSS zur Gestaltung der Einzelansicht......Page 384
14.3.1 Die Kurzanleitung für die FAQ-Erweiterung......Page 385
14.3.2 Die FAQ-Erweiterung gestalten......Page 387
15 Die Erweiterung »Newsletter«......Page 390
15.1.1 Einen Verteiler erstellen......Page 391
15.1.2 Abonennten verwalten: Die Empfänger des Newsletters......Page 392
15.1.3 Einen Newsletter erstellen......Page 393
15.1.4 Einen Newsletter versenden......Page 394
15.2 Newsletter im Frontend anzeigen......Page 396
15.2.2 Das HTML der Frontend-Module zur Newsletterdarstellung......Page 397
15.3 Newsletter im Frontend abonnieren und kündigen......Page 398
15.3.1 Die Kurzanleitung zum Abonnieren und Kündigen......Page 399
15.3.2 Das HTML der Frontend-Module »Abonnieren« und »Kündigen«......Page 400
16 Die Startseite gestalten......Page 402
16.1 Ein neues Layout für die Startseite......Page 403
16.2 Inhalt für die Hauptspalte: Newsbeiträge und Termine......Page 404
16.2.2 Die Frontend-Module auf der Startseite einbinden......Page 405
16.2.3 Newsbeiträge und Termine gestalten......Page 407
16.3 Artikel mit Teaser auf der Startseite......Page 409
16.4.1 Lesetipps mit einem Quicklink-Modul......Page 411
16.4.3 Die Sidebar gestalten......Page 412
16.5.1 Eine neue Seite mit dem Modul »Eventliste« erstellen......Page 414
16.5.3 Den Minikalender gestalten......Page 415
16.6 Newsletter abonnieren in der Sidebar......Page 417
TEIL V - Systemverwaltung......Page 420
17.1.1 Der Theme-Manager verwaltet bekannte Komponenten......Page 422
17.1.2 »Blaues Theme« von der Beispielsite exportieren......Page 423
17.1.3 All-in-one: Das Innenleben einer CTO-Datei......Page 424
17.1.4 Was nicht in einem Theme enthalten ist......Page 425
17.2 Das »Cover Theme«: Die Beispielsite im neuen Look......Page 426
17.3 Über die Anpassung von Themes......Page 429
17.4.1 Im Seitenlayout eingebundene Module sind unproblematisch......Page 431
17.4.2 In Artikeln eingebundene Frontend-Module sind Inhalt......Page 432
17.4.3 Was mit in Artikeln eingebundenen Modulen schiefgehen kann......Page 433
17.4.4 Reparatur: Anpassung von in Artikeln eingebundenen Modulen......Page 434
17.5 Sicherheitshinweise für Contao-Themes......Page 435
17.5.4 Angriff von innen......Page 436
17.6 Fazit: Themes sind klasse......Page 437
18 Die Optimierung für Suchmaschinen......Page 438
18.1.1 Content-Management-Systeme und URLs......Page 439
18.1.2 Die drei URL-Einstellungen von Contao......Page 440
18.1.3 Drei Voraussetzungen zum Umschreiben der URLs......Page 441
18.1.4 Contao im Unterordner: Die »RewriteBase« in der ».htaccess«......Page 442
18.1.6 So wird’s gemacht: URLs umschreiben in der Praxis......Page 443
18.2 Flache oder hierarchische URLs?......Page 445
18.3.1 Seitenname und Seitenalias im Backend von Contao......Page 446
18.3.2 Der Titel der Seite: »«......Page 448
18.3.3 Die Beschreibung der Seite: »«......Page 451
18.4.1 Statusmeldungen: Der Webserver schickt eine Nummer mit......Page 452
18.4.2 404-Seite nicht gefunden: Darf’s vielleicht was anderes sein?......Page 454
18.4.3 403 Zugriff verweigert: Diese Seite gibt es, aber nicht für Sie......Page 456
18.5 Eine XML-Sitemap für Google & Co......Page 457
19.1 Mitglieder und Benutzer: Der Unterschied......Page 460
19.2.2 Mitglieder einrichten......Page 462
19.3.1 Seiten zur Anund Abmeldung erstellen......Page 463
19.3.2 Die Module zur Anmeldung im Überblick......Page 464
19.3.3 Ein Modul für das Anmeldeformular: »[Login-Formular]«......Page 465
19.3.5 Modul für den Link zur Anmeldeseite: »[Eigener HTML-Code]«......Page 466
19.4.1 Die Module zum Anund Abmelden in Artikeln einbinden......Page 467
19.4.2 Module für den Fußbereich im Seitenlayout einbinden......Page 468
19.4.3 Anund Abmeldung testen......Page 469
19.4.4 Das Anmeldeformular gestalten......Page 471
19.5 Einen geschützten Downloadbereich einrichten......Page 472
19.6.1 Das Modul »Passwort vergessen«......Page 476
19.6.3 Die automatische Registrierung für Mitglieder......Page 478
20.1 Benutzerverwaltung: Die Übersicht......Page 480
20.2 Die Benutzergruppe »Redakteure – Nachrichten«......Page 481
20.3 Die Benutzerin »Helen Lewis« einrichten......Page 486
20.3.1 Testen der Einstellungen: Ein Klick, und Sie sind Helen Lewis......Page 488
20.4.1 Benutzergruppe »Redakteure – Artikel« einrichten......Page 490
20.4.2 Benutzer zuweisen und testen......Page 491
20.5.1 Zugriffsrechte: Was mit Seite und Artikel gemacht werden darf......Page 492
20.5.2 Zugriffsrechte für die freigegebenen Seiten setzen......Page 493
21.1 Das System-Log protokolliert Aktivitäten von Contao......Page 496
21.2 Webstatistiken mit Google Analytics......Page 497
21.3.1 Der Cache-Modus in »System Einstellungen«......Page 498
21.3.2 Cache-Einstellungen: Die Cachezeit für die Seiten definieren......Page 499
21.3.3 Systemwartung: Daten bereinigen......Page 500
21.3.4 Systemwartung: Suchindex neu aufbauen......Page 501
21.4 Backups erstellen......Page 502
21.5 Der Live Update Service: Das automatische Update......Page 504
21.6 Das manuelle Update per FTP......Page 505
22.1.1 Die Systemkonfiguration: localconfig.php......Page 508
22.1.2 Data Container Arrays: Die »dcaconfig.php«......Page 509
22.1.3 Sprachkonfiguration: Die »langconfig.php«......Page 510
22.2.1 Ein Stylesheet für den TinyMCE: »tl_files/tinymce.css«......Page 511
22.2.2 Textbausteine im TinyMCE: Inhalte aus Vorlage einfügen......Page 512
22.2.3 Die Symbolleisten des TinyMCE anpassen......Page 513
22.3 Anfahrtskizze mit Google Maps......Page 516
22.3.1 Die Konfiguration des Frontend-Moduls......Page 517
22.3.2 Die Ermittlung der Koordinaten......Page 518
22.4.1 Eigene Layoutbereiche erstellen und aktivieren......Page 519
22.4.3 Contao mit anderen CSS-Frameworks nutzen......Page 520
22.5.1 Ein Startpunkt für jede Website......Page 521
22.5.2 Mehrsprachige Website mit automatischer Sprachwahl......Page 522
22.5.4 Zusammenfassung: Mehrere Websites in mehreren Sprachen......Page 523
22.6 Die Insert-Tags im Überblick......Page 524
22.6.1 Insert-Tags für Link-Elemente......Page 525
22.6.2 Benutzereigenschaften: Insert-Tags für Frontend-Benutzer......Page 526
22.6.3 Umgebungsvariablen......Page 527
22.6.5 Verschiedenes: Datum, E-Mail und Sprachen......Page 528
C......Page 530
D......Page 531
G......Page 532
M......Page 533
P......Page 534
S......Page 535
W......Page 536
Z......Page 537