Websites erstellen mit Contao

Transkript

1 Peter Müller Websites erstellen mit Contao Galileo Press

2 Auf einen Blick TEIL I Contao kennenlernen 1 Das ist Contao 25 2 Schnelldurchlauf: So funktioniert Contao 31 TEIL II Contao installieren 3 XAMPP: Der Offline-Webspace 51 4 Die Installation von Contao 71 5 Ein kurzer Rundgang im Backend 101 TEIL IM Schritt für Schritt zur ersten Website 6 Die erste Website mit Contao Webseiten gestalten: Contao und CSS Navigationen erstellen in Contao 193 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 401 TEILV 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 507

3 Geleitwort des Fachgutachters 19 Vorwort 21 TEIL I Contao kennenlernen Das ist 1.1 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:» 2.1 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 47 TEIL II Contao installieren 3.1 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 54

4 3.2.2 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 69 4 Die Installation von Contao 4.1 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 98

5 4.8.3 Was der Safe Mode Hack genau macht Sicherheitsloch:»Alles auf 777«ist keine gute Idee Ü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 112 TEIL III Schritt für Schritt zur ersten Website 6.1»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 135

6 6.5.2 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 ges alten: 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 174

7 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 Styiesheets 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« Ü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.1 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 Hyperlinkserstellen im Editor TinyMCE 240

8 9.3.4 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 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«:»cejitml« Weitere Inhaltselemente im Überblick Das Inhaltselement»Code«:»ce_code« Das Inhaltselement»Aufzählung«:»cejist« Das Inhaltselement»Modul« Die»Include«-Elemente im Kurzüberblick

9 11 KontakÄiöiirii älllliiä 11.1 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 Teil 1: Eine Suchseite erstellen Teil 2: Das Suchformular erstellen und einbinden Die Syntax der Suchfunktion im Überblick Ü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«346 11

10 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 15.1 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« 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 416

12 TEILV System Verwaltung 17.1 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 436 llygjl^jij iji^l^ij^^ia yjmigj iy^^ 18.1 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 445

13 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 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 20.1 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 492 mmmmsmsmm 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 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 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 527 Index