TEIL I Contao kennenlernen 1 Das ist Contao Schnelldurchlauf: So funktioniert Contao... 31

Transkript

1

2 Auf einen Blick TEIL I Contao kennenlernen 1 Das ist Contao Schnelldurchlauf: So funktioniert Contao TEIL II Contao installieren 3 XAMPP: Der Offline-Webspace Die Installation von Contao Ein kurzer Rundgang im Backend TEIL III Schritt für Schritt zur ersten Website 6 Die erste Website mit Contao Webseiten gestalten: Contao und CSS Navigationen erstellen in Contao TEIL IV Inhalte erstellen und verwalten 9 Inhaltselemente für Text und Bilder Weitere nützliche Inhaltselemente Kontakt: Formulare erstellen mit Contao Suchfunktion: Die Beispielsite durchsuchen Die Erweiterung»Nachrichten« Die Erweiterungen»Kalender«und»FAQ« Die Erweiterung»Newsletter« Die Startseite gestalten TEIL V Systemverwaltung 17 Der Theme-Manager in Aktion Die Optimierung für Suchmaschinen Mitglieder: Im Frontend angemeldete Besucher Benutzer: Im Backend angemeldete Mitarbeiter Die Website im Alltag Contao für Fortgeschrittene: Tipps und Tricks

3 Inhalt Geleitwort des Fachgutachters Vorwort TEIL I Contao kennenlernen 1 Das ist Contao Contao ist ein Content-Management-System Brauchen Sie ein Content-Management-System? Contao unterstützt Sie bei Inhalt, Gestaltung und Funktionen Die Website zum Programm: Ein paar Highlights von Contao Die Community im Web:» Schnelldurchlauf: So funktioniert Contao Das Frontend ist die Website Das Backend ist die Verwaltungsabteilung Die Seitenstruktur ist das Fundament der Website Themes bestimmen das Aussehen der Site Module erzeugen den Quelltext für das Frontend Jede Seite hat ein Seitenlayout Seitenlayouts verbinden die Seiten mit Stylesheets Jeder Artikel gehört zu einer Seite Ein Artikel besteht aus Inhaltselementen Das Backend ist für Redakteure sehr übersichtlich Zusammenfassung so tickt Contao TEIL II Contao installieren 3 XAMPP: Der Offline-Webspace XAMPP ist Webspace auf Ihrem Rechner Statische Webseiten: Der Webspace als Lagerhalle Content-Management-System: Der Webspace als Werkstatt Die Installation von XAMPP Lite (Windows) XAMPP Lite installieren

4 Inhalt Das XAMPP Control Panel Testen, ob der Webserver funktioniert Der Sicherheitscheck von XAMPP Den Sicherheitscheck aufrufen Einen Passwortschutz für MySQL und phpmyadmin einrichten Passwortschutz für das XAMPP-Verzeichnis einrichten Die neuen Sicherheitseinstellungen testen Der Webserver: Apache serviert Webseiten DocumentRoot:»htdocs«, der Ordner für die Webseiten Der PHP-Übersetzer: Als Modul oder als CGI MySQL serviert SQL-Datenbanken MySQL verwaltet mehrere Datenbanken SQL ist die Sprache zur Verwaltung von Datenbanken phpmyadmin verwaltet die Datenbanken von MySQL XAMPP-Matrix die Komponenten im Überblick Die Installation von Contao Vorbereitung: Die Systemvoraussetzungen Offline: Contao auf Ihrem Rechner installieren Online: Contao im Web installieren Informationen über Webhoster im Forum Webspace prüfen: Das Contao-Systemdiagnosetool Dateien auf den Webspace kopieren Zugangsdaten für die Datenbank Die Installation im Überblick Safe Mode Hack: Der FTP-Modus von Contao »Sie benötigen wahrscheinlich den Safe Mode Hack« Eine Alternative zum SMH: PHP als CGI oder Fast-CGI Online: So richten Sie den Safe Mode Hack ein Offline-Webspace: SMH bei einer lokalen Installation umgehen Alte PHP-Version: Parse error Sonstige potenzielle Probleme bei der Installation Umzug: Von XAMPP auf den Online-Webspace Know-how: Dateiberechtigungen das 1x1 zu Besitzer, Benutzer und Berechtigungen: 644 und PHP und Contao: Benutzerrechte, Modul und (Fast)CGI

5 Inhalt Was der Safe Mode Hack genau macht Sicherheitsloch:»Alles auf 777«ist keine gute Idee Ein kurzer Rundgang im Backend Überblick: Das Backend Ganz oben: Der Infobereich Links: Der Navigationsbereich (Backend-Module) Rechts: Der Arbeitsbereich »System Einstellungen« Der»Titel der Webseite« Das Format für Angaben von Datum und Zeit Der Dateimanager:»System Dateiverwaltung« Ordner erstellen mit dem Dateimanager Dateien mit dem Dateimanager hochladen Erweiterungen installieren Die Erweiterungsliste auf»contao.org« Erweiterungen aus dem Backend heraus installieren TEIL III Schritt für Schritt zur ersten Website 6 Die erste Website mit Contao »No pages found«die Seitenstruktur erstellen Der Startpunkt für eine neue Website Sprachen-Fallback für den Startpunkt aktivieren Die Startseite für die Beispielsite erstellen Die Seitenstruktur für die Beispielsite erweitern »No layout found«theme und Seitenlayout erstellen Das erste Theme erstellen Das erste Seitenlayout erstellen Ein kurzer Blick in den Quelltext Das erste Frontend-Modul:»Navigation Hauptnavi« Ein Navigationsmodul erstellen Das Navigationsmodul im Seitenlayout einbinden Frontend-Module für den Kopf- und den Fußbereich Module für den Kopf- und den Fußbereich erstellen Die Module für den Kopf- und den Fußbereich im Seitenlayout einbinden Das erste Stylesheet erstellen und zuweisen Das erste Stylesheet im Backend erstellen

