Contao kennenlernen und installieren

Transkript

1

2 Inhalt Geleitwort zur dritten Auflage von Thomas Weitzel Geleitwort zur ersten Auflage von Leo Feyer Vorwort zur dritten Auflage TEIL I Contao kennenlernen und installieren 1 Das ist Contao Contao ist ein Content-Management-System Brauchen Sie überhaupt ein Content-Management-System? Ein CMS auf dem eigenen Webspace erfordert Know-how Contao unterstützt Sie bei Inhalt, Gestaltung und Funktionen Die Website zum Programm:»contao.org« Ein paar Highlights von Contao Klassiker: Was an Contao schon immer Klasse war Und das ist neu: Highlights in Contao Die Community im Web:»contao-community.de« Tipps zur Benutzung des Forums Fragen zum Buch bitte auch im Forum stellen 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

3 2.10 Das Backend ist für Redakteure sehr übersichtlich Zusammenfassung so tickt Contao Der Offline-Webspace: XAMPP und MAMP Der Webspace auf Ihrem Rechner Statische Webseiten: der Webspace als Lagerhalle Content-Management-System: der Webspace als Werkstatt Windows: Offline-Webspace mit XAMPP XAMPP für Windows installieren Das XAMPP Control Panel Testen, ob der Webserver funktioniert Der Sicherheitscheck von XAMPP OS X: Offline-Webspace mit MAMP MAMP installieren Das Programmfenster von MAMP Testen, ob der Webserver funktioniert Der Webserver: Apache serviert Webseiten Der Apache ist ein Webserver »Document Root«: der Ordner für die Webseiten PHP: Programmiersprache und Interpreter PHP ist auf php.net zu Hause PHP: als Modul oder als CGI? MySQL serviert SQL-Datenbanken Eine relationale Datenbank besteht aus Tabellen SQL ist eine Sprache zur Verwaltung von Datenbanken phpmyadmin verwaltet die Datenbanken von MySQL phpmyadmin starten Eine Datenbank anlegen mit phpmyadmin Die Installation von Contao Vorbereitung Die Systemvoraussetzungen Die richtige Contao-Version für dieses Buch

4 4.2 Offline: Contao auf Ihrem Rechner installieren Die Demo»Music Academy«offline installieren Online: Contao im Web installieren Informationen über Webhoster im Forum Den Contao-Check installieren Der Contao-Check: Voraussetzungen prüfen Installation, Teil 1 Dateien auf den Webspace kopieren Installation, Teil 2 Zugangsdaten für die Datenbank Installation, Teil 3 das Installtool im Überblick »Safe Mode Hack«: der FTP-Modus von Contao SMH:»Sie müssen den Safe Mode Hack auf diesem Server verwenden« Eine Alternative zum SMH: PHP als CGI oder Fast-CGI Online: So richten Sie den Safe Mode Hack ein Hilfe bei sonstigen Installationsproblemen Umzug: von XAMPP und MAMP auf den Online-Webspace Know-how: Dateiberechtigungen das 1 1 zu Besitzer, Benutzer und Berechtigungen: 644 und PHP und Contao: Benutzerrechte, Modul und (Fast)CGI Was der Safe Mode Hack genau macht Sicherheitsloch:»Alles auf 777«ist keine gute Idee TEIL II Die erste Website mit Contao 5 Ein kurzer Rundgang im Backend Überblick: das Backend Ganz oben im Backend: der Infobereich Links: der Navigationsbereich (Backend-Module) Rechts: der Arbeitsbereich Das Backend-Modul»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

5 5.3.3»Synchronisieren«: Abgleich zwischen Datenbank und Ordner»files« Template-Ordner erstellen im Backend-Modul»Templates« Der Erweiterungskatalog: Erweiterungen installieren Die Erweiterungsliste auf»contao.org« Eine Erweiterung aus dem Backend heraus installieren Die erste Website mit Contao »No root page found«die Seitenstruktur erstellen Der Startpunkt für eine neue Website Der Sprachen-Fallback für den Startpunkt ist wichtig Die Startseite für die Beispielsite erstellen Die Seitenstruktur für die Beispielsite erweitern »No layout specified«theme und Seitenlayout erstellen Das erste Theme erstellen Das erste Seitenlayout erstellen und zuweisen Frontend-Module für den Kopf- und den Fußbereich Frontend-Module für den Kopf- und den Fußbereich erstellen Die Module für den Kopf- und den Fußbereich im Seitenlayout einbinden Der erste Artikel und zwei Inhaltselemente 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 Inhalt für die anderen Seiten erstellen mit»mehrere bearbeiten« Ein Frontend-Modul für die Navigation:»Nav Main« Ein Navigationsmodul erstellen Das Navigationsmodul im Seitenlayout einbinden Die Seite»News«erstellen Ein kurzer Blick in den Quelltext Der Style-Block im <head> Die Layoutbereiche aus dem Seitenlayout im <body