6 Inhalt Stylesheet bearbeiten: Einen Style für»body«erstellen Das Stylesheet mit dem Seitenlayout verbinden Weitere Styles für Kopfbereich, Hauptspalte und Fußbereich Der erste Artikel und ein Inhaltselement Der Artikelbaum: Die Übersicht über alle Artikel Die Einstellungen für einen Artikel Inhaltselemente zu einem Artikel hinzufügen Den Artikel mit dem Seitenlayout verbinden Templates: Das HTML für den Quelltext Es gibt verschiedene Arten von Templates Das HTML der Navigation im Quelltext Backend-Modul»Templates«: Templates update-sicher anpassen Ein kurzer Blick in das Template»nav_default.tpl« Das Contao-Prinzip: Altogether now Webseiten gestalten: Contao und CSS Übersicht: Contao und CSS Gestatten: Das CSS-Framework von Contao Stylesheets bearbeiten: Interner oder externer Editor? Arbeiten mit internen Stylesheets Der interne CSS-Editor: CSS per HTML-Formular Übung: Header und Footer mit dem internen CSS- Editor gestalten Tipps für die Arbeit mit dem internen CSS-Editor Integration von internen Stylesheets in»seitenlayouts« Interne Stylesheets: CSS-Dateien importieren Das Reset-Stylesheet»basic.css«herunterladen Das Reset-Stylesheet»basic.css«importieren Das Reset-Stylesheet»basic.css«im Detail Das Suchen und Filtern von Styles in internen Stylesheets Styles mit bestimmten Selektoren suchen Filtern nach Kategorie Die Erweiterung»[csseditor]« Die Erweiterung»[csseditor]«installieren und kennenlernen Interne Stylesheets extern bearbeiten Einschränkungen bei der Arbeit mit»[csseditor]« Übung: Gestaltung der Navigation per CSS

7 Inhalt 7.7 Externe Stylesheets: CSS außerhalb der Datenbank Vorgehensweise: Die Arbeit mit externen Stylesheets Integration von externen Stylesheets in»seitenlayouts« Teamwork: Interne und externe Stylesheets zusammen Fazit: Jeder kann so arbeiten wie er gerne möchte Know-how: Das CSS-Framework von Contao Das HTML-Grundgerüst von Contao in»fe_page.tpl« »$this->framework«: Die Einstellungen aus dem Seitenlayout Stylesheets einbinden:»$this->stylesheets«und»$this->head« Das CSS-Framework von Contao aus Benutzersicht Der Kern des CSS-Frameworks:»system/contao.css« Patches für IE6 und 7:»system/iefixes.css« Navigationen erstellen in Contao Übersicht: Seiten, Module und Artikel Die Navigationsmodule im Überblick Die Seitenstruktur der Beispielsite erweitern Vertikale Navigation mit zwei Ebenen Horizontale Navigation mit zwei Ebenen Horizontale und vertikale Navigation zusammen Metanavigation: Eine»Individuelle Navigation« Sitemap: Das Inhaltsverzeichnis der Website Weitere Navigationsmodule Quicknavigation und Quicklink Navigationspfad: Die Breadcrumb-Navigation»Sie sind hier« Buchnavigation: Von einer Seite zur nächsten und zurück 228 TEIL IV Inhalte erstellen und verwalten 9 Inhaltselemente für Text und Bilder Artikel und Inhaltselemente im HTML-Quelltext Das Inhaltselement»Überschrift«:»ce_headline« Das Inhaltselement»Text«:»ce_text« Inhaltselement Text: Die Eingabemaske Der Editor TinyMCE im Überblick Hyperlinks erstellen im Editor TinyMCE

8 Inhalt Das Inhaltselement»Text«mit einem Bild erweitern Das HTML für das eingefügte Bild und ein CSS- Bilderrahmen Das Inhaltselement»Bild«:»ce_image« Das Inhaltselement»Bild«im Einsatz »Bild-Einstellungen«: Die Möglichkeiten der Bildanpassung Das Inhaltselement»Galerie«:»ce_gallery« Eine Bildergalerie erstellen Die Bildergalerie im HTML Beschriftung von Galerien:»meta.txt« Das Inhaltselement»Top-Link«: «ce_toplink» Syndikation: Artikel drucken und verbreiten Die Links zur Syndikation aktivieren Die Links zur Syndikation per CSS gestalten Weitere nützliche Inhaltselemente Das Inhaltselement»Tabelle«: ce_table Der Eingabeassistent für das Inhaltselement»Tabelle« Importieren der Daten mit einer CSV-Datei Das HTML für das Inhaltselement»Tabelle« Das Inhaltselement»Tabelle«per CSS gestalten Das Inhaltselement»Akkordeon«:»ce_accordion« Seitenlayout vorbereiten und Artikel erstellen Das Eingabeformular für das Inhaltselement»Akkordeon« Zugeschaut und mitgebaut: Drei Akkordeons erstellen Das HTML für ein Akkordeon Das CSS zur Gestaltung eines Akkordeons Optional: Grafiken zur Statusanzeige Externe Videos auf Webseiten einbinden Inhaltselement»Text«: Ein Link in einer Mediabox Das Inhaltselement»HTML«:»ce_html« Weitere Inhaltselemente im Überblick Das Inhaltselement»Code«:»ce_code« Das Inhaltselement»Aufzählung«:»ce_list« Das Inhaltselement»Modul« Die»Include«-Elemente im Kurzüberblick

9 Inhalt 11 Kontakt: Formulare erstellen mit Contao Ein Kontaktformular für die Beispielsite erstellen Das Kontakformular gestalten Das HTML für das Kontaktformular Das CSS für das Kontaktformular Formularfelder: Die Feldtypen im Formulargenerator Formularfelder einfügen: Die Feldtypen im Überblick Überschrift und Erklärung für zusätzliche Informationen Formularfelder gruppieren:»fieldset«und»legend« Das Passwortfeld: Automatisch mit Bestätigungsfeld Das Select-Menü: Auswahllisten per Klick Das Radio-Button-Menü: Optionsfelder deluxe Das Checkbox-Menü: Kontrollkästchen deluxe »Datei-Upload«: Besucher können Dateien hochladen Die Sicherheitsfrage zur Spamvermeidung Sinnvolle Erweiterungen zur Arbeit mit Formularen Suchfunktion: Die Beispielsite durchsuchen Teil 1: Eine Suchseite erstellen Teil 2: Das Suchformular erstellen und einbinden Die Syntax der Suchfunktion im Überblick Die Erweiterung»Nachrichten« Übersicht: Die Zutaten für das Nachrichtensystem Das Backend-Modul»Nachrichten«: Beiträge erstellen »Newsarchiv«: Ein Nachrichtenarchiv erstellen Nachrichtenbeiträge schreiben Beiträge auf den Webseiten ausgeben Eine neue Seite zur Anzeige eines Beitrags (Einzelansicht) Das Modul»Nachrichten Teaser anzeigen [Nachrichtenarchiv]« Das Modul»Beitrag anzeigen [Nachrichtenleser]« Einbinden des Moduls»Nachrichten Teaser anzeigen« Einbinden des Moduls»Nachrichten Beitrag anzeigen«

10 Inhalt 13.4 HTML und CSS: Teaser und Beiträge gestalten Das HTML des Moduls»Nachrichten Teaser anzeigen« Das CSS für das Modul»Nachrichten Teaser anzeigen« Das HTML des Moduls»Nachrichten Beitrag anzeigen« Das CSS für das Modul»Nachrichten Beitrag anzeigen« Bilder zu Teasern und Beiträgen hinzufügen Einen Feed zum Abonnieren der Beiträge erstellen Die Kommentarfunktion Die Kommentarfunktion aktivieren Kommentare schreiben und überprüfen Kommentare und Fehlermeldungen gestalten Kommentare im Backend verwalten Navigation: Beiträge monatsweise auswählen Das Modul»Monat auswählen [Nachrichtenarchiv- Menü]« Das Modul»Nachrichten Monat auswählen«einbinden Das HTML des Moduls»Nachrichten Monat auswählen« Das CSS für das Modul»Nachrichten Monat auswählen« Übersicht: Nachrichten, Modultypen und Templates Die Modultypen und die Modultemplates»mod_news*.tpl« Die vier Subtemplates»news_*.tpl« Die Erweiterungen»Kalender«und»FAQ« Die Erweiterung»Kalender«: Termine verwalten Die Erweiterung»Kalender«in der Übersicht Einen Kalender gestalten Das HTML vom Frontend-Modul»Kalender« Das CSS zum Gestalten eines Kalenders HTML und CSS zur Gestaltung der Einzelansicht Häufig gestellte Fragen: Die FAQ-Erweiterung Die Kurzanleitung für die FAQ-Erweiterung Die FAQ-Erweiterung gestalten

11 Inhalt 15 Die Erweiterung»Newsletter« Das Backend-Modul»Newsletter« Einen Verteiler erstellen Abonennten verwalten: Die Empfänger des Newsletters Einen Newsletter erstellen Einen Newsletter versenden Newsletter im Frontend anzeigen Die Kurzanleitung zur Darstellung der Newsletter auf der Site Das HTML der Frontend-Module zur Newsletterdarstellung Newsletter im Frontend abonnieren und kündigen Die Kurzanleitung zum Abonnieren und Kündigen Das HTML der Frontend-Module»Abonnieren«und»Kündigen« Die Startseite gestalten Ein neues Layout für die Startseite Inhalt für die Hauptspalte: Newsbeiträge und Termine Die Frontend-Module erstellen Die Frontend-Module auf der Startseite einbinden Newsbeiträge und Termine gestalten Artikel mit Teaser auf der Startseite Sidebar erstellen: Lesetipps und Zufallsbild Lesetipps mit einem Quicklink-Modul Ein zufällig ausgewähltes Bild Die Sidebar gestalten Der Minikalender in der Sidebar Eine neue Seite mit dem Modul»Eventliste«erstellen Ein Modul für den Minikalender erstellen und einbinden Den Minikalender gestalten Newsletter abonnieren in der Sidebar

12 Inhalt TEIL V Systemverwaltung 17 Der Theme-Manager in Aktion Ein Theme bestimmt das Aussehen der Website Der Theme-Manager verwaltet bekannte Komponenten »Blaues Theme«von der Beispielsite exportieren All-in-one: Das Innenleben einer CTO-Datei Was nicht in einem Theme enthalten ist Das»Cover Theme«: Die Beispielsite im neuen Look Über die Anpassung von Themes Sonderfall: In Artikeln eingebundene Module Im Seitenlayout eingebundene Module sind unproblematisch In Artikeln eingebundene Frontend-Module sind Inhalt Was mit in Artikeln eingebundenen Modulen schiefgehen kann Reparatur: Anpassung von in Artikeln eingebundenen Modulen Sicherheitshinweise für Contao-Themes Das potenzielle Problem Vertrauenswürdige Quellen Ein Theme prüfen Angriff von innen Fazit: Themes sind klasse Die Optimierung für Suchmaschinen Lesbare Adressen: URLs umschreiben Content-Management-Systeme und URLs Die drei URL-Einstellungen von Contao Drei Voraussetzungen zum Umschreiben der URLs Contao im Unterordner: Die»RewriteBase«in der».htaccess« Die Rewrite-Regel zum URL-Umschreiben in der».htaccess« So wird s gemacht: URLs umschreiben in der Praxis Flache oder hierarchische URLs? Die Optimierung von Seiten Seitenname und Seitenalias im Backend von Contao

13 Inhalt Der Titel der Seite:»<title>... </title>« Die Beschreibung der Seite:»<meta name="description">« Abfangjäger: 404 und Statusmeldungen: Der Webserver schickt eine Nummer mit Seite nicht gefunden: Darf s vielleicht was anderes sein? Zugriff verweigert: Diese Seite gibt es, aber nicht für Sie Eine XML-Sitemap für Google & Co Mitglieder: Im Frontend angemeldete Besucher Mitglieder und Benutzer: Der Unterschied Mitgliedergruppen und Mitglieder einrichten Mitgliedergruppen einrichten Mitglieder einrichten Seiten und Module für die An- und Abmeldung erstellen Seiten zur An- und Abmeldung erstellen Die Module zur Anmeldung im Überblick Ein Modul für das Anmeldeformular:»[Login- Formular]« Ein Modul zur Abmeldung:»[Automatischer Logout]« Modul für den Link zur Anmeldeseite:»[Eigener HTML-Code]« Anmeldenamen und Abmeldelink:»[Eigener HTML- Code]« Die erstellten Module einbinden und gestalten Die Module zum An- und Abmelden in Artikeln einbinden Module für den Fußbereich im Seitenlayout einbinden An- und Abmeldung testen Das Anmeldeformular gestalten Einen geschützten Downloadbereich einrichten Weitere Möglichkeiten zur Mitgliederverwaltung Das Modul»Passwort vergessen« Das Modul»Persönliche Daten« Die automatische Registrierung für Mitglieder