6 6.7 Templates erstellen das HTML für den Quelltext In Contao gibt es viele 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.html5« Das Contao-Prinzip: altogether now Contao und CSS: Webseiten gestalten Übersicht: Contao und CSS Gestatten: das CSS-Framework von Contao Interne oder externe Stylesheets So funktionieren interne Stylesheets Der CSS-Editor von Contao:»Themes Stylesheets« Die Gruppe»Selektor und Kategorie« Breite und Höhe: die Gruppe»Abmessungen« Elemente positionieren: die Gruppe»Position« Box-Modell, Teil 1 die Gruppe»Abstand und Ausrichtung« Box-Modell, Teil 2 die Gruppe»Hintergrund« Box-Modell, Teil 3 die Gruppe»Rahmen« Text gestalten: die Gruppe»Schrift« Die Gruppen Aufzählung und»eigener Code« Das erste Stylesheet Das erste Stylesheet erstellen:»layout Themes Stylesheets« Styles für»html«und»body«erstellen Effektive Bedienung: Tasten und Maus in Kombination Einen Style für»#wrapper«erstellen Die Symbole zur Bearbeitung von Styles im Überblick Das Stylesheet mit dem Seitenlayout verbinden Der integrierte CSS-Reset Grundlegende Gestaltung für die Beispielsite Google Web Fonts: die Schriftart»Droid Sans«einbinden Den Kopfbereich gestalten Den Fußbereich gestalten Den Inhaltsbereich gestalten Übung: die Navigation mit einem internen Stylesheet gestalten Die Beispielsite ist schon ein bisschen»responsive«

7 7.5 Tipps zur Arbeit mit internen Stylesheets »Filtern«: nur Styles einer bestimmten Kategorie anzeigen »Suchen«: bestimmte Kommentare oder Selektoren suchen »Versionierung«: Versionen vergleichen und wiederherstellen Variablen in Themes und Stylesheets Arbeiten mit externen Stylesheets Externe Stylesheets speichern und im Seitenlayout einbinden Teamwork: interne und externe Stylesheets zusammen Das CSS-Framework von Contao Das CSS-Framework von Contao im Überblick CSS-Editor und CSS-Framework sind nicht dasselbe Die Komponenten des CSS-Frameworks XHTML, HTML5 und Contao Von HTML über XHTML zu HTML Neuerungen in HTML5: vereinfachte Schreibweise und neue Elemente In Contao haben Sie die Wahl zwischen XHTML oder HTML HTML5 oder XHTML: Ausgabeformat im Seitenlayout definieren Alle Templates gibt es als HTML5 und als XHTML Die HTML-Struktur: das Seitentemplate»fe_page« Das HTML-Grundgerüst von Contao Der <head>-bereich der»fe_page« Der Style-Block von»$this->framework« Stylesheets einbinden:»$this->stylesheets« »fe_page.html5«enthält neue HTML5-Strukturelemente »html5shim«HTML5 für Internet Explorer 7 und 8 via JavaScript Der Kern des CSS-Frameworks:»layout.css« Teil 1 ein paar allgemeine Styles Teil 2»Holy Grail«: Weblayouts und der heilige Gral Teil 3 Media Query auf kleinen Bildschirmen kein»holy Grail« Teil 4 flexible Bilder und Videos mit»max-width:100%« Teil 5 die Bildergalerien von Contao formatieren Teil 6 nützliche Klassen und zusätzliche Layoutbereiche