14 Inhalt 20 Benutzer: Im Backend angemeldete Mitarbeiter Benutzerverwaltung: Die Übersicht Die Benutzergruppe»Redakteure Nachrichten« Die Benutzerin»Helen Lewis«einrichten Testen der Einstellungen: Ein Klick, und Sie sind Helen Lewis Die Benutzergruppe»Redakteure Artikel« Benutzergruppe»Redakteure Artikel«einrichten Benutzer zuweisen und testen Zugriffsrechte für Seiten und Artikel setzen Zugriffsrechte: Was mit Seite und Artikel gemacht werden darf Zugriffsrechte für die freigegebenen Seiten setzen Die Website im Alltag Das System-Log protokolliert Aktivitäten von Contao Webstatistiken mit Google Analytics Den Cache in Contao kontrollieren Der Cache-Modus in»system Einstellungen« Cache-Einstellungen: Die Cachezeit für die Seiten definieren Systemwartung: Daten bereinigen Systemwartung: Suchindex neu aufbauen Daten in den Benutzereinstellungen bereinigen Backups erstellen Der Live Update Service: Das automatische Update Das manuelle Update per FTP Contao für Fortgeschrittene: Tipps und Tricks Wichtige Konfigurationsdateien von Contao Die Systemkonfiguration: localconfig.php Data Container Arrays: Die»dcaconfig.php« Sprachkonfiguration: Die»langconfig.php« Tipps und Tricks zum TinyMCE Ein Stylesheet für den TinyMCE:»tl_files/tinymce.css« Textbausteine im TinyMCE: Inhalte aus Vorlage einfügen Die Symbolleisten des TinyMCE anpassen

15 Inhalt Konfiguration des TinyMCE pro Benutzergruppe anpassen Anfahrtskizze mit Google Maps Die Konfiguration des Frontend-Moduls Die Ermittlung der Koordinaten Layouts für Fortgeschrittene Eigene Layoutbereiche erstellen und aktivieren Eigene Seitentemplates erstellen Contao mit anderen CSS-Frameworks nutzen Mehrere Websites in einer Contao-Installation Ein Startpunkt für jede Website Mehrsprachige Website mit automatischer Sprachwahl Mehrere Domains in einer Contao-Installation Zusammenfassung: Mehrere Websites in mehreren Sprachen Die Insert-Tags im Überblick Insert-Tags für Link-Elemente Benutzereigenschaften: Insert-Tags für Frontend- Benutzer Umgebungsvariablen Include-Elemente Verschiedenes: Datum, und Sprachen Index

16 TEIL I Contao kennenlernen

17

18 In diesem Kapitel stelle ich Ihnen Contao kurz vor: Was sind die Gründe für ein CMS? Welche Highlights bietet Contao? Was sind die wichtigsten Ressourcen im Web? 1 Das ist Contao Contao. Klingt gut, ist einfach zu behalten und hat auch noch eine Bedeutung: con sind die ersten Buchstaben von Content. tạo kommt aus dem Vietnamesischen und bedeutet bilden, erzeugen, gestalten. Content erzeugen. Kein schlechter Name für ein Programm, mit dem Content erzeugt, gestaltet und verwaltet wird. 1.1 Contao ist ein Content-Management-System Content-Management-System (kurz CMS) ist der gängige Begriff für ein Programm zum Verwalten von Inhalten auf Websites. Ein CMS wie Contao ist eine Software, ein Werkzeug, ein Tool, mit dem man Websites erstellen und pflegen kann. Contao ist ein webbasiertes CMS, denn die Bedienung erfolgt über das Web und mithilfe eines Webbrowsers Brauchen Sie ein Content-Management-System? Webseiten wurden früher manuell erstellt, auf den Webspace kopiert und dort vom Webserver unverändert ausgeliefert. Manuell erstellte, statische Webseiten sind sehr aufwendig in der Erstellung und der Pflege und sind deshalb immer seltener anzutreffen. Wer Websites aber bisher manuell erstellt hat, muss für die Einarbeitung in ein CMS je nach Vorwissen mehr oder weniger Zeit einplanen und bei Workflow und Gewohnheiten in vielen Punkten völlig umdenken. Die Frage ist bei einem Projekt daher häufig, ob sich der Einsatz eines CMS überhaupt lohnt. Folgende Kriterien können bei dieser Entscheidung hilfreich sein: Regelmäßige Aktualisierung des Inhalts Wenn Texte und Grafiken regelmäßig von Personen geändert werden müssen, die selbst keine Webseiten bauen, lohnt sich ein CMS auch bei einer kleinen Site. 25

19 1 Das ist Contao Größe der Website Wo genau die Grenze zu»größer«liegt, ist schwer zu sagen, aber bei größeren Sites ohne CMS wird zum Beispiel eine nachträgliche Änderung an der Navigation sehr aufwendig. Bei mehr als ein paar einzelnen Seiten lohnt sich ein CMS meistens, auch wenn die Inhalte sich nicht oft ändern. Anzahl der Mitarbeiter Wenn bei der Inhaltspflege mehr als zwei bis drei Leute beteiligt sind, lohnt sich ein CMS, denn sonst kommt es beim Hochladen des Inhalts früher oder später zu Katastrophen. Idealerweise hat das CMS eine gute Benutzerverwaltung und eine detaillierte Rechteverwaltung, damit jeder nur das sieht, was er sehen soll. Ortsunabhängige Pflege des Inhalts Ein webbasiertes CMS läuft in der Regel auf dem Webspace und wird per Browser bedient. So lassen sich Inhalte unabhängig vom Aufenthaltsort pflegen. Einzige Voraussetzungen sind ein Internetanschluss und ein Browser. Diese Kriterien geben Ihnen einen ersten Anhaltspunkt, ob ein CMS sich lohnen könnte. Der Übergang von»nein«über»vielleicht«bis zu»ja, sicher«ist fließend, aber wenn mehrere Mitarbeiter an verschiedenen Orten die Inhalte einer eher großen Site aktualisieren sollen, ist die Lage ziemlich eindeutig. Für Semiprofis und Agenturen beschleunigt ein CMS schlicht und einfach die Erstellung von Prototypen, Klickmodellen und ganzen Sites Contao unterstützt Sie bei Inhalt, Gestaltung und Funktionen Contao ist ein schlankes, aber leistungsfähiges und einfach erweiterbares Content-Management-System, das relativ leicht zu lernen ist und sich für kleine, mittlere und auch ziemlich große Websites eignet. Bei der Erstellung und der anschließenden Verwaltung einer Website müssen Sie sich über drei Bereiche Gedanken machen: Inhalte, Gestaltung und Funktionen. Contao unterstützt Sie in allen drei Bereichen: Inhalt Content ist der Grund, warum Besucher auf eine Website kommen. Contao vereinfacht die Verwaltung der Inhalte mit einer übersichtlichen Baumstruktur, dem genialen Konzept der Inhaltselemente und nützlichen Erweiterungen, z. B. für Nachrichten oder Termine. Gestaltung Layout. Design. Das Aussehen einer Website. Contao unterstützt Sie beim Layouten mit einem integrierten CSS-Framework und dem Theme Manager, mit dem Sie fertige Layouts importieren können. 26

20 Die Website zum Programm: Funktionen sind die interaktiven Bestandteile einer Website: Suchfunktion, Kontaktformular, Kommentarfunktion und vieles mehr. Contao bietet zahlreiche vorgefertigte Module, die Sie nur noch konfigurieren und einbinden müssen. Contao ist also nicht nur ein hervorragendes Content-Management-System, sondern unterstützt Sie bei der Erstellung und Verwaltung der gesamten Website. Klingt gut? Ist gut. Los geht s. 1.2 Die Website zum Programm: Contao ist eine Erfindung des Programmierers Leo Feyer aus München und ein noch recht junges System. Abbildung 1.1» zentrale Anlaufstelle für Contao Die erste Version erschien vor wenigen Jahren, am 28. Februar 2006, unter dem Namen TYPOlight. Der Grund für die im Juni 2010 erfolgte Umbenennung waren zwei chronische Missverständnisse, die immer mehr zu einem Ärgernis wurden: TYPOlight war keine abgespeckte Version von TYPO3. Das light stand nicht für einen geringen Funktionsumfang. 27

21 1 Das ist Contao Unter dem neuen Namen Contao wächst und gedeiht das Projekt und gewinnt nicht zuletzt dank der guten Pflege des engagierten Core-Teams eine immer größere Fangemeinde. Erste Anlaufstelle für Contao im Web ist: Auf dieser mehrsprachigen Website können Sie alles rund um Contao Entdecken, Herunterladen, Verstehen, Erweitern und Nachfragen: 1.3 Ein paar Highlights von Contao In diesem Abschnitt möchte ich Ihnen zur Einführung ein paar Highlights von Contao zeigen, auch wenn diese nur einen unzureichenden Einblick in den Charme des Systems geben. Was Contao bei seiner stetig wachsenden Fangemeinde so beliebt macht, ist die Art und Weise, wie es Ihnen im Alltag bei der Erstellung und Pflege einer Website zur Hand geht, und das lässt sich nicht auf eine Liste besonderer Features reduzieren. Trotzdem folgen hier ein paar ausgewählte Highlights: Contao ist ein seitenbasiertes Content-Management-System. Anders als bei Blogsystemen wie WordPress, kategoriebasierten Systemen wie Joomla oder nodebasierten Programmen wie Drupal ist Contao ein seitenbasiertes CMS. Der Kern einer Contao-Installation ist eine hierarchisch aufgebaute Seitenstruktur. In diesem Seitenbaum können Sie Seiten mit wenigen Klicks verschieben, kopieren, bearbeiten, verstecken, mit einem Passwort schützen, zeitgesteuert veröffentlichen und vieles mehr. Komfortable Editierfunktionen Es macht richtiggehend Spaß, mit Contao Inhalte zu verwalten. Sie können Inhaltselemente, Artikel und Seiten via Zwischenablage kopieren und verschieben, mehrere Datensätze auf einmal bearbeiten (genial, wenn es man es einmal entdeckt hat) und ältere Versionen mit einem Klick wiederherstellen. Alles geht locker von der Hand. Auch nicht webaffine Redakteure können dank der leicht zu verstehenden Inhaltselemente gut aussehende Bildergalerien, Tabellen oder andere Inhaltstypen erstellen. Und zum Schreiben von Texten gibt es mit dem TinyMCE einen hervorragend integrierten WYSIWYG-Editor, dem man sogar Vorlagen für komplexe HTML-Strukturen mit auf den Weg geben kann. Barrierefrei in Front- und Backend Contao erzeugt nicht irgendwelche seltsamen unmotivierten HTML-Strukturen oder Layout-Tabellen und ermöglicht so die Erstellung einer barrierefreien 28