8 8.5 Der CSS-Reset von Contao im Detail Teil 1 der Reset Teil 2 grundlegende Formatierung Teil 3 grundlegende Schriftformatierung Teil 4 Abstände Das»Responsive Grid«von Contao Was ist überhaupt»responsive«? Und was bitte ist ein»grid«? Responsive Grid, Teil 1 das Fundament für das Grid Responsive Grid, Teil 2 das Grid wird ein Grid Responsive Grid, Teil 3 das Grid wird responsive Contao und CSS Eine kurze Geschichte von CSS Wofür man CSS3 heute schon nutzen kann Die Browser-Präfixe:»-moz-«,»-webkit-«,»-o-«und»-ms-« Interne Stylesheets und CSS Fallback ältere IEs mit»css3 Pie« Navigationen erstellen in Contao So funktioniert Contao: Seiten, Module und Artikel Die Navigationsmodule von Contao im Überblick Die Seitenstruktur der Beispielsite erweitern Eine vertikale Navigation mit zwei Ebenen Eine horizontale Dropdown-Navigation Horizontale und vertikale Navigation zusammen Meta-Navigation: eine»individuelle Navigation« Sitemap: das Inhaltsverzeichnis der Website Weitere Navigationsmodule im Überblick Quicknavigation und Quicklink Navigationspfad: die Breadcrumb-Navigation»Sie sind hier« Buchnavigation: von einer Seite zur nächsten und zurück

9 10 Inhaltselemente für Texte und Bilder Artikel und Inhaltselemente im HTML-Quelltext Das Inhaltselement»Überschrift«:»ce_headline« Die Überschrift ändern:»die Abenteuer des Lorem Ipsum« Die Überschrift gestalten Das Inhaltselement»Text«:»ce_text« Die Eingabemaske des Inhaltselements»Text« Der Editor TinyMCE im Überblick Hyperlinks erstellen im Editor TinyMCE Das Inhaltselement»Text«mit einem Bild erweitern Fotos auf den Webspace hochladen Im Seitenlayout:»MooTools«laden und»mediabox«aktivieren Ein Bild zum Inhaltselement»Text«hinzufügen Das HTML für das eingefügte Bild Eingefügte Bilder per CSS gestalten 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 Praktisch: die Reihenfolge der Bilder per Drag & Drop festlegen Das HTML für die Bildergalerie »Meta-Informationen«: die Beschriftung für die Fotos eingeben Zauberhaft: Dateien in der Dateiverwaltung nachträglich umbenennen Das Inhaltselement»Top-Link«:»ce_toplink« Das Inhaltselement»Top-Link«einfügen Das Inhaltselement»Top-Link«gestalten Optional:»Top-Link«als Modul im Seitenlayout einbinden Syndikation: Drucken, PDF, Facebook, Twitter und G Die Links zur Syndikation aktivieren Die Links zur Syndikation per CSS gestalten

10 11 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 Akkordeons mit Grafiken zur Statusanzeige Wie man Akkordeons sonst noch einsetzen kann Externe Videos auf Webseiten einbinden Video einbinden mit dem Inhaltselement»HTML«:»ce_html« Video einbinden mit einem Link im Inhaltselement»Text« Das Inhaltselement»Video/Audio« Weitere Inhaltselemente im Überblick Das Inhaltselement»Code«:»ce_code« Die»Include«-Elemente im Kurzüberblick TEIL III Formulare, Erweiterungen und mobile Version 12 Kontakt: der Formulargenerator von Contao Ein Kontaktformular für die Beispielsite erstellen Das Kontaktformular gestalten Das HTML für das Kontaktformular Das CSS für das Kontaktformular Formulardaten auf der Seite»Vielen Dank«ausgeben 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