22 Ein paar Highlights von Contao 1.3 Website. Der Webdesigner hat mithilfe von Templates die volle Kontrolle über den erzeugten Quelltext und kann somit eine barrierefreie Website erstellen. Aber auch das Backend ist barrierefrei. Der geschickte Einsatz von Technologien wie Ajax sorgt im Backend für hohen Bedienkomfort, aber auch ohne JavaScript lässt sich das Backend problemlos bedienen. Schlanker Kern, viele Erweiterungen Wichtige Module wie Nachrichten, Kalender (jeweils mit RSS-Feeds) und Newsletter sind in den Kern von Contao integriert und stehen sofort nach der Installation zur Verfügung. Zusätzlich gibt es im zentralen Erweiterungskatalog Hunderte von Erweiterungen, die die Funktionalität des Kerns beliebig erweitern und sich komfortabel aus dem Backend heraus installieren lassen. Ein integriertes CSS-Framework oder doch lieber eigene Styles? Contao hat ein gut durchdachtes, integriertes CSS-Framework, mit dem Sie sehr einfach statische oder flexible mehrspaltige Seitenlayouts erstellen können. Sie können aber auch mit komplett eigenen Styles oder anderen CSS-Frameworks arbeiten. Mit Themes blitzschnell das Aussehen ändern Ein Theme bestimmt das Aussehen einer Website und kann mit wenigen Klicks verändert werden. Der Theme-Installer von Contao perfektioniert die Trennung von Inhalt und Gestaltung. Ohne dass Sie den Inhalt verändern, bekommt eine Website im Nu ein neues Kleid. Detaillierte Rechte- und Benutzerverwaltung Für Websites, an denen mehrere Personen arbeiten, wird die umfangreiche Benutzerverwaltung von Contao wichtig. Geschützte Bereiche mit Kunden- Login sind ebenso leicht zu realisieren wie ein schlankes Backend für Redakteure. Jeder sieht nur das, was er sehen soll, bis hinunter zu einzelnen Formularfeldern in Eingabemasken. Einfaches Live Update Nach der Site ist vor der Site. Um aktuelle Installationen auf dem Laufenden zu halten, kann Contao entweder manuell oder über ein bequemes Live Update aktualisiert werden. Dieser Service ist zwar nicht kostenlos, aber so günstig, dass er sich wirklich für fast alle Sites lohnt. Mehrsprachigkeit und Multi-Domain Man kann mit einer Contao-Installation sowohl mehrere Websites betreiben als auch eine Website in mehreren Sprachen. Oder mehrere Websites in mehreren Sprachen. 29

23 Index $this->framework 186, 188 $this->head 188 $this->stylesheets 188.htaccess 85, 89, 440, 441, 443 RewriteBase 441 <!--indexer::stop--> 150 <meta name= 449, 450, 451 A Ablage leeren 133 Admin-Passwort vergessen 386 Apache Webserver Arbeitsbereich (Backend) 104 Artikel als PDF speichern 261 Artikel-Einstellungen 143, 261 auf Facebook empfehlen 261 auf Twitter empfehlen 261 ausdrucken 261 im Seitenlayout einbinden 146 in Online-Demo 42 B Backend Arbeitsbereich 104 Aufbau 34, 102 Backend-Module deaktivieren 371 Benutzereinstellungen 102 Benutzerpasswort ändern 102 Benutzerverwaltung 459, 479 Dateiverwaltung 108 in Online-Demo 33 Infobereich 102 Navigationsbereich 103 Persönliche Daten ändern 102 Seitenstruktur 35, 117, 123, 195 Systemeinstellungen 105 Task-Center 480 Tastenkürzel 104 Vorschaubilder ausstellen 111 Backend-Module 103, 128 Backups erstellen 501 Bearbeitung mehrerer Datensätze 169, 198, 365, 427, 446, 449, 468, 493 Benutzer 479 Begrüßungsmail 489 Benutzer einrichten 485 in Online-Demo 46 Rechtevererbung 486 und Zugriffsrechte 491 Unterschied zu Mitgliedern 459 Benutzerfunktionen Daten bereinigen 501 Rückgängig 36 Benutzergruppe Ausgenommene Felder 484 erlaubte Module freigeben 480 Page- und Filemounts 481 Rechte für Erweiterungen 483 Zugriffsrechte setzen 491 Benutzerrechte vs. Gruppenrechte 487 Bild-Einstellungen 250 An Rahmen anpassen 250 Exaktes Format 250 Proportional 250 Bilder Bild-Einstellungen 250 Maximale Frontend-Breite 252 Bildergalerie Bildunterschriften 256 erstellen 252 HTML-Struktur 255 Blog 336, 370 C Cache Browser-Cache löschen 497 Cache-Modus wählen 497 Cachezeit festlegen 498 Daten bereinigen 499 CAPTCHA 314 chmod 97, 98 chown 97 CMS 25 Funktionsweise 52 und URLs

24 Index Contao Backups erstellen 501 Bedeutung des Namens 25 CSS-Framework 184 Dateiverwaltung 108 Downloadseite 71 Erweiterungen installieren 112 Erweiterungsliste 112 geeigneter Webspace 83 Insert-Tags (Übersicht) 523 Live Update 503 manuelles Update 504 Mehrere Websites 520 offline installieren 72 online installieren 82 Suchfunktion erstellen 317 Systemdiagnosetool 83 Systemvoraussetzungen 71 Überblick Funktionsweise 47, 153, 193 und CSS (Fazit) 183 Content-Management-System CMS CSS absolute Positionierung 221 Dopplung von div 186 horizontal Dropdown 209 horizontal zweite Ebene 207 horizontale Navigation 206 overflow:hidden 191, 252 overflow-y 137 relative Positionierung 221 Reset-Stylesheets 167 Style-Block im 188 und Contao (Fazit) 183 vertikale Navigation 174, 201 CSS Stylesheets CSS-Framework 155, 184 CSS-Klassen Events 377, 380 CSS-Klassen FAQ 386 CSS-Klassen Formulare 304 CSS-Klassen Framework block 190, 207, 252 clear 191 inside 190 invisible 191 CSS-Klassen Inhaltselemente ce_comments 360 ce_image 249 ce_table 270 ce_text 233 CSS-Klassen Inhaltselemente (Forts.) ce_toplink 259 image_container 246 CSS-Klassen Kalender 377, 380 CSS-Klassen Module mod_article 233 mod_articlenav 229 mod_booknav 228 mod_breadcrumb 228 mod_customnav 217 mod_eventreader 383 mod_lostpasswort 476 mod_navigation 149 mod_personaldata 477 mod_quicklink 226 mod_quicknav 227 mod_sitemap 224 Navigationsmenü 201 submenu 201 trail 201 CSS-Klassen Nachrichten 368, 369 CSS-Klassen Newsletter 396 CSS-Klassen Sonstige external (für Links) 243 float_left 246 pagination 343 pdf_link 262 seitenanfang 235 CSV-Datei importieren 267 D Dateiberechtigungen 97 Dateimanager Dateiverwaltung Dateiverwaltung 108 Dateien hochladen 110 Ordner erstellen 109 Datenbank erstellen 68, 73, 86 exportieren (SQL-Dump) 94 importieren (SQL-Dump) 95 Kollation 78 Tabellen anlegen 78 dcaconfig.php 355, 502, 508, 514 DocumentRoot 62 Double Opt-In