11 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 Suchfunktion: die Beispielsite durchsuchen Die Suchfunktion im Überblick Teil 1 die Seite»Suchen«erstellen Teil 2 ein einfaches Suchformular im Kopfbereich Alternative zu Teil 2 ein flexibleres Suchformular Die Syntax der Suchfunktion im Überblick Bloggen: die Erweiterung»Nachrichten« Übersicht: die Zutaten für das Nachrichtensystem Das»Newsarchiv«: Beiträge erstellen Das»Newsarchiv«: ein Nachrichtenarchiv erstellen Nachrichtenbeiträge und Teaser erstellen Inhaltselemente für die Newsbeiträge erstellen Teaser und Beiträge im Frontend ausgeben Das Frontend-Modul»News Beitrag anzeigen [Nachrichtenleser]«erstellen Das Frontend-Modul»News Teaser anzeigen [Nachrichtenarchiv]«erstellen Das Frontend-Modul»News Teaser anzeigen«einbinden Die URL eines Nachrichtenbeitrags Optional: Template anpassen den Link» Zurück«optimieren HTML und CSS: Teaser und Beiträge gestalten Das HTML des Moduls»News Teaser anzeigen« Das CSS zur Gestaltung der Teaserübersicht Das HTML des Moduls»News Beitrag anzeigen« Das CSS zur Gestaltung der einzelnen Beiträge

12 14.5 Bilder zu Teasern und Beiträgen hinzufügen Bilder zum Teaser hinzufügen Bilder zum Beitrag in der Einzelansicht hinzufügen RSS-Feeds zum Abonnieren der Beiträge erstellen Interaktion mit Besuchern: die Kommentarfunktion Die Kommentarfunktion aktivieren Kommentare schreiben und überprüfen Die Kommentare gestalten Kommentare im Backend verwalten Navigation: Beiträge monatsweise auswählen Das Frontend-Modul»Monat auswählen [Nachrichtenarchiv-Menü]«erstellen Das Frontend-Modul»News Monat auswählen«einbinden Das HTML des Frontend-Moduls»News Monat auswählen« Das CSS für das Modul»News Monat auswählen« Benutzerfreundlich: ein Link, um alle Beiträge anzuzeigen Know-how: Nachrichten, Modultypen und Templates Die Modultypen und die Modultemplates»mod_news*« Die vier Subtemplates»news_*« Die Erweiterungen»Events«und»FAQ« Terminverwaltung: die Erweiterung»Events« Einen Veranstaltungskalender erstellen Der noch ungestaltete Kalender im Überblick HTML und CSS: den Kalender gestalten Das HTML vom Frontend-Modul»Kalender« Das CSS zum Gestalten eines Kalenders Das HTML der Einzelansicht eines Events (Eventleser) Die FAQ-Erweiterung: häufig gestellte Fragen Die Kurzanleitung für die FAQ-Erweiterung Die FAQ-Erweiterung gestalten

13 16 Die Erweiterung»Newsletter« Das Backend-Modul»Newsletter« Einen Verteiler erstellen Abonnenten 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 Newsletter-Darstellung Newsletter im Frontend abonnieren und kündigen Die Kurzanleitung zum Abonnieren und Kündigen Das HTML der Frontend-Module»Abonnieren«und»Kündigen« Startseite und Sidebar gestalten Ein neues Seitenlayout für die Startseite Newsbeiträge und Termine auf der Startseite Die Frontend-Module für Newsbeiträge und Termine erstellen Die Frontend-Module auf der Startseite in den Artikel einbinden Newsbeiträge und Termine auf der Startseite gestalten Datum der Nachrichten ohne Uhrzeit darstellen Sidebar: ein zufällig ausgewähltes Bild Das Modul»Sidebar Zufallsbild«erstellen Das Modul»Sidebar Zufallsbild«gestalten Sidebar: der Minikalender Das Modul»Eventliste«erstellen und einbinden Ein Modul für den Minikalender erstellen und einbinden Den Minikalender gestalten Sidebar: Lesetipps als Dropdown-Menü Lesetipps erstellen Lesetipps auswählen ohne Klick auf»los«-button Sidebar: Newsletter abonnieren