25 Index E Entwicklungsumgebung XAMPP Erweiterungen [BackupDB] 112, 501 [changelanguage] 522 [clearlog] 496 [conditionalselectmenu] 316 [csseditor] 171 [dlh_googlemaps] 516 [dlstats] 475 [easy_themes] 436 [efg] 316 [fastedit] 262 [FavIcon] 438 [folderurl] 445 [helpmessage] 316 [PiwikTrackingTag] 497 [pluginmp3] 284 [TwitterReader] 418 FAQ 384 Formulargenerator 289 Kalender 371 Nachrichten 335 Newsletter 389 zur Mitgliederverwaltung 477 Erweiterungen auf contao.org 112 Erweiterungen installieren 112 Events Kalender Extension Repository Erweiterungen auf contao.org F Facebook 261 FancyUpload 111 FAQ 384 FavIcon einbinden 438 fe_page.tpl 148, 184, 519 Feed für Nachrichten 356 Fehlermeldungen 403 Forbidden Not found 453 No layout specified 124 No pages found 117, 120 Parse error 92 Filemount 481 Firefox Browser-Cache löschen 497 Sprache einstellen 120 Tastenkürzel ändern 105 Formatdefinitionen Styles Formulare Abhängiges Select-Menü 316 Anmeldeformular gestalten 470 im Contao-Forum 316 Quicktipps 316 Formularfelder Checkbox-Menü 309, 312 Datei-Upload 313 Erklärung 305 Fieldset 306 Passwortfeld 306 Radio-Button-Menü 309 Select-Menü 307 Sicherheitsabfrage 314 Überschrift 305 Übersicht 304 Formulargenerator 289 Frontend 32 HTML-Grundgerüst 127, 184 Online-Demo 32 Frontend-Modul Module Frontend-Module Module Frontend-Template 80, 147 Frontend-Vorschau 127, 348, 470 FTP-Modus 87 Funktionen Feed abonnieren 356 Kommentarfunktion 358 Kontaktformular 289 Suchfunktion 317 G Google Google Analytics 496 Google Maps 515 Google-Konto 456, 496, 517 Maps API-Key 517 Webmaster-Tools 456 Grids (Layoutraster) 184 Gruppenrechte

26 Index H Hard Limit 199 haslayout 192 htdocs 62 HTML div-struktur 127, 184 embed 283 h1 oder h2 237 iframe 283 meta-elemente 450 title 447 HTTP Request und Response 451 Status Codes 452 I Inaktive Backend-Module 371 Infobereich (Backend) 102 Inhaltselemente Akkordeon 272 Artikel 287 Artikel-Teaser 287 Aufzählung 286 Bild 247 Code 284 Download 288, 473 Downloads 288, 473 Formular 288, 298 Galerie 252 HTML 282 Hyperlink 261 in Online-Demo 43 Inhaltselement 287 Kommentar 287 Modul 287 Tabelle 265 Text 144, 237, 280 Top-Link 258 Überschrift 234 initconfig.php 502 Insert-Tags (Übersicht) 523 Installation.htaccess fehlt 85 Admin-Konto anlegen 80 Datenbanktabellen anlegen 78 Datenbankverbindung prüfen 77 FTP-Zugangsdaten eingeben 89 Installation (Forts.) Live Update 503 manuelles Update 504 Offline 72 Offline SMH umgehen 91 Online 82 Passwort für Installtool 74 Potenzielle Probleme 74, 87, 92, 93 Systemdiagnosetool 83 Systemvoraussetzungen 71 Überblick Online-Installation 86 Umzug auf Online-Webspace 94 Verschlüsselungschlüssel 76 Installtool FTP-Zugangsdaten eingeben 89 Passwort ändern 74 Passwort vergessen 507 schützen 75 K Kalender 371 Kategorien (Backend) 169 Kollation 78 Kommentare 287, 358 Kontaktformular erstellen 289 L langconfig.php 502, 509 Layoutbereiche eigene erstellen 518 Übersicht 128 Lightbox 245 localconfig.php 502, 507 M Mediabox 245 Mehrere bearbeiten 169, 198, 365, 427, 446, 449, 468, 493 Mehrsprachige Website 521 meta.txt 256 Metanavigation 215 Mitglieder 459 An- und Abmeldung 468 Mitgliederregistrierung 477 Passwort vergessen 475 Persönliche Daten ändern

27 Index Mitglieder (Forts.) Unterschied zu Benutzern 459 Mitglieder einrichten 461 Mitgliedergruppen 461 Mitgliederverwaltung 475 mod_cache 442 mod_rewrite 440 Module 37 Artikelnavigation 195, 229 Automatischer Logout 465 Buchnavigation 195, 228 Definition 128 Eigener HTML-Code 132, 465 für Kopf- und Fußbereich 132 Individuelle Navigation 195, 215 Login-Formular 464 Navigationsmenü 38, 194, 199, 212 Navigationsmodule 194 Navigationspfad 195, 227 Passwort vergessen 475 Persönliche Daten 477 Quicklink 195 Quicknavigation 195 Sitemap 195 Modultemplates 148 MooTools moo_accordion 273 moo_accordion_active 279 moo_analytics 496 moo_mediabox 126 MP3 einbinden 284 Multi-Domain 522 Music Academy Dateien entfernen 81 Online-Demo 31 MySQL 66 Datenbank erstellen 68 Datenbanken in Ordnern 66 Passwort für root 58 und phpmyadmin 68 und SQL 67 N Nachrichten 335 Anzahl Beiträge pro Seite 343 Archiv erstellen 337 Beitrag erstellen 338 Beitrag in Einzelansicht 341 Nachrichten (Forts.) Meta-Info unterm Beitrag 353 Teaser anzeigen 343 Übersicht 336 Navigation basiert auf Seitenstruktur 35 Breadcrumb 227 Buchnavigation 228 Dropdown mit MooTools 211 horizontal und vertikal 211 horizontal zwei Ebenen 203 Metanavigation 215 Navigationspfad 227 Sitemap 221 vertikal zwei Ebenen 197 Navigationsbereich (Backend) 103 Newsletter 389 abonnieren 398 Double-Opt-In 398 Frontend-Module 396, 399 im Frontend anzeigen 395 kündigen 398 newsletter.css 397 O Online-Demo Artikel 42 Backend 33 Inhaltselemente 43 Module 37 Rechtesystem im Backend 46 Seitenlayout 38 Seitenstruktur 35 Stylesheets 41 Themes 36 P Pagemount 481 Paginierung 343 Passwort vergessen für Admin-Konto 386 für Installtool 507 für Mitglieder 475 PDF 261 PHP 63 als CGI 64 als Modul