14 18 Mobile Webseiten Die Besonderheiten von mobilen Webseiten Pixel? Das Web ist nicht aus Papier Contao und mobile Webseiten Die Beispielsite auf kleinen Bildschirmen Die Beispielseiten bei diversen Auflösungen Eine nur auf den ersten Blick gute Lösung »Themes Frontend-Module«: Navigation für mobile Seiten Ein Frontend-Modul für die Hauptnavigation erstellen Ein Frontend-Modul für die Meta-Navigation erstellen Ein Frontend-Modul für die Navigation in der linken Spalte »Themes Seitenlayout«: Layouts für mobile Seiten Neue Seitenlayouts für mobile Seiten erstellen Die Seitenlayouts für mobile Seiten zuweisen »Toggle View«zwischen mobiler Version und Desktop-Version wechseln »Themes Stylesheet«: mobile Seiten gestalten Navigieren ohne Klick auf»los« Ein neues Stylesheet erstellen und einbinden Boxen wie im richtigen Leben:»box-sizing: border-box« Die Abstände für die Layoutbereiche anpassen Die Navigation im Kopfbereich gestalten Aufräumen im Fußbereich: den Anmeldelink gestalten Abgeschnittene Inhalte verhindern:»overflow«und»max-width« Die Navigation in der linken Spalte gestalten Suchfunktion und Kleinigkeiten TEIL IV Systemverwaltung 19 Der Theme-Manager Ein Theme bestimmt das Aussehen der Website Der Theme-Manager verwaltet bekannte Komponenten »Theme One«von der Beispielsite exportieren All-in-one: das Innenleben einer CTO-Datei Was nicht in einem Theme enthalten ist

15 19.2 Einige Quellen für Contao-Themes Einsatzgebiete: Wozu man Themes einsetzen kann InetRobots Themes vom Chef: RockSolid Themes: rocksolidthemes.com Weitere Websites mit Contao-Themes Die»Music Academy«: Beispielsite im neuen Look Über die Anpassung von Themes Was im neuen Theme fehlt In Artikeln eingebundene Frontend-Module sind Inhalt Reparatur: Anpassung von in Artikeln eingebundenen Modulen Sicherheitshinweise für Themes (nicht nur für Contao) Das potenzielle Problem Vertrauenswürdige Quellen Ein Theme prüfen Backend-Benutzer: Angriff von innen SEO: die Optimierung für Suchmaschinen Lesbare Adressen: URLs umschreiben Content-Management-Systeme und URLs »System Einstellungen«: drei wichtige URL-Einstellungen Drei Voraussetzungen zum Umschreiben der URLs Die Rewrite-Regel zum URL-Umschreiben in der».htaccess« Contao im Unterordner: die»rewritebase«in der».htaccess« So wird s gemacht: URLs umschreiben in der Praxis Perfekt: URLs ohne»items«und»events« Flache oder Ordner-URLs Contao kann beides URLs bei statischen Webseiten und bei CMSystemen Contao erzeugt von Haus aus flache URLs Contao 3 kann auch Ordner-URLs Seitenalias, Seitentitel und Seitenbeschreibung optimieren Seitenname und Seitenalias im Backend von Contao Der Titel der Seite:»<title>... </title>« Die Beschreibung der Seite:»<meta name="description">« Abfangjäger: 404 und Statusmeldungen: Der Webserver schickt eine Nummer mit

16 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 Die Google Webmaster-Tools Eine XML-Sitemap in Contao erstellen Mitglieder: im Frontend angemeldete Besucher Mitglieder und Benutzer: der Unterschied Mitgliedergruppen und Mitglieder einrichten Mitgliedergruppen einrichten Neue Mitglieder erstellen Seiten für die An- und Abmeldung erstellen Frontend-Module für die An- und Abmeldung erstellen Die Frontend-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 Frontend-Module zum An- und Abmelden in Artikeln einbinden Die Links zur An- und Abmeldung im Fußbereich einbinden Die Links und das Formular zur Anmeldung gestalten Testen, ob die An- und Abmeldung funktionieren 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 Benutzer: im Backend angemeldete Mitarbeiter Benutzerverwaltung: die Übersicht Die Benutzergruppe»Redakteure Nachrichten«