28 Index phpinfo() 65 phpmyadmin 68 aufrufen/starten 68, 69 Datenbank erstellen 68, 73, 86 Piwik 497 R RewriteBase 441 RewriteRule 442 Rich Text Editor (RTE) TinyMCE RSS-Feed 356 S Safe Mode Hack (SMH) 87, 89, 99 Safe Mode Hack FTP-Modus Seitenalias 445 Seitenlayouts in Online-Demo 38 neu erstellen 126 tinymce.css ignorieren 511 und CSS-Framework 188 zweispaltig 402 Seitenname 445 Seitenstruktur 117 Beispielsite erweitern 122, 195 Cachezeit festlegen 498 drei Klick-Tipps 123 im Menü verstecken 198 in Online-Demo 35 und Navigation 35 Seitentemplates 148, 519 SEO 437 Google Sitemap 456 Seitentitel definieren 447 URLs umschreiben 438 Website-Boosting 437 Servicenavigation Metanavigation Sicherheit 777 ist keine gute Idee 99 Hinweise zu Themes 434 Installtool schützen 75 Spamschutz 314 XAMPP Sicherheitscheck 57 Sitemap 456 Slimbox 245 Sortierbare Tabelle 271 Spamschutz 314 Sprachen-Fallback 119 SQL 67 Startlevel 199 Startpunkt einer Website 118 Statische Webseiten 51 Stoplevel 199 Styles 135 Stylesheets 155 basic.css (Reset) 162 Conditional Comments 135 Das CSS-Framework 155, 184 im Backend bearbeiten 135 im Seitenlayout einbinden 137 in Online-Demo 41 Integration in Seitenlayouts 519 intern und extern 182 intern vs. extern 156 Internes Stylesheet erstellen 134 newsletter.css 397 system/contao.css 190 system/iefixes.css 191 tinymce.css 510, 511 und Contao (Fazit) 183 Stylesheets, extern im Seitenlayout einbinden 180 Integration in Seitenlayouts 181 Möglichkeiten Bearbeitung 177, 179 Vorgehensweise 177 zusammen mit intern 182 Stylesheets, intern [csseditor] und Firebug 173 CSS importieren 162 CSS-Dateien bereinigen 499 Einschränkungen 159, 165, 173 Erweiterung [csseditor] 171 extern bearbeiten 173 Funktion Filtern 169 Funktion Suchen 168 im Backend bearbeiten 156 Integration in Seitenlayouts 161 Styles ausblenden 176 Tipps zum CSS-Editor 160, 167 zusammen mit extern 182 Subtemplates 148 Suchfunktion 317 Suchindex neu aufbauen 500 Suchmaschinenoptimierung SEO Suchsyntax 334 Syndikation

29 Index SyntaxHighlighter 284 Systemcheck Systemdiagnosetool Systemdiagnosetool 83, 100 Systemeinstellungen 105 Anmeldedauer 108 Cache-Modus 497 Dateien hochladen 111 Datums- und Zeitformat 107 Inaktive Backend-Module 371 Maximale Frontend-Breite 252 Speicherzeiten 108 Titel der Webseite 106 Verschlüsselungsschlüssel 76 Zugriffsrechte (Standard) 492 System-Log 495 System-Log löschen 496 Systemvoraussetzungen 71 Systemwartung Daten bereinigen 499, 501 Suchindex neu aufbauen 500 T Task-Center 480 Teaser bei Nachrichten mit TinyMCE 355 Bilder hinzufügen 353 für Artikel 408 für Nachrichten 343, 345, 348, 350 Meta-Info unterhalb 353 Templates Definitionen 147 moo_accordion_active 279 nav_default.tpl 149, 152, 217 Text ein- und ausblenden 272 Textbausteine erstellen 511 Theme-Manager 421 Themes 421 [easy_themes] 436 aktivieren in Seitenlayouts 427 anpassen 428 cto-datei 423 Das Cover-Theme 425 enthaltene Komponenten 421 exportieren 422 Fehler nach Importieren 428 importieren 426 In Artikeln eingebundene Module 430 in Online-Demo 36 Themes (Forts.) neu erstellen 124 nicht enthalten 424 Sicherheitshinweise 434 Symbole zur Bearbeitung 125 und mehrere Websites 436, 522 TinyMCE 238 CSS-Klassen anzeigen 510 für Nachrichtenteaser 355 HTML-Elemente markieren 239 Hyperlinks erstellen 240 im Überblick 238 in dcaconfig.php 355, 514 Symbolleisten anpassen 512 Textbausteine 511 Textgröße Editorfenster 511 tiny_templates 511 Vorlagen (Templates) 511 tinymce.css 510, 511 tinymce.php 513 Twitter 261, 418 U URLs umschreiben 438 URL-Suffix 445 V Videos einbinden 280 W Webseite vs. Website 107 Webserver 62 Antwortnummern 451 DocumentRoot 62 error.log 63 Fehler Nicht Gefunden 452 htdocs 62 mod_rewrite 440 startet nicht 56 Statuscodes 451 testen 56 und PHP 64 Website-Boosting 437 Website-Template Frontend-Template Webspace erkunden mit phpinfo()

30 Index Webspace (Forts.) prüfen 83 WYSIWYG-Editor TinyMCE X XAMPP 51 Control Panel 54 Installation 53 ist Offline-Webspace 51 Sicherheit testen 60 Sicherheitscheck 57 Übersicht 69 Umzug auf Online-Webspace 94 Verzeichnis schützen 60 Webserver testen 56 XML Feed-Datei 356 XML (Forts.) XML-Dateien bereinigen 499 XML-Sitemap (Google) 456 Y YAML 184, 519 Z Zugriffsrechte für Seiten und Artikel 491 in Systemeinstellungen 492 Linux 97 Übersicht anzeigen lassen 493 Unterschied zu Zugriffsschutz 491 Zugriffsschutz 471, 491 für Downloads