17 22.3 Die Benutzerin»Helen Lewis«einrichten Die Benutzergruppe»Redakteure Artikel« Die Benutzergruppe»Redakteure Artikel«einrichten Benutzer der Benutzergruppe»Redakteure Artikel«zuweisen Zugriffsrechte für Seiten und Artikel setzen Zugriffsrechte: Was mit Seite und Artikel gemacht werden darf Zugriffsrechte für die freigegebenen Seiten setzen Wartung: die Website im Alltag Das»System-Log«schreibt mit Die»Systemwartung«im Überblick »Systemwartung«: Suchindex neu aufbauen »Systemwartung«: Daten bereinigen Cache leeren für Redakteure:»Persönliche Daten Daten bereinigen« Den»Cache-Flow«in Contao kontrollieren Cache as cache can: Cache gibt es in Contao und im Browser Der»Cache-Modus«von Contao in»system Einstellungen« Die»Cache-Einstellungen«in der Seitenstruktur definieren Backups erstellen: Datenbank und Dateien sichern Die MySQL-Datenbank sichern Die Daten auf dem Webspace sichern Updates: die Versionsnummern von Contao Das Bugfix-Release: 3.0.x Das Minor-Release: 3.x Das Major-Release: x Sollte ich eine funktionierende Contao-Website updaten? Checkliste vor einem Update Der»Live Update«-Service: das automatische Update Mit dem»contao-check«prüfen, ob der Webspace geeignet ist Das»Live Update«kann auch Installationen reparieren Das»Live Update«macht auch ein Datenbank-Backup Machen Sie vor dem ersten»live Update«ein Komplett-Backup Eine»Live Update ID«erwerben

18 23.7 Das manuelle Update per FTP Webstatistiken mit Google Analytics und Piwik TEIL V Tipps und Tricks 24 Tipps und Tricks bei der Arbeit mit Inhalten Text im Fußbereich mit dem TinyMCE pflegen Recycling: Inhalte auf mehreren Seiten wiederholen Möglichkeit 1: Für einzelne Seiten Verknüpfungen Möglichkeit 2: Für alle Seiten eines Seitenlayouts Frontend-Modul Die Erweiterung für Google Maps: [dlh_googlemaps] Die Erweiterung [dlh_googlemaps] im Überblick Schritt 1: Eine Karte erstellen in»inhalte Google Maps« Schritt 2: Karten-Elemente eine Info-Sprechblase hinzufügen Schritt 3: Das Inhaltselement»Google Map«in Contao einbinden Gewusst wie: die manuelle Ermittlung der Geo-Koordinaten Artikelteaser auf Übersichtsseiten Teasertexte für die drei Artikel erstellen Die Teasertexte auf der Seite»Artikel«einbinden Das HTML für die Teasertexte auf der Seite»Artikel erstellen« Mehrere Artikel auf einer Seite Methode 1: Nur ein Artikel pro Seite und Spalte Methode 2: Mehrere ganze Artikel pro Seite und Spalte Methode 3: Mehrere angeteaserte Artikel pro Seite und Spalte Die Frontend-Module»Artikelliste«und»Artikelnavigation« Tipps und Tricks zur Systemverwaltung Wichtige Konfigurationsdateien von Contao Die Systemkonfiguration:»localconfig.php« Die Sprachkonfiguration:»langconfig.php« Infos zu Datenbanktabellen:»dcaconfig.php«

19 25.2 Tipps und Tricks zum TinyMCE Ein Stylesheet für den TinyMCE:»files/tinymce.css« Textbausteine im TinyMCE: Inhalte aus Vorlage einfügen Die Symbolleisten des TinyMCE anpassen Konfiguration des TinyMCE pro Benutzergruppe anpassen 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 Websites Mehrere Domains in einer Contao-Installation Domainumleitung: zu domain.de (oder umgekehrt) Zusammenfassung: mehrere Websites in mehreren Sprachen Die Inserttags im Überblick Inserttags für Link-Elemente Benutzereigenschaften: Inserttags für Frontend-Benutzer Umgebungsvariablen Include-Elemente Verschiedenes: Datum, und Sprachen Index

20 10 Inhaltselemente Kapitel 10 für Texte und Bilder In diesem Kapitel lernen Sie Inhaltselemente zur Arbeit mit Texten und Bildern kennen. Außerdem werden Top-Links und Symbole zum Teilen von Inhalten vorgestellt. 10 Die Themen im Überblick: Artikel und Inhaltselemente im HTML-Quelltext, Seite 266 Das Inhaltselement»Überschrift«:»ce_headline«, Seite 267 Das Inhaltselement»Text«:»ce_text«, Seite 270 Das Inhaltselement»Text«mit einem Bild erweitern, Seite 275 Das Inhaltselement»Bild«:»ce_image«, Seite 282 Das Inhaltselement»Galerie«:»ce_gallery«, Seite 287 Das Inhaltselement»Top-Link«:»ce_toplink«, Seite 296 Syndikation: Drucken, PDF, Facebook, Twitter und G+, Seite 300 In Kapitel 2,»Schnelldurchlauf: So funktioniert Contao«, haben Sie bereits erfahren, dass ein Artikel in Contao nur ein Container ist, ein Inhaltsbereich, der ein oder mehrere Inhaltselemente enthält. In diesem Kapitel lernen Sie die wichtigsten Inhaltselemente zum Einfügen von Text und Bildern kennen: Überschrift und Text Bild und Bildergalerie Zum Abschluss wird noch das Inhaltselement Top-Link vorgestellt. Viel zu tun, aber zunächst gibt es noch ein klein wenig Theorie vorweg. Sie werden sehen, dass die praktische Arbeit mit den Inhaltselementen danach umso leichter fällt. 265

21 10 Inhaltselemente für Texte und Bilder 10.1 Artikel und Inhaltselemente im HTML-Quelltext Inhaltselemente unterteilen einen Artikel bildlich gesprochen in Scheibchen oder Blöcke, und diese Blöcke können Sie dann einzeln bearbeiten. Dieses Prinzip der Aufteilung in Blöcke findet sich auch in der HTML-Struktur von Artikeln und Inhaltselementen wieder. Auf der Startseite der Beispielsite gibt es bereits einen Artikel und ein Inhaltselement mit Überschrift und ein bisschen Fließtext, der in diesem Abschnitt als Beispiel dient. Inhaltselement»Überschrift«Artikel Inhaltselement»Text«Abbildung 10.1 Artikel und Inhaltselemente auf der Startseite Im Quelltext ist der Artikel ein div mit einer ID (der Artikelalias aus den Einstellungen des Artikels) und den Klassen mod_article und block: <div id="startseite" class="mod_article block">... </div> Listing 10.1 Ein Artikel ist von einem»div«umgeben. Innerhalb des div-elements für den Artikel werden die Inhaltselemente aufbewahrt, viele davon ebenfalls mit einem umgebenden div. Auf der Startseite wurde das Inhaltselement Text benutzt, um eine Überschrift und zwei Absätze zu erstellen. Der HTML-Quelltext für den gesamten Artikel, inklusive Inhaltselement, sieht so aus: 266

22 10.2 Das Inhaltselement»Überschrift«:»ce_headline«<div id="startseite" class="mod_article block"> <h1 class="ce_headline">willkommen auf der Beispielsite</h1> <div class="ce_text block"> <p>...</p> <p>...</p> </div> </div> Listing 10.2 Viele Inhaltselemente sind von einem»div«umgeben. Das HTML für das Inhaltselement zeigt folgende Besonderheiten: Das umgebende HTML-Element (h1 bzw. div) bekommt eine für das Inhaltselement definierte Klasse. Die Klassen bestehen aus dem Kürzel ce_ (abgeleitet vom englischen Content Element) und dem englischen Namen des Inhaltselements, also z.b. ce_text für das Inhaltselement Text. Das div für das Inhaltselement bekommt die Klasse block. So werden darin gefloatete Elemente automatisch umschlossen. 10 Viele Inhaltselemente sitzen also in einem eigenen div innerhalb des div des Artikels. Wer es gewohnt ist, bei jedem HTML-Element zu überlegen, ob es wirklich nötig ist, findet die vielen div-elemente wahrscheinlich übertrieben, aber ein CMSystem muss den Quelltext für viele Situationen optimieren und nicht nur für eine einzige. Die Idee der Inhaltselemente ist im Alltag eines Content-Managers einfach nur gut und ganz bestimmt ein paar zusätzliche div-elemente wert. Das HTML der Inhaltselemente wird von einem Template erzeugt Welches HTML die Inhaltselemente erzeugen, wird über Templates geregelt. Die Templatenamen entsprechen beim Ausgabeformat HTML denen der CSS-Klassen plus der Endung.html5, z.b. ce_text.html5 für das Inhaltselement Text. Für das Ausgabeformat XHTML lautet die Endung der Templates.xhtml. Bei Bedarf können Sie im Backend-Modul Layout Templates die HTML-Ausgabe der Inhaltselemente an Ihre Bedürfnisse anpassen Das Inhaltselement»Überschrift«:»ce_headline«Das Inhaltselement Überschrift dient zur Eingabe von Überschriften. Andere Inhaltselemente wie z.b. Text bieten die Möglichkeit, eine integrierte Überschrift zu 267

23 10 Inhaltselemente für Texte und Bilder vergeben. Daraus ergibt sich die Frage, wann man besser das Inhaltselement Überschrift und wann die integrierte Überschrift benutzen sollte. Nicht jede Überschrift benötigt ein eigenes Inhaltselement. In vielen Situationen reicht eine Überschrift als Teil eines anderen Inhaltselements völlig aus. Ein eigenes Inhaltselement für eine Überschrift ist z.b. in folgenden Situationen sinnvoll: Sie möchten in der Lage sein, die Überschrift zu kopieren oder zu verschieben innerhalb der aktuellen Seite oder auch auf eine andere. Die Überschrift soll eine eigene ID oder Klasse bekommen, um sie besser gestalten zu können. Sie möchten schnell einen fest definierten Abstand über oder unter der Überschrift vergeben. Die Überschrift soll mit einem»augen-klick«einzeln ausgeblendet werden können. Kurz: Immer dann, wenn die Überschrift als eigenständige Einheit existieren soll, ist es sinnvoll, das Inhaltselement Überschrift einzusetzen. Ich habe es mir zum Beispiel im Laufe der Zeit angewöhnt, die erste Überschrift in einem Artikel immer als eigenständiges Inhaltselement vom Typ Überschrift einzufügen Die Überschrift ändern:»die Abenteuer des Lorem Ipsum«Im folgenden ToDo ändern Sie am Anfang der Seite Texte und Bilder die Überschrift der Ebene h1. ToDo: Ein Inhaltselement»Überschrift«ändern 1. Öffnen Sie das Backend-Modul Inhalte Artikel. 2. Klicken Sie neben dem weißen Rechteck mit dem roten Strich auf den fett gedruckten Seitennamen Texte und Bilder, um den Artikelbaum zu verkürzen und so übersichtlicher zu machen. 3. Contao merkt sich diese Einstellung. Mit der Breadcrumb-Navigation in dem hellgelb unterlegten Kasten direkt darüber können Sie den ganzen Artikelbaum wieder aufrufen. 4. Öffnen Sie den Artikel Texte und Bilder [Hauptspalte] zur Bearbeitung (gelber Bleistift). 5. Öffnen Sie das vorhandene Inhaltselement Überschrift ganz am Anfang des Artikels. Falls es keine Überschrift geben sollte, erstellen Sie bitte eine. 6. Ändern Sie den Text im Feld Überschrift in»die Abenteuer des Lorem Ipsum«. 268

24 10.2 Das Inhaltselement»Überschrift«:»ce_headline«7. Prüfen Sie, ob rechts daneben die Gliederungsebene h1 ausgewählt ist. 8. Klicken Sie auf Speichern und schliessen. Abbildung 10.2 zeigt die Eingabemaske für das Inhaltselement Überschrift. Abbildung 10.2 Das Dialogfeld für das Inhaltselement»Überschrift«10 Auf der Webseite erscheint jetzt oben in der Hauptspalte die neue Überschrift. Im Quelltext hat die neue Überschrift folgendes HTML: <h1 class="ce_headline ">Die Abenteuer des Lorem Ipsum</h1> Wie Sie sehen, wird beim Inhaltselement Überschrift die Klasse ce_headline direkt an das Element h1 vergeben. Es gibt also kein zusätzliches div-element drum herum Die Überschrift gestalten Im folgenden ToDo ändern Sie die Schriftgestaltung der Überschrift und weisen ihr die in Abschnitt eingebundene Schriftart Droid Sans zu. ToDo: Die Gestaltung des Inhaltselements»Überschrift«ändern 1. Öffnen Sie das Stylesheet zur Gestaltung der Inhalte namens inhalte bzw. inhalte.css. 2. Ergänzen Sie den in Abschnitt erstellten Style mit dem Selektor #main h1 um die beiden fett hervorgehobenen Anweisungen zur Schriftformatierung: #main h1 { margin-top: 0; margin-bottom: 1em; line-height: 1; font-family: "Droid Sans", sans-serif; font-weight: bold; } 3. Speichern Sie das Stylesheet. 269