Beispielsite

Websites erstellen mit Contao

Made with Contao.

.

왘

Nach
folgt ein foreach, und vor
steht das entsprechende endforeach. Das bedeutet nichts anderes, als dass der ganze Block dazwischen für jeden Menüpunkt wiederholt wird. For each heißt für jeden. Programmierer nennen das eine Schleife.

왘

Bei der Erstellung der Listenpunkte li innerhalb der Schleife wird zwischen aktiven und nicht aktiven Menüpunkten unterschieden: 왘

Die Bedingung if ($item['isActive']) lautet frei übersetzt »Wenn das Ding aktiv ist«, also wenn der Menüpunkt für die gerade dargestellte Seite steht.

왘

In dem Fall wird im Listenpunkt statt eines Hyperlinks ein span erzeugt, und sowohl das li als auch das span bekommen die Klasse active (und noch ein paar andere, falls welche definiert wurden).

왘

Ist der Menüpunkt nicht aktiv, gilt der Block unterhalb von else.

왘

Hier wird ein li mit einem Hyperlink a erstellt, bei dem abgefragt wird, ob Klassen wie accesskey oder tabindex eingebaut werden sollen.

Das ist der Aufbau des Templates für die Navigation. Wie gesagt: Wenn Sie PHPBefehle vorher noch nie gesehen haben, wirkt das ein bisschen – sagen wir mal – unübersichtlich. Wer mit PHP vertraut ist, wird keine Schwierigkeiten haben, hier seine eigenen Änderungen und Wünsche umzusetzen.

152

Das Contao-Prinzip: Altogether now

Backend-Modul Templates: Die Kopie von »nav_default.tpl« löschen Sie haben in diesem Abschnitt das Prinzip der Templates kennengelernt und dabei eine Kopie des Templates nav_default.tpl erstellt. Diese Kopie benötigen Sie vorerst nicht mehr, und Sie sollten sie gleich wieder löschen. Contao benutzt dann wieder das Original aus dem Systemordner.

6.8

Das Contao-Prinzip: Altogether now

Die erste Seite ist erstellt. Sie ist zwar weder fertig noch besonders hübsch, aber auch so eine provisorische Seite ist für ein CMS bereits harte Arbeit. Die folgende Übersicht zeigt, was dabei genau passiert. Los geht es immer mit dem Aufruf der URL im Browser: 왘

Der Besucher gibt im Browser eine URL ein: http://localhost/contaobuch/

왘

Der Browser braust daraufhin los, sucht den Webserver und findet ihn auf demselben Rechner.

왘

Der Webserver schaut in den Ordner htdocs/contaobuch, sieht, dass dort Contao zuständig ist, und sagt Bescheid, dass da eine Seite gewünscht wird. Wenn möglich auf Deutsch.

왘

Contao prüft die Seitenstruktur. Dort gibt es einen Startpunkt mit der Sprache de. Passt.

왘

Zu diesem Startpunkt gehören mehrere Seiten. Contao nimmt, weil in der URL keine bestimmte Seite gewünscht wurde, die erste Reguläre Seite unterhalb des Startpunktes, die den Status veröffentlicht hat, und das ist die Startseite.

왘

Zur Darstellung dieser Seite im Frontend benutzt Contao ein Theme, das aus Seitenlayouts, Stylesheets und Frontend-Modulen besteht.

왘

Da für die Startseite nichts anderes definiert wurde, nimmt Contao als Seitenlayout das Standardlayout [Standard].

왘

Das Seitenlayout definiert die Layoutstruktur der Webseite: 왘

Die Seite hat ein zentriertes, dreispaltiges Layout. Breite 960px.

왘

Die linke und rechte Spalte haben eine Breite von jeweils 182px.

왘

Es gibt einen Kopf- und einen Fußbereich.

왘

Gestaltet wird die Seite mit dem Stylesheet bildschirm.

153

6.8

6

Die erste Website mit Contao

왘

Außerdem legt das Seitenlayout fest, welche Module in welchem Layoutbereich (Spalte) erscheinen: 왘

Das HTML aus dem Modul Layout – Header kommt in die Kopfzeile.

왘

Das Modul Navigation – Hauptnavi erscheint in der linken Spalte. Welches HTML das Modul erzeugt, wird über das Template nav_default geregelt.

왘

Das Modul Artikel sorgt dafür, dass Artikel, die zur Seite gehören, den Status veröffentlicht haben und der Hauptspalte zugeordnet sind, auch tatsächlich in der Hauptspalte erscheinen.

왘

Das HTML aus dem Modul Layout – Footer erscheint in der Fußzeile.

Mit all diesen Informationen erstellt Contao den Quelltext der Webseite, den der Webserver dann an den Besucher ausliefert. Fazit: Ohne Seitenstruktur geht in Contao gar nichts, aber der eigentliche Drehund Angelpunkt ist das Seitenlayout. Es verbindet die Seitenstruktur, FrontendModule, Stylesheets und Artikel miteinander, sodass aus all diesen Komponenten im Browser eine scheinbar ganz normale Webseite wird. Eigentlich ist es ganz einfach, wenn man es einmal begriffen hat.

154

In diesem Kapitel erfahren Sie alles über die Arbeit mit CSS in Contao: interne Stylesheets, externe Stylesheets und wie man die beiden am besten kombiniert. Zum Schluss lernen Sie das Contao-CSS-Framework im Detail kennen.

7

Webseiten gestalten: Contao und CSS

Dieses Kapitel erläutert die verschiedenen Möglichkeiten, wie Contao und CSS zusammenarbeiten können. Los geht es zunächst mit einer kleinen Übersicht.

7.1

Übersicht: Contao und CSS

Zunächst eine kleine Übersicht über das CSS-Framework von Contao und ein paar Anmerkungen über den Unterschied zwischen den Begriffen interne Stylesheets und externe Stylesheets.

7.1.1

Gestatten: Das CSS-Framework von Contao

Contao verfügt über ein eingebautes CSS-Framework, mit dem sich nahezu alle gewünschten Webdesigns umsetzen lassen, und Sie haben dieses CSS-Framework bei der Erstellung der Beispielsite in Kapitel 6 bereits benutzt. Im Backend-Modul Themes 폷 Seitenlayouts haben Sie festgelegt, wie das Layout aussehen soll. Header, Footer, Spaltenkonfiguration, Breite und Ausrichtung wurden dabei bequem per Mausklick definiert. Contao hat aus diesen Angaben im Hintergrund das entsprechende HTML und CSS erzeugt, sodass in allen Browsern ein stabiles Layout angezeigt wird. Aus Benutzersicht gibt es im Backend-Modul Seitenlayouts vier Bereiche, die für die Arbeit mit dem CSS-Framework relevant sind: 왘

Kopf- und Fusszeile

왘

Spaltenkonfiguration

왘

Stylesheets

왘

Statisches Layout (Breite und Ausrichtung)

155

7

Webseiten gestalten: Contao und CSS

Gerade beim Kennenlernen von Contao ist die Benutzung dieses eingebauten Frameworks sehr zu empfehlen, denn Sie müssen dann zur Erstellung eines Layouts weder ein eigenes Seitentemplate anlegen noch das für die Layoutstruktur benötigte CSS selbst schreiben.

7.1.2

Stylesheets bearbeiten: Interner oder externer Editor?

Wenn Sie das eingebaute CSS-Framework verwenden, gibt es in Contao zwei grundsätzlich verschiedene Möglichkeiten, das CSS zur Gestaltung der Webseiten zu schreiben: 왘

Interne Stylesheets (siehe ab Abschnitt 7.2, Seite 156) Interne Stylesheets werden im Backend-Modul Themes 폷 Stylesheets erstellt, in der Datenbank gespeichert und in der Regel mit dem internen CSS-Editor bearbeitet. Existierende Stylesheet-Dateien können importiert werden und die Erweiterung [csseditor] ermöglicht die Arbeit im Quelltext.

왘

Externe Stylesheets (siehe Abschnitt 7.7, Seite 176) Externe Stylesheets sind ganz normale Stylesheet-Dateien, die in einem ganz normalen Editor bearbeitet werden. Nachdem Sie die Arbeit mit internen Stylesheets kennengelernt haben, erfahren Sie in diesem Abschnitt, wie man externe Stylesheets am besten in Contao einbindet.

Natürlich kann man interne und externe Stylesheets auch miteinander kombinieren, und in der Praxis ist diese ab Seite 182 beschriebene Zusammenarbeit oft die effektivste Lösung. Aber zunächst einmal geht es um eine Spezialität von Contao: interne Stylesheets.

7.2

Arbeiten mit internen Stylesheets

Das Backend-Modul Themes 폷 Stylesheets, mit dem Sie im vorherigen Kapitel bereits die ersten Styles erstellt haben, speichert die Stylesheets und die darin enthaltenen Formatdefinitionen in der Datenbank. Aus diesen Datensätzen werden im Hintergrund CSS-Dateien im Root-Ordner der Installation generiert, die der Browser zur Darstellung der Webseiten benutzt. Abbildung 7.1 stellt diesen Sachverhalt dar.

Backend-Modul THEMES • STYLESHEETS

Datensätze in Datenbank

CSS-Datei im Hauptordner

Abbildung 7.1 Interne Stylesheets werden in der Datenbank gespeichert.

156

Arbeiten mit internen Stylesheets

Sie können sich die im Hauptordner automatisch erzeugten CSS-Dateien wie bildschirm.css in einem normalen CSS-Editor anschauen und bearbeiten. Die Änderungen werden nach dem Speichern sogar im Browser angezeigt, und alles scheint in Ordnung zu sein. Aber früher oder später gibt es bei dieser Methode eine Überraschung, denn bei der nächsten automatischen Generierung des Stylesheets im Backend werden die Änderungen, die Sie im externen Editor vorgenommen haben,wieder überschrieben. Der in Abbildung 7.1 dargestellte Weg von der Datenbank zur CSS-Datei ist eine Einbahnstraße. Die Bearbeitung von internen Stylesheets in einem externen Editor ist zwar grundsätzlich möglich, aber mit Vorsicht zu genießen und wird erst weiter hinten in diesem Kapitel beschrieben. Konzentrieren Sie sich zunächst darauf, den internen Editor kennenzulernen. Interne Stylesheets ohne Dateiendung, externe mit ».css« Da im Folgenden manchmal ein Stylesheet in der Datenbank und manchmal eine CSSDatei auf dem Webspace gemeint ist, gilt folgender Grundsatz: 왘

»Das Stylesheet bildschirm« ohne die Endung .css meint ein Stylesheet im Backend oder in der Datenbank.

왘

»Das Stylesheet bildschirm.css« mit der Endung .css meint eine CSS-Datei in einem Ordner auf dem Webspace.

7.2.1

Der interne CSS-Editor: CSS per HTML-Formular

Erstellt und bearbeitet werden die Formatdefinitionen im Backend-Modul Themes 폷 Stylesheets mit einem HTML-Formular, das Sie in Abschnitt 6.5, »Das erste Stylesheet erstellen und zuweisen«, bereits kennengelernt haben. Dazu müssen Sie zweimal auf ein Bleistift-Symbol klicken: 왘

Der erste Klick öffnet das Stylesheet zur Bearbeitung.

왘

Der zweite Klick dient dazu, den Style selbst zu bearbeiten.

Abbildung 7.2 zeigt die Bearbeitung der Formatdefinition für body. CSS per HTML-Formular zu schreiben ist zwar ungewohnt, hat aber den Vorteil, dass später bei der Pflege der Webseiten auch unerfahrene, mit der genauen Syntax von CSS nicht vertraute Benutzer Änderungen am CSS vornehmen können.

157

7.2

7

Webseiten gestalten: Contao und CSS

Abbildung 7.2 Der interne CSS-Editor – CSS per HTML-Formular

7.2.2

Übung: Header und Footer mit dem internen CSS-Editor gestalten

In diesem Abschnitt ändern und erweitern Sie das bereits vorhandene interne Stylesheet bildschirm, um den internen Editor besser kennenzulernen. Sie können bei der Bearbeitung eines Styles vorherige Versionen wiederherstellen, indem Sie im Arbeitsbereich ganz rechts oben die gewünschte Version auswählen und dann auf die Schaltfläche Wiederherstellen klicken. Denken Sie auch an die Tastenkürzel für Speichern ((Alt) + (s)) und Speichern und Schliessen ((Alt) + (c)). ToDo: Styles im Stylesheet »bildschirm« erstellen und bearbeiten 1. Öffnen Sie im Stylesheet bildschirm den Style #header. 2. Ergänzen Sie ein padding von »18px« für alle vier Seiten. 3. Ergänzen Sie als Hintergrundfarbe »89adcd«. 4. Deaktivieren Sie das Kontrollkästchen Rahmen, um die Rahmenlinien zu entfernen. Sollten Sie es später wieder aktivieren, sind die alten Werte dann sofort wieder da. Das ist sehr praktisch zum schnellen Testen. 5. Beenden Sie die Bearbeitung mit Speichern und Schliessen. 6. Klicken Sie neben dem Style für #header ganz rechts auf das weiße Kreuz im grünen Kreis, um darunter einen neuen Style einzufügen.

158

Arbeiten mit internen Stylesheets

ToDo: Styles im Stylesheet »bildschirm« erstellen und bearbeiten (Forts.) 7. Geben Sie als Selektor »#header h1« ein. 8. Setzen Sie den oberen Margin für die Überschrift auf »0«. 9. Speichern und Schliessen Sie ((Alt) + (c)). 10. Öffnen Sie den Style für #main, und entfernen Sie die Rahmenlinien, indem Sie wieder das Kontrollkästchen Rahmen deaktivieren. 11. Klicken Sie auf Speichern und Schliessen. 12. Öffnen Sie den Style für #footer. 13. Definieren Sie ein unteres margin von 1em. 14. Definieren Sie ein padding von 18px für oben, rechts und links und 9px für unten. 15. Geben Sie als Hintergrundfarbe z. B. »89adcd« ein. 16. Entfernen Sie die Rahmenlinien für den Footer. 17. Setzen Sie im Bereich Schrift die Schriftfarbe auf 000. 18. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo sieht die Startseite im Browser ungefähr so aus wie in Abbildung 7.3.

Abbildung 7.3 Das Frontend mit gestyltem Header und Footer

Mit ein bisschen Übung ist der interne Editor richtig gut und besonders für ungeübte CSS-Schreiberlinge, die nicht täglich Styles schreiben, eine echte Hilfe. Aber er hat auch seine Grenzen:

159

7.2

7

Webseiten gestalten: Contao und CSS

왘

Bei den Boxmodell-Eigenschaften ist nur eine Einheit für alle Seiten möglich. Eine Mischung wie padding-left:18px und padding-top:1em kann man per Formular nicht eingeben.

왘

Bei Rahmenlinien ist im Formular nur eine Farbe pro Style möglich. Getrennte Farben für oben und unten sind zum Beispiel nicht möglich.

Für solche und andere Fälle gibt es ganz unten im internen Editor das Feld Eigener Code. Dort können Sie alles reinschreiben, was Sie möchten – solange es valides CSS ist.

7.2.3

Tipps für die Arbeit mit dem internen CSS-Editor

Um Ihnen die Eingewöhnung etwas zu erleichtern, zeige ich Ihnen im Folgenden zunächst ein paar einfache Tricks zur Arbeit mit dem internen Editor. Am effektivsten ist eine Kombination aus Maus- und Tastaturbedienung: 왘

Blenden Sie die einzelnen Bereiche per Maus mit einem Klick auf die grüne Überschrift je nach Bedarf ein- und aus.

왘

Ein Sprung in einen anderen Bereich geht am einfachsten mit der Maus. Innerhalb eines Bereiches hingegen ist die Tastatur schneller: (ÿ) springt weiter ins nächste Feld, (ª) + (ÿ) bringt Sie wieder zurück.

왘

Bei einer Dropdown-Liste für Einheiten können Sie den gewünschten Wert einfach per Buchstabe eingeben: Drücken Sie (p) für px oder (e) für em.

왘

Per Tastatur können Sie eine Auswahlliste mit (Alt) + (Pfeil¼) ausklappen. Mit (Pfeil½) bzw. (Pfeil¼) wählen Sie den gewünschten Eintrag, und mit (Enter) bestätigen Sie diesen.

Tastaturfans lassen beim Bearbeiten der Styles die linke Hand in ständiger Bereitschaft links unten über der (Alt)-Taste schweben: 왘

(Alt) + (s) speichert. Auch mal eben zwischendurch. (Alt) + (c) speichert, schließt das Formular und kehrt zur Liste der Styles zurück.

왘

(Alt) + (f) startet die Frontend-Vorschau. (Strg) + (w) schließt sie wieder.

왘

(Alt) + (n) öffnet nach dem Speichern die Eingabemaske für die nächste For-

matdefinition. 왘

(Alt) + (b) entspricht einem Klick auf den grünen Zurück-Pfeil rechts oben im Arbeitsbereich und geht zur vorherigen Seite zurück, ohne die Änderungen zu speichern.

Mit diesen Kürzeln geht die Arbeit im internen Editor nach kurzer Zeit buchstäblich locker von der Hand.

160

Arbeiten mit internen Stylesheets

In einigen Browsern gibt es etwas andere Tastenkombinationen In einigen Browsern und auf dem Mac funktionieren diese Tastenkürzel ein bisschen anders. In Abschnitt 5.4 ab Seite 104, »Rechts: Der Arbeitsbereich«, wird das näher erläutert.

7.2.4

Integration von internen Stylesheets in »Seitenlayouts«

Bei der Verwendung von internen Stylesheets können Sie im Backend-Modul Seitenlayouts alle vier relevanten Bereiche nutzen, um ein Seitenlayout zu erstellen. Sie können 왘

eine Kopf- und Fußzeile generieren.

왘

die Spaltenkonfiguration definieren.

왘

die Stylesheets ins Seitenlayout einbinden.

왘

im Bereich »Statisches Layout« die Breite und Ausrichtung des Layouts festlegen.

Interne Stylesheets arbeiten also perfekt mit dem CSS-Framework von Contao zusammen. Abbildung 7.4 zeigt diesen Sachverhalt in der Übersicht.

Abbildung 7.4 Integration von internen Stylesheets in Seitenlayouts

»Stylesheets zusammenfassen«: Als eine Datei ausliefern Im Backend-Modul Seitenlayouts können Sie im Bereich Stylesheets mit einem simplen Mausklick auf Stylesheets zusammenfassen alle internen Stylesheets in einer Datei zusammenfassen, um die Ladezeit der Seiten zu verbessern.

161

7.2

7

Webseiten gestalten: Contao und CSS

7.3

Interne Stylesheets: CSS-Dateien importieren

Stylesheets, die als CSS-Datei bereits fix und fertig vorliegen, müssen Sie nicht Style für Style in den internen Editor übertragen. Mit der Funktion CSS importieren können Sie diese bequem in die Datenbank importieren. Zu importierende Stylesheet-Dateien müssen zunächst unterhalb von tl_files gespeichert werden. Das Importieren selbst verwandelt die externe CSS-Datei in ein internes in der Datenbank gespeichertes Stylesheet, das mit dem internen CSSEditor bearbeitet werden kann.

7.3.1

Das Reset-Stylesheet »basic.css« herunterladen

Viele Webdesigner benutzen ein im Laufe der Zeit gereiftes Reset-Stylesheet zur Normalisierung der Abstände von margin und padding und zur grundlegenden Formatierung der Webseiten. In diesem Abschnitt lernen Sie die CSS-Importfunktion anhand eines auf www.contao.org erhältlichen Reset-Stylesheets namens basic.css kennen, das sich gut für die Arbeit mit Contao eignet. Im folgenden ToDo laden Sie das zu importierende Stylesheet herunter und speichern es im Ordner tl_files/importieren, in dem alle zu importierenden Dateien zwischengelagert werden. ToDo: Das Reset-Stylesheet »basic.css« herunterladen und speichern 1. Surfen Sie zur Downloadseite auf www.contao.org: http://www.contao.org/herunterladen.html 2. Laden Sie unter der Überschrift Das CSS Framework erweitern das Reset-Stylesheet (2,3kb) herunter. 3. Speichern Sie das Stylesheet basic.css in tl_files/importieren.

In den nächsten Abschnitten importieren Sie dieses Stylesheet in die Datenbank und lernen es dabei genauer kennen.

7.3.2

Das Reset-Stylesheet »basic.css« importieren

Im folgenden ToDo importieren Sie basic.css, ändern den Medientyp auf screen und verbinden es dann als erstes zu ladendes Stylesheet mit dem aktuellen Seitenlayout.

162

Interne Stylesheets: CSS-Dateien importieren

ToDo: Das Reset-Stylesheet »basic.css« importieren und einbinden 1. Öffnen Sie das Backend-Modul Themes 폷 Stylesheets. 2. Klicken Sie im Arbeitsbereich oben rechts auf CSS importieren. 3. Aktivieren Sie in der Zeile Dateisystem ganz rechts das Kontrollkästchen Auswahl ändern. Contao zeigt Ihnen daraufhin den Inhalt des Ordners tl_files. 4. Wechseln Sie in den Unterordner importieren, und aktivieren Sie das Kontrollkästchen für basic.css. 5. Klicken Sie auf die Schaltfläche CSS-Import. Jetzt wird das Stylesheet in die Datenbank importiert. 6. Klicken Sie mit der rechten Maustaste auf den gelben Bleistift neben dem Stylesheet basic [all], und wählen Sie den Befehl Stylesheet-Einstellungen bearbeiten. 7. Ändern Sie den Medientyp von all auf screen, und beenden Sie die Bearbeitung mit Speichern und zurück. 8. Um das Stylesheet mit einem Seitenlayout zu verbinden, öffnen Sie im BackendModul Themes 폷 Seitenlayouts das Standardlayout [Standard] zur Bearbeitung. 9. Aktivieren Sie im Bereich Stylesheets das Kontrollkästchen für das Stylesheet basic. 10. Ändern Sie die Reihenfolge der Stylesheets mit den grünen Pfeilen nach unten bzw. oben, sodass das Stylesheet basic zuerst geladen wird. 11. Speichern Sie die Änderungen mit Speichern und Schliessen.

Nach einer Aktualisierung sieht das Frontend im Browser danach ungefähr so aus wie in Abbildung 7.5. Die Schriftarten haben sich geändert, die Aufzählungspunkte in der Navigation sind verschwunden und bei einigen Elementen wurden die Außen- und Innenabstände (margin und padding) entfernt.

Abbildung 7.5 Die Startseite der Beispielsite mit »basic.css«

163

7.3

7

Webseiten gestalten: Contao und CSS

Nach dem Importieren stehen die Styles im Backend übersichtlich untereinander und haben rechts einen Satz Symbole zur Bearbeitung (Abbildung 7.6).

Abbildung 7.6 Das importierte Stylesheet »basic« im Backend

Die Symbole selbst sind zum größten Teil selbsterklärend: 왘

Der gelbe Bleistift öffnet den Style zur Bearbeitung.

왘

Das grüne Kreuz dient zum Duplizieren des Styles.

왘

Der blaue Pfeil dient zum Verschieben eines Styles. Der Style wird in die Ablage kopiert und kann auch in einem anderen Stylesheet wieder eingefügt werden.

왘

Das rote X löscht den Style.

왘

Das grüne Auge blendet einen Style vorübergehend aus.

왘

Das blau hinterlegte »i« zeigt alle Eigenschaften und Werte des Styles auf einen Blick und ist übersichtlicher als das HTML-Formular.

왘

Das weiße Kreuz im grünen Kreis ganz rechts außen fügt unterhalb des Styles eine neue Formatdefinition ein.

Sehr praktisch ist der »Augen-Klick«, mit dem Sie einen Style kurz ausblenden können, um dessen Auswirkung im Frontend zu studieren:

164

Interne Stylesheets: CSS-Dateien importieren

왘

Wenn Sie auf das grüne Auge klicken, wird es grau, um zu signalisieren, dass der Style inaktiv ist.

왘

Nach dem Neuladen zeigt der Browser die Webseite ohne diesen Style.

Bei jeder Änderung, also auch bei einem Klick auf das Auge, erzeugt Contao im Hintergrund in Windeseile das Stylesheet basic.css im Hauptordner aufs Neue, sodass die Browser immer die aktuelle Version benutzen. Wenn Sie genau wissen möchten, ob und wann Contao ein Stylesheet generiert hat, können Sie das im Backend-Modul System-Log nachschauen. Achten Sie auf die in Grün erscheinende Meldung »Generated style sheet«. Einschränkungen beim Importieren von Stylesheets Der Import eines Stylesheets verläuft in den meisten Fällen recht reibungslos, aber manchmal sind ein paar vorbereitende Maßnahmen hilfreich, damit es beim Import keine Probleme gibt: 왘

Farbnamen wie white werden in das Feld Eigener Code importiert. Am besten ersetzen Sie Farbnamen vor dem Importieren durch hexadezimale Werte wie #ffffff. Die Kurzform #fff geht auch.

왘

Auch andere Keywords wie z. B. das small in font-size: small bereiten Schwierigkeiten und sollten ebenfalls besser durch Zahlwerte ersetzt werden (13px oder 81.25 %).

왘

Kurzschreibweisen werden teilweise nicht richtig verstanden. Die Werte für border sollten z. B. immer die Reihenfolge 1px solid #ccc haben (width, style, color). Andere Reihenfolgen werden nicht korrekt erkannt, auch wenn sie valide sind.

왘

Ironie am Rande: Die Anweisung @import geht beim Import verloren.

Sie sollten das interne Stylesheet also einmal in Ruhe daraufhin anschauen, ob nach dem Importieren noch alles stimmt.

7.3.3

Das Reset-Stylesheet »basic.css« im Detail

In diesem Abschnitt werfen Sie einen kurzen Blick auf das Stylesheet basic.css, das Sie eben importiert haben. Es besteht aus vier großen Teilen. Teil 1 ist nur ein einziger Style, der das margin und padding für zahlreiche Elemente auf 0 setzt (Reset): /* Reset margins */ body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, ol, ul, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea { margin: 0; padding: 0; } Listing 7.1

Der »Reset« – Teil 1 des Reset-Stylesheets »basic.css«

165

7.3

7

Webseiten gestalten: Contao und CSS

Im zweiten Teil folgt nach dem Kommentar /* Format basic elements */ eine Grundformatierung. Diese besteht aus zwölf Styles mit grundlegenden Formatierungen für Tabellen, Hyperlinks und andere Elemente: /* Format basic elements */ table {border-collapse: collapse; border-spacing: 0;} caption, th, td {text-align: left; vertical-align: top;} abbr, acronym { font-variant: normal; border-bottom: 1px dotted #666; cursor: help; } blockquote, q {quotes: none;} fieldset, img {border: 0;} li {list-style-type: none;} sup {vertical-align: text-top;} sub {vertical-align: text-bottom;} del {text-decoration: line-through;} ins {text-decoration: none;} a {color: #00f;} :focus {outline: 0;} Listing 7.2

Die »Grundformatierung« – Teil 2 von »basic.css«

Der dritte Teil des Stylesheets beginnt nach dem Kommentar /* Font settings */ und umfasst neun Styles mit einer grundlegenden Schriftformatierung: /* Font settings */ body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-size: 12px; color: #000; } input, button, textarea, select { font-family: inherit; font-size: 99 %; font-weight: inherit; } pre, code { font-family: "Lucida Console", Monaco, monospace; font-size: 12px; } h1, h2, h3, h4, h5, h6 { font-size: 100 %;

166

Das Suchen und Filtern von Styles in internen Stylesheets

font-weight: normal; } h1 {font-size: 22px;} h2 {font-size: 20px;} h3 {font-size: 18px;} table {font-size: inherit;} caption, th {font-weight: bold;} Listing 7.3

»Schriftformatierung« – Teil 3 des Reset-Stylesheets »basic.css«

Im letzten Teil werden nach dem Kommentar /* Default margins */ für einige Elemente noch ein paar Standardabstände definiert: /* Default margins */ h1, h2, h3, h4, h5, h6 {margin-top: 1em;} h1, h2, h3, h4, h5, h6, p, pre, blockquote, table, ol, ul, form { margin-bottom: 12px; /* Should match the font size */ } Listing 7.4

»Standardabstände« – Teil 4 des Reset-Stylesheets »basic.css«

So viel zum Inhalt des Reset-Stylesheets basic.css. Andere Reset-Stylesheets Sie können natürlich auch Ihr eigenes Reset-Stylesheet importieren oder sich ein anderes Reset-Stylesheet ausleihen. Neben dem Klassiker von Eric Meyer gibt es noch ein paar andere interessante Beispiele: 왘

die Übersicht: »Vier CSS-Resets« (Dr. Web) http://www.drweb.de/magazin/vier-css-resets/

왘

die einfache Variante: »CSS Reset – a simpler option« (Russ Weakley) http://www.maxdesign.com.au/articles/css-reset/

왘

kein Reset: »Setting rather than Resetting …« (Thierry Koblentz) http://bit.ly/dqvh64

7.4

Das Suchen und Filtern von Styles in internen Stylesheets

In diesem Abschnitt zeige ich noch zwei einfache, aber effektive Hilfsmittel zur Arbeit mit dem Backend-Modul Themes 폷 Stylesheets: das Suchen und Filtern von Styles.

167

7.4

7

Webseiten gestalten: Contao und CSS

7.4.1

Styles mit bestimmten Selektoren suchen

Wenn ein Stylesheet zur Bearbeitung geöffnet ist, sehen Sie ganz oben im Arbeitsbereich die in Abbildung 7.7 hervorgehobene Zeile zum Suchen und Filtern von Styles.

Abbildung 7.7 »Suchen« und »Filtern« – oben im Arbeitsbereich

Rechts am Rand sehen Sie, dass momentan 24 Styles angezeigt werden. Die beiden goldfarbenen Pfeile ganz außen bewirken, dass die Anzeige des Stylesheets nach einer Suche und Filterung entsprechend geändert wird (entspricht (Enter)). Sie können die Anzeige der Styles mit einer Suche nach einer Kategorie, einem Kommentar oder einem Selektor einschränken. Die Auswahl Kategorie lernen Sie im nächsten Abschnitt beim Filtern kennen, einen Kommentar haben Sie bisher noch nicht eingegeben, also probieren Sie im folgenden ToDo die Suche nach einem bestimmten Selektor. ToDo: So suchen Sie im Stylesheet nach bestimmten Selektoren 1. Wählen Sie oben im Arbeitsbereich in der Auswahlliste des Feldes Suchen den Eintrag Selektor. 2. Geben Sie im Eingabefeld nach dem Gleichheitszeichen den Selektor »body« ein. 3. Drücken Sie (Enter), oder klicken Sie auf die beiden Pfeile ganz rechts. 4. Es werden nur noch zwei Styles angezeigt, die beide den Selektor body enthalten. Beachten Sie dabei, dass die beiden Suchfelder hellgelb hinterlegt sind, um anzuzeigen, dass ein Suchfilter aktiv ist. 5. Ändern Sie die Suche, und suchen Sie zum Beispiel nach dem Selektor »h1«. Im Stylesheet basic gibt es fünf Styles mit h1. 6. Um wieder alle Styles zu sehen, entfernen Sie den Suchfilter wieder, indem Sie mit einem Doppelklick den Selektor im Suchfeld markieren, (ENTF) drücken und das Löschen mit (Enter) bestätigen.

168

Das Suchen und Filtern von Styles in internen Stylesheets

7.4.2

Filtern nach Kategorie

Wenn Sie einen Style zur Bearbeitung öffnen, sehen Sie gleich im ersten Bereich, Selektor und Kategorie, ein Eingabefeld namens Kategorie (Abbildung 7.8).

Abbildung 7.8 Das Eingabefeld »Kategorie« beim Bearbeiten von Styles

In diesem Feld können Sie Styles durch Zuweisen einer Kategorie wie zum Beispiel Layout, Navigation oder Formulare gruppieren und anschließend in der Übersicht mit dem Filter nur jeweils eine Kategorie anzeigen lassen. Im Reset-Stylesheet basic eignen sich als Kategorie zum Beispiel die vier Teile Reset, Grundformatierung, Schriftformatierung und Standardabstände. Diese Kategorien werden den Styles zugewiesen, und danach können Sie per Klick eine bestimmte Kategorie anzeigen lassen. Alle anderen Styles werden dann vorübergehend ausgeblendet, was die Übersicht bei längeren Stylesheets enorm erhöht. Zur Zuweisung der Kategorien müssten Sie normalerweise jeden Style einzeln öffnen, die Kategorie eingeben und den Style wieder speichern. Das ist nicht sehr erquicklich, und deshalb lernen Sie im folgenden ToDo quasi nebenbei eine echte Arbeitserleichterung kennen: die Funktion Mehrere bearbeiten. Diese Funktion gibt es in Contao an vielen Stellen, und sie erleichtert das Leben eines ContentManagers ungemein. ToDo: Kategorien mit der Funktion »Mehrere bearbeiten« zuweisen 1. Öffnen Sie gegebenenfalls das Stylesheet basic zur Bearbeitung. 2. Klicken Sie im Arbeitsbereich rechts oben auf Mehrere bearbeiten. 3. Aktivieren Sie auf der folgenden Seite das Kontrollkästchen Alle auswählen. 4. Scrollen Sie ganz nach unten, und klicken Sie auf Bearbeiten. 5. Aktiveren Sie auf der folgenden Seite die Kontrollkästchen für die Felder Selektor und Kategorie, und klicken Sie dann unten auf Weiter.

169

7.4

7

Webseiten gestalten: Contao und CSS

ToDo: Kategorien mit der Funktion »Mehrere bearbeiten« zuweisen (Forts.) 6. Auf der folgenden Seite sehen Sie für alle 24 Styles jeweils die Felder Selektor und Kategorie untereinander. 7. Weisen Sie den ersten Style der Kategorie »Reset« zu. 8. Die nächsten zwölf von table bis inklusive :focus bekommen die Kategorie »Grundformatierung«. 9. Die Kategorie »Schriftformatierung« wird den nächsten neun Styles zugewiesen, von body bis einschließlich caption, th. 10. Die letzten beiden Formatdefinitionen bekommen die Kategorie »Standardabstände«. 11. Speichern Sie die Änderungen mit Speichern und Schliessen.

Nach diesem ToDo können Sie in der Stylesheet-Übersicht mit der Liste Filtern jeweils nur eine der vier Kategorien anzeigen lassen. Abbildung 7.9 zeigt den Filter mit der Kategorie »Schriftformatierung«.

Abbildung 7.9 Der Filter mit der Kategorie »Schriftformatierung« in Aktion

Um den Filter wieder außer Kraft zu setzen, wählen Sie in der Auswahlliste die Option Kategorie und klicken danach auf den goldenen Doppelpfeil ganz rechts außen.

170

Die Erweiterung »[csseditor]«

7.5

Die Erweiterung »[csseditor]«

Den internen CSS-Editor von Contao haben Sie bereits kennengelernt. In diesem Abschnitt möchte ich Ihnen die Erweiterung [csseditor] vorstellen, die die Arbeit im Quelltext von internen Stylesheets ermöglicht. Die Erweiterung [csseditor] ist vollständig kompatibel mit dem internen CSS-Editor (der Bearbeitung von CSS über das HTML-Formular), sodass Sie beliebig zwischen den beiden wechseln können.

7.5.1

Die Erweiterung »[csseditor]« installieren und kennenlernen

Im folgenden ToDo installieren Sie zunächst die Erweiterung [csseditor]. ToDo: Die Erweiterung »[csseditor]« installieren 1. Öffnen Sie das Backend-Modul System 폷 Erweiterungskatalog. 2. Geben Sie oben im Arbeitsbereich im Feld Suchen »css« ein. 3. Klicken Sie in der Ergebnisliste auf das grüne [csseditor]. 4. Installieren Sie die Erweiterung mit einem Klick auf die Schaltfläche Installieren am unteren Fensterrand. 5. Bestätigen Sie die Installation mit einem Klick auf Weiter. 6. Klicken Sie nach erfolgreicher Installation auf Weiter. 7. Bestätigen Sie die Meldung »Die Datenbank ist aktuell« mit OK.

Nach erfolgreicher Installation sehen Sie im Modul Erweiterungsverwaltung das Modul [csseditor]. Nach der Installation der Erweiterung gibt es in System 폷 Einstellungen einen neuen Bereich namens CSS Editor settings, in dem Sie z. B. die Schriftart und die Fenstergröße für den Editor einstellen können. Außerdem ist bei der Bearbeitung der Stylesheets im Backend-Modul Themes 폷 Stylesheets ein neues Symbol aufgetaucht (Abbildung 7.10). Um den Quelltext eines internen Stylesheets zu bearbeiten, klicken Sie statt auf den gelben Bleistift auf das blau-weiße Symbol rechts daneben. Abbildung 7.11 zeigt das Stylesheet bildschirm im [csseditor]. Die Symbolleiste oberhalb des Editorfensters enthält einige nützliche Befehle: zu einer bestimmten Zeile springen, Suchen und Ersetzen, Syntax-Highlighting einund ausschalten und neu laden, und im Vollbildmodus arbeiten.

171

7.5

7

Webseiten gestalten: Contao und CSS

Abbildung 7.10 Die neuen Symbole öffnen Stylesheets im »[csseditor]«.

Abbildung 7.11 Das Stylesheet »bildschirm« in »[csseditor]«

172

Die Erweiterung »[csseditor]«

7.5.2

Interne Stylesheets extern bearbeiten

Die Erweiterung [csseditor] ermöglicht noch eine Variante der CSS-Bearbeitung, die viele Autoren gerne einsetzen: 왘

Sie bearbeiten die von Contao generierten Stylesheets im Hauptordner mit einem externen Editor.

왘

Anschließend kopieren Sie das CSS über [csseditor] wieder zurück in die Datenbank.

Dieser Weg erleichert das »Zurück in die Datenbank« der editierten Styles. Drei einfache (Strg)-Kombinationen reichen aus: 1. Markieren Sie im externen Editor mit (Strg) + (a) alle Styles. 2. Kopieren Sie sie mit (Strg) + (c) in die Zwischenablage, 3. Fügen Sie sie mit (Strg) + (v) in den [csseditor] ein. Die Erweiterung [csseditor] speichert die Styles dann in der Datenbank, genau wie es bei einem CSS-Import der Fall wäre. Ein potenzieller Nachteil dieses Workflow ist es, dass die im Hauptordner von Contao generierten CSS-Dateien sehr platzsparend formatiert sind und weder Kommentare noch Kategorien enthalten. Wenn diese Stylesheets bearbeitet und zurück in die Datenbank kopiert werden, bleiben Kommentare und Kategorien meist früher oder später auf der Strecke. Teamwork: »[csseditor]« und »Firebug« oder »Web Developer Toolbar« Wenn Sie mit dem Firefox und den Add-Ons Firebug oder Web Developer Toolbar arbeiten, können Sie sich sogar den externen Editor sparen. Beide Add-Ons bieten Ihnen die Möglichkeit, das CSS direkt im Browser zu editieren und die Auswirkungen der Styles ohne Speicherung direkt im Browser zu sehen.

7.5.3

Einschränkungen bei der Arbeit mit »[csseditor]«

Quelltextfans werden aufatmen und sich ein Stück weit zu Hause fühlen, aber beim Speichern im [csseditor] gelten ähnliche Einschränkungen wie beim internen Editor, die hier nicht unerwähnt bleiben sollen: 왘

Die Reihenfolge der Deklarationen innerhalb eines Styles wird nach dem Speichern geändert. Das ist zwar nicht schlimm, aber wissenswert.

왘

Sie können für Boxmodell-Eigenschaften im [csseditor] zwar für oben, unten, links und rechts getrennte Einheiten eingeben, diese erscheinen nach dem Speichern in der Datenbank aber nicht mehr korrekt.

173

7.5

7

Webseiten gestalten: Contao und CSS

왘

Untereinander stehende, doppelte Deklarationen mit unterschiedlichen Werten zum Testen kann man zwar hinschreiben, beim Speichern wird aber die zuerst notierte Deklaration gelöscht.

왘

Mit einem Klick auf das Auge vorübergehend ausgeblendete Styles werden im [csseditor] nicht angezeigt. So weit ist das okay. Beim Speichern werden sie aber gelöscht. Oops.

Trotz dieser (und vielleicht noch anderer) Einschränkungen ist die Erweiterung [csseditor] bei der Bearbeitung von internen Stylesheets im Backend ein sehr nützliches Werkzeug.

7.6

Übung: Gestaltung der Navigation per CSS

Nach dieser Einführung in die Arbeit mit internen Stylesheets und dem BackendModul Themes 폷 Stylesheets gibt es jetzt eine kleine Übung für zwischendurch. Die Navigation in der linken Spalte soll mit den folgenden Styles gestaltet werden, wobei die Kommentare nur zur Erläuterung dienen und nicht unbedingt übertragen werden müssen: /* ============================= Vertikale Navigation ========================== */ #left div.mod_navigation { float: left; width: 142px; font-size: 12px; margin: 32px 0 0 0; } #left .mod_navigation ul{ background-color: #fff; padding: 0; margin: 0; } #left .mod_navigation li{ margin: 0; list-style-type: none; } /* Menüpunkte gestalten */ #left .mod_navigation a, #left .mod_navigation span { display: block; text-decoration: none; background-color: #ADCBE6;

174

Übung: Gestaltung der Navigation per CSS

color: #000; padding: 8px 8px 8px 18px; border-top: 1px solid #fff; } /* Rollover und TAB-Fokus */ #left .mod_navigation a:hover, #left .mod_navigation a:focus { background: #2D5B85; color: #fff; } /* Aktiven Menüpunkt hervorheben */ #left .mod_navigation span.active, #left .mod_navigation .trail { background: #2D5B85; color: #fff; } /* Patches: hasLayout für IE6 */ * html .mod_navigation ul, * html .mod_navigation a, * html .mod_navigation span { height:1px; } Listing 7.5

Das CSS für die vertikale Navigation

Das ToDo ist kurz und bündig und liefert als Ergebnis ein Stylesheet zur Gestaltung der Navigation mit den Styles aus Listing 7.5. ToDo: Erstellen Sie ein internes Stylesheet für die Navigation 1. Erstellen Sie mit den Styles aus Listing 7.5 ein internes Stylesheet mit dem Namen navigation. 2. Definieren Sie den Medientyp screen für das Stylesheet. 3. Weisen Sie das Stylesheet dem Seitenlayout zu. 4. Die Reihenfolge der Stylesheets soll wie folgt sein: basic, navigation, bildschirm.

Bei der Erstellung von internen Stylesheets haben Sie mehrere Möglichkeiten: 왘

Sie können das CSS direkt im internen Editor im HTML-Formular eingeben. Das übt, und Sie lernen den Editor dabei kennen.

왘

Sie können das Stylesheet in Ihrem Lieblingseditor als Datei erstellen und dann importieren.

왘

Sie können das Stylesheet navigation.css von der Buch-DVD importieren.

Die Website sieht nach dieser Übung so aus wie in Abbildung 7.12.

175

7.6

7

Webseiten gestalten: Contao und CSS

Abbildung 7.12

Die gestylte Navigation im Frontend

Im Backend-Modul Themes 폷 Stylesheets gibt es jetzt die drei Stylesheets basic, navigation und bildschirm, die im Seitenlayout genau in dieser Reihenfolge eingebunden werden. Der »Augen-Klick«: Auswirkungen einzelner Styles analysieren Bei internen Stylesheets können Sie wie erwähnt ganz bequem die Auswirkungen der einzelnen Styles in einem Stylesheet analysieren: 왘

Öffnen Sie das Stylesheet navigation im Backend.

왘

Klicken Sie auf das grüne Auge, um einen Style zu neutralisieren.

왘

Laden Sie das Frontend im Browser neu, und schon sehen Sie die Seite ohne den Style.

So können Sie Style für Style die Auswirkungen der einzelnen Styles untersuchen und müssen nicht immer erst auskommentieren und dann speichern.

7.7

Externe Stylesheets: CSS außerhalb der Datenbank

Wer es gewohnt ist, sein CSS von Hand zu schreiben, fühlt sich bei der Arbeit mit dem HTML-Formular eventuell an den Titel eines modernen Westerns erinnert: »Der sich den Wolf klickt«. Und auch die Erweiterung [csseditor] mit ihren Einschränkungen und den viel zu großen Einzügen kommt Quelltext-CSSlern eher vor wie »Wohnung renovieren durch den Briefschlitz«.

176

Externe Stylesheets: CSS außerhalb der Datenbank

Beides kann für viele den gewohnten CSS-Editor nicht ersetzen, egal wie er heißt. In diesem Abschnitt möchte ich Ihnen deshalb zeigen, wie man mit externen Stylesheets arbeitet, die in einem beliebigen Editor geschrieben, als Datei mit der Endung .css gespeichert und dann mit einem Seitenlayout in Contao verbunden werden.

7.7.1

Vorgehensweise: Die Arbeit mit externen Stylesheets

Es gibt viele verschiedene Möglichkeiten, um bei Contao mit externen Stylesheets zu arbeiten, aber ich empfehle Ihnen folgende Vorgehensweise: 왘

Speichern Sie alle Stylesheets in einem Ordner unterhalb von tl_files zusammen mit den Layout-Grafiken für das Theme.

왘

Laden Sie in einem zentralen Stylesheet mit dem passenden Namen zentrale.css mit der Anweisung @import die drei Stylesheets basic.css, navigation.css und bildschirm.css.

왘

Binden Sie das zentrale Stylesheet zentrale.css in Contao ein.

Mit diesem Setup werden die Styles zur Formatierung der Webseiten nicht mehr in der Datenbank gespeichert, sondern in ganz normalen CSS-Dateien unterhalb des Ordners tl_files auf dem Webspace. Das Backend-Modul Themes 폷 Stylesheets ist bei diesem Setup zwar komplett arbeitslos, aber die externen Stylesheets arbeiten problemlos mit dem CSS-Framework von Contao zusammen. Die im Backend-Modul Themes 폷 Seitenlayout in den Bereichen Kopf- und Fusszeile, Spaltenkonfiguration und Statisches Layout definierten Einstellungen für das Layout funktionieren auch mit externen Stylesheets. Sie kombinieren also die Freiheit der manuellen CSS-Bearbeitung mit dem Komfort der Abteilung Seitenlayouts. Schritt 1: Stylesheets nach »tl_files/...« kopieren Die externen Stylesheets sollten auf jeden Fall in einem Ordner unterhalb von tl_files/ liegen, damit sie auch über die Dateiverwaltung von Contao zugänglich sind. Dadurch haben Sie drei Möglichkeiten zur Bearbeitung von Styles. Sie können 왘

die Styles lokal im Editor bearbeiten und per FTP hochladen.

왘

die Styles im Editor per FTP direkt auf dem Webspace bearbeiten.

왘

die Styles direkt in der Dateiverwaltung von Contao editieren.

Da Stylesheets immer auch zu einem Theme gehören, speichern Sie die Dateien am besten im entsprechenden Theme-Ordner.

177

7.7

7

Webseiten gestalten: Contao und CSS

Im folgenden ToDo deaktivieren Sie die internen Stylesheets im Seitenlayout und kopieren die von Contao generierten Stylesheets aus dem Hauptordner in tl_files/ themes/blaues_theme. ToDo: Die drei Stylesheets in den Theme-Ordner kopieren 1. Öffnen Sie im Backend das Modul Themes 폷 Seitenlayouts. 2. Öffnen Sie das Seitenlayout Standardlayout [Standard]. 3. Deaktivieren Sie im Bereich Stylesheets die Kontrollkästchen vor den drei Stylesheets. 4. Klicken Sie auf Speichern und Schliessen. 5. Öffnen Sie den Hauptordner der Contao-Installation in einem Dateimanager. 6. Kopieren Sie die drei Stylesheets basic.css, navigation.css und bildschirm.css in den Ordner tl_files/themes/blaues_theme/.

Die automatisch generierten Stylesheets im Hauptordner sind sehr platzsparend und komprimiert formatiert, sodass Sie diese vor einer weiteren Bearbeitung im eigenen CSS-Editor erst einmal übersichtlicher gestalten sollten. Durch das Deaktivieren der drei internen Stylesheets im Seitenlayout sind die Webseiten im Frontend momentan vorübergehend ungeschminkt, da die externen Stylesheets noch nicht mit dem Seitenlayout verbunden sind. Aber das wird sich gleich ändern. Schritt 2: Ein zentrales Stylesheet erstellen Die Erstellung eines zentralen Stylesheets ist nicht zwingend notwendig, erleichtert aber den Umgang mit den Stylesheets, da Sie in Contao nur ein Stylesheet einbinden müssen: 왘

Im Backend von Contao binden Sie das zentrale Stylesheet ein.

왘

Die drei Stylesheets werden in zentrale.css mit @import importiert.

왘

In zentrale.css können Sie im Editor bequem festlegen, welche Stylesheets geladen werden.

Besonders in der Entwicklungsphase ist diese Flexibilität von Vorteil, aber die Sache hat auch einen kleinen Nachteil: Da der Internet Explorer die Angabe eines Medientyps am Ende von @import nicht versteht, muss diese mit der Anweisung @media in den einzelnen Stylesheets erfolgen. Das wird im folgenden ToDo gleich mit erledigt.

178

Externe Stylesheets: CSS außerhalb der Datenbank

Eine Anmerkung noch vorweg: Speichern Sie die Dateien mit dem Zeichensatz UTF-8 oder UTF-8 ohne BOM, also nicht alsANSI oder ISO-8859-x oder sowas. Contao verwendet durchgängig UTF-8. ToDo: Zentrales Stylesheet erstellen und Medientypen definieren 1. Erstellen Sie in einem ganz normalen Editor ein neues Stylesheet. 2. Speichern Sie das Stylesheet als zentrale.css in dem Ordner namens tl_files/themes/ blaues_theme/. 3. Fügen Sie die folgenden Zeilen CSS hinzu: @import url(basic.css); @import url(bildschirm.css); @import url(navigation.css);

4. Öffnen Sie die drei Stylesheets basic.css, navigation.css und bildschirm.css in einem Editor. 5. Fügen Sie ganz am Anfang der drei Stylesheets folgende Zeile hinzu: @media screen {

6. Fügen Sie ganz am Ende der drei Stylesheets folgende Zeile hinzu: } /* Ende @media */

7. Speichern Sie alle drei Stylesheets.

Im Frontend hat sich noch nichts geändert, aber wie Abbildung 7.13 zeigt, liegen die Stylesheets im Ordner blaues_theme bereit.

Abbildung 7.13 Die vier Stylesheets im Theme-Ordner

Beachten Sie die Bearbeitungssymbole rechts neben den Stylesheets: Der gelbe Bleistift dient hier nur zur Umbenennung der Dateien; zur Bearbeitung der Stylesheets direkt in der Dateiverwaltung klicken Sie auf das blau-weiße Symbol (2. Symbol von rechts). Sie können im Notfall also problemlos von überall eingreifen und die externen Stylesheets in der Dateiverwaltung von Contao bearbeiten. Dazu benötigen Sie weder eine lokale Kopie des Stylesheets noch einen FTP-Zugang.

179

7.7

7

Webseiten gestalten: Contao und CSS

Schritt 3: Das zentrale Stylesheet im Seitenlayout einbinden Die Kontrollkästchen zur Aktivierung der Stylesheets im Seitenlayout Standardlayout[Standard] gelten nur für die in der Datenbank gespeicherten internen Stylesheets und nicht für die externen CSS-Dateien. Um ein externes Stylesheet mit Contao zu verbinden, gibt es zwei Möglichkeiten: 왘

Im Seitenlayout gibt es im Bereich Experten-Einstellungen ein Feld namens Zusätzliche Head-Tags, in das Sie beliebige Elemente eingeben können, die bei der Erstellung der Seite kurz vor eingebunden werden.

왘

Im Seitentemplate fe_page.tpl können Sie den Weg zu zentrale.css bildlich gesprochen fest verdrahten.

Ein potenzieller Nachteil der Einbindung von externen Stylesheets im Seitenlayout ist, dass Sie den Link zum Stylesheet in jedem Seitenlayout pflegen müssen. Bei einer komplexen Site mit vielen Seitenlayouts ist das sehr umständlich, und deshalb binden Sie die externen Stylesheets gleich direkt im Seitentemplate fe_ page.tpl ein. Im folgenden ToDo erstellen Sie mit dem Backend-Modul Templates eine Kopie des Seitentemplates fe_page.tpl und fügen in dieser Kopie den Link zum zentralen Stylesheet ein. ToDo: Das zentrale Stylesheet direkt im Seitentemplate einbinden 1. Öffnen Sie das Backend-Modul Templates. 2. Klicken Sie rechts oben auf Neues Template. 3. Wählen Sie aus der Liste das Seitentemplate fe_page.tpl. 4. Speichern Sie die Kopie im Zielverzeichnis templates/blaues_theme. 5. Klicken Sie auf das blau-weiße Symbol zum Bearbeiten von fe_page.tpl. 6. Fügen Sie nach der PHP-Anweisung in Zeile 13 stylesheets;?> ein paar neue Zeilen ein. 7. Geben Sie in einer der neuen Zeilen den folgenden Quelltext ein, um Contao den Weg zum zentralen Stylesheet zu zeigen (in einer Zeile):

8. Beenden Sie die Bearbeitung mit Speichern und Schliessen.

Wenn alles geklappt hat, sieht das Frontend in Abbildung 7.14 wieder genauso aus wie mit den internen Stylesheets in Abbildung 7.12.

180

Externe Stylesheets: CSS außerhalb der Datenbank

Abbildung 7.14 Die Beispielsite mit externen Stylesheets

Mit diesem Setup können Sie ganz normale Stylesheets in einem ganz normalen Editor bearbeiten und mit der Datei zentrale.css bequem verwalten. Mehr zu »$this->framework« und »$this->stylesheets« Im Quelltext von fe_page.tpl sind Ihnen eventuell einige PHP-Schnipsel aufgefallen, insbesondere die folgenden zwei: framework; ?> stylesheets; ?>

Mehr zu diesen PHP-Anweisungen erfahren Sie in Abschnitt 7.10, »Know-how: Das CSS-Framework von Contao«.

7.7.2

Integration von externen Stylesheets in »Seitenlayouts«

Bei der Verwendung von externen Stylesheets können Sie im Backend-Modul Seitenlayouts fast alle relevanten Bereiche des CSS-Frameworks nutzen. Sie können 왘

eine Kopf- und Fußzeile generieren.

왘

die Spaltenkonfiguration definieren.

왘

die Breite und Ausrichtung des Layouts festlegen.

Externe Stylesheets arbeiten also problemlos mit dem CSS-Framework von Contao zusammen, allerdings können Sie die Stylesheets nicht per Mausklick ins Seitenlayout einbinden, sondern müssen dazu das Feld Zusätzliche Head-Tags be-

181

7.7

7

Webseiten gestalten: Contao und CSS

nutzen oder die Stylesheets direkt im verwendeten Seitentemplate einbinden. Abbildung 7.15 zeigt das in der Übersicht.

Abbildung 7.15 Einbindung von externen Stylesheets in Seitenlayouts

7.8

Teamwork: Interne und externe Stylesheets zusammen

Sie haben in diesem Kapitel bis jetzt zwei grundlegend verschiedene Methoden im Umgang mit CSS bei Contao kennengelernt: 왘

Interne Stylesheets werden im internen Editor bearbeitet, in der Datenbank gespeichert und über das Backend-Modul Seitenlayouts eingebunden. Contao generiert automatisch CSS-Dateien im Hauptordner.

왘

Externe Stylesheets werden unterhalb des Ordners tl_files gespeichert, mit einem externen Editor bearbeitet und manuell in das Seitenlayout oder in das Seitentemplate eingebunden.

In diesem Abschnitt geht es um zwei Varianten der Zusammenarbeit von internen und externen Stylesheets. Die erste Möglichkeit ist ein »Nacheinander«: 왘

Die arbeitsintensive Entwicklungsphase erfolgt im externen Editor.

왘

Vor dem Launch werden die externen Stylesheets dann importiert, gecheckt und kategorisiert.

Die externen Stylesheets werden vom Webspace entfernt, und nach dem Launch der Site werden die Stylesheets intern weitergepflegt.

182

Fazit: Jeder kann so arbeiten wie er gerne möchte

Die zweite Variante ist hingegen mehr ein »Miteinander«: 왘

Die Site wird mit externen Stylesheets gestaltet.

왘

Zusätzlich werden interne Stylesheets erstellt und benutzt.

Diese Möglichkeit ist zum Beispiel von Vorteil, wenn ein Kunde oder ein Redakteur selbst Hand an die Gestaltung der Website anlegen möchte oder soll, mit der Syntax von CSS aber nicht vertraut ist. Bei der Einbindung der Stylesheets sollte die Reihenfolge so festgelegt werden, dass die internen Stylesheets nach den externen eingebunden werden, damit sie diese im Rahmen der Kaskade überschreiben. Im Klartext: Es empfiehlt sich eventuell, die externen Stylesheets nicht im Seitenlayout einzubinden, sondern im Seitentemplate, da dort die Reihenfolge individuell bestimmt werden kann.

7.9

Fazit: Jeder kann so arbeiten wie er gerne möchte

Die Möglichkeiten von Contao bei der Bearbeitung von CSS könnte man mit den Worten »alles kann, nichts muss« zusammenfassen, und jeder kann seinen eigenen Workflow finden: Mit internen Stylesheets, externen Stylesheets oder einer Mischung aus beiden. Sie müssen dabei drei Entscheidungen treffen: 왘

Editor: Wie möchte ich das CSS bearbeiten?

왘

Speicherort: Wo sollen die Styles gespeichert werden?

왘

Einbindung: Wie werden die Stylesheets in Contao eingebunden?

Abbildung 7.16 zeigt die unterschiedlichen Kombinationsmöglichkeiten.

Abbildung 7.16

Contao und CSS – die Übersicht

183

7.9

7

Webseiten gestalten: Contao und CSS

Mein persönlicher Favorit ist übrigens die Arbeit mit externen Stylesheets (Nr. 3), zumindest während der Entwicklungsphase, an der intensiv am CSS gearbeitet wird. Nach der Fertigstellung des Layouts kann man die externen Stylesheets importieren und mit internen Stylesheets (Nr. 1) weiterarbeiten. Das CSS-Framework erweitern: Arbeiten mit Layoutrastern (Grids) Falls Sie gerne mit Grids arbeiten, gibt es für Contao ein Grid-Stylesheet, das das Arbeiten mit einem 960px breiten Raster ermöglicht: 왘

Das CSS-Framework erweitern – gridpx.css http://www.contao.org/herunterladen.html

Das Stylesheet erweitert das interne CSS-Framework von Contao und ist nur 1,8 KB groß. Voraussetzung ist das Reset-Stylesheet basic.css, das Sie bereits nutzen. gridpc.css stellt ein prozentbasiertes Raster zur Verfügung. In einem Vortrag auf dem Usertreffen 2009 hat Leo Feyer die grundlegende Funktionsweise der Grid-Erweiterung erläutert: 왘

Vortrag »Das TYPOlight CSS-Framework« von Leo Feyer (PDF) http://www.contao.org/usertreffen-2009.html

Wenn Sie lieber mit einem externen CSS-Framework wie YAML, 960GS oder Blueprint arbeiten, finden Sie in Abschnitt 22.4, »Layouts für Fortgeschrittene«, ein paar Tipps zur Kooperation von Contao mit externen CSS-Frameworks.

7.10

Know-how: Das CSS-Framework von Contao

Der Benutzer sieht vom Contao-CSS-Framework nur die Einstellungen im Seitenlayout. Technisch gesehen besteht das Framework im Kern aus drei Dateien: 왘

dem Seitentemplate fe_page.tpl für die HTML-Struktur

왘

dem Stylesheet system/contao.css als Fundament

왘

dem Stylesheet system/iefixes.css mit Patches für IE 6 und 7

In diesem Abschnitt wird erklärt, wie diese Dateien zusammenarbeiten.

7.10.1 Das HTML-Grundgerüst von Contao in »fe_page.tpl« Das Fundament des CSS-Frameworks von Contao ist das Seitentemplate fe_ page.tpl. Mit diesem Template lassen sich sehr viele verschiedene Layouts realisieren, und einer der größten Fehler von Contao-Einsteigern ist es, gleich zu Beginn ein eigenes Seitentemplate zu erstellen und fe_page zu ignorieren.

184

Know-how: Das CSS-Framework von Contao

Das Seitentemplate fe_page stellt, wie Sie in Abschnitt 6.2, »»No layout found« – Theme und Seitenlayout erstellen«, bereits gesehen haben, fünf Layoutbereiche zur Verfügung: 왘

Kopfzeile: #header

왘

Linke Spalte: #left

왘

Rechte Spalte: #right

왘

Hauptspalte: #main

왘

Fußzeile: #footer

Ein Blick in den Quelltext der dreispaltigen Beispielsite zeigt, dass dort im body folgendes HTML-Grundgerüst existiert:
 
 
 
 
 
Listing 7.6

Das HTML-Grundgerüst von Contao

Dieser Aufbau hat die folgenden Charakteristika: 왘

#wrapper umschließt alle fünf Layoutbereiche.

왘

Die drei Bereiche #left, #right und #main sitzen außerdem noch in einem div namens #container.

왘

Alle fünf Layoutbereiche haben ein inneres div mit der Klasse inside.

왘

Innerhalb von #main gibt es noch ein Extra-div mit der ID clear.

185

7.10

7

Webseiten gestalten: Contao und CSS

Abbildung 7.17 zeigt die fünf Layoutbereiche auf der Startseite.

Abbildung 7.17 Die Layoutbereiche aus »fe_page.tpl« auf der Startseite

Das doppelte DIV Die Dopplung der div-Elemente hat besonders bei flexiblen Layouts viele Vorteile und findet sich auch in anderen CSS-Frameworks wie YAML. Bei Bedarf finden Sie mehr dazu im ersten Teil von »Little Boxes«: 왘

Kap. 17.3 – Mehrspaltige, flexible Layouts: Das doppelte DIV http://bit.ly/b4YyZc

Bei vielen statischen Layouts sind die inneren DIVs nicht zwingend notwendig, aber sie stören nicht weiter, und manchmal sind sie sogar nützlich.

7.10.2 »$this->framework«: Die Einstellungen aus dem Seitenlayout In diesem Abschnitt schauen Sie sich im Seitentemplate fe_page.tpl den Bereich zwischen und genauer an und lernen dabei einige für das CSSFramework wichtige PHP-Befehle kennen. ToDo: Das Seitentemplate »fe_page.tpl« im Backend öffnen 1. Öffnen Sie im Backend-Modul Templates den Ordner blaues_theme. 2. Klicken Sie zum Bearbeiten der fe_page.tpl auf das blau-weiße Symbol (2. Symbol von rechts).

186

Know-how: Das CSS-Framework von Contao

Jetzt sehen Sie den Quelltext des Seitentemplates in einem Editorfenster. Am Anfang des Quelltextes stehen ein paar PHP-Anweisungen, die unter anderem den DOCTYPE und den Seitentitel definieren. Nach dem Titel überspringen Sie ein paar Meta-Elemente und landen bei einigen für das CSS-Framework sehr wichtigen Zeilen: Listing 7.7

$this->framework; ?> $this->stylesheets; ?> $this->mooScripts; ?> $this->head; ?>

Einbinden der Stylesheets im »« von »fe_page.tpl«

Die Zeile echo $this->framework heißt frei übersetzt: »Schreibe den Wert der Variablen $this->framework in den Quelltext der Startseite.« In dieser Variablen werden einige Einstellungen aus dem Seitenlayout gespeichert, wie z. B. die Breite und Ausrichtung des Layouts und die Spaltenkonfiguration. Das Ergebnis dieser Anweisung sehen Sie in Listing 7.8, wobei ich Unwichtiges weggelassen und einige Kommentare ergänzt habe: <style type="text/css" media="screen"> Listing 7.8

Die Ausgabe von »$this->framework«

Der Style-Block am Anfang des Listings enthält zwischen den XHTML-kompatiblen Kommentarzeichen (das ist das wirre Zeug nach <style> und vor ) das CSS für die Einstellungen, die Sie im Seitenlayout »Standardlayout« gemacht haben:

187

7.10

7

Webseiten gestalten: Contao und CSS

왘

einen zentrierten Wrapper mit einer Breite von 960px

왘

die zwei Spalten #left und #right mit je 182px Breite

왘

den Hauptbereich #main mit einem margin-left und margin-right von je 182px

Nach diesem Style-Block werden zwei weitere Stylesheets aufgerufen: 왘

die Datei system/contao.css

왘

die Datei system/iefixes.css in einem Conditional Comment für IE7 oder ältere Versionen

Diese beiden Stylesheets gehören zum CSS-Framework und werden ab Seite 188 näher vorgestellt. Ein Style-Block? Ist das nicht unelegant? Viele gestandene CSSler werden sich bei dem Anblick eines Style-Blocks im Head der Seite wundern, gilt CSS in einem Style-Block doch eher als unschön. CSS in der HTMLDatei ist aber ein völlig legitimer Bestandteil der Kaskade, und das im Seitenlayout definierte Grundgerüst als Style-Block einzufügen ist eine gute Idee: So kann das CSS-Framework von Contao auch in externen Stylesheets problemlos genutzt werden.

7.10.3 Stylesheets einbinden: »$this->stylesheets« und »$this->head« Nach $this->framework werden im HTML-Quelltext die im Seitenlayout angekreuzten internen Stylesheets eingebunden. Die Anweisung echo $this->stylesheets lädt für jedes aktivierte interne Stylesheet ein link-Element, und zwar in genau der Reihenfolge, in der die Stylesheets im Seitenlayout aufgelistet sind. Wenn kein internes Stylesheet vorhanden ist, weil Sie zum Beispiel ausschließlich mit externen Stylesheets arbeiten, wird hier schlicht und einfach gar nichts eingefügt. Ganz am Ende des Headbereichs steht noch eine Zeile mit der Anweisung echo $this->head, die im Seitenlayout im Feld Zusätzliche -Tags definierte zusätzliche HTML-Elemente einfügt. Dieses Feld haben Sie bei der Einbindung des externen Stylesheets bereits kennengelernt.

7.10.4 Das CSS-Framework von Contao aus Benutzersicht Aus der Sicht eines normalen Backend-Benutzers sieht das CSS-Framework sehr viel komfortabler aus: Ein normaler Benutzer benutzt das CSS-Framework ganz

188

Know-how: Das CSS-Framework von Contao

einfach über die Einstellungen im Backend-Modul Themes 폷 Seitenlayouts. Abbildung 7.18 verdeutlicht diesen Sachverhalt sehr schön.

Abbildung 7.18 Das CSS-Framework von Contao aus Benutzersicht

Und so finden die Seitenlayout-Einstellungen aus Abbildung 7.18 den Weg in den Quelltext: 1 Kopf- und Fußzeile werden über $this->framework eingefügt. 2 Die Spaltenkonfiguration wird ebenfalls über $this->framework eingefügt. 3 Interne Stylesheets werden über $this->stylesheets eingebunden. 4 Breite und Ausrichtung des Layouts werden per $this->framework bestimmt.

189

7.10

7

Webseiten gestalten: Contao und CSS

7.10.5 Der Kern des CSS-Frameworks: »system/contao.css« Das Stylesheet contao.css aus dem Systemordner ist ein wichtiger Teil des Framework-Kerns und umfasst nur wenige, im folgenden Listing etwas platzsparend dargestellte Zeilen: body{ margin: 0; padding: 0; font-size: 100.01 %; text-align: left; position: relative; } select, input, textarea { font-size: 99 %; } form { margin: 0; padding: 0; } img { border: 0; } #left { float: left; } #right { float: right; } #main { width: auto; position: relative; } .inside { position: relative; text-align: left; } .block{overflow: hidden;} .clear,#clear{ height: 0.1px; font-size: 0.1px; line-height: 0.1px; clear: both; } .invisible{ width: 0px; height: 0px; left: –1000px; top: –1000px; position: absolute; overflow: hidden; display: inline; } Listing 7.9

Das Stylesheet »contao.css« – der harte Kern des Frameworks

Am Anfang werden ein paar Abstände und Rahmenlinien definiert und danach die drei Hauptspalten positioniert: 왘

Das in allen Layoutbereichen enthaltene innere DIV wird mit .inside relativ positioniert und dient somit als Bezugspunkt für darin enthaltene absolute Positionierungen.

왘

Die Klasse .block bekommen alle Artikel und Inhaltselemente, und mit overflow:hidden sorgen Sie dafür, dass darin enthaltene Floats umschlossen werden.

190

Know-how: Das CSS-Framework von Contao

Elemente, die einen Floatzustand beenden sollen, bekommen die Klasse .clear oder die ID #clear und werden so gut wie unsichtbar gemacht. Letzteres ist dann der Hauptzweck der Klasse .invisible. Das Umschließen von gefloateten Elementen Falls Ihnen der Trick mit der Klasse .block und dem overflow:hidden nichts sagt, können Sie sich im ersten Teil von Little Boxes ausführlich informieren: 왘

Kap. 14 – Containing Floats: gefloatete Elemente einschließen http://bit.ly/9mTifx

Das Umschließen von Floats ist beim Layouten mit CSS eine absolute Basistechnik und sollte von jedem Webdesigner verstanden werden.

7.10.6 Patches für IE6 und 7: »system/iefixes.css« Der ewige Refrain ist für die meisten Weblayouts das Gepatche für die Internet Explorer. Bei Contao finden Sie die wichtigsten Flicken im Stylesheet iefixes.css: * html .block {overflow: auto; zoom: 1;} * html #container, * html .mod_article {zoom: 1;} * html #left, * html #right {display: inline;} * html a, * html a:hover {background-color: transparent;} * html i, * html em{ overflow: visible; display: inline-block;} body {margin-left: 1px;} *:first-child + html #main {position: static;} Listing 7.10

Die Patches für Internet Explorer 6 und 7

Und hier ist die Erklärung dieser Zeilen: 왘

In der Klasse .block wird mit zoom:1 für alle Inhaltselemente vorsorglich schon mal hasLayout aktiviert.

왘

Das display:inline für die gefloateten Seitenspalten wirkt dem berüchtigten Double Float Margin-Bug entgegen und verhindert eine Verdopplung der Außenabstände.

왘

Die Zeilen für Hyperlinks und kursive Elemente dienen der Behebung des Guillotine- und des Italics-Bugs.

왘

Der linke Außenabstand von 1px für body hilft in bestimmten Situationen bei der Ausrichtung von Hintergrundbildern.

왘

Last, but not least sorgt die letzte Zeile dafür, dass die Hauptspalte #main im IE7 korrekt ausgerichtet und gegebenenfalls gezoomt wird.

191

7.10

7

Webseiten gestalten: Contao und CSS

Was bitte ist »hasLayout«? Falls Ihnen der Begriff hasLayout nichts sagt, können Sie sich z. B. in Little Boxes 1 darüber informieren: 왘

Der Internet Explorer und hasLayout http://bit.ly/b1iFsf

Ab Internet Explorer 8 ist das Konzept Geschichte, und das ist auch gut so.

192

In diesem Kapitel geht es ausschließlich um Navigation. Sie lernen die Navigationsmodule von Contao kennen, die Ihnen die Erstellung einer übersichtlichen Navigation erleichtern, egal wie viele Seiten die Site hat.

8

Navigationen erstellen in Contao

Eine Website ist in gewisser Weise wie ein öffentliches Gebäude. Beide werden gebaut, um Besucher zu empfangen, und bei beiden sollten die Besucher sich auf Anhieb zurechtfinden und möglichst schnell an ihr Ziel gelangen. Ein Mittel dazu ist eine gute Navigation, und in diesem Kapitel erfahren Sie, welche Navigationsmöglichkeiten es in Contao von Haus aus gibt.

8.1

Übersicht: Seiten, Module und Artikel

Bevor Sie sich in diesem Kapitel intensiv der Arbeit mit Navigationsmodulen widmen, möchte ich kurz das Grundprinzip der Zusammenarbeit von Seiten, Modulen und Artikeln in Contao erläutern: 왘

Eine Seite besteht standardmäßig aus bis zu fünf Layoutbereichen: Kopfzeile, linke Spalte, Hauptspalte, rechte Spalte und Fußzeile.

왘

Der Inhalt für diese Bereiche kommt entweder aus einem Artikel oder aus einem Frontend-Modul.

왘

Im Seitenlayout werden Artikel und Frontend-Module einem der standardmäßig fünf Layoutbereiche zugeordnet.

Auf der Startseite der Beispielsite sieht das so aus wie in Abbildung 8.1. In diesem Kapitel geht es um die Arbeit mit Navigationsmodulen. Artikel und Inhaltselemente sowie andere Module kommen dann Stück für Stück ab dem nächsten Kapitel dran.

193

8

Navigationen erstellen in Contao

Abbildung 8.1

8.2

Inhalte stammen aus Modulen oder aus Artikeln

Die Navigationsmodule im Überblick

Navigationen werden in Contao durch Module erzeugt, und für verschiedene Arten von Navigationen gibt es verschiedene Modultypen. Abbildung 8.2 zeigt die verschiedenen Navigationsmodule, die Contao von Haus aus kennt.

Abbildung 8.2

Neues Modul erstellen – die Navigationsmodule

Hier eine kurze Beschreibung dieser Navigationsmodule:

194

Die Seitenstruktur der Beispielsite erweitern

왘

Navigationsmenü Der wohl wichtigste Modultyp. Erstellt basierend auf dem Seitenbaum eine ungeordnete Liste mit Links und kann sehr flexibel konfiguriert werden. Ob die Navigation im Browser vertikal oder horizontal erscheint, entscheidet das CSS, nicht das Modul.

왘

Individuelle Navigation Erstellt ein Navigationsmenü aus beliebigen Seiten. Gut geeignet zur Erstellung einer Meta-Navigation mit z. B. Kontakt, Impressum & Co.

왘

Sitemap Inhaltsverzeichnis. Übersicht. Erstellt eine Auflistung aller Seiten aus dem Seitenbaum, die veröffentlicht und nicht versteckt sind.

왘

Quicknavigation Erstellt ein Dropdown-Menü, mit dem man zu einer bestimmten Seite springen kann. Quicknavigation ist ein Navigationsmenü als Dropdown-Menü und bildet den kompletten Seitenbaum oder einen Teil davon ab.

왘

Quicklink Erstellt wie Quicknavigation ein Dropdown-Menü, aber aus beliebigen Seiten. Quicklink ist eine Individuelle Navigation als Dropdown-Menü.

왘

Navigationspfad Auch bekannt als »Breadcrumb« oder »Sie-sind-hier«. Sehr nützlich zur Orientierung für Besucher auf Websites mit mehr als zwei oder drei Navigationsebenen.

왘

Buchnavigation und Artikelnavigation Erstellen beide eine Navigation, mit der man innerhalb von Seiten bzw. Artikeln vorwärts oder rückwärts gehen kann.

Sie haben also jede Menge Auswahl.

8.3

Die Seitenstruktur der Beispielsite erweitern

In Abschnitt 6.3 haben Sie ein Navigationsmodul namens Navigation – Hauptnavi erstellt, in der linken Spalte eingebaut und dann in Abschnitt 7.6, »Übung: Gestaltung der Navigation per CSS«, per CSS gestaltet. Diese Navigation ist der Ausgangspunkt für die folgenden Ausführungen. In diesem Abschnitt wird zunächst die Seitenstruktur der Beispielsite um ein paar Seiten und Unterseiten erweitert, damit man mit den Navigationsmodulen ein bisschen besser spielen kann. Abbildung 8.3 zeigt den Seitenbaum nach der Erweiterung der Seitenstruktur im folgenden ToDo.

195

8.3

8

Navigationen erstellen in Contao

Abbildung 8.3

Die erweiterte Seitenstruktur im Backend

Im folgenden ToDo erstellen Sie die neuen Seiten. ToDo: Die Seitenstruktur der Beispielsite erweitern 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Klicken Sie oben im Arbeitsbereich auf Neue Seite. 3. Fügen Sie die neue Seite unterhalb der Seite Nachrichten auf derselben Ebene ein, indem Sie neben Nachrichten auf das braune Symbol mit dem Pfeil nach unten klicken. 4. Seitenname: »Artikel erstellen«. Seite veröffentlichen. Klicken Sie auf Speichern und Schliessen. 5. Klicken Sie oben im Arbeitsbereich auf Neue Seite. 6. Erstellen Sie eine Unterseite zu Artikel erstellen, indem Sie neben Artikel erstellen ganz rechts außen auf das blinkende, braune Symbol mit dem Pfeil nach rechts klicken. 7. Seitenname: »Text und Bilder«. Veröffentlichen. Speichern und neu. 8. Erstellen Sie eine weitere Unterseite mit dem Namen »Weitere Elemente«. Veröffentlichen. Speichern und neu. 9. Erstellen Sie eine dritte Unterseite namens »Videos«. Veröffentlichen. Klicken Sie auf Speichern und Schliessen. 10. Erstellen Sie die übrigen Seiten aus Abbildung 8.3: 왘

»Erweiterungen« mit den Unterseiten »Kalender«, »FAQ« und »Newsletter«

왘

»Sitemap« unterhalb von Impressum auf derselben Ebene

11. Vergessen Sie nicht, alle Seiten zu veröffentlichen, und erstellen Sie für jede Seite ein Inhaltselement vom Typ »Text« mit einer h1-Überschrift und ein ganz klein bisschen Blindtext darunter.

196

Vertikale Navigation mit zwei Ebenen

Die Reihenfolge der Seiten können Sie mit dem blauen Verschiebepfeil auch nachträglich jederzeit verändern. Nach diesem ToDo werden die neu erstellten Seiten in der Navigation bereits angezeigt, aber, wie Abbildung 8.4 zeigt, sehen die Unterseiten im Browser genauso aus wie die Seiten der ersten Ebene. Das und noch ein bisschen mehr wird im nächsten Abschnitt geändert.

Abbildung 8.4

8.4

Die Hauptnavigation nach der Erweiterung

Vertikale Navigation mit zwei Ebenen

Die Navigation hat nach der Erweiterung noch zwei Fehler: Sie ist erstens ziemlich lang, und zweitens kann man die Navigationsebenen optisch nicht unterscheiden. In diesem Abschnitt werden Sie im ersten Schritt ein paar Seiten verstecken, um die Navigation etwas zu verkürzen. Im zweiten Schritt gestalten Sie dann die zweite Navigationsebene so, dass sie auch als solche erkennbar ist.

197

8.4

8

Navigationen erstellen in Contao

Schritt 1: Seiten im Menü verstecken Im ersten Schritt blenden Sie die Seiten Kontakt, Impressum und Sitemap aus, sodass sie in der Hauptnavigation nicht mehr erscheinen. Dazu gibt es in Contao eine Funktion mit dem treffenden Namen Im Menü verstecken. Die drei versteckten Seiten werden in Abschnitt 8.7, »Metanavigation: Eine »Individuelle Navigation«, übrigens mit einer individuellen Navigation wieder sichtbar gemacht und als Metanavigation rechts oben im Kopfbereich platziert. Aber zunächst einmal verstecken Sie die Seiten im folgenden ToDo, und zwar mithilfe der superpraktischen Funktion Mehrere bearbeiten. ToDo: Seiten im Menü verstecken 1. Öffnen Sie das Backend-Modul seitenstruktur. 2. Klicken Sie oben rechts im Arbeitsbereich auf Mehrere bearbeiten. 3. Markieren Sie die drei Seiten Kontakt, Impressum und Sitemap. 4. Klicken Sie rechts unten auf die Schaltfläche Bearbeiten. 5. Aktivieren Sie die Optionen Seitenname (relativ weit oben) und Im Menü verstecken (relativ weit unten). 6. Klicken Sie auf die Schaltfläche Weiter. 7. Kontrollieren Sie die Seitennamen, und aktivieren Sie die Kontrollkästchen Im Menü verstecken. 8. Klicken Sie auf Speichern und Schliessen.

Abbildung 8.5

198

»Kontakt«, »Impressum« und »Sitemap« sind versteckt.

Vertikale Navigation mit zwei Ebenen

Das Symbol der Seiten im Seitenbaum verändert sich von rot zu grau, um anzudeuten, dass diese Seiten im Menü nicht angezeigt werden. Im Frontend sind die drei Seiten aus der Navigation verschwunden (Abbildung 8.5). Schritt 2: Der Modultyp »Navigationsmenü« im Detail In der Regel wird ein Menü mit vielen Unterpunkten nicht sofort komplett angezeigt, sondern die zweite Ebene wird erst eingeblendet, wenn der entsprechende Menüpunkt der ersten Ebene ausgewählt wurde. Um das zu erreichen, können Sie in Contao die Einstellungen im Bereich MenüKonfiguration entsprechend ändern. Abbildung 8.6 zeigt die aktuellen Einstellungen für das Modul Navigation – Hauptnavi.

Abbildung 8.6

Menü-Konfiguration – »Startlevel«, »Stoplevel« und »Hard Limit«

Im Bereich Menü-Konfiguration gibt es vier Optionen zur Konfiguration des Navigationsmoduls, von denen momentan drei wichtig sind: 왘

Startlevel Der Startlevel legt fest, ab welcher Ebene die Menüpunkte angezeigt werden. Der Standardwert »0« bewirkt, dass das Modul die Navigation ab der obersten Ebene darstellt. »1« würde die oberste Ebene weglassen und die Menüpunkte erst ab der zweiten Ebene anzeigen. Das ist zum Beispiel bei einem Untermenü sehr praktisch.

199

8.4

8

Navigationen erstellen in Contao

왘

Stoplevel Der Stoplevel legt fest, bis zu welcher Ebene die Menüpunkte angezeigt werden. Der Standardwert »0« und bedeutet: »Zeige alle Ebenen an.« Der Wert »1« zeigt nur die erste Ebene, blendet aber bei Aktivierung des Menüpunkts eventuelle Unterpunkte ein.

왘

Hard Limit Das Hard Limit sorgt dafür, dass der Stoplevel beim Wort genommen wird. Jenseits des Stoplevels werden keine Unterseiten angezeigt. Das ist z. B. sinnvoll für eine horizontale Navigation, die immer nur die erste Ebene darstellen soll. Die Unterpunkte ab der zweiten Ebene können dann in einer getrennten vertikalen Navigation angezeigt werden.

Das ist mit ein bisschen Übung recht einfach und vor allem sehr vielseitig. Tabelle 8.1 zeigt einige Kombinationsmöglichkeiten von Startlevel, Stoplevel und Hard Limit. Startlevel

Stoplevel

Hard Limit

In der Navigation sichtbar:

0

0

Nein

Alle Ebenen

0

1

Nein

Nur die erste Ebene. Unterpunkte erst nach Klick.

0

1

Ja

Nur die erste Ebene. Unterpunkte nie.

Tabelle 8.1

Kombinationen von »Startlevel«, »Stoplevel« und »Hard Limit«

Für die vertikale Navigation aus der Beispielsite ist die zweite Einstellung am sinnvollsten: Nur erste Ebene. Unterpunkte erst nach Klick. Und das machen Sie im folgenden ToDo. ToDo: Vertikale Navigation konfigurieren 1. Öffnen Sie das Modul Navigation – Hauptnavi zur Bearbeitung. 2. Lassen Sie den Startlevel auf »0«. 3. Ändern Sie den Wert für den Stoplevel auf »1«. 4. Lassen Sie das Hard Limit deaktiviert. 5. Klicken Sie auf Speichern und Schliessen.

Mit diesen Einstellungen wird die zweite Ebene nur angezeigt, wenn der entsprechende Menüpunkt ausgewählt wurde. Abbildung 8.7 zeigt die Navigation nach dem Aufruf der Startseite. Die Unterpunkte zu den Seiten Artikel erstellen und Erweiterungen werden erst nach dem Anklicken der Menüpunkte angezeigt.

200

Vertikale Navigation mit zwei Ebenen

Abbildung 8.7 Unterpunkte werden erst bei Aktivierung angezeigt.

Schritt 3: Die zweite Navigationsebene per CSS gestalten Das HTML für die erste Navigationsebene haben Sie auf Seite 128 in Listing 6.2 bereits kennengelernt, und das HTML für die zweite Navigationsebene kommt jetzt. Tabelle 8.2 zeigt einen Überblick über die HTML-Elemente und CSS-Klassen, die der Modultyp Navigationsmenü im Quelltext zur Verfügung stellt. Elemente

Klasse

Bedeutung

div

mod_navigation

Für Modultyp »Navigationsmenü«

a

invisible

Skiplink vor der Navigation

ul

level_x

Navigationsebene: level_1 etc.

li

keine Klasse

Nicht ausgewählter Menüpunkt

li, a, span

first

Erstes Listenelement einer Liste oder Link bzw. span im ersten Listenelement

li, a, span

last

Letztes Listenelement einer Liste oder Link bzw. span im letzten Listenelement

li, span

active

Der aktive Navigationspunkt

li, a, span

submenu

Enthält Untermenü.

li, a

trail

Enthält Untermenü mit aktivem Menüpunkt.

Tabelle 8.2

CSS-Klassen für den Modultyp »Navigationsmenü«

Besonders erwähnenswert sind die Klassen submenu und trail: Wenn ein li-Element ein Untermenü enthält, bekommt es ebenso wie die Links darin die Klasse

201

8.4

8

Navigationen erstellen in Contao

submenu. Passender Name. Die Klasse trail wird Listenelement und Link hinzugefügt, wenn es im Untermenü einen aktiven Unterpunkt gibt. Die Klasse submenu sehen Sie im folgenden ToDo in Aktion, um den übergeordneten Menüpunkt farblich genauso zu gestalten wie die Unterpunkte. ToDo: Die zweite Navigationsebene gestalten 1. Öffnen Sie das Stylesheet navigation.css zur Bearbeitung. 2. Geben Sie den Links der ersten Ebene dieselbe Hintergrundfarbe wie dem Kopf- und Fußbereich: /* Menüpunkte gestalten */ #left .mod_navigation a, #left .mod_navigation span { display: block; text-decoration: none; background-color: #89adcd; color: #000; padding: 8px 8px 8px 18px; border-top: 1px solid #fff; }

3. Fügen Sie nach den vorhandenen Styles folgende CSS-Regeln hinzu: /* Zweite Navigationsebene vertikal */ /* Unterpunkte links einrücken */ #left .mod_navigation li li a, #left .mod_navigation li li span { margin-left: 18px; } /* Hervorhebung für Unterpunkte */ #left .mod_navigation li li a:hover, #left .mod_navigation li li a:focus { background-color: #2D5B85; color: #fff; } /* Links im Listenelement einfärben */ #left .mod_navigation .submenu a { background-color: #ADCBE6; color: #000; }

4. Speichern Sie das Stylesheet.

Im Browser sieht die Navigation jetzt so aus wie in Abbildung 8.8, auf der die Unterseite Weitere Elemente angezeigt wird.

202

Horizontale Navigation mit zwei Ebenen

Abbildung 8.8

Hervorhebungen in der Navigation

Der übergeordnete Menüpunkt Artikel erstellen hat die gleiche helle Farbe wie die nicht ausgewählten Unterpunkte Text und Bilder und Videos, um Besuchern optisch zu signalisieren, in welcher Abteilung er sich befindet. Je mehr Unterpunkte vorhanden sind, desto deutlicher wird dieser Effekt. Diese Hervorhebung ist dank der Klasse submenu sehr einfach umzusetzen.

8.5

Horizontale Navigation mit zwei Ebenen

Die Verwandlung der vertikalen Navigation in eine horizontale besteht im Wesentlichen aus zwei Schritten: Zuerst verschieben Sie das Modul Navigation – Hauptnavi im Seitenlayout von der linken Spalte in die Kopfzeile. Danach gestalten Sie die Navigation per CSS, und zwar gleich auf zwei verschiedene Varianten: einmal als horizontale Navigation mit zwei Ebenen und einmal als Dropdown-Menü. Die Einstellungen für das Navigationsmodul Navigation – Hauptnavi ändern sich gegenüber der vertikalen Navigation nicht (Tabelle 8.3).

203

8.5

8

Navigationen erstellen in Contao

Startlevel

Stoplevel

Hard Limit

In der Navigation sichtbar:

0

1

Nein

Nur die erste Ebene. Unterpunkte erst nach Klick.

Tabelle 8.3

»Startlevel«, »Stoplevel« und »Hard Limit« für die Navigation

Schritt 1: Das Navigationsmodul in die Kopfzeile verschieben Im folgenden ToDo verschieben Sie das Navigationsmodul Navigation – Hauptnavi von der linken Spalte in die Kopfzeile. ToDo: Modul »Navigation – Hauptnavi« in die Kopfzeile verschieben 1. Öffnen Sie das Backend-Modul Themes 폷 Seitenlayouts. 2. Öffnen Sie das Seitenlayout Standardlayout [Standard]. 3. Ändern Sie im Bereich Frontend-Module die Zuweisung für das Modul Navigation – Hauptnavi von Linke Spalte zu Kopfzeile. 4. Klicken Sie auf Speichern und Schliessen.

Abbildung 8.9 zeigt, dass die Navigation nach diesem ToDo zweifelsohne in der Kopfzeile sitzt, allerdings noch nicht wirklich horizontal.

Abbildung 8.9

Das Navigationsmodul befindet sich jetzt im Kopfbereich.

Die Navigationsliste erscheint ziemlich ungestaltet im Kopfbereich der Seite, weil die Selektoren zur Gestaltung für die vertikale Navigation alle mit #left beginnen und deshalb im Augenblick nichts mehr selektieren, weil die Navigation in #header verschoben wurde.

204

Horizontale Navigation mit zwei Ebenen

Schritt 2: Die Abstände im Kopfbereich vorbereiten Bevor Sie die Navigationsliste im Kopfbereich gestalten, sind in bildschirm.css noch ein paar kleinere Vorbereitungen im Header nötig. Das padding wird rechts, unten und links auf null gesetzt, damit die Navigationsleiste bis ganz an den Rand von #header reicht. Den danach im Kopfbereich fehlenden 18px-Abstand vom linken Rand weisen Sie der h1-Überschrift und dem Slogan als margin-left direkt zu. ToDo: Die Abstände für den Header anpassen 1. Öffnen Sie das Stylesheet bildschirm.css in einem Editor. 2. Passen Sie die Werte für padding und margin in den Styles am Anfang des Stylesheets wie im folgenden Listing beschrieben an: #header { background-color: #89ADCD; padding: 18px 0 0 0; margin-top: 1em; } #header h1 { margin-top: 0; margin-left: 18px; } #header p#slogan { margin-left: 18px;

}

3. Speichern Sie das Stylesheet.

Die Überschrift und der Absatz haben ihre Position nach diesem ToDo nicht verändert, die Navigation hingegen sitzt ganz links am Rand. Schritt 3: Die erste Navigationsebene gestalten So viel zu den Vorbereitungen. Nach diesem Abschnitt sieht die erste Ebene der horizontalen Navigation im Browser so aus wie in Abbildung 8.10.

Abbildung 8.10

Die horizontale Navigation ist fertig gestaltet.

205

8.5

8

Navigationen erstellen in Contao

Listing 8.1 zeigt das CSS zur Gestaltung dieser Navigation. /* ====================================== Horizontale Navigation – Erste Ebene ====================================== */ #header .mod_navigation { background: #ADCBE6; color: #000; padding: 0 18px; margin-top: 18px; } #header .mod_navigation ul { float: left; width: auto; /* schrumpft die Liste */ margin-bottom: 0; } #header .mod_navigation li { float: left; width: auto; /* schrumpft die Listenelemente */ list-style-type: none; border-right: 1px solid #89adcd; /* Trennstriche rechts */ margin: 0 ; } #header .mod_navigation li.first { border-left: 1px solid #89adcd; /* Trennstrich am Anfang */ } #header .mod_navigation a, #header .mod_navigation span { display: block; min-width: 78px; background-color: transparent; color: #000; text-align: center; text-decoration: none; padding: 8px; } #header .mod_navigation .active, #header .mod_navigation .trail { background-color:#2D5B85; color: #fff; } #header .mod_navigation a:hover, #header .mod_navigation a:focus { background-color: #2D5B85; color: #fff; } Listing 8.1

206

Das CSS zur Gestaltung der horizontalen Navigation

Horizontale Navigation mit zwei Ebenen

Dieses CSS gestaltet eine normale, gefloatete horizontale Navigation mit einer Ebene. Besonders erwähnenswert sind die folgenden Details: 왘

Das umgebende div.mod_navigation umschließt die gefloatete Liste, weil die Klasse block ihm ein overflow:hidden zuweist.

왘

Die vom Navigationsmodul für das erste Listenelement vergebene Klasse first vereinfacht das Setzen des ersten senkrechten Trennstriches.

왘

Die eigentliche Gestaltung der Navigation erfolgt in den Deklarationen für die Hyperlinks und das span-Element.

왘

Die Klasse trail sorgt dafür, dass auch der übergeordnete Menüpunkt hervorgehoben wird, wenn später ein Unterpunkt aktiv ist.

Im folgenden ToDo gestalten Sie die horizontale Navigation mit den Styles aus Listing 8.1. ToDo: Die horizontale Navigation gestalten 1. Öffnen Sie das Stylesheet navigation.css in einem Editor. 2. Fügen Sie am Anfang des Stylesheets die Styles aus Listing 8.1 ein, und zwar nach der Anweisung @media { und vor der Gestaltung der vertikalen Navigation. Der Lerneffekt ist am größten, wenn Sie nach jedem Style kurz speichern und sich die Auswirkungen im Browser anschauen. 3. Speichern Sie das Stylesheet navigation.css.

Die horizontale Navigation ist voll funktionsfähig, aber wenn Sie auf die Menüpunkte Artikel erstellen und Erweiterungen klicken, ist die zweite Ebene noch ungestaltet. Es gibt dabei zwei mögliche Lösungen, die durch ein unterschiedliches CSS realisiert werden: 1. ein horizontales Menü mit zwei Ebenen 2. ein Dropdown-Menü, das die Unterpunkte einblendet, wenn die Maus über den entsprechenden Hauptpunkt fährt Diese beiden Varianten lernen Sie jetzt nacheinander kennen. Schritt 4: Das CSS für eine horizontale Navigation mit zwei Ebenen Abbildung 8.11 zeigt die Navigation am Ende dieses Abschnitts mit einer zweiten horizontalen Ebene, die nur sichtbar wird, wenn ein Menüpunkt mit Unterseiten ausgewählt wird. Das funktioniert sogar im IE6.

207

8.5

8

Navigationen erstellen in Contao

Abbildung 8.11 Die horizontale Navigation mit zwei Ebenen

Die Gestaltung der zweiten Ebene ist mit drei einfachen Styles erledigt: 왘

Zunächst geben Sie dem div-Element #container, das den gesamten Inhaltsbereich umschließt, ein bisschen padding nach oben, um Platz für die zweite Ebene zu schaffen.

왘

Danach positionieren Sie die ungeordnete Liste für die Untermenüs absolut und geben ihr eine helle Hintergrundfarbe.

왘

Im dritten Schritt werden für die Listenelemente noch die von der ersten Ebene geerbten Rahmenlinien entfernt.

Diese drei Schritte machen Sie im folgenden ToDo. Die Einstellungen für das Navigationsmodul sind immer noch unverändert: Startlevel auf 0, Stoplevel auf 1 und kein Hard Limit. ToDo: Die zweite horizontale Ebene gestalten 1. Öffnen Sie das Stylesheet navigation.css, und fügen Sie nach der Gestaltung der ersten Ebene folgende CSS-Regeln hinzu: /* ====================================== Horizontale Navigation – Zweite Ebene ====================================== */ #container { padding-top: 1.5em; } #header ul.level_2 { position: absolute; left: auto; top: auto; background-color: #ddd;

208

Horizontale Navigation mit zwei Ebenen

ToDo: Die zweite horizontale Ebene gestalten (Forts.) } #header .level_2 li, #header .level_2 li.first { border: none; }

2. Speichern Sie das Stylesheet.

Alternative: Das CSS für eine Dropdown-Navigation Für eine Dropdown-Navigation müssen Sie im Prinzip nur wenige Änderungen vornehmen: Setzen Sie im Navigationsmodul den Stoplevel auf 0, und blenden Sie im CSS die zweite Navigationsebene aus und bei MouseOver wieder ein. Zunächst setzen Sie den Stoplevel im Navigationsmodul wieder auf 0, damit im Quelltext alle Menüpunkte vorhanden sind. Das ist nötig, damit sie per CSS bei Mausberührung sichtbar gemacht werden können. Startlevel

Stoplevel

Hard Limit

In der Navigation sind:

0

0

Nein

Alle Ebenen. Immer.

Tabelle 8.4

»Startlevel«, »Stoplevel« und »Hard Limit« für ein Dropdown-Menü

Im folgenden ToDo ändern Sie die Einstellungen für das Navigationsmodul. ToDo: Die Einstellungen für das Navigationsmodul ändern 1. Öffnen Sie das Backend-Modul themes 폷 Frontend-Module. 2. Öffnen Sie das Modul Navigation – Hauptnavi. 3. Setzen Sie den Stoplevel auf 0. 4. Klicken Sie auf Speichern und Schliessen.

Jetzt zeigt die horizontale Navigation immer alle Ebenen an und es fehlt nur noch das CSS für eine Dropdown-Navigation, um die zweite Ebene zu verstecken und bei einem MouseOver schön ordentlich wieder einzublenden. ToDo: Das CSS für eine horizontale Dropdown-Navigation 1. Öffnen Sie das Stylesheet navigation.css. 2. Kommentieren Sie die drei Styles zur Gestaltung der zweiten horizontalen Ebene aus. 3. Fügen Sie darunter die folgenden CSS-Regeln ein: /* ====================================== Horizontale Navigation – Dropdown

209

8.5

8

Navigationen erstellen in Contao

ToDo: Das CSS für eine horizontale Dropdown-Navigation (Forts.) ====================================== */ /* Listenelemente zweite Ebene untereinander */ #header .level_2 li { clear: both; border: none; } /* Zweite Ebene ausblenden */ #header .level_2 { position: absolute; left: –9999px; top: –9999px; overflow: hidden; display: inline; width: 0; height: 0; z-index: 1; /* "nach vorne", über den Inhaltsbereich */ } /* Zweite Ebene bei MouseOver einblenden */ #header li:hover .level_2 { left: auto; top: auto; overflow: auto; display: block; width: auto; min-width: 78px; height: auto; background-color: #ADCBE6; border-bottom: 1px solid #2D5B85; } #header .level_2 li.first { border: none; }

4. Speichern Sie das Stylesheet.

Im Browser sieht man zuerst nur die erste Menüebene. Die zweite Ebene wird erst sichtbar, wenn wie in Abbildung 8.12 der Mauszeiger über einen Menüpunkt der ersten Ebene fährt, der Unterseiten hat. Diese einfache Dropdown-Navigation verdeutlicht das Grundprinzip einer solchen Navigation, sollte aber vor einem realen Einsatz noch verfeinert werden. Sie kann zum Beispiel nicht per (TAB)-Taste bedient werden und funktioniert auch nicht im Internet Explorer 6. Einer guter Ausgangspunkt zur vertiefenden Lektüre ist der Artikel Dropdown low down, ein echter Klassiker der Webliteratur, der über zwanzig verschiedene Techniken zur Erstellung von Dropdown-Menüs im Überblick vorstellt: 왘

210

Dropdown low down von Tyssen Design http://bit.ly/dwK0le

Horizontale und vertikale Navigation zusammen

Abbildung 8.12 Eine CSS-basierte Dropdown-Navigation

Eine Dropdown-Navigation mit JavaScript Für fortgeschrittene Leser ist vielleicht ein von MacKP im Contao-Forum veröffentlichtes Tutorial interessant. Er hat die auf den MooTools basierende Dropdown-Navigation MenuMatic für Contao angepasst: 왘

MooTools Aufklappmenü MenuMatic in Contao benutzen http://bit.ly/caJjKq

Die Umsetzung ist etwas aufwendiger und nicht ganz ohne, aber das Ergebnis ist beeindruckend. Aber wie gesagt: Das ist eher etwas für Fortgeschrittene.

8.6

Horizontale und vertikale Navigation zusammen

In diesem Abschnitt kombinieren Sie eine horizontale Navigation mit einer vertikalen, erstellen also gewissermaßen eine »horikale Navigation«. Horizontale und vertikale Navigation praktizieren dabei eine Art Arbeitsteilung: Die horizontale Navigation zeigt die erste Navigationsebene, die vertikale, sofern vorhanden, die Unterseiten. Dazu ändern Sie im ersten Schritt den Stoplevel für die horizontale Navigation und erstellen danach ein neues Navigationsmodul namens Navigation – Unternavi, das Sie in der linken Spalte platzieren. Schritt 1: Die Vorbereitung der horizontalen Navigation Im ersten Schritt schränken Sie die horizontale Navigation so ein, dass immer nur die erste Navigationsebene dargestellt wird. Dazu aktivieren Sie im Modul Navigation – Hauptnavi das Hard Limit. Tabelle 8.5 zeigt die Konfiguration im Überblick:

211

8.6

8

Navigationen erstellen in Contao

Startlevel

Stoplevel

Hard Limit

In der Navigation sind:

0

1

Ja

Nur die erste Ebene. Unterpunkte nie.

Tabelle 8.5

»Stoplevel« auf »1« und »Hard Limit« aktivieren

Im folgenden ToDo erledigen Sie genau diesen Schritt. ToDo: Den Stoplevel für das Modul »Navigation – Hauptnavi« ändern 1. Öffnen Sie das Backend-Modul Themes 폷 Module. 2. Öffnen Sie das Modul Navigation – Hauptnavi zur Bearbeitung. 3. Setzen Sie den Wert für den Stoplevel auf »1«. 4. Aktivieren Sie das Kontrollkästchen für Hard Limit. 5. Klicken Sie auf Speichern und Schliessen.

Schritt 2: Vertikales Untermenü in der linken Spalte erstellen Um in der linken Spalte ein Untermenü anzuzeigen, benötigen Sie ein neues Navigationsmodul mit den Einstellungen aus Tabelle 8.6. Startlevel

Stoplevel

Hard Limit

In der Navigation sind:

1

1

Nein

Nur die zweite Ebene. Unterpunkte erst nach dem Klick.

Tabelle 8.6

»Startlevel«, »Stoplevel« und »Hard Limit« für die Unternavigation

Ideal wäre es, wenn das Untermenü noch eine Überschrift hätte, in der automatisch immer der Name des Menüpunktes aus der ersten Ebene steht. Dazu benutzen Sie eine Spezialität von Contao, nämlich ein Insert-Tag: 왘

{{env::main_name}}

Ein Insert-Tag ist leicht zu erkennen: Am Anfang und am Ende stehen jeweils zwei geschweifte Klammern und in der Mitte ein doppelter Doppelpunkt. Vor dem doppelten Doppelpunkt steht ein Kürzel und danach ein Wert. Das Kürzel env ist kurz für environment (»Umgebungsvariable«), und der Wert main_name gibt den Namen der übergeordneten Hauptseite aus der ersten Ebene aus. Im folgenden ToDo erstellen und konfigurieren Sie das Navigationsmodul für die Unternavigation in der linken Spalte.

212

Horizontale und vertikale Navigation zusammen

ToDo: Navigationsmodul für Unternavigation erstellen und einbinden 1. Öffnen Sie das Backend-Modul Themes 폷 Module. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Titel: »Navigation – Unternavi« Überschrift: {{env::main_name}} Modultyp: Navigationsmenü Startlevel: 1 Stoplevel: 1 Hard Limit: nein Alle anderen Optionen lassen Sie unverändert. 4. Klicken Sie auf Speichern und Schliessen. 5. Öffnen Sie das Seitenlayout Standardlayout [Standard] zur Bearbeitung. 6. Fügen Sie im Bereich Frontend-Module nach den Modulen für die Kopfzeile die Zeile Modul Navigation – Unternavi in der Spalte Linke Spalte hinzu. 7. Klicken Sie auf Speichern und Schliessen.

Abbildung 8.13 zeigt das Untermenü zu der Seite Erweiterungen in der linken Spalte. Und es ist schon gestaltet, da im Stylesheet navigation.css das CSS für eine vertikale Navigation noch vorhanden ist. Nur die Überschrift ist noch ein bisschen groß.

Abbildung 8.13

Die Unternavigation auf der Seite »Weitere Elemente«

213

8.6

8

Navigationen erstellen in Contao

Schritt 3: Die Überschrift für die Unternavigation gestalten Die Unternavigation selbst ist schon fertig gestaltet, aber die Überschrift ist wie gesagt noch ein bisschen zu groß. Das folgende ToDo enthält einen Vorschlag, wie die Überschrift für die Unternavigation verkleinert und fett hervorgehoben wird. Die fertige Navigation sieht im Browser so aus wie in Abbildung 8.14.

Abbildung 8.14

Die fertige Navigation

ToDo: Das vertikale Untermenü gestalten 1. Öffnen Sie das Stylesheet navigation.css im Editor. 2. Fügen Sie nach dem ersten Style zur Gestaltung der vertikalen Navigation die folgende Regel für die h1-Überschrift oberhalb des Menüs ein: #left .mod_navigation h1 { font-size: 14px; font-weight: bold; margin: 0 0 1em 0; }

3. Ändern Sie die Hintergrundfarbe für die vertikale Navigation wieder in das hellere Blau zurück: /* Menüpunkte gestalten */ #left .mod_navigation a, #left .mod_navigation span { display: block; text-decoration: none; background-color: #ADCBE6; color: #000; padding: 8px 8px 8px 18px;

214

Metanavigation: Eine »Individuelle Navigation«

ToDo: Das vertikale Untermenü gestalten (Forts.) border-top: 1px solid #fff; }

4. Speichern Sie das Stylesheet.

8.7

Metanavigation: Eine »Individuelle Navigation«

Auf vielen Webseiten gibt es eine Navigation, die Links wie Kontakt, Impressum oder Sitemap enthält. Während die Links im Hauptmenü direkt zum Inhalt der Website führen, geht es bei diesen Links eher um Funktionen, die dem Besucher das Leben erleichtern und in gewisser Weise über dem Inhalt stehen. Deshalb wird dieser Navigationtyp auch als Servicenavigation oder Metanavigation bezeichnet. In diesem Abschnitt erstellen Sie ein neues Navigationsmodul namens Navigation – Metanavi, das auf dem Modultyp Individuelle Navigation basiert und rechts oben im Kopfbereich positioniert wird. Das Modul gibt die drei am Anfang des Kapitels versteckten Webseiten Kontakt, Impressum und Sitemap aus (Abbildung 8.15).

Abbildung 8.15

Die fertige Metanavigation rechts oben im Kopfbereich

Schritt 1: Das Modul »Navigation – Metanavi« erstellen Mit einer individuellen Navigation können Sie in Contao einen Navigationsbereich erstellen, in dem Sie beliebige Seiten aus dem Seitenbaum darstellen. Abbildung 8.16 zeigt die Eingabemaske für den Modultyp Individuelle Navigation im Backend. Im folgenden ToDo erstellen Sie eine individuelle Navigation.

215

8.7

8

Navigationen erstellen in Contao

Abbildung 8.16 Eingabeformular für eine »Individuelle Navigation«

ToDo: Das Modul für die Metanavigation erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Module. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Titel: »Navigation – Metanavi« Modultyp: Individuelle Navigation 4. Aktivieren Sie im Bereich Seiten das Kontrollkästchen Auswahl ändern. 5. Wählen Sie die im Menü versteckten Seiten Kontakt, Impressum und Sitemap aus. 6. Klicken Sie auf Speichern und Schliessen.

Das Modul ist erstellt und wird im nächsten Schritt eingebunden. Schritt 2: Das Modul »Navigation – Metanavi« einbinden Da die Metanavigation auf allen Seiten an derselben Stelle erscheinen soll, wird das Modul genau wie die Haupt- und Unternavigation im Seitenlayout eingebunden.

216

Metanavigation: Eine »Individuelle Navigation«

ToDo: Das Modul für die Metanavigation einbinden 1. Öffnen Sie Backend-Modul Themes 폷 Seitenlayouts. 2. Öffnen Sie das Seitenlayout Standardlayout [Standard] zur Bearbeitung. 3. Duplizieren Sie im Bereich Frontend-Module die erste Zeile mit einem Klick auf das grüne Kreuz. 4. Ändern Sie die untere der beiden Zeilen so, dass das Modul Navigation – Metanavi in der Kopfzeile erscheint. 5. Klicken Sie auf Speichern und Schliessen.

Mit wenigen Klicks haben Sie das Modul Navigation – Metanavi erstellt und im Seitenlayout der Kopfzeile zugewiesen. Im Browser sieht der Header jetzt so aus wie in Abbildung 8.17. Das Modul ist drin. Der Rest ist CSS.

Abbildung 8.17 Modul »Navigation – Metanavi«, ungestaltet im Header

Schritt 3: Die Metanavigation im Quelltext Bevor Sie im nächsten Schritt die Metanavigation positionieren und gestalten, werfen Sie einen kurzen Blick auf das vom Modul Navigation – Metanavi erzeugte HTML. Das zuständige Template ist nav_default.tpl. Die URLs wurden aus Gründen der Übersichtlichkeit durch ein # ersetzt, der Menüpunkt Kontakt ist aktiv:
Navigation überspringen
• <span class="active first">Kontakt


217

8.7

8

Navigationen erstellen in Contao


• Impressum
• Sitemap
 
Listing 8.2

Das vom Modul »Navigation – Metanavi« erzeugte HTML

Der Kommentar verhindert, dass die interne ContaoSuchmaschine die Navigation indiziert. Umschlossen wird die ungeordnete Liste wieder von einem div-Element, das dieses Mal die Klasse mod_customnav hat. Der Rest ist ganz normal: Nach dem Skiplink folgt eine ungeordnete Linkliste mit Klassen, die Sie zur Gestaltung nutzen können. Schritt 4: Den Kopfbereich vorbereiten Im Ordner tl_files/themes/blaues_theme/grafiken wartet eine Grafik mit dem Namen header_gradient.jpg auf ihren Einsatz. Die Grafik gibt dem Header einen leichten Farbverlauf (»gradient«) und oben einen dunkelblauen Balken, in dem die Metanavigation erscheinen wird. Zur Vorbereitung des Kopfbereiches passen Sie im folgenden ToDo das obere Padding an und binden die Grafik ein. ToDo: Die Abstände für den Header anpassen 1. Öffnen Sie das Stylesheet bildschirm.css in einem Editor. 2. Passen Sie das oberen Padding und die Hintergrundformatierung für den Kopfbereich an wie im folgenden Listing beschrieben: #header {

background: #89ADCD url(grafiken/header_gradient.jpg) repeat-x left top; padding: 48px 0 0 0; margin-top: 1em; }

3. Speichern Sie das Stylesheet.

218

Metanavigation: Eine »Individuelle Navigation«

Nach diesem Schritt sieht der Header aus wie in Abbildung 8.18.

Abbildung 8.18

Der Kopfbereich mit Hintergrundgrafik

Schritt 5: Die Metanavigation gestalten Jetzt fehlt nur noch die Gestaltung der Metanavigation. Die Links sollen nebeneinander erscheinen, und zwar oben rechts im Kopfbereich. Dazu benutzen Sie im folgenden ToDo eine absolute Positionierung. ToDo: Die Metanavigation positionieren und gestalten 1. Öffnen Sie das Stylesheet navigation.css im Editor. 2. Fügen Sie am Ende folgenden Style zur Positionierung der Metanavigation ein: /* ====================================== Metanavigation ====================================== */ #header .mod_customnav { position: absolute; top: –44px; right: 18px; font-size: 12px; }

3. Der folgende Style floatet die Listenelemente: #header .mod_customnav li { float: left; width: auto; list-style-type: none; margin: 0 ; }

219

8.7

8

Navigationen erstellen in Contao

ToDo: Die Metanavigation positionieren und gestalten (Forts.) 4. Jetzt werden die Links und das span-Element gestaltet: #header .mod_customnav a, #header .mod_customnav span { display: block; text-decoration: none; color: #fff; padding: 4px ; margin-left: 9px; } #header .mod_customnav a:hover, #header .mod_customnav a:focus { background: #89adcd; color: #000; } #header .mod_customnav span.active { background-color: #89adcd; color: #000; }

5. Speichern Sie das Stylesheet, und betrachten Sie die Seite im Browser.

Im Browser sehen die Webseiten nach diesem ToDo so aus wie in Abbildung 8.19.

Abbildung 8.19

Die fertige Metanavigation

Mit diesem Schritt ist das Navigationsgerüst für die Beispielsite fertig. Sie haben ohne Programmierung eine horizontale Hauptnavigation, eine vertikale Unternavigation und eine individuelle Metanavigation erstellt, die allesamt per CSS positioniert und gestaltet werden.

220

Sitemap: Das Inhaltsverzeichnis der Website

Die relativ absolute Positionierung Die Werte für die Eigenschaften zur Ausrichtung wie top und right orientieren sich am inneren div der Kopfzeile, weil dieses div die Klasse .inside hat, der im FrameworkStylesheet system/contao.css der Wert position:relative zugewiesen wird. Falls Sie den Trick mit der Kombination von absoluter und relativer Positionierung nicht kennen, können Sie sich in »Little Boxes 1« genauer darüber informieren: 왘

Absolute Positionierung kombiniert mit relativer Positionierung http://bit.ly/a5O4Kf

Diese Kombination ist eine nützliche Grundlagentechnik zur Positionierung.

8.8

Sitemap: Das Inhaltsverzeichnis der Website

Eine Sitemap ist eine Navigationshilfe, die einem Besucher alle für ihn verfügbaren Seiten der Site auflistet. Gerade für Erstbesucher ist eine solche Sitemap oft eine große Hilfe. Bei Contao gibt es natürlich ein entsprechendes Modul, das eine Sitemap automatisch generiert. Das Procedere ist dabei wie schon fast gewohnt: Zuerst erstellen Sie ein Modul, dann binden Sie es ein, und zum Schluss wird es gestaltet. Schritt 1: Ein Modul zur Erstellung einer Sitemap Das Modul zur Erstellung einer Sitemap gehört zu den Navigationsmodulen, und das Eingabeformular sieht so aus wie in Abbildung 8.20. Dieses Eingabeformular sollte inzwischen ziemlich selbsterklärend sein. Eine Wurzelseite als Startpunkt benötigen Sie nur, falls Sie keinen Startpunkt einer Website haben, und das Anzeigen geschützter bzw. versteckter Seiten sollte man sich gut überlegen. Wirklich wichtig ist hier die Definition der Referenzseite: Unterseiten werden automatisch übernommen, übergeordnete Seiten werden nicht angezeigt. Für eine komplette Sitemap bietet sich der Startpunkt einer Website als Referenzseite an, und genau das machen Sie im folgenden ToDo.

221

8.8

8

Navigationen erstellen in Contao

Abbildung 8.20

Das Eingabeformular zur Erstellung einer Sitemap

ToDo: Das Modul »Navigation – Sitemap« erstellen 1. Öffnen Sie das Backend-Modul Themes. 2. Öffnen Sie die Frontend-Module zur Bearbeitung. 3. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 4. Geben Sie als Titel »Navigation – Sitemap« ein. 5. Wählen Sie aus der Liste Modultyp den Eintrag Sitemap. 6. Wählen Sie als Referenzseite den Startpunkt der Website. 7. Lassen Sie alle anderen Optionen unverändert. 8. Klicken Sie auf Speichern und Schliessen.

Das Modul existiert und wird im nächsten Schritt eingebunden. Schritt 2: Das Modul »Navigation – Sitemap« einbinden Bis jetzt haben Sie alle Navigationsmodule über das Seitenlayout mit den Webseiten verbunden, sodass die Module auf allen Seiten erscheinen. Um ein Modul nur auf einer Seite anzuzeigen, binden Sie es stattdessen in einen Artikel ein.

222

Sitemap: Das Inhaltsverzeichnis der Website

Dazu erstellen Sie auf der gewünschten Seite im gewünschten Artikel ein Inhaltselement vom Typ Modul und wählen dort das zuvor erstellte Navigationsmodul aus. Genau das machen Sie im folgenden ToDo. ToDo: Das Modul »Navigation – Sitemap« in einem Artikel einbinden 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie den Artikel Sitemap [Hauptspalte] zur Bearbeitung. 3. Fügen Sie unterhalb der h1-Überschrift ein bisschen beschreibenden Text ein. 4. Erstellen Sie darunter ein Neues element. 5. Wählen Sie als elementtyp den Eintrag Modul. 6. Wählen Sie den Eintrag Navigation – Sitemap (ID xx) aus der Liste Modul. 7. Klicken Sie auf Speichern und Schliessen.

Im Browser gibt es nach diesem ToDo eine bereits funktionierende, aber noch ungestaltete Sitemap (Abbildung 8.21).

Abbildung 8.21 Eine funktionierende, aber noch ungestaltete Sitemap

223

8.8

8

Navigationen erstellen in Contao

Schritt 3: Das HTML für das Modul »Navigation – Sitemap« Bevor Sie die Sitemap mit einigen wenigen Styles gestalten, werfen Sie wie immer einen Blick auf das vom Modul erzeugte HTML. Listing 8.3 zeigt einen Ausschnitt daraus.
• Startseite
• News
• Themen
  • Text und Bilder
  • Weitere Elemente
  • Videos
• Downloads
Listing 8.3

Ein Ausschnitt aus dem HTML für eine Sitemap

Umgeben von einem div mit der Klasse mod_sitemap, werden die Links in einer verschachtelten ul präsentiert. Die Klassennamen für Listenelemente und Links lauten level_1, level_2 und submenu, genau wie bei den anderen Navigationsmodulen, die ebenfalls auf dem Template nav_default.tpl basieren. Schritt 4: Das CSS zur Gestaltung der Sitemap Im folgenden ToDo machen Sie die Sitemap mit wenigen Styles etwas übersichtlicher. ToDo: Die Sitemap gestalten 1. Öffnen Sie das Stylesheet navigation.css im Editor. 2. Fügen Sie am Ende des Stylesheets nach der Gestaltung der Metanavigation folgenden Kommentar ein:

224

Sitemap: Das Inhaltsverzeichnis der Website

ToDo: Die Sitemap gestalten (Forts.) /* ====================================== Sitemap gestalten ====================================== */

3. Folgender Style entfernt den unteren Abstand von den inneren Listen: .mod_sitemap ul ul { margin-bottom: 0; }

4. Die nächsten beiden Styles gestalten die Listenelemente: .mod_sitemap li { list-style-type: none; margin-left: 0; /* 1. Ebene ohne Einzug links */ } .mod_sitemap li li { margin-left: 1.5em; } /* linker Einzug */

5. Die Links der ersten Ebene werden fett hervorgehoben: .mod_sitemap a { text-decoration: none; } .mod_sitemap .level_1 a { font-weight: bold; }

6. Die Links der unteren Ebenen sollen nicht fett sein: .mod_sitemap .level_2 a { font-weight: normal; }

7. Speichern Sie das Stylesheet.

Im Browser sieht die Sitemap jetzt so aus wie in Abbildung 8.22.

Abbildung 8.22 Die fertige Sitemap

225

8.8

8

Navigationen erstellen in Contao

8.9

Weitere Navigationsmodule

Zum Abschluss dieses Kapitels über Navigation möchte ich Ihnen die übrigen Navigationsmodule von Contao quasi im Schnelldurchgang vorstellen.

8.9.1

Quicknavigation und Quicklink

Die Modultypen Quicknavigation und Quicklink erstellen beide ein DropdownMenü, mit dem man direkt zu einer bestimmten Seite springen kann. Während eine Quicknavigation die komplette Seitenstruktur oder einen Ausschnitt daraus abbildet, kann ein Quicklink-Menü beliebige Seiten aus dem Seitenbaum enthalten. Quicknavigation und Quicklink sind also quasi die DropdownEntsprechungen zu den weiter oben vorgestellten Modultypen Navigationsmenü bzw. Individuelle Navigation. In Kapitel 16 erstellen Sie bei der Gestaltung der Startseite in der Sidebar ein Quicklink-Menü mit ein paar Lesetipps (ab Seite 410). Eine solche QuicklinkNavigation erzeugt folgendes HTML:

Lesetipps

Zielseite <select name="target" id="ctrl_target" class="select"> ... ... ...
Listing 8.4

Das HTML für eine Quicknavigation

Das sind ein div mit der Klasse mod_quicklink drumherum, eine Überschrift und ein Formular, das ein div mit der Klasse formbody enthält, in dem ein verstecktes Formularfeld, ein unsichtbares Label und als Hauptdarsteller eine Auswahlliste

226

Weitere Navigationsmodule

und ein Submit-Button aufbewahrt werden. Erzeugt wird dieses HTML vom Template mod_quicklink.tpl. Der Modultyp Quicknavigation funktioniert genauso, bekommt aber im umgebenden div die Klasse .mod_quicknav und basiert auf dem Template mod_quicknav.tpl.

8.9.2

Navigationspfad: Die Breadcrumb-Navigation »Sie sind hier«

Sich zu verirren und die Orientierung zu verlieren gehört zu den Urängsten des Menschen. So hatte sich Hänsel auf dem Weg in den tiefen Wald eine scheinbar geniale Navigationsmethode ausgedacht, um sich nicht zu verirren: »Wart nur, Gretel, bis der Mond aufgeht, dann werden wir die Brotbröcklein sehen, die ich ausgestreut habe, die zeigen uns den Weg nach Haus.« Hänsels Brotkrümel-Methode hatte ihre Nachteile, dient aber heute noch als Namensgeber für eine Navigationshilfe, die ausgehend von der aktuellen Seite alle übergeordneten Seiten bis hin zur Startseite nebeneinander darstellt und dem Besucher ein »Sie sind hier« signalisiert. Neudeutsch nennt man Hänsels Methode jetzt »Breadcrumb-Navigation«. Ein solcher Navigationspfad lohnt sich erst ab einer gewissen Verschachtelungstiefe und ist bei der Beispielsite in ihrem jetzigen Zustand nicht nötig. Abbildung 8.23 zeigt ein Beispiel für eine Breadcrumb-Navigation von der Website zu den Little Boxes-Büchern, die mit Contao erstellt wurde.

Abbildung 8.23

»Sie sind hier« – ein Navigationspfad auf »little-boxes.de«

227

8.9

8

Navigationen erstellen in Contao

Das Eingabeformular, das zur Erstellung eines Moduls vom Typ Navigationspfad im Backend angezeigt wird, ist sehr übersichtlich und bietet, abgesehen von einer optionalen Überschrift, keine Konfigurationsmöglichkeiten. Im Quelltext erzeugt das Modul ein div mit der Klasse mod_breadcrumb und darin ein paar durch »Größer als«-Zeichen getrennte Hyperlinks. Die aktuelle Seite am Ende wird von einem span mit der Klasse active umgeben. Die HTML-Ausgabe kann über das Template mod_breadcrumb.tpl kontrolliert werden.

8.9.3

Buchnavigation: Von einer Seite zur nächsten und zurück

Das Modul Buchnavigation ist nicht nur für Bücher zu gebrauchen, sondern immer dann nützlich, wenn Sie auf den Webseiten eine Navigation einbauen möchten, die es dem Besucher ermöglicht, innerhalb der Seitenstruktur vorwärts, rückwärts oder auch eine Seite nach oben zu navigieren. Abbildung 8.24 zeigt auch für die Buchnavigation ein Beispiel von little-boxes.de.

Abbildung 8.24

Eine Buchnavigation auf »little-boxes.de«

Der vom Template mod_booknav.tpl erzeugte Quelltext sieht so aus:


228

Weitere Navigationsmodule


• < Themen
• Nach oben
• Weitere Elemente >
Listing 8.5

Das HTML für eine Buchnavigation

Ein div mit der Klasse booknav enthält eine ungeordnete Liste mit drei Listenelementen, die einen Link zur vorherigen (prev) und zur nächsten (next) Seite enthalten. Dazwischen gibt es eigentlich noch einen Link, um in der Hierarchie der Seitenstruktur eine Stufe nach oben zu gelangen. Dieser Link hat standardmäßig die Beschriftung »Nach oben«, die meiner Ansicht nach bei Besuchern eher Verwirrung stiftet. Für einen Top-Link, der per Klick an den Anfang der Seite führt, ist »Nach oben« eine adäquate Beschriftung, denn er bringt den Besucher buchstäblich auf derselben Seite Nach oben (siehe Seite 258). In der Buchnavigation bedeutet Nach oben aber »Gehe in der Seitenstruktur eine Ebene höher«. Das wäre vielleicht auch kein schlechter Linktext, ist aber erstens zu lang und zweitens auch nicht wirklich hilfreich. Und so ist dieser Link in Abbildung 8.24 denn auch gar nicht vorhanden, weil er im Template mod_booknav.tpl chirurgisch entfernt wurde. Die Artikelnavigation ist ein bisschen anders als die Buchnavigation In der Gruppe Navigation gibt es noch einen Modultyp, der in diesem Kapitel nicht erwähnt wurde: Artikelnavigation. Die Artikelnavigation funktioniert im Prinzip ähnlich wie die Buchnavigation, nur halt nicht mit Seiten, sondern mit Artikeln. Eine Artikelnavigation hat die Klasse mod_articlenav und ist z. B. dann sinnvoll, wenn auf einer Seite mehrere Artikel vorhanden sind, von denen jeweils nur der Teasertext gezeigt wird. Klickt ein Besucher auf den »Weiterlesen«-Link, um den ganzen Artikel zu lesen, könnte man auf dieser Seite unter dem Artikel eine Artikelnavigation anzeigen, die direkt zum nächsten bzw. vorherigen Artikel führt, sodass der Leser nicht erst wieder zurück zur Übersichtseite mit den Teasern muss.

229

8.9

TEIL IV Inhalte erstellen und verwalten

In diesem Kapitel lernen Sie Inhaltselemente zur Arbeit mit Text und Bildern kennen.

9

Inhaltselemente für Text und Bilder

Artikel bestehen aus Inhaltselementen. In Kapitel 2, »Schnelldurchlauf: So funktioniert Contao«, haben Sie bereits gesehen, dass ein Artikel nur ein Container ist, ein Inhaltsbereich, der ein oder mehrere Inhaltselemente enthält. In diesem Kapitel lernen Sie wichtige 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.

9.1

Artikel und Inhaltselemente im HTML-Quelltext

Inhaltselemente unterteilen einen Artikel bildlich gesprochen in Scheibchen, und diese Scheibchen können Sie dann einzeln bearbeiten. Dieses Prinzip findet sich auch in der HTML-Struktur von Artikeln und Inhaltselementen wieder. Auf der Startseite gibt es bereits einen Artikel und ein Inhaltselement mit Überschrift und ein bisschen Fließtext, der in diesem Abschnitt als Beispiel dient. Im Quelltext ist der Artikel ein div mit einer ID (der Artikelalias aus den Einstellungen des Artikels) und den Klassen .mod_article und .block:
...
Listing 9.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

233

9

Inhaltselemente für Text und Bilder

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:

Willkommen auf der Beispielsite

...

...

Listing 9.2

Viele Inhaltselemente sind von einem »div« umgeben.

Das HTML für das Inhaltselement zeigt folgende Besonderheiten: 왘

Das 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 Inhaltselement bekommt die Klasse .block.

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 ein Template geregelt. Die Namen der Templates entsprechen denen der CSS-Klassen plus der Endung .tpl, zum Beispiel ce_text.tpl für das Inhaltselement Text. Bei Bedarf können Sie im Backend-Bereich Templates die HTML-Ausgabe der Inhaltselemente komplett an Ihre Bedürfnisse anpassen.

9.2

Das Inhaltselement »Überschrift«: »ce_headline«

Das Inhaltselement Überschrift dient zur Eingabe von Überschriften. Sie haben bereits gesehen, dass auch andere Inhaltselemente wie z. B. Text die Möglichkeit bieten, eine Überschrift zu vergeben. Daraus ergibt sich die Frage, wann man das Inhaltselement Überschrift benutzen sollte.

234

Das Inhaltselement »Überschrift«: »ce_headline«

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 zum Beispiel 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. Im folgenden ToDo erstellen Sie am Anfang der Seite Text und Bilder eine Überschrift der Ebene h1, die die Klasse seitenanfang bekommt. Diese Klasse benutzen Sie dann später, um für die Überschrift den oberen Außenabstand zu reduzieren, damit Hauptspalte und Navigationsspalte oben bündig sind. ToDo: Ein Inhaltselement »Überschrift« erstellen 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie auf der Seite Text und Bilder den Artikel Text und Bilder [Hauptspalte] zur Bearbeitung (gelber Bleistift). 3. Löschen Sie eventuell vorhandene Inhaltselemente. 4. Klicken Sie oben im Arbeitsbereich auf Neues Element. 5. Fügen Sie das neue Element ganz am Anfang des Artikels ein, direkt unterhalb der Artikel-Einstellungen. 6. Wählen Sie aus der Liste Elementtyp den Eintrag Überschrift. Daraufhin verändert sich das Formular. 7. Geben Sie im Feld Überschrift den Text »Die Abenteuer des Lorem Ipsum« ein. 8. Wählen Sie rechts daneben die Gliederungsebene h1. 9. Blenden Sie falls nötig den Bereich Experten-Einstellungen ein. 10. Geben in das Feld für die CSS-Klasse (das rechte von den beiden Input-Feldern) den Text »seitenanfang« ein. Ohne Punkt davor. 11. Klicken Sie auf Speichern und Schliessen.

Abbildung 9.1 zeigt die Eingabemaske für das Inhaltselement Überschrift.

235

9.2

9

Inhaltselemente für Text und Bilder

Abbildung 9.1

Das Dialogfeld für das Inhaltselement »Überschrift«

Auf der Webseite erscheint jetzt oben in der Hauptspalte die neue Überschrift. Im Quelltext hat die neue Überschrift folgendes HTML:

Die Abenteuer des Lorem Ipsum



Wie Sie sehen, bekommt das Inhaltselement Überschrift die Klasse ce_headline, ohne zusätzliches div-Element drum herum. Im folgenden ToDo ändern Sie die Gestaltung der Layoutbereiche ein wenig. Der Abstand zwischen Kopfbereich und den drei Inhaltsbereichen wird über ein margin-top für #container eingestellt. Damit die Überschriften im Inhaltsbereich alle auf gleicher Höhe beginnen, entfernen Sie das margin-top vom Navigationsbereich in der linken Spalte. Anschließend gestalten Sie die Überschrift mit der Klasse seitenanfang so, dass sie auf derselben Höhe beginnt wie die Navigation. Dabei geben Sie auch gleich einen zweiten Selektor ein, für den Fall, dass die Klasse nicht an die Überschrift selbst, sondern an ein umgebendes div vergeben wurde. ToDo: Die »h1«-Überschrift oben auf der Seite formatieren 1. Öffnen Sie das Stylesheet navigation.css in einem Editor. 2. Ändern Sie den ersten Style im Abschnitt Vertikale Navigation wie folgt: #left div.mod_navigation { float: left;

236

Das Inhaltselement »Text«: »ce_text«

ToDo: Die »h1«-Überschrift oben auf der Seite formatieren (Forts.) width: 142px; font-size: 12px;

margin: 0; }

3. Speichern Sie das Stylesheet navigation.css. 4. Öffnen Sie das Stylesheet bildschirm.css in einem Editor. 5. Ergänzen Sie den Style für #container wie folgt: #container {

margin-top: 32px; margin-right: 18px; margin-left: 18px; }

6. Fügen Sie am Ende des Stylesheets die folgende CSS-Regel ein: h1.seitenanfang, div.seitenanfang h1 { line-height: 1; margin-top: 0; }

7. Speichern Sie das Stylesheet.

Im Browserfenster hat sich wenig geändert, aber der Abstand unterhalb des Kopfbereichs wird durch den oberen Außenabstand von #container kontrolliert, und die Überschriften in Navigationsbereich und Hauptspalte beginnen auf derselben Höhe. Wenn alle h1-Überschriften im Inhaltsbereich ohne oberen Außenabstand bleiben sollen, könnte man statt der Klasse seitenanfang auch einfach den Selektor #container h1 benutzen. »h1« oder »h2« am Anfang eines Bereiches? Über die Vergabe der Überschriftsebenen wird in Webdesignerkreisen seit jeher angeregt diskutiert. Die einen sagen, dass es pro Webseite nur eine h1-Überschrift geben sollte, andere beginnen jeden Layoutbereich damit. Gerald Brozek hat die unterschiedlichen Standpunkte gut zusammengefasst: 왘

Webseite mit Überschriften strukturieren – eine Chronologie http://bit.ly/h1h2h3

Folgen Sie einfach Ihrer eigenen Vorliebe.

9.3

Das Inhaltselement »Text«: »ce_text«

Sie setzen die Reise durch die wichtigsten Inhaltselemente von Contao mit dem Inhaltselement Text fort. Es dient zur Eingabe von ganz normalem Text, optional mit Überschrift und Bild. 237

9.3

9

Inhaltselemente für Text und Bilder

9.3.1

Inhaltselement Text: Die Eingabemaske

Das Inhaltselement Text werden Sie wahrscheinlich am häufigsten einsetzen, und Sie kennen es bereits von Seite 143, als Sie auf der Startseite den ersten Text eingefügt haben. Abbildung 9.2 zeigt den Artikel auf der Startseite der Beispielsite in der Bearbeitungsansicht.

Abbildung 9.2

Der Artikel von der Startseite in der Bearbeitungssicht

Ganz oben sehen Sie, dass der Elementtyp Text ausgewählt ist. Direkt darunter steht das Feld Überschrift, in dem der Text der Überschrift und die Gliederungsebene stehen. Falls keine Überschrift gewünscht wird, lassen Sie das Feld einfach leer.

9.3.2

Der Editor TinyMCE im Überblick

Das Herzstück des Inhaltselements »Text« ist der Editor zur Formatierung des Textes (Abbildung 9.3).

238

Das Inhaltselement »Text«: »ce_text«

Abbildung 9.3

TinyMCE – der Editor zur Bearbeitung von Texten

Der Editor heißt mit richtigem Namen TinyMCE und wird oft auch als WYSIWYGEditor (von what you see is what you get) oder Rich-Text-Editor (abgekürzt RTE) bezeichnet. Rich-Text bedeutet übrigens so viel wie »mit Formatierungen angereicherter Text« und nicht »Text mit viel Geld«. Der Tiny-Editor ermöglicht die Eingabe und Formatierung von Text. Überschriften, Absätze, Listen und Zeichenformatierungen wie fett und kursiv sind damit problemlos möglich, und die Bedienung funktioniert ähnlich wie bei einer normalen Textverarbeitung. Während Sie den Text schreiben und formatieren, erzeugt der Editor im Hintergrund automatisch das entsprechende HTML. Das können Sie sich mit einem Klick auf das Symbol HTML rechts oben auch anschauen und von Hand nachbessern. Hilfreich sind die zwei Symbole links neben dem HTML-Symbol: 왘

Das Radiergummi entfernt alle Formatierungen vom markierten Text.

왘

Der Pinsel räumt den Quelltext auf und versucht, gültiges HTML daraus zu formen.

Ganz unten links sehen Sie in der Statuszeile des Editors übrigens den Namen des HTML-Elements, in dem sich der Cursor gerade befindet. Wenn Sie dort auf einen Elementnamen klicken, wird es im Editorfenster markiert, und zwar mit allen enthaltenen Elementen. Auch zum Einfügen von Bildern gibt es entsprechende Symbole, bei denen Sie sogar genaue Formatierungsanweisungen und CSS-Klassen hinterlegen können,

239

9.3

9

Inhaltselemente für Text und Bilder

aber in vielen Fällen werden Sie zum Einfügen von Bildern die speziellen Inhaltselemente benutzen und Bilder und Tabellen nicht im Editor hinzuzufügen: 왘

Ein Bild pro Inhaltselement Text können Sie mit dem Bereich Bild-Einstellungen hinzufügen, das Sie unterhalb des Editors finden. Dieses Bild können Sie bequem per Mausklick ausrichten.

왘

Für Bilder und Tabellen gibt es auch eigene Inhaltselemente.

Beide Möglichkeiten lernen Sie noch kennen.

9.3.3

Hyperlinks erstellen im Editor TinyMCE

Um im Editor einen Hyperlink zu erstellen, markieren Sie den gewünschten Text und klicken auf die Kette Link einfügen/bearbeiten in der obersten Symbolleiste des Editors. Abbildung 9.4 zeigt das daraufhin erscheindende Dialogfeld.

Abbildung 9.4

So fügen Sie einen Hyperlink im Editor ein.

Beim Einfügen oder Bearbeiten eines Hyperlinks haben Sie sieben Optionen zur Auswahl. Die obersten drei stellen verschiedene Linkziele zur Auswahl: 왘

Contao-Seiten zeigt eine Auswahlliste mit den in der Seitenstruktur erstellten Webseiten. Contao fügt im Feld Adresse daraufhin ein sogenanntes »InsertTag« wie z. B. {{link_url::34}} ein. Insert-Tags sind eine sehr praktische Sache und werden später noch genauer erklärt.

240

Das Inhaltselement »Text«: »ce_text«

왘

Contao-Dateien bietet Ihnen die in der Dateiverwaltung vorhandenen Dateien zur Auswahl an und schreibt die URL ins Feld Adresse.

왘

Um auf eine externe Webseite zu verlinken, geben Sie im Feld Adresse selbst die komplette URL ein, inklusive http:// am Anfang.

Die vier unteren Optionen beeinflussen das Aussehen und Verhalten des Links: 왘

Titel fügt dem Hyperlink das Attribut title hinzu, das in vielen Browsern als kleine gelbe Quickinfo erscheint, wenn der Mauszeiger über dem Link verweilt.

왘

Lightbox öffnet das Linkziel in einem per JavaScript erzeugten Fenster, das über der Seite zu schweben scheint. Lightboxen lernen Sie beim Einfügen von Bildern weiter unten noch genauer kennen.

왘

Fenster öffnet den Link in einem neuen Tab oder Fenster, je nachdem, was der Anwender in seinem Browser eingestellt hat.

왘

CSS-Klasse bietet eine Auswahl von CSS-Klassen, die dem Link hinzugefügt werden können. Mit der Option (value) können Sie hier im Editor an Ort und Stelle eigene Klassen definieren. Die in der Auswahlliste erscheinenden Klassen werden übrigens in tl_files/tinymce.css vordefiniert (Details in Abschnitt 22.2 über den TinyMCE).

Zur Übung erstellen Sie im folgenden ToDo ein Inhaltselement mit einer h2-Überschrift und verlinken dann die Worte »Lorem Ipsum« zum entsprechenden Artikel bei der deutschen Wikipedia. ToDo: Inhaltselement »Text« erstellen und Hyperlink einbauen 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie auf der Seite Text und Bilder den Artikel Text und Bilder [Hauptspalte] zur Bearbeitung (gelber Bleistift). 3. Fügen Sie unterhalb der Überschrift ein neues Inhaltselement Text ein, indem Sie neben der Überschrift auf das weiße Kreuz im grünen Kreis klicken. 4. Fügen Sie folgenden Text ein. Wenn Sie nicht gerne tippen, finden Sie den Text auf der Buch-DVD im Ordner beispieldateien: »Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthografisches Leben.« 5. Klicken Sie auf Speichern und Schliessen.

241

9.3

9

Inhaltselemente für Text und Bilder

ToDo: Inhaltselement »Text« erstellen und Hyperlink einbauen (Forts.) 6. Erstellen Sie darunter ein neues Inhaltselement Text mit einer h2-Überschrift »Die Reise beginnt«. 7. Geben Sie darunter im Editorfenster folgenden Text ein: »Eines Tages aber beschloss eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinauszugehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikola, doch das Blindtextchen ließ sich nicht beirren.« 8. Markieren Sie die Worte »Lorem Ipsum«. 9. Klicken Sie auf das Symbol Link einfügen/bearbeiten, und geben Sie im Feld Adresse die folgende URL ein: 10. http://de.wikipedia.org/wiki/Lorem_ipsum 11. Ergänzen Sie den Titel »Link zum Artikel bei der Wikipedia«. 12. Klicken Sie auf die Schaltfläche Einfügen. 13. Speichern und schliessen Sie das Inhaltselement.

In der Frontend-Vorschau erscheinen die beiden Inhaltselemente wie in Abbildung 9.5 untereinander, und der Link ruft den Wikipedia-Artikel auf.

Abbildung 9.5

242

Die Beispielsite mit Text und Hyperlink

Das Inhaltselement »Text«: »ce_text«

Externe Links mit einer Grafik kennzeichnen Wenn Sie externe Links, die von Ihrer Website wegführen, mit einer Grafik kennzeichnen möchten, ist dies einfach möglich: 왘

Weisen Sie externen Links im Editor z. B. die Klasse external zu.

왘

Weisen Sie im CSS allen Links mit dieser Klasse eine Hintergrundgrafik zu, die Sie in einem entsprechend dimensionierten padding platzieren.

Soll die Grafik vor dem Linktext erscheinen, nehmen Sie padding-left, hinter dem Linktext ein padding-right.

9.3.4

Das Inhaltselement »Text« mit einem Bild erweitern

Bevor Sie in diesem Abschnitt dem ersten Fließtextabsatz ein Bild hinzufügen, laden Sie bitte mit der Dateiverwaltung ein paar Fotos auf den Webspace. ToDo: Fotos auf den Webspace hochladen 1. Öffnen Sie das Backend-Modul Dateiverwaltung. 2. Klicken Sie oben im Arbeitsbereich auf Datei-Upload. 3. Wählen Sie den Ordner tl_files/beispielsite/content/fotos/. 4. Klicken Sie auf Durchsuchen, und wechseln Sie zur Buch-DVD in den Ordner beispieldateien/grafiken/content_fotos. 5. Wählen Sie nacheinander alle sechs Fotos aus. 6. Klicken Sie auf Dateien hochladen und zurück. 7. Prüfen Sie, ob die Fotos im Ordner liegen.

Außerdem sollte im Seitenlayout Standardlayout [Standard] bei den Skript-Einstellungen das MooTools-Template moo_mediabox aktiviert sein, damit im folgenden Beispiel alles funktioniert. Wenn das der Fall ist, kann es losgehen. In diesem Abschnitt fügen Sie dem ersten Inhaltselement Text ein Foto hinzu, das mit einer Breite von 100px links oben in dem Absatz stehen soll (Abbildung 9.6). Die Datei foto01.jpg hat eigentlich eine Größe von 450 × 600 Pixel, was für die Einbindung im Text zu groß ist, aber beim Einfügen des Bildes erstellt Contao auf Wunsch automatisch ein kleines Vorschaubild, das auf Klick die Großansicht in einer sogenannten Lightbox zeigt. Los geht’s.

243

9.3

9

Inhaltselemente für Text und Bilder

Abbildung 9.6

Das Vorschaubild wird vom Text umflossen.

ToDo: Ein Bild zum Inhaltselement »Text« hinzufügen 1. Öffnen Sie im Artikel Text und Bilder [Hauptspalte] das erste Inhaltselement Text unterhalb der h1-Überschrift zur Bearbeitung (gelber Bleistift). 2. Aktivieren Sie im Bereich Bild-Einstellungen unterhalb des Editors die Option Ein Bild hinzufügen. 3. Kreuzen Sie rechts neben Dateisystem die Option Auswahl ändern an. 4. Wählen Sie im Ordner beispielsite/content/fotos/ die Datei foto01.jpg. 5. Geben Sie als Alternativer Text »Das Bächlein Duden« ein, aber ohne die Anführungsstriche. 6. Geben Sie im Feld Bildbreite den Wert »100« ein. Gemessen wird hier immer in Pixel. Die Bildhöhe lassen Sie leer, und in der Auswahlliste sollte Exaktes Format stehen. 7. Geben Sie einen Bildabstand von 10px nach rechts ein. 8. Lassen Sie das Feld Bildlink-Adresse frei. 9. Aktiveren Sie die Option Grossansicht/Neues Fenster. Die Großansicht des Fotos wird dann in einer »Lightbox« dargestellt. 10. Lassen Sie das Feld Bildunterschrift leer. 11. Wählen Sie bei Bildausrichtung die zweite Option von links: Das Bild steht links oben und wird vom Text umflossen. 12. Klicken Sie auf Speichern und Schliessen.

244

Das Inhaltselement »Text«: »ce_text«

Die Webseite sollte in der Frontend-Vorschau so aussehen wie in Abbildung 9.6, und wenn Sie auf das Foto klicken, wird die Seite abgedunkelt und die Großansicht in einer Lightbox gezeigt. Links unten steht der alternative Text und rechts unten ein sprachneutraler Button zum Schließen der Lightbox (Abbildung 9.7).

Abbildung 9.7 Die Großansicht wird in einer Lightbox geladen.

Das Bächlein Duden ist übrigens in Wirklichkeit der Merced River im Yosemite National Park in Kalifornien, aus Sicht der Vernal Falls. Was genau ist eigentlich eine »Lightbox«? Lightbox ist ein Sammelbegriff für Effekte, bei denen ein JavaScript-Programm ein Objekt in einem eigenen Fenster über der Webseite präsentiert. Die Webseite selbst wird dabei meist abgedunkelt. Traditionell dient dieser Effekt zur Darstellung von einzelnen Bildern oder Bildergalerien, aber im Prinzip kann in dem JavaScript-Fenster auch ein Video, ein Anmeldeformular oder eine ganze Webseite präsentiert werden. Contao benutzt für Lightbox-Effekte wahlweise die Mediabox oder die etwas ältere Slimbox, die beide auf dem JavaScript-Framework MooTools basieren. Falls JavaScript im Browser ausgestellt oder gar nicht vorhanden ist, wird das Linkziel übrigens in einem neuen Fenster geöffnet, sodass die Zugänglichkeit gewahrt bleibt.

245

9.3

9

Inhaltselemente für Text und Bilder

9.3.5

Das HTML für das eingefügte Bild und ein CSS-Bilderrahmen

Bilder, die im Inhaltselement Text eingefügt werden, werden im Quelltext von einem div mit der Klasse .image_container umgeben. Das eben eingefügte Foto sieht im Quelltext zum Beispiel so aus:


Weit hinten...

Ein kleines ...

Listing 9.3

Quelltext für ein im Inhaltselement »Text« eingefügtes Bild

In diesem Quelltext sind einige erwähnenswerte Dinge zu sehen: 왘

Der im Backend eingegebene Abstand nach rechts von 10px wird ebenso wie die Ausrichtung nach links in einem Style-Attribut umgesetzt.

왘

Das umgebende div erhält zusätzlich die Klasse float_left, die aber momentan nirgendwo gestaltet wird.

왘

Der Hyperlink bekommt das Attribut rel="lightbox", damit das JavaScript erkennt, dass dieses Bild als Lightbox dargestellt werden soll.

왘

Automatisch erzeugte Vorschaubilder werden im Ordner system/html gespeichert und bekommen einen vom Dateinamen abgeleiteten Zufallsnamen. Im Backend-Modul System 폷 Systemwartung im Abschnitt Daten bereinigen können Sie den Ordner bei Bedarf leeren.

Diese HTML-Struktur können Sie im CSS zur Gestaltung verwenden. Im folgenden ToDo erstellen Sie zur Übung einen CSS-Bilderrahmen. Nach dieser kleinen Änderung sieht das Bild vom Bächlein Duden so aus wie in Abbildung 9.8. So viel zum Inhaltselement Text.

246

Das Inhaltselement »Bild«: »ce_image«

ToDo: Eingefügten Bildern einen Rahmen geben 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie am Ende des Stylesheets den folgenden Style ein: .image_container img { border: 2px solid #d9d9d9; border-right-color: #bbb; border-bottom-color: #bbb; }

3. Speichern Sie das Stylesheet.

Abbildung 9.8

9.4

Vorschaubild mit Bilderrahmen

Das Inhaltselement »Bild«: »ce_image«

Im vorigen Abschnitt haben Sie ein Bild zum Inhaltselement Text hinzugefügt und positioniert. In diesem Abschnitt stelle ich Ihnen nun das Inhaltselement Bild vor, das immer nur ein einziges Bild enthält.

9.4.1

Das Inhaltselement »Bild« im Einsatz

Das Inhaltselement Bild benutzen Sie, wenn das Bild innerhalb eines Artikels eine eigene inhaltliche Einheit ist und nicht vom Text umflossen werden soll. Die Vorteile bei einem Bild im eigenen Inhaltselement sind unter anderem:

247

9.4

9

Inhaltselemente für Text und Bilder

왘

einfaches Verschieben, sowohl per Drag & Drop innerhalb des Artikels als auch mit dem blauen Verschiebe-Pfeil in einen völlig anderen Artikel

왘

einfaches Kopieren des Inhaltselements

왘

einfaches Ein- und Ausblenden per »Augen-Klick«

Das Inhaltselement Bild hat ein eigenes div mit der Klasse .ce_image. Außerdem kann es im Backend eine eigene ID bekommen und so individuell per CSS gestaltet werden. Im folgenden ToDo fügen Sie am Ende des Artikels ein neues Inhaltselement vom Typ Bild ein. Als Beispiel dient die Datei foto02.jpg aus dem Ordner tl_files/beispielsite/content/fotos, das ca. 800 × 600 Pixel groß ist. Das Bild bekommt im folgenden ToDo eine Breite von 500 Pixel, damit es fast die gesamte Breite der Hauptspalte ausfüllt. Unterhalb des Bildes fügen Sie noch ein neues Inhaltselement vom Typ Text hinzu. ToDo: Inhaltselemente »Bild« und »Text« in den Artikel einfügen 1. Öffnen Sie den Artikel Text und Bilder [Hauptspalte] zur Bearbeitung. 2. Fügen Sie am Ende ein Inhaltselement mit dem Elementtyp Bild hinzu. 3. Aktivieren Sie das Kontrollkästchen Auswahl ändern, um als Quelldatei das Foto tl_files/beispielsite/content/fotos/foto02.jpg zu wählen. 4. Blenden Sie gegebenenfalls den Bereich Bild-Einstellungen ein: Alternativer Text: »Los Padres National Forest bei Santa Ynez« Bildbreite und Bildhöhe: 500 × 200, Exaktes Format

5. Aktivieren Sie die Option Grossansicht/Neues Fenster. 6. Bildunterschrift: »In die weite Welt hinaus« 7. Klicken Sie auf Speichern und Schliessen. 8. Fügen Sie unter dem Bild ein neues Inhaltselement Text ein. 9. Geben Sie im Editor den folgenden Text ein: »Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.« 10. Klicken Sie auf Speichern und Schliessen.

Im Browser erscheint das Bild jetzt mit einer links ausgerichteten Bildunterschrift, die vom Fließtext kaum zu unterscheiden ist. Die Bildunterschrift liegt in einem eigenen div mit der Klasse caption, das sich innerhalb des Inhaltselements befindet:


248

Das Inhaltselement »Bild«: »ce_image«


In die weite Welt hinaus
Listing 9.4

Die HTML-Struktur für das Inhaltselement »Bild«

Mit einer CSS-Regel wie der folgenden können Sie die Bildunterschrift gestalten. ToDo: Bildunterschrift gestalten 1. Öffnen Sie das Stylesheet bildschirm.css. 2. Fügen Sie am Ende folgenden Style ein: .ce_image .image_container .caption { font-size: 11px; text-align: center; line-height: 1.2; margin-bottom: 1em; }

3. Speichern Sie das Stylesheet bildschirm.css.

Im Browser sieht die Webseite mit diesem Style so aus wie in Abbildung 9.9.

Abbildung 9.9

Das Inhaltselement »Bild« mit einer Bildunterschrift

Der Style gestaltet aufgrund der Klasse ce_image nur Bildunterschriften im Inhaltselement Bild. Um Bildunterschriften in allen Inhaltselementen zu gestalten, lassen Sie die Klasse .ce_image am Anfang des Selektors weg.

249

9.4

9

Inhaltselemente für Text und Bilder

Das Inhaltselement »Bild« kann auch ein Link sein Wenn das Bild ein Hyperlink sein soll, deaktivieren Sie die Großansicht und geben im Feld Link-Adresse die gewünschte URL ein. Bei internen Seiten klicken Sie dazu bequem auf den blauen Ball rechts neben dem Feld, externe URLs geben Sie manuell ein, inklusive http://.

9.4.2

»Bild-Einstellungen«: Die Möglichkeiten der Bildanpassung

Bei den Bild-Einstellungen können Sie im Feld Bildbreite und Bildhöhe zwischen drei Möglichkeiten wählen: 왘

Exaktes Format

왘

Proportional

왘

An Rahmen anpassen

Diese drei Varianten haben nur Auswirkungen, wenn sowohl die Breite als auch die Höhe definiert werden. Wird nur ein Wert für Höhe oder Breite eingegeben, berechnet Contao die Größe des Bildes immer proportional zu diesem Wert. Beim Einfügen eines Bildes definieren Sie durch die Eingabe von Bildbreite und Bildhöhe einen unsichtbaren Kasten, eine Box, die auch als Rahmen bezeichnet wird. Contao fügt das Bild in diese gedachte Rahmenbox ein. Die Variante Exaktes Format haben Sie im vorigen Abschnitt bereits ausprobiert: Contao schneidet vom Mittelpunkt des Bildes ausgehend ein Rechteck in exakt der angegebenen Größe (exaktes Format) aus und fügt diesen Bildausschnitt in den unsichtbaren Rahmen ein. Das Ergebnis sehen Sie in Abbildung 9.9. Die zweite Variante, Proportional, orientiert sich bei der Erstellung des Rahmens am größeren der beiden eingegebenen Werte und passt den anderen Wert proportional an. Der zweite eingegebene Wert wird also ignoriert. Im Beispiel ist das Ergebnis so, als ob Sie nur eine Bildbreite von 500px angegeben hätten. Abbildung 9.10 zeigt die Einstellung Proportional für das Beispielfoto. Die Variante An Rahmen anpassen verhält sich genau entgegengesetzt. Sie nimmt den kleineren der beiden eingegebenen Werte und ignoriert den größeren. Abbildung 9.11 zeigt das Ergebnis dieser Einstellung. An der zentrierten Bildunterschrift können Sie erkennen, dass das HTML-Element div.image_container, das das Bild umgibt, weiterhin über die gesamte Breite der Hauptspalte geht. Um die Bildunterschrift linksbündig zu gestalten, können Sie die Anweisung text-align: left in den Style schreiben. Ich wähle im Beispiel aber lieber wieder die Einstellung Exaktes Format mit den Werten 500 × 200.

250

Das Inhaltselement »Bild«: »ce_image«

Abbildung 9.10

Das Foto mit der Einstellung »Proportional«

Abbildung 9.11 Das Foto mit der Einstellung »An Rahmen anpassen«

251

9.4

9

Inhaltselemente für Text und Bilder

Systemeinstellungen: Maximale Frontend-Breite für Bilder Wenn beim Einfügen eines Bildes im Feld Bildbreite und Bildhöhe gar nichts eingegeben wird, fügt Contao das Bild in der Originalgröße ein. Solange das umgebende div die Klasse block hat, bleibt das Layout auch bei übergroßen Bildern intakt, weil .block im CSS-Framework die Anweisung overflow:hidden enthält und das Bild bei Übergröße somit einfach abgeschnitten wird. Aber da Vorsicht bekanntlich die Mutter der Porzellankiste ist, können Sie zusätzlich eine Maximale Frontend-Breite definieren, damit ein großes Foto auch unter ungünstigsten Umständen nicht versehentlich trotzdem das Layout zerschießt: 왘

Backend-Modul System 폷 Einstellungen

왘

Bereich Dateien und Bilder

왘

Option Maximale Frontend-Breite

Ein Wert von zum Beispiel »500« sorgt dafür, dass ein eingefügtes Bild im Frontend niemals breiter wird als 500 Pixel. Sicher ist sicher.

9.5

Das Inhaltselement »Galerie«: »ce_gallery«

Neben den Inhaltselementen Text und Bild gibt es zum Einfügen von Bildern in Contao noch das Inhaltselement Galerie, das ich Ihnen im Folgenden kurz vorstellen möchte. Aber zunächst fügen Sie dem Abenteuer des Lorem Ipsum noch zwei Absätze hinzu. So viel Zeit muss sein ;-) ToDo: Das Lorem Ipsum zieht in die Welt hinaus 1. Öffnen Sie den Artikel Text und Bilder [Hauptspalte] zur Bearbeitung. 2. Erstellen Sie am Ende des Artikels ein Inhaltselement vom Typ Text. 3. Fügen Sie eine h2-Überschrift »Unterwegs« und den folgenden Text ein (tippen Sie ihn ab, oder kopieren Sie ihn von der Buch-DVD): »Als das Blindtextchen die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.« 4. Klicken Sie auf Speichern und Schliessen.

9.5.1

Eine Bildergalerie erstellen

Das Inhaltselement Bildergalerie ermöglicht Ihnen die bequeme Auswahl der darzustellenden Bilder, erstellt die Vorschaubilder automatisch und stellt die Galerie

252

Das Inhaltselement »Galerie«: »ce_gallery«

auf Wunsch in einer Mediabox dar. Alles per Klick. In diesem Abschnitt erstellen Sie eine kleine Bildergalerie mit vier Bildern, die so aussieht wie in Abbildung 9.12.

Abbildung 9.12 Inhaltselement »Galerie« mit vier Bildern

Die vier Vorschaubilder haben ungefähr eine Breite von 115px und einen Abstand nach rechts von 10px, damit sie auf die Breite der Seite passen. Der weiter oben definierte CSS-Bilderrahmen gilt übrigens auch für Bilder in der Galerie. ToDo: Eine Bildergalerie mit dem Inhaltselement »Galerie« erstellen 1. Öffnen Sie den Artikel Text und Bilder [Hauptspalte] zur Bearbeitung. 2. Erstellen Sie am Ende des Artikels ein Inhaltselement Galerie. 3. Aktivieren Sie bei Quelldateien das Kontrollkästchen Auswahl ändern. 4. Kreuzen Sie im Ordner tl_files/beispielsite/content/fotos/ die Dateien foto03.jpg, foto04.jpg, foto05.jpg und foto06.jpg an. 5. Definieren Sie eine Bildbreite von 115 Pixel und einen Bildabstand nach rechts von 10 Pixel. 6. Es sollen 4 Vorschaubilder pro Reihe angezeigt werden. 7. Sortieren nach: In zufälliger Reihenfolge. 8. Aktivieren Sie die Grossansicht/Neues Fenster, um die großen Bilder in einer Mediabox darzustellen. 9. Klicken Sie auf Speichern und Schliessen.

Mit wenigen Klicks haben Sie die Galerie aus Abbildung 9.12 erstellt. Wenn ein Besucher auf eines der Bilder klickt, erkennt Contao automatisch, dass das Bild Teil einer Galerie ist, und zeigt in der Mediabox rechts unten zwei Pfeile an, um innerhalb der Galerie vorwärts und rückwärts gehen zu können.

253

9.5

9

Inhaltselemente für Text und Bilder

Abbildung 9.13

Die Galerie in einer Mediabox mit »vor« und »zurück«

Suboptimal ist noch die Beschrifung »foto06« links unten. Momentan nimmt Contao einfach den Vornamen der Datei. Der schnellste Weg zu einer besseren Bildunterschrift wäre also ein anderer Dateiname. Vielseitiger ist aber die Beschriftung der Bilder mit einer Datei namens meta.txt, die Sie gleich kennenlernen. Vorher beenden Sie aber noch schnell das Abenteuer des Lorem Ipsum mit zwei letzten Fließtextabsätzen. ToDo: Das Lorem Ipsum zieht in die Welt hinaus 1. Öffnen Sie den Artikel Text und Bilder [Hauptspalte] zur Bearbeitung. 2. Erstellen Sie unterhalb der Galerie ein Inhaltselement Text, in das Sie den folgenden Text tippen (oder von der Buch-DVD kopieren): »Die Copy warnte das Blindtextchen, da, wo sie herkäme, wäre sie zigmal umgeschrieben worden, und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort »und«, und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles gute Zureden konnte es nicht überzeugen, und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder missbrauchten. Und wenn es nicht umgeschrieben wurde, benutzen Sie’s noch heute.« 3. Klicken Sie auf Speichern und Schliessen.

254

Das Inhaltselement »Galerie«: »ce_gallery«

9.5.2

Die Bildergalerie im HTML

In diesem Abschnitt werfen Sie einen kurzen Blick auf den HTML-Quelltext für das Inhaltselement Galerie, der übrigens vom Template gallery_default.tpl erzeugt wird:
Listing 9.5

Ausschnitt aus dem HTML einer Galerie

Eine Klammer um alles bildet das inzwischen bekannte div für das Inhaltselement, das dieses Mal die Klassen ce_gallery und block bekommt. Die Vorschaubilder werden in einer HTML-Tabelle aufbewahrt, die folgende besondere Charakteristika aufweist: 왘

Die Zeilen tr sind durchnummeriert. Die erste Zeile bekommt die Klasse row_ 0. Die Nummerierung beginnt also bei null.

왘

Gerade Zeilen bekommen die Klasse even, ungerade die Klasse odd.

왘

Die Spalten td werden analog dazu nummeriert, beginnend mit col_0.

왘

Die Breite der Spalten wird mit dem Attribut style definiert.

왘

Der Abstand nach rechts wird mit einem padding-right für das div mit der Klasse image_container festgelegt.

왘

Die Links zur Großansicht haben das Attribut rel="lightbox[lb15]", wobei der Wert [lb15] von Contao gewählt wird. Alle Bilder einer Galerie bekommen denselben Wert.

255

9.5

9

Inhaltselemente für Text und Bilder

Bei der Erstellung des Inhaltselements können Sie dem Element im Bereich Experten-Einstellungen wie immer auch noch eine besondere ID oder Klasse mit auf den Web geben. Galerie und »gallery« Achten Sie im CSS darauf, dass die Galerie im Englischen mit Doppel-»l« geschrieben wird: ce_gallery. Im Deutschen hat eine Galerie nur eines.

9.5.3

Beschriftung von Galerien: »meta.txt«

In Contao können für alle Dateien unterhalb des Ordners tl_files sogenannte Meta-Informationen hinterlegt werden. Die zusätzlichen Informationen werden in einer Datei namens meta.txt gespeichert, die im selben Ordner liegen muss wie die Dateien, für die diese Informationen gedacht sind. Die meta.txt dient zur Beschriftung von Bildergalerien und Downloads. Der Aufbau der meta.txt ist recht einfach. Sie kann drei Dinge enthalten: 왘

einen alternativen Text (Bildbeschreibung)

왘

einen Link (URL)

왘

eine Bildunterschrift (Caption)

Die drei Optionen werden jeweils durch einen senkrechten Schrägstrich getrennt, auch Pipe-Symbol genannt. Unter Windows erzeugen Sie das Symbol mit (Alt_Gr) und der Taste ganz links unten neben dem Y; auf dem Mac mit (Alt) + (7)). Der alternative Text wird in einer Mediabox übrigens auch als Bildbeschreibung verwendet. Listing 9.6 zeigt ein Beispiel für die Möglichkeiten in der meta.txt: bild1.jpg bild2.jpg bild3.jpg bild4.jpg

= = = =

Alternativer Alternativer Alternativer Alternativer

Text Text | URL Text | URL | Bildunterschrift Text | | Bildunterschrift

Listing 9.6

Aufbau einer »meta.txt«

Wenn Sie wie in der vierten Zeile einen alternativen Text und eine Bildunterschrift, aber keinen Link eingeben möchten, geben Sie einfach zwei senkrechte Striche ohne etwas dazwischen ein. Das folgende ToDo erstellt die meta.txt für die Bildergalerie auf der Seite Text und Bilder.

256

Das Inhaltselement »Galerie«: »ce_gallery«

ToDo: »meta.txt« für die Bildergalerie erstellen 1. Erstellen Sie eine neue, leere Datei in einem Editor. 2. Geben Sie die folgenden Beschreibungen ein: foto03.jpg foto04.jpg foto05.jpg foto06.jpg

= = = =

NYC (Harlem) | | Buchstabhausen Hotel California in Fresno | | Skyline No Line on the Horizon. Highway One. | | Im Nebel Montery Beach. Erholung pur. | | Am Strand

3. Speichern Sie die Datei als UFT-8 unter dem Namen meta.txt im Ordner tl_files/beispielsite/content/fotos/.

Im Frontend erscheint jetzt die Bildunterschrift unterhalb der Bilder (Abbildung 9.14).

Abbildung 9.14

Galerie mit Bildunterschriften aus »meta.txt«

Um die Bildunterschriften in der Galerie zu gestalten, suchen Sie im Stylesheet bildschirm.css den Style zur Gestaltung von caption und entfernen Sie am Anfang des Selektors das .ce_image. Der verbleibende Selektor heißt dann .image_container .caption und gestaltet auch die Bildunterschriften für die Galerie. Sie können die Bilder in der meta.txt in einer beliebigen Reihenfolge auflisten. Wenn die Galerie die Reihenfolge aus der meta.txt übernehmen soll, können Sie das im Inhaltselement Galerie festlegen: 왘

Öffnen Sie das Inhaltselement Galerie zur Bearbeitung.

왘

Blenden Sie gegebenenfalls den Bereich Bildeinstellungen ein.

왘

Wählen Sie bei Sortieren nach die Option Meta Datei (meta.txt).

왘

Klicken Sie auf Speichern.

257

9.5

9

Inhaltselemente für Text und Bilder

Wenn Sie danach in der meta.txt die Reihenfolge verändern, wirkt sich dies direkt auf die Bildergalerie aus. Es gibt zur Erstellung von Meta-Infos auch eine Erweiterung namens [MetaCreator]. Mehrsprachige Bildbeschriftungen Auf mehrsprachigen Websites können Sie für jede Sprache eine eigene Datei hinterlegen, wobei das Sprachkürzel einfach im Dateinamen angegeben wird. Für Englisch wäre das zum Beispiel meta_en.txt. Ist für eine Sprache keine Datei vorhanden, nimmt Contao die meta.txt.

9.6

Das Inhaltselement »Top-Link«: «ce_toplink»

Das Inhaltselement Top-Link fügt einem Artikel einen Nach oben-Link hinzu, mit dem der Besucher auf einer langen Seite per Mausklick wieder nach oben an den Anfang der Seite springen kann. Das Eingabeformular ist sehr übersichtlich und möchte nur einen Text zur Beschriftung des Links haben (Abbildung 9.15).

Abbildung 9.15

Das Eingabeformular für das Inhaltselement »Top-Link«

Mit diesem Formular fügen Sie im folgenden ToDo unten auf der Seite Text und Bilder nach dem Abenteuer des Lorem Ipsum einen Top-Link ein. ToDo: Top-Link einfügen 1. Öffnen Sie den Artikel Text und Bilder zur Bearbeitung. 2. Erstellen Sie am Ende des Artikels ein neues Inhaltselement vom Typ Top-Link.

258

Das Inhaltselement »Top-Link«: «ce_toplink»

ToDo: Top-Link einfügen (Forts.) 3. Fügen Sie als Link-Text den Text »[Nach oben]« ein. Die eckigen Klammern davor und dahinter dienen nur zur Dekoration. 4. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo steht im Quelltext der Webseite folgendes HTML:
[Nach oben]
Listing 9.7

Das Inhaltselement »Top-Link« im HTML

Der Kommentar sorgt wie immer dafür, dass der Link nicht von Contaos interner Suchmaschine indiziert wird. Ansonsten ist es das gewohnte Bild: Ein div-Element als Klammer um alles und darin ein Hyperlink, der zur Sprungmarke weiterleitet. Zur Gestaltung eines Top-Links würde es sich anbieten, die Unterstreichung zu entfernen und den Link durch Abstände und eine dezente Hintergrundfarbe etwas vom Inhalt abzusetzen. Im folgenden ToDo finden Sie einen Vorschlag dazu. ToDo: Das Inhaltselement »Top-Link« gestalten 1. Öffnen Sie das Stylesheet bildschirm.css in einem Editor. 2. Fügen Sie am Ende folgende Styles ein: .ce_toplink { background-color: #eee; font-size: 11px; vertical-align: middle; padding: 3px; margin: 1.5em 0; } .ce_toplink a { color: #000; text-decoration: none; }

3. Speichern Sie das Stylesheet.

Abbildung 9.16 zeigt diesen Link unten auf der Seite Text und Bilder.

259

9.6

9

Inhaltselemente für Text und Bilder

Abbildung 9.16 Das Inhaltselement »Top-Link« auf einer Webseite

Auf einer langen Webseite können Sie natürlich auch mehrere Top-Links setzen. Am einfachsten geht das, indem Sie das Inhaltselement mit einem Klick auf das grüne Kreuz kopieren und mit dem braunen blinkenden Pfeilsymbol an der gewünschten Stelle wieder einfügen. Ein Tipp noch zum Abschluss: Falls Sie auf jeder Seite unten einen Top-Link haben möchten, müssen Sie diesen nicht auf jeder Seite manuell als Inhaltselement einfügen. Stattdessen erstellen Sie ein Modul vom Typ Eigener HTML-Code und binden es unterhalb der Artikel im Seitenlayout ein. Das Modul könnte Navigation – Toplink heißen und hätte folgenden Inhalt:
[Nach oben]
Listing 9.8

Das Modul »Navigation – Toplink«

Das Insert-Tag {{env::request}} wird auf jeder Seite durch den aktuellen Request String ersetzt. Das ist der Teil der URL nach dem ersten einfachen Schrägstrich, also z. B. startseite.html.

260

Syndikation: Artikel drucken und verbreiten

Das Inhaltselement »Hyperlink«: »ce_hyperlink« Das Inhaltselement Hyperlink benutzen Sie, wenn Sie einen Hyperlink als eigenes Inhaltselement erstellen möchten. Im HTML sieht das Inhaltselement Hyperlink so aus:
Linktext


Sie können damit einen Textlink oder einen Bildlink erstellen und das Linkziel auf Wunsch in einer eigenen Lightbox öffnen. Alles das geht aber auch im Editorfenster in einem ganz normalen Inhaltselement Text.

9.7

Syndikation: Artikel drucken und verbreiten

In den Artikel-Einstellungen verbirgt sich im Bereich Experten-Einstellungen eine Option namens Syndikation, mit der Sie einen Artikel ausdrucken, als PDF speichern oder bei Twitter und Facebook empfehlen können. Laut Wikipedia bezeichnet der Begriff Syndikation übrigens »die Weitervergabe von lizenzierten Inhalten an Kunden, die sie entsprechend der Lizenz weiterverwerten dürfen«.

9.7.1

Die Links zur Syndikation aktivieren

Das Erstellen der Links zur Syndikation ist sehr einfach und erfordert lediglich ein paar Klicks in den Artikel-Einstellungen.

Abbildung 9.17 Die Syndikation in den Artikel-Einstellungen

261

9.7

9

Inhaltselemente für Text und Bilder

Um Artikel bei Twitter oder Facebook verbreiten zu können, benötigen Sie ein Benutzerkonto bei diesen Diensten. ToDo: Die Links zur Syndikation erzeugen 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie die Artikel-Einstellungen für den Artikel Text und Bilder [Hauptspalte], z. B. über einen Rechtsklick auf den gelben Bleistift. 3. Aktivieren Sie im Bereich Experten-Einstellungen die gewünschten Optionen zur Syndikation. 4. Klicken Sie auf Speichern und Schliessen.

Jetzt erscheinen links über der Artikelüberschrift vier Links zum Ausdrucken, Speichern als PDF und zum Empfehlen bei Facebook oder Twitter.

9.7.2

Die Links zur Syndikation per CSS gestalten

Im Quelltext stehen die vier Links in einem div mit der Klasse pdf_link, das Sie mit dem CSS aus dem folgenden ToDo rechts neben die Überschrift zaubern können. ToDo: Die Links zur Syndikation gestalten 1. Öffnen Sie das Stylesheet bildschirm.css. 2. Fügen Sie am Ende den folgenden Style hinzu: .pdf_link { float:right; width: auto; margin-left: 10px; }

3. Speichern Sie das Stylesheet.

Im Frontend stehen die vier Links am rechten oberen Rand des Artikels. Durch den linken Margin ist sichergestellt, dass auch eine lange Überschrift immer ein bisschen Abstand hält. Die Erweiterung »[fastedit]« zur schnellen Bearbeitung von Inhalten Die Erweiterung [fastedit] von Andreas Schrempp ermöglicht die schnelle Bearbeitung von Inhalten aus dem Frontend heraus: 왘

[fastedit] Schnelle Bearbeitung http://bit.ly/ccpC7G

Nach einer Anmeldung im Backend erscheint im Frontend ein gelber Bleistift, wenn Sie mit dem Mauszeiger über ein Inhaltselement oder Modul fahren. Ein Klick auf den Bleistift ruft das Objekt in einer Mediabox zur Bearbeitung auf.

262

Syndikation: Artikel drucken und verbreiten

Abbildung 9.18

Die Links zur Syndikation rechts oben im Artikel

263

9.7

In diesem Kapitel lernen Sie weitere nützliche Inhaltselemente wie Tabelle und Akkordeon kennen. Außerdem erstellen Sie Inhaltselemente zur Einbettung externer Videos.

10

Weitere nützliche Inhaltselemente

In diesem Kapitel geht es um die Inhaltselemente Tabelle und Akkordeon und danach um die Einbindung von externen Videos.

10.1

Das Inhaltselement »Tabelle«: ce_table

Das Inhaltselement Tabelle ist für einfache, regelmäßige Tabellen gedacht, die überwiegend unformatierten Text enthalten. Die Vorteile dieses Inhaltselements sind unter anderem: 왘

Das Erstellen der Tabelle ist dank Eingabe-Assistent sehr einfach.

왘

Die Tabelle ist auf Wunsch im Frontend per Klick sortierbar.

왘

Die Daten können aus Textdateien (CSV) importiert werden.

왘

Die Gestaltung der Tabellen kann durch Vergabe von Klassen per Fernsteuerung geregelt werden. So können zum Beispiel Designvorgaben auch von Redakteuren ohne CSS-Kenntnisse eingehalten werden.

Komplexere Tabellen mit unregelmäßigen Zeilen- und Spaltenstrukturen können im Inhaltselement Text mit dem Editor TinyMCE angelegt werden.

10.1.1

Der Eingabeassistent für das Inhaltselement »Tabelle«

Wenn Sie in einem Artikel ein Inhaltselement vom Typ Tabelle einfügen, erscheint das Eingabeformular aus Abbildung 10.1, in dem ein komfortabler Eingabeassistent die Eingabe der Tabellendaten erleichtert.

265

10

Weitere nützliche Inhaltselemente

Abbildung 10.1 Eingabeformular für das Inhaltselement »Tabelle«

Im Bereich Tabelleneinträge unterhalb der optionalen Überschrift gibt es neben dem Wort Tabelleneinträge ein Symbol zum Importieren von CSV-Daten und zwei Symbole zum Zoomen der Tabelle im Backend während der Bearbeitung. Darunter sehen Sie eine einzelne Tabellenzelle mit den Bedienelementen für Spalten (darüber) und Zeilen (daneben). Das ist der Eingabeassistent für die Tabelle: 왘

Mit den grünen Plus-Zeichen können Sie die gewünschte Anzahl von Spalten und Zeilen erzeugen.

266

Das Inhaltselement »Tabelle«: ce_table

왘

Mit den grünen Pfeilen können Sie die Reihenfolge verändern.

왘

Das rote X löscht Zeilen und Spalten. Ein Klick löscht immer ganze Zeilen bzw. Spalten, und zwar ohne Sicherheitsfrage. Seien Sie vorsichtig!

Um Text zu schreiben, klicken Sie einfach in eine Zelle und schreiben los. Navigieren innerhalb der Tabelle geht vorwärts mit der (ÿ)-Taste und rückwärts mit (ª) + (ÿ). Im Bereich Tabellenkonfiguration müssen Sie in das Pflichtfeld Zusammenfassung eine kurze Zusammenfassung des Inhalts eingeben. Diese erscheint im Quelltext beim table-Element im Attribut summary und ist für barrierefreie Tabellen vorgeschrieben. Die Option Kopfzeile hinzufügen macht aus der ersten Zeile der Tabelle eine Kopfzeile (thead), die Option Fusszeile hinzufügen macht aus der letzten eine Fußzeile (tfoot). Tabellen können auf Wunsch im Frontend per Klick sortiert werden Eine Besonderheit gibt es im Bereich Sortieroptionen. Das Aktivieren des Kontrollkästchens Sortierbare Tabelle sorgt dafür, dass Besucher der Webseiten die Tabelle in ihrem Browser mit einem Klick auf die Spaltenüberschriften sortieren können.

10.1.2

Importieren der Daten mit einer CSV-Datei

Normalerweise geben Sie den Inhalt für die Tabellenzellen mithilfe des Eingabeassistenten ein, aber Sie können die Daten für die Tabelle auch aus einer sogenannten CSV-Datei importieren. CSV ist die Abkürzung für comma separated value und steht für eine Textdatei, in der jeder Datensatz in einer Zeile steht und Werte (»values«) in den einzelnen Feldern durch ein Komma getrennt werden (daher »comma separated«). Das Wort »Komma« sollten Sie hierbei nicht zu wörtlich nehmen, denn als Trennzeichen kann auch ein Semikolon (»Strichpunkt«) oder ein Tabstopp dienen. In fast allen gängigen Tabellenkalkulationen kann man Tabellen als CSV-Datei abspeichern, was den Import in das Inhaltselement »Tabelle« vereinfacht, da man viel weniger tippen muss. Das hat nicht nur mit Bequemlichkeit zu tun, sondern auch mit Fehlervermeidung, denn alles, was man selbst tippt, ist ein potenzieller Tippfehler. Die Beispieldatei ce_tabelle.csv von der Buch-DVD sieht so aus: Nr.;Künstler;Titel;Album 01;Giorgio Conte;Cannelloni;Italian Café

267

10.1

10

Weitere nützliche Inhaltselemente

02;Maria de Barros;Mi Nada Um Ca Tem;Women of Africa 03;Beethova Obas;Rasanblé;Music from the Chocolate Lands 04;Anna de Hollanda;Samba Triste;Acoustic Brazil 05;Samite;Wasuze Otya?;Music from the Coffee Lands 06;Zulya;Saginou;Music from the Tea Lands 07;Gare Du Nord;How Was It For You?;Euro Lounge 08;Marta Gómez;La Ronda;Women of Latin America 09;Baguette Quartette;En Douce;French Café 10;Topsy Chapman and the Pros;Baby Won't You Please Come Home;New Orleans Listing 10.1

Die Beispieldatei »ce_tabelle.csv«

Im folgenden ToDo importieren Sie diese Datei. ToDo: Importieren der Tabellendaten aus einer CSV-Datei 1. Kopieren Sie die Datei ce_tabelle.csv mit der Dateiverwaltung von der Buch-DVD in den Ordner tl_files/importieren/. Oder tippen Sie Listing 10.1 ab. 2. Öffnen Sie im Backend-Modul Artikel den Artikel Weitere Elemente [Hauptspalte] zur Bearbeitung. 3. Löschen Sie eventuell vorhandene Inhaltselemente, und fügen Sie ein Inhaltselement Text mit den folgenden Einstellungen ein: h1-Überschrift »Weitere Elemente«, Text »Auf dieser Seite werden die Inhaltselemente Tabelle und Akkordeon vorgestellt.« und CSS-Klasse »seitenanfang«. 4. Klicken Sie auf Speichern und neu. 5. Erstellen Sie ein Inhaltselement Text mit der h2-Überschrift »Das Inhaltselement Tabelle« und dem Text »Die folgende Tabelle zeigt Titel und Interpreten des Putumayo Café Samplers«. 6. Klicken Sie auf Speichern und neu. 7. Wählen Sie den Elementtyp Tabelle. 8. Klicken Sie auf das Symbol zum Importieren von CSV-Dateien. 9. Wählen Sie als Trennzeichen den »Strichpunkt«. 10. Kreuzen Sie in tl_files/importieren/ die ce_tabelle.csv an. 11. Klicken Sie auf die Schaltfläche CSV-Import. Wenn die fertige Tabelle in einer Spalte erscheint, haben Sie das falsche Trennzeichen gewählt. Versuchen Sie es gleich noch einmal. 12. Geben Sie im Feld Zusammenfassung »Putumayo Café Sampler« ein. é ist übrigens das HTML-Kürzel für ein »é«. 13. Aktivieren Sie die Optionen Kopfzeile hinzufügen. 14. Klicken Sie auf Speichern und Schliessen.

268

Das Inhaltselement »Tabelle«: ce_table

Im Frontend sieht die unformatierte Tabelle so aus wie in Abbildung 10.2.

Abbildung 10.2 Die importierte Tabelle, noch unformatiert

HTML und Insert-Tags sind erlaubt Zur Gestaltung des Textes im Eingabeassistenten können Sie auch HTML-Elemente wie strong benutzen, müssen diese allerdings manuell eingeben. Sogar Insert-Tags zum Einfügen von Hyperlinks oder Bildern sind erlaubt. Hier ein Beispiel: {{image::tl_files/beispielsite/content/fotos/foto01.jpg}}

Eine Übersicht über Insert-Tags finden Sie in Kapitel 22.6.

10.1.3 Das HTML für das Inhaltselement »Tabelle« Bevor Sie die Tabelle mit ein paar CSS-Regeln gestalten, werfen Sie einen kurzen Blick auf den HTML-Quelltext:


269

10.1

10

Weitere nützliche Inhaltselemente

...

Nr.	Künstler	Titel	Album
01	Giorgio Conte	Cannelloni	Italian Café
02	Maria de Barros	Mi Nada Um Ca Tem	Women of Africa

Listing 10.2

Ausschnitt aus dem HTML für das Inhaltselement »Tabelle«

Verschiedene Tabellen durch verschiedene Klassen Im Eingabeformular für das Inhaltselement Tabelle können Sie bei Bedarf in den Experten-Einstellungen noch spezielle IDs und Klassen für das umgebende div-Element vergeben, mit denen die Tabellen gestaltet werden können. Damit wäre es möglich, im CSS Formatierungen für verschiedene Arten von Tabellen zu hinterlegen, die ein Redakteur ganz einfach durch Eingabe einer Klasse wie umsatztabelle anwenden kann.

10.1.4 Das Inhaltselement »Tabelle« per CSS gestalten Sinnvoll gesetzte IDs und Klassen erleichtern die Gestaltung der Tabelle per CSS. Hier ein Beispiel zur Gestaltung der Tabelle: .ce_table table { background-color: #d9d9d9; border-collapse: collapse; border-bottom: 2px solid #bbb; margin-bottom: 1em; } .ce_table thead { background-color: #fff; color: #000;

270

Das Inhaltselement »Tabelle«: ce_table

border-top: 2px solid #bbb; border-bottom: 1px solid #bbb; } .ce_table tr.odd { background-color: #fff; } .ce_table td, .ce_table th { font-size: 11px; padding: 0.5em 1em; } Listing 10.3

CSS-Regeln zur Gestaltung des Inhaltselements »Tabelle«

In Listing 10.3 sind folgende Details erwähnenswert: 왘

Mit der Klasse .ce_table am Anfang der Selektoren beschränken Sie die Gestaltung auf Tabellen, die mit dem Inhaltselement Tabelle erstellt wurden.

왘

Die CSS-Regel .ce_table tr.odd gestaltet ungerade Tabellenzeilen und ermöglicht so übersichtliche Zebrastreifen mit einem Style. Die Klasse für gerade Zeilen heißt entsprechend tr.even.

Die Ausrichtung von Text innerhalb der Tabellenzellen ist übrigens bereits im Reset-Stylesheet basic.css erfolgt: links und oben. ToDo: Die Tabelle gestalten 1. Öffnen Sie das Stylesheet bildschirm.css in einem Editor. 2. Fügen Sie am Ende des Stylesheets die Styles aus Listing 10.3 ein. 3. Speichern Sie das Stylesheet.

Abbildung 10.3 zeigt die gestaltete Tabelle im Browser. Tabelle im Frontend sortierbar machen Um die Tabelle im Frontend sortierbar zu machen, öffnen Sie das Inhaltselement und aktivieren die Option Sortierbare Tabelle. Der Sortierindex 0 sortiert die Tabelle nach der ersten Spalte. Im Frontend können Sie die Tabelle mit einem Klick auf eine Spaltenüberschrift sortieren, und in der Überschriftzeile erscheinen kleine Grafikpfeile, die die aktuelle Sortierung anzeigen.

271

10.1

10

Weitere nützliche Inhaltselemente

Abbildung 10.3 Die importierte Tabelle, formatiert

10.2

Das Inhaltselement »Akkordeon«: »ce_accordion«

Das Wort »Akkordeon« löste bei mir in jungen Jahren eine eher unangenehme Assoziationskette aus: Akkordeon. Zeltlager. Mundorgel. Ein kleines rotes Büchlein mit volkstümlichem Liedgut, das zu einer leichten Akkordeonallergie führte. Die ist im Laufe der Jahre aber verflogen, und ich habe gelernt, dass ein Akkordeon, richtig eingesetzt, sehr angenehm sein kann. Das gilt auch für das Inhaltselement in diesem Abschnitt. »Akkordeon« ist ein typischer Web2.0-Effekt, bei dem auf einer Webseite ein Detailbereich per Mausklick auf eine Überschrift ein- und ausgeblendet wird. Wenn mehrere solcher Elemente untereinander stehen, wirkt das Auf- und Zuklappen mit ein bisschen Fantasie wie ein, ja genau, Sie haben es erraten. Auf der Beispielsite werden im Folgenden mithilfe des Inhaltselements Akkordeon drei CDs kurz vorgestellt. Diese erscheinen neben der Tabelle in der rechten Spalte (Abbildung 10.4).

272

Das Inhaltselement »Akkordeon«: »ce_accordion«

Abbildung 10.4 Ein Akkordeon in der rechten Spalte

Der große Vorteil eines Akkordeons ist, dass man Informationen damit sehr platzsparend darstellen kann. Ein potenzieller Nachteil ist, dass Besucher, die nicht auf die Überschriften klicken, die ausgeblendeten Elemente nicht sehen und unverrichteter Dinge wieder von dannen ziehen.

10.2.1

Seitenlayout vorbereiten und Artikel erstellen

Zunächst einmal treffen Sie ein paar Vorbereitungen im Seitenlayout: Zuerst sorgen Sie im Bereich Frontend-Module dafür, dass im Frontend Artikel in der rechten Spalte dargestellt werden. Dann muss das MooTools-Template moo_accordion aktiviert werden, damit das für ein Akkordeon benötigte JavaScript zur Verfügung gestellt wird. Nach diesen Vorbereitungen legen Sie im folgenden ToDo noch einen neuen Artikel an, der erstmals in der rechten Spalte erscheinen wird. ToDo: Seitenlayout vorbereiten und Artikel erstellen 1. Öffnen Sie im Backend-Modul Themes das Seitenlayout Standardlayout [Standard] zur Bearbeitung. 2. Erstellen Sie im Bereich Frontend-Module eine neue Zeile und wählen Sie das Modul Artikel in der Spalte Rechte Spalte. Es ist egal wo. Contao sortiert die Zeilen nach dem Speichern.

273

10.2

10

Weitere nützliche Inhaltselemente

ToDo: Seitenlayout vorbereiten und Artikel erstellen (Forts.) 3. Aktivieren Sie weiter unten im Bereich Skript-Einstellungen das MooTools-Template moo_accordion. 4. Klicken Sie auf Speichern und Schliessen. 5. Wechseln Sie in das Backend-Modul Artikel. 6. Klicken Sie oben im Arbeitsbereich auf Neuer Artikel, und fügen Sie ihn mit einem Klick auf den braunen Pfeil nach unten unterhalb des Artikels Weitere Elemente [Hauptspalte] ein. 7. Bearbeiten Sie die Artikel-Einstellungen wie folgt: 8. Titel: »CDs im Akkordeon« (ohne Anführungsstriche) 9. Anzeigen in: Rechte Spalte 10. Aktivieren Sie die Option Artikel veröffentlichen. 11. Klicken Sie auf Speichern und Schliessen.

Im Browser ist nach diesem ToDo nichts zu sehen, da der Artikel noch keine Inhaltselemente hat, aber es ist alles vorbereitet.

10.2.2 Das Eingabeformular für das Inhaltselement »Akkordeon« Wenn Sie beim Einfügen eines neuen Inhaltselements den Elementtyp Akkordeon auswählen, erscheint das in Abbildung 10.5 dargestellte Eingabeformular. Ganz oben sehen Sie den gewählten Elementtyp Akkordeon. Die Optionen darunter sind wie folgt: 왘

Betriebsart: Mit der Option Einzelnes element ähnelt das Akkordeon einem normalen Textelement. Es kann eine Bereichsüberschrift genannte Überschrift, ein bisschen Text und optional ein Bild enthalten. Durch einen Klick auf die Überschrift werden Text und Bild im Browser ein- und ausgeblendet. Ein Akkordeon kann auch bereits bestehende Inhaltselemente enthalten. Dazu fügen Sie einfach vor den entsprechenden Inhaltselementen ein Akkordeon-Element mit der Betriebsart Umschlag Anfang und danach eines mit der Betriebsart Umschlag Ende hinzu.

왘

Bereichsüberschrift: Durch einen Klick auf die Bereichsüberschrift wird der Inhalt des Akkordeons ein- und ausgeblendet. HTML-Elemente sind erlaubt, und die Überschrift könnte im Feld CSS-Format auch gleich gestaltet werden.

왘

Klassennamen müssen nur vergeben werden, wenn Sie mehr als ein Akkordeon pro Webseite benutzen möchten. Allerdings muss dann auch das MooTools-JavaScript entsprechend angepasst werden, was nicht ganz so trivial ist.

274

Das Inhaltselement »Akkordeon«: »ce_accordion«

왘

Text und Ein Bild hinzufügen funktionieren genau wie bei einem normalen Inhaltselement »Text«.

Abbildung 10.5 Das Eingabeformular für das Inhaltselement »Akkordeon«

Genug der Theorie. Es wird Zeit, ein Akkordeon zu bauen.

275

10.2

10

Weitere nützliche Inhaltselemente

10.2.3 Zugeschaut und mitgebaut: Drei Akkordeons erstellen In diesem Abschnitt legen Sie nach der gründlichen Vorbereitung nun Ihre Prüfung zum zertifizierten Instrumentenbauer ab und erstellen drei Akkordeons, in denen die CDs Latin Lounge, African Groove und Sahara Lounge vorgestellt werden, jeweils mit einem Bild und einer Zeile Text. ToDo: Drei Inhaltselemente »Akkordeon« erstellen 1. Kopieren Sie mit der Dateiverwaltung die drei CD-Cover von der Buch-DVD in den Ordner beispielsite/content/bilder. 2. Öffnen Sie im Backend-Modul Artikel den Artikel CDs im Akkordeon zur Bearbeitung. 3. Fügen Sie ein neues Inhaltselement Akkordeon hinzu. 4. Wählen Sie als Betriebsart Einzelnes Element. 5. Geben Sie als Bereichsüberschrift »Latin Lounge« ein. 6. In das Feld Text schreiben Sie einfach nur »Der Bestseller«. 7. Aktivieren Sie die Option Ein Bild hinzufügen. 8. Wählen Sie das Bild cover_latin_lounge.jpg im Ordner beispielsite/content/bilder/. 9. Geben Sie als Alternativer Text »Cover der CD Latin Lounge« ein. 10. Das Feld Bildlink-Adresse bleibt leer, aber hier könnten Sie z. B. einen direkten Link zu einer Bestellmöglichkeit hinterlegen. 11. Wählen Sie als Bildausrichtung die erste Option »oberhalb«. 12. Klicken Sie auf Speichern und neu. 13. Wiederholen Sie diese Schritte für die CDs »African Groove« und »Sahara Lounge«. Als Text geben Sie eine kurze Beschreibung wie »Musik zum Tanzen« bzw. »Musik aus der Wüste« ein. 14. Klicken Sie auf Speichern und Schliessen.

Im Browser erscheint der Artikel (wie in Abbildung 10.6 zu sehen ist) in der rechten Spalte, und er enthält die drei Akkordeons. Das ist nicht hübsch, aber sie sind bereits bespielbar. Das erste Element ist standardmäßig sichtbar, und ein Klick auf die Bereichsüberschriften blendet das entsprechende Cover und die kurze Beschreibung ein. Das Akkordeon ist somit wie gesagt bespielbar, aber da es weder benutzerfreundlich ist noch gut aussieht, wäre es wahrscheinlich ein echter Ladenhüter. Deshalb wird es in den nächsten Abschnitten noch ein bisschen verbessert.

276

Das Inhaltselement »Akkordeon«: »ce_accordion«

Abbildung 10.6 Drei Akkordeons – bespielbar, aber nicht hübsch

10.2.4 Das HTML für ein Akkordeon Das HTML für ein Akkordeon ist unspektakulär. Das Inhaltselement selbst bekommt ein div mit den Klassen ce_accordion und block. Akkordeon schreibt sich im Englischen accordion, mit Doppel-»c« und einem »i«. Denken Sie dran. In diesem div liegen die Überschrift und der Inhalt, jeweils wieder in einem eigenen div. Die Überschrift hat die Klasse toggler (to toggle bedeutet ein- und ausschalten) und der Inhalt die Klasse accordion. Listing 10.4 zeigt das komplette HTML für das Inhaltselement Akkordeon:
Latin Lounge



Der Bestseller.

Listing 10.4

Das HTML für ein Akkordeon

10.2.5 Das CSS zur Gestaltung eines Akkordeons So viel zum HTML. Das CSS zur Gestaltung der Elemente aus Listing 10.4 ist erstaunlich kurz und besteht aus nur drei CSS-Regeln:

277

10.2

10

Weitere nützliche Inhaltselemente

ToDo: Akkordeon per CSS gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie ganz am Ende die folgenden Styles ein: #right .ce_accordion { width: 142px; float: right; border: 1px solid #d9d9d9; } .ce_accordion .toggler { cursor: pointer; background: #d9d9d9; padding: 0.25em 0.5em; } .ce_accordion .accordion div { font-size: 11px; padding: 0.75em 0.5em; }

3. Speichern Sie das Stylesheet.

Nach diesem ToDo sehen die Akkordeons schon etwas besser aus:

Abbildung 10.7 Formatierte Akkordeons

Und hier die Styles im Überblick: 왘

Im ersten Style bekommen die Akkordeons eine feste Breite von 142px und werden nach rechts gefloatet. Die ID #right beschränkt den Style auf die rechte Spalte, damit z. B. in der Hauptspalte platzierte Akkordeons nicht auch versehentlich auf 142px geschrumpft und nach rechts gefloatet werden.

왘

Die Bereichsüberschrift wird hellgrau hinterlegt, und damit Besucher verstehen, dass sie anklickbar ist, wird der Mauszeiger mit cursor:pointer zu einer Klickhand umgeformt, wie bei einem Hyperlink.

왘

Last, but not least wird der Text innerhalb des Akkordeons etwas verkleinert.

Anklickbar. Platzsparend. Fertig.

278

Das Inhaltselement »Akkordeon«: »ce_accordion«

10.2.6 Optional: Grafiken zur Statusanzeige Eine Gefahr beim Einsatz von Akkordeons ist, dass ein Besucher nicht merkt, dass sich hinter den Überschriften noch versteckte Inhalte verbergen. Um dem entgegenzuwirken, können Sie in der Bereichsüberschrift für ein- und ausgeklappte Akkordeons jeweils unterschiedliche Grafiken anzeigen. Dazu muss zunächst das zuständige Template so erweitert werden, dass ein ausgeklapptes Akkordeon eine zusätzliche Klasse wie zum Beispiel .active bekommt. Auf der Buch-DVD finden Sie das Template moo_accordion_active.tpl, das auf dem Forumsbeitrag »Akkordeon toggler« von Community-Moderator xchs basiert. Und los geht’s: 왘

Kopieren Sie die Datei moo_accordion_active.tpl in den Ordner templates/ blaues_theme/.

왘

Deaktivieren Sie im Seitenlayout das Moo-Template moo_accordion.

왘

Aktivieren Sie das neue Moo-Template moo_accordion_active.

Nach dieser Aktion hat ein ausgeklapptes Akkordeon im umgebenden div-Element zusätzlich die Klasse .active, mit der Sie im CSS den Bereichsüberschriften unterschiedliche Hintergrundgrafiken zuweisen können. Jetzt fehlen nur noch passende Grafiken. Gut geeignet wären ein Plus-Zeichen für ein zugeklapptes Akkordeon und ein Minus-Zeichen für ein ausgeklapptes. Kopieren Sie dazu einfach die Grafiken minus.gif und plus.gif von der Buch-DVD in den Ordner themes/blaues_theme/grafiken. Das CSS zur Einbindung der Grafiken könnte so aussehen wie in Listing 10.5. Ein zugeklapptes Akkordeon (.toggler) bekommt ein Plus-Zeichen, ein ausgeklapptes (.toggler.active, ohne Leerstelle!) ein Minus-Symbol: .ce_accordion .toggler { background: #d9d9d9 url(grafiken/plus.gif) no-repeat left center; padding: 0.25em 0.5em 0.25em 1.5em; } .ce_accordion .toggler.active { background: #d9d9d9 url(grafiken/minus.gif) no-repeat left center; } Listing 10.5

Das CSS zur Einbindung der Grafiken

Abbildung 10.8 zeigt die fertigen Akkordeons mit den Grafiken.

279

10.2

10

Weitere nützliche Inhaltselemente

Abbildung 10.8

10.3

Akkordeons mit Grafiken zur Statusanzeige

Externe Videos auf Webseiten einbinden

In diesem Abschnitt möchte ich Ihnen zeigen, wie man in Contao mit Bordmitteln externe Videos einbinden kann.

10.3.1 Inhaltselement »Text«: Ein Link in einer Mediabox Sie beginnen mit einer einfachen und doch nicht so ganz offensichtlichen Möglichkeit, Videos auf einer Webseite anzuzeigen: mit einem ganz normalen Hyperlink im Inhaltselement Text, der das Video in einer Mediabox anzeigt, die Sie bereits von der Großansicht eingefügter Bilder her kennen. Im folgenden ToDo erstellen Sie den Link, der zu Abbildung 10.9 führt. ToDo: Ein Video in einer Mediabox anzeigen 1. Öffnen Sie im Backend-Modul Artikel den Artikel Videos. 2. Löschen Sie eventuell vorhandene Inhaltselemente, und fügen Sie ein Inhaltselement Text mit den folgenden Einstellungen ein: h1-Überschrift »Videos«, Text »Auf dieser Seite sehen Sie, wie Sie Videos auf Ihren Webseiten anzeigen.« und CSS-Klasse »seitenanfang«. 3. Klicken Sie auf Speichern und neu. 4. Erstellen Sie die h2-Überschrift »Ein Video in einer Mediabox«. 5. Gegen Sie im TinyMCE-Editor folgenden Text ein: Der folgende Link zeigt ein Video in einer Mediabox: • The Police – Roxanne (YouTube, 03:42) Live at Pink Pop in 1979.

6. Markieren Sie Bandnamen und Titel (»The Police – Roxanne«), und klicken Sie in der Symbolleiste auf das Kettensymbol zum Einfügen eines Hyperlinks, um das Dialogfeld zu öffnen.

280

Externe Videos auf Webseiten einbinden

ToDo: Ein Video in einer Mediabox anzeigen (Forts.) 7. Geben Sie im Dialogfeld im Feld Adresse die URL zum Video ein: http://www.youtube.com/watch?v=-wpX6drarrs 8. Wählen Sie im Feld Lightbox den Wert (value), und fügen Sie dann den Wert lightbox[video 480 385] ein. Vor der eckigen Klammer steht keine Leerstelle, nach video und 480 hingegen wohl. 9. Klicken Sie auf die Schaltfläche Einfügen. 10. Klicken Sie auf Speichern und Schliessen.

Abbildung 10.9 zeigt das Ergebnis im Browser.

Abbildung 10.9

Ein Link zeigt ein Video in einer Mediabox.

Der Trick ist der Eintrag im Feld Lightbox: lightbox[video 480 385] bewirkt, dass der Browser das Linkziel in einer Mediabox der Größe 480 × 385 Pixel anzeigt, und das ist für dieses YouTube-Video gut. Sie können dort je nach Video natürlich auch eine andere Größe eingeben. Falls die ungeordnete Liste ohne Einrückung und Aufzählungspunkt erscheint, liegt das am Reset in der basic.css. Mit folgenden Styles am Anfang der bildschirm.css können Sie die Abstände wiederherstellen: /* Restaurierung der Listen */ ol,ul { margin-bottom:1.5em; } li { margin-left:2em; } ul li { list-style: square; } ol li { list-style: decimal; } Listing 10.6

Restaurierung der Listen in bildschirm.css

281

10.3

10

Weitere nützliche Inhaltselemente

Über das »video« in »lightbox[video 480 385]« Das Wort in den eckigen Klammern dient zur Gruppierung von Lightboxen auf einer Seite. Wenn Sie also mehrere Videos auf einer Seite einbinden und alle mit dem Wort video kennzeichnen, wird die Mediabox quasi zur Videogalerie. Neben dem X zum Schließen erscheinen rechts unten in der Mediabox Pfeile nach rechts oder links, mit denen der Besucher zum nächsten oder zum vorherigen Video gehen kann. Das Wort video selbst ist nicht wichtig, und Sie könnten ohne Weiteres auch pop oder external oder sowas nehmen.

10.3.2 Das Inhaltselement »HTML«: »ce_html« Mit dem Inhaltselement HTML können Sie einem Artikel (fast) beliebigen HTMLCode zufügen. Das Eingabeformular ist sehr übersichtlich und besteht, wie Abbildung 10.10 zeigt, nur aus einer Textarea mit einem integrierten Editor.

Abbildung 10.10 Das Eingabeformular für das Inhaltselement HTML

Mit den Bedienelementen der Symbolleiste können Sie das Verhalten des Editors steuern und zum Beispiel den Zeilenumbruch ein- und ausschalten. Unterhalb der Textarea können Sie den Editor auch deaktivieren. Im Inhaltselement HTML sind übrigens nicht alle HTML-Elemente erlaubt. Die im Kommentar unterhalb der Textarea angesprochene Liste der erlaubten HTML-Elemente finden Sie im Backend-Modul System 폷 Einstellungen im Bereich Sicherheitseinstellungen.

282

Externe Videos auf Webseiten einbinden

Die Aufzählung Erlaubter HTML-Tags ist relativ lang, enthält aber zum Beispiel weder embed noch iframe. Wenn Sie im Feld HTML-Code also z. B. den Einbettungscode für ein YouTube-Video einfügen möchten, müssen Sie hier vorher <embed> erlauben. Im folgenden ToDo fügen Sie auf der Seite Videos einen Link zu dem Video »La Ronda« von Marta Goméz ein. Sie können aber natürlich auch gerne ein anderes Video nehmen. ToDo: Videos mit dem Inhaltselement »HTML« einbetten 1. Öffnen Sie das Backend-Modul System 폷 Einstellungen, und fügen Sie bei Sicherheitseinstellungen das HTML-Tag <embed> hinzu. 2. Klicken Sie auf Speichern und Schliessen. 3. Öffnen Sie im Backend-Modul Artikel den Artikel Videos auf der gleichnamigen Seite. 4. Erstellen Sie ein Text-Element mit der h2-Überschrift »Videos einbetten mit dem Inhaltselement HTML« und dem Text »Das folgende Video wurde mit dem Inhaltselement HTML eingebettet.« 5. Erstellen Sie darunter ein Inhaltselement vom Typ HTML. 6. Rufen Sie jetzt das gewünschte YouTube-Video im Browser auf: http://www.youtube.com/watch?v=y45W4bHWerU 7. Konfigurieren Sie das Video bei YouTube mit einem Klick auf den Link <einbetten>. Eine gute Größe ist 480 × 385 Pixel. 8. Kopieren Sie den Einbettungscode in die Zwischenablage. 9. Fügen Sie den YouTube-Code aus der Zwischenablage in das Feld HTML-Code ein. 10. Klicken Sie auf Speichern und Schliessen.

Im Browser wird jetzt der bekannte Player von YouTube mit dem Startbild von »La Ronda« angezeigt (Abbildung 10.11). Im Quelltext der Webseite steht übrigens nur der in der Textarea eingegebene Code. Pur. Falls Sie ein umgebendes div-Element in der Art von
wünschen, müssen Sie diesen in der Textarea selbst hinzufügen. Natürlich funktioniert das Einbetten von Videos nicht nur mit YouTube, sondern auch mit anderen Videoportalen wie Vimeo, Sevenload & Co. Sie benötigen nur einen Einbettungscode, den Sie im Inhaltselement HTML einfügen können.

283

10.3

10

Weitere nützliche Inhaltselemente

Abbildung 10.11 Das eingebettete Video von YouTube auf Ihrer Webseite

MP3s mit der Erweiterung »[pluginmp3]« abspielen Von Haus aus hat Contao kein Inhaltselement, das zum Abspielen einer MP3-Datei einen Player bereitstellt, aber es gibt eine Erweiterung namens [pluginmp3], die diese Aufgabe hervorragend löst: 왘

Eine Erweiterung, um einfach MP3’s als Inhalt hinzuzufügen http://www.contao.org/erweiterungsliste/view/pluginmp3.html

Installieren Sie den Player, laden Sie die MP3-Dateien hoch, und erstellen Sie dann in einem Artikel ein neues Inhaltselement.

10.4

Weitere Inhaltselemente im Überblick

Es gibt noch zahlreiche andere Inhaltselemente in Contao, und in Form von Erweiterungen kommen ständig neue hinzu. Im Folgenden möchte ich zum Abschluss noch einige Inhaltselemente kurz vorstellen.

10.4.1 Das Inhaltselement »Code«: »ce_code« Das Inhaltselement Code dient dazu, in einem Artikel Quelltext oder Programmcode darzustellen, der jedoch nicht ausgeführt wird. Der Code wird durch eine Syntaxhervorhebung eingefärbt und dadurch leichter lesbar. Ein Besucher kann

284

Weitere Inhaltselemente im Überblick

den dargestellten Code leicht kopieren oder ausdrucken. Abbildung 10.12 zeigt das Eingabeformular für das Inhaltselement Code im Überblick.

Abbildung 10.12 Das Eingabeformular für das Inhaltselement »Code«

Wichtig sind das Feld zur Auswahl der Syntaxhervorhebung und das Feld Code zur Eingabe des darzustellenden Programmcodes. Mit dem Feld Konfiguration kann das zur Syntaxhervorhebung benutzte Plugin SyntaxHighlighter von Alex Gorbatchev konfiguriert werden. Nähere Infos dazu gibt es bei Bedarf direkt beim Programmierer (english only) : 왘

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Abbildung 10.13 zeigt das Template moo_accordion_active.tpl, das ab Seite 279 zur Erweiterung der Akkordeons eingesetzt wurde.

285

10.4

10

Weitere nützliche Inhaltselemente

Abbildung 10.13 Inhaltselement »Code« mit »moo_accordion_active.tpl«

10.4.2 Das Inhaltselement »Aufzählung«: »ce_list« Das Inhaltselement Aufzählung fügt dem Artikel eine nicht verschachtelte nummerierte (ol) oder nicht nummerierte (ul) Liste hinzu. Beim Anlegen der Liste wird der Redakteur ähnlich wie beim Inhaltselement Tabelle von einem JavaScript-basierten Eingabeassistenten unterstützt, und auch hier gibt es die Möglichkeit zum Importieren einer CSV-Datei.

Abbildung 10.14 Die Eingabemaske für das Inhaltselement »Aufzählung«

286

Weitere Inhaltselemente im Überblick

Die Erstellung einer nicht verschachtelten Liste mit dem Inhaltselement Text im TinyMCE-Editor ist wahrscheinlich oft einfacher als die Arbeit mit dem Inhaltselement Aufzählung. Die Aufzählung aus Abbildung 10.14 sieht im Quelltext übrigens so aus:
Fünf Schritte zum fertigen Projekt
1. Rahmenbedingungen festlegen
2. Sammeln
3. Sortieren
4. Skizzieren
5. Umsetzen
Listing 10.7

Das Inhaltselement »Aufzählung« im Quelltext

10.4.3 Das Inhaltselement »Modul« Das Inhaltselement Modul soll hier noch kurz vorgestellt werden, auch wenn Sie es bei der Erstellung der Sitemap in Abschnitt 8.8, »Sitemap: Das Inhaltsverzeichnis der Website«, bereits kennengelernt haben. Wie der Name andeutet, können Sie mit dem Inhaltselement Modul ein Frontend-Modul in einen Artikel einbinden. Auf der Beispielsite werden die meisten Module bis jetzt im Seitenlayout eingebunden, weil sie auf allen Seiten an der gleichen Stelle erscheinen sollen. Wenn ein Modul im Frontend nur auf einer Seite dargestellt werden soll, wird es nicht im Seitenlayout eingebunden, sondern mit dem Inhaltselement Modul in einem Artikel.

10.4.4 Die »Include«-Elemente im Kurzüberblick Ganz am Ende der Auswahlliste Elementyp gibt es noch eine Gruppe von Inhaltselementen mit dem schönen Namen Include-Elemente. Diese Gruppe enthält die Elemente Kommentar, Artikel, Inhaltselement und Artikel-Teaser. Diese möchte ich Ihnen der Reihe nach kurz vorstellen: 왘

Mit dem Inhaltselement Kommentar können Sie jedem Artikel ein Kommentarformular zuweisen. Das funktioniert im Prinzip genauso wie es bei den Newsbeiträgen ab Seite 353 beschrieben wird.

왘

Mit dem Inhaltselement Artikel können Sie einen Verweis auf einen Artikel erstellen und ihn so auf anderen Seiten einbinden, ohne ihn zu kopieren.

287

10.4

10

Weitere nützliche Inhaltselemente

Wenn sich das Original ändert, ändert sich automatisch auch die mit diesem Inhaltselement eingefügte Verknüpfung. Es werden nur die Inhaltselemente des Artikels übernommen, nicht die Artikel-Einstellungen, und die Verknüpfung verwendet dieselben CSS-Klassen wie das Original. 왘

Das Inhaltselement Inhaltselement (kein Druckfehler) macht dasselbe, nur nicht für einen ganzen Artikel, sondern für ein einzelnes Inhaltselement daraus. Auch hierbei werden dieselben CSS-Klassen wie beim Original benutzt.

왘

Das Inhaltselement Artikel-Teaser fügt dem Artikel den Teasertext eines anderen Artikels hinzu. Der Teaser enthält wie immer einen Link zum »Weiterlesen …«. Dieser Link führt dann direkt zum Original-Artikel.

Das Inhaltselement Formular lernen Sie gleich in Kapitel 11, »Kontakt: Formulare erstellen mit Contao«, näher kennen. Die Inhaltselemente »Download« und »Downloads« Es gibt noch zwei Inhaltselemente namens Download und Downloads, mit denen man einem Artikel Download-Links hinzufügen kann. Im Gegensatz zu einem normalen Hyperlink ermöglichen diese Inhaltselemente auch den Download von ansonsten geschützten Dateien, auf die man vom Browser aus nicht direkt zugreifen kann. Mehr dazu erfahren Sie bei der Erstellung eines geschützten Downloadbereichs in Abschnitt 19.5.

288

In diesem Kapitel lernen Sie den praktischen Formulargenerator von Contao kennen, mit dem Sie ein Kontaktformular erstellen. Zum Abschluss gibt es noch eine Übersicht der Formularfeldtypen, die Contao anbietet.

11

Kontakt: Formulare erstellen mit Contao

Ein Kontaktformular, das es einem Besucher ermöglicht, Ihnen eine Nachricht zu schicken, ist ein Standardfeature einer modernen Website. In diesem Kapitel erstellen Sie ein solches Kontaktformular und lernen dabei die wichtigsten Dinge zum Erstellen von Formularen mit Contao.

11.1

Ein Kontaktformular für die Beispielsite erstellen

Gleich vorweg das Wichtigste: Contao hat einen Formulargenerator, mit dem es sehr einfach ist, interaktive Formulare zu erstellen. Die vom Besucher eingegebenen Daten werden nach dem Abschicken per E-Mail verschickt oder auf Wunsch auch in der Datenbank gespeichert. Die Arbeit mit Formularen wird durch den Formulargenerator enorm beschleunigt und fast zum Vergnügen, denn Contao erzeugt aus Ihren Einstellungen fertige Formularfelder mit label und allem Drum und Dran und übernimmt darüber hinaus den lästigen und arbeitsintensiven Teil der Formularüberprüfung und der Verarbeitung der Formulardaten. In diesem Abschnitt erstellen Sie zum Kennenlernen des Formulargenerators ein einfaches, funktionsfähiges Kontaktformular für die Beispielsite, das am Ende dieses Abschnitts ungefähr so aussehen wird wie in Abbildung 11.1. Zur Erstellung dieses Formulars benötigen Sie die folgenden Zutaten: 왘

ein Kontaktformular, das Sie mit dem Formulargenerator erstellen

왘

eine Seite, auf der das Formular erscheint. Diese Seite gibt es bereits, und sie heißt kontakt.html

289

11

Kontakt: Formulare erstellen mit Contao

왘

einen Artikel, mit dem Sie das Formular auf kontakt.html einbinden

왘

eine zweite Seite, die nach dem Abschicken des Formulars aufgerufen wird und auf der eine Mitteilung für den Besucher erscheint

Abbildung 11.1 Das fertige Kontaktformular

Außerdem werfen Sie nach der Erstellung des Formulars wie immer einen Blick in den Quelltext und gestalten das Formular mit einer Prise CSS. Schritt 1: »Vielen Dank« – Eine Weiterleitungsseite erstellen Bevor Sie sich an die Erstellung des Kontaktformulars machen, erstellen Sie in diesem Abschnitt zunächst eine Weiterleitungsseite, die nach dem Abschicken des Formulars aufgerufen wird. Auf dieser Seite sagt man einfach nur »Vielen Dank« und teilt dem Besucher kurz und bündig mit, dass beim Abschicken der Daten alles glattgegangen ist und man sich so schnell wie möglich darum kümmern wird. Eine Adresse und eventuell sogar eine Telefonnummer sowie Links auf andere interessante Seiten der eigenen Site sind auch erlaubt. Im folgenden ToDo erstellen Sie eine solche »Vielen Dank«-Seite als reguläre Seite, die im Menü versteckt und veröffentlicht ist (Abbildung 11.2).

290

Ein Kontaktformular für die Beispielsite erstellen

ToDo: Die Weiterleitungsseite »Vielen Dank« erstellen 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Erstellen Sie eine neue Seite als Unterseite zu Kontakt mit folgenden Eigenschaften: Seitenname: »Vielen Dank« Seitentyp: Reguläre Seite Im Menü verstecken (bei den Experten-Einstellungen) Seite veröffentlichen

3. Klicken Sie auf Speichern und Schliessen. 4. Klicken Sie im Seitenbaum bei der Seite Vielen Dank auf das Symbol ganz rechts außen, um direkt in den Artikelbaum zu springen. 5. Öffnen Sie im Artikelbaum den Artikel Vielen Dank [Hauptspalte] zur Bearbeitung (gelber Bleistift). 6. Erstellen Sie ein neues Inhaltselement Text: h1-Überschrift: »Vielen Dank« Text: »Wir haben Ihre Nachricht erhalten und werden uns umgehend bei Ihnen melden.« CSS-Klasse: »seitenanfang« 7. Klicken Sie auf Speichern und Schliessen.

Der Seitenbaum sieht nach diesem ToDo so aus wie in Abbildung 11.2.

Abbildung 11.2 Der Seitenbaum mit der neuen »Vielen Dank«-Seite

291

11.1

11

Kontakt: Formulare erstellen mit Contao

Schritt 2: Das Kontaktformular erstellen Ein Formular ist genau wie ein Artikel nur ein Bereich auf einer Webseite. Ein Artikel besteht aus Inhaltselementen, ein Formular aus Formularfeldern. In diesem Abschnitt erstellen Sie deshalb zuerst das Formular selbst, und danach bevölkern Sie es im nächsten Abschnitt mit einigen Formularfeldern. Im Backend-Modul Formulargenerator gibt es nach einem Klick auf Neues Formular ein Eingabeformular zur Erstellung eines neuen Formulars. Abbildung 11.3 zeigt den oberen Teil dieses Formulars.

Abbildung 11.3 Formular zur Erstellung eines Formulars, Teil 1

Der Titel wird nur zur Verwaltung des Formulars im Backend benutzt. Die Weiterleitungsseite ist eine Seite aus dem Seitenbaum, zu der der Besucher nach dem Abschicken des Formulars weitergeleitet wird. Im Bereich Formularkonfiguration können Sie auswählen, ob das Formular mit oder ohne HTML-Tabelle ausgegeben werden soll. Tabellen sind als Layouthilfe für Webseiten zu Recht verpönt, aber eine einfache, nicht verschachtelte Tabelle zur Darstellung eines Formulars wäre auch unter dem Aspekt der Barrierefreiheit durchaus zu vertreten. Contao generiert auf Wunsch aber auch ein Tabellenloses Layout. Einfach ankreuzen. In der unteren Hälfte des Eingabeformulars geht es in erster Linie um die Optionen zur Verarbeitung der Formulardaten.

292

Ein Kontaktformular für die Beispielsite erstellen

Abbildung 11.4 Formular zur Erstellung eines Formulars, Teil 2

Nach der Aktivierung der Option Per E-Mail versenden können Sie die E-MailAdresse(n) des Empfängers, einen Betreff und das gewünschte Datenformat eingeben. Die Standardeinstellung ist »Rohdaten«, mit der die im Formular eingegebenen Daten allesamt im Textbereich der Mail versendet werden. Bei Bedarf können die Formulardaten auch als CSV- oder XML-Datei formatiert werden. Oder Sie probieren einmal das Format »E-Mail« (siehe Kasten nach dem ToDo). Formulardaten speichern ermöglicht die Speicherung der eingegebenen Daten in einer Tabelle der Contao-Datenbank. Dazu muss in der Zieltabelle für jedes Formularfeld ein gleichnamiges Datenbankfeld vorhanden sein. Ja, die Datenbankfelder müssen Sie selbst erstellen. Die standardmäßige Übertragungsmethode für ein Kontaktformular ist »POST«. Im folgenden ToDo erstellen Sie aus diesen Angaben das Kontaktformular. ToDo: Mit dem Formulargenerator ein Kontaktformular erstellen 1. Öffnen Sie das Backend-Modul Formulargenerator. 2. Klicken Sie oben im Arbeitsbereich oben auf Neues Formular. 3. Vergeben Sie den Titel »Kontaktformular« (ohne Anführungsstriche). 4. Wählen Sie als Weiterleitungsseite die im vorherigen Abschnitt erstellte Seite Vielen Dank.

293

11.1

11

Kontakt: Formulare erstellen mit Contao

ToDo: Mit dem Formulargenerator ein Kontaktformular erstellen (Forts.) 5. Aktivieren Sie Tabellenloses Layout. 6. Aktivieren Sie die Option Per E-Mail versenden. 7. Tragen Sie als Empfänger-Adresse Ihre Mailadresse ein. 8. Geben Sie einen Betreff ein, z. B. »Kontaktformular Beispielsite«. 9. Wählen Sie aus der Liste Datenformat die Option Rohdaten. 10. Vergeben Sie die CSS-Id »kontaktformular«, kleingeschrieben und ohne Anführungsstriche. 11. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo ist das Formular definiert, und es geht gleich weiter mit der Erstellung der Formularfelder. Ein Formular mit dem Datenformat »E-Mail« Eine kleine Besonderheit bei der Konfiguration eines Formulars bietet das Datenformat E-Mail, denn dabei wird die zu verschickende Nachricht so erstellt, als ob sie mit einem E-Mail-Programm geschrieben worden wäre. Contao verarbeitet bei diesem Datenformat nur die Formularfelder mit den festgelegten Namen name, email, subject, message und cc sowie Dateianhänge. Alle anderen Felder werden ignoriert. In der erhaltenen Mail erscheint nur die Nachricht des Besuchers im Textbereich der Mail (message). Die anderen drei Felder werden zur Erstellung des Mailheaders verwendet. Für die meisten Formulare ist Rohdaten wahrscheinlich die bessere Wahl, aber um Nachrichten von einem einfachen Kontaktformular zu empfangen, ist E-Mail unter Umständen keine schlechte Option.

Schritt 3: Die Formularfelder für das Kontaktformular einfügen Das Formular ist erstellt, und die Eigenschaften sind definiert. Ähnlich wie bei den Inhaltselementen enthält Contao für die verschiedenen Formularfelder (Textfelder, Auswahlmenüs, Datei-Uploads, versteckte Felder etc.) jeweils ein eigenes Formularelement, das Sie im Formulargenerator wie gewohnt einzeln erstellen, löschen, verschieben oder ausblenden können. Die generelle Vorgehensweise zum Einfügen eines Formularfeldes ist bis auf feldspezifische Einstellungen immer gleich und wird im Folgenden für ein ganz normales, einzeiliges Eingabefeld gezeigt (Abbildung 11.5).

294

Ein Kontaktformular für die Beispielsite erstellen

Abbildung 11.5 Das Eingabeformular zur Erstellung eines Textfeldes

Hier die Erläuterung der wichtigsten Optionen: 왘

Wählen Sie den Feldtyp »Textfeld«.

왘

Der Feldname wird intern zur Verarbeitung der Formulardaten benötigt.

왘

Die Feldbezeichnung erscheint für den Besucher sichtbar auf der Webseite.

왘

Ein Häkchen bei Pflichtfeld bewirkt, dass das Feld vor dem Abschicken des Formulars ausgefüllt werden muss.

왘

Mit der Auswahlliste Eingabeprüfung können Sie wählen, nach welchen Kriterien das Formularfeld überprüft werden soll. Das kleine Schild mit dem roten Rand und dem Fragezeichen bietet auf Mausklick eine kurze Erklärung der möglichen Optionen.

Im folgenden ToDo erstellen Sie ein Textfeld für den Besuchernamen, ein Textfeld für die E-Mail-Adresse, eine Textarea für die Nachricht und natürlich eine Submit-Schaltfläche zum Abschicken des Formulars. Als kleine Besonderheit wird mit dem Formularelementtyp Checkbox-Menü ein Kontrollkästchen eingefügt, das dem Besucher auf Wunsch eine Kopie der Formulardaten an die von ihm eingegebene Mailadresse schickt. Die Beschriftung für die Checkbox wird ausnahmsweise nicht im Feld Feldbezeichnung eingetragen,

295

11.1

11

Kontakt: Formulare erstellen mit Contao

sondern im Assistenten darunter im Feld Bezeichnung. Tabelle 11.1 enthält eine Übersicht der Formularfelder für das Kontaktformular. Name

Mail

Nachricht

Kopie

Submit

Feldtyp

Textfeld

Textfeld

Textarea

CheckboxMenü

Absendefeld

Feldname

name

email

message

cc

–

Feldbezeichnung

Ihr Name

Ihre E-Mail

Ihre Nachricht

–

Abschicken

Pflichtfeld

Ja

Ja

Ja

–

–

Eingabeprüfung

Erw. alphanumerisch

E-MailAdresse

Erw. alphanumerisch

–

–

Sonstiges

–

–

10 Reihen 40 Spalten

Wert: cc Bezeichnung:

»Eine Kopie der Nachricht an mich senden« Tabelle 11.1 Die Formularfelder für das Kontaktformular – Übersicht

Im folgenden ToDo erstellen Sie die Formularfelder aus Tabelle 11.1. ToDo: Formularfelder zum Kontaktformular hinzufügen 1. Öffnen Sie das Backend-Modul formulargenerator. 2. Öffnen Sie das Formular Kontaktformular zur Bearbeitung (gelber Bleistift). 3. Klicken Sie oben im Arbeitsbereich auf Neues Feld, und fügen Sie es am Anfang des Formulars ein. 4. Wählen Sie als Feldtyp den Eintrag Textfeld. 5. Der zur Formularverarbeitung verwendete Feldname soll »name« sein. 6. Die auf der Website sichtbare Feldbezeichnung ist »Ihr Name«. 7. Aktivieren Sie das Kontrollkästchen Pflichtfeld. 8. Wählen Sie aus der Liste Eingabeprüfung den Eintrag Erweiterte Alphanumerische Zeichen. Diese Prüfung erlaubt alle Zeichen bis auf z. B. # / ( ) < = >. 9. Klicken Sie auf Speichern und neu. 10. Erstellen Sie die anderen in Tabelle 11.1 beschriebenen Formularfelder. 11. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo sieht das Kontaktformular im Backend so aus wie in Abbildung 11.6.

296

Ein Kontaktformular für die Beispielsite erstellen

Abbildung 11.6 Das Formular mit Formularfeldern im Backend

Im Browser ist das Formular noch nicht zu sehen, da es noch nicht eingebunden wurde. Die speziellen Feldnamen »email« und »cc« Die Feldnamen email und cc sind nicht zufällig gewählt worden: 왘

Der Feldname email bewirkt, dass die Mailadresse des Besuchers in der empfangenen Mail als »Reply-To« eingetragen wird. Im Klartext: Zur Beantwortung der Anfrage klicken Sie einfach auf »Antworten«, und schon steht die Mailadresse des Besuchers im »An«-Feld.

왘

Der Feldname cc bei der Checkbox veranlasst Contao automatisch, eine zusätzliche Mail mit der Mailadresse des Besuchers zu verschicken. Sie müssen nichts weiter unternehmen.

297

11.1

11

Kontakt: Formulare erstellen mit Contao

Schritt 4: Das Kontaktformular auf der Seite »kontakt.html« einbinden Das Formular ist fertig, aber im Frontend noch nicht zu sehen. Es fehlt noch die Einbindung des Formulars in die Site. Da das Formular nur auf der Seite kontakt.html erscheinen soll, binden Sie das Formular in einem Artikel auf eben dieser Seite ein. ToDo: Das Kontaktformular einbinden 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie den Artikel Kontakt [Hauptspalte]. 3. Falls noch keine h1-Überschrift vorhanden sein sollte, fügen Sie ein Inhaltselement Überschrift mit dem Text »Kontakt« und der Klasse »seitenanfang« ein. 4. Erstellen Sie unterhalb der Überschrift ein neues Inhaltselement. 5. Wählen Sie als Elementtyp den Eintrag Formular. Daraufhin erscheint unterhalb eine Liste mit zur Verfügung stehenden Formularen. 6. Wählen Sie den Eintrag Kontaktformular (ID xx). 7. Klicken Sie auf Speichern und Schliessen.

Im Browser erscheint daraufhin das allerdings noch ungestaltete Kontaktformular, das bei Ihnen etwas anders aussehen kann als in Abbildung 11.7.

Abbildung 11.7 Das noch ungestaltete Kontaktformular im Browser

298

Ein Kontaktformular für die Beispielsite erstellen

Schritt 5: Das Kontaktformular testen Das Kontaktformular ist von der Gestaltung her noch nicht fertig, aber es funktioniert bereits, inklusive Formularüberprüfung und Ausgabe der Fehlermeldungen. Auf einem Online-Webspace werden die Daten auch bereits an die eingetragene E-Mail-Adresse verschickt, denn der Abschicken-Button sagt dem PHP-Interpreter Bescheid, und der wiederum kennt einen Mailserver zum Verschicken der Nachricht. Auf einem Offline-Webspace wie XAMPP gibt es auf dem localhost in der Regel keinen funktionierenden Mailserver, und deshalb kann der PHP-Interpreter die Mail nicht verschicken. Es gibt zwei mögliche Lösungen. Entweder Sie testen das Formular später auf dem Webspace und machen mit der Gestaltung des Formulars weiter. Oder Sie sagen Contao, welcher Mailserver für das Verschicken von Mails zuständig sein soll. Dazu benötigen Sie die Konfigurationsdaten für einen SMTP-Server. Falls Sie keinen eigenen Webspace haben, können Sie auch einen WebmailDienst wie z. B. GMail nutzen. Die genauen Daten finden Sie irgendwo auf den Webseiten des Dienstanbieters. Der Standard-Port für SMTP ohne Verschlüsselung ist übrigens 25, aber die genauen Daten können von Provider zu Provider variieren. Beispiel GoogleMail SMTP-Hostname

smtp.googlemail.com

SMTP-Benutzername

[email protected]

SMTP-Passwort

********

SMTP-Verschlüsselung

SSL

SMTP-Port

465

Ihre Daten

Tabelle 11.2 Zugangsdaten für einen SMTP-Server

Da Sie die Konfiguration eines SMTP-Servers nur zum Testen des Formulars auf einem Offline-Webspace benötigen, folgt hier die Anleitung nicht als ToDo, sondern als normale Aufzählung: 왘

Öffnen Sie dazu das Backend-Modul System 폷 Einstellungen.

왘

Blenden Sie den Bereich SMTP-Einstellungen ein.

왘

Aktivieren Sie das Kontrollkästchen E-Mails via SMTP versenden.

왘

Geben Sie die Daten für den SMTP-Server ein.

왘

Klicken Sie auf Speichern und Schliessen.

299

11.1

11

Kontakt: Formulare erstellen mit Contao

Mit ein bisschen Glück und Probieren sollte das Kontaktformular jetzt bereits funktionieren. Nach dem Testen sollten Sie die Option wieder deaktivieren. Falls etwas nicht funktioniert: Fehlermeldungen ausgeben lassen Falls es mit dem Mailverschicken nicht klappt, können Sie Contao bitten, sämtliche Fehlermeldungen auf dem Bildschirm auszugeben: 왘

Rufen Sie das Backend-Modul System 폷 Einstellungen auf.

왘

Rufen Sie dann den Bereich Sicherheitseinstellungen auf.

왘

Aktivieren Sie dort Fehlermeldungen anzeigen.

Auch wenn die Meldungen für Nicht-PHPler wie Hieroglyphen aussehen, können die darin enthaltenen Informationen bei der Fehlersuche durchaus hilfreich sein.

11.2

Das Kontakformular gestalten

Das Kontaktformular funktioniert bereits, wird in diesem Abschnitt aber noch ein bisschen gestylt.

11.2.1

Das HTML für das Kontaktformular

Vor der Gestaltung des Formulars werfen Sie in diesem Abschnitt wie immer noch einen Blick auf das HTML.
<span class="invisible">Pflichtfeld Ihr Name<span class="mandatory">*
<span class="invisible">Pflichtfeld Ihre E-Mail-Adresse<span class="mandatory">*
<span class="invisible">Pflichtfeld

300

Das Kontakformular gestalten

Ihre Nachricht<span class="mandatory">*

<span> Eine Kopie der Nachricht an mich senden


Listing 11.1 Das HTML für das tabellenlose Kontaktformular

Umgeben von einem div.ce_form, enthält das form-Element ein div mit der Klasse formbody. Für jedes Formularfeld gibt es darin eine Kombination von label und input bzw. textarea, die jeweils durch einen Zeilenumbruch
getrennt werden. Die Checkbox und der Submit-Button sind noch von einem div mit einer entsprechenden Klasse umgeben. Contao erzeugt für die Beschriftung automatisch ein label. Die IDs für die Formularfelder wie ctrl_3 werden von Contao automatisch vergeben und dienen zur Verbindung mit dem label, damit die Beschriftung anklickbar wird. Sie können beim Erstellen des Formulars aber natürlich für jedes Formularelement eine eigene ID vergeben, die dann statt der automatischen verwendet wird. Im Namen der Barrierefreiheit steht bei Pflichtfeldern zusätzlich zum üblichen Sternchen in einem unsichtbaren span noch der Begriff »Pflichtfeld«, der von einem Screenreader vorgelesen wird. Außerdem bekommen Pflichtfelder die Klasse mandatory. Last, but not least hat das Kontrollkästchen mit dem Namen cc noch ein verstecktes Formularfeld, dessen Anwesenheit auf wunderbare Art und Weise dafür sorgt, dass Contao dem Besucher eine Kopie seiner Nachricht als E-Mail zuschickt. Beim Abschicken des Kontaktformulars gibt es bereits eine Formularüberprüfung, und wenn ein Besucher nicht alle Pflichtfelder ausfüllt, bekommt er ent-

301

11.2

11

Kontakt: Formulare erstellen mit Contao

sprechende Meldungen. Diese Fehlermeldungen stehen oberhalb des Formularelements in einem eigenen Absatz p mit der Klasse error.

11.2.2

Das CSS für das Kontaktformular

Dieses HTML kann auf die verschiedensten Weisen gestaltet werden. Im folgenden Beispiel werden die Beschriftungen in label mit einem simplen display:block oberhalb der Formularelemente platziert. Da das bei dem Kontrollkästchen nicht erwünscht ist, wird das entsprechende Label explizit wieder auf display:inline gesetzt. Damit der Text hinter dem Kontrollkästchen ordentlich ausgerichtet ist, wird er mit relativer Positionierung um etwa 2px angehoben. Das folgende ToDo setzt diese Möglichkeit um, aber Sie können gern mit anderen Formatierungen experimentieren. ToDo: Das Kontaktformular gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie unterhalb der Styles für die Inhaltselemente, die mit .ce* beginnen, einen Kommentar ein: /* ====================================== Kontaktformular gestalten ====================================== */

3. Gestalten Sie das Formularelement mit folgenden Styles: form#kontaktformular { line-height: 1; background-color: #ADCBE6; padding: 0 18px 18px 18px; border-top: 1px solid #89ADCD; border-bottom: 1px solid #89ADCD; margin: 0 0 2em 0; }

4. Gestalten Sie die Beschriftungen (label) wie folgt: #kontaktformular label { display: block; cursor: pointer; margin: 18px 0 3px 0; } #kontaktformular .checkbox_container label { display: inline; position: relative; bottom: 2px; }

302

Das Kontakformular gestalten

ToDo: Das Kontaktformular gestalten (Forts.) 5. Erhöhen Sie den Abstand zwischen Textarea und Checkbox: #kontaktformular .checkbox_container { margin-top: 1em; }

6. Polstern Sie die Eingabefelder mit ein bisschen padding, und ändern Sie die Hintergrundfarbe, wenn sich der Cursor darin befindet: #kontaktformular input, #kontaktformular textarea { padding: 3px; } #kontaktformular input:focus, #kontaktformular textarea:focus { background-color: #ECECEC; color: #000; }

7. Gestalten Sie zum Schluss noch die Fehlermeldungen: #kontaktformular p.error { background: #FFC0CB; /* pink */ color: #000; max-width: 400px; padding: 3px; border: 1px solid #f00; /* rot */ margin-bottom: 3px; }

8. Speichern Sie das Stylesheet.

Im Browser sieht das Kontaktformular mit diesem CSS etwa so aus wie in Abbildung 11.8, in der die Fehlermeldungen durch das Abschicken eines nicht ausgefüllten Formulars sichtbar gemacht wurden.

Abbildung 11.8 Das gestaltete Kontaktformular mit Fehlermeldungen

303

11.2

11

Kontakt: Formulare erstellen mit Contao

11.3

Formularfelder: Die Feldtypen im Formulargenerator

Das Kontaktformular ist fertig, aber Contao bietet bei Formularen noch jede Menge andere Möglichkeiten. In diesem Abschnitt möchte ich Ihnen die im Formulargenerator von Contao zur Verfügung stehenden Formularfeldtypen kurz vorstellen.

11.3.1

Formularfelder einfügen: Die Feldtypen im Überblick

Neben den im Kontaktformular enthaltenen Formularfeldern gibt es noch jede Menge andere, die Tabelle 11.3 im Überblick zeigt. Feldtyp

CSS-Klasse

Kurzbeschreibung

Überschrift

headline

Zum Einfügen einer Bereichsüberschrift. Im HTML ein div.headline mit den Elementen, die im TinyMCE eingegeben wurden.

Erklärung

explanation

Erklärender Text vor oder nach einem Formularfeld: div.explanation plus die Elemente aus dem Editor

HTML

-

Dient zum Einfügen von HTML-Code.

Fieldset

-

Formularfelder gruppieren mit
und beschriften mit
. Steht nur bei tabellenlosen Formularen zur Verfügung.

Textfeld

text

Einzeiliges Eingabefeld für Text.

Passwortfeld

password

Einzeiliges Eingabefeld mit verdeckter Eingabe. Ein zweites Feld zur Passwortbestätigung wird automatisch eingefügt.

Textarea

textarea

Mehrzeiliges Eingabefeld für einen mittellangen oder langen Text:

Select-Menü

select bzw. multiselect

Dropdown-Menü. Beim Erstellen gibt es einen sehr komfortablen Assistenten, der z. B. die Gruppierung von Optionen stark vereinfacht: <select>, und

Radio-Button-Menü

radio

Runde Optionsfelder, von denen immer nur eines ausgewählt werden kann. Ein div mit der Klasse radio_ container, darin .

Tabelle 11.3 Formularfelder in Contao – Übersicht

304

Formularfelder: Die Feldtypen im Formulargenerator

Feldtyp

CSS-Klasse

Kurzbeschreibung

CheckboxMenü

checkbox

Eckige Kontrollkästchen, von denen beliebig viele ausgewählt werden können. Ein div mit der Klasse checkbox_container mit darin.

Datei-Upload

upload

Einzeiliges Eingabefeld mit Schaltfläche Durchsuchen... zur Übertragung lokaler Dateien auf den Server:

Verstecktes Feld

-

Nicht sichtbares Formularfeld:

Sicherheitsfrage

captcha

Einfache Rechenaufgabe zum Schutz gegen Spam ("Captcha"). Der Text steht zwischen <span class="captcha_text"> und .

Absendefeld

submit

Schaltfläche zum Abschicken: in einem div mit der Klasse submit_container. Einfache Erstellung einer »Bildschaltfläche":


type="image" />

Tabelle 11.3 Formularfelder in Contao – Übersicht (Forts.)

Textfeld, Textarea, Absendefeld sowie eine Checkbox haben Sie bei der Erstellung des Kontaktformulars bereits in Aktion gesehen. Neben sinnvollen Feldtypen wie Überschrift und Erklärung, die die klassischen HTML-Formularelemente hervorragend ergänzen, sind besonders die JavaScript-Assistenten zur Erstellung von Select-, Radio-Button und Checkbox-Menüs eine wahre Wonne.

11.3.2

Überschrift und Erklärung für zusätzliche Informationen

Die beiden Formularfeldtypen Überschrift und Erklärung sind fast identisch und fügen dem Formular eine Art Überschrift bzw. einen erklärenden Text hinzu. Innerhalb des umgebenden div-Elements stehen die Elemente, die Sie im TinyMCE ausgewählt haben. Im Beispiel ist das eine h2-Überschrift.
Eine "Überschrift" innerhalb eines Formulars
Listing 11.2 Der Feldtyp »Überschrift« im HTML

Der Feldtyp »Erklärung« sieht im HTML genauso aus, bekommt aber die Klasse explanation.

305

11.3

11

Kontakt: Formulare erstellen mit Contao

11.3.3

Formularfelder gruppieren: »fieldset« und »legend«

Bei längeren Formularen gibt es zur Gruppierung von Formularfeldern die HTML-Elemente fieldset und legend. Bei Contao können Sie das ganz bequem mit dem Feldtyp Fieldset erledigen.

Abbildung 11.9 Der Feldtyp »Fieldset«

Ein Fieldset legt sich wie ein Umschlag um die zu gruppierenden Formularelemente, und dementsprechend fügen Sie am Anfang ein Fieldset in der Betriebsart Umschlag-Anfang und am Ende eines mit Umschlag-Ende ein. Die Feldbezeichnung wird automatisch als legend zur Beschriftung des Fieldsets verwendet:
Die Legende lebt
Listing 11.3

Ein Fieldset im Quelltext

11.3.4 Das Passwortfeld: Automatisch mit Bestätigungsfeld Das Formularfeld Passwortfeld fügt einem Formular zwei einzeilige Eingabefelder hinzu: eines für das Passwort selbst und eines zur Bestätigung. <span class="invisible">Pflichtfeld Passwort <span class="mandatory">*


306

Formularfelder: Die Feldtypen im Formulargenerator

<span class="invisible">Pflichtfeld Bestätigung <span class="mandatory">*
Listing 11.4

Das HTML für ein Passwortfeld und sein Bestätigungsfeld

Passwortfelder verwenden die Klassen text und password, Bestätigungsfelder bekommen zusätzlich die Klasse confirm.

11.3.5

Das Select-Menü: Auswahllisten per Klick

Ein Select-Menü erstellt eine ganz normale Auswahlliste mit den HTML-Elementen select, option und zur Gruppierung der Option optgroup. In einer Auswahlliste kann in der Regel wie bei einem Radio-Button-Menü nur eine Option ausgewählt werden. Für den Benutzer hat eine Auswahlliste gegenüber einem Radio-Button-Menü Nachteile, denn die Optionen sind erst nach einem Klick zu sehen. Für bis zu ungefähr vier oder fünf Einträge ist deshalb das Radio-Button-Menü oft die bessere Alternative. Der Formulargenerator unterstützt Sie beim Erstellen einer Auswahlliste mit einem Assistent, den Sie im Bereich Optionen finden. Abbildung 11.10 zeigt ein Beispiel. Die Symbole zum Kopieren, Verschieben und Löschen erklären sich von selbst, der Rest folgt gleich. Der Feldname taucht im Quelltext als Attribut name im select-Element wieder auf, die Feldbezeichnung als label sichtbar auf der Webseite. Der Wert wird im Element option als Attribut value eingetragen, und die Bezeichnung ist der für den Besucher sichtbare Text in der Auswahlliste. Die Option Standard bewirkt bei einer Auswahlliste, dass der aktivierte Eintrag bei einer nicht ausgeklappten Liste angezeigt wird, und erscheint im HTML als Attribut selected="selected" zum Element option. Sinnvollerweise sollte nur ein Eintrag aktiviert sein. Die Option Gruppe macht die Gruppierung von Listeneinträgen zum Kinderspiel. Die Einträge »Ohne Versandkosten« und »Mit Versandkosten« werden im Quelltext zum HTML-Element optgroup und damit zu einer nicht anklickbaren Überschrift. Je länger die Liste ist, desto wichtiger ist die Gruppierung.

307

11.3

11

Kontakt: Formulare erstellen mit Contao

Abbildung 11.10 Das Eingabeformular für den Feldtyp »Select-Menü«

Listing 11.5 zeigt den Quelltext des Select-Menüs aus Abbildung 11.10. In welchem Land wohnen Sie? <select name="land" id="ctrl_14" class="select"> --- Bitte auswählen --- Deutschland Österreich Schweiz Niederlande Belgien Frankreich
Listing 11.5

308

Ein Select-Menü im Quelltext

Formularfelder: Die Feldtypen im Formulargenerator

Im Frontend sieht die Auswahlliste so aus wie in Abbildung 11.11.

Abbildung 11.11 Das Select-Menü im Frontend

Checkbox-Menü statt Mehrfachauswahl Ein Select-Menü bietet auch die Option der Mehrfachauswahl, bei der die Liste offen daliegt und als Fläche dargestellt wird. Um mehrere Einträge auszuwählen, muss ein Besucher eine je nach Betriebssystem und Browser unterschiedliche Maus-Tastatur-Kombination verwenden, die die Bedienung der Mehrfachauswahl eher umständlich macht. Ein ganz normales Checkbox-Menü ist fast immer die bessere Alternative.

11.3.6 Das Radio-Button-Menü: Optionsfelder deluxe Ein Radio-Button-Menü erzeugt runde anklickbare Formularelemente und ähnelt einer Auswahlliste, denn in beiden kann man jeweils nur eine Option auswählen. Radio-Buttons heißen die Dinger übrigens, weil sie mit ein bisschen Fantasie wie die Druckknöpfe zur Senderwahl an alten Dampfradios aussehen. Wurde ein Knopf gedrückt, sprang der vorher ausgewählte automatisch raus. Auch bei den Radio-Buttons kann immer nur einer ausgewählt sein. Die deutsche Übersetzung Optionsfeld ist da etwas nüchterner. Optionsfelder sind echte Herdentiere und erscheinen immer nur in Gruppen, von denen wie gesagt immer nur eine Option aktiv ist. Der Feldname wird im HTML bei allen Optionsfeldern dieses Menüs als Wert für das Attribut name verwendet. Dadurch wissen die Optionfelder, dass sie als Gruppe zusammengehören. Die Bezeichnung aus dem Eingabeformular steht übrigens ganz am Anfang in einem label, das sich auf die ID des div.radio_container bezieht, der die Optionsfelder umgibt, und somit für die ganze Gruppe gilt.

309

11.3

11

Kontakt: Formulare erstellen mit Contao

Abbildung 11.12 Das Eingabeformular für ein Radio-Button-Menü

Die Option Standard bewirkt bei einem Radio-Button-Menü, dass das entsprechende Optionsfeld bereits angekreuzt ist. Wenn Sie hier kein Feld aktivieren, ist im Frontend auch kein Optionsfeld vorgegeben. Sollte das Radio-Button-Menü ein Pflichtfeld sein, muss der Besucher vor dem Abschicken mindestens eine Option ankreuzen. Ansonsten gibt es eine Fehlermeldung. Die Option Gruppe hat bei einem Radio-Button-Menü keinerlei Auswirkungen auf den Quelltext. Die Zusammengehörigkeit der Optionsfelder erfolgt wie gesagt bereits dadurch, dass alle Optionsfelder eines Menüs den Wert aus Feldname bekommen. Listing 11.6 zeigt das komplette HTML zum Menü aus Abbildung 11.12. <span class="invisible">Pflichtfeld In welchem Land wohnen Sie?<span class="mandatory">*
<span> Deutschland

310

Formularfelder: Die Feldtypen im Formulargenerator

<span> Österreich <span> Schweiz

Listing 11.6 Ein Radio-Button-Menü im Quelltext

Die Kombinationen aus Optionsfeld und Beschriftung werden jeweils von einem span umgeben, was sich beim Gestalten als äußerst praktisch erweist. Das RadioButton-Menü aus Listing 11.6 sieht im Frontend so aus wie in Abbildung 11.13.

Abbildung 11.13 Ein Radio-Button-Menü im Frontend

Dieses Menü wurde mit nur zwei Styles formatiert, was nebenbei gesagt zeigt, wie wohlüberlegt das vom Formulargenerator erzeugte HTML ist: .radio_container label { display: inline; /* label neben dem input-Feld */ cursor: pointer; /* Mauszeiger wird zur Hand */ } .radio_container span { display: block; margin-top: 8px; } Listing 11.7

Das CSS für das Radio-Button-Menü

Die label-Elemente innerhalb von div.radio_container werden inline dargestellt, damit sie hinter den runden Optionsfeldern stehen und nicht darunter. Um deutlich zu machen, dass sie tatsächlich anklickbar sind, wird der Mauszeiger zur Klickhand, sobald er über dem Element schwebt.

311

11.3

11

Kontakt: Formulare erstellen mit Contao

Um die Kombinationen aus Optionsfeld und dazugehöriger Beschriftung untereinander zu stellen, wird das span drumherum als Block dargestellt und mit einem kleinen Außenabstand nach oben versehen.

11.3.7

Das Checkbox-Menü: Kontrollkästchen deluxe

Im Gegensatz zu Optionsfeldern sind Checkboxen erstens eckig und zweitens notorische Einzelgänger. Auch wenn sie optisch meist als Gruppe auftreten, bleibt im Grunde jedes Kontrollkästchen für sich, weshalb man immer keines, eines, mehrere oder auch alle ankreuzen kann. Abgesehen davon sind sich Radio-Button-Menüs und Checkbox-Menüs recht ähnlich.

Abbildung 11.14 Das Eingabeformular für ein Checkbox-Menü

Das Eingabeformular funktioniert genau wie bei einem Radio-Button-Menü. Der Feldname dient als Wert für das Attribut name="werbung[]". Falls Sie sich über die beiden eckigen Klammen dahinter wundern: Sie erleichtern die Auswertung der Formulardaten in einem Programm, weil damit automatisch ein sogenanntes Array erzeugt wird. Falls Ihnen das nichts sagt, ist das nicht schlimm. Es funktioniert trotzdem. Die Feldbezeichnung ist ein label oberhalb des Checkbox-Menüs, die Bezeichnung im Assistenten steht hingegen direkt neben den einzelnen Kontrollkästchen. Genau wie bei den Optionsfeldern bewirkt ein Kreuz bei Standard, dass

312

Formularfelder: Die Feldtypen im Formulargenerator

die entsprechende Checkbox angekreuzt im Frontend erscheint. Gruppe hat auch hier keinerlei Auswirkungen. Listing 11.8 zeigt das HTML für das Checkbox-Menü aus Abbildung 11.14. Woher kennen Sie Contao?
<span> Internet <span> Fersehwerbung <span> Was anderes.

Listing 11.8

Das HTML für ein Checkbox-Menü

Der Aufbau entspricht ziemlich genau dem eines Radio-Buttons-Menüs und auch beim CSS von Abbildung 11.15 wurde gegenüber einem Radio-Button-Menü nur .radio_container durch .checkbox_container ersetzt (siehe Listing 11.7).

Abbildung 11.15 Ein Checkbox-Menü im Frontend

11.3.8 »Datei-Upload«: Besucher können Dateien hochladen Das Formularfeld Datei-Upload fügt dem Formular ein Feld hinzu, mit den ein Besucher eine Datei von seinem Rechner auf den Webspace hochladen kann. Dabei können Sie für jedes Upload-Feld einzeln festlegen, welche Dateitypen erlaubt sind und in welchem Ordner die Dateien gespeichert werden sollen.

313

11.3

11

Kontakt: Formulare erstellen mit Contao

Abbildung 11.16 Das Eingabeformular für den Feldtyp »Datei-Upload«

Die maximale Dateigröße können Sie im Feld Maximale Eingabelänge eingeben, und zwar in Byte und innerhalb des Limits, das im Backend-Modul System 폷 Einstellungen im Bereich Datei-Uploads festgelegt wird. Das HTML dafür ist sehr einfach: Schicken Sie uns Ihre Datei:
Listing 11.9

Das HTML für das Formularfeld »Datei-Upload«

Wenn die Beschriftung wie in Abbildung 11.17 in einer eigenen Zeile stehen soll, erreichen Sie das mit einem einfachen label {display:block}.

Abbildung 11.17 Das Formularfeld »Datei-Upload« im Frontend

11.3.9 Die Sicherheitsfrage zur Spamvermeidung Genau wie in der richtigen Welt gibt es auch im Internet nicht nur nette Menschen, und einige dieser üblen Zeitgenossen betreiben den automatisierten Missbrauch von Formularen aller Art mithilfe sogenannter Spam-Bots.

314

Formularfelder: Die Feldtypen im Formulargenerator

Ein Mittel gegen diesen Missbrauch ist ein sogenanntes Captcha, was eine Verballhornung des englischen capture (Gefangennahme) ist. Captcha ist aber auch die Abkürzung von Completely Automated Public Turing test to tell Computers and Humans Apart, frei übersetzt »vollautomatisierter Mensch-Maschine-Test in der Tradition des englischen Informatikers Alan Turing«. Oft ist ein Captcha eine Grafik mit mehr oder weniger schlecht lesbaren Zeichen darauf, die für Menschen erkennbar sein sollen, für Maschinen aber nicht. Allerdings habe ich bei diesem Mensch-Maschine-Test schon des Öfteren die Buchstaben falsch geraten und bin daraufhin als Maschine eingestuft worden. Contao implementiert einen solchen Mensch-Maschine-Test beim Formulartyp Sicherheitsabfrage als einfache Rechenaufgabe. Maschinen können zwar rechnen, verstehen aber die Aufgabe nicht. Wird sie nicht richtig gelöst, wird das Formular nicht abgeschickt. Die Sicherheitsabfrage kann im Backend nur mit einer Beschriftung wie z. B. »Spamschutz« versehen werden und ist automatisch ein Pflichtfeld.

Abbildung 11.18 Die Sicherheitsabfrage im Frontend

Im HTML sieht eine Sicherheitsabfrage so aus: <span class="invisible">Pflichtfeld Spamschutz <span class="mandatory">* <span class="invisible"> Bitte addie ren Sie 6 u nd 8. <span class="captcha_text">Bitte a ddie ren Sie 6 und 8.
Listing 11.10

Das Formularfeld »Sicherheitsabfrage« im Quelltext

315

11.3

11

Kontakt: Formulare erstellen mit Contao

Der Feldtyp Sicherheitsabfrage benutzt die Klassen captcha für das Eingabefeld und captcha_text für die Rechenaufgabe. Sowohl die Rechenaufgabe als auch die Beschriftung sind als Sonderzeichen kodiert, um es den Spam-Bots nicht allzu leicht zu machen. Kontaktformular auch mit Spamschutz? Um das im vorherigen Abschnitt erstellte Kontaktformular mit einem Spamschutz zu versehen, müssen Sie im Formulargenerator lediglich ein Formularfeld vom Typ Sicherheitsabfrage hinzufügen.

11.4

Sinnvolle Erweiterungen zur Arbeit mit Formularen

Wenn Sie viel mit Formularen arbeiten, gibt es einige Tipps und Erweiterungen, die das Leben diesbezüglich etwas leichter machen. Zunächst einmal hat das Contao-Forum einen speziellen Bereich für Fragen zu Formularen: 왘

eigener Bereich zu Formularen im Contao-Forum http://bit.ly/b4ns3N

Außerdem gibt es zwei sehr nützliche kleine Erweiterungen: 왘

[helpmessage] Hilfsnachricht bei Formularfeldern http://bit.ly/cDlEG3 Zeigt einen individuellen Hinweistext für ein Formularfeld in einem kleinen Popup-Fensterchen, das erscheint, wenn ein Besucher in das Feld klickt. Zum Beispiel bei Kontakt- oder Suchformularen.

왘

[conditionalselectmenu] Abhängiges Select-Menü http://bit.ly/d3gd6d Select-Menü, das dynamisch seine Optionen ändert, je nachdem, was in seinem übergeordneten Menü ausgewählt wurde.

Eine größere Erweiterung, die sich Betreiber aller formularintensiven Sites auf jeden Fall näher anschauen sollten, ist der Extended Form Generator: 왘

[efg] Extended Form Generator http://bit.ly/cNqNTE

왘

eigener Bereich zum EFG im Contao-Forum http://bit.ly/cfVRY7

Mit dieser Erweiterung dürften fast alle Formularwünsche abgedeckt sein.

316

In diesem Kapitel erstellen Sie eine interne Suchmaschine, mit der Besucher die Beispielsite durchsuchen können.

12

Suchfunktion: Die Beispielsite durchsuchen

Genau wie ein Kontaktformular gehört eine Suchfunktion zur Standardausstattung einer modernen, benutzerfreundlichen Website, denn eine Website ist kein Selbstzweck und wird in erster Linie für die Besucher gebaut. In dem Wort Besucher steckt das Wort suchen schon drin, und genau wie im Baumarkt gibt es auf Websites zwei Arten von Besuchern: Die einen laufen umher, lesen die Hinweisschilder und versuchen, die Holzschrauben selbst zu finden, die anderen fragen den nächstbesten Mitarbeiter nach dem kürzesten Weg. Eine Suchfunktion ist dieser nächstbeste Mitarbeiter. Für eine funktionierende Suchfunktion sind die verschiedensten Zutaten nötig, die wie immer auf die richtige Art und Weise zubereitet werden müssen. Hier ist das Rezept im Überblick: Das Ergebnis sieht am Ende des Kapitels so aus wie in Abbildung 12.1.

Abbildung 12.1 Die Suchseite (1.) und das Suchformular (2.)

317

12

Suchfunktion: Die Beispielsite durchsuchen

왘

Zunächst erstellen Sie die Suchseite, auf der ein Modul eingebunden wird, das auf dem treffend benannten Modultyp »Suchmaschine« basiert. Diese Seite kann nach der Erstellung bereits zur Suche benutzt werden.

왘

Danach erstellen Sie dann ein Suchformular, das auf allen Seiten rechts außen in der horizontalen Navigation angezeigt wird. Eine mit diesem Formular ausgeführte Suche ruft dann die Suchseite automatisch auf.

12.1

Teil 1: Eine Suchseite erstellen

Im Folgenden beginnen Sie mit der Erstellung der Suchseite, für die Sie die folgenden Zutaten benötigen: 왘

eine neue, im Menü zunächst sichtbare Seite, die später versteckt wird

왘

ein Modul vom Typ Suchmaschine

왘

die Einbindung des Moduls auf dieser Seite über Artikel

Danach wird die Suchseite noch gestaltet, damit sie übersichtlicher wird. Schritt1: Die Suchseite im Seitenbaum erstellen Der erste Schritt ist ganz simpel die Erstellung einer neuen Seite im Seitenbaum. Diese Seite wird später im Menü versteckt und durch das Suchformular im Kopfbereich automatisch aufgerufen. Sie bleibt vorerst zum Testen aber sichtbar. Nach dem folgenden ToDo sieht der Seitenbaum für die Beispielsite so aus wie in Abbildung 12.2. ToDo: Die Suchseite im Seitenbaum erstellen 1. Öffen Sie das Backend-Modul Seitenstruktur. 2. Klicken Sie oben im Arbeitsbereich auf Neue Seite. 3. Fügen Sie die neue Seite ganz unten im Seitenbaum ein. 4. Im Beispiel ist der Seitenname der Seite »Suchen«, aber Optimisten können sie auch gerne »Finden« nennen. Der Name der Seite ist nicht wirklich wichtig. 5. Seitentyp: Reguläre Seite. 6. Aktivieren Sie die Option Seite veröffentlichen. 7. Klicken Sie auf Speichern und Schliessen.

318

Teil 1: Eine Suchseite erstellen

Abbildung 12.2 Die Suchseite im Seitenbaum

Schritt 2: Das Modul »Anwendung – Suchfunktion« Nach der Erstellung der Suchseite machen Sie in diesem Schritt Bekanntschaft mit einem neuen Modultyp, der den treffenden Namen Suchmaschine trägt. Dieser Modultyp hat es in sich und macht zwei Dinge auf einmal: Er erzeugt auf der Suchseite ein Suchformular und präsentiert direkt darunter das Suchergebnis. In diesem Abschnitt erstellen Sie damit ein Modul namens Anwendung – Suchfunktion. Abbildung 12.3 zeigt den ersten Teil der Konfiguration im Überblick. Der Titel wird nur zur internen Verwaltung benötigt. Interessanter ist der Bereich Modul-Konfiguration. Der Modultyp Suchmaschine unterscheidet die zwei Abfragetypen Finde alle Wörter (UND-Suche) und Finde irgendein Wort (ODER-Suche). Sofern es keinen guten Grund dagegen gibt, sollten Sie als Standard-Abfragetyp die Option Finde alle Wörter verwenden. Die Ungenaue Suche findet auch Wortteile und erhöht dadurch die Trefferzahl. Die Kontext-Spannweite bestimmt, wie viele Zeichen links und rechts von einem gefundenen Suchbegriff angezeigt werden, und die Gesamte Kontextlänge beschränkt genau diese. Die Voreinstellungen sind beide sinnvoll und sollten nur bei einem konkreten Anlass geändert werden.

319

12.1

12

Suchfunktion: Die Beispielsite durchsuchen

Abbildung 12.3 Eingabeformular für den Modultyp »Suchmaschine«, Teil 1

Elemente pro Seite beschränkt die Anzeige der Suchergebnisse pro Seite. Sind mehr Treffer vorhanden, erzeugt Contao unten auf der Seite automatisch eine Paginierung. Die Voreinstellung 0 zeigt alle Treffer auf einer Seite. Suchformular-Layout. Das einfache Formular besteht nur aus einem Textfeld und einer Absende-Schaltfläche, das erweiterte Formular bietet dem Suchenden darunter noch zwei Radio-Buttons zur Änderung des Abfragetyps (Finde alle Wörter oder Finde irgendein Wort). Abbildung 12.4 zeigt den zweiten Teil der Konfiguration. Dem Modultyp Suchmaschine können Sie im unteren Teil des Eingabeformulars gleich zwei Seiten zuweisen, eine Weiterleitungsseite und eine Referenzseite. Das Prinzip der Weiterleitungsseite kennen Sie bereits, und es funktioniert hier genauso wie immer. Mit der Weiterleitungsseite sagen Sie dem Modul, welche Seite es aufrufen soll. Auf dieser Seite muss ein Modul vom Typ Suchmaschine eingebunden sein. Die Referenzseite können Sie auf großen Sites benutzen, um nur einen Teil der Site zu durchsuchen. Wenn die ganze Site durchsucht werden soll, wählen Sie entweder gar keine Referenzseite oder den Startpunkt.

320

Teil 1: Eine Suchseite erstellen

Abbildung 12.4 Eingabeformular für den Modultyp »Suchmaschine«, Teil 2

Im folgenden ToDo erstellen Sie ein Modul für die Beispielsite. ToDo: Das Modul »Anwendung – Suchfunktion« erstellen 1. Öffnen Sie im Backend-Modul themes die Frontend-Module zur Bearbeitung. 2. Klicken Sie im Arbeitsbereich oben auf Neues Modul. 3. Titel: »Anwendung – Suchfunktion« 4. Wählen Sie als Modultyp den Eintrag Suchmaschine. 5. Ändern Sie in der Modul-Konfiguration das Suchformular-Layout in Erweitertes Formular. Lassen Sie die anderen Einstellungen unverändert (wie in Abbildung 12.3). 6. Wählen Sie als Weiterleitungsseite die in diesem Kapitel erstellte Seite Suchen.

321

12.1

12

Suchfunktion: Die Beispielsite durchsuchen

ToDo: Das Modul »Anwendung – Suchfunktion« erstellen (Forts.) 7. Wählen Sie als Referenzseite den Startpunkt einer Webseite. 8. Das Template sollte search_default.tpl sein. 9. Klicken Sie auf Speichern und Schliessen.

Schritt 3: Das Modul »Anwendung – Suchfunktion« einbinden Nach der Erstellung muss das Modul wie immer eingebunden werden. Da es nur auf der Suchseite erscheinen soll, bietet sich die Einbindung in einem Artikel auf der Suchseite an. Nach dem folgenden ToDo wird die Suchseite bereits funktionieren. ToDo: Das Modul »Anwendung – Suchfunktion« einbinden 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie den Artikel Suchen [Hauptspalte] zur Bearbeitung. 3. Erstellen Sie ein Inhaltselement Text mit einer h1-Überschrift »Suchergebnisse«, dem Satz »Sie haben folgende Suche eingegeben: » und der CSS-Klasse »seitenanfang«. 4. Klicken Sie auf Speichern und neu. 5. Fügen Sie unterhalb des Textes ein neues Inhaltselement ein. 6. Wählen Sie als Elementtyp Modul. 7. Wählen Sie aus der Liste Modul den Eintrag Anwendung – Suchfunktion (ID xx). 8. Klicken Sie auf Speichern und Schliessen.

Die Suchfunktion sucht und funktioniert nach diesem ToDo im Prinzip auch schon. Auf der Suchseite wartet bereits ein Suchformular auf Sie. Falls bei Ihnen nichts gefunden wird, lesen Sie bitte den Hinweiskasten vor der Abbildung 12.5, in der der Suchbegriff »Roxanne« eingegeben wurde, für den die Suchmaschine genau einen Treffer auf der Seite Videos gefunden hat. Falls etwas nicht gefunden wird: Den Suchindex neu aufbauen Contao indiziert jede Seite automatisch, sobald sie von einem Besucher im Browser aufgerufen wird, und speichert die auf der Seite enthaltenen Wörter in der Datenbank. Das Suchmodul durchsucht also nicht die Webseiten, sondern die Datenbank, und liefert die URLs der Seiten zurück, die als Treffer gefunden wurden. Wenn Sie Ihre Suchmaschine ausprobieren und bestimmte Begriffe nicht gefunden werden, obwohl sie definitiv vorhanden sind, schauen Sie mal im Backend-Modul Systemwartung vorbei. Dort gibt es zwei nützliche Funktionen, mit denen Sie den Inhalt der für die Suche relevanten Datenbanktabellen per Fernsteuerung kontrollieren können: 왘

Daten bereinigen: tl_search und tl_search_index

왘

Suchindex neu aufbauen

Spätestens nach diesen Schritten sollte alles klappen.

322

Teil 1: Eine Suchseite erstellen

Abbildung 12.5 Die Site-Suchmaschine – ungestaltet, aber sie funktioniert.

Schritt 4: Das HTML des Moduls »Anwendung – Suchfunktion« Auf der Suchseite wird vom Modul Anwendung – Suchfunktion in der Hauptspalte das in Listing 12.1 dargestellte HTML erzeugt.
Suchbegriffe
Ergebnisse 1 – 1 von 1 für <strong>roxanne (0.0211 Sekunden)
Videos <span class="relevance">[100.00 %]
in einer Mediabox: The (Very Young) Police <span class="highlight">Roxanne (YouTube, 04:21) Live in NL at "Pink Pop" in


323

12.1

12

Suchfunktion: Die Beispielsite durchsuchen


index.php/videos-und-musik.html <span class="filesize"> – 6.61 kB
Listing 12.1 Das HTML von Suchformular und Suchergebnis

Beim Suchformular ist bemerkenswert, dass wie bei Suchmaschinen üblich die Methode GET verwendet wird, was im Klartext bedeutet, dass die Suchbegriffe Teil der URL und in der Adresszeile des Browsers zu sehen sind. Das Eingabefeld für die Suchbegriffe hat den Namen keywords (der wichtig ist und weiter unten wieder auftaucht) und zeigt nach einer Suche die verwendeten Suchbegriffe an. In der Ergebnisliste unterhalb des Formulars steht die Anzahl der Ergebnisse in einem Absatz p mit der Klasse header. Darunter werden die Suchtreffer aufgelistet. Die URL am Anfang ist von einem h3 umgeben, der Textauszug ist p mit der Klasse context, der Suchbegriff ist mit einem span.highlight ausgezeichnet, und die URL am Ende wird wiederum in p mit der Klasse url aufbewahrt. Dieses HTML wird im nächsten Schritt gestaltet. Schritt 5: Das CSS zur Gestaltung der Suchseite Die Gestaltung der Suchseite ist nicht schwierig, aber doch etwas aufwendiger, da eine Menge verschiedener HTML-Elemente beteiligt sind. Das folgende ToDo macht einen Vorschlag zur Formatierung, den Sie natürlich gerne verändern können. ToDo: Die Suchseite gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie am Ende des Stylesheets unterhalb der Gestaltung des Kontaktformulars folgenden Kommentar ein: /* ====================================== Suche – Ergebnisseite ====================================== */

3. Gestalten Sie das Suchformular auf der Seite mit folgenden Styles: .mod_search input.text { padding: 3px; } .mod_search .radio_container { margin: 1em 0; } .mod_search .radio_container label { margin-right: 10px; }

324

Teil 1: Eine Suchseite erstellen

ToDo: Die Suchseite gestalten (Forts.) 4. Die Anzahl der Suchtreffer können Sie mit folgender Regel formatieren: #main .mod_search p.header { text-align: right; background-color: #ADCBE6; border-top: 2px solid #86ADCD; padding: 0.5em; margin-top: 2em; }

5. Die anklickbare h3-Überschrift könnte wie folgt aussehen: #main .mod_search h3 { font-size: 16px; } #main .mod_search h3 a:link { color: #0000FF; background: none; padding-left: 0; } #main .mod_search h3 a:visited { color: #800080; background: none; padding-left: 0; } .mod_search h3 .relevance { font-size: 10px; font-weight: normal; }

6. Der Textauszug, die Suchbegriffe und die URL darunter werden mit den folgenden Styles gestaltet: .mod_search p.context { margin: 0; } .mod_search .highlight { font-weight: bold; } .mod_search p.url { color: #008000; }

7. Zum Schluss werden die Suchergebnisse ein bisschen gepolstert und abwechselnd eingefärbt: .mod_search .even, .mod_search .odd { padding: 0.5em; } .mod_search .odd { background-color: #d9d9d9; margin: 1em 0; }

8. Speichern Sie das Stylesheet.

Mit diesem CSS sieht die Suchseite im Browser ungefähr so aus wie in Abbildung 12.6.

325

12.1

12

Suchfunktion: Die Beispielsite durchsuchen

Abbildung 12.6 Die fertig gestaltete Suchseite

12.2

Teil 2: Das Suchformular erstellen und einbinden

Die interne Suchmaschine funktioniert bereits, aber was noch fehlt, ist ein Suchformular, mit dem man die Site von jeder Seite aus durchsuchen kann. In diesem Abschnitt erstellen Sie ein solches Suchformular, platzieren es im Kopfbereich rechts neben der Hauptnavigation und verstecken dann die Suchseite, sodass sie nicht mehr im Menü erscheint.

326

Teil 2: Das Suchformular erstellen und einbinden

Abbildung 12.7 Das fertige Suchformular im Kopfbereich

Schritt 1: Ein Suchformular mit dem Formulargenerator erstellen Zunächst erstellen Sie mit dem Formulargenerator ein einfaches Suchformular. Als Weiterleitungsseite wählen Sie die Seite Suchen, und als Übertragungsmethode wird wie bei Suchformularen üblich GET verwendet. ToDo: Das Suchformular mit dem Formulargenerator erstellen 1. Öffnen Sie das Backend-Modul formulargenerator. 2. Klicken Sie oben im Arbeitsbereich auf Neues Formular. 3. Der Titel ist »Suchformular«. 4. Wählen Sie als Weiterleitungsseite die in diesem Kapitel erstellte Seite Suchen. 5. Aktivieren Sie Tabellenloses Layout. 6. Die Übertragungsmethode ist GET. 7. Geben Sie dem Formular eine CSS-Id namens »suchformular«. 8. Klicken Sie auf Speichern und Schliessen.

Das Formular existiert. Jetzt fehlen ihm nur noch ein Eingabefeld und eine Schaltfläche zum Abschicken der Suche.

327

12.2

12

Suchfunktion: Die Beispielsite durchsuchen

Abbildung 12.8 Das Eingabeformular zur Erstellung des Suchformulars

Schritt 2: Ein Textfeld zum Suchformular hinzufügen In diesem Schritt fügen Sie dem Formular ein Textfeld und einen Submit-Button hinzu. Da der Submit-Button direkt neben dem Eingabefeld stehen wird, erstellen Sie im folgenden ToDo beide in einem einzigen Formularelement. ToDo: Ein Textfeld zum Suchformular hinzufügen 1. Öffnen Sie das Backend-Modul formulargenerator. 2. Öffnen Sie das eben erstellte Suchformular zur Bearbeitung. 3. Klicken Sie oben im Arbeitsbereich auf Neues Feld und anschließend auf den braunen Pfeil nach unten. 4. Wählen Sie als Feldtyp Textfeld. 5. Der Feldname muss »keywords« lauten (ohne Anführungsstriche). Durch diesen Feldnamen weiß Contao, dass es sich um eine Suche handelt.

328

Teil 2: Das Suchformular erstellen und einbinden

ToDo: Ein Textfeld zum Suchformular hinzufügen (Forts.) 6. Die Feldbezeichnung sollten Sie frei lassen. Das ist eine Beschriftung für das Formular, und das ist beim Suchformular nicht nötig. 7. Wählen Sie als Eingabeprüfung die Option Erweiterte alphanumerische Zeichen. 8. Aktivieren Sie im Bereich Absende-Schaltfläche das Kontrollkästchen vor AbsendeSchaltfläche hinzufügen. 9. Die Bezeichnung der Absende-Schaltfläche ist »Suchen«. 10. Klicken Sie auf Speichern und Schliessen.

Im Backend sieht das Suchformular danach so aus wie in Abbildung 12.9.

Abbildung 12.9 Das Textfeld zum Suchen im Formulargenerator

Alternative: Suchformular mit dem Modul »Eigenes HTML« erstellen Falls Ihnen der Formulargenerator nicht zusagt oder Sie ganz besondere Vorstellungen vom Suchformular haben, die sich damit nicht umsetzen lassen, können Sie das HTML für das Formular auch selbst schreiben. Erstellen Sie dazu einfach ein neues FrontendModul vom Typ Eigenes HTML. Achten Sie bei der Formularerstellung darauf, dass der Name des Eingabefeldes keywords lauten muss. Wenn Sie ein solches Frontend-Modul manuell erstellen, können Sie Schritt 3 überspringen und gleich mit Schritt 4 weitermachen, der Einbindung des Formulars in das Seitenlayout.

Schritt 3: Ein Frontend-Modul mit dem Suchformular erstellen Das Suchformular soll auf allen Seiten rechts neben der horizontalen Navigation erscheinen, und der ideale Weg dahin wäre eine Einbindung ins Seitenlayout. Es gibt aber ein Problem: In einem Seitenlayout können nur Artikel und Frontend-Module eingebunden werden, und das Suchformular ist weder ein Artikel

329

12.2

12

Suchfunktion: Die Beispielsite durchsuchen

noch ein Modul. Für solche Situationen gibt es den Modultyp Formular, der ein Formular ganz einfach in ein Modul integriert, das dann anschließend in das Seitenlayout eingebunden wird. Im folgenden ToDo erstellen Sie zunächst einmal das Modul mit dem Formular. ToDo: Ein Frontend-Modul mit dem Suchformular erstellen 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module zur Bearbeitung. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Der Titel des Moduls soll »Anwendung – Suchformular« sein. 4. Wählen Sie als Modultyp Formular. 5. Wählen Sie im Bereich Include-Einstellungen in der Liste Formular den Eintrag Suchformular. 6. Klicken Sie auf Speichern und Schliessen.

Das war’s schon: kurz, aber wichtig. Schritt 4: Das Modul im Seitenlayout einbinden Nach der Integration des Suchformulars in ein Frontend-Modul binden Sie das neu erstellte Modul in diesem Schritt in das Seitenlayout ein. Abbildung 12.10 zeigt, wie der Bereich Frontend-Module im Seitenlayout danach aussieht.

Abbildung 12.10 Das Seitenlayout mit dem eingebundenen Suchformular

Im folgenden ToDo binden Sie das Modul Anwendung – Suchformular ein und verstecken dann die Suchseite im Menü.

330

Teil 2: Das Suchformular erstellen und einbinden

ToDo: Das Modul »Suchformular« im Seitenlayout einbinden 1. Öffnen Sie im Backend-Modul Themes die Seitenlayouts zur Bearbeitung. 2. Öffnen Sie das Standardlayout [Standard] zur Bearbeitung. 3. Duplizieren Sie im Bereich Frontend-Module – Eingebundene Module die Zeile Navigation – Metanavi – Kopfzeile. 4. Ändern Sie die untere der beiden Zeilen so, dass das Modul Anwendung – Suchformular in die Kopfzeile eingebunden wird. 5. Klicken Sie auf Speichern und Schliessen. 6. Öffnen Sie das Backend-Modul Seitenstruktur. 7. Öffnen Sie die Seite Suchen zur Bearbeitung. 8. Aktivieren Sie das Kontrollkästchen Im Menü verstecken. 9. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo sollte wie in Abbildung 12.11 das Suchformular im Kopfbereich erscheinen und auch bereits funktionieren. An der Gestaltung feilen Sie in Schritt 5 und 6 noch ein bisschen.

Abbildung 12.11 Das Suchformular im Kopfbereich – ungestaltet

Schritt 5: Das HTML für das Suchformular Das HTML für das Suchformular ist ziemlich »straightforward«, wie man auf Neudeutsch so schön sagt, und hat keinerlei Besonderheiten, die nicht schon an anderer Stelle erwähnt worden wären:

331

12.2

12

Suchfunktion: Die Beispielsite durchsuchen




Listing 12.2 Das HTML für das Suchformular

Falls das
unterhalb des Suchformulars ungewünschte Abstände verursacht oder sonst irgendwie stören sollte, können Sie es mit der CSS-Regel #suchformular br {display:none;} ausblenden. Das ist einfacher, als es im Template zu entfernen. Schritt 6: Das Suchformular im Kopfbereich positionieren Zur Positionierung des Suchformulars könnte man natürlich die horizontale Navigation nach links und das Suchformular nach rechts floaten, aber stabiler ist es, das Formular mit absoluter Positionierung rechts unten in den Kopfbereich zu platzieren. Jeder Layoutbereich von Contao hat ein div mit der Klasse inside, das im ResetStylesheet basic.css die Anweisung position:relative; erhält. Dadurch wird div.inside im Kopfbereich im folgenden ToDo automatisch zum Bezugspunkt für die absolute Positionierung des Formulars. ToDo: Das Suchformular im Kopfbereich positionieren 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie unterhalb der Gestaltung der Suchseite folgenden Kommentar ein: /* ====================================== Das Suchformular positionieren ====================================== */

3. Gestalten Sie das Suchformular mit den folgenden Styles: #header #suchformular { margin: 0; } #header #suchformular .text { width: 100px; }

332

Teil 2: Das Suchformular erstellen und einbinden

ToDo: Das Suchformular im Kopfbereich positionieren (Forts.) 4. Positionieren Sie das Suchformular im Kopfbereich rechts unten: #header .mod_form { position: absolute; right: 0; bottom: 0; padding: 5px; }

5. Speichern Sie das Stylesheet bildschirm.css.

Mit diesen wenigen Styles sitzt das Suchformular an der richtigen Stelle (Abbildung 12.12).

Abbildung 12.12 Das fertig gestaltete Suchformular

Falls die Hauptnavigation wächst ... Wenn ein Objekt absolut positioniert wird, ist der CSS-Autor dafür verantwortlich, dass sich Elemente nicht überlappen. Sollten in der ersten Menü-Ebene noch neue Seiten hinzukommen, wird die horizontale Navigation sich irgendwann mit dem absolut positionierten Suchformular überschneiden. Was immer dann passiert, ist ziemlich sicher nicht wünschenswert. Um eine Überschneidung zu verhindern, können Sie den Style für die ungeordnete Liste in navigation.css um eine maximale Breite von 780px ergänzen: #header .mod_navigation ul { float: left; width: auto; max-width: 780px; margin-bottom: 0; }

333

12.2

12

Suchfunktion: Die Beispielsite durchsuchen

Falls die Hauptnavigation dann zu breit wird, erfolgt ein Umbruch und die Navigation wird zweizeilig. Das ist vielleicht nicht hübsch, aber besser als nicht bedienbar, weil die Menüpunkte hinter dem Suchformular verschwinden.

12.3

Die Syntax der Suchfunktion im Überblick

Die Syntax der internen Suchmaschine orientiert sich an Suchmaschinen wie Google, sodass Ihre Besucher bei der Bedienung kaum Schwierigkeiten haben werden. Hier eine Zusammenfassung der wichtigsten Punkte: 왘

UND- bzw. ODER-Suche Eine Suche nach lorem ipsum listet standardmäßig nur Seiten als Treffer auf, auf denen beide Begriffe vorkommen. Gesucht wird als nach lorem AND ipsum. Diese UND-Suche heißt in Contao »Finde alle Wörter«. Wem das zu wenig ist, der kann die Leiden der jungen Wörter erhöhen und die Option »Finde irgendein Wort« aktivieren. Das bewirkt die Suche lorem OR ipsum und listet alle Seiten als Treffer auf, auf denen einer der beiden Suchbegriffe vorkommt.

왘

Phrasensuche »mit Anführungszeichen« Eine Suche nach "lorem ipsum" geht einen Schritt weiter als die UND-Suche. Contao listet nur Seiten als Treffer auf, auf denen die beiden Begriffe direkt hintereinander stehen.

왘

Platzhalter-Suche mit Sternchen * Um auch Teile von Wörtern zu finden, können Sie ein Sternchen als Platzhalter verwenden. Eine Suche nach web* findet alle Begriffe, die mit diesen Buchstaben beginnen. Herr oder Frau Weber werden dabei genauso gefunden wie eine Webanwendung.

왘

Suchbegriff erzwingen mit einem Pluszeichen + Das Erzwingen von Suchbegriffen ermöglicht die Verfeinerung von ODERSuchen, indem Sie sagen können, dass ein Begriff unbedingt vorkommen muss, der andere aber nur eventuell.

왘

Suchbegriff ausschließen mit einem Minuszeichen Eine Suche nach -web consulting design findet alle Seiten, auf denen die Begriffe consulting und/oder design stehen, aber nicht das Wort web.

Viel Spaß beim Suchen mit der internen Suchmaschine von Contao.

334

In diesem Kapitel erfahren Sie, wie Sie ein News-System erstellen, das die Beiträge chronologisch sortiert auf der Webseite ausgibt. Außerdem fügen Sie Bilder in Teaser und Beiträge ein, erstellen einen Feed und aktivieren die Kommentarfunktion. Zum Schluss bauen Sie eine Navigation, mit der man Beiträge monatsweise auswählen kann.

13

Die Erweiterung »Nachrichten«

Die Nachrichten-Erweiterung besteht aus einem Backend-Modul, vier FrontendModulen und diversen Modul- und Subtemplates. Nachrichten werden im Frontend umgekehrt chronologisch ausgegeben und können falls gewünscht von den Besuchern kommentiert werden. Typischerweise gibt es dabei eine Übersichtsseite mit kurzen Anlesetexten (Teasern) und einem Link »Weiterlesen …«, der zur Einzeldarstellung der Nachricht führt. Abbildung 13.1 zeigt eine solche NewsSeite im Browser.

Abbildung 13.1 Die Seite »Nachrichten« mit Teasern und Monatauswahl

335

13

Die Erweiterung »Nachrichten«

Chronologisch umgekehrte Sortierung, Teaser, Kommentarfunktion. Die Aufzählung erinnert an einen Blog und wer will, kann mit der Nachrichten-Erweiterung einen Blog betreiben.

13.1

Übersicht: Die Zutaten für das Nachrichtensystem

Nachrichtenbeiträge sind anders als Artikel. Sie sind einfacher aufgebaut und bestehen nicht aus Inhaltselementen, sondern nur aus einem Teaser und dem Text des Beitrags, eventuell garniert mit einer Grafik. Beiträge werden auch nicht innerhalb der Seitenstruktur aufbewahrt, sondern in einem speziell erstellten Nachrichtenarchiv. Um auf der Beispielsite ein einfaches News-System auf die Beine zu stellen, benötigen Sie folgende Zutaten: 왘

Zwei Seiten. Eine Seite für die Nachrichtenübersicht mit den Teasern und eine zur Darstellung der Beiträge nach einem Klick auf »Weiterlesen …«. Die Teaser werden auf der bereits vorhandenen Seite Nachrichten ausgegeben, es fehlt also nur noch eine zweite Seite für die einzelnen Beiträge.

왘

Ein Nachrichtenarchiv. Das Archiv wird im Backend-Modul Inhalte 폷 Nachrichten erstellt und dient zum Schreiben und zur Aufbewahrung der Nachrichtenbeiträge.

왘

Zwei Frontend-Module. Ein Modul vom Typ Nachrichtenarchiv erzeugt die Übersicht, ein zweites Modul vom Typ Nachrichtenleser ist für die Darstellung der vollständigen Beiträge zuständig.

왘

Zwei Artikel. Um die Module auf den beiden Seiten auszugeben, wird auf jeder Seite ein Artikel erstellt, in dem mit dem Inhaltselement Modul das HTML der beiden Frontend-Module angezeigt wird.

Los geht’s mit der Erstellung des Nachrichtenarchivs.

13.2

Das Backend-Modul »Nachrichten«: Beiträge erstellen

Bevor Sie auf der Seite Nachrichten Beiträge anzeigen können, muss es erst einmal welche geben. Zur Erstellung und Verwaltung von Nachrichten dient das Backend-Modul Inhalte 폷 Nachrichten.

336

Das Backend-Modul »Nachrichten«: Beiträge erstellen

13.2.1

»Newsarchiv«: Ein Nachrichtenarchiv erstellen

Ein Archiv dient zur Erstellung und Aufbewahrung von Nachrichten. Wenn Sie im Backend-Modul Nachrichten oben im Arbeitsbereich auf Neues Archiv klicken, sehen Sie das Eingabeformular aus Abbildung 13.2.

Abbildung 13.2 Das Eingabeformular zur Erstellung eines Nachrichtenarchivs

Der Titel ist der Name, unter dem das Archiv geführt wird, und die Weiterleitungsseite ist die Seite, die nach einem Klick auf »Weiterlesen …« aufgerufen wird. Auf dieser Seite muss ein Modul vom Typ Nachrichtenleser zur Anzeige eines Beitrags eingebunden sein. Im Bereich Kommentare können Sie die Kommentarfunktion für jedes Archiv einzeln aktivieren. Der Zugriffsschutz kann ein Archiv schützen, sodass es nur für bestimmte Benutzergruppen zu sehen ist. Die Option Feed erstellen erstellt auf Wunsch einen RSS- oder Atom-Feed, sodass Besucher die Nachrichten mit einem Feedreader abonnieren können. Im folgenden ToDo erstellen Sie ein Nachrichtenarchiv namens Newsarchiv.

337

13.2

13

Die Erweiterung »Nachrichten«

ToDo: Ein Nachrichtenarchiv erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Nachrichten. 2. Klicken Sie oben im Arbeitsbereich auf Neues Archiv. 3. Vergeben Sie den Titel »Newsarchiv«. 4. Eine Weiterleitungsseite gibt es noch nicht, und sie wird erst später eingerichtet. Lassen Sie diesen Punkt vorerst unverändert. 5. Lassen Sie auch die folgenden Optionen Kommentare, Zugriffsschutz und RSS-Feed unverändert. 6. Klicken Sie auf Speichern und Schliessen.

Jetzt haben Sie eine Lagerhalle zur Aufbewahrung der Teaser und Beiträge. Sie können beliebig viele solcher Archive erstellen und sie alle unterschiedlich konfigurieren, zum Beispiel ein Archiv für öffentliche Nachrichten auf der Webseite und ein weiteres mit Zugriffsschutz in einem internen Bereich nur für Mitarbeiter. Aber für den Anfang reicht dieses eine.

13.2.2

Nachrichtenbeiträge schreiben

Nach der Erstellung des Archivs benötigen Sie auf der Beispielsite ein paar Nachrichtenbeiträge, die später auf der Webseite ausgegeben werden. Das Eingabeformular zur Erstellung neuer Nachrichten ist ziemlich lang, weshalb ich es im Folgenden in zwei Schritten vorstelle. Öffnen Sie zunächst das Archiv zur Bearbeitung (gelber Bleistift), und klicken Sie im Arbeitsbereich oben auf Neuer Beitrag. Im ersten Teil des Formulars geht es um Titel, Autor und das Erstellungsdatum der Nachricht (Abbildung 13.3).

Abbildung 13.3 Titel, Autor und Datum der Nachricht eingeben

338

Das Backend-Modul »Nachrichten«: Beiträge erstellen

Der Titel ist die Überschrift der Nachricht. Die Überschriftsebene wird automatisch vergeben. In der Nachrichtenübersicht ist das h2, in der Einzelansicht h1. Der Nachrichtenalias wird in der Regel freigelassen und von Contao automatisch erzeugt. Aus dem Alias wird die URL erstellt, unter der ein einzelner Beitrag permanent abrufbar ist (auch »Permalink« genannt). Der Autor ist standardmäßig der im Backend angemeldete Benutzer. Das Datum ist das Erstellungsdatum des Artikels. Contao gibt das aktuelle Datum vor, aber Sie können es manuell oder mit einem Klick auf den Datumswähler ändern. In welchem Datumsformat das Datum hier ein- und auf der Webseite ausgegeben werden soll, legen Sie in System 폷 Einstellungen fest. Falls die Uhrzeit nicht stimmen sollte, überprüfen Sie ebenfalls in System 폷 Einstellungen im Bereich Datum und Zeit die eingestellte Zeitzone. Europe/Berlin sollte da stehen. Oder Amsterdam. Unterhalb dieser allgemeinen Daten beginnt, wie in Abbildung 13.4 dargestellt, die Erstellung des eigentlichen Beitrags.

Abbildung 13.4 Teasertext und Nachrichtentext für den Beitrag

Die Unterüberschrift wird nur in der Einzelansicht angezeigt und oft einfach freigelassen. Wichtiger sind die beiden Eingabefelder Teasertext und Nachrichten-

339

13.2

13

Die Erweiterung »Nachrichten«

text darunter. Teasertext ist ein einfaches Formularfeld für einen kurzen Anlesetext, der auf der Übersichtsseite angezeigt wird. Der Teasertext ist ein Köder, mit dem der Leser zum Lesen des Beitrags animiert werden soll. Auf der Webseite steht oberhalb des Teasertextes der Titel, und unterhalb folgt ein Link zum »Weiterlesen …«. Der Nachrichtentext ist der Text des Beitrags, den Sie im TinyMCEEditor eingeben und formatieren können. Unterhalb des Editors gibt es noch Optionen zum Hinzufügen eines Bildes und diverser andere Dinge, aber wirklich wichtig sind die Einstellungen im Bereich veröffentlichung. Erst wenn das Kontrollkästchen vor Beitrag veröffentlichen angekreuzt ist, wird der Beitrag auch wirklich auf der Webseite ausgegeben (sofern der Artikel mit dem Modul und die dazugehörige Seite auch veröffentlicht sind). Im folgenden ToDo erstellen Sie die zwei Nachrichtenbeiträge. ToDo: Zwei Nachrichtenbeiträge erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Nachrichten. 2. Öffnen Sie das Newsarchiv mit einem Klick auf den gelben Bleistift. 3. Klicken Sie oben im Arbeitsbereich auf Neuer Beitrag, um den ersten Beitrag zu erstellen. 4. Geben Sie den Titel »Der allererste Beitrag« ein. 5. Geben Sie im Feld Teasertext den folgenden Text ein: »Wie fühlt es sich eigentlich an, ein Blindtext zu sein? Man gibt sich Mühe, möglichst interessant zu wirken, und wird trotzdem fast immer einfach ignoriert. Hier der Bericht von einem, der es wissen muss.« 6. Geben Sie als Nachrichtentext etwas Blindtext ein (z. B. aus Abbildung 13.5). 7. Aktivieren Sie das Kontrollkästchen vor Beitrag veröffentlichen. 8. Klicken Sie auf Speichern und neu. 9. Erstellen Sie einen zweiten Beitrag mit dem vielsagenden Titel »Der zweite Beitrag«. 10. Teasertext: »Blindtexte sind keine Blindfische. Einige haben die Zeichen der Zeit begriffen und gemerkt, dass man heute mit nichtssagenden Buchstaben nicht mehr weit kommt. Hier ein Beispiel.« 11. Geben Sie als Nachrichtentext etwas Blindtext ein (z. B. aus Abbildung 13.5). 12. Aktivieren Sie das Kontrollkästchen Beitrag veröffentlichen. 13. Klicken Sie auf Speichern und Schliessen.

Im Backend enthält das Newsarchiv jetzt zwei Beiträge (Abbildung 13.5). Unterhalb der Archiv-Einstellungen sehen Sie den Titel und den Nachrichtentext der zwei Beiträge und rechts am Rand die üblichen Symbole zum Bearbeiten. Der Teasertext erscheint in dieser Übersicht nicht.

340

Beiträge auf den Webseiten ausgeben

Abbildung 13.5 Das Archiv »Newsarchiv« mit zwei Beiträgen

Nur Teasertext = Kein »Weiterlesen ...«-Link Wenn ein Beitrag nur einen Teasertext hat und das Feld Nachrichtentext leer bleibt, wird kein »Weiterlesen …«-Link angezeigt und die Überschrift des Beitrags ist auch nicht anklickbar.

13.3

Beiträge auf den Webseiten ausgeben

In diesem Abschnitt sorgen Sie dafür, dass die beiden Beiträge auf der Seite Nachrichten ausgegeben werden.

13.3.1

Eine neue Seite zur Anzeige eines Beitrags (Einzelansicht)

Sie benötigen zunächst einmal zwei Webseiten: eine für die Übersicht aller Beiträge und eine für die Einzelansicht. Die Seite Nachrichten ist im Seitenbaum bereits vorhanden. Auf dieser Seite wird die Nachrichtenübersicht ausgegeben, eine Liste mit Überschrift, Teaser und ein paar Meta-Informationen wie Datum und Autor.

341

13.3

13

Die Erweiterung »Nachrichten«

Was noch fehlt, ist die zweite Seite, die nach einem Klick auf Weiterlesen … den kompletten Beitrag anzeigt. Diese zweite Seite wird als Unterseite zu Nachrichten angelegt und soll nicht im Menü erscheinen. Außerdem wird sie in den Einstellungen für das Archiv Newsarchiv als Weiterleitungsseite eingetragen. ToDo: Die Seiten zur Ausgabe der Nachrichtenbeiträge vorbereiten 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Klicken Sie oben im Arbeitsbereich auf Neue Seite. 3. Fügen Sie die neue Seite als Unterseite zu Nachrichten ein, indem Sie rechts daneben auf den blinkenden, braunen Pfeil nach rechts klicken. 4. Die Seite soll folgende Eigenschaften haben: Seitenname: »Beitrag anzeigen« (ohne Anführungsstriche) Seitenalias: »news« (erscheint später in der URL) 5. Aktivieren Sie Im Menü verstecken im Bereich Experten-Einstellungen. 6. Aktivieren Sie das Kontrollkästchen Seite veröffentlichen. 7. Klicken Sie auf Speichern und Schliessen. 8. Öffnen Sie das Backend-Modul Nachrichten. 9. Öffnen Sie die Einstellungen für das Newsarchiv zur Bearbeitung, indem Sie z. B. mit der rechten Maustaste auf den gelben Bleistift klicken und dann im Kontextmenü mit der linken Maustaste den Befehl Archiv-Einstellungen bearbeiten auswählen. 10. Wählen Sie als Weiterleitungsseite die frisch erstellte Seite Beitrag anzeigen. 11. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo ist zwar noch immer nichts im Frontend zu sehen, aber dafür gibt es im Seitenbaum eine neue, im Menü versteckte Seite (Abbildung 13.6).

Abbildung 13.6 Neue Seite zur Anzeige eines Nachrichtenbeitrags

Der nächste Schritt zur Ausgabe der Nachrichtenbeiträge im Frontend ist die Erstellung der beiden Frontend-Module zur Erzeugung des Quelltextes.

342

Beiträge auf den Webseiten ausgeben

13.3.2 Das Modul »Nachrichten – Teaser anzeigen [Nachrichtenarchiv]« In diesem Abschnitt erstellen Sie das Frontend-Modul zur Ausgabe der Übersicht auf der Seite Nachrichten. Dieses Modul basiert auf dem Modultyp Nachrichtenarchiv, wodurch der Begriff Nachrichtenarchiv je nach Kontext für zwei völlig verschiedene Dinge steht: Er meint entweder die Lagerhalle im Backend-Modul Nachrichten oder ein Frontend-Modul zur Ausgabe von Beiträgen für einen bestimmten Zeitraum. Das im folgenden ToDo erstellte Modul vom Typ Nachrichtenarchiv zeigt die Teaser der Beiträge aus dem Nachrichtenarchiv Newsarchiv im Frontend an. ToDo: Das Modul »Nachrichten – Teaser anzeigen« erstellen 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module zur Bearbeitung. 2. Erstellen Sie ein Neues Modul mit dem Titel »Nachrichten – Teaser anzeigen« und der h1-Überschrift »Nachrichten«. 3. Wählen Sie als Modultyp aus der Liste Nachrichtenarchiv. 4. Aktivieren Sie im Bereich Nachrichtenarchive das Kontrollkästchen vor Newsarchiv. 5. Wählen Sie in der Liste Kein Zeitraum ausgewählt die Option Alle Beiträge anzeigen. 6. Lassen Sie alle anderen Optionen unverändert. 7. Die elemente pro Seite ist 0, um alle Beiträge aus dem Archiv anzuzeigen. Das Archivformat soll »Monat« sein. 8. Im Bereich Template-Einstellungen sollen die Meta-Felder Datum und Autor aktiviert sein, und Nachrichtentemplate ist das Template news_latest. 9. Klicken Sie auf Speichern und Schliessen.

Das ausgefüllte Eingabeformular sieht kurz vor dem Speichern so aus wie in Abbildung 13.7. Dieses Modul wird etwas weiter unten in einem Artikel in der Hauptspalte der Seite Nachrichten eingebunden. Anzahl der Beiträge pro Seite begrenzen Wenn Sie sehr viele Beiträge haben, können Sie die Anzahl der Elemente pro Seite begrenzen. Contao erstellt dann automatisch eine Paginierung: Unten auf der Seite wird ein div mit der Klasse pagination eingefügt, das einen Absatz mit dem Text »Seite x von y« enthält. Darunter werden in einer ungeordneten Liste anklickbare Hyperlinks bereitstellt, um zu einer bestimmten Seite zu springen.

343

13.3

13

Die Erweiterung »Nachrichten«

Abbildung 13.7 Das Eingabeformular für »Nachrichten – Teaser anzeigen«

13.3.3 Das Modul »Beitrag anzeigen [Nachrichtenleser]« Jetzt fehlt noch ein Modul zur Darstellung des Beitragstextes. Zu diesem Zweck gibt es in Contao den Modultyp Nachrichtenleser. ToDo: Das Modul »Nachrichten – Beitrag anzeigen« erstellen 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module zur Bearbeitung. 2. Erstellen Sie ein Neues Modul mit dem Titel »Nachrichten – Beitrag anzeigen«. 3. Wählen Sie als Modultyp den Eintrag Nachrichtenleser. 4. Aktivieren Sie bei Nachrichtenarchive das Kontrollkästchen vor Newsarchiv. 5. Im Bereich Template-Einstellungen sollen die Meta-Felder Datum und Autor aktiviert sein. 6. Als Nachrichtentemplate wählen Sie news_full. 7. Klicken Sie auf Speichern und Schliessen.

344

Beiträge auf den Webseiten ausgeben

Das ausgefüllte Eingabeformular sieht kurz vor dem Speichern etwa so aus wie in Abbildung 13.8.

Abbildung 13.8

Die Eingabemaske für »Nachrichten – Beitrag anzeigen«

Die Seiten sind vorhanden, die Module sind erstellt. Jetzt müssen die Module nur noch wissen, wo sie aktiv werden sollen.

13.3.4 Einbinden des Moduls »Nachrichten – Teaser anzeigen« Das Modul Nachrichten – Teaser anzeigen [Nachrichtenarchiv] soll nur auf einer Seite dargestellt werden, und deshalb binden Sie es im folgenden ToDo in einem Artikel auf der Seite ein. ToDo: Artikel für das Modul »Nachrichten – Teaser anzeigen« 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie den Artikel Nachrichten [Hauptspalte] zur Bearbeitung (gelber Bleistift). 3. Löschen Sie bereits vorhandene Inhaltselemente, und erstellen Sie ein Neues Element. 4. Wählen Sie als Elementtyp den Eintrag Modul. Daraufhin erscheint darunter eine Liste der vorhandenen Frontend-Module. 5. Die h1-Überschrift Nachrichten ist bereits im Modul definiert worden.

345

13.3

13

Die Erweiterung »Nachrichten«

ToDo: Artikel für das Modul »Nachrichten – Teaser anzeigen« (Forts.) 6. Wählen Sie aus dieser Liste das Modul Nachrichten – Teaser anzeigen (ID xx). Beachten Sie, dass danach rechts daneben ein gelber Bleistift erscheint, mit dem Sie bei Bedarf das Modul direkt von hier aus konfigurieren können. 7. Vergeben Sie die CSS-Klasse »seitenanfang«. 8. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo gibt es endlich etwas im Browser zu sehen, auch wenn die Darstellung noch nicht perfekt ist (Abbildung 13.9).

Abbildung 13.9

Die Newsübersicht im Frontend – noch ungestaltet

Sie sehen die beiden Nachrichtenbeiträge in umgekehrt chronologischer Reihenfolge. Das hat funktioniert. Datum und Autor sind noch viel zu weit weg von den Überschriften, aber zu sehen ist bereits, dass sowohl die Überschrift als auch Weiterlesen ... anklickbar sind. Ein Klick darauf zeigt allerdings eine leere Seite, da es noch keine Einzelansicht gibt. Die kommt jetzt.

13.3.5 Einbinden des Moduls »Nachrichten – Beitrag anzeigen« Das Modul Nachrichten – Beitrag anzeigen [Nachrichtenleser] zur Ausgabe eines einzelnen Beitrags ist bereits vorhanden, und im folgenden ToDo binden Sie es in einen Artikel auf der Seite Beitrag anzeigen ein.

346

Beiträge auf den Webseiten ausgeben

ToDo: Artikel zur Ausgabe eines einzelnen Beitrags erstellen 1. Öffnen Sie im Backend-Modul Artikel den Artikel Beitrag anzeigen [Hauptspalte] zur Bearbeitung. 2. Erstellen Sie ein neues Inhaltselement vom Typ Modul. 3. Wählen Sie aus der Liste der vorhandenen Module den Eintrag Nachrichten – Beitrag anzeigen (ID xx). Rechts daneben erscheint wieder ein gelber Bleistift, mit dem Sie bei Bedarf das Modul von hier aus konfigurieren können. 4. Vergeben Sie die CSS-Klasse »seitenanfang«. 5. Klicken Sie auf Speichern und Schliessen.

Aus technischer Sicht ist nach diesem ToDo alles in Butter: Die Seite Nachrichten zeigt eine Übersicht aller Nachrichtenbeiträge, und ein Klick auf eine Überschrift oder den Link Weiterlesen … bringt den Besucher zur Einzelansicht eines Beitrags (Abbildung 13.10).

Abbildung 13.10 Ein Beitrag in der Einzelansicht

In der Einzelansicht gelangt man über den Link Zurück oder über den Hauptmenüpunkt Nachrichten wieder zur Übersicht zurück. Bleibt nur noch ein bisschen Gestaltungsarbeit. Der letzte Teil der URL dieses Beitrags sieht übrigens wie folgt aus: 왘

index.php/news/items/der-zweite-beitrag.html

347

13.3

13

Die Erweiterung »Nachrichten«

Diese URL setzt sich der Reihe nach wie folgt zusammen: 왘

index.php ist der eigentliche Name der Seite und nur vorübergehend dabei. Dieses Fragment wird in Abschnitt 18.1, »Lesbare Adressen: URLs umschreiben«, verschwinden.

왘

news ist der Seitenalias der Seite »Beitrag anzeigen« und kann dort ganz einfach geändert werden.

왘

items teilt dem Modul Nachrichtenleser mit, dass er eine bestimmte Nachricht ausgeben soll, und kann nicht so einfach geändert werden.

왘

der-zweite-beitrag ist der Alias des Beitrags Der zweite Beitrag.

왘

.html ist der im Backend-Modul System 폷 Einstellungen definierte URL-Suffix.

Falls die Nachricht nicht existiert, erzeugt das Modul Nachrichtenleser eine Fehlermeldung und die Fehlernummer 404, die Sie mit einer entsprechenden Seite abfangen können (siehe Abschnitt 18.4, »Abfangjäger: 404 und 403«). Die Frontend-Vorschau zeigt auf Wunsch nicht veröffentlichte Beiträge Um einen noch nicht veröffentlichten Beitrag im Frontend sehen zu können, nutzen Sie die Frontend-Vorschau ganz oben im Arbeitsbereich ((Alt) + (f)). Die Frontend-Vorschau zeigt das Frontend als Teil eines Frameset. Im oberen Frame gibt es hellgelb hinterlegt einige Bedienelemente. Wenn Sie in der Liste Unveröffentlichte Elemente den Eintrag anzeigen auswählen und dann auf die Schaltfläche Anwenden klicken, sehen Sie im unteren Frame auch unveröffentlichte Beiträge im Frontend.

13.4

HTML und CSS: Teaser und Beiträge gestalten

Um die Ausgabe der Nachrichtenbeiträge auf den beiden Seiten zu formatieren, werfen Sie zunächst einen Blick auf das HTML und erstellen dann die entsprechenden Styles.

13.4.1 Das HTML des Moduls »Nachrichten – Teaser anzeigen« Das HTML für die News-Übersicht wird vom Modul Nachrichten – Teaser anzeigen [Nachrichtenarchiv] erzeugt, das dabei zwei Templates benutzt: Das Modultemplate mod_newsarchive.tpl und das Subtemplate news_latest.tpl. Listing 13.1 zeigt die wichtigsten Passagen aus dem Quelltext.

348

HTML und CSS: Teaser und Beiträge gestalten


27.07.2010 20:00 von Kevin Jones
Der zweite Beitrag
Blindtexte [...]
Weiterlesen … <span class="invisible">Der zweite Beitrag
[ weitere Beiträge ]
Listing 13.1

HTML vom Modul »Nachrichten – Teaser anzeigen« (Auszug)

Die indexer-Kommentare am Anfang und am Ende bewirken, dass der Quelltext dazwischen nicht in die Contao-Suchmaschine gelangt. Um doppelte Suchergebnisse zu verhindern, wird standardmäßig nicht der Teasertext indiziert, sondern nur die Einzelansicht eines Beitrags. Umgeben ist die gesamte News-Übersicht von einem div-Element mit der Klasse mod_newsarchive. Der Klassenname für das div der einzelnen Beiträge wird vom zweiten Template abgeleitet und lautet für das Template news_latest.tpl ganz einfach layout_latest. Außerdem bekommt ein Beitrag einige zusätzliche Klassen wie first und even. Die Meta-Informationen zu Datum und Autor stehen in einem eigenen Absatz mit der Klasse info, gefolgt von einer h2-Überschrift mit einem Link, in dem das title-Attribut die Beitragsüberschrift wieder aufgreift, genau wie das unsichtbare span-Element im Weiterlesen …-Link. Hintergrund dieser Maßnahme ist, dass die Links für Screenreader so aussagekräftiger sind. Stände in den Links nur das Wort »Weiterlesen« ohne die Beitragsüberschrift dahinter, wäre nicht klar, was eigentlich weitergelesen werden kann. Der Teasertext steht in einem Absatz mit der Klasse teaser. Der Link zum Weiterlesen … hat ebenfalls einen eigenen Absatz mit der Klasse more. Übersicht der Templates und CSS-Klassen Eine Übersicht über alle Modultypen und Templates finden Sie am Ende dieses Kapitels ab Seite 368.

349

13.4

13

Die Erweiterung »Nachrichten«

13.4.2 Das CSS für das Modul »Nachrichten – Teaser anzeigen« Dieses HTML kann mit dem CSS aus dem folgenden ToDo einfach, aber wirksam gestaltet werden. ToDo: Die Teaser auf der Seite »Nachrichten« per CSS gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie am Ende des Stylesheets folgenden Kommentar hinzu: /* ====================================== Nachrichten – Teaser und Beitrag anzeigen ====================================== */

3. Gestalten Sie mit folgendem Style die einzelnen Beiträge: .mod_newsarchive .layout_latest { border-top: 1px dotted #d9d9d9; border-bottom: 1px dotted #d9d9d9; margin: 2em 0 3em 0 }

4. Formatieren Sie die Zeile mit den Meta-Informationen: .mod_newsarchive .info { font-size: 11px; }

5. Gestalten Sie die Beitragsüberschriften und die Links darin mit den folgenden CSSRegeln: .mod_newsarchive h2 { font-size: 18px; line-height: 1; margin-top:0; } .mod_newsarchive h2 a { color: #000; text-decoration: none; }

6. Gestalten Sie falls gewünscht die Unterstreichung der Links: .mod_newsarchive a { text-decoration: none; } .mod_newsarchive a:hover, .mod_newsarchive a:focus { text-decoration: underline; }

7. Speichern Sie das Stylesheet, und betrachten Sie die Seite im Browser.

Nach diesem ToDo wird die Übersicht auf der Seite Nachrichten ihrem Namen etwas gerechter und wirkt etwas übersichtlicher (Abbildung 13.11).

350

HTML und CSS: Teaser und Beiträge gestalten

Abbildung 13.11 Die formatierten Teaser auf der Seite »Nachrichten«

13.4.3 Das HTML des Moduls »Nachrichten – Beitrag anzeigen« Nach der Formatierung der Teaser kommt jetzt die Einzelansicht an die Reihe, die vom Modul Nachrichten-– Beitrag anzeigen [Nachrichtenleser] erzeugt wird, und zwar von den Templates mod_newsreader und news_full.tpl. Der Quelltext sieht so aus wie der Auszug in Listing 13.2.
Der zweite Beitrag
27.07.2010 20:00 von Kevin Jones
Überall dieselbe alte Leier. [...]
Denn esse est percipi […]
Zurück
Listing 13.2

Das HTML vom Modul »Nachrichten – Einzelansicht«

351

13.4

13

Die Erweiterung »Nachrichten«

Umgeben ist der Beitrag von einem div mit der Klasse mod_newsreader. Darin befindet sich ein zweites div, dessen Klassenname sich wieder vom zweiten Template ableitet (layout_full) und das außerdem diverse andere nützliche Klassen bekommt, die man bei der Gestaltung auswerten kann. Erwähnenswert ist, dass der Titel des Beitrags in der Einzelausgabe von h2 zu h1 befördert wird. Der Rest des Quelltextes birgt keinerlei Überraschungen.

13.4.4 Das CSS für das Modul »Nachrichten – Beitrag anzeigen« Dieses HTML benötigt im folgenden ToDo nur zwei Styles. ToDo: Einen kompletten Beitrag per CSS gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie nach den CSS-Regeln für die News-Übersicht den folgenden Style zur Gestaltung der Einzelansicht ein: .mod_newsreader .info { font-size: 11px; }

3. Speichern Sie das Stylesheet, und betrachten Sie die Seite im Browser.

Mit diesem einfachen Style sieht ein einzelner Beitrag im Browser jetzt so aus wie in Abbildung 13.12.

Abbildung 13.12 Ein formatierter News-Beitrag in der Einzelansicht

352

Bilder zu Teasern und Beiträgen hinzufügen

Damit ist das Nachrichtensystem funktionstüchtig, und es geht weiter mit dem Hinzufügen von Bildern. Datum und Autor lieber unterhalb des Beitrags? Um die Meta-Informationen wie Datum und Autor unterhalb des Teasers oder des Beitrags anzuzeigen, müssen Sie die Templates news_latest.tpl bzw. news_full.tpl ändern. Dazu erstellen Sie im Backend-Modul Templates eine Kopie des gewünschten Templates im Ordner blaues_theme (siehe dazu Seite 150 ff.). Um die Meta-Informationen zu verschieben, öffnen Sie die eben erstellte Template-Kopie im Editor und markieren ziemlich am Anfang die folgenden Zeilen: hasMetaFields): ?>
[diverse PHP-Anweisungen ]


Schneiden Sie diese Zeilen aus, und fügen Sie sie vor dem
am Ende des Templates wieder ein. Klicken Sie auf Speichern, und testen Sie den Code im Browser. Falls etwas schiefgeht, löschen Sie einfach das angepasste Template aus dem Ordner blaues_ theme. Contao benutzt dann automatisch wieder das Original aus dem Systemordner.

13.5

Bilder zu Teasern und Beiträgen hinzufügen

Bilder in Nachrichtenbeiträgen funktionieren im Prinzip genauso in Artikeln. Im folgenden ToDo fügen Sie ein Bild zu einem Beitrag hinzu, das dann sowohl im Teaser als auch in der Einzelansicht erscheint. ToDo: Ein Bild zu einem Beitrag hinzufügen 1. Kopieren Sie die Datei lorem_ipsum.jpg von der Buch-DVD in den Ordner beispielsite/ content/bilder. 2. Öffnen Sie im Backend-Modul Nachrichten das Newsarchiv. 3. Öffnen Sie den Beitrag »Der allererste Beitrag« zur Bearbeitung. 4. Aktivieren Sie das Kontrollkästchen Ein Bild Hinzufügen unterhalb des Editorfensters. 5. Wählen Sie die Datei lorem_ipsum.jpg als Quelldatei: Alternativer Text: »Lorem Ipsum« Bildbreite: 150 Bildabstand nach rechts: 10px Grossansicht/Neues Fenster: aktivieren Bildausrichtung: linksbündig 6. Klicken Sie auf Speichern und Schliessen.

353

13.5

13

Die Erweiterung »Nachrichten«

Im Browser erscheint das Bild sowohl in der News-Übersicht im Teaser als auch im kompletten Beitrag (Abbildung 13.13).

Abbildung 13.13 Nachricht mit Bild in der Einzelansicht

Im Teaser erscheinen die im Beitrag hinzugefügten Bilder nur mit dem Template news_latest.tpl. Die anderen für eine Listendarstellung geeigneten Templates, news_short.tpl und news_simple.tpl, stellen in den Teasern standardmäßig keine Bilder dar. Die Größe für das Bild haben Sie im Nachrichtenbeitrag selbst bestimmt, und sie gilt für Einzelansicht und Teaser. Manchmal soll das Bild im Teaser aber etwas kleiner dargestellt werden als in der Einzelansicht, und auch dazu gibt es eine Möglichkeit. Im Backendbereich Themes 폷 Module gibt es in den Einstellungen für das Modul Nachrichten – Teaser anzeigen [Nachrichtenarchiv] ganz unten rechts zwei Felder mit der Beschriftung Bildbreite und Bildhöhe. Ein hier eingegebener Wert gilt für alle von diesem Modul dargestellten Bilder und überschreibt die im Beitrag selbst eingegebene Bildgröße. So wird gewährleistet, dass Bilder in den Teasern immer gleich groß sind. Diese Tatsache nutzen Sie im folgenden ToDo, um das Bild im Teaser kleiner darzustellen als in der Einzelansicht.

354

Bilder zu Teasern und Beiträgen hinzufügen

ToDo: Bildgröße für die Teasertexte definieren 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module zur Bearbeitung. 2. Öffnen Sie das Modul Nachrichten-– Teaser anzeigen [Nachrichtenarchiv]. 3. Tragen Sie im Feld Bildbreite den Wert 75 ein. Das sind immer Pixel. 4. Klicken Sie auf Speichern und Schliessen.

Mit dieser Einstellung werden alle mit dem Modul Nachrichten – Teaser anzeigen dargestellten Bilder auf eine Breite von 75px verkleinert.

Abbildung 13.14 Ein Teaser mit einem 75px breiten Bild

TinyMCE auch für den Teasertext Der Teasertext wird in einer schlichten Textarea eingegeben. Falls Sie den TinyMCE auch gerne zur Formatierung von Teasertexten benutzen würden, müssen Sie in der Datei system/config/dcaconfig.php folgende Einträge machen (jeweils in einer Zeile): // TinyMCE für Teasertexte auf der Seite Nachrichten $GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['inputType'] = 'textarea'; $GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['eval'] = array('rte'=>'tinyMCE');

Diese Änderung ist update-sicher, da die Datei dcaconfig.php bei einem Update von Contao nicht überschrieben wird.

355

13.5

13

Die Erweiterung »Nachrichten«

13.6

Einen Feed zum Abonnieren der Beiträge erstellen

Falls Sie möchten, dass Ihre Besucher die Nachrichtenbeiträge in einem Feedreader abonnieren oder sogar auf einer anderen Webseite einbinden können, genügt in den Einstellungen für das Nachrichtenarchiv ein Klick auf das Kontrollkästchen Feed erstellen.

Abbildung 13.15 Einstellungen für das »Newsarchiv« – Feed erstellen

Contao erzeugt im Hauptordner der Installation eine Datei namens beispielsitecontaobuch-feed.xml. In dieser Datei sind je nach Einstellung die Teasertexte oder die kompletten Beiträge enthalten. Damit der Feed von anderen Browsern und Programmen automatisch erkannt wird, binden Sie ihn im folgenden ToDo ins Seitenlayout ein. Dadurch wird im unsichtbaren -Bereich des Quelltextes ein entsprechendes HTML-Element erzeugt. ToDo: Einen Feed für die Beispielsite erstellen 1. Öffnen Sie das Backend-Modul Nachrichten. 2. Öffnen Sie die Archiv-Einstellungen für das Newsarchiv zur Bearbeitung (rechter Mausklick auf den gelben Bleistift). 3. Aktivieren Sie das Kontrollkästchen Feed erstellen. 4. Wenn Ihnen bei Feed-format die Optionen RSS 2.0 und Atom nicht so viel sagen, lassen Sie die Einstellung RSS 2.0 unverändert. 5. Tragen Sie als Feed-Sprache »de« oder »de_DE« für Deutsch ein. Wenn Sie Ihre Beiträge in einer anderen Sprache verfassen, finden Sie zum Beispiel bei SelfHTML eine Übersicht über die Länderkürzel: http://de.selfhtml.org/diverses/sprachenlaenderkuerzel.htm

356

Einen Feed zum Abonnieren der Beiträge erstellen

ToDo: Einen Feed für die Beispielsite erstellen (Forts.) 6. Wählen Sie bei den Export-Einstellungen, ob der Feed nur Teasertexte oder Komplette Beiträge enthalten soll. 7. Ändern Sie falls gewünscht die Maximale Anzahl an Beiträgen. 8. Die Basis-URL ist in der Regel die URL zum Contao-Hauptordner. 9. Feed-Alias ist der gewünschte Dateiname für die XML-Datei, die Contao erzeugt. Bitte geben Sie nur den Vornamen ein, zum Beispiel »beispielsite-contaobuchfeed«. Die Endung .xml kommt automatisch. 10. Last, but not least können Sie eine kurze Feedbeschreibung eingeben. 11. Klicken Sie auf Speichern und Schliessen. 12. Öffnen Sie in Themes 폷 Seitenlayouts das Standardlayout [Standard] zur Bearbeitung. 13. Aktivieren Sie im Bereich RSS/Atom-Feeds das Kontrollkästchen Newsarchiv. 14. Klicken Sie auf Speichern und Schliessen.

Wenn jetzt ein Besucher mit einem Browser wie dem Firefox auf Ihren Seiten vorbeikommt, erscheint oben rechts in der Adressleiste das orangefarbene RSSSymbol und der Feed kann abonniert werden. Mit den »dynamischen Lesezeichen« (so heißt ein Feed im Firefox) sieht das so aus wie in Abbildung 13.16.

Abbildung 13.16 Der Newsfeed im Firefox

357

13.6

13

Die Erweiterung »Nachrichten«

13.7

Die Kommentarfunktion

Das Web ist ein interaktives Medium, und so gibt es im Nachrichten-Modul von Contao auch eine sehr einfach zu bedienende Kommentarfunktion.

13.7.1

Die Kommentarfunktion aktivieren

Ihren Besuchern eine Kommentierung der Beiträge zu ermöglichen, ist einfacher, als Sie vielleicht denken: Sie müssen lediglich im Backend-Modul Nachrichten in den Einstellungen für das Newsarchiv die Kommentare aktivieren (Abbildung 13.17).

Abbildung 13.17 Kommentare in den Archiv-Einstellungen aktivieren

Die Optionen zur Konfiguration der Kommentarfunktion sind selbsterklärend, und wenn Sie sich im Browser einen Beitrag in der Einzelansicht anschauen, ist das Kommentarformular bereits eingebaut und einsatzbereit (Abbildung 13.18). ToDo: Kommentarfunktion aktivieren 1. Öffnen Sie das Backend-Modul Inhalte 폷 Nachrichten. 2. Klicken Sie rechts auf den gelben Bleistift für das Newsarchiv, und wählen Sie aus dem Kontextmenü Archiv-Einstellungen bearbeiten. 3. Aktivieren Sie das Kontrollkästchen Kommentare aktivieren. 4. Klicken Sie auf Speichern und Schliessen.

Und schon erscheint im Browser unterhalb des Beitrags in der Einzelansicht ein Kommentarformular (Abbildung 13.18). Die Gestaltung des Formulars basiert bis jetzt auf wenigen Styles aus dem Reset-Stylesheet basic.css.

358

Die Kommentarfunktion

Abbildung 13.18

Das Kommentarformular unterhalb des Beitrags

13.7.2 Kommentare schreiben und überprüfen Das Kommentarformular ist wie gesagt bereits betriebsbereit: Pflichtfelder sind mit einem Sternchen gekennzeichnet, und eine Sicherheitsabfrage mit einer Rechenaufgabe für Spammer ist auch mit an Bord. Und es gibt auch schon eine Formularüberprüfung. Wenn ein Besucher nicht alle Pflichtfelder ausfüllt, bekommt er entsprechende Meldungen (Abbildung 13.19), die weiter unten noch ansprechend gestaltet werden.

Abbildung 13.19

Das Formular wird auch bereits überprüft.

359

13.7

13

Die Erweiterung »Nachrichten«

Wenn die Besucher das Formular korrekt ausfüllen, werden die Kommentare zwischen der Überschrift Einen Kommentar schreiben und dem Formular angezeigt (Abbildung 13.20). Falls Sie in den Archiv-Einstellungen die Option Kommentare moderieren aktiviert haben, müssen Sie die Kommentare noch vorher freischalten.

Abbildung 13.20 Kommentare werden unter dem Beitrag gelistet.

13.7.3 Kommentare und Fehlermeldungen gestalten Das Formular ist von der Gestaltung her okay, und so fehlen nur noch ein paar Styles für die Kommentare und die Fehlermeldungen. Zunächst werfen Sie dazu wie immer einen kurzen Blick auf das HTML. Die Darstellung der Kommentare basiert auf dem in Listing 13.3 gezeigten HTML.
Kommentar von Peter<span class="date"> | 27.07.2010
Ich finde es toll, dass dieser Blindtext nicht nur Lückenfüller sein will und auf die Webstandards hinweist. Das verdient Unterstützung, die ich hiermit zum Ausdruck bringen möchte.
Listing 13.3

Das HTML zur Auflistung von Kommentaren

Im folgenden ToDo geben Sie diesem HTML eine dezente Formatierung und gestalten auch gleich die Fehlermeldungen, die wie beim Kontaktformular in einem Absatz mit der Klasse error stehen.

360

Die Kommentarfunktion

ToDo: Aufgelistete Kommentare und Fehlermeldungen gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie unterhalb der Gestaltung der Nachrichten folgende Styles zur Formatierung von Meta-Informationen und Kommentaren ein: .ce_comments .info { font-size: 11px; padding: 3px 0 0; border-top: 1px dotted #d9d9d9; } div.comment { border-bottom: 1px dotted #d9d9d9; margin-bottom: 3em; }

3. Fehlermeldungen werden mit der folgenden CSS-Regel hervorgehoben: .ce_comments p.error { background: #FFC0CB; padding: 3px; border: 1px solid #f00; margin-top: 1em; margin-bottom: 0; }

4. Speichern Sie das Stylesheet.

Nach diesem ToDo sieht der Kommentarbereich unterhalb eines Nachrichtenbeitrags ungefähr so aus wie in Abbildung 13.21.

Abbildung 13.21 Der gestaltete Kommentarbereich

361

13.7

13

Die Erweiterung »Nachrichten«

13.7.4 Kommentare im Backend verwalten Die Verwaltung der Kommentare erfolgt im Modul Inhalte 폷 Kommentare. Hier werden alle Kommentare zentral gesammelt (Abbildung 13.22) und können mit den üblichen Symbolen bearbeitet, gelöscht oder deaktiviert werden.

Abbildung 13.22 Kommentarverwaltung im Backend

Anzahl der Kommentare in der Übersicht anzeigen Auf der Seite Nachrichten werden in jedem Teaser Datum und Autor angezeigt. Falls Sie die Kommentarfunktion aktiviert haben und es bereits den einen oder anderen Kommentar gibt, können Sie dort auch die Anzahl der Kommentare anzeigen: Öffnen Sie in Themes 폷 Frontend-Module das Modul Nachrichten – Teaser anzeigen [Nachrichtenarchiv] zur Bearbeitung, und aktivieren Sie im Bereich Meta-Felder das Kontrollkästchen Kommentare. Das war’s. Jetzt wird neben dem Autor die Anzahl der Kommentare pro Beitrag angezeigt. Falls Ihnen die Ausgabe (x Kommentare) nicht gefällt, öffnen Sie system/config/ langconfig.php im Editor und fügen folgende Zeile hinzu: $GLOBALS['TL_LANG']['MSC']['commentCount']

= ' | Kommentare: %s';

Nach dem Speichern erhalten Sie dann: Datum von Autor | Kommentare: x.

362

Navigation: Beiträge monatsweise auswählen

13.8

Navigation: Beiträge monatsweise auswählen

Die Nachrichtenfunktion auf der Beispielsite ist komplett und einsetzbar. Wenn Sie allerdings regelmäßig Beiträge schreiben, wird die Sache irgendwann unübersichtlich, und ältere Beiträge sind für die Besucher schwierig zu finden. In diesem Abschnitt erweitern Sie das bestehende Nachrichtensystem deshalb um die in Abbildung 13.23 in der linken Spalte gezeigte Monatauswahl. Dieses Menü listet automatisch alle Monate auf, in denen Beiträge geschrieben wurden. Ein Klick auf einen bestimmten Monat zeigt dann in der Hauptspalte eine Übersicht der Beiträge aus diesem Monat.

Abbildung 13.23 Das Menü zur Auswahl eines Monats

Für dieses Monatsmenü benötigen Sie ein zusätzliches Frontend-Modul vom Typ Nachrichtenarchiv-Menü. Damit das Monatsmenü in der linken Spalte aber überhaupt ein paar Monate anzeigen kann, erstellen Sie im folgenden ToDo zunächst noch ein paar Beiträge mit einem Datum aus der Vergangenheit. ToDo: Ein paar ältere Beiträge erstellen 1. Öffnen Sie im Backend-Modul Nachrichten das Newsarchiv. 2. Erstellen Sie einige kurze Beiträge. 3. Wichtig ist, dass Sie im Feld Datum zurückliegende Monate eingeben, denn das Monatsmenü zeigt nur Monate, in denen es auch Beiträge gibt. Der Inhalt der Beiträge spielt keine Rolle. 4. Rufen Sie die Seite Nachrichten im Browser auf, und prüfen Sie, ob die neu erstellten Beiträge dort unter den anderen Beiträgen gelistet werden.

363

13.8

13

Die Erweiterung »Nachrichten«

13.8.1 Das Modul »Monat auswählen [Nachrichtenarchiv-Menü]« Auf der Basis des Modultyps Nachrichtenarchiv-Menü erstellen Sie ein Modul namens Monat auswählen, das in der linken Spalte erscheint und alle Monate auflistet, in denen Beiträge geschrieben wurden. Ein Klick in dieser Monatsauswahl übergibt den ausgewählten Monat an die Seite Nachrichten, die bereits ein Modul vom Typ Nachrichtenarchiv enthält, das die Teaser für den ausgewählten Monat auf der Seite darstellt. Dieses Modul ist sehr flexibel: Ist ein Monat ausgewählt, zeigt es die Beiträge aus diesem Monat; ist hingegen kein Monat ausgewählt, listet es alle Beiträge auf. ToDo: Das Modul »Nachrichten – Monat auswählen« erstellen 1. Öffnen Sie im Backend-Modul Themes die Frontend-Module. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Geben Sie als Titel »Nachrichten – Monat auswählen« ein. 4. Wählen Sie als Modultyp den Eintrag Nachrichtenarchiv-Menü. 5. Aktivieren Sie unter Nachrichtenarchive das Newsarchiv. 6. Als Archivformat soll der Eintrag Monat ausgewählt sein. 7. Die Sortierreihenfolge soll absteigend sein, damit die neuesten Monate oben stehen. 8. Weiterleitungsseite ist die Seite Nachrichten. 9. Klicken Sie auf Speichern und Schliessen.

13.8.2 Das Modul »Nachrichten – Monat auswählen« einbinden Das Modul Nachrichten – Monat auswählen soll auf den beiden Seiten Nachrichten und Beitrag anzeigen in der linken Spalte erscheinen. Im folgenden ToDo erstellen Sie dazu ein neues Seitenlayout, das Sie anschließend den beiden Nachrichtenseiten zuweisen. ToDo: Ein Seitenlayout für die Nachrichten erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Seitenlayouts. 2. Erstellen Sie eine Kopie des Standardlayouts, indem Sie rechts daneben auf das grüne Kreuz klicken (zweites Symbol von links). 3. Fügen Sie die Kopie mit einem Klick auf das braune, blinkende Symbol mit dem Pfeil etwas weiter oben ein. 4. Ändern Sie den Titel in »Nachrichten«. 5. Lassen Sie alle anderen Einstellungen unverändert. 6. Suchen Sie im Bereich Frontend-Module die Zeile Navigation – Unternavi in Linke Spalte.

364

Navigation: Beiträge monatsweise auswählen

ToDo: Ein Seitenlayout für die Nachrichten erstellen (Forts.) 7. Ändern Sie diese Zeile, sodass statt der Unternavigation das Modul Nachrichten – Monat auswählen in der linken Spalte eingebunden wird. 8. Klicken Sie auf Speichern und Schliessen.

So weit, so gut. Wenn Sie im Frontend nachschauen, werden Sie sehen, dass Sie noch nichts sehen, denn es fehlt noch eine Klitzekleinigkeit: Die Nachrichtenseiten müssen noch erfahren, dass sie mit dem neuen Seitenlayout gestaltet werden sollen. Im folgenden ToDo weisen Sie der Seite Nachrichten das neue Seitenlayout zu. Die Unterseite Beitrag anzeigen erbt dieses automatisch. ToDo: Das Seitenlayout den Nachrichtenseiten zuweisen 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Öffnen Sie die Seite Nachrichten zur Bearbeitung 3. Aktivieren Sie das Kontrollkästchen vor Ein Layout zuweisen. 4. Wählen Sie aus der Liste Seitenlayout den Eintrag Blaues Theme – Nachrichten. 5. Klicken Sie auf Speichern und Schliessen.

Nach diesem Schritt ist auf beiden Seiten alles tutti paletti. Es ist nicht hübsch, aber die Monatauswahl ist vorhanden, und es funktioniert alles.

Abbildung 13.24 Links das Menü und rechts die Beiträge – unformatiert

13.8.3 Das HTML des Moduls »Nachrichten – Monat auswählen« Um mit der Gestaltung der Monatauswahl in der linken Spalte zu beginnen, werfen Sie wie immer zunächst einen Blick auf das HTML. Dort steht eine verschachtelte, ungeordnete Liste, umgeben von einem div mit der Klasse mod_newsmenu (Listing 13.4).

365

13.8

13

Die Erweiterung »Nachrichten«


• 2010
  • <span class="active"> Juni 2010
  • Mai 2010
• 2009
  • Juni 2009
Listing 13.4

Das HTML für das Monatsmenü in der linken Spalte

Erwähnenswert ist, dass die Jahreszahl zwar in einem Listenelement mit der Klasse year aufbewahrt wird, aber keine Überschrift ist. Die Links in der Hauptspalte sitzen in Listenelementen unterhalb der Liste mit der Klasse level_2.

13.8.4 Das CSS für das Modul »Nachrichten – Monat auswählen« Dieses HTML können Sie zum Beispiel mit dem CSS aus dem folgenden ToDo gestalten. Da das Monatsmenü in gewisser Weise mit zur Navigation zählt, werden die Styles im folgenden ToDo im Navigationsstylesheet gespeichert. Die Gestaltung orientiert sich am vertikalen Untermenü auf den anderen Seiten. ToDo: Das Monatsmenü gestalten 1. Öffnen Sie das Stylesheet navigation.css im Editor. 2. Fügen Sie am Ende des Stylesheets unterhalb der Gestaltung für die Metanavigation folgenden Kommentar ein: /* ====================================== Nachrichten – Monat auswählen ====================================== */

366

Navigation: Beiträge monatsweise auswählen

ToDo: Das Monatsmenü gestalten (Forts.) 3. Das umgebende div-Element wird nach links gefloatet, und die Listenpunkte sollen keine Aufzählungszeichen haben: #left div.mod_newsmenu { float: left; width: 142px; font-size: 12px; margin: 0; } #left .mod_newsmenu li { list-style-type: none; margin: 0; }

4. Die Jahreszahl soll etwas größer und fett sein. Diese Angaben müssen wegen der Vererbung für die innere Liste zurückgesetzt werden, die außerdem auch noch ein margin-top für den Abstand zur Jahreszahl bekommt: #left .mod_newsmenu li.year { font-size: 14px; font-weight: bold; padding: 0 0 1em 0; } #left .mod_newsmenu .level_2 { font-size: 12px; font-weight: normal; margin: 1em 0 0 0; }

5. Zum Schluss werden noch die Links und die aktiven Menüpunkte gestaltet: #left .mod_newsmenu a, #left .mod_newsmenu span { display: block; text-decoration: none; background-color: #ADCBE6; color: #000; padding: 9px; border-top: 1px solid #fff; } #left .mod_newsmenu a:hover, #left .mod_newsmenu a:focus { background: #2D5B85; color: #fff; } #left .mod_newsmenu span.active { background: #2D5B85; color: #fff; }

6. Speichern Sie das Stylesheet.

367

13.8

13

Die Erweiterung »Nachrichten«

Mit diesem Styling sieht das Monatsmenü etwas ansprechender aus, wie Abbildung 13.25 zeigt.

Abbildung 13.25 Die fertig gestaltete Nachrichtenabteilung

Die Nachrichtenabteilung ist voll funktionsfähig: Es gibt eine Übersicht aktueller Nachrichten mit Überschrift und Teaser, eine Einzelansicht für die kompletten Beiträge und ein Menü zur Auswahl bestimmter Monate.

13.9

Übersicht: Nachrichten, Modultypen und Templates

In diesem Kapitel haben Sie für die Erweiterung Nachrichten bereits einige Modultypen und Templates kennengelernt, aber es gibt noch mehr. Contao stellt insgesamt vier Modultypen, sieben Modultemplates, vier Subtemplates und jede Menge CSS-Klassen zur Verfügung. Sie haben also die Qual der Wahl, weswegen die folgende Übersicht Ihnen die Auswahl ein bisschen erleichtern soll.

13.9.1 Die Modultypen und die Modultemplates »mod_news*.tpl« Zur Darstellung von Teasern und Beiträgen gibt es vier verschiedene Modultypen, deren Darstellung auf bestimmten Templates beruht. Diese Modultemplates werden im Contao-Handbuch auch Views genannt und haben Namen, die mit dem Kürzel mod_news beginnen und mit .tpl enden. Contao weist den Modulen automatisch das richtige Modultemplate zu. Tabelle 13.1 zeigt eine Übersicht von Modultypen, zugehörigen Modultemplates und den entsprechenden CSS-Klassen:

368

Übersicht: Nachrichten, Modultypen und Templates

Modultyp

Modultemplates

CSS-Klasse

Nachrichtenarchiv

mod_newsarchive.tpl mod_newsarchive_empty.tpl

mod_newsarchive

Nachrichtenleser

mod_newsreader.tpl

mod_newsreader

Nachrichtenarchivmenü

mod_newsmenu.tpl mod_newsmenu_year.tpl mod_newsmenu_day.tpl

mod_newsmenu mod_newsmenu table.minicalendar

Nachrichtenliste

mod_newslist.tpl

mod_newslist

Tabelle 13.1

Übersicht über Modultypen, Modultemplates und CSS-Klassen

Der Modultyp Nachrichtenarchiv wird benutzt, um eine Liste von Teasern mit weiterführenden Links auszugeben. Ein Klick auf einen weiterführenden Link übergibt den ausgewählten Beitrag an eine Weiterleitungsseite, auf der ein Modul vom Typ Nachrichtenleser vorhanden sein muss. Dieser Nachrichtenleser stellt immer nur den Beitragstext dar. Der Modultyp Nachrichtenarchivmenü stellt ein Menü bereit, mit dem die Beiträge für einen Tag, einen Monat oder ein Jahr aufgerufen werden können. Bei einem Klick auf einen Menüpunkt wird der ausgewählte Zeitraum an eine Weiterleitungsseite übergeben, die ein Modul vom Typ Nachrichtenarchiv enthalten sollte. Eine kleine Besonderheit ist übrigens das Nachrichtenarchivmenü für einen Tag, denn im Gegensatz zu Monats- und Jahresarchiven wird dabei zur Darstellung des Menüs keine verschachtelte Liste benutzt, sondern ein Minikalender, den Sie im Kapitel über die Kalender-Erweiterung Events noch kennenlernen. Der Modultyp »Nachrichtenleser« Der Nachrichtenleser ist in vielerlei Hinsicht identisch mit dem Nachrichtenarchiv. Bei der Gestaltung der Startseite folgt ein Beispiel für den Einsatz der Nachrichtenliste (siehe Abschnitt 16.2, »Inhalt für die Hauptspalte: Newsbeiträge und Termine«).

13.9.2 Die vier Subtemplates »news_*.tpl« Außer den sieben Modultemplates gibt es noch vier Subtemplates, die für die Gestaltung der einzelnen Beiträge zuständig sind. Im Gegensatz zu den Modultemplates, die Contao automatisch zuweist, können die Subtemplates vom Benutzer ausgewählt werden. Die vier Subtemplates werden im Contao-Handbuch als Partials bezeichnet und heißen news_*.tpl.

369

13.9

13

Die Erweiterung »Nachrichten«

Tabelle 13.2 gibt einen Überblick über die Eigenschaften der Subtemplates: news_full.tpl

news_latest.tpl

news_short.tpl

news_simple.tpl

Meta-Infos

ja

ja

ja

nur Datum

Titel...

als Text

als Link

als Link

als Link

Unterüberschrift

ja

–

–

–

Teasertext

ja

ja

ja

–

»Weiterlesen…«

–

ja

ja

ja

Nachrichtentext

ja

–

–

–

Bild

ja

ja

–

–

Modultyp

Nachrichtenleser

Nachrichtenarchiv und -liste

CSS-Klasse

layout_full

layout_latest

Tabelle 13.2

layout_short

layout_simple

Die Eigenschaften der vier Subtemplates in der Übersicht

Eine Anmerkung zur Tabelle noch: Natürlich können Sie news_full.tpl auch für die Ausgabe der Modultypen Nachrichtenliste und Nachrichtenarchiv einsetzen, aber dann werden die Beitragstexte ausgegeben und nicht die Teaser. Contao als vollwertiger Blog? Die Nachrichten-Erweiterung von Contao kann durchaus als einfacher Blog eingesetzt werden, aber zu einem vollwertigen Blog fehlen viele Funktionen wie Kategorisierung, Pingbacks und dergleichen mehr. Zum Teil können diese Funktionen mit Erweiterungen wie z. B. [tags], [tags_news] oder [pingback] nachgerüstet werden, und es wird bestimmt noch weitere Erweiterungen zum Bloggen geben, aber Contao konzentriert sich von Haus aus eher auf eine seitenbasierte Struktur.

370

In diesem Kapitel erstellen Sie für die Beispielsite eine Terminverwaltung und eine Liste häufig gestellter Fragen nebst deren Antworten.

14

Die Erweiterungen »Kalender« und »FAQ«

Eine Navigation, Inhalte, Formulare sowie eine Suchfunktion benötigt so ziemlich jede Website, und auch eine chronologisch umgekehrt sortierte Seite mit aktuellen Meldungen ist weit verbreitet. Kalender und FAQ hingegen sind ebenfalls sehr nützliche Funktionen, werden aber wohl nicht auf jeder Site benötigt. Nichtsdestotrotz werden diese Erweiterungen im Folgenden kurz vorgestellt. Nicht benötigte Backend-Module können Sie deaktivieren Wenn Sie für Ihre Site das eine oder andere Backend-Modul nicht benötigen, können Sie es in System 폷 Einstellungen im Bereich Inaktive Erweiterungen deaktivieren. Inaktive Module werden von Contao nicht geladen und darum im Navigationsbereich auch nicht mehr angezeigt. Dadurch schlagen Sie gleich zwei Fliegen mit einer Klappe: Contao wird noch ein bisschen schneller, und der Navigationsbereich wirkt aufgeräumter.

14.1

Die Erweiterung »Kalender«: Termine verwalten

Die Kalender-Erweiterung besteht aus dem Backend-Modul Events, vier Frontend-Modulen und diversen Modul- und Subtemplates. Ein Event ist wörtlich genommen ein »Ereignis« oder eine »Veranstaltung«, wird aber auch synonym mit Termin gebraucht. Die Kalender-Erweiterung bietet also eine Terminverwaltung und dient dazu, für Benutzer der Website relevante Termine im Backend an einer Stelle zu sammeln und dann in verschiedenster Form im Frontend wieder auszugeben. Das kann ein großer Kalender sein, ein Mini-Kalender, eine Terminliste oder auch die Detailansicht eines einzigen Termins. In diesem Abschnitt lernen Sie den großen Kalender und die Detailansicht kennen.

371

14

Die Erweiterungen »Kalender« und »FAQ«

14.1.1

Die Erweiterung »Kalender« in der Übersicht

Eine schöne Sache an Contao ist, dass die Bedienkonzepte durchgehend konsistent aufgebaut sind. Wenn Sie wissen, wie das Nachrichtenmodul funktioniert, wird Ihnen der Umgang mit Events und FAQ keine Schwierigkeiten bereiten. Daher sind die Beschreibungen in diesem Kapitel etwas gestraffter, und es gibt nicht für jeden Teilschritt ein ToDo. Das Ziel dieses Abschnitts ist es, auf der Seite Kalender einen Kalender mit den im Backend-Modul Events eingegebenen Terminen auszugeben. Die Termine im Kalender sind anklickbar, und ein Klick auf einen Termin zeigt diesen in der Detailansicht (Abbildung 14.1).

Abbildung 14.1 Ein Kalender und die Einzelansicht eines Termins

Die Erweiterung Kalender funktioniert wie gesagt im Prinzip genauso wie die in Kapitel 13 beschriebene Nachrichten-Erweiterung. Bei beiden gibt es im Backendbereich Inhalte eine Lagerhalle zum Erstellen und Verwalten von Einträgen. Bei der Nachrichten-Erweiterung ist das ein Archiv mit Beiträgen, bei der Kalender-Erweiterung ein Kalender mit einzelnen Events (d. h. Terminen). Die im Kalender gespeicherten Events werden mit dem treffend benannten Modultyp Kalender im Frontend als Hyperlinks in einer Kalenderansicht ausgegeben. Wenn Sie im Kalender auf einen Event klicken, ruft Contao eine Weiterleitungsseite mit dem Modultyp Eventleser auf, das einen einzelnen Event in der Detailansicht zeigt wie in der Nachrichten-Erweiterung bei Teasern und Beiträgen. Um auf Ihrer Website eine Terminverwaltung mit Kalender und Detailansicht anzulegen, müssen Sie vier Backend-Module in der richtigen Reihenfolge besuchen, dort jeweils ein, zwei Dinge erledigen, und schon sind Sie fertig.

372

Die Erweiterung »Kalender«: Termine verwalten

Schritt 1: Seite erstellen in »Layout 폷 Seitenstruktur« Im Backend-Modul Layout 폷 Seitenstruktur benötigen Sie nur zwei Seiten. Auf der bereits vorhandenen Seite Erweiterungen > Kalender wird der Kalender dargestellt, und auf der im Menü versteckten Unterseite Termin anzeigen, die im folgenden ToDo erstellt wird, erscheinen die einzelnen Termine. ToDo: Die Seite »Termin anzeigen« erstellen 1. Öffnen Sie das Backend-Modul Layout 폷 Seitenstruktur. 2. Klicken Sie oben im Arbeitsbereich auf Neue Seite. 3. Fügen Sie die neue Seite als Unterseite zur Seite »Kalender« ein, indem Sie am Ende der Zeile auf den braunen, blinkenden Pfeil nach rechts klicken. 4. Der Seitenname ist »Termin anzeigen«. 5. Aktivieren Sie Im Menü verstecken und Seite veröffentlichen. 6. Klicken Sie auf Speichern und Schliessen.

Die benötigten Seiten existieren nun. Jetzt wird im nächsten Schritt ein Kalender mit ein paar Events erstellt. Schritt 2: Kalender erstellen in »Inhalte 폷 Events« Im Backend-Modul Events erstellen Sie einen neuen Kalender mit dem Namen Terminkalender, in dem die Events erstellt und verwaltet werden. ToDo: Den Kalender »Terminkalender« erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Events. 2. Klicken Sie oben im Arbeitsbereich auf Neuer Kalender. 3. Der Titel ist »Terminkalender«. 4. Als Weiterleitungsseite tragen Sie die in diesem Kapitel erstellte und im Menü versteckte Unterseite Termin anzeigen ein. 5. Klicken Sie auf Speichern und Schliessen.

Schritt 3: Events erstellen im Kalender Die Erstellung eines Kalenders funktioniert ähnlich wie die eines Nachrichtenarchivs, aber beim Eingeben eines neuen Events im Backend-Modul Inhalte 폷 Events gibt es ein paar erwähnenswerte Unterschiede. Anders als ein Newsbeitrag ist ein Event nicht immer an eine bestimmte Uhrzeit gebunden. Wer möchte, kann auch eine Zeit hinzufügen, aber ein Event hat auf jeden Fall ein Startdatum. Bei mehrtägigen Events kann man auch noch ein Enddatum angeben. Teaser bleiben beim Kalendersystem in diesem Kapitel leer.

373

14.1

14

Die Erweiterungen »Kalender« und »FAQ«

Abbildung 14.2 Das Eingabeformular zur Erstellung von Events, Teil 1

Der Event-Text ist der Text, der später in der Einzelansicht angezeigt wird. Hier können Sie auch Ein Bild hinzufügen, genau wie bei Artikeln und Nachrichtenbeiträgen. So viel zum ersten Teil des Eingabeformulars. Abbildung 14.3 zeigt unteren Teil. Anders als beim Fernsehprogramm sind Wiederholungen bei Events eher angenehm. Mit der Option Event wiederholen können Sie ein wiederkehrendes Event erstellen und die Wiederholung auch gleich fest einplanen. Im Feld Intervall legen Sie fest, in welchen Abständen der Termin wiederholt wird; bei Wiederholungen tragen Sie deren Anzahl ein. Anlagen zu einem Event sind Dateien, die in der Detailansicht des Termins (Modultyp Eventleser) zum Download angeboten und in einem RSS-Feed als Enclosures (engl. für »Anlagen«) verlinkt werden werden.

374

Die Erweiterung »Kalender«: Termine verwalten

Abbildung 14.3 Das Eingabeformular zur Erstellung von Events, Teil 2

Sehr nützlich kann bei Events auch eine Änderung des Weiterleitungsziels sein. Hier legen Sie fest, welche Seite bei einem Klick auf den Termin im Kalender aufgerufen werden soll. Standardmäßig ist das die in den Kalender-Einstellungen festgelegte Weiterleitungsseite, aber Sie können hier auch eine interne Seite, einen bestimmten Artikel oder eine externe Seite als Weiterleitungsziel festlegen. So kann ein Klick auf einen Kalendereintrag zum Beispiel direkt auf den Artikel oder die Seite zu einem bestimmten Produkt oder zu einer bestimmten Veranstaltung führen. ToDo: Ein paar Events erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Events. 2. Öffnen Sie den Terminkalender zur Bearbeitung, und erstellen Sie ein Event nach folgendem Muster: Titel: »Das erste Event« Startdatum: ... (Am besten mit dem Datumspicker) Event-Text: Ein bisschen Blindtext Ihrer Wahl 3. Vergessen Sie nicht, den Event zu veröffentlichen. 4. Sie können gerne auch experimentieren und einen Zeitraum angeben, mehrere Events pro Tag speichern oder mehrtägige Events erstellen.

375

14.1

14

Die Erweiterungen »Kalender« und »FAQ«

Schritt 4: »Layout 폷 Themes 폷 Frontend-Module« In diesem Schritt erstellen Sie beiden Frontend-Module, die das HTML für den Kalender und einen einzelnen Termin erzeugen. Das Modul für den Kalender heißt Events – Kalender anzeigen [Kalender]; die Woche beginnt am Montag; und die Weiterleitungsseite heißt Termin anzeigen. Für die Einzelansicht erstellen Sie das Modul Events – Termin anzeigen [Eventleser]. ToDo: Zwei Module zur Ausgabe der Events erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Frontend-Module. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Der Titel ist »Events – Kalender anzeigen«. 4. Wählen Sie aus der Liste Modultyp den Eintrag »Kalender«. 5. Aktivieren Sie den Kalender Terminkalender. 6. Erster Wochentag ist bei uns in der Regel Montag. 7. Als Weiterleitungsseite tragen Sie die in diesem Kapitel erstellte und im Menü versteckte Unterseite Termin anzeigen ein. 8. Klicken Sie auf Speichern und neu. 9. Der Titel des zweiten Moduls ist »Events – Termin anzeigen«. 10. Wählen Sie aus der Liste Modultyp den Eintrag »Eventleser«. 11. Aktivieren Sie den Kalender Terminkalender. 12. Das Event-Template ist »event_full« zur Darstellung des ganzen Events. 13. Klicken Sie auf Speichern und Schliessen.

Jetzt fehlt nur noch wie immer die Einbindung dieser Frontend-Module. Schritt 5: Frontend-Module einbinden in »Inhalte 폷 Artikel« Auf der Seite Kalender binden Sie in dem gleichnamigen Artikel das Modul Events – Kalender anzeigen (ID xx) ein. Im Artikel auf der Unterseite Termin anzeigen binden Sie das Modul Events – Termin anzeigen (ID xx) ein. ToDo: Frontend-Module in Artikeln einbinden 1. Öffnen Sie das Backend-Modul Inhalte 폷 Artikel. 2. Öffnen Sie im Artikelbaum den Artikel Kalender [Hauptspalte] (gelber Bleistift). 3. Falls noch keine h1-Überschrift »Kalender« vorhanden ist, erstellen Sie bitte eine, und zwar mit der CSS-Klasse »seitenanfang«. 4. Fügen Sie darunter ein Inhaltselement vom Typ Modul ein. 5. Wählen Sie aus der Liste Modul den Eintrag Events – Kalender anzeigen (ID xx).

376

Einen Kalender gestalten

ToDo: Frontend-Module in Artikeln einbinden (Forts.) 6.

Klicken Sie auf Speichern und Schliessen.

7. Öffnen Sie im Artikelbaum den Artikel Termin anzeigen [Hauptspalte]. 8. Fügen Sie ein Inhaltselement vom Typ Modul ein. 9. Wählen Sie aus der Liste Modul den Eintrag Events – Termin anzeigen (ID xx). 10. Geben Sie dem Inhaltselement die CSS-Klasse »seitenanfang«. 11. Klicken Sie auf Speichern und Schliessen.

Fertig. Schon haben Sie eine einfache Terminverwaltung. Sie sieht zwar noch nicht genauso aus wie in Abbildung 14.4, aber sie funktioniert bereits.

Abbildung 14.4 Der ungestaltete, aber funktionierende Kalender

14.2

Einen Kalender gestalten

Der Kalender funktioniert bereits, wird aber jetzt noch ein wenig gestaltet. Dazu werfen Sie wie immer zunächst einen Blick auf das HTML.

14.2.1

Das HTML vom Frontend-Modul »Kalender«

Das HTML für einen Kalender wird vom Modul cal_default.tpl erzeugt und kann dort bei Bedarf auch angepasst werden. Umgeben von einem div mit der Klasse mod_calendar, ist der eigentliche Kalender eine HTML-Tabelle mit einem Kopfbereich (thead) und einem Textbereich (tbody).

377

14.2

14

Die Erweiterungen »Kalender« und »FAQ«

Listing 14.2 zeigt zunächst den Kopfbereich des Kalenders.
Listing 14.1

Der Kopfbereich des Kalenders

In der ersten Zeile des Kopfbereichs stehen drei Monatsnamen (th.head). Der aktuelle Monat steht in der Mitte (current), der vorherige als Link ganz links (previous) und der folgende Monat rechts außen (next). In der zweiten Zeile werden die Wochentage aufgelistet (th.label). Das Wochenende ist besonders gekennzeichnet (weekend), um bei der Gestaltung per CSS genügend Ansatzpunkte zu haben. Listing 14.2 zeigt den Textbereich der Tabelle in .
< Juni 2010		Juli 2010			August 2010 >
Montag	Dienstag	Mittwoch	Donnerstag	Freitag	Samstag	Sonntag
	1 378 Einen Kalender gestalten	2 Contao 2.9	3	4	5	6
Listing 14.2

Das HTML für einen Kalender (Ausschnitt)

Im Textbereich wird pro Zeile eine Woche dargestellt (tr.week), und innerhalb der Zeilen ist eine Tabellenzeile ein Tag (td.day). Tage mit Terminen erhalten zusätzlich die Klasse active, und die Termine selbst sind von einem div mit der Klasse event umgeben. Die Klasse cal_1 deutet an, dass der Termin im ersten Kalender steht. So können Sie die Termine bei mehreren Kalendern unterschiedlich gestalten.

14.2.2 Das CSS zum Gestalten eines Kalenders Die Gestaltung eines Kalenders ist nicht wirklich schwierig, aber doch relativ aufwendig, da eine Menge Elemente berücksichtigt werden müssen. Damit Sie bei der Kalendergestaltung nicht im luftleeren Raum beginnen müssen, folgen ein paar Gestaltungsideen, mit denen der Kalender so aussieht wie in Abbildung 14.5.

379

14.2

14

Die Erweiterungen »Kalender« und »FAQ«

Abbildung 14.5 Ein Kalender auf der Beispielsite

Im ersten Style bekommt der Kalender ein sehr helles Grau als Hintergrund und eine Breite von 98 %, damit er immer bequem in den zur Verfügung stehenden Platz passt. /* ====================================== Kalender ====================================== */ table.calendar{ width: 98 %; border-collapse: separate; background-color: #fcfcfc; } Listing 14.3

Das CSS für die Kalendertabelle

Die erste Zeile im Kopfbereich des Kalenders zeigt den vorherigen (th.previous) und den folgenden Monat (th.next). Der aktuelle Monat in der Mitte übernimmt die Gestaltung vom Style für .head. table.calendar .head { font-size: 12px; text-align:center; background-color: #f1f2f3; padding: 6px 0;

380

Einen Kalender gestalten

border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } table.calendar th.previous { text-align: left; padding-left: 3px; border-left: 1px solid #d9d9d9; } table.calendar th.next { text-align: right; padding-right: 3px; border-right: 1px solid #d9d9d9; } table.calendar th a { font-weight: normal; text-decoration: none; color:#333; } table.calendar th a:hover { text-decoration:underline; } Listing 14.4

Das CSS für den Kopfbereich des Kalenders

Die Wochentage in der zweiten Zeile des Kopfbereiches werden durch eine Hintergrundfarbe abgehoben. Das Wochenende wird dabei weniger betont. table.calendar .label { font-size: 12px; font-weight: normal; text-align: center; background-color:#ADCBE6; color:#333; padding: 2px; } table.calendar .weekend { background-color:#f0f0f0; color: #bbb; } Listing 14.5

Das CSS zur Gestaltung der Wochentage

Die einzelnen Tage im Kalender bekommen eine fest definierte Breite und Höhe. Interessant ist die Konstruktion der Gitternetzlinien: Jede Tabellenzelle bekommt rechts und unten eine Linie. Die Linie in der ersten Spalte links wird mit der

381

14.2

14

Die Erweiterungen »Kalender« und »FAQ«

Klasse .col_first erstellt. Der aktuelle Tag kann mit der Klasse .today deutlich hervorgehoben werden. table.calendar td { width: 14 %; height: 7em; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } table.calendar .col_first { border-left: 1px solid #d9d9d9; } table.calendar .header { font-size: 11px; background-color: #e6e6e6; color: #666; padding: 1px; margin: 1px; } table.calendar .today { background-color:#ADCBE6; color: #fff; } Listing 14.6

Das CSS zur Gestaltung der Kalendertage

Fehlen nur noch die Events selbst: table.calendar .event { line-height: 1.1; margin: 3px; } table.calendar .event a { font-size: 11px; text-decoration: none; color: #333; } table.calendar .event a:hover{ text-decoration:underline; } Listing 14.7

382

Das CSS zur Gestaltung der Events

Einen Kalender gestalten

ToDo: Kalender gestalten per CSS 1. Öffnen Sie das Stylesheet bildschirm.css in einem Editor. 2. Fügen Sie am Ende des Stylesheets die Styles zur Gestaltung des Kalenders ein. 3. Speichern Sie das Stylesheet.

14.2.3 HTML und CSS zur Gestaltung der Einzelansicht Ein einzelner Termin wird vom Modultyp Eventleser mithilfe des Modultemplates mod_event.tpl und des Subtemplates event_full.tpl dargestellt.
Contao 2.9 erscheint
02.07.2010
TYPOlight – es war einmal. Heute erscheint Contao 2.9
Listing 14.8

Das HTML für einen einzelnen Termin

Umgeben von einem doppelten div-Element mit den Klassen mod_eventreader bzw. event, wird der Titel des Termins zur h1-Überschrift, und das Datum steht in einem Absatz mit der Klasse info. Der Event-Text erscheint in einem div mit der Klasse ce_text wie ein normales Inhaltselement »Text«. Beim CSS liegt die Besonderheit darin, dass die h1-Überschrift keinen oberen Außenabstand haben soll, da sie am Seitenanfang steht. Zu diesem Zweck wurde die Klasse seitenanfang vergeben, und zwar nicht an das Modul Termin anzeigen [Eventleser], sondern im Artikel an das Inhaltselement, in das das Modul eingebunden wird. Im CSS greift dann die folgende Regel aus dem Stylesheet bildschirm.css: h1.seitenanfang, div.seitenanfang h1 { line-height: 1; margin-top: 0; } Listing 14.9

Die CSS-Regel für die Überschrift am Seitenanfang

»Minikalender« und »Nächste Termine« kommen auf die Startseite In Kapitel 16, »Die Startseite gestalten«, lernen Sie noch zwei andere Möglichkeiten kennen, Termine auf Webseiten darzustellen: den Minikalender und eine Liste der nächsten Termine.

383

14.2

14

Die Erweiterungen »Kalender« und »FAQ«

14.3

Häufig gestellte Fragen: Die FAQ-Erweiterung

FAQ steht für »Frequently Asked Questions« und wird im Deutschen entweder als ein Wort ausgesprochen (»fak«) oder alle Buchstaben einzeln (»eff-ah-kuh«). Im Englischen wird es »eff-ei-kju« gesprochen. In einer FAQ gibt es meist verschiedene Kategorien mit mehr oder weniger Fragen. Ein Klick auf eine Frage ruft eine neue Seite mit der entsprechenden Antwort auf.

Abbildung 14.6 Die FAQ-Liste und eine Antwort in der Detailansicht

14.3.1 Die Kurzanleitung für die FAQ-Erweiterung Die FAQ-Erweiterung funktioniert ähnlich wie die Kalender-Erweiterung, ist aber etwas simpler. Sie besteht aus dem Backend-Modul FAQ, zwei Frontend-Modulen und zwei Modultemplates. Die Lagerhalle heißt nicht Kalender, sondern Kategorie, und die Einträge darin sind keine Events, sondern einfach nur Fragen. Ansonsten sind es dieselben vier Schritte bis zur Beispielseite: 왘

Schritt 1: »Layout 폷 Seitenstruktur« Sie benötigen zwei Seiten. Auf der bereits vorhandenen Seite Erweiterungen > FAQ werden die Fragen dargestellt, auf der im Menü versteckten Unterseite Antwort anzeigen die einzelnen Antworten. Diese versteckte Unterseite muss noch erstellt werden.

왘

Schritt 2: Inhalte 폷 FAQ Im Backend-Modul FAQ erstellen Sie eine neue Kategorie mit dem Titel und der Überschrift »Fragen zur Installation«, in der Sie am besten auch gleich ein paar Fragen und Antworten erstellen. Als Weiterleitungsseite tragen Sie die versteckte Unterseite »Antwort anzeigen« ein.

384

Häufig gestellte Fragen: Die FAQ-Erweiterung

왘

Schritt 3: Layout 폷 Themes 폷 Frontend-Module Hier erstellen Sie die zwei Module: FAQ – Fragen anzeigen [FAQ-Liste] für die Listenansicht mit einer h1-Überschrift »Häufig gestellte Fragen« und FAQ – Antwort anzeigen [FAQ-Leser] für die Einzelansicht. Bei beiden Modulen aktivieren Sie im Bereich Modul-Konfiguration die Kategorie Fragen zur Installation.

왘

Schritt 4: Inhalte 폷 Artikel Auf der Seite FAQ fügen Sie dem gleichnamigen Artikel ein Inhaltselement vom Typ Modul hinzu und wählen das Modul FAQ – Fragen anzeigen (ID xx) aus. Im Artikel auf der Unterseite Antwort anzeigen binden Sie das Modul FAQ – Antwort anzeigen (ID xx) ein. Beide Inhaltselemente sollten die CSS-Klasse seitenanfang bekommen.

Erstellen Sie zu Testzwecken noch eine zweite Kategorie, »Alltagsprobleme«, mit ein paar Fragen und Antworten dazu. Vergessen Sie nicht, die neue Kategorie in den beiden Frontend-Modulen anzukreuzen, damit sie auf der Seite Erweiterungen – FAQ angezeigt wird. Um die Reihenfolge festzulegen, in der die Kategorien auf der Fragen-Seite angezeigt werden, öffnen Sie das Modul FAQ – Fragen anzeigen [FAQ-Liste]. Ändern Sie dort im Bereich Modul-Konfiguration mit den grünen Pfeilen nach oben bzw. unten die Reihenfolge der Kategorien.

Abbildung 14.7 Die FAQ-Liste mit zwei Kategorien

385

14.3

14

Die Erweiterungen »Kalender« und »FAQ«

Ich habe mein Admin-Passwort vergessen In Abbildung 14.7 sehen Sie die Frage »Ich habe mein Admin-Passwort vergessen«. Damit Sie nicht erst die FAQ-Seite aufrufen müssen, um die Antwort auf diese Frage zu erfahren, hier der Link zur Antwort: 왘

Ich habe mein Administrator-Passwort vergessen http://bit.ly/bsz1zb

Sie benötigen dazu einen Zugang zur Datenbank, z. B. mit phpMyAdmin.

14.3.2 Die FAQ-Erweiterung gestalten Die Gestaltung einer FAQ-Seite ist im Gegensatz zum Kalender sehr einfach, denn eine FAQ besteht nur aus Überschriften, Listen und Absätzen: 왘

Fragen und Kategorien sind von einem div mit der Klasse mod_faqlist umgeben. Die Kategorien sind h2-Überschriften, und die Fragen sind eine ungeordnete Liste mit Links darin.

왘

Auf der Antwortseite stehen Frage und Antwort in einem div mit der Klasse mod_faqreader. Die Frage wird zu einer h1-Überschrift, und die Antwort ist ein div mit der Klasse ce_text. Das Aktualisierungsdatum unterhalb der Antwort steht in einem p mit der Klasse info.

Die Seite mit der Antwort auf die Frage braucht eigentlich keine zusätzlichen Styles, und um die Fragenliste aus Abbildung 14.7 zu gestalten, reichen wenige Styles. .mod_faqlist li { list-style-type: none; padding: 0; margin: 0.5em 0; } .mod_faqlist a { text-decoration: none; } .mod_faqlist a:hover { text-decoration: underline; } Listing 14.10

Die Gestaltung der FAQ-Liste

Und denken Sie daran: Wenn Sie auf Ihrer Site keine FAQ-Liste einsetzen, können Sie das Backend-Modul auch ausblenden: Setzen Sie in System 폷 Einstellungen im Bereich Inaktive Erweiterungen das Kreuz an die richtige Stelle, und speichern Sie.

386

Häufig gestellte Fragen: Die FAQ-Erweiterung

Alternative: Akkordeon statt FAQ Ein nicht zu unterschätzender Vorteil der FAQ-Erweiterung ist die einfache Verwaltung der Fragen und Antworten im Backend-Modul FAQ. Nachteilig hingegen ist, dass für jede Antwort eine neue Seite geladen werden muss. Um das zu vermeiden, kann man eine FAQ-Liste auch mit normalen Artikeln und dem Inhaltselement Akkordeon (siehe Abschnitt 10.2) erstellen: 왘

Als FAQ-Kategorie gibt es dann ein Inhaltselement »Überschrift«.

왘

Die Frage wird eine anklickbare Bereichsüberschrift im Akkordeon.

왘

Die Antwort steht im ausgeblendeten Bereich des Akkordeons.

Bei einem Akkordeon erscheint die Antwort wie im FAQ-Modul bei einem Klick auf die Frage, aber ohne dass eine neue Seite geladen werden muss. Ein Besucher kann sich schneller durch Fragen und Antworten klicken, weil er nicht jedes Mal auf eine neue Seite warten muss. Welcher Weg der bessere ist, hängt wie so oft von den verschiedensten Umständen ab.

387

14.3

In diesem Kapitel erfahren Sie, wie Sie mit Contao ein komplettes Newsletter-System auf die Beine stellein – inklusive Darstellung der Newsletter auf der Website und automatischer An- und Abmeldung.

15

Die Erweiterung »Newsletter«

Die Newsletter-Erweiterung besteht aus dem Backend-Modul Newsletter, vier Frontend-Modulen sowie diversen Modul- und Subtemplates. Sie dient dazu, einen Newsletter per Mail an diverse Empfänger zu versenden.

Abbildung 15.1 Die Seite »Newsletter« – lesen, abonnieren und kündigen

389

15

Die Erweiterung »Newsletter«

Mit dem Backend-Modul Newsletter können Sie einen Newsletter betreiben, ohne dass dieser überhaupt auf der Website auftaucht. Die vier Frontend-Module bieten zusätzlich die Möglichkeit zur Darstellung bereits verschickter Newsletter auf der Website und zum automatisierten Abonnieren und Kündigen des Newsletters. Über das Anbieten eines Newsletters Aus technischer Sicht sollte es nach der Lektüre dieses Kapitels kein Problem mehr sein, einen Newsletter zu betreiben. Bevor Sie aber auf Ihrer Website wirklich einen Newsletter anbieten, sollten Sie auch die inhaltliche Seite bedenken: Gibt es genügend interessante Informationen, um regelmäßig einen lesenswerten Newsletter zusammenzustellen? Ist genügend Zeit vorhanden, um die Inhalte redaktionell aufzubereiten? Die Abonnenten sollen den Newsletter als Bereicherung empfinden, und nicht als Belästigung. Kein Newsletter ist also besser als ein schlechter Newsletter.

15.1

Das Backend-Modul »Newsletter«

Die Verwaltungszentrale der Newsletter-Erweiterung ist das Backend-Modul Newsletter. Dort richten Sie sogenannte Verteiler ein, die aus den eigentlichen Newslettern und einer Liste der als Abonnenten bezeichneten Empfänger bestehen. In einer Firma könnte zum Beispiel jede Abteilung einen Verteiler einrichten, mit dem sie dann Newsletter an ihre Abonnenten verschicken kann. Mit Newsletter meint Contao in diesem Zusammenhang den zu verschickenden Text in den Formaten HTML oder Nur-Text. Ein Newsletter wird im Backend erstellt und als Mail verschickt. Abonnenten sind die Empfänger des Newsletters.

15.1.1

Einen Verteiler erstellen

Bei der Erstellung eines neuen Verteilers im folgenden ToDo gibt es nur drei Einstellungsmöglichkeiten, von denen zwei auch noch unverändert bleiben.

Abbildung 15.2 Eingabeformular zur Erstellung eines Verteilers

390

Das Backend-Modul »Newsletter«

Der Titel wird nur in der Backend-Übersicht verwendet. Die Weiterleitungsseite legt fest, zu welcher Seite ein Benutzer beim Anklicken eines Links im FrontendModul Newsletterliste weitergeleitet wird. Solange Sie das Modul nicht nutzen, benötigen Sie keine Weiterleitungsseite. Und wenn Sie nicht speziell für den Newsletter einen eigenen SMTP-Server angeben möchten, können Sie auch diese Option unverändert lassen. ToDo: Einen neuen Verteiler erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Newsletter. 2. Klicken Sie rechts oben im Arbeitsbereich auf Neuer Verteiler. 3. Geben Sie als titel »Verteiler – Beispielsite« ein. 4. Lassen Sie die Bereiche Weiterleitungsseite und SMTP-Server unverändert. 5. Klicken Sie auf Speichern und Schliessen.

Nach diesem ToDo erscheint im Backend-Modul Newsletter ein Verteiler (Abbildung 15.3).

Abbildung 15.3 Das Backend-Modul Newsletter

Die Symbole sind weitgehend bekannt. Neu ist nur ganz rechts außen das Symbol zum Bearbeiten der Abonnenten.

15.1.2

Abonennten verwalten: Die Empfänger des Newsletters

Um einen Newsletter verschicken zu können, benötigen Sie mindestens einen Abonnenten, den Sie im folgenden ToDo hinzufügen.

391

15.1

15

Die Erweiterung »Newsletter«

ToDo: »Abonnenten hinzufügen« erstellen 1. Öffnen Sie das Backend-Modul Inhalte 폷 Newsletter. 2. Klicken Sie in der Zeile Verteiler – Beispielsite ganz rechts auf das Symbol Abonnenten bearbeiten. 3. Klicken Sie oben im Arbeitsbereich auf Abonnenten hinzufügen. 4. Geben Sie eine E-Mail-Adresse ein, die Sie selbst abrufen können. 5. Kreuzen Sie das Kontrollkästchen Abonnenten aktivieren an. 6. Falls Sie noch mehr Mailadressen abrufen können, können Sie gerne noch ein paar mehr eingeben. Das macht die Sache realistischer. 7. Klicken Sie auf Speichern und Schliessen.

Eine im Verteiler von Ihnen eingegebene E-Mail-Adresse bekommt den Zusatz (manuell hinzugefügt). Bei Abonnenten, die den Newsletter mit dem weiter unten vorgestellten Frontend-Modul selbst abonniert haben, erscheint hier die Zeit der Registrierung. Empfänger per CSV-Import Falls Sie schon einen Newsletter mit einem E-Mail-Programm verschicken und die Empfänger in dessen Adressbuch gespeichert haben, können Sie die die Adressen als CSVDatei speichern und importieren. Bei zum Beispiel tausend Empfängern ist das sehr viel bequemer, als alle abzutippen.

15.1.3

Einen Newsletter erstellen

Nachdem Sie mindestens einen Empfänger eingetragen haben, können Sie jetzt einen Newsletter erstellen. Bei der Erstellung eines Newsletters geben Sie den Inhalt des Newsletters einmal als HTML und einmal als Text ein. Welchen Inhalt ein Abonnent zu sehen bekommt, hängt von den Einstellungen in seinem E-MailProgramm ab. ToDo: Einen Newsletter erstellen 1. Öffnen Sie das Backend-Modul Newsletter. 2. Klicken Sie rechts neben Verteiler – Beispielsite auf den gelben Bleistift, um den Verteiler zu bearbeiten. 3. Klicken Sie oben im Arbeitsbereich auf den Link Neuer Newsletter. 4. Geben Sie einen Betreff ein, z. B. »Der Newsletter für den Monat Juli«. 5. Geben Sie in den Feldern HTML-Inhalt und Text-Inhalt ein bisschen Blindtext ein. Den HTML-Inhalt können Sie noch etwas formatieren. 6. Verschicken Sie keine Dateianhänge.

392

Das Backend-Modul »Newsletter«

ToDo: Einen Newsletter erstellen (Forts.) 7. Bei den Template-Einstellungen soll das Template »mail_default« ausgewählt sein. 8. Geben Sie bei Bedarf Absendername und Absenderadresse ein. Wenn Sie das Feld leer lassen, wird die Mailadresse des Administrators verwendet. 9. Klicken Sie auf Speichern und Schliessen.

Nach dem Speichern erscheint der Newsletter in der Übersichtsliste mit einem roten Betreff und mit dem Zusatz Noch nicht gesendet. Ganz rechts sehen Sie einen Briefumschlag mit einer Weltkugel, das Symbol zum Versenden des Newsletters.

Abbildung 15.4 Der noch nicht gesendete Newsletter

Beim Layouten von HTML-Newslettern sollten Sie berücksichtigen, dass Mailprogramme CSS-basierte Layouts oft mehr schlecht als recht darstellen. Outlook 2007 zum Beispiel nutzt zur Darstellung von HTML-Mails nicht einen Browser, sondern MS Word. Kein Witz. Und Word beherrscht CSS nicht besonders gut. Am besten beschränken Sie sich zunächst auf einfache Zeichenformatierungen und geben in der HTML-Version immer einen Link auf eine Online-Version des Newsletters an. Dann kann der Empfänger den Newsletter notfalls online lesen, falls er im Mailprogramm unleserlich sein sollte. Falls Sie nur die Textversion verschicken möchten, aktivieren Sie für den Newsletter im Bereich Experten-Einstellungen die Option als Text versenden.

15.1.4 Einen Newsletter versenden Wenn Sie mindestens einen Empfänger und ein bisschen Blindtext als HTML und Text haben, wird es Zeit zum Testen. Sollten Sie die Beispielsite auf einem Offline-Webspace entwickeln, gelten die gleichen Anmerkungen wie beim Testen des Kontaktformulars in Kapitel 11 ab Seite 299, da auf localhost in der Regel kein

393

15.1

15

Die Erweiterung »Newsletter«

SMTP-Server zum Verschicken von Mails zur Verfügung steht. Nach einem Klick auf das Symbol für Newsletter versenden (siehe Abbildung 15.4) sehen Sie eine Vorschau auf den Newsletter (Abbildung 15.5)

Abbildung 15.5 Der Newsletter – fertig zum Verschicken

Ganz oben sehen Sie den Newletter in der HTML-Version, direkt darunter die Textversion. Unterhalb des Newsletters sehen Sie einige Optionen, die beim Verschicken eines Newsletters an eine große Anzahl Abonnenten sehr nützlich sein können, um den Mailserver nicht zu überfordern. In Mails pro Zyklus legen Sie fest, wie viele Mails in einem Rutsch verschickt werden, und zwischen den Zyklen können Sie eine Wartezeit in Sekunden festlegen. Bevor Sie den Newsletter versenden, sollten Sie die Möglichkeit einer Testsendung nutzen. Tragen Sie im Feld Testsendung an eine beliebige Mailadresse ein, auf die Sie Zugriff haben, und klicken Sie links unten auf die Schaltfläche Testsendung. Dadurch wird der Newsletter nur an diese eine Testadresse geschickt. Nach dem Verschicken erscheint oberhalb des Newsletters eine Meldung und Sie können das E-Mail-Postfach überprüfen, ob alles gut angekommen ist. Falls dem so ist, können Sie mit dem Klick den Newsletter versenden.

394

Newsletter im Frontend anzeigen

Abbildung 15.6 Der Newsletter in der Übersicht nach dem Versenden

In der Übersicht der Newsletter erscheint der Betreff nach dem Versenden in Grün, und der Hinweis Noch nicht gesendet wurde durch Gesendet am … ersetzt.

15.2

Newsletter im Frontend anzeigen

Mit dem Backend-Modul Newsletter können Sie, wie Sie oben gesehen haben, einen Newsletter betreiben, der auf der Website selbst nicht auftaucht. Zur Newsletter-Erweiterung gehören aber auch noch ein paar Frontend-Module, um zum Beispiel bereits verschickte Newsletter auf der Website anzuzeigen.

Abbildung 15.7 Newsletter als Liste und als Einzelansicht

Auf der Seite Newsletter erscheint dann eine Liste mit bereits verschickten Newslettern. Ein Klick auf einen Link zeigt den kompletten Newsletter.

395

15.2

15

Die Erweiterung »Newsletter«

15.2.1

Die Kurzanleitung zur Darstellung der Newsletter auf der Site

Die folgenden vier Schritte sind notwendig, um die Newsletter auf der Website auszugeben: 왘

Schritt 1: Layout 폷 Seitenstruktur Auf der bereits vorhandenen Seite Erweiterungen > Newsletter wird eine Liste der verschickten Newsletter angezeigt. Es fehlen noch eine Überschrift und ein bisschen Text wie in Abbildung 15.1.

Auf der im Menü versteckten Unterseite Newsletter anzeigen erscheint die Einzelansicht eines Newsletters. Die versteckte Unterseite müssen Sie noch erstellen. 왘

Schritt 2: Inhalte 폷 Newsletter Im Backend-Modul Newsletter tragen Sie im Verteiler – Beispielsite die in Schritt 1 erstellte Unterseite Newsletter anzeigen als Weiterleitungsseite ein.

왘

Schritt 3: Layout 폷 Themes 폷 Frontend-Module Erstellen Sie die Module Newsletterliste anzeigen (Typ Newsletterliste) für die Listenansicht und Newsletter anzeigen (Typ Newsletterleser) für die Einzelansicht. In beiden Modulen aktivieren Sie im Bereich Modul-Konfiguration den Verteiler – Beispielsite.

왘

Schritt 4: Inhalte 폷 Artikel Im Artikelbaum binden Sie im Artikel Newsletter [Hauptspalte] das Modul Newsletterliste anzeigen (ID xx) ein, auf der Unterseite Newsletter anzeigen das Modul Newsletter anzeigen (ID xx), mit der CSS-Klasse seitenanfang.

Fertig. Auf der Seite Newsletter erscheint eine Liste der verschickten Newsletter. Falls nicht, denken Sie daran, dass nur verschickte Newsletter hier aufgelistet werden. Eine Testsendung reicht dazu nicht aus. Ein Klick auf einen Link in der Liste zeigt den betreffenden Newsletter in der Einzelansicht.

15.2.2 Das HTML der Frontend-Module zur Newsletterdarstellung Die Liste der Newsletter wird vom Modultyp Newsletterliste erzeugt und ist im Quelltext eine einfache Linkliste, umgeben von einem div mit der Klasse mod_nl_list (Listing 15.1). Das HTML wird vom Modultemplate mod_newsletter_list.tpl erzeugt.
• Der Newsletter ...
• Der Newsletter ...
Listing 15.1

396

Das HTML des Modultyps »Newsletterliste«

Newsletter im Frontend abonnieren und kündigen

Der Quelltext für die Einzelansicht eines Newsletters ist nicht sehr viel komplizierter und wird vom Modultemplate mod_newsletter_reader.tpl generiert (Listing 15.2).
Der Newsletter für den Monat Juli
Lorem ipsum ...
Zurück
Listing 15.2

Das HTML des Modultyps »Newsletterleser«

Umgeben von einem div mit der Klasse mod_nl_reader, erscheint der Titel des Newsletters als h1-Überschrift und der Text in einem div.newsletter. Newsletter auf der Website mit »newsletter.css« gestalten Wenn es im Backendbereich Layout 폷 Themes 폷 Stylesheets ein internes Stylesheet namens newsletter gibt, kann dieses automatisch zur Gestaltung eines Newsletters im Frontend genutzt werden. Aktivieren Sie dazu im Modul Newsletter anzeigen die Option Stylesheet parsen.

15.3

Newsletter im Frontend abonnieren und kündigen

Wenn Sie einen Newsletter mit einem geschlossenen Benutzerkreis betreiben und die Abonnenten im Backend manuell eintragen und aktivieren, sind die Frontend-Module Abonnieren und Kündigen nicht nötig. Für einen öffentlichen, auf der Website angebotenen Newsletter, ermöglichen die beiden Module eine automatische Verwaltung der Newsletter-Abonnements, sodass Sie als Administrator im Idealfall gar nicht mehr eingreifen müssen. Das Ziel dieses Abschnitts ist es, dass auf der Newsletter-Seite zwei kleine Formulare zum Abonnieren und zum Kündigen des Newsletters erscheinen.

397

15.3

15

Die Erweiterung »Newsletter«

Abbildung 15.8

Abonnieren und Kündigen des Newsletters im Frontend

»Double Opt-In« für die Anmeldung zum Newsletter Contao verwendet für das automatische Newsletter-Abonnement das sogenannte Double Opt-In-Verfahren, was man etwa mit »zweifache Bestätigung« übersetzen könnte. Zuerst gibt der Abonnent seine Mailadresse ein und klickt auf Abonnieren. Das ist das erste Opt-In. Contao trägt die Mailadresse daraufhin im entsprechenden Verteiler ein und schickt dem Abonnenten eine E-Mail mit einem Bestätigungslink. Der Klick auf den Bestätigungslink ist das zweite Opt-In. Erst jetzt aktiviert Contao die Mailadresse im Verteiler.

15.3.1

Die Kurzanleitung zum Abonnieren und Kündigen

Um auch den Besuchern der Website die Möglichkeit zum Abonnieren und zum Kündigen des Newsletter zu geben, müssen Sie nur die folgenden Schritte abarbeiten: 왘

Schritt 1: Layout 폷 Seitenstruktur Sie benötigen zwei neue, im Menü versteckte Unterseiten zur Seite Newsletter mit den Namen Newsletter abonniert und Newsletter gekündigt, auf denen in Schritt 4 eine kurze Mitteilung an den Besucher erstellt wird.

왘

Schritt 2: Layout 폷 Themes 폷 Frontend-Module Erstellen Sie die zwei Module Newsletter abonnieren (Modultyp Abonnieren) und Newsletter kündigen (Modultyp Kündigen).

398

Newsletter im Frontend abonnieren und kündigen

Bei beiden Modulen aktivieren Sie im Bereich Modul-Konfiguration den Verteiler – Beispielsite und blenden das Verteiler-Menü aus, da es nur einen Verteiler gibt. Als Weiterleitungsseite tragen Sie die in Schritt 1 erstellten Unterseiten Newsletter abonniert bzw. Newsletter gekündigt ein. Den Bestätigungstext für das Abonnement bzw. die Kündigung können Sie unverändert übernehmen. 왘

Schritt 3: Inhalte 폷 Artikel 폷 Seite »Newsletter« Binden Sie auf der bereits vorhandenen Seite Newsletter im Artikel in der Hauptspalte unterhalb der Newsletterliste die beiden Frontend-Module Newsletter abonnieren (ID xx) und Newsletter kündigen (ID xx) ein. Beispiele für begleitende Überschriften und Texte finden Sie auf Abbildung 15.1.

왘

Schritt 4: Inhalte 폷 Artikel 폷 Im Menü versteckte Unterseiten Auf der Unterseite Newsletter abonniert bedanken Sie sich für das Abonnement und weisen daraufhin, wie das Abo im Bedarfsfall wieder gekündigt werden kann. Auf der Unterseite Newsletter gekündigt bestätigen Sie die erfolgreiche Kündigung und drücken Ihr Bedauern aus.

Fertig. Schon haben Sie eine funktionierende Abonnement-Verwaltung für Ihren Newsletter. Probieren Sie es auf jeden Fall einmal aus. Im Newsletter einen Link auf die Kündigungsseite setzen Es gehört zum guten Ton eines seriösen Newsletters, am Ende des Newsletters einen Link zum Kündigen anzubieten. Das können Sie mithilfe von Insert-Tags tun. In der Textversion geht das sehr einfach: 왘

Newsletter kündigen: {{link::22}}

Statt der »22« nehmen Sie die ID (oder auch den Alias) der Seite, auf der bei Ihnen das Modul Kündigen eingebunden ist. Für die HTML-Version geht das so: 왘

Schreiben Sie »Newsletter kündigen« hin, und markieren Sie diesen Eintrag.

왘

Erstellen Sie einen Hyperlink, indem Sie auf das Kettensymbol klicken.

왘

Tragen Sie im Feld Adresse {{link_url::22}} ein.

Eine vollständige Übersicht der Insert-Tags finden Sie ab Seite 523.

15.3.2 Das HTML der Frontend-Module »Abonnieren« und »Kündigen« Das HTML-Formular zum Abonnieren des Newsletters hat die ID tl_subscribe und ist umgeben von einem div mit der Klasse mod_subscribe. Außer einem versteckten Formularfeld und einem unsichtbaren Label, die beide nicht gestaltet werden müssen, gibt es keinerlei Besonderheiten zu vermelden (Listing 15.3).

399

15.3

15

Die Erweiterung »Newsletter«


E-Mail-Adresse
Listing 15.3

Das HTML zum Abonnieren eines Newsletters

Das HTML-Formular zum Kündigen des Newsletters ist nicht überraschend recht ähnlich. Das umgebende div hat die Klasse mod_unsubscribe (Listing 15.4) und das Formular die ID tl_unsubscribe.
E-Mail-Adresse
Listing 15.4

400

Das HTML zum Kündigen eines Newsletters

In diesem Kapitel geben Sie der Startseite ein eigenes Seitenlayout und füllen sie mit Inhalten, die fast alle aus den bereits erstellten Modulen stammen.

16

Die Startseite gestalten

In den letzten Kapiteln haben Sie nach und nach die Backend-Module aus dem Bereich Inhalte kennen- und anwenden gelernt. Anhand der Gestaltung der Startseite setzen Sie in diesem Kapitel das bisher Erlernte sinnvoll ein. Abbildung 16.1 zeigt die Startseite vor und nach diesem Kapitel.

Abbildung 16.1 Die Startseite – vorher und nachher

Eine wichtige Aufgabe der Startseite ist es, Besuchern einen Überblick über die auf der Site vorhandenen Inhalte zu geben. Dazu bekommt die Startseite zunächst ein eigenes, zweispaltiges Seitenlayout und einen einleitenden Artikel mit Teaser. Danach füllen Sie die Startseite durch »kreatives Anzapfen« der bereits erstellten Inhalte, sodass ein Besucher auf den ersten Blick sieht, was auf der Site so alles neu ist: 왘

In der Hauptspalte erscheinen die letzten Beiträge aus Nachrichten und die nächsten Termine aus dem Kalender.

왘

In der rechten Spalte ist Platz für ein paar Lesetipps (Quicklink), ein zufällig gewähltes Bild (Zufallsbild), einen Minikalender und das Abonnieren des Newsletters.

401

16

Die Startseite gestalten

Dieses Kapitel soll als Anregung dienen und zeigen, wie man die Startseite gestalten und dabei bereits gespeicherte Informationen mit wenig Aufwand wiederverwenden könnte. Viel Spaß dabei.

16.1

Ein neues Layout für die Startseite

Bis jetzt beruhen fast alle Seiten der Beispielsite auf dem Seitenlayout mit dem schönen Namen Standardlayout [Standard]. In diesem Abschnitt erstellen Sie ein zweispaltiges Seitenlayout namens Startseite, das Sie anschließend nur der Startseite zuweisen. Zunächst kopieren Sie im folgenden ToDo das vorhandene Seitenlayout und passen die Kopie an die Bedürfnisse der Startseite an. ToDo: Ein Seitenlayout für die Startseite erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Seitenlayouts. 2. Erstellen Sie eine Kopie des Standardlayouts, indem Sie rechts daneben auf das grüne Kreuz klicken (zweites Symbol von links). 3. Fügen Sie die Kopie mit einem Klick auf das braune, blinkende Symbol mit dem Pfeil etwas weiter oben ein. 4. Ändern Sie den Titel in »Startseite«. 5. Aktivieren Sie im Bereich Spaltenkonfiguration das dritte Symbol von links: Hauptspalte und rechte Spalte. Die Breite der rechten Spalte soll bei 182px bleiben. 6. Da auf der Startseite kein Akkordeon eingesetzt wird, können Sie das MooToolsTemplate moo_accordion_active deaktivieren. Falls Sie später eines einbauen, denken Sie daran, das Template wieder zu aktivieren. 7. Klicken Sie auf Speichern und Schliessen.

Damit ist das Seitenlayout erstellt. Jetzt müssen Sie Contao mitteilen, dass dieses Seitenlayout zur Gestaltung der Startseite verwendet werden soll, und das geschieht im Backend-Modul Seitenstruktur. ToDo: Das Seitenlayout der Startseite zuweisen 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Öffnen Sie die Startseite zur Bearbeitung (gelber Bleistift). 3. Aktivieren Sie im Bereich Layout-Einstellungen das Kontrollkästchen vor Ein Layout zuweisen. 4. Wählen Sie aus der Liste Seitenlayout den Eintrag Blaues Theme – Startseite. 5. Vergeben Sie im Bereich Experten-Einstellungen noch die CSS-Klasse startseite. 6. Klicken Sie auf Speichern und Schliessen.

402

Inhalt für die Hauptspalte: Newsbeiträge und Termine

Im Browser hat sich die Startseite bis jetzt nur wenig geändert, aber im Quelltext sind die div-Elemente für die linke Spalte spurlos verschwunden.

Abbildung 16.2 Die Startseite mit einem zweispaltigen Seitenlayout

Die im ToDo vergebene CSS-Klasse startseite erscheint im Quelltext im Anfangs-Tag von body:

Dadurch wird es sehr einfach, Elemente per CSS nur auf der Startseite zu gestalten. Sie beginnen die Styles einfach mit dem Selektor .startseite.

16.2

Inhalt für die Hauptspalte: Newsbeiträge und Termine

Unterhalb des bestehenden Artikels mit der Überschrift »Willkommen auf der Beispielsite« und den zwei Absätzen Blindtext darunter sollen in einem eigenen Artikel die letzten Newsbeiträge, die nächsten Termine und noch ein bisschen Fließtext erscheinen. Für die Newsbeiträge und die Termine benötigen Sie jeweils ein Frontend-Modul, die in diesem Artikel wie immer mit dem Inhaltselement vom Typ Modul eingebunden werden.

403

16.2

16

Die Startseite gestalten

16.2.1

Die Frontend-Module erstellen

Zunächst erstellen Sie die beiden Frontend-Module zur Darstellung der letzten drei Newsbeiträge und der nächsten drei Termine. Bevor Sie die Module erstellen, schauen Sie kurz nach, ob im Newsarchiv minimal drei Beiträge und im Terminkalender mindestens drei in der Zukunft liegende Termine vorhanden sind. Wenn nicht, erstellen Sie schnell ein paar, denn sonst wird nach dem ToDo nichts dargestellt, obwohl Sie alles richtig gemacht haben. ToDo: Frontend-Modul für die neuesten Newsbeiträge erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Module. 2. Klicken Sie rechts oben im Arbeitsbereich auf Neues Modul. 3. Vergeben Sie den Titel »Startseite – Die neuesten Nachrichten« und die folgenden Einstellungen: Überschrift (h2): »Die neuesten Nachrichten« Modultyp: Nachrichtenliste Archiv: Newsarchiv Gesamtzahl der Beiträge: 3 Hervorgehobene Beiträge: Alle Beiträge anzeigen Meta-Felder: Nur Datum Nachrichtentemplate news_simple 4. Klicken Sie auf Speichern und neu. 5. Das zweite Modul heißt Startseite – Nächste Termine anzeigen. Überschrift (h2): »Die nächsten Termine« Modultyp: Eventliste Kalender: Terminkalender Verkürzte Darstellung: ankreuzen Anzeigeformat: Alle zukünftigen Events Anzahl an Events: 3 Event-Template: event_upcoming 6. Klicken Sie auf Speichern und Schliessen.

16.2.2 Die Frontend-Module auf der Startseite einbinden Die Frontend-Module existieren und werden in diesem Abschnitt in einem eigenen Artikel auf der Startseite eingebunden. Unterhalb der beiden Module fügen Sie noch ein Inhaltselement Text mit ein bisschen Blindtext ein. ToDo: Frontend-Module in einem neuen Artikel einbinden 1. Öffnen Sie das Backend-Modul Artikel. 2. Klicken Sie oben im Arbeitsbereich auf Neuer Artikel, und fügen Sie unterhalb des Artikels Startseite [Hauptspalte] ein:

404

Inhalt für die Hauptspalte: Newsbeiträge und Termine

ToDo: Frontend-Module in einem neuen Artikel einbinden (Forts.) Titel: »Startseite – Inhalte« Anzeigen in: Hauptspalte Artikel veröffentlichen: ankreuzen

3. Klicken Sie auf Speichern und Schliessen. 4. Öffnen Sie den Artikel zur Bearbeitung (gelber Bleistift). 5. Fügen Sie ein Inhaltselement vom Typ Modul hinzu, und wählen Sie als Modul Startseite – Die neuesten Nachrichten (ID xx). 6. Klicken Sie auf Speichern und neu. 7. Das zweite Inhaltselement ist auch vom Typ Modul. Wählen Sie als Modul Startseite – Nächste Termine anzeigen (ID xx). 8. Klicken Sie auf Speichern und neu. 9. Das dritte Inhaltselement ist vom Typ Text. Überschrift (h2): »Und noch ein bisschen Text« Text: Zwei Absätze Blindtext von der Sorte Lorem ipsum. 10. Klicken Sie auf Speichern und Schliessen.

Die Startseite sieht danach im Browser so aus wie in Abbildung 16.3 und hat akuten Gestaltungsbedarf.

Abbildung 16.3 Die Startseite mit frischem Inhalt, aber noch ungestaltet

405

16.2

16

Die Startseite gestalten

16.2.3 Newsbeiträge und Termine gestalten Die beiden Module zur Gestaltung von Newsbeiträgen und Terminen sollen auf der Startseite nebeneinander stehen, und dazu werden sie am einfachsten gefloatet. Da das Inhaltselement Text unterhalb der beiden Module auch nach dem Floaten unterhalb der beiden Module stehen soll, muss es gecleart werden. Das geht am einfachsten mit einem zusätzlichen Inhaltselement HTML, in dem nur eine Zeile steht:
.

Damit wird ein Zeilenumbruch mit der Klasse clear eingefügt, die im Stylesheet contao.css definiert wird (siehe Abschnitt 7.10, »Know-how: Das CSS-Framework von Contao«, ab Seite 190). ToDo: Newsbeiträge und Termine floaten und clearen 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie den Artikel Startseite – Inhalte zur Bearbeitung (gelber Bleistift). 3. Öffnen Sie nacheinander die beiden Inhaltselemente vom Typ Modul, und fügen Sie jeweils die CSS-Klasse float_element hinzu. Die gibt es noch nicht, aber sie kommt gleich an die Reihe. 4. Erstellen Sie zwischen den Inhaltselementen Die nächsten Termine und Und noch ein bisschen Text ein neues Inhaltselement vom Typ HTML. 5. Geben Sie die Zeile
ein. 6. Speichern und Schliessen Sie das Inhaltselement.

Damit sind die Inhaltselemente so weit vorbereitet, und es wird Zeit für das Styling. Im folgenden ToDo floaten Sie die beiden News- und Event-Elemente und geben ihnen eine Hintergrundgrafik mit einem leichten, grauen Farbverlauf und dem schönen Namen graydient.jpg. ToDo: Die Newsbeiträge und Termine gestalten 1. Öffnen Sie das Stylesheet bildschirm.css im Editor, und geben Sie am Ende der Styles folgenden Kommentar ein: /* ====================================== Startseite gestalten ====================================== */

406

Inhalt für die Hauptspalte: Newsbeiträge und Termine

ToDo: Die Newsbeiträge und Termine gestalten (Forts.) 2. Mit dem folgenden Style floaten und gestalten Sie Elemente auf der Startseite, die die CSS-Klasse float_element bekommen: .startseite .float_element { float: left; width: 300px; font-size: 11px; background: #d9d9d9 url(grafiken/graydient.jpg) repeat-x left top; padding: 3px 9px 9px 9px; border-top: 1px solid #999; margin-top: 13px; margin-right: 18px; }

3. Die folgende CSS-Regel gestaltet die Überschriften in den Elementen: .startseite .float_element h2 { font-size: 14px; font-weight: bold; padding: 0; margin: 0.5em 0; }

4. Speichern Sie das Stylesheet.

Nach diesen ToDos stehen die beiden Module nebeneinander, haben einen grauen Hintergrund umd sehen etwa so aus wie in Abbildung 16.4.

Abbildung 16.4 Zwei gefloatete Inhaltselemente und ein gecleartes

Um auszuprobieren, wie die Seite ohne das Clear aussieht, können Sie das Inhaltselement HTML mit dem geclearten Zeilenumbruch per Klick auf das grüne Auge vorübergehend ausblenden. Das Auge ist dann grau, und das Layout ist nach einem Neuladen der Seite kaputt.

407

16.2

16

Die Startseite gestalten

16.3

Artikel mit Teaser auf der Startseite

Teaser kennen Sie bereits von der Nachrichten-Erweiterung. Teaser sind ein kurzer Anreißertext, der den Inhalt eines Beitrags beschreibt und auf den ein Link zum Weiterlesen … folgt. Teaser gibt es auch für Artikel. Ein Teasertext für einen Artikel ist ausnahmsweise kein eigenes Inhaltselement, sondern Teil der Artikel-Einstellungen. Abbildung 16.5 zeigt einen Überblick über die wichtigsten Felder.

Abbildung 16.5 Einstellungen für den Artikelteaser auf der Startseite

Ist das Kontrollkästchen Teasertext anzeigen aktiviert, erscheint der im Feld Teasertext angegebene Text auf der Webseite, gefolgt von einem Link zum Weiterlesen …. Und es passiert noch etwas: Der ansonsten eher unscheinbare Titel eines Artikels erscheint plötzlich als h1-Überschrift auf der Webseite. So haben Sie die Möglichkeit, Teaser- und Artikeltext verschiedene Überschriften zu geben.

408

Artikel mit Teaser auf der Startseite

Da der Teaser am Anfang einer Seite steht, vergeben Sie im folgenden ToDo wie immer die Klasse seitenanfang, damit der obere Außenabstand der h1-Überschrift auf null gesetzt wird. ToDo: Einen Teaser für den ersten Artikel erstellen 1. Öffnen Sie das Backend-Modul Artikel. 2. Öffnen Sie die Einstellungen für den ersten Artikel namens Startseite (Rechtsklick auf den gelben Bleistift, Artikel-Einstellungen). 3. Ändern Sie den Titel in »Willkommen auf der Beispielsite«. 4. Lassen Sie den Alias ruhig unverändert auf startseite. 5. Geben Sie im Feld Teaser-CSS-Klasse »seitenanfang« ein. 6. Aktivieren Sie das Kontrollkästchen Teasertext anzeigen. 7. Geben Sie im Feld Teasertext ein bisschen Text ein (siehe Abbildung 16.6). 8. Klicken Sie auf Speichern und Schliessen.

Auf der Webseite erscheint jetzt der Titel des Artikels, gefolgt vom Teasertext und einem Link zum Weiterlesen …

Abbildung 16.6 Startseite mit Teaser für den ersten Artikel

Teaser werden nur angezeigt, wenn es mindestens zwei Artikel gibt. Teaser werden auf der Webseite nur angezeigt, wenn im selben Layoutbereich mindestens zwei Artikel vorhanden sind. Gibt es nur einen Artikel, zeigt Contao den Teaser nicht an, auch wenn er aktiviert ist.

409

16.3

16

Die Startseite gestalten

Das können Sie auf der Startseite ganz einfach ausprobieren, indem Sie den zweiten Artikel in der Hauptspalte mit einem »Augen-Klick« auf das grüne Auge vorübergehend ausblenden. Wenn Sie die Startseite erneut laden, erscheint der vollständige Artikel, obwohl der Teasertext aktiviert ist.

16.4

Sidebar erstellen: Lesetipps und Zufallsbild

Die Hauptspalte der Startseite ist so weit fertig. In diesem Abschnitt erstellen Sie in der rechten Spalte eine Sidebar, in der Sie zunächst ein paar Lesetipps anbieten und ein zufällig ausgewähltes Bild darstellen. Später kommt dann mehr hinzu: ein Minikalender mit einer Übersicht über die Termine des aktuellen Monats, eine Möglichkeit, den Newsletter zu abonnieren und die Anzeige des letzten Änderungsdatums. In der Sidebar binden Sie alle Frontend-Module im Seitenlayout Startseite ein.

16.4.1 Lesetipps mit einem Quicklink-Modul In Kapitel 8, »Navigationen erstellen in Contao«, haben Sie die Navigationsmodule kennengelernt und dabei im Vorübergehen auch Bekanntschaft mit dem Modultyp Quicklink gemacht. Dieser Modultyp ist eine Art Individuelle Navigation als Dropdown-Menü, und Sie nutzen ihn im folgenden ToDo, um eine Liste der lesenswerten Artikel zusammenzustellen. ToDo: Lesetipps mit einem Quicklink-Modul 1. Öffnen Sie das Backend-Modul Themes 폷 Module. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Geben Sie dem Modul die folgenden Einstellungen: Titel: »Startseite – Lesetipps« Überschrift (h2): »Lesetipps« Modultyp: Quicklink Individuelle Bezeichnung: »⇓ Klicken ⇓« Seiten: Wählen Sie drei bis vier beliebige Seiten aus. 4. Klicken Sie auf Speichern und Schliessen. 5. Öffnen Sie im Backend-Modul Themes 폷 Seitenlayouts das Seitenlayout Startseite zur Bearbeitung. 6. Erstellen Sie im Bereich Frontend-Module eine Zeile mit dem Modul Startseite – Lesetipps in Rechte Spalte. 7. Klicken Sie auf Speichern und Schliessen.

410

Sidebar erstellen: Lesetipps und Zufallsbild

Auf der Startseite erscheint jetzt die Sidebar mit dem Dropdown-Menü. In der Liste sichtbar ist das Wort Klicken. Vor und hinter ihm steht ein Doppelpfeil nach unten (Down-Arrow: ⇓). Nach einem Klick kann ein Besucher einen Lesetipp aus der Liste auswählen.

16.4.2 Ein zufällig ausgewähltes Bild Unterhalb der Lesetipps können Sie mit dem bisher noch nicht erwähnten Modul Zufallsbild ein zufällig ausgewähltes Bild anzeigen. Auch das geht sehr einfach. Als Grundlage für das Modul nehmen Sie die Fotos vom Artikel »Die Abenteuer des Lorem Ipsum« aus Kapitel 9, »Inhaltselemente für Text und Bilder«. ToDo: Ein Modul vom Typ »Zufallsbild« erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Module. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Geben Sie dem Modul die folgenden Einstellungen: Titel: »Startseite – Zufällig ausgewähltes Bild« Überschrift (h2): »Lorem Ipsum unterwegs« Modultyp: Zufallsbild Bildbreite: »170« und Exaktes Format Quelldateien: /beispielsite/content/fotos 4. Klicken Sie auf Speichern und Schliessen. 5. Öffnen Sie im Backend-Modul Themes 폷 Seitenlayouts das Seitenlayout Startseite zur Bearbeitung. 6. Blenden Sie gegebenenfalls den Bereich Frontend-Module ein. 7. Duplizieren Sie die Zeile Startseite – Lesetipps in Rechte Spalte mit einem Klick auf das grüne Kreuz rechts daneben. 8. Binden Sie in der unteren der beiden Zeilen das Modul Startseite – Zufällig ausgewähltes Bild in Rechte Spalte ein. 9. Klicken Sie auf Speichern und Schliessen.

Direkt unterhalb des Lesetipps erscheint ein 170px breites, vom CSS-Bilderrahmen aus Kapitel 9 umgebenes Bild aus dem Ordner fotos. Wenn Sie die Seite neu laden, wählt Contao ein anderes Bild aus demselben Ordner.

16.4.3 Die Sidebar gestalten Die Sidebar hat ein paar Inhalte und wird jetzt gestaltet. Alles, was Sie dazu benötigen sind die zwei CSS-Regeln aus dem folgenden ToDo.

411

16.4

16

Die Startseite gestalten

ToDo: Die Gestaltung der Sidebar 1. Öffnen Sie das Stylesheet bildschirm.css und fügen Sie am Ende die folgende CSSRegel zur Gestaltung des Layoutbereichs #right ein: .startseite #right { background: #d9d9d9 url(grafiken/graydient.jpg) repeat-x left top; padding: 0 8px; border: 1px solid #999; border-right: none; border-left: none; margin: 0 0 1em 2em; }

2. Direkt darunter folgt die Formatierung der h2-Überschriften: .startseite #right h2 { font-size: 12px; font-weight: bold; padding: 3px; padding-left: 0; border: none; margin: 2em 0 1em 0; }

3. Speichern Sie das Stylesheet.

Nach diesem ToDo sieht die Sidebar im Browser schon nach Sidebar aus.

Abbildung 16.7 Die gestaltete Sidebar mit zwei Modulen

412

Der Minikalender in der Sidebar

16.5

Der Minikalender in der Sidebar

Wie gemacht für eine Sidebar ist ein Minikalender, der monatsweise einen Überblick über die im Backend-Modul Events gespeicherten Termine gibt. Ist für einen Tag ein Event gespeichert, wird der Tag anklickbar und leitet den Besucher auf eine Seite mit dem Modul Eventliste. Von der Eventliste gelangt der Besucher per Klick auf die Einzelansicht des Termins. Die Zwischenstufe mit der Eventliste ist notwendig, weil für einen Tag mehrere Events gespeichert werden können.

16.5.1 Eine neue Seite mit dem Modul »Eventliste« erstellen Als Vorbereitung für den Minikalender erstellen Sie zunächst eine neue Seite unterhalb von Kalender. Diese Seite soll Terminliste anzeigen heißen und wird ein Modul vom Typ Eventliste beinhalten. Im folgenden ToDo machen Sie zu diesem Zweck einmal mehr die bekannte Rundreise durch das Backend: von der Seitenstruktur über die Frontend-Module bis zum Artikelbaum. ToDo: Eine neue Seite mit dem Modul »Eventliste« erstellen 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Erstellen Sie eine neue Seite direkt unterhalb und auf derselben Ebene wie die bereits vorhandene Seite Termin anzeigen, und geben Sie ihr die folgenden Einstellungen: Titel: »Terminliste anzeigen« Im Menü verstecken: ankreuzen Seite veröffentlichen: nicht vergessen! 3. Klicken Sie auf Speichern und Schliessen. 4. Öffnen Sie das Backend-Modul Themes 폷 Module. 5. Erstellen Sie ein neues Modul mit den folgenden Einstellungen: Titel: »Events – Terminliste anzeigen« Modultyp: Eventliste Kalender: Terminkalender Anzeigeformat: Tag Event-Template: event_upcoming 6. Klicken Sie auf Speichern und Schliessen. 7. Öffnen Sie im Backend-Modul Artikel den Artikel Terminliste anzeigen [Hauptspalte] zur Bearbeitung. 8. Fügen Sie ein Inhaltselement mit dem Modul Events – Terminliste anzeigen (ID xx) ein. 9. Klicken Sie auf Speichern und Schliessen.

413

16.5

16

Die Startseite gestalten

Nach diesem ToDo gibt es eine Seite namens Terminliste anzeigen, auf der ein Modul vom Typ Eventliste eingebaut ist. Die Vorbereitungen für den Einsatz des Minikalenders sind damit abgeschlossen.

16.5.2 Ein Modul für den Minikalender erstellen und einbinden Die Erstellung und Einbindung eines Moduls für den Minikalender funktioniert ganz ähnlich wie bei den Lesetipps und dem Zufallsbild. Sie können es ja mal probieren, ohne vorher das folgende ToDo zu lesen. ToDo: Ein Modul für den Minikalender erstellen 1. Öffnen Sie das Backend-Modul Themes 폷 Module. 2. Klicken Sie oben im Arbeitsbereich auf Neues Modul. 3. Geben Sie dem Modul die folgenden Einstellungen: Titel: »Startseite – Minikalender« Überschrift (h2): »Der Monat im Überblick« Modultyp: Kalender Kalender: Terminkalender Verkürzte Darstellung: ankreuzen Erster Wochentag: Montag Weiterleitungsseite: Terminliste anzeigen (gerade erstellt) Event-Template: cal_mini 4. Klicken Sie auf Speichern und Schliessen. 5. Öffnen Sie im Backend-Modul Themes 폷 Seitenlayouts das Seitenlayout Startseite zur Bearbeitung. 6. Blenden Sie gegebenenfalls den Bereich Frontend-Module ein. 7. Duplizieren Sie im Bereich Frontend-Module die Zeile Startseite – Zufällig ausgewähltes Bild in Rechte Spalte (per Klick auf das grüne Kreuz). 8. Binden Sie in der unteren der beiden Zeilen das Modul Startseite – Minikalender in Rechte Spalte ein. 9. Klicken Sie auf Speichern und Schliessen.

Der Kalender ist drin und funktioniert, bekommt aber im folgenden Abschnitt noch eine kleine optische Retusche, bevor er hier abgebildet wird.

16.5.3 Den Minikalender gestalten Das HTML für den Minikalender wird hier nicht abgedruckt, denn es ist im Prinzip genauso aufgebaut wie das HTML für einen großen Kalender, das in Kapitel 14, »Die Erweiterungen »Kalender« und »FAQ««, ab Seite 377 ausführlich vorge-

414

Der Minikalender in der Sidebar

stellt wurde. Deshalb fügen Sie im folgenden ToDo gleich ein paar Styles zur Gestaltung hinzu. ToDo: Die Gestaltung des Minikalenders 1. Öffnen Sie das Stylesheet bildschirm.css im Editor. 2. Fügen Sie am Ende die folgenden CSS-Regeln zur Gestaltung des Kopfbereichs im Minikalender ein: .startseite table.minicalendar { width:98 %; border-collapse: collapse; } .startseite .minicalendar thead { border: 1px solid #fff; } .startseite .minicalendar th { font-weight: normal; } .startseite .minicalendar th.head { padding: 6px 0; } .startseite .minicalendar th.previous { text-align:left; padding-left:6px; } .startseite .minicalendar th.current { text-align:center; } .startseite .minicalendar th.next { text-align:right; padding-right:6px; } .startseite table.minicalendar .label { font-size: 11px; text-align:center; font-weight:normal; padding-bottom:1px; }

3. Direkt darunter folgt die Gestaltung der Tabellenzellen: .startseite .minicalendar td { text-align:center; width:14 %; padding: 2px 0; border-right:1px solid #fff; border-bottom:1px solid #fff; } .startseite .minicalendar td.col_first { border-left: 1px solid #fff }

4. Speichern Sie das Stylesheet.

Nach diesem ToDo kann der kleine Kalender in der Sidebar sich schon eher in einem Screenshot sehen lassen (Abbildung 16.8).

415

16.5

16

Die Startseite gestalten

Abbildung 16.8 Der gestaltete Minikalender in der Sidebar

16.6

Newsletter abonnieren in der Sidebar

Die Sidebar ist fast fertig. Jetzt fehlt nur noch die Möglichkeit, einen Newsletter zu abonnieren. Um auf der Startseite ein Newsletter-Abo anzubieten, erstellen Sie zunächst eine Kopie des bereits vorhandenen Moduls, geben diesem eine h2-Überschrift und binden die Kopie wie die anderen Module im Seitenlayout Startseite ein. ToDo: Das Modul »Newsletter abonnieren« in der Sidebar einbinden 1. Öffnen Sie das Backend-Modul Themes 폷 Module. 2. Kopieren Sie das Modul Newsletter abonnieren mit einem Klick auf das grüne Kreuz rechts daneben. 3. Oben neben dem Titel des Themes erscheint daraufhin ein brauner Pfeil nach unten. Fügen Sie das kopierte Modul mit einem Klick auf diesen Pfeil in die Liste ein. 4. Ändern Sie den Titel in »Startseite – Newsletter abonnieren«.

416

Newsletter abonnieren in der Sidebar

ToDo: Das Modul »Newsletter abonnieren« in der Sidebar einbinden (Forts.) 5. Geben Sie die h2-Überschrift »Newsletter abonnieren« ein. 6. Lassen Sie alle anderen Einstellungen unverändert. 7. Klicken Sie auf Speichern und Schliessen. 8. Öffnen Sie im Backend-Modul Themes 폷 Seitenlayouts das Seitenlayout Startseite zur Bearbeitung. 9. Duplizieren Sie im Bereich Frontend-Module die Zeile Startseite – Minikalender in Rechte Spalte (mit einem Klick auf das grüne Kreuz). 10. Binden Sie in der unteren der beiden Zeilen das Modul Startseite – Newsletter abonnieren in Rechte Spalte ein. 11. Klicken Sie auf Speichern und Schliessen.

Das Modul funktioniert, und falls jemand seine E-Mail-Adresse einträgt und auf Abonnieren klickt, wird er auf die Bestätigungsseite weitergeleitet. Fertig ist die neue Startseite mit eigenem Seitenlayout (Abbildung 16.9).

Abbildung 16.9 Die fertige Startseite im Überblick

417

16.6

16

Die Startseite gestalten

Twitter einbinden? Kein Problem. Falls Sie Twitter-Mitglied sind, gibt es zum Beispiel eine schöne Erweiterung namens [TwitterReader] zum Anzeigen Ihrer letzten Tweets. 왘

TwitterReader – Twitter Nachrichten anzeigen lassen http://bit.ly/cMMhUC

Diese Erweiterung eignet sich ganz hervorragend für eine Sidebar.

418

TEIL V Systemverwaltung

In diesem Kapitel lernen Sie den Theme-Manager kennen, der es ermöglicht, das Aussehen einer Site komplett zu verändern – mit wenigen Klicks plus ein wenig Nachbearbeitung.

17

Der Theme-Manager in Aktion

Der Theme-Manager ist eine neue Funktion in Contao 2.9, die – wie Sie gleich sehen werden – bereits bekannte Komponenten auf innovative Art und Weise verwaltet. Im Laufe dieses Kapitels bekommt die momentan noch blaue Beispielsite ein neues Aussehen, das sich an der Gestaltung des Buch-Covers orientiert.

17.1

Ein Theme bestimmt das Aussehen der Website

Themes haben Sie in Abschnitt 6.2, »»No layout found« – Theme und Seitenlayout erstellen«, bereits kurz kennengelernt. In diesem Kapitel geht es ein bisschen mehr ins Detail.

17.1.1

Der Theme-Manager verwaltet bekannte Komponenten

Das Aussehen einer Contao-Site wird durch das Zusammenwirken verschiedener Komponenten bestimmt. Drei davon werden im Backend-Modul themes bearbeitet: 왘

Interne Stylesheets

왘

Frontend-Module

왘

Seitenlayouts

Abbildung 17.1 zeigt das Backend-Modul Themes im Überblick. Zusätzlich zu diesen drei Komponenten gibt es in einem Theme noch zwei weitere wichtige Bestandteile: 왘

Layout-Dateien wie Grafiken und externe Stylesheets, die in einem Ordner unterhalb von /tl_files gespeichert sind.

왘

Templates, die speziell für das Theme angepasst wurden und in einem Unterordner zu /templates aufbewahrt werden.

421

17

Der Theme-Manager in Aktion

Abbildung 17.1 Die Symbole im Backend-Modul Themes

Damit der Theme-Manager weiß, welche Templates und Layout-Dateien zu welchem Theme gehören, haben Sie in den Einstellungen des Themes die Pfadangaben zum Layout- und zum Templates-Ordner eingegeben.

Abbildung 17.2 Die Ordner für das Theme

Der Theme-Manager bündelt alle diese Komponenten und fasst sie beim Exportieren in einer einzigen Datei mit der Endung .cto zusammen. Diese Datei ermöglicht das Importieren des Themes in eine andere Contao-Installation.

17.1.2

»Blaues Theme« von der Beispielsite exportieren

Ein im Backend vorhandenes Theme zu exportieren ist denkbar einfach. Contao erzeugt beim Exportieren eine Datei mit der Endung .cto, die Sie zunächst in einem beliebigen Ordner auf Ihrem Computer speichern. Im Backend sieht dieser Prozess so aus wie in Abbildung 17.3.

422

Ein Theme bestimmt das Aussehen der Website

Abbildung 17.3 »Blaues Theme« exportieren

ToDo: »Blaues Theme« exportieren 1. Öffnen Sie das Backend-Modul Themes. 2. Klicken Sie auf das Symbol zum Exportieren des Themes ganz rechts außen. 3. Wählen Sie auf Ihrem Computer einen Ordner, um die Datei blaues_theme.cto zu speichern.

Die Datei blaues_theme.cto wird im folgenden Abschnitt genauer untersucht.

17.1.3

All-in-one: Das Innenleben einer CTO-Datei

Die Theme-Datei hat zwar die proprietäre Endung .cto, ist aber ein ganz normales ZIP-Archiv, das Sie mit jedem ZIP-Programm öffnen und entpacken können. Sie können eine Theme-Datei also genau analysieren. Die eben exportierte Theme-Datei blaues_theme.cto enthält die Datei theme.xml und die beiden Ordner templates/ und /tl_files samt Unterordnern. In der Datei theme.xml sind alle in der Datenbank gespeicherten Inhalte enthalten: interne Stylesheets, Frontend-Module und Seitenlayouts. Der Inhalt der Datenbanktabellen wird in dieser Datei mithilfe einer entsprechenden XML-Struktur abgebildet.

423

17.1

17

Der Theme-Manager in Aktion

Abbildung 17.4 Ein Blick in die Datei »blaues_theme.cto«

Nicht in der Datenbank gespeicherte, externe Dateien wie Templates, LayoutGrafiken und externe Stylesheets liegen in den beiden in der ZIP-Datei enthaltenen Ordnern unterhalb von /templates und /tl_files. Der Theme-Manager speichert also alle für das Design der Site benötigten Stylesheets, Frontend-Module, Seitenlayouts, Templates und Grafiken in einer einzigen Datei.

17.1.4 Was nicht in einem Theme enthalten ist Nachdem Sie erfahren haben, was alles zu einem Theme gehört, folgen jetzt die Dinge, die nicht in einem Theme enthalten sind: 왘

Inhalte

왘

Seitenstruktur

왘

Mitglieder und Benutzer

왘

Erweiterungen, die nicht zum Contao-Core gehören

Seitenstruktur sowie Mitglieder und Benutzer haben mit dem Layout einer Website ziemlich eindeutig nichts zu tun, aber bei den Inhalten gibt es, wie Sie im Laufe des Kapitels noch sehen werden, Grenzfälle. Erweiterungen, die in einem Theme gestaltet werden und nicht zum Contao-Core gehören, müssen vor dem Importieren des Themes installiert werden. Ein Beispiel: Bevor Sie ein Theme zur Gestaltung eines Online-Shops importieren, sollte die entsprechende Shop-Erweiterung installiert sein. Contao weist beim Importieren eines Themes mit roten Lettern auf fehlende Datenbankfelder hin. Ein Frontend-Template enthält auch Seiten, Inhalte und Benutzer Wenn Sie auch die Seitenstruktur, die Inhalte oder eingerichtete Benutzer von einer Installation zu einer anderen zu transportieren möchten, benötigen Sie ein Frontend-Template, auch Website-Template genannt.

424

Das »Cover Theme«: Die Beispielsite im neuen Look

17.2

Das »Cover Theme«: Die Beispielsite im neuen Look

In jedem guten Kochstudio kommt irgendwann einmal der Satz »Da haben wir schon mal was vorbereitet«, und jetzt ist es auch in diesem Buch so weit. Auf der Buch-DVD finden Sie die Theme-Datei cover_theme.cto, die ein Design enthält, das auf der Gestaltung des Buch-Covers beruht: schwarze Balken, weißer Hintergrund, Buchtitel auf gelb-orangem Farbverlauf und ein kleines Bonsai-Bäumchen. Dieses Theme stülpen Sie über die noch blaue Beispielsite. Abbildung 17.5 zeigt die Verwandlung der Beispielsite durch das neue »Cover Theme«. Inhaltlich bleibt alles unverändert.

Abbildung 17.5 Die Beispielsite mit altem und neuem Theme

Das Wechseln eines Themes besteht aus den folgenden Schritten: 왘

Schritt 1: Theme-Datei auf den Webspace hochladen

왘

Schritt 2: Theme-Datei importieren

왘

Schritt 3: Theme aktivieren

Nach der Aktivierung muss ein Theme noch angepasst werden, aber wie jede Reise beginnt auch diese im folgenden Abschnitt mit dem ersten Schritt. Schritt 1: Theme-Datei auf den Webspace hochladen In diesem Schritt kopieren Sie die CTO-Datei in tl_files/importieren. Dazu reicht das wahrscheinlich kürzeste aller bisherigen ToDos. ToDo: Theme-Datei auf den Webspace hochladen 1. Kopieren Sie die Datei cover_theme.cto auf Ihren Webspace in den Ordner tl_files/ importieren. Tun Sie das in einer lokalen Installation mit dem Datei-Manager Ihres Betriebssystems, online per FTP.

425

17.2

17

Der Theme-Manager in Aktion

Schritt 2: Theme im Backend importieren Der Import findet im Backend von Contao statt, und dabei werden die im Theme enthaltenen Ressourcen in der Contao-Installation an die richtigen Stellen kopiert. Gleichzeitig überprüft Contao vorab, ob die für das Theme benötigten Datenbankfelder und Layoutbereiche vorhanden sind. ToDo: Die Theme-Datei »cover_theme.cto« importieren 1. Öffnen Sie das Backend-Modul THEMES. 2. Klicken Sie oben im Arbeitsbereich auf THEME IMPORTIEREN. 3. Machen Sie falls nötig den Inhalt des Ordners importieren sichtbar. 4. Aktivieren Sie das Kontrollkästchen rechts neben cover_theme.cto. 5. Klicken Sie auf die Schaltfläche THEME IMPORTIEREN. 6. Jetzt werden die Theme-Daten überprüft und entsprechende Meldungen ausgegeben. 7. Klicken Sie auf die Schaltfläche WEITER.

Nach diesem ToDo haben Sie im Backendbereich Themes zwar ein neues Theme mit dem Namen Cover Theme (Abbildung 17.6), das Frontend sieht aber genauso aus wie vorher, da das Theme noch nicht aktiviert ist.

Abbildung 17.6 Das Theme »cover_theme.cto« wurde importiert.

426

Das »Cover Theme«: Die Beispielsite im neuen Look

Schritt 3: »Cover Theme« für die Beispielsite aktivieren Ein Theme wird durch das Zuweisen der zum Theme gehörigen Seitenlayouts im Seitenbaum aktiviert. Es gibt also keine Schaltfläche mit der Beschriftung Theme aktivieren. Die kann es auch nicht geben, weil Contao wissen muss, welche Seite mit welchem Seitenlayout dargestellt werden soll. Da ein Theme mehrere Seitenlayouts enthalten und Contao nicht denken kann, müssen Sie die Verbindung zwischen Seiten im Seitenbaum und Seitenlayouts im Theme manuell herstellen. Hat ein Theme nur ein einziges Seitenlayout, wird dieses in der Regel dem Startpunkt einer Website zugewiesen. Alle Unterseiten erben das Seitenlayout des Startpunktes, und die Sache ist mit wenigen Klicks erledigt. Das Cover Theme enthält aber drei Seitenlayouts mit den Namen Standardlayout, Startseite und Nachrichten. Das Standardlayout weisen Sie dem Startpunkt zu, der es an alle Unterseiten vererbt. Nur die Startseite bekommt ein eigenes Seitenlayout mit dem passenden Namen Startseite und die Seite Nachrichten ebenso. Im folgenden ToDo erledigen Sie beide Schritte mit der Funktion Mehrere bearbeiten quasi in einem Rutsch. ToDo: Das »Cover Theme« aktivieren 1. Öffnen Sie das Backend-Modul SEITENSTRUKTUR. 2. Klicken Sie rechts oben im Arbeitsbereich auf MEHRERE BEARBEITEN. 3. Aktivieren Sie die Kontrollkästchen neben dem Startpunkt der Website Beispielsite Contaobuch, Startseite und Nachrichten. 4. Klicken Sie auf die Schaltfläche BEARBEITEN. 5. Aktivieren Sie die Felder SEITENNAME, EIN LAYOUT ZUWEISEN und SEITENLAYOUT. 6. Klicken Sie auf die Schaltfläche WEITER. 7. Auf der folgenden Seite werden die Felder für beide Seiten dargestellt. 8. Weisen Sie den beiden Seiten die Seitenlayouts zu: Beispielsite Contaobuch => Cover Theme – Standardlayout Startseite => Cover Theme – Startseite Nachrichten => Cover Theme – Nachrichten 9. Klicken Sie auf Speichern und Schliessen.

Und jetzt wird es spannend: Trommelwirbel, ins Frontend wechseln und Seite neu laden. Im Browser sollte es jetzt ungefähr so aussehen wie in Abbildung 17.7. Wenn noch etwas blau ist, sollten Sie erstens den Browsercache löschen und zweitens die Zuweisung der Seitenlayouts im Seitenbaum noch einmal überprüfen. Ansonsten sollte alles im neuen Look erscheinen.

427

17.2

17

Der Theme-Manager in Aktion

Abbildung 17.7 Das »Cover Theme« – alte Inhalte in neuen Kleidern

17.3

Über die Anpassung von Themes

Ein Theme ist wie ein Anzug von der Stange. Nach dem ersten Anziehen passt er mehr oder weniger; bis er aber wirklich perfekt sitzt, muss hier und da noch Hand angelegt werden. Wie viel Arbeit die Theme-Anpassung bedeutet, hängt wie so oft von den Umständen ab. Der Teufel steckt im Detail, sagt man, und je mehr Details eine Site hat, desto mehr dieser kleinen Kerlchen werden Ihnen beim Anpassen eines importierten Themes begegnen. Das Cover Theme wurde speziell für die Beispielsite angefertigt, aber selbst dabei geht es nicht ganz ohne Nachbearbeitung. Im Folgenden beschreibe ich ein paar typische Fehlerquellen, die für Verwirrung sorgen und den perfekten Sitz verhindern können. Problem Nr. 1: Die Metanavigation zeigt die falschen Seiten Fehlerkandidat Nummer eins ist die Metanavigation rechts oben im schwarzen Balken, die normalerweise Links zu Kontakt, Impressum und Sitemap zeigt. Nach

428

Über die Anpassung von Themes

dem Aktivieren des Themes erscheinen dort eventuell falsche oder auch gar keine Seiten (Abbildung 17.8).

Abbildung 17.8 Kopfbereich mit falscher Metanavigation

Die Ursache dafür ist, dass im Frontend-Modul für die Metanavigation die IDs der ausgewählten Seiten gespeichert werden. Wenn das Theme in einer anderen Contao-Installation importiert wird, haben die Seiten im Seitenbaum meist andere IDs, und deshalb erscheinen in der Metanavigation nicht die eigentlich geplanten Seiten. Ist die ID gar nicht in Benutzung, erscheint gar nichts. Die Lösung ist einfach: Öffnen Sie im Backend-Modul Themes für das Cover Theme die Frontend-Module zur Bearbeitung, und weisen Sie im Modul Navigation – Metanavi [Individuelle Navigation] die gewünschten Seiten erneut zu. Speichern. Fertig. Alles okay. Problem Nr. 2: Das Suchformular ist verschwunden Ein zweites potenzielles Problem steckt ebenfalls im Kopfbereich: In der horizontalen Navigation könnte rechts das Suchformular fehlen (Abbildung 17.9).

Abbildung 17.9 Kopfbereich ohne Suchformular

Der Grund für das Verschwinden ist ähnlich wie bei der Metanavigation: 왘

Das Suchformular ist ein mit dem Formulargenerator erstelltes Formular, das mit einer bestimmten ID in der Datenbank gespeichert wird.

왘

Dieses Suchformular wurde mithilfe des Frontend-Moduls Anwendung – Suchformular [Formular] im Seitenlayout eingebunden.

Genau wie bei der Metanavigation kann dieses Suchformular in einer anderen Installation eine andere ID haben, wodurch es vom Modul nicht mehr gefunden wird.

429

17.3

17

Der Theme-Manager in Aktion

Um das Problem zu beheben, öffnen Sie im Cover Theme das Frontend-Modul Anwendung – Suchformular [Formular] und weisen das Suchformular erneut zu. Falls in einem Theme ein Frontend-Modul ein Formular einbindet, das in Ihrer Contao-Installation gar nicht vorhanden ist, müssen Sie das entsprechende Formular erst erstellen. Wenn also eine Weiterleitungsseite wie z. B. auf der Nachrichtenseite bei der Auswahl des Monats oder eine Referenzseite wie bei der Sitemap nach einem ThemeWechsel nicht mehr funktioniert, sollten Sie im entsprechenden Modul kontrollieren, ob die richtige Seite eingetragen ist.

17.4

Sonderfall: In Artikeln eingebundene Module

Sie haben im Laufe des Buches gesehen, dass Frontend-Module entweder im Seitenlayout oder in Artikeln eingebunden werden, und in Artikeln eingebundene Frontend-Module sind beim Theme-Wechsel ein potenzielles Problem. Besonders gemein ist dabei, dass man zunächst nichts bemerkt, weil nach dem ThemeWechsel alles in Ordnung zu sein scheint.

17.4.1 Im Seitenlayout eingebundene Module sind unproblematisch Im Seitenlayout eingebundene Frontend-Module sind unproblematisch, da sie beim Wechseln des Themes ausgetauscht werden. Ein Beispiel dafür ist der Kopfbereich der Beispielsite. Ein Modul namens Layout – Header [Eigener HTML-Code] gibt es in beiden Themes. Im blauen Theme enthält es eine h1-Überschrift mit dem Text Beispielsite und darunter einen Slogan als Absatz, im Cover Theme hingegen ist dort eine h1-Überschrift mit Farbverlaufsgrafik inklusive Text. Nach dem Aktivieren des neuen Themes wird von Contao automatisch das Header-Modul aus Cover Theme verwendet (Abbildung 17.10).

Abbildung 17.10 Das Modul »Layout – Header« in den beiden Themes

430

Sonderfall: In Artikeln eingebundene Module

Auch die Navigationsmodule, die Auswahl der Monate bei den Nachrichten und die Sidebar auf der Startseite werden im Seitenlayout eingebunden und sind somit okay.

17.4.2 In Artikeln eingebundene Frontend-Module sind Inhalt In Artikeln eingebundene Frontend-Module erfordern hingegen wie gesagt etwas mehr Aufmerksamkeit, auch wenn sie das nicht explizit kundtun. Nehmen Sie als Beispiel die in Abbildung 17.11 gezeigte Startseite.

Abbildung 17.11 In Artikeln eingebundene Module auf der Startseite

Auf dieser Startseite gibt es zwei in Artikeln eingebundene Module: 1. Startseite – Die neuesten Nachrichten [Nachrichtenliste] 2. Startseite – Nächste Termine anzeigen [Eventliste] In einem Artikel eingebundene Module gelten als Inhalt, und deshalb sind sie beim Aktivieren von Cover Theme nicht verändert worden. Im Klartext: Diese beiden Module stammen nach wie vor aus Blaues Theme. Sie werden zwar vom CSS aus Cover Theme gestaltet, aber das HTML wird von den im blauen Theme gespeicherten Frontend-Modulen erzeugt. Abbildung 17.12 zeigt in einer Bildmontage, dass im Artikel auf der Startseite immer noch das Modul Startseite – Die neuesten Nachrichten aus Blaues Theme eingebunden ist.

431

17.4

17

Der Theme-Manager in Aktion

Abbildung 17.12 Das Modul stammt aus »Blaues Theme«.

Die Module werden angezeigt und sehen so aus wie sie sollen, also wo genau liegt überhaupt das Problem? Der Teufel steckt wie gesagt im Detail.

17.4.3 Was mit in Artikeln eingebundenen Modulen schiefgehen kann Stellen Sie sich vor, dass Sie einige Zeit nach dem Aktiveren des Cover Theme im Backend aufräumen. Dabei beschließen Sie, dass Sie das blaue Theme eigentlich nicht mehr benötigen, und löschen es. Beim Routinecheck im Frontend ein paar Minuten später fällt Ihnen auf, dass auf der Startseite etwas fehlt (Abbildung 17.13). Die neuesten Nachrichten und die nächsten Termine sind weg. Spurlos verschwunden. Erfahrene Contao-Admins werden an dieser Stelle ganz cool bleiben und sagen: »Ach ja, natürlich: die in Artikeln eingebundenen Module.« Andere hingegen bemerken zunächst nur ein leichtes Kribbeln, das vom Steißbein ausgehend langsam nach oben die Wirbelsäule hinaufläuft und am Hinterkopf angekommen eine mittlere Panikattacke auslöst.

432

Sonderfall: In Artikeln eingebundene Module

Abbildung 17.13 Die Module sind weg.

Um die Beispielsite zu reparieren, atmen Sie tief durch, gehen in das BackendModul Artikel und weisen in den Inhaltselementen vom Typ Modul entsprechende Frontend-Module aus dem Cover Theme zu.

17.4.4 Reparatur: Anpassung von in Artikeln eingebundenen Modulen Im richtigen Leben auf Live-Sites mit fremden Themes ist die Reparatur eventuell etwas aufwendiger. Es gibt in Contao (noch) keine Möglichkeit, sich anzuzeigen zu lassen, welche Frontend-Module in Seitenlayouts und welche in Artikeln eingebunden werden. Um zu verhindern, dass in Artikeln unbemerkt Frontend-Module aus nicht aktiven Themes benutzt werden, müssen Sie einmal durch die Artikel gehen und in den Inhaltselementen vom Typ Modul schauen, welche Frontend-Module eingebunden sind. Sind im neuen Theme entsprechende Module vorhanden, binden Sie diese einfach ein. Sind im neuen Theme hingegen keine entsprechenden Module vorhanden, gibt es noch ein paar Zwischenschritte:

433

17.4

17

Der Theme-Manager in Aktion

왘

Schreiben Sie sich die Namen der betroffenen Seiten, Artikel und eingebundenen Module auf. Von den Modulen notieren Sie am besten auch die IDs.

왘

Gehen Sie in das Backend-Modul Themes, und kopieren Sie anhand der Liste die benötigten Module aus dem inaktiven Theme in das aktive.

왘

Mit der Funktion Mehrere bearbeiten geht das recht flott, und Sie können dabei im Titel des Moduls auch noch gleich vermerken, dass es aus einem anderen Theme importiert wurde. Beispiel: Ein Modul namens Layout – Header können Sie beim Kopieren gleich umbenennen in Layout – Header (aus Theme ...).

왘

Gehen Sie nach dem Kopieren der Module wieder in den Artikelbaum zurück.

왘

Binden Sie in den betroffenen Artikeln die kopierten Module aus dem neuen Theme ein.

Wenn Ihnen die Reparatur zu aufwendig ist, können Sie natürlich auch einfach alles so lassen, wie es ist. Solange Sie das alte Theme nicht löschen, wird alles funktionieren. In Artikeln eingebundene Module sind eine Art Zwitter In Artikeln eingebundene Module sind eine Art Zwitter: Sie werden zwar als Teil des Layouts im Theme gespeichert, von Contao aber als Inhalt behandelt, weil sie in Artikeln stehen und quasi damit verschmelzen. Für die in Artikeln eingebundenen Module gelten denn auch nicht eventuelle CSS-Klassen aus den Moduleinstellungen, sondern die des Inhaltselements.

17.5

Sicherheitshinweise für Contao-Themes

Der Theme-Manager stellt, bedingt durch den Aufbau eines Themes, einen möglichen Angriffspunkt für Hacker dar. Das Gleiche gilt auch für Erweiterungen, die Sie im Erweiterungskatalog installieren. Bevor Sie also ein Theme importieren oder eine Erweiterung installieren, sollten Sie die folgenden Sicherheitshinweise mindestens einmal gründlich gelesen haben. Die offizielle Version finden Sie im Contao-Blog: 왘

Sicherheitshinweise zu Contao-Themes http://bit.ly/dk8Pdg

Diese Sicherheitshinweise gelten im Übrigen nicht nur für Contao, sondern für alle CMSysteme, besonders für diejenigen mit einer Erweiterungsverwaltung. Immer wenn externe Dateien importiert werden, kann darin theoretisch auch

434

Sicherheitshinweise für Contao-Themes

Schadcode enthalten sein – auch wenn Sie sich ein Programm aus dem Internet auf Ihren Rechner laden oder in einer E-Mail einen E-Mail-Anhang öffnen.

17.5.1

Das potenzielle Problem

Ein Theme besteht, wie Sie gesehen haben, meist aus Datenbankeinträgen und Dateien in den Ordnern /tl_files und /templates. Beim Import eines Themes werden Dateien auf Ihren Webspace übertragen, die theoretisch auch Schadcode enthalten können. Insbesondere Templates sind in Contao echte PHP-Dateien, in denen sämtliche PHP-Funktionen uneingeschränkt verwendet werden können.

17.5.2 Vertrauenswürdige Quellen Zunächst einmal ist es natürlich immer eine gute Idee, nur Themes von Leuten zu installieren, denen man vertraut. Sich selbst zum Beispiel. Auch Themes, die von Leo Feyers Firma iNet Robots und auf contao.org angeboten werden, sind definitiv unproblematisch. Blaues Theme und Cover Theme von der Buch-DVD ebenso. Falls im Contao-Forum Themes zum Download angeboten werden, sollte ein Hinweis auf den Beitrag mit den Sicherheitshinweisen im Contao-Blog nicht fehlen, und das Theme sollte idealerweise von vertrauenswürdigen Vielschreibern im Forum geprüft worden sein.

17.5.3 Ein Theme prüfen Wie eingangs dieses Kapitels beschrieben wurde, haben Themes die Endung .cto, sind aber ganz normale ZIP-Dateien, die Sie mit jedem ZIP-Programm entpacken und untersuchen können. Achten Sie besonders darauf, dass das im Ordner tl_files keine PHP-Dateien vorhanden sind, und prüfen Sie gegebenenfalls den Inhalt der mitgelieferten Template-Dateien im Ordner /templates.

17.5.4 Angriff von innen Themes können auch von vermeintlich vertrauenswürdigen Backend-Benutzern dazu verwendet werden, beliebigen PHP-Code auszuführen und sich z. B. Administratorrechte zu verschaffen. Achten Sie daher darauf, wem Sie Zugriff auf das Themes-Modul geben. Details zur Einrichtung von Benutzern erfahren Sie in Kapitel 20.

435

17.5

17

Der Theme-Manager in Aktion

17.6

Fazit: Themes sind klasse

Der Theme-Manager ist eine fantastische Funktion und wird Ihnen als Kickstart für neue Projekte viel Zeit ersparen. Der ideale Zeitpunkt zum Importieren eines Themes ist nach dem Aufbau einer grundlegenden Seitenstruktur und vor der Fertigstellung von Artikeln und Modulen. Bei einer bereits vollständig implementierten Website mit Inhalten und allem Drum und Dran muss ein Theme nach dem Importieren noch an die jeweilige Site angepasst werden. Das beginnt bei der Zuweisung korrekter IDs von Seiten und Formularen und geht weiter über die erneute Einbindung von in Artikeln eingebundenen Frontend-Modulen. Wenn Sie ein Theme importieren, das nicht speziell für Ihre Site erstellt wurde, sollten Sie dabei für die Nachbearbeitung entsprechend mehr Zeit einkalkulieren, aber trotz aller erforderlichen Reparaturarbeiten dürfte das Anpassen eines Themes in den meisten Fällen schneller sein, als ein Design komplett neu zu erstellen. Ein weiteres Einsatzgebiet des Theme-Managers ist die saubere Aufteilung von internen Stylesheets, Modulen und Seitenlayouts, wenn Contao als Basis für mehrere Websites dient. Die Erweiterung »EasyThemes« spart Klicks beim Umgang mit Themes Wenn Sie mit mehr als einem Theme arbeiten, schauen Sie sich einmal die Erweiterung [easy_themes] an, die Ihnen bei der Arbeit mit Themes durch ein praktisches Kontextmenü jede Menge Klicks erspart: 왘

EasyThemes im Extension Repository http://bit.ly/aMbDpf

Installieren Sie sie wie immer im Backend-Modul Erweiterungskatalog. Nach der Installation wird die Erweiterung in Benutzerfunktionen 폷 Persönliche Daten aktiviert und konfiguriert.

436

In diesem Kapitel bereiten Sie die Seiten zur Aufnahme in die Suchmaschinen vor: Lesbare URLs, Optimierung der Seiteneinstellungen, Fehlerseiten und die Erstellung einer XML-Sitemap für Google werden vorgestellt.

18

Die Optimierung für Suchmaschinen

Die Optimierung von Webseiten für Suchmaschinen ist in den letzten Jahren fast zum Selbstzweck geworden. Mit den Buchstaben SE beginnende Abkürzungen wie SEO und SEF sind im Weballtag fest verankert, wobei SE immer für search engine steht und die darauf folgenden Buchstaben für Dinge wie wie Optimization oder Friendly. Die Optimierung für Suchmaschinen ist natürlich wichtig, aber wer tagelang im Web recherchiert, ob Google Begriffe in h1- oder h2-Überschriften besser bewertet, ist auf dem besten Weg zur SEH: Search Engine Hysteria. Der Satz von Guido Pelzer (p3consult.de) »Was gut ist für Ihre Besucher, ist meistens auch gut für die Suchmaschinen« trifft den Kern der Sache ziemlich gut, denn Suchmaschinen und Besucher tragen das »Suchen« schon im Namen, und beide sind auf der Suche: nach relevantem Inhalt. In diesem Kapitel geht es um die Möglichkeiten, die Contao zur »On-Site«-Optimierung bietet, also darum, wie man die eigene Site technisch und inhaltlich so gestalten kann, dass sie von Suchmaschinen und Besuchern gemocht wird. Grundlagen zur Suchmaschinenoptimierung: »Website-Boosting« Wenn Sie auf der Suche nach einer gründlichen Einführung in das Thema sind, sollten Sie einen Blick in folgendes Buch werfen: 왘

Fischer, Mario: Website Boosting 2.0 (ISBN 978-8266-1703-4)

Mario Fischer gibt darin einen Überblick über die Zusammenhänge von Online-Marketing, Optimierung für Suchmaschinen und Benutzerfreundlichkeit. Und es macht auch noch Spaß, das Ganze zu lesen.

437

18

Die Optimierung für Suchmaschinen

18.1

Lesbare Adressen: URLs umschreiben

Alle im Web verfügbaren Informationen werden auf Webseiten präsentiert. Jede Webseite hat eine weltweit einmalige Adresse. Um auf eine im Web gespeicherte Information zuzugreifen, benötigen Sie also nur die URL der entsprechenden Seite. Im Web dreht sich buchstäblich fast alles um diese URLs, und darum beginnt dieses Kapitel mit der Gestaltung von möglichst gut lesbaren Adressen. FavIcon – die grafische Komplettierung der URL Ein FavIcon, kurz für favorites icon, hat zwar nicht direkt mit der URL zu tun, aber die kleinen netten Grafiken im Browser sind sehr beliebt. In Contao können Sie ein FavIcon bequem mit einer Erweiterung hinzufügen: 왘

[Favicon] FavIcon http://bit.ly/aiOfrd

Zwei Grafiken namens favicon.ico für die beiden im Buch verwendeten Themes finden Sie auf der Buch-DVD im Ordner für Kapitel 18.

18.1.1

Content-Management-Systeme und URLs

Eine URL besteht aus drei Teilen: dem Protokoll (http oder https), dem DomainNamen (website.de) und dem Namen der aufzurufenden Ressource (news.html). In diesem Abschnitt geht es in erster Linie um die Ausgestaltung des dritten Teils der URL.

Abbildung 18.1 Der Aufbau einer einfachen URL

Früher war die Sache einfach: Bei statischen Webseiten entspricht der dritte Teil der URL dem Pfad auf dem Webspace und setzt sich aus Ordnername plus Dateiname zusammen, zum Beispiel /nachrichten/index.html. Bei CMSystemen gibt es keine Ordner mehr und nur noch eine Datei, in der Regel die index.php, die mit verschiedenen URL-Parametern aufgerufen wird. Eine typische, ungeschminkte CMS-generierte URL könnte zum Beispiel so aussehen: 왘

http://website.de/index.php?id=42

Die index.php wird mit der ID der gewünschten Seite aufgerufen, und das CMS baut die Seite anhand dieser ID zusammen. Ein Haken an der Sache ist, dass im

438

Lesbare Adressen: URLs umschreiben

dritten Teil der URL für Suchmaschinen und Besucher keinerlei verwertbare Begriffe auftauchen, und darum bieten fast alle CMSysteme eine Möglichkeit, das zu ändern. Eine URL ohne Fragezeichen und Parameter bedeutet für das CMS aber in jedem Fall eine Menge Arbeit.

18.1.2

Die drei URL-Einstellungen von Contao

Im Backend von Contao können Sie im Backend-Modul System 폷 Einstellungen im Bereich Frontend-Einstellungen festlegen, welche Art von URL Contao erzeugen soll (Abbildung 18.2).

Abbildung 18.2 »System 폷 Einstellungen 폷 Frontend-Einstellungen«

Mit Contao können Sie drei verschiedene Arten von URLs erzeugen: 왘

index.php?id=17 Die Urform einer CMS-generierten URL mit numerischer ID bekommen Sie in Contao mit der Option Keine Seitenaliase verwenden. Diese Option hat den Vorteil, dass sie immer funktioniert.

왘

index.php/nachrichten.html Die Standardeinstellung in Contao. Wenn Sie nichts unternehmen, beginnt der dritte Teil der URLs in Contao mit index.php, geht weiter mit dem durch einen Schrägstrich getrennten Seitenalias nachrichten und endet mit der URLSuffix .html.

왘

nachrichten.html Mit der Option URL umschreiben bitten Sie Contao, den Dateinamen index.php in der URL zu unterdrücken. Voraussetzungen sind das ApacheModul mod_rewrite und die Datei .htaccess. Dazu gleich mehr.

Wahrscheinlich der einzige Grund dafür, URLs mit einer numerischen ID wie index.php?id=17 einzusetzen, ist, dass die anderen Varianten nicht funktionieren. Microsofts Internet Information Server hat zum Beispiel manchmal Schwierigkeiten mit der Standardeinstellung von Contao, weil er das index.php vor dem Schrägstrich für einen Ordner hält und dann die Webseiten nicht mehr findet. Er ist wohl mehr statische Webseiten gewohnt ...

439

18.1

18

Die Optimierung für Suchmaschinen

Die Standardeinstellung von Contao index.php/nachrichten.html funktioniert meist reibungslos, aber das index.php mitten in der URL ist nichts für Ästheten. Die meisten Besucher achten nicht wirklich auf URLs, aber Sie als Betreiber sollen sich mit der URL natürlich auch wohlfühlen. Als Königsweg gilt die perfekte Imitation einer statischen URL: Der Dateiname index.php wird unterdrückt und durch eine Kombination aus Seitenalias und URLSuffix ersetzt. Wie das funktioniert, wird im folgenden Abschnitt beschrieben. Google findet statische URLs vielleicht gar nicht so wahnsinnig wichtig Nachdem jahrelang viele Webmaster versucht haben, ihre URLs möglichst statisch aussehen zu lassen, sorgte im September 2008 ein Blogbeitrag von Google für einigermaßene Verwirrung: 왘

Dynamic URLs vs. static URLs http://bit.ly/dwUHtV

Fazit des Beitrags ist es, dass statische URLs auch Nachteile haben können.

18.1.3 Drei Voraussetzungen zum Umschreiben der URLs In diesem Abschnitt geht es zunächst einmal um die Voraussetzungen, die zur Erzeugung statischer URLs mit Contao gegeben sein müssen. »URLs umschreiben« bedeutet, dass der dritte Teil der URL vom Webserver im Hintergrund neu geschrieben wird und dass das index.php verschwindet. Eben war es noch da, jetzt ist es weg. Reinste Zauberei. Die folgenden Voraussetzungen müssen dazu erfüllt sein: 왘

Aktivieren Sie URLs umschreiben im Backend-Modul System 폷 Einstellungen.

왘

Apache-Webserver mit aktiviertem Modul mod_rewrite

왘

.htaccess-Datei mit Rewrite-Regeln und gegebenenfalls mit RewriteBase

Die Option URLs umschreiben im Contao-Backend bittet den Webserver genau das zu tun. Der Apache sagt daraufhin dem Modul mod_rewrite Bescheid, das die genauen Anweisungen zum Umschreiben der URL in der .htaccess-Datei findet. Ohne das Modul mod_rewrite kann der Webserver keine URLs umschreiben. Auf einem durchschnittlichen Webspace ist es heutzutage meistens aktiviert, aber wenn Sie sich nicht sicher sind, haben Sie zwei Möglichkeiten: 왘

Probieren Sie es einfach aus. Wenn es nicht klappt, stellen Sie URL umschreiben wieder aus. Dadurch geht nichts kaputt.

왘

Fragen Sie Ihren Webhoster. Der sollte das wissen.

440

Lesbare Adressen: URLs umschreiben

Die nächste Voraussetzung ist die Existenz der Datei mit dem seltsamen Namen .htaccess. Punkthtaccess, nichts davor und nichts dahinter. Die Datei .htaccess dient zur Konfiguration des Apache Webservers, und Sie haben sie in Kapitel 4 bei der Installation von Contao eventuell bereits kennengelernt. In Expertenhand ist eine .htaccess-Datei eine wahre Wunderwaffe. In den nächsten Abschnitten lernen Sie zunächst die beiden zum URL-Umschreiben relevanten Teile der .htaccess kennen: RewriteBase und RewriteRule.

18.1.4 Contao im Unterordner: Die »RewriteBase« in der ».htaccess« Falls Contao in einem Unterordner wie z. B. /contaobuch installiert ist, müssen Sie am Anfang der .htaccess die Rewrite Base ändern. Sollten Sie sich bezüglich des Unterordners nicht sicher sein, schauen Sie einfach nach, was im Backend-Modul System 폷 Einstellungen im Bereich Globale Einstellungen steht (Abbildung 18.3).

Abbildung 18.3

Der relative Pfad zum Contao-Verzeichnis

Wenn dort nichts steht, müssen Sie nichts ändern. Ist dort ein Ordner angegeben, dann sollten Sie diesen als RewriteBase in der .htaccess eintragen. In Abbildung 18.3 steht dort /contaobuch. In dem Fall müsste die RewriteBase so aussehen: # Rewrite Base # ... RewriteBase /contaobuch Listing 18.1

Die Zeile zum Umschreiben der URLs in der ».htaccess«

Entfernen Sie das Kommentarzeichen # davor, schreiben Sie den Ordnernamen mit Schrägstrich am Anfang hin, und speichern Sie die Datei. Die RewriteBase ist der Ausgangspunkt zur Umschreibung der neuen URL, und eine falsche oder fehlende RewriteBase ist die wahrscheinlich häufigste Fehlerquelle, wenn es nicht funktioniert.

441

18.1

18

Die Optimierung für Suchmaschinen

18.1.5 Die Rewrite-Regel zum URL-Umschreiben in der ».htaccess« Am Ende der .htaccess steht eine sogenannte Rewrite-Regel, die dem Modul mod_ rewrite sagt, was es tun soll. Leicht verkürzt, sieht die ganze Stelle so aus (Zeilen mit # am Anfang sind Kommentare): # Contao URLs # ... # If you are using mod_cache, it is recommended to use the # RewriteRule below, which adds the query string to the # internal URL: # RewriteRule (.*\.html)$ index.php/$1 [L] # ... RewriteRule .*\.html$ index.php [L] Listing 18.2

Die Zeile zum Umschreiben der URLs in der ».htaccess«

Die Hieroglyphen nach dem Wort RewriteRule in der letzten Zeile nennt man einen regulären Ausdruck (regular expression). Vereinfacht ausgedrückt, bedeutet die Zeile »Rufe bei einer Anforderung für eine .html-Datei stattdessen die Datei index.php auf«. Contao lässt das index.php-Fragment weg, und das Apache-Modul mod_rewrite fügt es wieder hinzu, damit die Seite gefunden wird. Sie müssen hier nichts ändern. Nur falls es mit dieser RewriteRule im folgenden ToDo nicht klappt, können Sie versuchen, die RewriteRule mit einem # davor auszukommentieren und die alternative RewriteRule ein paar Zeilen höher zu aktivieren, indem Sie das # davor entfernen. URL-Suffix ».html« im Backend geändert? Dann auch in der RewriteRule! Wenn Sie das URL-Suffix .html im Backend ändern, dann müssen Sie es in der Zeile RewriteRule auch entsprechend anpassen. In den Kommentaren oberhalb der RewriteRule stehen ein paar Beispiele.

18.1.6 So wird’s gemacht: URLs umschreiben in der Praxis Wenn alle Voraussetzungen erfüllt sind, geht es im folgenden ToDo endlich los mit dem URL-Umschreiben. ToDo: URLs mit Contao umschreiben 1. Öffnen Sie die Datei .htaccess.default im Hauptordner von Contao in einem Editor. 2. Falls Contao in einem Unterordner installiert ist, ändern Sie wie beschrieben die RewriteBase. Falls nicht, machen Sie gar nichts.

442

Lesbare Adressen: URLs umschreiben

ToDo: URLs mit Contao umschreiben (Forts.) 3. Speichern Sie die Datei unter dem Namen .htaccess im Hauptordner der ContaoInstallation. Punkthtaccess, nichts davor und nichts dahinter. 4. Öffnen Sie das Backend-Modul System 폷 Einstellungen. 5. Aktivieren Sie im Bereich Frontend-Einstellungen das Kontrollkästchen URLs umschreiben. 6. Klicken Sie auf Speichern und Schliessen.

In der Adressleiste des Browsers steht jetzt, wie in Abbildung 18.4 dargestellt, eine statische URL, die sich aus dem Seitenalias und dem URL-Suffix zusammensetzt. Besucher und Suchmaschinen können anhand der URL nicht mehr erkennen, dass diese Seite von einem CMS dynamisch erstellt wurde.

Abbildung 18.4

Das Frontend mit einer statischen URL

Falls es nicht klappt, lesen Sie noch einmal sorgfältig die Voraussetzungen zum URL-Umschreiben durch und überprüfen, ob diese alle erfüllt sind. Die Datei ».htaccess« hat noch andere Vorteile Die Verwendung von mod_rewrite und der Rewrite-Regeln in der.htaccess ermöglicht wie gesehen die Ausgabe statischer URLs. Die bei Contao mitgelieferte Version blockiert aber automatisch auch einige grundlegende Hacker-Angriffe und liefert eine GZip-komprimierte Version der großen JavaScript-Dateien wie z. B. MooTools aus. Fazit: Wenn nichts dagegen spricht, sollten Sie Contaos .htaccess-Datei benutzen. Das hat nur Vorteile.

443

18.1

18

Die Optimierung für Suchmaschinen

18.2

Flache oder hierarchische URLs?

Bei statischen Webseiten gibt es auf dem Webspace eine Ordnerstruktur, in der die Webseiten aufbewahrt werden, und diese Ordnerstruktur wird in der URL abgebildet. Wenn Sie also im Unterordner nachrichten eine Seite namens texte.html hatten, dann war die URL /nachrichten/texte.html. Bei einem CMS wie Contao gibt es keine Ordner und Webseiten mehr, sondern nur noch die index.php mit diversen numerischen Parametern. Beim Umschreiben der URLs stellt sich darum die fundamentale Frage, ob man in einem CMS versuchen sollte, die Ordnerstruktur zu simulieren und inhaltliche Hierarchien in der URL abzubilden. Klingt abstrakt? Ein Beispiel hilft: 왘

In der Hauptnavigation gibt es den Punkt »Erweiterungen« mit einer Unterseite namens Kalender. Wie lautet die URL?

Es gibt zwei Möglichkeiten: 왘

mit simulierter Ordnerstruktur, z. B. /erweiterungen/kalender.html

왘

oder als flache URL im Hauptordner, einfach nur /kalender.html oder auch erweiterungen-kalender.html

Beide Varianten haben Vor- und Nachteile. Wer früher statische Webseiten gebaut hat, tendiert wahrscheinlich genau wie ich anfangs intuitiv zur Variante mit der simulierten Ordnerstruktur. Contao tut das nicht. Contao erzeugt URLs aus Alias plus Suffix und packt alles in den Hauptordner. Als ich das zum ersten Mal realisiert habe, dachte ich »Mmh. Wo kann ich das denn umstellen?«, und ich war enttäuscht, als ich feststellte, dass die Antwort »gar nicht« war. Inzwischen finde ich flache URLs überhaupt gar nicht mehr schlimm. Bei den Suchmaschinen werden die Suchbegriffe eher höher bewertet, wenn sie statt in einem simulierten Ordnernamen in einem simulierten Dateinamen stehen, und die meisten menschlichen Besucher achten nur selten auf die Adresszeile des Browsers. Für menschliche Besucher kann man die inhaltliche Hierarchie übrigens mit dem Modul Navigationspfad (»Breadcrumb«) auf der Webseite selbst anzeigen. Gut platziert, wird sie dort sogar wahr genommen. Aber der Abschied von den gewohnten hierarchischen URLs kam für mich durch eine andere Entdeckung: Mit flachen URLs kann man die Seitenstruktur im Backend nachträglich komplett neu sortieren, ohne dass sich dadurch im Frontend auch nur eine einzige URLs ändert! Mit flachen URLs können Sie die komplette

444

Die Optimierung von Seiten

Site reorganisieren, und die in den Suchmaschinen erfassten URLs bleiben intakt: Kein einziger Link geht kaputt und wird zum 404. Im Laufe der Zeit ist eine solche Neusortierung im Backend manchmal notwendig, sei es durch inhaltliche (andere Themen) oder organisatorische Gründe (Benutzerrechte etc.). Und dann ist es einfach superpraktisch, wenn man sich um die URLs keinerlei Gedanken machen muss. Wenn Sie lieber hierarchische URLs hätten, sollten Sie die Erweiterung [folderurl] installieren (http://bit.ly/aqsGDP). Das Thema »URLs mit oder ohne Hierarchie« im Contao-Forum Auch im Contao-Forum wird dieses Thema immer mal wieder diskutiert. Ein besonders interessanter Beitrag ist der folgende: 왘

Aliase für Seiten ohne Hierarchie (per default) http://bit.ly/bfoUWm

Da werden so ziemlich alle Argumente dafür oder dagegen genannt. Zum Teil auch mehrfach, wie das in Foren eben so ist.

18.3

Die Optimierung von Seiten

Nachdem Sie jetzt erfahren haben, wie das mit dem URL-Umschreiben genau funktioniert, kommen jetzt die Seiten selbst an die Reihe. In diesem Abschnitt möchte ich kurz auf die für Suchmaschinen relevanten Seiteneinstellungen eingehen.

18.3.1 Seitenname und Seitenalias im Backend von Contao Der dritte Teil der URL setzt sich wie gesagt aus dem Seitenalias und einem URLSuffix zusammen. Beim Erstellen einer neuen Seite haben Sie immer das Feld Seitenname ausgefüllt und das Feld Seitenalias darunter meist einfach leer gelassen. Contao hat diesen Eintrag automatisch generiert und den Seitennamen URLgerecht umgewandelt: Großbuchstaben werden zu Kleinbuchstaben, Leerstellen zu Bindestrichen und Schwerter zu Pflugscharen. Der Seitenname wird im Backend und in der Navigation verwendet, der Seitenalias bei der Erzeugung einer lesbaren URL. Im Normalfall ist es völlig in Ordnung, wenn die beiden Einträge deckungsgleich sind, aber das muss nicht immer so sein. Wenn die Startseite zum Beispiel in der Navigation Startseite heißen soll, in der URL aber index.html, dann ändern Sie einfach den Seitenalias entsprechend. Das

445

18.3

18

Die Optimierung für Suchmaschinen

in den Systemeinstellungen festgelegte URL-Suffix .html müssen Sie in Gedanken ergänzen (Abbildung 18.5).

Abbildung 18.5

Startseite mit Seitenname und Seitenalias

Im folgenden ToDo probieren Sie das einmal aus. ToDo: Die Startseite wird zu »index.html« 1. Öffnen Sie im Backend-Modul Seitenstruktur die Startseite zur Bearbeitung. 2. Ändern Sie den Seitenalias in »index« ab. 3. Klicken Sie auf Speichern und Schliessen.

Im Browser ergibt sich daraus die weiter oben beschriebene Situation.

Abbildung 18.6 Seitenname, Seitenalias und URL-Suffix im Browser

Wenn Sie jetzt die Aliase der anderen Seiten kontrollieren oder ändern möchten, machen Sie das am besten mit der Funktion Mehrere bearbeiten, die Sie ja bereits kennen und die bei der Bearbeitung von Seitennamen und -aliasen einfach fantastisch ist:

446

Die Optimierung von Seiten

왘

Öffnen Sie im Backend-Modul Seitenstruktur alle Seiten.

왘

Klicken Sie Mehrere bearbeiten an, wählen Sie alle Seiten aus, und klicken Sie unten auf Bearbeiten.

왘

Kreuzen Sie nur die Felder Seitenname und Seitenalias an, und klicken Sie auf Weiter.

Schon können Sie für alle Seiten den Seitennamen und Seitenalias auf einen Schlag kontrollieren und gegebenenfalls ändern. Klasse. Was hier für Seitennamen und Seitenaliase beschrieben wurde, gilt übrigens analog genauso für Artikel (Titel und Artikelalias) und die Erweiterungen Nachrichten (Titel und Nachrichtenalias), Events (Titel und Event-Alias), FAQs (Frage und FAQAlias) und Newsletter (Betreff und Newsletteralias). Das erste Feld dient zur Verwaltung im Backend, der Alias zur Anzeige in der URL. Aliase nicht einfach so verändern, nachdem der Robot da war Nachdem der Suchmaschinenrobot zu Besuch war und die Inhalte kopiert hat, sollten Sie die Aliase von Seiten nicht mehr ändern, denn damit ändern Sie auch die URLs. Das gilt übrigens auch für Artikel, Beiträge, Events und FAQ-Antworten. Ändern Sie nicht einfach den Alias: Good URLs don’t change. Gute URLs ändern sich nicht.

18.3.2 Der Titel der Seite: »« In den Seiteneinstellungen können Sie im Bereich Meta-Informationen den Seitentitel, die Sprache, ein Robots-Tag und die Beschreibung definieren. (Abbildung 18.7).

Abbildung 18.7 Die Meta-Informationen einer Seite

In diesem Abschnitt geht es zunächst um das Feld Seitentitel.

447

18.3

18

Die Optimierung für Suchmaschinen

Der Titel einer Webseite spielt bei Suchmaschinen eine große Rolle und wird in den Suchergebnissen (SERP, search engine result pages) von allen großen Suchmaschinen als große blaue anklickbare Überschrift dargestellt (Abbildung 18.8).

Abbildung 18.8

Die blauen Links sind die »title« der Webseiten.

Auf der Startseite lautet der im Browser dargestellte Titel momentan Startseite – Beispielsite Contaobuch. Contao erzeugt diesen title im Seitentemplate fe_page.tpl. Dort steht relativ am Anfang folgender Quelltext, den ich auf mehrere Zeilen verteilt habe, damit er übersichtlicher wird: Listing 18.3

Der »title« der Webseite wird im Seitentemplate erzeugt.

Den title einer Seite setzt Contao aus zwei durch einen ganz normalen Bindestrich getrennten Variablen zusammen: 왘

$this->pageTitle ist das Feld Seitentitel aus den Einstellungen einer Seite.

Wenn das Feld Seitentitel leer ist, nimmt Contao automatisch das Feld Seitenname. 왘

$this->mainTitle ist der Haupttitel von Contao. Dieser stammt vom Start-

punkt einer Website aus den Feldern Seitentitel oder Seitenname. Falls kein Startpunkt vorhanden sein sollte, nimmt Contao den Titel der Webseite aus den Systemeinstellungen. Im folgenden ToDo ändern Sie den Seitentitel der Startseite, sodass danach in den Feldern Seitenname, Seitenalias und Seitentitel drei verschiedene Werte stehen.

448

Die Optimierung von Seiten

ToDo: Den Seitentitel für die Startseite ändern 1. Öffnen Sie im Backend-Modul Seitenstruktur die Startseite zur Bearbeitung. 2. Geben Sie im Feld Seitentitel den folgenden Text ein: »Willkommen zum Buch Websites erstellen mit Contao« 3. Klicken Sie auf Speichern und Schliessen.

Sie können natürlich gerne einen anderen Text eingeben. Stellen Sie sich dabei einfach vor, dass das, was Sie hier eingeben, der erste Teil der großen und blauen Überschrift ist. Im Frontend hat sich der Titel durch diese Maßnahme geändert. Den zweiten Teil des Titels (Beispielsite Contaobuch) aus dem Startpunkt einer Website ersetzen Sie zum Beispiel durch den Namen Ihrer Site (Abbildung 18.9).

Abbildung 18.9

Die Startseite mit neuem Titel

Auf diese Art und Weise können Sie für jede Seite einen Titel festlegen, der für diese Seite relevante Suchbegriffe enthalten sollte. Mit der Funktion Mehrere bearbeiten geht das blitzschnell. Für Suchmaschinenrobots: »<meta name="robots">« Die zwei nächsten Felder im Bereich Meta-Information geben die natürliche Sprache an, in der die Seite geschrieben wurde, und sagen den Robots der Suchmaschinen, wie sie mit der Seite umgehen sollen. Der Standardwert index, follow bedeutet »mitnehmen und allen Links folgen« und entspricht dem Standardverhalten der Robots. Im Quelltext erscheint dann <meta name="robots" content="index,follow" />. Wichtiger wird dieses Feld, wenn eine Seite nicht indiziert werden soll. Dazu gibt es zwei Optionen mit dem Wert noindex. Für die Sitemap zum Beispiel wäre noindex, follow eine sinnvolle Option: Die Seite selbst nicht indizieren, aber alle Links verfolgen.

449

18.3

18

Die Optimierung für Suchmaschinen

18.3.3 Die Beschreibung der Seite: »<meta name="description">« Unterhalb der großen blauen Überschrift gibt es auf den SERPages einen kurzen Textausschnitt, in dem der Suchende überprüfen kann, ob die Seite für ihn relevant ist. Viele Suchmaschinen schauen für diesen Textausschnitt, ob im Quelltext ein HTML-Element <meta name="description"> vorhanden ist, und benutzen den darin enthaltenen Text für beschreibende Schnipsel.

Abbildung 18.10

Der beschreibende Text auf einer SERPage

In Contao geben Sie im Feld Beschreibung der Seite den Text ein, der im Quelltext als <meta name="description"> erscheinen soll. Die genauen Empfehlungen für den beschreibenden Text variieren je nach Quelle, lassen sich aber wie folgt umschreiben: zwei bis drei ganze Sätze mit zwischen 80 und 150 Zeichen (keine Romane) und den für diese Seite relevanten Suchbegriffen. Machen Sie Werbung für die Seite, dazu ist das Feld da. ToDo: Die Beschreibung der Startseite ändern 1. Öffnen Sie im Backend-Modul Seitenstruktur die Startseite zur Bearbeitung. 2. Geben Sie im Feld Beschreibung der Seite zum Beispiel den folgenden Text ein, der die Startseite gut beschreibt. Es sollten zwei bis drei ganze Sätze mit ungefähr 80 bis 150 Zeichen sein. 3. Klicken Sie auf Speichern und Schliessen.

Wenn Ihre Startseite in den Suchmaschinen erfasst wird, steigern Sie auf diese Art und Weise die Chance, dass die kurze Textbeschreibung auf den SERPages Ihren Wünschen entspricht. Die Beschreibung der Seite sollte natürlich speziell für die jeweilige Seite geschrieben sein, aber mit der Funktion Mehrere bearbeiten dürfte das überhaupt kein Problem sein.

450

Abfangjäger: 404 und 403

Die Suchbegriffe in den Artikel-Einstellungen: »<meta name="keywords">« In der Eingabemaske für Artikel-Einstellungen ist Ihnen vielleicht das Feld Suchbegriffe aufgefallen. Dort können Sie eine kommagetrennte Liste von Suchbegriffen eingeben. Diese Begriffe erscheinen in der Einzelansicht eines Artikels im Quelltext als <meta name="keywords">. Sie richten mit diesen Suchbegriffen wahrscheinlich keinen Schaden an, aber alle momentan relevanten Suchmaschinen ignorieren die Keywords seit geraumer Zeit schlicht und einfach: 왘

Google does not use the keywords meta tag in web ranking http://bit.ly/c0Zolp

Die Zeit für das Eintragen der Suchbegriffe in den Artikel-Einstellungen können Sie besser in den Artikeltext selbst investieren. Das gibt eine höhere Rendite.

18.4

Abfangjäger: 404 und 403

In diesem Abschnitt erstellen Sie zwei Seiten für die am häufigsten auftretenden Fehlernummern bei Webseiten und lernen, wie man eine dauerhafte Umleitung einrichtet.

18.4.1 Statusmeldungen: Der Webserver schickt eine Nummer mit Browser und Webserver kommunizieren über das Protokoll HTTP miteinander. Der Browser stellt eine Anfrage (HTTP-Request), und der Webserver beantwortet diese nach bestem Wissen und Gewissen (HTTP-Response). Die Antwort des Webservers enthält immer eine Nummer, die die Art der Antwort näher kennzeichnet. Berühmt und berüchtigt ist die Serverantwort mit der Nummer 404, die wie gesagt bedeutet, dass das angeforderte Dokument auf dem Servercomputer nicht gefunden werden konnte. Wenn Sie zum Beispiel die URL http://localhost/rumpelstilzchen/ eingeben, dann kann der Webserver das gewünschte Objekt nicht finden und quittiert den Versuch mit der Nummer 404 (Abbildung 18.11). Die Antwortnummern des Webservers werden Status Code oder auch Antwortcode genannt und beginnen mit einer Zahl zwischen 1 und 5, wobei diese Ziffer für eine von fünf Kategorien steht. Tabelle 18.1 zeigt einen Überblick.

451

18.4

18

Die Optimierung für Suchmaschinen

Abbildung 18.11 Das angeforderte Objekt konnte nicht gefunden werden.

Code

Kategorie

1xx

Reserviert für zukünftige Entwicklungen, momentan ohne Bedeutung.

2xx

Alles klar. Gewünschte Anfrage oder Aktion wurde erfolgreich ausgeführt.

3xx

Umleitung (Redirection). Zur vollständigen Ausführung der Aktion sind weitere Aktionen erforderlich. Die 3er-Meldungen sind bei der Optimierung der Site für Suchmaschinen wichtig.

4xx

Client-Fehler. Die Anfrage des Clients ist aus irgendeinem Grunde nicht in Ordnung oder kann nicht beantwortet werden.

5xx

Server-Fehler. Die Anfrage ist in Ordnung, aber der Server kann nicht antworten. Deutet in jedem Fall auf einen ernsten Fehler irgendwo auf dem Webspace hin.

Tabelle 18.1

Die Bedeutung der ersten Ziffer in der Antwort des Webservers

Der Browser weiß also bereits anhand der ersten Ziffer, ob seine Anfrage erfolgreich war oder nicht. Je nach Antwortnummer kann der Browser dann eine entsprechende Meldung an den Benutzer ausgeben. Tabelle 18.2 enthält die wichtigsten Antwortcodes der Webserver. Code

Bedeutung

200

OK. Alles klar. Roger.Über diese Nummer freut sich jeder Browser.

301

Moved Permanently. Das angeforderte Dokument wurde verschoben und liegt jetzt unter einer anderen Adresse vor, die der Webserver auch gleich mitsendet. Hilfreich bei der Optimierung für Suchmaschinen (SEO).

Tabelle 18.2

452

Die wichtigsten Antwortnummern des Webservers

Abfangjäger: 404 und 403

Code

Bedeutung

302

Found. Wie 301, aber nur vorübergehend (temporarily). Ebenfalls SEO-relevant.

400

Bad Request. Syntaxfehler in der Anfrage. Der Server kann die Anfrage nicht verstehen. Das Äquivalent zu: »Häh? Was hast du gesagt? No comprende.«

401

Unauthorized. »Darf ich mal Ihren Ausweis sehen?« – Wenn die »Authentisierung« (so nennt der Apache das wirklich) fehlgeschlagen ist, kommt ein Error 401.

403

Forbidden. Zugriff verweigert. Warum und wieso muss der Server nicht sagen.

404

Not Found. Der Klassiker. Das angeforderte Dokument kann nicht gefunden werden.

500

Internal Server Error. »Tut mir leid, da ist was kaputt, aber ich weiß auch nicht genau, was.« Auf der Serverseite trat ein nicht näher erläuterter Fehler auf. Keine gute Meldung.

503

Service Unavailable. Der Server ist überlastet oder zurzeit nicht in der Lage, die geforderte Aktion durchzuführen. Bitte versuchen Sie es später noch einmal.

Tabelle 18.2

Die wichtigsten Antwortnummern des Webservers (Forts.)

18.4.2 404-Seite nicht gefunden: Darf’s vielleicht was anderes sein? Die Ursachen für eine 404-Antwort sind vielfältig und reichen von Tippfehlern bei der Eingabe der URL bis hin zum Löschen der gesuchten Seite. Letztendlich ist die Ursache auch nicht so wichtig, denn wichtiger ist, dass Sie auf Ihrer Website den Besuchern eine gute Alternative bieten. Im folgenden ToDo erstellen Sie zunächst eine Seite vom Typ 404 Seite nicht gefunden, die Contao immer dann ausgibt, wenn der Webserver einen 404-Fehler meldet: sehr praktisch, so ein spezieller Seitentyp. ToDo: Fehlerseite für »404 Not Found« erstellen 1. Öffnen Sie das Backend-Modul Seitenstruktur, und erstellen Sie eine Neue Seite, die Sie oberhalb der Startseite einfügen. Klicken Sie auf den Pfeil nach rechts neben dem Startpunkt der Website. 2. Geben Sie als Seitenname ein: »Seite nicht gefunden (404)« 3. Seitenalias kann leer bleiben. 4. Wählen Sie aus der Liste Seitentyp den Eintrag 404 Seite nicht gefunden. 5. Klicken Sie auf Seite veröffentlichen. 6. Klicken Sie auf Speichern und Schliessen.

453

18.4

18

Die Optimierung für Suchmaschinen

Damit haben Sie eine Seite erstellt, die Contao im Falle einer nicht gefundenen Seite ausliefert. Jetzt fehlt für diese Seite nur noch ein bisschen Inhalt. Sie könnten die Seite im Bereich Auto-Weiterleitung einfach auf eine andere Seite weiterleiten. Das ist besser als eine Browserfehlermeldung, aber der Besucher wird dann nie erfahren, dass es einen Fehler gab, und sich zumindest unbewusst wundern, warum er auf einer ganz anderen Seite gelandet ist. Eine gute 404-Fehlerseite teilt dem Besucher auf freundliche Art mit, dass es die gesuchte Seite nicht gibt, und bietet ihm idealerweise auch gleich ein paar lesenswerte Alternativen, zum Beispiel in Form einer Sitemap. Dr. Web hat einige der schönsten 404-Fehlerseiten gesammelt: 왘

http://www.drweb.de/magazin/404-fehlerseiten-error/

Im folgenden ToDo erstellen Sie ein bisschen Inhalt für die 404-Seite. ToDo: Inhalt für die 404-Fehlerseite erstellen 1. Öffnen Sie im Backend-Modul artikel den Artikel Seite nicht gefunden (404) zur Bearbeitung. 2. Fügen Sie ein Neues Element vom Typ Text hinzu. 3. Überschrift (h1): »404 — Seite nicht gefunden.« 4. Text: »Leider konnte die von Ihnen angeforderte Seite nicht gefunden werden. Vielleicht gibt es ja in der nachfolgenden Inhaltsübersicht eine brauchbare Alternative. Das ist alles, was wir hier haben:«. 5. Vergeben Sie die CSS-Klasse »seitenanfang«. 6. Klicken Sie auf Speichern und neu. 7. Wählen Sie als Elementtyp den Eintrag Modul. 8. Wählen Sie als Modul die Navigation – Sitemap (ID xx) für das Cover Theme. 9. Klicken Sie auf Speichern und Schliessen.

Falls jemand eine nicht vorhandene Seite aufruft, sieht er im Browser jetzt folgende Fehlerseite (Abbildung 18.12). Falls die Seite bei einigen falschen URLs nicht angezeigt werden sollte, hilft folgender Eintrag ganz am Anfang der .htaccess-Datei im Hauptordner: # 2010-09-28 # Fehlerseite für den 404 – Seite nicht gefunden ErrorDocument 404 /contaobuch/index.php Listing 18.4

454

Eintrag für die 404-Seite in der ».htaccess«

Abfangjäger: 404 und 403

Abbildung 18.12 Die 404-Fehlerseite in Aktion

In der ersten Kommentarzeile tragen Sie das aktuelle Datum ein (nur damit Sie auch später noch wissen, wann Sie das gemacht haben), und statt /contaobuch geben Sie den Pfad zu Ihrer Contao-Installation an. Liegt Contao im Hauptordner, lautet der Eintrag /index.php. Die Erweiterung »[ext404]« – Extended 404 Es gibt eine Erweiterung namens [ext404] von Benjamin Meier (b2m), die es durch die Erstellung spezieller Frontend-Module ermöglicht, dem Besucher Hinweise auf die genaue Ursache des 404-Fehlers zu geben: 왘

falsche Eingabe oder veralteter Bookmark

왘

veralteter Link im Index der Suchmaschine

왘

falscher Link auf der eigenen Seite (Information per E-Mail)

왘

falscher Link auf anderer Seite (Information per E-Mail)

Suchen Sie bei Interesse im Backend-Modul Erweiterungskatalog nach [ext404], und installieren Sie sie.

18.4.3 403 Zugriff verweigert: Diese Seite gibt es, aber nicht für Sie Auf die gleiche Art und Weise können Sie eine Fehlerseite für den Fehler 403 erstellen. Diese Fehlermeldung erscheint zum Beispiel dann, wenn ein Besucher eine Seite aufruft, die nur für registrierte Mitglieder abrufbar ist.

455

18.4

18

Die Optimierung für Suchmaschinen

Im folgenden ToDo erstellen Sie eine Seite, die den Besucher bei einem 403-Fehler automatisch auf die Sitemap weiterleitet. Er braucht ja eigentlich gar nicht zu wissen, dass es hier für ihn verbotene Früchte gibt, aber wenn Sie möchten, können Sie statt der Auto-Weiterleitung auch einen netten Text ausgeben. ToDo: Fehlerseite für »403 Forbidden« erstellen 1. Öffnen Sie das Backend-Modul Seitenstruktur, und erstellen Sie eine Neue Seite, die Sie unterhalb der 404-Seite einfügen. 2. Geben Sie als Seitenname ein: »Zugriff verweigert (403)«. 3. Seitenalias kann leer bleiben. 4. Wählen Sie in Seitentyp den Eintrag 403 Zugriff verweigert. 5. Seite veröffentlichen nicht vergessen. 6. Klicken Sie auf Speichern und Schliessen. 7. Öffnen Sie im Backend-Modul artikel den Artikel Zugriff verweigert (403) zur Bearbeitung. 8. Fügen Sie ein Neues Element vom Typ Text hinzu. 9. Überschrift (h1): »403 — Zugriff verweigert.« 10. Text: »Der Zutritt zu dieser Seite ist aus irgendwelchen Gründen nicht gestattet. Vielleicht müssen Sie sich vorher anmelden.« 11. Vergeben Sie die CSS-Klasse »seitenanfang«. 12. Klicken Sie auf Speichern und Schliessen.

Testen können Sie diesen Fehler erst, wenn Sie in Kapitel 19, »Mitglieder: Im Frontend angemeldete Besucher«, einen geschützten Downloadbereich eingerichtet haben und zum Beispiel die Downloadseite aufrufen, ohne angemeldet zu sein.

18.5

Eine XML-Sitemap für Google & Co

Die Google Webmaster-Tools geben einem Websitebetreiber eine fast vollständige Übersicht darüber, wie Google Ihre Webseiten sieht: http://www.google.com/webmasters/ Zur Anmeldung benötigen Sie ein Google-Konto, und bevor Sie Ihre Websites hier analysieren können, müssen Sie nachweisen, dass Sie dazu berechtigt sind, aber das wird auf den Seiten der Webmaster-Tools ausführlich erklärt. Die Google Webmaster Tools begannen einst unter dem Namen Google Sitemaps, und eine zentrale Funktion der Tools ist auch heute noch die Anmeldung einer

456

Eine XML-Sitemap für Google & Co

XML-Sitemap. Eine solche XML-Sitemap hat nichts mit der auf der Seite Sitemap dargestellten Übersicht der Seiten zu tun. Die XML-Sitemap ist ein maschinenlesbares Inhaltsverzeichnis der eigenen Webseiten, das der GoogleBot als Grundlage zur Indizierung Ihrer Seiten verwendet. Mit einer XML-Sitemap geben Sie dem GoogleBot also quasi eine ToDo-Liste für Ihre Website mit auf den Weg. In Contao können Sie eine solche XML-Sitemap in der Seitenstruktur bei einem Startpunkt einer Website ganz einfach automatisch erstellen lassen. Die Erstellung einer Sitemap können Sie auch auf einer lokalen Installation ausprobieren, die Anmeldung der Sitemap bei Google sollten Sie allerdings nur vornehmen, wenn die Site online ist und auch wirklich indiziert werden soll. ToDo: XML-Sitemap erstellen 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Klicken Sie auf den gelben Bleistift zur Bearbeitung des Startpunktes Beispielsite Contaobuch. 3. Aktivieren Sie im Bereich XML-Sitemap das Kontrollkästchen vor der Option Eine XML-Sitemap erstellen. 4. Geben Sie den gewünschten Vornamen der Sitemap ein, zum Beispiel »beispielsitecontaobuch-sitemap«. Contao erstellt die Sitemap im Hauptordner und ergänzt die Endung .xml automatisch. 5. Klicken Sie auf Speichern und Schliessen.

Jetzt haben Sie im Hauptordner der Contao-Installation eine Datei mit dem Namen beispielsite-contaobuch-sitemap.xml (Abbildung 18.13). In dieser Datei sind gemäß einer von Google vorgegebenen XML-Struktur alle Seiten aus dem Seitenbaum und auch alle Seiten mit einer Einzelansicht der Nachrichtenbeiträge, Events und FAQ-Einträge aufgelistet. Die XML-Sitemap wird automatisch einmal täglich und bei jeder Änderung an der Seitenstruktur aktualisiert. Im Backend-Modul Systemwartung haben Sie im Bereich Daten bereinigen zusätzlich die Möglichkeit, die Sitemap manuell neu erzeugen zu lassen, wenn Sie zum Beispiel einen neuen Nachrichtenbeitrag geschrieben haben. Kreuzen Sie einfach XML-Dateien an, und klicken Sie auf Dateien bereinigen. Damit wird der Newsfeed auch gleich aktualisiert.

457

18.5

18

Die Optimierung für Suchmaschinen

Abbildung 18.13

So sieht die XML-Sitemap im Browser aus.

Wenn Sie mit einer XML-Sitemap arbeiten möchten, sollten Sie sich auch einmal die folgenden Erweiterungen von Andreas Schrempp anschauen. Damit können Sie quasi eine »XML-Sitemap de Luxe« erstellen: 왘

[googlesitemap] Google Sitemap Erweiterung

왘

[newssitemap] News Sitemap

Mit diesen Erweiterungen an Bord haben Sie viel mehr Einstellmöglichkeiten für die Google-Sitemap, zum Beispiel die gewünschte Besuchsfrequenz des GoogleBots. Vortrag zu »Contao-Erweiterungen für SEO« Beim Contao-Usertreffen in Essen 2010 hat Jan Theofel einen sehr interessanten Vortrag über das Theme »Contao-Erweiterungen für SEO« gehalten: 왘

Contao-Erweiterungen für SEO von Jan Theofel http://bit.ly/bkd0DL

Dort werden Sie jede Menge SEO-Ideen für Ihre Contao-Site finden.

458

In diesem Kapitel erfahren Sie gleich am Anfang den Unterschied zwischen Mitgliedern und Benutzern. Danach erstellen Sie eine An- und Abmeldung für Mitglieder und einen geschützten Downloadbereich.

19

Mitglieder: Im Frontend angemeldete Besucher

Bevor Sie sich in diesem Kapitel mit der Verwaltung von Mitgliedern beschäftigen, möchte ich kurz den Unterschied zwischen Mitgliedern und Benutzern erklären. Die Benutzerverwaltung folgt dann in Kapitel 20, »Benutzer: Im Backend angemeldete Mitarbeiter«.

19.1

Mitglieder und Benutzer: Der Unterschied

Contao unterscheidet zwischen Frontendbenutzern (Mitglieder) und Backendbenutzern (Benutzer). Verwaltet werden sowohl Mitglieder als auch Benutzer im Backend in der Kategorie Benutzerverwaltung, die im englischen Backend den schönen Namen »Account Manager« trägt.

Abbildung 19.1 Die Benutzerverwaltung im Backend

459

19

Mitglieder: Im Frontend angemeldete Besucher

Auch wenn Mitglieder und Benutzer im Backend in derselben Kategorie verwaltet werden, haben sie eigentlich nur die Anmeldung gemeinsam. Alles andere ist anders: 왘

Mitglieder melden sich am Frontend an und sehen nach einer Anmeldung für Gäste unsichtbare Ressourcen. Das können zusätzliche Seiten, Artikel oder Inhaltselemente sein oder auch ein Downloadbereich. Beispiele für die Verwendung von Mitgliedern sind Kunden, denen Sie auf der Website exklusive Informationen zugänglich machen möchten, oder Seminarteilnehmer, die nach einer Anmeldung den geschützten Bereich für das betreffende Seminar sehen. Mitglieder sind relativ einfach zu verwalten, da sie per Zugriffsschutz eine bestimmte Ressource im Frontend entweder sehen oder nicht sehen.

왘

Benutzer melden sich am Backend an und arbeiten an der Site selbst. Ein Beispiel sind Redakteure, die einen Bereich der Website redaktionell betreuen. Für Benutzer gibt es in Contao sehr komplexe Zugriffsrechte, mit denen Sie detailliert einstellen können, was ein Benutzer im Backend sehen soll. Ein Redakteur z. B. kann problemlos nur die Backend-Module Artikel und Dateiverwaltung sehen, in denen wiederum nur die Seiten und Ordner auftauchen, die für ihn freigegeben sind. Die Rechtevergabe geht hinunter bis auf einzelne Bearbeitungsfelder: Sie können bei der Artikelbearbeitung z. B. nur das Feld zum Veröffentlichen verstecken, sodass der Redakteur Artikel zwar erstellen, bearbeiten und speichern, aber nicht veröffentlichen kann. Das macht dann der Chefredakteur.

Tabelle 19.1 zeigt eine Übersicht über die Unterschiede zwischen Mitgliedern und Benutzern. Mitglieder

Benutzer

Anmeldung am Frontend

Anmeldung am Backend

Frontendbenutzer

Backendbenutzer

Registrierter Besucher

Mitarbeiter an der Site

Beispiel: Kunden

Beispiel: Redakteure

Einfacher Zugriffschutz

Komplexe Zugriffsrechte

Tabelle 19.1

Übersicht über Mitglieder und Benutzer

Aber genug der Worte. Los geht's mit der Verwaltung von Mitgliedern und einem Downloadbereich. Benutzer folgen wie gesagt in Kapitel 20.

460

Mitgliedergruppen und Mitglieder einrichten

19.2

Mitgliedergruppen und Mitglieder einrichten

Ein Mitglied muss immer Teil einer Mitgliedergruppe sein, und deshalb beginnen Sie in diesem Abschnitt mit der Einrichtung einer Mitgliedergruppe namens Kunden.

19.2.1

Mitgliedergruppen einrichten

Die Einrichtung einer Mitgliedergruppe ist so einfach, dass ein kurzes ToDo ohne weitere Erklärungen völlig ausreicht. ToDo: Mitgliedergruppe »Kunden« einrichten 1. Öffnen Sie in der Kategorie Benutzerverwaltung das Backend-Modul Mitgliedergruppen. 2. Klicken Sie rechts oben in den Arbeitsbereich Neue Gruppe. 3. Der Titel soll »Kunden« sein. 4. Wählen Sie keine Weiterleitung. Dadurch bleibt der Besucher nach der Anmeldung auf der Seite, auf der er sich angemeldet hat. 5. Klicken Sie auf Speichern und Schliessen.

Das war es schon. Kurz und schmerzlos. Auf zu den Mitgliedern.

19.2.2 Mitglieder einrichten Die Einrichtung eines Mitglieds ist ebenfalls recht einfach. Im Backend-Modul Mitglieder gibt es dazu ein Formular, in dem Sie bei Bedarf detaillierte Informationen zu jedem Mitglied eintragen können. Pflichtfelder sind Vorname, Nachname und E-Mail-Adresse. Im folgenden ToDo wird Donna Evans, Studentin an der Music Academy, Mitglied der Beispielsite. ToDo: Mitglied einrichten 1. Öffnen Sie in der Kategorie Benutzerverwaltung das Backend-Modul Mitglieder. 2. Klicken Sie rechts oben im Arbeitsbereich auf Neues Mitglied. 3. Geben Sie die folgenden Daten ein: Vorname: »Donna« Nachname: »Evans« E-Mail-Adresse: »« 4. Donna Evans soll Mitglied der Gruppe Kunden werden.

461

19.2

19

Mitglieder: Im Frontend angemeldete Besucher

ToDo: Mitglied einrichten (Forts.) 5. Aktivieren Sie das Kontrollkästchen vor Login erlauben. Benutzername: »d.evans« Passwort: »donnaevans« (Passwort auch bestätigen) 6. Donna Evans bekommt kein Benutzerverzeichnis und keine Abonnements. 7. Klicken Sie auf Speichern und Schliessen.

Sie haben jetzt die Mitgliedergruppe Kunden, in der es ein Mitglied namens Donna Evans gibt.

19.3

Seiten und Module für die An- und Abmeldung erstellen

Damit sich Frontend-Benutzer anmelden können, benötigen sie eine Möglichkeit zur Anmeldung. Dazu erstellen Sie in den folgenden Abschnitten wie immer ein paar Seiten und ein paar Frontend-Module, die dann in entsprechenden Artikeln bzw. im Seitenlayout eingebunden werden.

19.3.1 Seiten zur An- und Abmeldung erstellen Sie beginnen mit der Erstellung von drei Seiten zur An- und Abmeldung, die Sie ganz unten im Seitenbaum erstellen. Damit der Baum nicht zu unübersichtlich wird, erstellen Sie zunächst eine im Menü versteckte Seite namens Mitglieder. Alle zur Mitgliederverwaltung benötigten weiteren Seiten legen Sie dann als Unterseite dazu an. Im folgenden ToDo erstellen Sie zwei Unterseiten: eine zum Anmelden und eine zum Abmelden. Der Trick bei der Sache ist, dass Sie die Seite Anmelden nur für Gäste anzeigen. Sobald ein Besucher sich anmeldet, verschwindet die Seite und wird durch die Seite Abmelden ersetzt, die das perfekte Gegenstück bildet: Sie hat einen Zugriffsschutz und wird nur angezeigt, wenn sich ein Mitglied der Gruppe Kunden angemeldet hat. ToDo: Seiten zur An- und Abmeldung erstellen 1. Öffnen Sie das Backend-Modul Seitenstruktur. 2. Erstellen Sie am Ende des Seitenbaums eine neue reguläre Seite: Der Seitenname ist »Mitglieder«. Nicht durchsuchen Im Menü verstecken Seite veröffentlichen Speichern und Schliessen

462

Seiten und Module für die An- und Abmeldung erstellen

ToDo: Seiten zur An- und Abmeldung erstellen (Forts.) 3. Erstellen Sie eine reguläre Seite als Unterseite zu Mitglieder: Der Seitenname ist »Anmelden«. Cachezeit festlegen: aktivieren und auf 0 (nicht cachen) setzen Nicht durchsuchen Nur Gästen anzeigen: aktivieren Seite veröffentlichen Speichern und neu

4. Erstellen Sie eine reguläre Seite auf derselben Ebene wie Anmelden: Der Seitenname ist »Abmelden«. Zugriffsschutz – Seite schützen. Erlaubt für Gruppe »Kunden«. Cachezeit festlegen: aktivieren und auf 0 (nicht cachen) setzen Nicht durchsuchen: aktivieren Seite veröffentlichen Speichern und Schliessen

Im Backend sollte der neue Teil des Seitenbaums so aussehen wie in Abbildung 19.2.

Abbildung 19.2 Die neuen Seiten für Mitglieder im Seitenbaum

Achten Sie besonders auf die Symbole für die drei neuen Seiten: Mitglieder ist grau und im Menü versteckt, Anmelden ist eine ganz normale Seite, und Abmelden hat ein kleines Schloss, um zu zeigen, dass ein Zugriffsschutz aktiviert ist. Die Seiten erscheinen momentan nirgendwo im Menü, sind aber bereits vorhanden.

19.3.2 Die Module zur Anmeldung im Überblick Insgesamt benötigen Sie in diesem Kapitel vier Frontend-Module, um ein komplettes Anmeldesystem zu erstellen: 1. Ein Modul vom Typ Login-Formular stellt ein Anmeldeformular bereit. 2. Ein Modul vom Typ Automatisches Logout arbeitet unsichtbar im Hintergrund und regelt die Abmeldung.

463

19.3

19

Mitglieder: Im Frontend angemeldete Besucher

3. Ein Modul vom Typ Eigenes HTML zeigt für Gäste einen Link zur Anmeldeseite im Footer. 4. Ein weiteres Modul vom Typ Eigenes HTML zeigt für angemeldete Benutzer den Anmeldenamen (»Sie sind angemeldet als...«) und einen Link zum Abmelden. Die Module 1 und 2 werden in Artikeln auf den eben erstellten Seiten eingebunden, die Module 3 und 4 im Seitenlayout in der Spalte Fußbereich. Ironie am Rande: Die »Benutzermodule« sind für Mitglieder Um Verwirrungen vorzubeugen: Die Frontend-Module zur Verwaltung von Mitgliedern stehen in der Modulverwaltung in einer Gruppe namens Benutzer und werden intern auch als Benutzermodule bezeichnet. Die Module sind aber allesamt für Mitglieder, nicht für Benutzer.

19.3.3 Ein Modul für das Anmeldeformular: »[Login-Formular]« Sie beginnen in diesem Abschnitt mit der Erstellung des ersten Moduls, das ein Anmeldeformular bereitstellt. ToDo: Modul zur Anmeldung erstellen 1. Öffnen Sie für das aktuelle Theme das Backend-Modul zur Bearbeitung der Frontend-Module. 2. Erstellen Sie ein neues Modul mit den folgenden Eigenschaften: Titel: »Mitglieder – Anmeldeformular« Überschrift: »Anmeldung« Modultyp: Benutzer – Login-Formular Autologin erlauben: aktivieren Keine Weiterleitungsseite Wählen Sie als Template bei Anzahl an Spalten Eine Spalte aus. Kein Zugriffsschutz 3. Vergeben Sie im Bereich Experten-Einstellungen die CSS-Klasse »seitenanfang«. 4. Klicken Sie auf Speichern und Schliessen.

Das AutoLogin bewirkt, dass im Anmeldeformular ein Kontrollkästchen mit der Beschriftung Angemeldet bleiben erscheint, dass dem Besucher eine dauerhafte Anmeldung ermöglicht. Das einspaltige Template erstellt im HTML ein tabellenloses Formular. Die Alternative zweispaltig erstellt ein Formular mit einer einfachen, nicht verschachtelten Tabelle.

464

Seiten und Module für die An- und Abmeldung erstellen

19.3.4 Ein Modul zur Abmeldung: »[Automatischer Logout]« Das Modul zur Abmeldung arbeitet im Hintergrund und ist im Frontend nicht zu sehen. Nach einer Abmeldung bleibt der Besucher auf der zuletzt besuchten Seite, wird also nicht auf eine andere Seite umgeleitet. ToDo: Modul zur Abmeldung erstellen 1. Öffnen Sie für das aktuelle Theme das Backend-Modul zur Bearbeitung der Frontend-Module. 2. Erstellen Sie ein neues Modul mit den folgenden Eigenschaften: Titel: »Mitglieder – Abmelden« Modultyp: Benutzer – Automatischer Logout Zur zuletzt besuchten Seite: aktivieren Kein Zugriffsschutz Keine Experten-Einstellungen 3. Klicken Sie auf Speichern und Schliessen.

19.3.5 Modul für den Link zur Anmeldeseite: »[Eigener HTML-Code]« Damit die Mitglieder die URL der Anmeldeseite nicht manuell in der Adressleiste des Browsers eingeben müssen, erstellen Sie in diesem Abschnitt ein einfaches Modul mit einem Link zur Anmeldeseite. Dieses Modul wird Nur für Gäste angezeigt, und nach einer Anmeldung verschwindet es von selbst. Für den Link zur Anmeldeseite benutzen Sie im folgenden ToDo den Insert-Tag {{link::xx}} und tragen dabei statt xx den Seitenalias der Seite Anmelden ein,

und das ist anmelden (kleingeschrieben). ToDo: Modul mit einem Link zur Anmeldeseite erstellen 1. Öffnen Sie für das aktuelle Theme das Backend-Modul zur Bearbeitung der Frontend-Module. 2. Erstellen Sie ein neues Modul mit den folgenden Eigenschaften: Titel: »Mitglieder – Link zur Anmeldeseite« Modultyp: Verschiedenes – Eigener HTML-Code Nur Gästen anzeigen: ankreuzen 3. Geben Sie im Feld HTML-Code das folgende HTML ein:
{{link::anmelden}}


4. Klicken Sie auf Speichern und Schliessen.

Statt des Seitenalias können Sie im Insert-Tag auch die ID der Anmeldeseite benutzen. Um die ID einer Seite herauszufinden, gehen Sie in den Seitenbaum, fah-

465

19.3

19

Mitglieder: Im Frontend angemeldete Besucher

ren mit der Maus auf den gelben Bleistift und halten eine Sekunde lang still. Dann erscheint eine Quickinfo mit dem Hinweis »Seite ID xx bearbeiten«. Der Vorteil des Seitenalias gegenüber der ID ist eine leichtere Lesbarkeit.

19.3.6 Anmeldenamen und Abmeldelink: »[Eigener HTML-Code]« Das Modul Mitglieder – Link zur Anmeldeseite wurde durch das Aktivieren der Option Nur Gästen anzeigen so erstellt, dass es nach einer Anmeldung automatisch verschwindet. Nach einer erfolgreichen Anmeldung soll an derselben Stelle die Mitteilung »Angemeldet als: ... | Abmelden« stehen. Im folgenden ToDo erstellen Sie das dazu benötigte Modul mit zwei einfachen Insert-Tags. Der Trick ist dabei der Zugriffsschutz, der die Anzeige auf die Gruppe Kunden beschränkt. Für den Link zum Abmelden benötigen Sie die ID oder den Alias der Seite Abmelden. ToDo: Modul zum Anzeigen des Anmeldenamens erstellen 1. Öffnen Sie für das aktuelle Theme das Backend-Modul zur Bearbeitung der Frontend-Module. 2. Erstellen Sie ein neues Modul mit den folgenden Eigenschaften: Titel: »Mitglieder – Anmeldename und Abmeldelink« Modultyp: Verschiedenes – Eigener HTML-Code 3. Geben Sie im Feld HTML-Code das folgende HTML ein:
Angemeldet als: {{user::username}} | {{link::abmelden}}


4. Aktivieren Sie im Bereich Zugriffsschutz die Checkbox Modul schützen, und kreuzen Sie die Gruppe Kunden an. 5. Klicken Sie auf Speichern und Schliessen.

19.4

Die erstellten Module einbinden und gestalten

Nachdem Sie die vier Module erstellt haben, müssen sie jetzt noch eingebunden werden.

19.4.1 Die Module zum An- und Abmelden in Artikeln einbinden Zunächst binden Sie die Module zum Anmelden und zum Abmelden in den entsprechenden Artikeln ein. Danach erscheinen die Module erstmals im Frontend und wären schon einsetzbar.

466

Die erstellten Module einbinden und gestalten

ToDo: Module zum An- und Abmelden in Artikeln einbinden 1. Öffnen Sie im Artikelbaum den Artikel Anmelden [Hauptspalte]. 2. Fügen Sie ein neues Element vom Typ Modul hinzu. 3. Wählen Sie das Modul Mitglieder – Anmeldeformular (ID xx), und geben Sie dem Artikel die CSS-Klasse »seitenanfang«. 4. Klicken Sie auf Speichern und zurück. 5. Öffnen Sie im Artikelbaum den Artikel Abmelden [Hauptspalte]. 6. Fügen Sie ein neues Element vom Typ Modul hinzu. 7. Wählen Sie das Modul Mitglieder – Abmelden (ID xx). 8. Klicken Sie auf Speichern und Schliessen.

Nach diesem Schritt funktionieren An- und Abmeldung bereits, aber da es noch keinen Link zur Seite Anmelden gibt, müssen Sie die URL im Browser manuell eingeben. Wenn Sie ganz neugierig sind, probieren Sie es einfach einmal aus, aber nach dem nächsten Abschnitt geht das viel bequemer.

19.4.2 Module für den Fußbereich im Seitenlayout einbinden Um die Anmeldeseite nicht manuell aufrufen zu müssen, binden Sie im folgenden ToDo die bereits erstellten Module für die Fußzeile im Seitenlayout ein. Das erste Modul, Mitglieder – Link zur Anmeldeseite, zeigt einen Link zur Anmeldeseite und wird nach einer erfolgreichen Anmeldung durch das zweite Modul, Mitglieder – Anmeldename und Abmeldelink, ersetzt. Dieses Modul zeigt im Fußbereich den Anmeldenamen und einen Link zum Abmelden. Abbildung 19.3 zeigt die beiden Module nach der Einbindung in einem Seitenlayout im folgenden ToDo.

Abbildung 19.3

Die beiden Module nach der Einbindung im Seitenlayout

467

19.4

19

Mitglieder: Im Frontend angemeldete Besucher

Da es inzwischen mehrere Seitenlayouts gibt, benutzen Sie im ToDo einmal mehr die Funktion Mehrere bearbeiten. ToDo: Zwei Module im Seitenlayout einbinden 1. Öffnen Sie im Backend-Modul Themes die Seitenlayouts für das aktuelle Theme. 2. Klicken Sie oben im Arbeitsbereich auf Mehrere bearbeiten, wählen Sie alle Seitenlayouts aus, und klicken Sie unten auf Bearbeiten. 3. Aktivieren Sie die Felder Titel und Eingebundene Module, und klicken Sie unten auf Weiter. Danach sehen Sie die eingebundenen Module für alle drei Seitenlayouts direkt untereinander. 4. Erstellen Sie beim ersten Seitenlayout eine Kopie der letzten Zeile Layout-Footer in Fußzeile (mit einem Klick auf das grüne Kreuz). Falls hier bereits Zeilen mit Artikel in Fußzeile stehen sollten, können Sie auch diese zum Einbinden der beiden Module nutzen. 5. Wählen Sie in der unteren der beiden Zeilen das Modul Mitglieder – Link zur Anmeldeseite. 6. Erstellen Sie eine Kopie der letzten Zeile, und wählen Sie in der untersten Zeile das Modul Mitglieder – Anmeldename und Abmeldelink. 7. Wiederholen Sie diese Schritte für die anderen beiden Seitenlayouts. 8. Klicken Sie auf Speichern und Schliessen.

Jetzt ist alles fertig, und es kann getestet werden.

19.4.3 An- und Abmeldung testen Wenn man etwas einbaut, muss man auch testen, ob es funktioniert. Der erste Test ist, ob in der Fußzeile auf allen Seiten der Link zum Anmelden erscheint. Dazu überprüfen Sie für jedes Seitenlayout eine Seite, also zum Beispiel die Startseite, die Nachrichten und die Erweiterungen. Ist der Anmeldelink überall vorhanden, folgt der zweite Test. Ein Klick auf den Link Anmelden in der Fußzeile führt Sie zur Seite Anmelden mit dem Anmeldeformular. Falls das Anmeldeformular bei Ihnen noch nicht ganz so ordentlich aussieht wie in Abbildung 19.4. HTML und CSS folgen im nächsten Abschnitt. Beachten Sie in der linken Spalte, dass dort sogar eine Unternavigation anzeigt, auf welcher Seite wir gerade sind. Das funktioniert, weil dort das Modul zur Unternavigation eingebunden ist und Sie zwar die Seite »Mitglieder« auf der ersten Ebene im Menü versteckt haben, die Unterseite »Anmelden« aber nicht.

468

Die erstellten Module einbinden und gestalten

Der dritte Test ist die Anmeldung mit dem Benutzernamen d.evans und dem Passwort donnaevans. Nach einem Klick auf Anmelden verändert sich die Seite (Abbildung 19.5).

Abbildung 19.4

Die Seite »Anmelden« mit dem Anmeldeformular

Abbildung 19.5

Die Anmeldeseite nach einer erfolgreichen Anmeldung

Wenn Sie auf andere Seiten wechseln, bleiben in der Fußzeile die Anzeige des Benutzernamens und der Link zum Abmelden erhalten, bis sich der Benutzer abmeldet. Dann erscheint dort wieder der Link zum Anmelden. Perfekt.

469

19.4

19

Mitglieder: Im Frontend angemeldete Besucher

Frontend-Vorschau: Das Frontend aus der Sicht eines Mitglieds Wenn Sie im Backend oben auf den Link Frontend-Vorschau klicken, können Sie in der Frontend-Vorschau in der gelben Leiste am oberen Fensterrand einen Frontend-Benutzer auswählen. Nach einem Klick auf die Schaltfläche Anwenden sehen Sie das Frontend aus der Sicht des ausgewählten Mitglieds.

19.4.4 Das Anmeldeformular gestalten Das Anmeldeformular wird vom Modul »Login-Formular« erzeugt und hat mit einem einspaltigen, tabellenfreien Template folgendes HTML:
Anmeldung
Benutzername
Passwort
Angemeldet bleiben
Listing 19.1

Das HTML für das Anmeldeformular

Gestaltet wurde dieses HTML auf der Beispielsite mit folgendem CSS, das auch noch eine Regel enthält, um die Links im Fußbereich weiß und somit lesbar zu machen: /* Links im Fußbereich */ #footer a { color: #fff; } /* Anmeldeformular */

470

Einen geschützten Downloadbereich einrichten

.mod_login form { line-height: 2; padding-top: 1em; } .mod_login label { float: left; width: 100px; } .mod_login .checkbox_container label { float: none; } .mod_login .checkbox_container input, .mod_login .submit_container input.submit { margin-left: 100px; } .mod_login input.submit[value="Abmelden"] { margin-left: 0; } Listing 19.2

19.5

Das CSS für das Anmeldeformular

Einen geschützten Downloadbereich einrichten

Die Anmeldung funktioniert, aber momentan werden die Mitglieder nach einer Anmeldung etwas enttäuscht sein, denn Sie sehen dasselbe wie vorher. In diesem Abschnitt wird deshalb die Downloadseite geschützt und nur für angemeldete Besucher der Gruppe Kunden sichtbar gemacht. Danach richten Sie auf der Downloadseite einen geschützten Downloadbereich ein. Schritt 1: Zugriffsschutz für die Seite »Downloads« Um die Seite Downloads zu verstecken und für Mitglieder der Gruppe Kunden wieder sichtbar zu machen, müssen Sie nur wenige, gezielte Klicks investieren. ToDo: Einen Zugriffsschutz für die Seite »Downloads« einrichten 1. Öffnen Sie im Backend-Modul Seitenstruktur die Seite Downloads zur Bearbeitung. 2. Aktivieren Sie im Bereich Zugriffsschutz das Kontrollkästchen vor der Option Seite schützen. 3. Aktivieren Sie in Erlaubte Mitgliedergruppen die Gruppe Kunden. 4. Klicken Sie auf Speichern und Schliessen.

Probieren Sie es aus. Nach diesem einfachen ToDo ist die Seite Downloads in der Navigationsleiste verschwunden.

471

19.5

19

Mitglieder: Im Frontend angemeldete Besucher

Abbildung 19.6 Ohne Anmeldung sind die »Downloads« verschwunden.

Nachdem Donna Evans sich als Mitglied der Gruppe Kunden angemeldet hat, erscheint sie automatisch wieder in der Navigationsleiste.

Abbildung 19.7 Nach einer Anmeldung ist »Downloads« wieder da.

Schritt 2: Den Ordner »Downloads« in der Dateiverwaltung schützen In der Dateiverwaltung von Contao gibt es bereits einen Ordner namens Downloads, in dem Sie Dateien zum Download anbieten können. Damit unangemeldete Besucher diesen Ordner nicht im Browser aufrufen können, wird er im Backend geschützt, und dazu benötigen Sie genau einen einzigen Klick. ToDo: Den Ordner »Downloads« in der Dateiverwaltung schützen 1. Öffnen Sie das Backend-Modul dateiverwaltung. 2. Blenden Sie den Ordner beispielsite/downloads ein.

472

Einen geschützten Downloadbereich einrichten

ToDo: Den Ordner »Downloads« in der Dateiverwaltung schützen (Forts.) 3. Klicken Sie in der Symbolleiste rechts auf das Schloss. 4. Das Schloss wird daraufhin grau, und der Ordner ist geschützt. 5. Laden Sie ein paar Dateien in den Ordner, die anschließend zum Download angeboten werden. Falls Sie nichts zur Hand haben, liegen im Beispielordner auf der Buch-DVD ein paar PDF-Leseproben der Little-Boxes-Bücher, die Sie benutzen können.

Fertig. Contao erzeugt im Ordner eine .htaccess-Datei, die das Verzeichnis schützt. Die PDFs darin sind so sicher, dass niemand mehr an sie herankommt, momentan nicht einmal die Mitglieder der Gruppe Kunden. Schritt 3: Das Inhaltselement »Downloads« Jetzt fehlt nur noch eine Möglichkeit, den Inhalt des Ordners gezielt für die Gruppe Kunden freizugeben, und auch das ist erstaunlich einfach: Auf der Seite Downloads fügen Sie ein Inhaltselement vom Typ Downloads ein. Dieses Inhaltselement ermöglicht es, bestimmte Dateien mit einem Zugriffsschutz zu versehen und nur für eine bestimmte Mitgliedergruppe wie z. B. Kunden freizugeben. Ohne Anmeldung ist die Ressource über den Browser nicht erreichbar. Das Inhaltselement Downloads listet alle Dateien in einem bestimmten Ordner auf, sein Inhaltselement-Kollege Download (ohne »s« am Ende) gilt nur für eine einzelne Datei. ToDo: Das Inhaltselement »Downloads« hinzufügen 1. Öffnen Sie im Backend-Modul Artikel den Artikel Downloads [Hauptspalte]. 2. Fügen Sie unterhalb der h1-Überschrift ein neues Inhaltselement ein. Falls noch keine Überschrift vorhanden sein sollte, können Sie sie auch im Inhaltselement angeben. Denken Sie dann auch an die CSS-Klasse »seitenanfang«. 3. Wählen Sie als Elementtyp aus der Liste den Eintrag Downloads. 4. Wählen Sie im Bereich Dateien und Ordner als Quelldatei den Ordner beispielsite/ downloads/. 5. Aktivieren Sie im Bereich Zugriffsschutz das Kontrollkästchen vor der Option Element schützen. 6. Aktivieren Sie bei Erlaubte Mitgliedergruppen die Gruppe Kunden. 7. Klicken Sie auf Speichern und Schliessen.

Und fertig ist der geschützte Downloadbereich. Gäste sehen die Seite Downloads nicht. Wenn sich ein Mitglied der Gruppe Kunden anmeldet, erscheint die Seite Downloads automatisch in der Navigationsleiste.

473

19.5

19

Mitglieder: Im Frontend angemeldete Besucher

Auf der Seite Downloads prüft das ebenfalls mit einem Zugriffsschutz versehene Inhaltselement Downloads noch einmal, ob ein Mitglied aus der Gruppe Kunden angemeldet ist. Falls ja, zeigt es den Inhalt des Ordners an, mit Symbolen für die häufigsten Dateitypen und der Dateigröße in Klammern hinter dem Dateinamen (Abbildung 19.8).

Abbildung 19.8

Downloadseite mit Dateien zum Download für »Kunden«

Wird die Seite Downloads aufgerufen, ohne dass ein Mitglieder der Gruppe Kunden angemeldet ist, präsentiert Contao die Abfangjägerseite 403 – Zugriff verweigert. Selbst wenn jemand die genaue URL der Download-Datei kennt, gibt es kein Durchkommen (Abbildung 19.9).

Abbildung 19.9

474

403 Zugriff verweigert – trotz genauer URL für die Datei

Weitere Möglichkeiten zur Mitgliederverwaltung

Download-Statistiken mit der Erweiterung »[dlstats]« Für die Inhaltselemente Download und Downloads gibt es eine kleine, aber feine Erweiterung, die die Anzahl der Datei-Downloads zählt: 왘

[dlstats] Download Statistiken http://bit.ly/aJaZFD

Auf Wunsch geschieht die Zählung auch mit Zeitstempel, IP-Adresse und Benutzername.

19.6

Weitere Möglichkeiten zur Mitgliederverwaltung

Zum Lieferumfang von Contao gehören noch eine Reihe weiterer Benutzermodule, die die Arbeit bei einer intensiven Nutzung der Mitgliederverwaltung durchaus erleichtern können. Es folgt eine kurze Beschreibung der einzelnen Module.

19.6.1 Das Modul »Passwort vergessen« Das Frontend-Modul Passwort vergessen fügt ein Formular hinzu, mit dem ein Mitglied ein neues Passwort anfordern kann (Abbildung 19.10).

Abbildung 19.10

Neues Passwort anfordern

Contao verschickt daraufhin eine E-Mail an das Mitglied mit einem Bestätigungslink mit einem zufällig gewählten Token. Nach dem Anklicken dieses Links kommt das Mitglied auf dieselbe Seite zurück und kann dort ein neues Passwort

475

19.6

19

Mitglieder: Im Frontend angemeldete Besucher

eingeben (Abbildung 19.11). Nach einem Klick auf die Schaltfläche Passwort übernehmen gibt es eine kurze Bestätigungsmeldung, dass das Passwort aktualisiert wurde.

Abbildung 19.11 Neues Passwort eingeben und bestätigen

In beiden Fällen verwendet das Modul Passwort vergessen die CSS-Klasse mod_ lostPassword. Dies ist kein Tippfehler, sondern sogenanntes CamelCase: ein Großbuchstabe mitten im Namen. Falls Sie diese Funktion einbauen möchten, benötigen Sie folgende Zutaten: 왘

eine im Menü versteckte Seite unterhalb von Mitglieder, die Sie zum Beispiel Passwort vergessen nennen. Die Seite wird nicht gecacht oder durchsucht, aber veröffentlicht.

왘

ein Frontend-Modul Passwort vergessen, das Sie nach dem Erstellen in einem Artikel auf der Seite Passwort vergessen einbinden

왘

einen Link, mit dem das vergessliche Mitglied die Seite Passwort vergessen aufrufen kann. Ein guter Platz für einen solchen Link wäre auf der Seite Anmelden direkt unterhalb des Anmeldeformulars.

Beim Erstellen des Moduls gibt es noch ein paar optionale Möglichkeiten. Mit einer Weiterleitungsseite können Sie festlegen, auf welche Seite das Mitglied nach dem Anfordern eines neuen Passworts weitergeleitet wird. Wenn Sie hier nichts auswählen, bleibt das Mitglied auf der Seite Passwort vergessen. Zur Bestätigungsseite wird das Mitglied nach erfolgreicher Erstellung eines neuen Passworts weitergeleitet. Wenn Sie keine Seite angeben, bleibt das Mitglied auf der Seite Passwort vergessen, was in der Regel völlig in Ordnung ist. Last,

476

Weitere Möglichkeiten zur Mitgliederverwaltung

but not least enthält das Modul bereits einen Text für die Bestätigungsmail, den Sie bei Bedarf an Ort und Stelle ändern können.

19.6.2 Das Modul »Persönliche Daten« Das Modul Persönliche Daten generiert ein Formular, mit dem ein Mitglied seine persönlichen Daten wie E-Mail-Adresse oder Passwort ändern kann. Bei der Erstellung des Moduls können Sie genau festlegen, welche Felder geändert werden dürfen und welche nicht. Um das Modul Persönliche Daten einzusetzen, benötigen Sie Folgendes: 왘

eine reguläre Seite namens Persönliche Daten oder Mein Konto unterhalb von Mitglieder. Schützen Sie die Seite, und erlauben Sie den Zugriff nur für die Gruppe Kunden; erlauben Sie kein Cachen und auch nicht das Durchsuchen.

왘

ein Modul Persönliche Daten, das per Artikel auf der Seite eingebunden wird

Ein Link ist nicht zwingend notwendig, da die Seite ja nicht im Menü versteckt ist und unterhalb von Anmelden in der Unternavigation erscheint. Ansonsten würde sich ein Link per Insert-Tag im Footer-Modul Mitglieder – Link zur Anmeldeseite anbieten. Das Modul verwendet die CSS-Klasse .mod_personalData – mit großem »D«.

19.6.3 Die automatische Registrierung für Mitglieder Wenn Sie keinen geschlossenen Kundenkreis, sondern mehr ein offenes Haus einrichten möchten, können Sie mit dem Modul Mitgliederregistrierung ein Formular generieren, das den Besuchern Ihrer Seiten eine automatische Registrierung ermöglicht. Das funktioniert ähnlich wie bei der Registrierung für den Newsletter in Abschnitt 15.3, »Newsletter im Frontend abonnieren und kündigen«. Noch mehr Erweiterungen zur Verwaltung von Mitgliedern Im Erweiterungskatalog von Contao gibt es noch weitere Module zur Verwaltung von Mitgliedern: 왘

Contao-Erweiterungen zum Schlagwort »Mitglieder« http://bit.ly/decrRu

Achten Sie vor dem Installieren wie immer darauf, ob die gewünschte Erweiterung kompatibel zu Ihrer Contao-Version ist.

477

19.6

In diesem Kapitel lernen Sie die ausgefeilte Benutzerverwaltung von Contao kennen. Jeder Benutzer sieht im Backend nur das, was er sehen soll. Im Laufe des Kapitels erstellen Sie eine Benutzerin, zwei Benutzergruppen und diverse Zugriffsrechte: alles, was man so braucht.

20

Benutzer: Im Backend angemeldete Mitarbeiter

Nach der Mitgliederverwaltung kommt jetzt die Benutzerverwaltung an die Reihe. Benutzer melden sich wie erwähnt am Backend an und helfen in der Regel, die Inhalte der Website zu pflegen.

20.1

Benutzerverwaltung: Die Übersicht

Bis jetzt haben Sie im Backend ausschließlich als Administrator gearbeitet und haben dabei immer Zugriff auf alle Optionen gehabt. Ein normaler Benutzer sieht im Gegensatz zum Administrator vom Backend hingegen nur die Funktionen, die er für seine Aufgaben benötigt. Abbildung 20.1 zeigt das eher übersichtliche Backend aus der Sicht der Benutzerin Helen Lewis, für die Sie im Laufe dieses Kapitels ein Benutzerkonto erstellen.

Abbildung 20.1 Das Backend aus der Sicht von Helen Lewis

479

20

Benutzer: Im Backend angemeldete Mitarbeiter

Die Grundregel bei der Einrichtung von Benutzern ist, dass sie von Haus aus überhaupt nichts dürfen. Sie haben keine Rechte. Null. Nichts. Niente. Sie dürfen nur das, was der Administrator ihnen bei der Einrichtung explizit erlaubt. Die Benutzerverwaltung in Contao ist sehr leistungsstark, und Sie können fast alles damit einstellen. Ihre Komplexität erfordert eine gewisse Einarbeitung, aber wenn Sie das Grundprinzip verstanden haben, werden Sie die Möglichkeiten zu schätzen wissen. Eine gute Nachricht noch, bevor es losgeht: Sie erstellen in diesem Kapitel keinerlei neue Seiten und Frontend-Module, die Sie in irgendwelche Artikel oder Seitenlayouts einbinden müssen. Es findet alles im Backend statt. Aufgaben im »Task Center« delegieren Falls Sie an Ihrer Site mehrere Benutzer arbeiten, die eventuell sogar an unterschiedlichen Orten tätig sind, können Sie in den Benutzerfunktionen das Task Center nutzen, um Benutzern Aufgaben zuzuweisen.

20.2

Die Benutzergruppe »Redakteure – Nachrichten«

Ein Benutzer gehört immer zu mindestens einer Benutzergruppe, und deshalb beginnen Sie in diesem Abschnitt mit der Einrichtung einer Benutzergruppe namens »Redakteure – Nachrichten«. Benutzer, die dieser Gruppe zugewiesen werden, sollen im Backend nur Nachrichtenbeiträge erstellen und bearbeiten dürfen. Da die Eingabemaske zur Erstellung einer Benutzergruppe relativ lang ist, wird sie im Folgenden auf vier Schritte verteilt. Schritt 1: Name eingeben und erlaubte Module freigeben Im ersten Schritt geben Sie den Titel der Benutzergruppe ein und geben die Module Nachrichten und Dateiverwaltung frei, damit der Benutzer bei Bedarf zum Beispiel Bilder hochladen und in die Beiträge einbinden kann. Falls das nicht erwünscht ist, geben Sie das Modul Dateiverwaltung nicht frei. ToDo: Die Benutzergruppe »Redakteure – Nachrichten« erstellen 1. Öffnen Sie das Backend-Modul Benutzergruppen. 2. Klicken Sie oben im Arbeitsbereich auf Neue Benutzergruppe. 3. Der Titel der Gruppe ist »Redakteure – Nachrichten«.

480

Die Benutzergruppe »Redakteure – Nachrichten«

ToDo: Die Benutzergruppe »Redakteure – Nachrichten« erstellen (Forts.) 4. Aktivieren Sie im Bereich Erlaubte Module nur die Backend-Module Nachrichten und Dateiverwaltung. 5. Blenden Sie die Bereiche nach der Bearbeitung eventuell aus. Das ist übersichtlicher. 6. Klicken Sie zwischendurch einmal auf Speichern ((Alt) + (s)).

Abbildung 20.2 Titel der Benutzergruppe und freigegebene Module

Schritt 2: Pagemounts und Filemounts einrichten Mit »Mounten« bezeichnet man laut Wikipedia »den Vorgang, ein Dateisystem an einer bestimmten Stelle, dem Mountpoint, verfügbar zu machen, sodass der Benutzer auf die Dateien zugreifen kann«. So legen Sie für einen Benutzer mit dem Pagemount fest, welche Seiten aus dem Seitenbaum sichtbar sind, und mit dem Filemount, welche Ordner unterhalb von tl_files erscheinen. Da Nachrichten außerhalb der Seitenhierarchie in Archiven verwaltet werden, benötigt die Gruppe »Redakteure – Nachrichten« keinerlei Zugriff auf den Seitenbaum, und die Option Pagemount bleibt unverändert (Abbildung 20.3, obere Hälfte).

481

20.2

20

Benutzer: Im Backend angemeldete Mitarbeiter

Abbildung 20.3 Pagemount und Filemount für Nachrichtenredakteure

Als Filemount wird der Ordner beispielsite/content/ freigegeben, in dem alle für den Inhalt relevanten Medien aufbewahrt werden (Abbildung 20.3, untere Hälfte). Mit dem leicht zu übersehenden hellgrauen Symbol rechts neben dem Wort »Filemount« können Sie übrigens in einem Popup-Fenster direkt von hier aus Ordner anlegen, verschieben oder löschen. ToDo: Benutzergruppe – Page- und Filemounts einrichten 1. Öffnen Sie im Backend-Modul Benutzergruppen die Gruppe Redakteure – Nachrichten zur Bearbeitung. 2. Im Bereich Pagemounts bleibt die Option Pagemounts unverändert, und auch Erlaubte Seitentypen gibt es keine. Deaktivieren Sie alle. 3. Im Bereich Filemounts geben Sie den Ordner beispielsite/content/ frei.

482

Die Benutzergruppe »Redakteure – Nachrichten«

ToDo: Benutzergruppe – Page- und Filemounts einrichten (Forts.) 4. Erlaubte Datei-Operationen sind die ersten drei Checkboxes: 왘

Dateien auf den Server hochladen

왘

Dateien und Verzeichnisse bearbeiten, kopieren und verschieben

왘

Einzelne Dateien und leere Verzeichnisse löschen

5. Blenden Sie die Bereiche nach der Bearbeitung aus. 6. Klicken Sie wieder auf Speichern ((Alt) + (s)).

Schritt 3: Rechte für Erweiterungen Im dritten Schritt vergeben Sie die Rechte für die Erweiterungen Nachrichten, Kalender, Formulare und Newsletter. Ein reiner Nachrichtenredakteur benötigt nur Zugriff auf die Nachrichten-Erweiterung, alles andere bleibt unverändert und somit deaktiviert.

Abbildung 20.4 Die Vergabe der Nachrichten-Rechte

Das Backend-Modul Nachrichten haben Sie in Schritt 1 bereits freigegeben. Jetzt geht es darum, welche Rechte der Benutzer in diesem Backend-Modul haben soll. Er soll Zugriff auf das »Newsarchiv« haben, aber keine Archive anlegen oder löschen dürfen. ToDo: Benutzergruppen – Nachrichten-Rechte einrichten 1. Öffnen Sie im Backend-Modul Benutzergruppen die Gruppe Redakteure – Nachrichten zur Bearbeitung. 2. Im Bereich Nachrichten-Rechte erlauben Sie Zugriff auf das News-Archiv. 3. Der Redakteur soll keine Archivrechte bekommen, um Archive anlegen oder löschen zu können. 4. In den Bereichen Kalender-Rechte, formular-Rechte und Newsletter-Rechte bleibt alles ausgestellt. 5. Speichern Sie ((Alt) + (s)).

483

20.2

20

Benutzer: Im Backend angemeldete Mitarbeiter

Schritt 4: Ausgenommene Felder Sie können nicht nur Rechte für den Zugriff auf Backend-Module wie Nachrichten vergeben, sondern auch für jedes einzelne Eingabefeld innerhalb dieser BackendModule. Wenn Sie einem Benutzer zum Beispiel das Feld Beitrag veröffentlichen nicht erlauben, dann kann dieser Benutzer zwar Beiträge schreiben und bearbeiten, aber nicht veröffentlichen. Die entsprechende Option ist in seiner Eingabemaske nicht vorhanden. Die Bearbeitung der Felder erfolgt jetzt in Schritt 4. Die Standardeinstellung ist »alles aus«. Erlaubt ist nur, was Sie ankreuzen. Die Nachrichten werden in der Datenbanktabelle tl_news verwaltet. Aus der langen Liste der Tabellen, die mit tl_ beginnen, ist für diesen Abschnitt dementsprechend nur die Tabelle tl_news relevant. Alle anderen Tabellen können Sie mit einem Klick auf das Minus-Zeichen davor ausblenden. Das macht die Sache etwas übersichtlicher. Die Bildmontage in Abbildung 20.5 zeigt die Tabelle tl_news.

Abbildung 20.5 Die erlaubten Felder für die Tabelle »tl_news«

484

Die Benutzerin »Helen Lewis« einrichten

Die in tl_news aufgelisteten Felder entsprechen den Optionen beim Bearbeiten eines Nachrichtenbeitrags im Backend-Modul Nachrichten. Wenn Sie sich nicht sicher sind, was eine bestimmte Option bedeutet, speichern Sie einfach kurz und schauen sich die Eingabemaske zum Schreiben von Beiträgen an. ToDo: Benutzergruppen – Ausgenommene Felder 1. Öffnen Sie im Backend-Modul Benutzergruppen die Gruppe Redakteure – Nachrichten zur Bearbeitung. 2. Blenden Sie den Bereich Ausgenommene Felder ein. 3. Aktivieren Sie für die Tabelle tl_news das Kontrollkästchen Alle auswählen. 4. Deaktivieren Sie alle nicht gewünschten Optionen, wie z. B. Unterüberschrift oder CSS-Klasse. 5. Klicken Sie auf Speichern und Schliessen.

Fertig. Die Gruppe »Redakteure – Nachrichten« ist eingerichtet und hat entsprechende Rechte. Im nächsten Abschnitt erstellen Sie einen Benutzer, der dieser Gruppe zugewiesen wird. Gruppenrechte am kleinsten gemeinsamen Nenner orientieren Sie sollten bei der Vergabe der Rechte für die Gruppen vorsichtig vorgehen und sich immer am kleinsten gemeinsamen Nenner orientieren. Vergeben Sie nur die Rechte, die wirklich alle Benutzer der Gruppe haben sollen. Falls ein Benutzer zusätzlich noch etwas dürfen soll, ist es bei der Einrichtung der Benutzer im nächsten Abschnitt relativ einfach, dessen Rechte zu erweitern.

20.3

Die Benutzerin »Helen Lewis« einrichten

Benutzer richten Sie im Backend-Modul Benutzer ein, und einen gibt es dort schon: den Systemadministrator, den Sie bei der Installation in Kapitel 4 eingerichtet haben. Normale Benutzer haben einen blauen Kopf, Administratoren einen roten (vermutlich weil sie sich immer so viel über die Benutzer ärgern). Die Eingabemaske zur Erstellung eines Benutzers wird im Folgenden auf zwei Schritte verteilt. Schritt 1: Benutzername und Passwort Helen Lewis von der Music Academy soll auf Ihrer Beispielsite die Nachrichten bearbeiten. Im ersten Schritt vergeben Sie einen Benutzernamen und ein Passwort.

485

20.3

20

Benutzer: Im Backend angemeldete Mitarbeiter

Abbildung 20.6 Eingabe des Benutzernamens und der E-Mail-Adresse

Der Benutzername dient zur Anmeldung am Backend, der Name erscheint beim Schreiben eines Beitrags als Autorenname, und die E-Mail-Adresse dient zur Kontaktaufnahme sowie zur eventuellen Benachrichtigung bei Kommentaren. ToDo: Benutzer einrichten – Benutzername und Passwort 1. Öffnen Sie das Backend-Modul Benutzer. 2. Klicken Sie oben im Arbeitsbereich auf Neuer Benutzer. 3. Geben Sie die folgenden Daten ein: Benutzername: »h.lewis« Name: »Helen Lewis« E-Mail-Adresse: »« 4. In den Backend-Einstellungen bleibt alles unverändert. 5. Passwort: »helenlewis« (muss bestätigt werden) 6. Helen Lewis soll kein Administrator sein. 7. Und zwischendurch wieder einmal Speichern ((Alt) + (s)).

Schritt 2: Benutzergruppen und Rechtevererbung In diesem Schritt legen Sie fest, zu welchen Benutzergruppen der Benutzer gehören soll und wie sich die Gruppenrechte zu seinen Benutzerrechten verhalten sollen (Abbildung 20.7).

Abbildung 20.7 Benutzergruppen und Rechtevererbung definieren

486

Die Benutzerin »Helen Lewis« einrichten

Die Zuweisung zur Benutzergruppe ist einfach, denn es gibt nur eine. Wichtiger ist denn auch die Rechtevererbung, bei der es drei Optionen gibt: 왘

Nur Gruppenrechte verwenden Diese Option ist die einfachste und gut geeignet, wenn man viele Leute gleich behandeln möchte. Zur Änderung der Rechte für alle Benutzer müssen Sie dann nur die Einstellungen in der Benutzergruppe ändern.

왘

Gruppenrechte erweitern Der Benutzer erhält die Rechte der Gruppe plus individuelle Rechte. Mit dieser Option können Sie zum Beispiel die Rechte eines besonders erfahrenen Redakteurs erweitern und so nur ihm (oder ihr) das Veröffentlichen und Löschen von Beiträgen erlauben.

왘

Nur Benutzerrechte verwenden Dies sollte eher eine Ausnahme sein, denn die mühsam erstellten Gruppenrechte werden mit dieser Einstellung schlicht und einfach ignoriert.

Bei den beiden letzten Optionen erscheinen in der Eingabemaske übrigens automatisch die aus der Benutzergruppe bekannten Optionen zum Einstellen des Pagemounts, Filemounts und der Rechte für die Erweiterungen. Für Helen Lewis soll die Option Nur Gruppenrechte verwenden gewählt werden. ToDo: Benutzer einrichten – Benutzergruppe und Rechtevererbung 1. Öffnen Sie gegebenenfalls im Backend-Modul Benutzer den Benutzer Helen Lewis zur Bearbeitung. 2. Aktivieren Sie im Bereich Benutzergruppe die Gruppe Redakteure – Nachrichten. 3. Prüfen Sie, ob im Bereich Rechtevererbung die Option Nur Gruppenrechte verwenden ausgewählt ist. 4. Klicken Sie auf Speichern und Schliessen.

20.3.1 Testen der Einstellungen: Ein Klick, und Sie sind Helen Lewis Wenn Sie wenig Erfahrung mit der Verwaltung von Benutzern in IT-Systemen haben, sollten Sie anfangs etwas vorsichtig sein, denn es gilt die alte Weisheit »Je mehr Sie einstellen, desto mehr können Sie verstellen«. Um zu testen, ob Sie nicht versehentlich irgendwas verstellt haben, können Sie sich per Mausklick in Helen Lewis verwandeln und alles ausprobieren.

487

20.3

20

Benutzer: Im Backend angemeldete Mitarbeiter

Abbildung 20.8

Schlüpfen Sie in die Rolle von Helen Lewis!

Im Backend-Modul Benutzer klicken Sie dazu einfach in der Symbolleiste auf das Symbol ganz rechts außen, und schon sehen Sie das Backend aus der Sicht dieses Benutzers. Genau genommen sind Sie nach diesem Klick Helen Lewis. Zumindest im Backend. Abbildung 20.9 zeigt, dass außer den Benutzerfunktionen nur die Backend-Module Nachrichten und Dateiverwaltung zu sehen sind. Und innerhalb der Dateiverwaltung erscheinen wie geplant nur die Ordner unterhalb des Filemount beispielsite/content/.

Abbildung 20.9

Das Backend aus der Sicht von Helen Lewis

Sie können jetzt in Ruhe alles ausprobieren und schauen, ob Helen Lewis das darf, was Ihnen vorschwebt. Probieren Sie, einen Beitrag zu schreiben, und schauen Sie, welche Felder in der Eingabemaske vorhanden sind und welche nicht. Möchten Sie etwas an den Benutzerrechten korrigieren, melden Sie sich ab und anschließend als Administrator wieder an.

488

Die Benutzergruppe »Redakteure – Artikel«

Begrüßungsmail an Frau Lewis nach der Einrichtung Sehr geehrte Frau Lewis, herzlichen Glückwunsch zu Ihrer neuen Tätigkeit als Nachrichtenredakteurin auf website.de. Sie arbeiten dabei im sogenannten Backend, der Verwaltungsabteilung der Website. Die Adresse lautet: http://website.de/contao/ Am besten setzen Sie für diese Adresse in Ihrem Browser ein Lesezeichen. Mit dem Benutzernamen h.lewis und dem Passwort helenlewis können Sie sich am Backend anmelden. Das Passwort können Sie im Bereich Persönliche Daten selbst ändern. Sollte es noch Fragen geben, wissen Sie ja, wie Sie mich erreichen können. Ihr Adminstrator

20.4 Die Benutzergruppe »Redakteure – Artikel« In diesem Abschnitt erstellen Sie eine zweite Benutzergruppe »Redakteure – Artikel«, die auf bestimmten Seiten Artikel bearbeiten darf. Anschließend weisen Sie die Benutzerin Helen Lewis dieser Gruppe zu.

20.4.1 Benutzergruppe »Redakteure – Artikel« einrichten Um eine neue Benutzergruppe einzurichten, erstellen Sie am einfachsten eine Kopie der bereits vorhandenen Gruppe und ändern die gewünschten Rechte. Die Benutzer dieser Gruppe sollen im Navigationsbereich die Backend-Module Artikel und Dateiverwaltung sehen. Im Artikelbaum sollen nur die Startseite und die Seite Artikel erstellen auftauchen. Dazu ist ein Pagemount nötig, in dem diese beiden Seiten angekreuzt werden. Außerdem benötigen Artikel-Redakteure erlaubte Felder für Artikel (tl_article) und Inhaltselemente (tl_content). ToDo: Benutzergruppe »Redakteure – Artikel« erstellen 1. Öffnen Sie das Backendmodul Benutzergruppen. 2. Erstellen Sie eine Kopie der Gruppe »Redakteure – Nachrichten« mit einem Klick auf das grüne Kreuz in der Symbolleiste daneben. 3. Der Titel der Gruppe ist »Redakteure – Artikel«. 4. Erlaubte Module sind Artikel und Dateiverwaltung. 5. Im Bereich Pagemount aktivieren Sie die Startseite und die Seite Artikel erstellen, bei Erlaubte Seitentypen nur die Option Reguläre Seite. 6. Der Filemount beispielsite/content/ bleibt ebenso unverändert wie die Option bei Erlaubte Datei-Operationen (die ersten drei sind aktiv).

489

20.4

20

Benutzer: Im Backend angemeldete Mitarbeiter

ToDo: Benutzergruppe »Redakteure – Artikel« erstellen (Forts.) 7. Deaktivieren Sie alle Nachrichten-Rechte. Auch für die anderen Erweiterungen sollen keine Rechte vergeben werden. 8. Deaktivieren Sie im Bereich Erlaubte Felder alle Felder in der Tabelle tl_news. 9. Aktiveren Sie stattdessen zunächst alle Felder in den Tabellen tl_article und tl_content, und stellen Sie dann bei Bedarf nicht gewünschte Felder wieder aus. 10. Klicken Sie auf Speichern und Schliessen.

20.4.2 Benutzer zuweisen und testen Nach der Erstellung der Benutzergruppe müssen Sie noch einen Benutzer zuweisen. Helen Lewis hat ihre Sache als Nachrichtenredakteurin souverän erledigt, sodass sie befördert wird und jetzt auch Artikel bearbeiten darf. Helen Lewis gehört nach diesem ToDo zu zwei Benutzergruppen, und die Rechte der beiden Gruppen werden addiert. Im Backend sollten für sie also die Module Artikel, Nachrichten und Dateiverwaltung erscheinen. ToDo: Einen Benutzer der Gruppe »Redakteure – Artikel« zuweisen 1. Öffnen Sie im Backend-Modul Benutzer den Benutzer Helen Lewis zur Bearbeitung. 2. Aktivieren Sie im Bereich Benutzergruppen die Gruppe »Redakteure – Artikel«. 3. Klicken Sie auf Speichern und Schliessen.

Um zu testen, ob alles geklappt hat, klicken Sie in der Benutzerliste in der Symbolleiste neben Helen Lewis wieder auf das Symbol ganz rechts außen. Im Backend ist das Backend-Modul Artikel zusätzlich erschienen, und wenn Sie das Backend-Modul Artikel öffnen, sehen Sie die durch den Pagemount freigegebenen Seiten und die Artikel darauf. So weit, so gut. Aber bei näherer Betrachtung werden Sie feststellen, dass die Symbole in der Symbolleiste zum Bearbeiten der Artikel nicht anklickbar sind. Nur der blaue Info-Button funktioniert. Alle anderen Symbole sind inaktiv und größtenteils grau (Abbildung 20.10). Tja, eine echte Grauerei sozusagen. Es sah alles so gut aus, und auf dem letzten Meter klappt es dann doch nicht. An dieser Stelle haben schon einige angehende Admins festgesessen. Die Lösung lautet Zugriffsrechte setzen.

490

Zugriffsrechte für Seiten und Artikel setzen

Abbildung 20.10 Die Symbole zur Bearbeitung sind nicht aktiv.

20.5

Zugriffsrechte für Seiten und Artikel setzen

Weil die beiden Begriffe Zugriffsschutz und Zugriffsrechte ziemlich ähnlich klingen, möchte ich gleich zu Beginn noch einmal den Unterschied zusammenfassen: 왘

Zugriffsschutz gibt es nur im Singular. Er regelt den Zugriff auf Seiten, Module und Inhaltselemente im Frontend für Gäste und Mitglieder.

왘

Zugriffsrechte gibt es nur im Plural. Sie regeln den Zugriff auf Seiten und Artikel im Backend für Benutzer.

Für die Gruppe »Redakteure – Nachrichten« war die Vergabe von Zugriffsrechten nicht nötig, da Zugriffsrechte nur in der Seitenstruktur vergeben werden und Nachrichten außerhalb der Seitenstruktur in einem Archiv verwaltet werden. Gleiches gilt für die Erweiterungen Kalender, FAQ und Newsletter.

20.5.1 Zugriffsrechte: Was mit Seite und Artikel gemacht werden darf In der Benutzerverwaltung haben Sie die Benutzerrechte definiert und damit zum Beispiel festgelegt, dass ein Benutzer Seiten und Artikel bearbeiten darf. Mit den Zugriffsrechten definieren Sie jetzt, was er damit machen darf. Abbildung 20.11 zeigt die Eingabemaske für Zugriffsrechte im Überblick. In dieser Eingabemaske können Sie mit wenigen Klicks die Zugriffsrechte für die betreffende Seite regeln. Wie Sie sehen, gibt es ein Unix-ähnliches Rechtesystem mit drei Ebenen: Besitzer, Gruppe und Alle anderen. Für jede der drei Gruppen werden die Rechte Bearbeiten, Hierarchie ändern (verschieben und duplizieren) und Löschen vergeben – und zwar einmal für Seiten und einmal für Artikel.

491

20.5

20

Benutzer: Im Backend angemeldete Mitarbeiter

Abbildung 20.11 Zugriffsrechte in den Einstellungen einer Seite zuweisen

Standardmig darf der Besitzer einer Seite sowohl die Seite selbst als auch die Artikel darauf bearbeiten. Ein Mitglied der Gruppe darf hingegen nur die Artikel bearbeiten, nicht aber die Seite, und alle anderen Benutzer dürfen gar nichts. Sie als Administrator dürfen natürlich nach wie vor alles. Sie müssen also keine Angst haben, dass Sie sich versehentlich aus Ihrer eigenen Wohnung ausschließen. Standardeinstellung für Zugriffsrechte in »System 폷 Einstellungen« Im Backend-Modul System 폷 Einstellungen können Sie Standard-Zugriffsrechte festlegen. Dort können Sie einen Standardbesitzer, eine Standardgruppe und Standardzugriffsrechte definieren, mit denen Sie dann hier in den Seiteneinstellungen begrüßt werden.

20.5.2 Zugriffsrechte für die freigegebenen Seiten setzen Zum Abschluss dieser Einführung in die Benutzerverwaltung von Contao setzen Sie im folgenden ToDo die Zugriffsrechte für die Startseite und die Seite Artikel erstellen: Besitzer der Seiten wird der Administrator (Kevin Jones), als Gruppe soll Redakteure – Artikel ausgewählt werden. ToDo: Zugriffsrechte für Seiten setzen 1. Öffnen Sie als Administrator das Backend-Modul Seitenstruktur. 2. Klicken Sie oben rechts im Arbeitsbereich auf Mehrere bearbeiten. 3. Kreuzen Sie die Seiten Startseite und Artikel erstellen an, und klicken Sie unten rechts auf die Schaltfläche Bearbeiten. 4. Aktivieren Sie die Felder Seitenname, Zugriffsrechte zuweisen, Besitzer, Gruppe und Zugriffsrechte, und klicken Sie danach auf die Schaltfläche Weiter. 5. Aktivieren Sie für die Startseite das Kontrollkästchen Zugriffsrechte zuweisen.

492

Zugriffsrechte für Seiten und Artikel setzen

ToDo: Zugriffsrechte für Seiten setzen (Forts.) 6. Besitzer soll der Administrator sein, Gruppe Redakteure – Artikel. 7. Bei Zugriffsrechte soll der Besitzer für Seite und Artikel alles dürfen (6 Häkchen), die Gruppe darf alles nur für Artikel (3 Häkchen), und Mitglieder von Alle dürfen gar nichts (Null Points). 8. Wiederholen Sie diese Einstellungen für die Seite »Artikel erstellen«. 9. Klicken Sie auf Speichern und Schliessen.

Wenn Sie das Backend nach diesem ToDo wieder aus der Sicht von Helen Lewis betrachten, sind die Symbole zum Bearbeiten der Artikel aktiv, und Helen kann arbeiten (Abbildung 20.12).

Abbildung 20.12 Die Zugriffsrechte sind gesetzt, und die Symbole sind aktiv.

Helen Lewis ist Mitglied in zwei Benutzergruppen, und um zu probieren, ob mit der Vererbung der Gruppenrechte alles klappt, können Sie als Administrator bei der Benutzerin Helen Lewis die Gruppen Redakteure – Nachrichten und Redakteure – Artikel einzeln deaktivieren und dann kontrollieren, ob sich das Backend entspechend verändert. Übersicht über alle gesetzte Zugriffsrechte Früher oder später werden Sie sich fragen, ob es eine Möglichkeit gibt, sich die gesetzten Berechtigungen für alle Seiten anzeigen zu lassen. Die gibt es: 왘

Klicken Sie in der Seitenstruktur oben auf Mehrere bearbeiten, wählen Sie alle gewünschten Seiten aus, und klicken Sie unten auf Bearbeiten.

왘

Wählen Sie alle gewünschten Felder aus, zum Beispiel Seitenname, Zugriffsrechte zuweisen, Besitzer, Gruppe und Zugriffsrechte.

왘

Klicken Sie auf Weiter.

Jetzt können Sie die Zugriffsrechte aller ausgewählten Seiten auf einer einzigen Seite überprüfen und gegebenenfalls ändern.

493

20.5

In diesem Kapitel erfahren Sie, wie Sie mit dem System-Log Aktivitäten im Frontend und Backend auswerten können, wie Sie Google Analytics in Contao integrieren, wie Sie den Cache in Contao kontrollieren, ein Backup machen und eine Contao-Installation aktualisieren.

21

Die Website im Alltag

Nach der Freischaltung der Website ist die Arbeit natürlich nicht beendet. Im Folgenden finden Sie daher ein paar Hinweise zur Systemverwaltung im Alltag.

21.1

Das System-Log protokolliert Aktivitäten von Contao

Contao speichert alles, was es tut, im System-Log, das Sie im Backend-Modul System-Log anschauen und verwalten können. Welcher Benutzer was wann wo und wie gemacht hat, welche Dateien generiert wurden, was in der Datenbank gespeichert wurde – kurzum: alles.

Abbildung 21.1 Das System-Log protokolliert Aktivitäten im Backend.

495

21

Die Website im Alltag

Mit den Filtern oben im Arbeitsbereich können Sie genau einstellen, was unten in der Liste angezeigt werden soll, und mit ein bisschen Übung ist das recht flott erledigt. Gelb hinterlegte Filter sind aktiv. Achten Sie besonders auf das Feld Anzeigen. Dort werden standardmäßig nur die letzten 30 Einträge angezeigt. Wenn Sie mehr als die dreißig sehen möchten, setzen Sie den Filter per Mausklick auf Alles. Das System-Log komfortabel mit der Erweiterung »[clearlog]« löschen Normalerweise löschen Sie die Einträge im System-Log mit den Funktionen Alle anzeigen, Mehrere bearbeiten und Löschen. Bequemer ist es mit der Erweiterung [clearlog], die den Bereich Daten bereinigen im Backend-Modul Systemwartung erweitert, sodass Sie mit einem Klick das gesamte System-Log löschen können.

21.2

Webstatistiken mit Google Analytics

Google Analytics hieß früher mal »Urchin« und ist in den letzten Jahren zu einer sehr beliebten Lösung im Bereich der Webstatistiken geworden: http://www.google.de/analytics/ Um Analytics nutzen zu können, benötigen Sie zunächst ein Google-Konto und dann für jede Website eine Analytics ID wie z. B. UA-123456-x. Diese ID wird in einen sogenannten Tracking Code integriert, der auf jeder einzelnen Seite eingebaut wird. Contao erzeugt diesen Tracking Code auf Wunsch automatisch. Sie müssen nur die Analytics ID in das Template moo_analytics.tpl eintragen und dieses dann aktivieren: 1. Öffnen Sie das Backend-Modul Templates. 2. Erstellen Sie ein Neues Template namens moo_analytics. 3. Wählen Sie als Zielverzeichnis den Ordner des aktuellen Themes. 4. Öffnen Sie moo_analytics.tpl zur Bearbeitung (2. Symbol von rechts). 5. Ersetzen Sie die Zeichenfolge UA-XXXXX-X durch Ihre Analytics ID. 6. Klicken Sie auf Speichern und schliessen. 7. Wechseln Sie zu den Seitenlayouts für das aktuelle Theme. 8. Aktivieren Sie für alle Seitenlayouts das Skript moo_analytics, das unbedingt als letztes aktiviertes Moo-Skript aufgeführt werden muss!

496

Den Cache in Contao kontrollieren

Das Skript wird den Seiten im Frontend erst hinzugefügt, wenn Sie nicht mehr im Backend eingeloggt sind. Erweiterung zur Einbindung von Piwik Falls Sie Google Analytics nicht einsetzen möchten, gibt es auch eine Erweiterung zur Einbindung der Statistiklösung »Piwik«: 왘

[PiwikTrackingTag] Piwik-Tracking-Tag http://bit.ly/byOfF4

Diese Erweiterung bindet das Tracking-Tag von Piwik in Contao ein.

21.3

Den Cache in Contao kontrollieren

Cache wird »käsch« gesprochen, genau wie das englische Wort für Bargeld, und bezeichnet laut Wikipedia »eine Methode, um Inhalte, die bereits einmal vorlagen, beim nächsten Zugriff schneller zur Verfügung zu stellen«. Jeder Browser hat einen Cache, in dem er aufgerufene Webseiten und deren Bestandteile zwischenlagert. Der Browser-Cache hat zwar mit Contao nichts zu tun, funkt aber trotzdem manchmal dazwischen: Wenn zum Beispiel nach einem Contao-Update oder Theme-Import die Anzeige im Browser nicht stimmt oder wenn Änderungen an Stylesheets im Frontend nicht angezeigt werden. Durch das Löschen des Browser-Cache wird gewährleistet, dass der Browser aktuelle Daten darstellt und sie nicht ihre Zeit damit verschwenden, Fehler zu beheben, die es gar nicht gibt. Auch Contao hat einen Cache, in dem es Webseiten und Bilder je nach Einstellungen mehr oder weniger lange zwischenlagert. Um die Einstellungen für diesen Cache geht es im Folgenden. Browser-Cache im Firefox löschen Bei modernen Fireföxen versteckt sich die Option zum Löschen des Cache im Menü Extras 폷 Neueste Chronik löschen. Blenden Sie in dem Dialogfeld die Details ein, und wählen Sie aus, was gelöscht werden soll. Eine der Optionen ist der Cache.

21.3.1

Der Cache-Modus in »System 폷 Einstellungen«

Contao ist sowieso schon ein recht flottes Content-Management-System, aber bei gut besuchten Sites können Sie mit dem Cache die Auslieferung der Seiten noch weiter beschleunigen.

497

21.3

21

Die Website im Alltag

Zunächst einmal können Sie im Backend-Modul System 폷 Einstellungen im Bereich frontend-Einstellungen den Cache-Modus konfigurieren (Abbildung 21.2).

Abbildung 21.2 Cache-Modus festlegen in »System 폷 Einstellungen«

Die Standardeinstellung »Den Server- und den Browsercache verwenden« sollte, wenn alles problemlos läuft, nicht verändert werden.

21.3.2

Cache-Einstellungen: Die Cachezeit für die Seiten definieren

Sie können Contao mitteilen, dass es ausgelieferte Seiten für einen bestimmten Zeitraum zwischenlagern soll. Diese Cachezeit legen Sie in der Seitenstruktur fest, indem Sie neben der gewünschten Seite auf den gelben Bleistift klicken und dann im Bereich Cache-Einstellungen eine Cachezeit festlegen. Am effektivsten ist es, die Cachezeit für den Startpunkt der Website zu definieren, denn dann wird sie automatisch auf alle Unterseiten vererbt und muss im Bedarfsfall nur an einer einzigen Stelle geändert werden.

Abbildung 21.3 In der Seitenstruktur können Sie die Cache-Zeit für eine Seite festlegen.

Für Seiten mit nicht redaktionell erzeugten Inhalten, die sich bei jedem Aufruf ändern können, setzen Sie die Cache-Zeit am besten explizit auf »0«. Beispiele sind die Seiten mit den Suchergebnissen oder die Sitemap.

498

Den Cache in Contao kontrollieren

21.3.3 Systemwartung: Daten bereinigen Im Backend-Modul Systemwartung gibt es die Option Daten bereinigen, mit der Sie unter anderem manuell Daten aus dem Cache entfernen können (Abbildung 21.4).

Abbildung 21.4 Daten in der Systemwartung manuell bereinigen

Die einzelnen Optionen beziehen sich auf folgende Daten: 왘

tl_undo korrespondiert mit der Benutzerfunktion Rückgängig. Wenn Sie diese Tabelle leeren, können Sie nichts mehr rückgängig machen.

왘

tl_version bezieht sich auf Contaos Versionierung, die Ihnen z. B. bei Modulen und Inhaltselementen oben rechts im Arbeitsbereich in Form der Funktion Wiederherstellen begegnet. Nach dem Leeren dieser Tabelle sind die Listen dort auch leer.

왘

tl_search und tl_search_index speichern die Seiten bzw. die Suchbegriffe. Nach dem Löschen dieser Tabellen wird der Index automatisch durch das Aufrufen der Seiten oder manuell durch die Option Suchindex neu aufbauen gefüllt (siehe unten).

왘

Im Ordner system/tmp werden zum Beispiel gecachte Seiten gespeichert. Dieser Ordner wird nur von Contao aufgerufen.

왘

Im Ordner system/html liegen alle Dateien, die auf der Website verwendet und direkt von einem Browser aufgerufen werden müssen, z. B. Vorschaubilder. Wenn Sie also im Frontend veraltete Bilder sehen, sollten Sie diesen Ordner manuell bereinigen. Die Vorschaubilder werden dann beim nächsten Aufruf der Seite neu erstellt.

왘

Die Option CSS-Dateien bezieht sich auf die automatisch generierten internen Stylesheets, und die Option XML-Dateien meint die XML-Sitemap für die

499

21.3

21

Die Website im Alltag

Suchmaschinen und die XML-Dateien für RSS-Feeds. Ein Löschen bewirkt bei beiden, dass die Dateien neu generiert werden Mit diesen Informationen können Sie Daten sehr gezielt bereinigen. »System 폷 Einstellungen 폷 Speicherzeiten« überprüfen Im Backend-Modul System 폷 Einstellungen können Sie die genauen Speicherzeiten für die Funktionen Rückgängig (tl_undo) und Wiederherstellen (tl_version) festlegen.

21.3.4 Systemwartung: Suchindex neu aufbauen Wenn Sie die Tabellen tl_search und tl_search_index bereinigt haben, wird der Suchindex durch das Aufrufen der Seiten im Frontend nach und nach wieder gefüllt. Um nicht alle Seiten manuell aufrufen zu müssen, gibt es die Option Suchindex neu aufbauen, die dies in einem Durchgang erledigt. Ein Klick auf die Schaltfläche Suchindex aufbauen, ein bisschen Geduld, und schon ist der Suchindex wieder gefüllt.

Abbildung 21.5 Der Suchindex wurde neu aufgebaut.

500

Backups erstellen

Wenn eine Seite nicht durchsucht werden soll ... Um zu verhindern, dass eine Seite in den Suchindex aufgenommen wird, gehen Sie in den Seitenbaum und aktivieren in den Einstellungen für die betreffende Seite die Option Nicht durchsuchen.

21.3.5 Daten in den Benutzereinstellungen bereinigen Da nicht alle Benutzer Zugriff auf die Systemwartung haben, gibt es in den Benutzereinstellungen die Möglichkeit, Daten zu bereinigen und aus dem Cache zu entfernen. Zusätzlich zu den eigenen Session-Daten hat ein Benutzer dort die Möglichkeit, Bildercache und Temporärer Ordner zu bereinigen. Diese beiden Punkte sind identisch mit den Optionen system/html bzw. system/tmp in der Systemwartung und leeren die entsprechenden Ordner (Abbildung 21.6).

Abbildung 21.6 Der Benutzercache in »Benutzerfunktionen – Persönliche Daten«

21.4

Backups erstellen

Eine Contao-Installation besteht immer aus zwei Komponenten, und bei einem Bakkup müssen Sie unbedingt beide berücksichtigen: 1. die MySQL-Datenbank mit allen Daten 2. die Dateien und Ordner auf dem Webspace Das Backup der Datenbank erfolgt mit einem Tool wie phpMyAdmin oder bequemer mit der Erweiterung BackupDB, die es ermöglicht, die Datenbank bequem vom Backend aus zu sichern (Abbildung 21.7). BackupDB bietet Ihnen zwei Optionen: 왘

SQL-Backup starten speichert die komplette Datenbank inklusive Definition der Tabellenstrukturen in einer Datei mit der Endung .sql. Diese Datei ist z. B. geeignet, um mit phpMyAdmin eine leere Datenbank zu füllen.

왘

Website-template erstellen speichert die Daten ebenfalls in einer Datei mit der Endung .sql, lässt aber die Tabellendefinitionen weg. Die so erzeugte SQLDatei kann in einer anderen Contao-Installation mit dem Installtool importiert

501

21.4

21

Die Website im Alltag

werden, vorausgesetzt, beide Contao-Installationen haben dieselbe Versionsnummer. Eine genaue Anleitung finden Sie in der automatisch generierten, gleichnamigen .txt-Datei.

Abbildung 21.7 Die Erweiterung »BackupDB« nach der Installation

Damit haben Sie die eine Hälfte Ihrer Installation gesichert. Um auch die Dateien auf dem Webspace zu sichern, ist es am einfachsten, die Ordnerstruktur per FTP vom Webspace auf Ihren lokalen Rechner zu übertragen (Abbildung 21.8).

Abbildung 21.8 Alle Dateien vom Webspace herunterladen

Besonders wichtig sind die folgenden Dateien und Ordner: 왘

der Ordner tl_files mit allen Unterordnern

왘

der Ordner templates mit allen Unterordnern

502

Der Live Update Service: Das automatische Update

왘

im Ordner system/config die vier Konfigurationsdateien localconfig.php, dcaconfig.php, langconfig.php und initconfig.php

Diese Dateien sollten Sie auch zwischendurch ab und an einmal sichern, sodass Sie im Bedarfsfall eine möglichst aktuelle Version parat haben. Vielleicht stellt Ihr Webhoster Backup-Tools bereit Schauen Sie einfach einmal in der Administrationsoberfläche für Ihren Webspace nach, ob es vielleicht Tools für eine bequeme Komplettsicherung Ihrer Datenbanken, Ordner und Dateien gibt.

21.5

Der Live Update Service: Das automatische Update

Der Live Update Service ist eine Dienstleistung von iNet Robots, der Firma des Contao-Gründers Leo Feyer. Das Live Update ermöglicht die Aktualisierung Ihrer Installation mit wenigen Klicks im Backend (Abbildung 21.9).

Abbildung 21.9 Die »Live Update ID« wird im Backend eingetragen.

Um das Live Update von Contao zu nutzen, erwerben Sie auf der Website inetrobots.com eine Live Update ID und tragen diese ID im Backend ein. Momentan (Stand August 2010) kostet eine Live Update ID 9,90 Euro. Diese enthält die Lizenz für eine Domain und gilt für ein Jahr. Falls Sie mehrere Contao-Installationen auf verschiedenen Domains updaten möchten, erhalten Sie zusätzliche DomainLizenzen für nur wenige Cent pro Monat. Die Aktualisierung einer Contao-Installation ist per Live Update mit einem Klick erledigt. Ich nutze den Service selbst seit Herbst 2008 ohne Probleme, und auch mein FTP-Programm findet es nicht schlimm, dass es für die Contao-Updates nicht mehr benötigt wird.

503

21.5

21

Die Website im Alltag

21.6

Das manuelle Update per FTP

Falls Sie lieber ein manuelles Update machen, ist auch das kein Problem und in der Regel in wenigen Minuten erledigt. Schritt 1: Backup von Datenbank und Dateien Wie Sie ein Backup erstellen, wird in Abschnitt 21.4 beschrieben. Tun Sie es. Wirklich. So viel Zeit muss sein. Schritt 2: Aktuelle Contao-Version herunterladen und entpacken Lenken Sie nach dem Backup Ihren Browser auf die Contao-Website: http://www.contao.org/herunterladen.html Auf dieser Seite steht immer die neueste Version zur Verfügung. Nach dem Herunterladen entpacken Sie das Archiv auf Ihrer Festplatte und werfen einen Blick in die CHANGELOG.txt im Hauptordner. Darin sind alle wichtigen Änderungen aufgelistet. Schritt 3: Das entpackte Archiv vorbereiten In diesem Schritt löschen Sie in dem entpackten Archiv Dateien, die Sie bei einem Update definitiv nicht benötigen. Durch das Löschen dieser Dateien verhindern Sie, dass auf Ihrem Webspace gleichnamige, wichtige Dateien versehentlich überschrieben werden. Das ist einfacher, als nach dem Update die Dateien aus dem vorher gemachten Backup wieder hochzuladen. Die ersten Kandidaten zur Löschung sind einige Konfigurationsdateien im Ordner system/config/: 왘

localconfig.php

왘

dcaconfig.php

왘

langconfig.php

왘

initconfig.php

Weiterhin sollten Sie die folgenden Ordner überprüfen und alle nicht benötigten Dateien darin löschen: 왘

/templates/

왘

/tl_files/

504

Das manuelle Update per FTP

So stellen Sie sicher, dass nicht versehentlich wichtige Dateien auf Ihrem Webspace überschrieben werden. Stylesheets mit der Endung .css im Hauptordner der Installation können Sie auch entfernen. Nicht benötigt werden z. B. alle Dateien für die Beispielsite Music Academy, wenn Sie nicht vorhaben, diese zu installieren. Schritt 4: Das vorbereitete Archiv auf den Webspace kopieren Dieser Schritt ist einfach: 1. Starten Sie Ihr FTP-Programm. 2. Kopieren Sie das vorbereitete Archiv auf den Webspace. Falls das FTP-Programm Fragen stellt, bitten Sie es, für diese Aktion alle Dateien auf dem Webspace zu überschreiben. Unbedingt. Schritt 5: Datenbank mit dem Installtool aktualisieren Nach Schritt 4 sind die Dateien auf dem Webspace auf dem neuesten Stand, und es folgt die Aktualisierung der Datenbank mit dem Installtool: 1. Starten Sie das Installtool von Contao (siehe Kapitel 4). 2. Geben Sie das bei der Installation vergebene Passwort für das Installtool ein – nicht das Passwort, mit dem Sie sich am Backend anmelden. 3. Scrollen Sie bis zum Abschnitt über die Aktualisierung der Datenbanktabellen. 4. Bestätigen Sie die Änderungen mit einem Klick auf die Schaltfläche Datenbank aktualisieren. Fertig. Vergessen Sie nicht, den Browser-Cache zu löschen, das Frontend zu überprüfen und sich probehalber einmal am Backend anzumelden.

505

21.6

In diesem Kapitel lernen Sie die wichtigsten Konfigurationsdateien von Contao kennen, optimieren den TinyMCE und binden per Erweiterung eine Google Map ein. Außerdem bekommen Sie noch Tipps für fortgeschrittene Weblayouts und zum Betreiben von mehreren Websites in einer Contao-Installation. Zum Abschluss gibt es eine Übersicht über die verfügbaren Insert-Tags.

22

Contao für Fortgeschrittene: Tipps und Tricks

Zum Abschluss dieser Einführung bringt dieses Kapitel noch ein paar nützliche Tipps und Tricks und eine Übersicht der verfügbaren Insert-Tags.

22.1

Wichtige Konfigurationsdateien von Contao

Im Laufe des Buches haben Sie immer wieder mal Hinweise auf die eine oder andere Konfigurationsdatei im Ordner system/config erhalten. In diesem Abschnitt möchte ich Ihnen die wichtigsten Konfigurationsdateien kurz vorstellen, in denen Sie Änderungen update-sicher speichern können.

22.1.1

Die Systemkonfiguration: localconfig.php

Normalerweise geben Sie Einstellungen im Installtool oder im Backend von Contao ein, und Contao speichert diese automatisch in der localconfig.php. Hier werden zum Beispiel die Verbindungsdaten zur Datenbank ebenso aufbewahrt wie das zu verwendende Datumsformat, Angaben dazu, ob URLs umgeschrieben werden sollen, oder das Passwort für das Installtool. Falls Sie zum Beispiel bei einer Installation oder einem Update das Passwort für das Installtool dreimal falsch eingeben, erhalten Sie folgende Meldung: Aus Sicherheitsgründen wurde das Installtool gesperrt, nachdem dreimal hintereinander ein falsches Passwort eingegeben wurde. Um es zu entsperren, öffnen Sie die lokale Konfigurationsdatei und setzen Sie installCount auf 0.

507

22

Contao für Fortgeschrittene: Tipps und Tricks

Mit lokale Konfigurationsdatei ist die localconfig.php gemeint. Öffnen Sie die Datei, und suchen Sie die folgende Zeile: $GLOBALS['TL_CONFIG']['installCount'] = 3;

Um die Sperre wieder aufzuheben, setzen Sie den Wert wieder auf 0: $GLOBALS['TL_CONFIG']['installCount'] = 0;

Wenn Sie die Datei speichern und das Installtool erneut aufrufen, haben Sie drei neue Versuche. Falls Sie sich partout nicht mehr an das von Ihnen vergebene Installtool-Passwort erinnern können: 왘

Löschen Sie einfach die folgende Zeile: $GLOBALS['TL_CONFIG']['installPassword']

왘

Speichern Sie die Datei.

Jetzt können Sie sich am Installtool mit dem Standardpasswort contao anmelden und werden danach wie bei der ersten Installation aufgefordert, das Passwort zu ändern. Manuelle Einträge in der »localconfig.php« Wenn Sie neue Einträge erstellen, müssen Sie diese oberhalb der Zeile ### INSTALL SCRIPT START ### oder unterhalb von ### INSTALL SCRIPT STOP ### speichern. Zwischen diesen Kommentarzeilen stehen die Backend-Einstellungen. Wenn der neue Eintrag oberhalb des Kommentars steht, kann er mit einer Einstellung aus dem Backend überschrieben werden, wenn er unterhalb des Kommentars steht, hingegen nicht.

22.1.2

Data Container Arrays: Die »dcaconfig.php«

Data Container Arrays (abgekürzt DCA) dienen zur Speicherung von Informationen zu den Datenbanktabellen von Contao. Das ist sehr praktisch, denn mithilfe von DCAs und der Datei dcaconfig.php können Sie viele Einstellungen von Contao beeinflussen. Wenn Sie zum Beispiel in einem Frontend-Modul oder einem Inhaltselement in der Eingabemaske eine Überschrift eingeben, werden dort eingegebene HTMLElemente wie br oder span von Contao automatisch herausgefiltert. Um in einer Überschrift dennoch HTML-Elemente einsetzen zu können, genügt folgende Zeile in der dcaconfig.php:

508

Wichtige Konfigurationsdateien von Contao

// HTML in Eingabefeldern "Überschrift" erlauben $GLOBLALS['TL_DCA']['tl_content']['fields']['headline']['eval'] ['allowHTML'] = true; Listing 22.1 HTML-Elemente in Überschriften erlauben

Je intensiver Sie Contao nutzen, desto häufiger benötigen Sie die ID für eine Seite oder einen Artikel. Um diese ID auf einen Blick im Seiten- bzw. Artikelbaum sehen zu können, reichen folgende Zeilen in der dcaconfig.php: // Seitenbaum: IDs für Seiten anzeigen und formatieren $GLOBALS['TL_DCA']['tl_page']['list']['label']['fields'][] = 'id'; $GLOBALS['TL_DCA']['tl_page']['list']['label']['format'] = '%s <span style="color: #bbb;">[ID %s]'; // Artikelbaum: IDs für Artikel anzeigen und formatieren $GLOBALS['TL_DCA']['tl_ article']['list']['label']['fields'][] = 'id'; $GLOBALS['TL_DCA']['tl_article']['list']['label']['format'] = '%s <span style="color: #bbb;">[%s, ID %s]'; Listing 22.2 IDs für Seiten und Artikel sichtbar machen

Die mit $globals beginnenden Zeilen sind jeweils ohne Zeilenumbruch. Nach dieser Aktion sehen Sie im Seitenbaum die IDs der Seiten.

22.1.3

Sprachkonfiguration: Die »langconfig.php«

Die langconfig.php dient zur Sprachkonfiguration. Mit dieser Datei können Sie einzelne Sprachlabels update-sicher ändern. Wenn Sie zum Beispiel bei Teasern anstelle von Weiterlesen ... lieber ein einfaches Mehr ... verwenden möchten, erreichen Sie das mit der folgenden Zeile in der langconfig.php: $GLOBALS['TL_LANG']['MSC']['more'] = 'Mehr ...'; Listing 22.3

Das Sprachlabel »Weiterlesen ...« ändern

Sie können dort auch eine Grafik einfügen: $GLOBALS['TL_LANG']['MSC']['more'] = '{{image::tl_files/more.gif}}'; Listing 22.4

Das Sprachlabel mit Grafik

509

22.1

22

Contao für Fortgeschrittene: Tipps und Tricks

22.2

Tipps und Tricks zum TinyMCE

Der Editor TinyMCE ist für viele Redakteure das wichtigste Werkzeug zur Eingabe von Text. Hier sind ein paar Anregungen zur Optimierung des Editors.

22.2.1

Ein Stylesheet für den TinyMCE: »tl_files/tinymce.css«

In der Standardkonfiguration des TinyMCE gibt es in der zweiten Symbolleiste etwas links der Mitte eine Auswahlliste namens Format, in der drei CSS-Klassen zur Auswahl angeboten werden (Abbildung 22.1).

Abbildung 22.1 Zuweisen von CSS-Klassen im TinyMCE

Um einem Absatz eine dieser Klassen zuzuweisen, setzen Sie den Cursor in den gewünschten Absatz, klicken auf das p in der Statuszeile, um den Absatz zu markieren, und wählen dann die gewünschte Klasse aus der Liste. Die drei im Editor angezeigten Klassen stammen aus dem Stylesheet tl_files/tinymce.css: .warning { color:#c55; font-size:1.1em; } .confirmation { color:#090; font-size:1.1em; } .information { color:#999; font-size:0.9em; } Listing 22.5

Die drei Beispielklassen aus »tl_files/tinymce.css«

In diesem Stylesheet definierte Klassen tauchen in der Auswahlliste des TinyMCE wieder auf, und die drei Zeilen aus Listing 22.5 sind nur Beispiele, die Sie nach

510

Tipps und Tricks zum TinyMCE

Belieben ändern können und sollen. Eine kurze Anleitung finden Sie im (englischen) Kommentar am Anfang der Datei. Sie können in diesem Stylesheet auch Schriftgrad und -farbe für die Standardschrift im Editorfenster gestalten. Die Voreinstellugn von 12px und #666966 stammt aus system/themes/tinymce.css. Diese Werte können Sie mit folgendem Style in der /tl_files/tinymce.css überschreiben: /* Text im Editorfenster gestalten */ body#tinymce div, body#tinymce p, body#tinymce li, body#tinymce th, body#tinymce td { font-size: 14px; } Listing 22.6 Beispiel zur Formatierung

Beachten Sie, dass mit diesem Style aufgrund der höheren Spezifität die Schriftgradangaben aus den CSS-Klassen weiter oben überschrieben werden. Eventuell müssen Sie nach diesen Änderungen den Browsercache leeren, um die Formatierungen auch tatsächlich sehen zu können. »Seitenlayouts«: Das Stylesheet »tl_files/tinymce.css« ignorieren Die Styles aus tl_files/tinymce.css werden auch zur Formatierung der Webseiten im Frontend benutzt. Der Vorteil dabei ist, dass der Text im Editor und auf den Webseiten dadurch relativ gleich aussieht, was die Arbeit für viele Redakteure erleichtert. Falls das Stylesheet nur für den Editor benutzt werden soll, aktivieren Sie im BackendModul Seitenlayouts im Bereich Stylesheets ein Kontrollkästchen namens tl_files/tinymce.css ignorieren. Dann wird das Stylesheet nicht zur Gestaltung des Frontends benutzt. Möchten Sie das Stylesheet gar nicht nutzen, können Sie es einfach löschen.

22.2.2

Textbausteine im TinyMCE: Inhalte aus Vorlage einfügen

Sehr nützlich ist im TinyEditor das eher unscheinbare Symbol Inhalt aus Vorlage einfügen in der dritten Reihe, rechts neben den Symbolen zur Bearbeitung von Tabellen. Ein Klick auf dieses Symbol öffnet ein neues Dialogfenster, in dem Sie vorher definierte Vorlagen anschauen und einfügen können. So kann man häufig benutzte Quelltextschnipsel quasi als Textbaustein abrufen, von einer komplexen HTML-Tabelle über eine horizontale Trennlinie
---
bis

511

22.2

22

Contao für Fortgeschrittene: Tipps und Tricks

hin zu häufig verwendeten Textpassagen wie rechtlichen Hinweise oder Ähnlichem (Abbildung 22.2).

Abbildung 22.2 »tiny_templates« – vorgefertigte Quelltextschnipsel einfügen

Um einen Textbaustein zu erstellen, speichern Sie einfach eine Datei mit dem gewünschten Quelltext im Ordner tl_files/tiny_templates/. Der Dateiname spielt keine Rolle. Die Dateien sollten nur die Quelltextfragmente enthalten und kein vollständiges HTML-Grundgerüst. Als Beispiel gibt es dort eine index.html mit einem div-Element, das eine Überschrift, einen Absatz und ein bisschen InlineCSS enthält.

22.2.3 Die Symbolleisten des TinyMCE anpassen Der Editor TinyMCE bietet mit seinen drei prall gefüllten Symbolleisten für viele Autoren fast zu viel des Guten. In diesem Abschnitt möchte ich Ihnen zeigen, wie Sie die Symbolleisten im Editor abspecken und nach Ihren Wünschen gestalten können. Der Editor könnte danach zum Beispiel so aussehen wie in Abbildung 22.3. Zur update-sicheren Anpassung der Symbolleisten im Editor müssen Sie nur zwei Konfigurationsdateien im Ordner system/config ändern: 왘

Im Ordner system/config gibt es eine Datei namens tinyMCE.php, in der die komplette Konfiguration für den TinyMCE gespeichert ist.

왘

In der Datei dcaconfig.php teilen Sie Contao mit, dass eine andere Datei zur Konfiguration des Editors verwendet werden soll.

Sie beginnen mit dem ersten Schritt, der Konfiguration des Editors.

512

Tipps und Tricks zum TinyMCE

Abbildung 22.3 Der TinyMCE mit nur einer Symbolleiste

Schritt 1: Konfiguration des Editors update-sicher ändern Um die Konfiguration update-sicher zu speichern, erstellen Sie zunächst eine Kopie der Konfigurationsdatei tinyMCE.php und speichern diese unter einem anderen Namen. In der Datei werden unter anderem ab etwa Zeile 91 die drei Symbolleisten definiert: theme_advanced_buttonsX heißt der Befehl, wobei das X für die Zahlen 1, 2 und 3 steht. Im folgenden ToDo specken Sie den Editor so ab, dass die wichtigsten Symbole in der ersten Symbolleiste stehen. Die anderen beiden Symbolleisten werden ausgeblendet. ToDo: Die Konfigurationsdatei des Editors kopieren und bearbeiten 1. Erstellen Sie in einem Datei-Manager Ihrer Wahl im Ordner system/config/ eine Kopie der Datei tinyMCE.php. 2. Benennen Sie die Kopie in tinyMini.php um. 3. Öffnen Sie die Datei tinyMini.php in einem Editor. 4. Suchen Sie die Zeile, die mit theme_advanced_buttons1 beginnt. 5. Ändern Sie die Zeile z. B. wie folgt (alles ohne Zeilenumbruch): theme_advanced_buttons1 : "spellchecker, undo, redo, |, bold, italic, |, justifyleft, justifycenter, justifyright, |, bullist, numlist, outdent, indent, |, typolinks, unlink, |, image, typobox, |, sub, sup, |, blockquote, charmap, template, |, removeformat, cleanup, |,code" ,

6. Ändern Sie die folgenden zwei Zeilen wie folgt: theme_advanced_buttons2 : "" , theme_advanced_buttons3 : ""

513

22.2

22

Contao für Fortgeschrittene: Tipps und Tricks

ToDo: Die Konfigurationsdatei des Editors kopieren und bearbeiten (Forts.) 7. Achten Sie darauf, dass die dritte Zeile nicht mit einem Komma endet, die ersten beiden hingegen wohl. 8. Speichern Sie die Änderungen.

Wenn Sie die Zeile theme_advanced_buttons1 mit der Symbolleiste in Abbildung 22.3 vergleichen, wird das System der Konfiguration sehr schnell deutlich: Die gewünschten Symbole werden mit englischen Kürzeln durch Kommas getrennt aufgelistet. Statt des Schlüsselwortes separator können Sie wie im ToDo einfach einen senkrechten Strich »|« eingeben. Das ist übersichtlicher und spart Tipparbeit. Schritt 2: Die »dcaconfig.php« von Contao anpassen Standardmäßig verwendet Contao zur Konfiguration des Editors die Datei tinyMCE.php. Um zu erreichen, dass die eben erstellte tinyMini.php eingesetzt wird, ergänzen Sie im folgenden ToDo die dcaconfig.php. ToDo: TinyMCE mit eigenen Konfigurationsdateien 1. Öffnen Sie die Datei system/config/dcaconfig.php in einem Editor. 2. Fügen Sie irgendwo vor dem schließenden PHP-Tag ?> die folgenden Zeilen ein, um die neue Konfigurationsdatei für Textelemente zu benutzen (ohne Zeilenumbruch): // tinyMini.php für Textelemente $GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMini';

3. Folgender Code aktiviert die Konfiguration für Teaser und Text von Nachrichtenbeiträgen (ebenfalls ohne Zeilenumbruch): // tinyMini.php für Newsbeiträge $GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['eval']['rte'] = 'tinyMini'; $GLOBALS['TL_DCA']['tl_news']['fields']['text']['eval']['rte'] = 'tinyMini';

4. Speichern Sie die Änderungen in der dcaconfig.php.

Wenn Sie jetzt im Backend einen Text bearbeiten, erscheint die neue Minimalkonfiguration des Editors aus Abbildung 22.3. Sollten Sie bestimmte Symbole vermissen, ändern Sie die Symbolleiste in tinyMini.php und speichern die Datei. Nachdem Sie die Seite mit dem Editor im Backend neu geladen haben, sehen Sie die Änderungen meist schon. Manchmal müssen Sie sich aber auch erst einmal abmelden und den Browser-Cache leeren.

514

Anfahrtskizze mit Google Maps

22.2.4 Konfiguration des TinyMCE pro Benutzergruppe anpassen In diesem Abschnitt erfahren Sie, wie man Benutzergruppen eine eigene Editorkonfiguration zuweist. Dazu reichen ein paar Zeilen PHP in der dcaconfig.php. Falls Sie Listing 22.7 ausprobieren möchten, sollten Sie die im vorigen Abschnitt in der dcaconfig.php erstellten Zeilen zur Konfiguration des Editors auskommentieren und die IDs der gewünschten Benutzergruppen heraussuchen. Dazu fahren Sie im Backend-Modul Benutzergruppe mit der Maus über ein beliebiges Symbol zur Bearbeitung der Benutzergruppe. Kurz danach erscheint in einer gelben Quickinfo die ID der Gruppe. Merken Sie sich diese. In Listing 22.7 werden zur Bearbeitung des Inhaltselements Text folgende Varianten zugewiesen: Der Administrator bekommt die Mini-Version, die Benutzergruppe mit der ID 1 bekommt eine besondere Konfiguration, die sich an Word orientiert und in tinyWord.php gespeichert wurde, und alle anderen bekommen die normale, in tinyMCE.php aufbewahrte Editorkonfiguration. // Verschiedene Konfigurationen für verschiedene Benutzergruppen $this -> import('BackendUser', 'User'); if ($this->User->isAdmin) { $GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMini'; } elseif ($this->User->isMemberOf(1)) { $GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyWord'; } else { $GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE'; } Listing 22.7

Verschiedene Konfigurationen für verschiedene Gruppen

Auf diese Art können Sie theoretisch beliebig viele Konfigurationsdateien für den TinyEditor bereitstellen und jeder Gruppe eine andere zuweisen.

22.3

Anfahrtskizze mit Google Maps

Ein häufig gewünschtes Feature für Websites ist eine Anfahrtskizze in Form einer Karte, und dass man dazu nicht einfach einen Stadtplan einscannen und bearbeiten sollte, hat sich inzwischen wohl herumgesprochen.

515

22.3

22

Contao für Fortgeschrittene: Tipps und Tricks

22.3.1

Die Konfiguration des Frontend-Moduls

Die Erweiterung [dlh_googlemaps] Google Maps Modul von Christian de la Haye ermöglicht die einfache Einbindung von Google Maps in eine Contao-Website. Abbildung 22.4 zeigt ein Beispiel auf der bisher ungenutzten Seite Impressum.

Abbildung 22.4 Eine Anfahrtskizze mit der Erweiterung »[dhl_googlemap]«

Nach der Installation der Erweiterung gibt es einen neuen Modultyp namens Google Maps. Um eine Map zu erstellen, generieren Sie ein neues FrontendModul und binden es in einen Artikel ein. Die wichtigsten Parameter für das Beispiel aus Abbildung 22.4 sind: 왘

Koordinaten des Kartenzentrums: 50.717792,7.154031

왘

Zoom-Stufe: 15

왘

Breite 520px und Höhe 400px

왘

Markierung: mit denselben Koordinaten wie das Kartenzentrum

왘

Der Inhalt der Textbox ist die Adresse von Galileo Press.

Diese (und noch viele andere) Parameter können Sie in der Eingabemaske bei der Erstellung des Frontend-Moduls definieren.

516

Anfahrtskizze mit Google Maps

22.3.2 Die Ermittlung der Koordinaten Sollte im Bereich Kartenkonfiguration die automatische Ermittlung der Adresse im Feld Koordinaten-Ermittlung nicht funktionieren, müssen Sie die genauen Koordinaten der Adresse im Feld Koordinaten des Kartenzentrums eintragen. Diese Koordinaten bekommen Sie am einfachsten direkt im Browser bei Google Maps: 왘

Surfen Sie zu http://maps.google.de.

왘

Geben Sie die gewünschte Adresse an.

왘

Klicken Sie mit der rechten Maustaste auf das Pin-Symbol in der Karte.

왘

Klicken Sie im Kontextmenü auf »Was ist hier?« (»What’s here?«).

Abbildung 22.5 Klick auf »What’s here« – Koordinaten im Suchfeld

Die genauen Koordinaten stehen danach fertig zum Kopieren links oben im Suchfeld – statt der Adresse. Online benötigen Sie einen API-Key für die Google Maps Auf localhost können Sie die Erweiterung einfach so ausprobieren, aber zur Nutzung von Google Maps auf einem Online-Webspace benötigen Sie einen API-Key, den Sie bei Google beantragen müssen und der an Ihr Google-Konto gekoppelt ist: 왘

Google Maps API-Key beantragen: http://code.google.com/apis/maps/signup.html

Der API-Key gilt immer nur für eine Domain. In Contao tragen Sie ihn im Seitenbaum beim Startpunkt der Website ein. Dort gibt es nach der Installation der Erweiterung [dlh_ googlemaps] im Bereich Google Maps das Feld Google API Key. Auf localhost ist das wie gesagt nicht nötig.

517

22.3

22

Contao für Fortgeschrittene: Tipps und Tricks

22.4

Layouts für Fortgeschrittene

In diesem Abschnitt geht es um ein paar Tricks beim Erstellen von besonderen Weblayouts.

22.4.1 Eigene Layoutbereiche erstellen und aktivieren Contao stellt standardmäßig die fünf Layoutbereiche header, left, main, right und footer zur Verfügung. Falls Sie einen zusätzlichen Layoutbereich zum Beispiel für die Navigation wünschen, können Sie im Backend-Modul System 폷 Einstellungen im Bereich Globale Einstellungen ganz einfach Eigene Layoutbereiche hinzufügen (Abbildung 22.6).

Abbildung 22.6 »System 폷 Einstellungen 폷 Eigene Layoutbereiche«

Die Position der eigenen Layoutbereiche definieren Sie in den Seitenlayouts.

Abbildung 22.7 Aktivieren der eigenen Layoutbereiche im Seitenlayout

Anschließend können Sie dem neuen Layoutbereich die gewünschten FrontendModule zuweisen. Contao erzeugt im Quelltext an der gewünschten Position einen zusätzlichen Layoutbereich mit innerem div und allem Drum und Dran:

518

Layouts für Fortgeschrittene


...
Listing 22.8

Ein eigener Layoutbereich im Quelltext

22.4.2 Eigene Seitentemplates erstellen Falls ein bestimmtes Weblayout sich auch mit zusätzlichen Layoutbereichen nicht umsetzen lässt, können Sie anstelle der fe_page.tpl ein eigenes Seitentemplate fe_ *.tpl erstellen. Als Basis für ein eigenes Seitentemplate sollten Sie eine aktuelle Version der fe_ page.tpl nehmen und darauf achten, dass Variablen wie der Seitentitel und Ressourcen wie das MooTools-Framework im neuen Seitentemplate korrekt eingebunden werden. Der Aufbau der fe_page.tpl wird in Abschnitt 7.10, »Know-how: Das CSS-Framework von Contao«, erklärt. Wenn Sie ein eigenes Seitentemplate einsetzen, sollten Sie nach einem Update von Contao im Changelog prüfen, ob sich beim Aufbau der fe_page.tpl etwas geändert hat, und diese Änderungen gegebenenfalls in Ihr Seitentemplate übernehmen. So hat sich in den letzten Versionen zum Beispiel die Einbindung der MooTools grundlegend geändert.

22.4.3 Contao mit anderen CSS-Frameworks nutzen Falls Sie es gewohnt sind, mit einem bestimmten CSS-Framework wie YAML, 960GS oder Blueprint zu arbeiten, können Sie dies auch weiterhin tun. Dazu bedarf es eigentlich nur weniger Voraussetzungen: 왘

Erstellen Sie ein eigenes Seitentemplate mit der erforderlichen HTML-Struktur, z. B. fe_yaml.tpl.

왘

Um das Seitentemplate zu aktivieren, öffnen Sie das Backend-Modul Seitenlayouts.

왘

Öffnen Sie ein Seitenlayout zur Bearbeitung, und aktivieren Sie im Bereich Experten-Einstellungen 폷 Seitentemplate das neue Seitentemplate.

왘

Arbeiten Sie, wie in Abschnitt 7.7 beschrieben, mit externen Stylesheets.

Die Integration in Contao und insbesondere in das Backend-Modul Seitenlayouts ist bei externen CSS-Frameworks naturgemäß nicht so nahtlos wie beim Contao-CSS-Framework. So können Sie mit externen CSS-Frameworks zum Bei-

519

22.4

22

Contao für Fortgeschrittene: Tipps und Tricks

spiel im Backend-Modul Seitenlayouts nicht mehr alle Bereiche nutzen. Sie können dort 왘

keine Kopf- und Fußzeile generieren lassen.

왘

nicht die Spaltenkonfiguration definieren.

왘

keine Stylesheets einbinden.

왘

nicht die Breite und Ausrichtung des Layouts festlegen.

Abbildung 22.8 zeigt diesen Sachverhalt in der Übersicht.

Abbildung 22.8 Externe CSS-Frameworks – Einbindung in Seitenlayouts

22.5

Mehrere Websites in einer Contao-Installation

Zum Abschluss möchte ich Ihnen noch ein weiteres Feature von Contao kurz vorstellen: die Multi-Domain-Fähigkeit und Mehrsprachigkeit. Im ersten Kapitel hieß es dazu bei den Highlights: Man kann mit einer Contao-Installation sowohl mehrere Websites (MultiDomain) betreiben als auch eine Website in mehreren Sprachen. Oder auch mehrere Websites in mehreren Sprachen. Das Geheimnis liegt in der Seitenstruktur.

22.5.1 Ein Startpunkt für jede Website Bis jetzt gibt es im Backend-Modul Seitenstruktur nur einen einzigen Seitenbaum, der mit dem Startpunkt Beispielsite Contaobuch beginnt. Um mehrere Websites in einer Contao-Installation zu betreiben, erstellen Sie mehrere Seitenbäume, von denen jeder mit einem eigenen Startpunkt beginnt.

520

Mehrere Websites in einer Contao-Installation

Welchen dieser Seitenbäume Contao aufruft, entscheidet es anhand der DNSund Spracheinstellungen im Startpunkt. Abbildung 22.9 zeigt diese Einstellungen für den vorhandenen Startpunkt Beispielsite Contaobuch.

Abbildung 22.9 DNS- und Spracheinstellungen für einen Startpunkt

Da das Feld Domainname leer ist, wird der Zugriff auf diesen Seitenbaum nicht auf einen bestimmten Domainnamen eingeschränkt. Als Sprache ist de eingetragen, und da der Sprachen-Fallback aktiviert ist, präsentiert Contao diesen Seitenbaum immer dann, wenn für die vom Browser gewünschte Sprache kein anderer geeigneter Startpunkt vorhanden ist.

22.5.2 Mehrsprachige Website mit automatischer Sprachwahl Um eine mehrsprachige Website zu erstellen, erstellen Sie einfach einen zweiten Seitenbaum, bei dem Sie im Startpunkt in den DNS-Einstellungen die gewünschte Sprache eintragen. Für eine englische Variante der Beispielsite, die unter demselben Domainnamen erreichbar sein soll, würde das so aussehen wie in Abbildung 22.10.

Abbildung 22.10 Einstellungen für einen englischen Startpunkt

Das ist alles. Wenn ein Browser den Sprachwunsch en äußert, liefert Contao automatisch diesen Seitenbaum aus. Für alle anderen Sprachen wird die deutsche Website genommen, weil dort der Sprachen-Fallback aktiviert ist.

521

22.5

22

Contao für Fortgeschrittene: Tipps und Tricks

Mehrsprachige Websites mit Sprachauswahl: »[changelanguage]« Die automatische Sprachauswahl ist für viele mehrsprachige Websites ausreichend, bietet dem Besucher aber nicht die Möglichkeit, in eine andere Sprache zu wechseln. Dazu benötigen Sie die Erweiterung [changelanguage] von Andreas Schrempp, die den Besuchern Ihrer Website den Wechsel zwischen mehreren Sprachen erlaubt: 왘

Die Erweiterung »[changelanguage] Sprachenwechsler« im Repository http://bit.ly/cF9Rob

왘

Eigener Bereich zu [changelanguage] im Forum http://bit.ly/9VZeRe

22.5.3 Mehrere Domains in einer Contao-Installation Wenn Sie nun in derselben Contao-Installation zusätzlich zur zweisprachigen Beispielsite noch eine deutschsprachige private Homepage unter der Domain pmueller.de betreiben möchten, erstellen Sie einen dritten Seitenbaum mit den DNS-Einstellungen aus Abbildung 22.11.

Abbildung 22.11 DNS- und Spracheinstellungen für eine neue Website

Der Unterschied ist die Einschränkung auf einen bestimmten Domainnamen. Contao benutzt für Anfragen an den hier eingetragenen Domainnamen diesen Seitenbaum, für alle anderen Anfragen je nach Sprachwunsch einen der beiden anderen Seitenbäume. Für diesen Startpunkt ist übrigens der Sprachen-Fallback wieder aktiviert, damit die Site nicht nur an Browser mit der gewünschten Sprache »de« ausgewählt wird. Die private Homepage bekommt ein eigenes Theme mit eigenen Seitenlayouts, Modulen, Layoutgrafiken und Stylesheets. Mit dem Theme-Manager ist dies überhaupt kein Problem.

22.5.4 Zusammenfassung: Mehrere Websites in mehreren Sprachen Bis jetzt enthält die Contao-Installation also die zweisprachige Beispielsite unter der fiktiven Domain beispielsite.de und eine private Homepage unter pmueller.de. Dafür benötigen Sie drei Startpunkte (Abbildung 22.12).

522

Die Insert-Tags im Überblick

Abbildung 22.12 Drei Websites in einer Contao-Installation

Tabelle 22.1 zeigt die DNS- und Spracheinstellungen für die drei Startpunkte. Beachten Sie, dass das Feld Domainname frei bleibt und dass für die private Homepage wieder ein Sprachen-Fallback gesetzt wird. Startpunkt für

Domainname

Sprache

Sprachen-Fallback

Deutsche Beispielsite

Bleibt leer

de

Ja

Englische Beispielsite

Bleibt leer

en

Nein

Private Homepage

pmueller.de

de

Ja

Tabelle 22.1 Beispiel für mehrere Websites in mehreren Sprachen

Tabelle 22.2 zeigt, zu welcher Site ein Besucher, abhängig von der Domain und seiner Browsersprache, weitergeleitet wird. Domain

Browsersprache

Weiterleitung

www.beispielsite.de

Deutsch (de)

Deutsche Beispielsite

www.beispielsite.de

Englisch (en)

Englische Beispielsite

www.beispielsite.de

Spanisch (es)

Deutsche Beispielsite (mit Sprachen-Fallback)

www.pmueller.de

Alle Sprachen

Private Homepage (mit Sprachen-Fallback)

Tabelle 22.2 Contao entscheidet nach Domain und Sprache

22.6

Die Insert-Tags im Überblick

Insert-Tags haben Sie im Verlauf des Buches bereits kennengelernt. Sie sind Platzhalter, die bei der Ausgabe einer Seite durch bestimmte Inhalte ersetzt werden, und sind damit eine sehr praktische Sache. Insert-Tags können Sie fast überall in Contao verwenden.

523

22.6

22

Contao für Fortgeschrittene: Tipps und Tricks

22.6.1 Insert-Tags für Link-Elemente Mit den folgenden Insert-Tags können Seiten und Artikel anhand ihrer ID oder ihres Alias verlinkt werden. Insert-Tag

Beschreibung

{{link::*}}

Wird durch einen Link zu einer internen Seite ersetzt. * kann ID oder Alias sein.

{{link::back}}

Wird durch einen Link zur zuletzt besuchten Seite ersetzt. Kann auch zusammen mit den Insert-Tags link_open, link_url und link_title verwendet werden.

{{link_open::*}}

Wird durch das öffnende () bzw. schließende () Tag zu einer internen Seite ersetzt: {{link_open::22}}Linktext{{link_close}}

{{link_url::*}}

Wird nur durch die URL einer internen Seite ersetzt: Linktext

{{link_title::*}}

Wird durch den Titel einer internen Seite ersetzt: Linktext

{{article::*}}

Wird durch einen Link zu einem Artikel ersetzt. * steht für ID oder Alias.

{{article_open::*}}

Wird durch das öffnende Tag eines Links zu einem Artikel ersetzt: {{article_open::69}}Linktext{{link_close}}

{{article_url::*}}

Wird durch die URL eines Artikels ersetzt: Linktext

{{article_title::*}}

Wird durch den Titel eines Artikels ersetzt: Linktext

{{news::*}}

Wird durch einen Link zu einer Nachricht ersetzt. * kann ID oder Alias sein.

{{news_open::*}}

Wird durch das öffnende Tag eines Links zu einer Nachricht ersetzt: {{news_open::39}}Linktext{{link_close}}

{{news_url::*}}

Wird durch die URL einer Nachricht ersetzt: Linktext

{{news_title::*}}

Wird durch den Titel einer Nachricht ersetzt: Linktext

{{event::*}}

Wird durch einen Link zu einem Event ersetzt. * kann ID oder Alias sein.

{{event_open::*}}

Wird durch das öffnende Tag eines Links zu einem Event ersetzt: {{event_open::25}}Linktext{{link_close}}

Tabelle 22.3 Insert-Tags zum Erstellen von Links

524

Die Insert-Tags im Überblick

Insert-Tag

Beschreibung

{{event_url::*}}

Wird durch die URL eines Events ersetzt: Linktext

{{event_title::*}}

Wird durch den Titel eines Events ersetzt: Linktext

{{faq::*}}

Wird durch einen Link zu einer FAQ-Frage ersetzt. * kann ID oder Alias sein.

{{faq_open::*}}

Wird durch das öffnende Tag eines Links zu einer Frage ersetzt: {{faq_open::44}}Linktext{{link_close}}

{{faq_url::*}}

Wird durch die URL einer Frage ersetzt: Linktext

{{faq_title::*}}

Wird durch den Titel einer Frage ersetzt: Linktext

Tabelle 22.3 Insert-Tags zum Erstellen von Links (Forts.)

22.6.2 Benutzereigenschaften: Insert-Tags für Frontend-Benutzer Mit den folgenden Insert-Tags können Eigenschaften eines angemeldeten Frontend-Benutzers (Mitglieds) ausgegeben werden. Insert-Tag

Beschreibung

{{user::firstname}}

Wird durch den Vornamen des angemeldeten Mitglieds ersetzt.

{{user::lastname}}

Wird durch den Nachnamen des angemeldeten Mitglieds ersetzt.

{{user::company}}

Wird durch den Firmennamen des angemeldeten Mitglieds ersetzt.

{{user::phone}}

Wird durch die Telefonnummer des angemeldeten Mitglieds ersetzt.

{{user::mobile}}

Wird durch die Handynummer des angemeldeten Mitglieds ersetzt.

{{user::fax}}

Wird durch die Faxnummer des angemeldeten Mitglieds ersetzt.

{{user::email}}

Wird durch die E-Mail-Adresse des angemeldeten Mitglieds ersetzt.

{{user::website}}

Wird durch die Internetadresse des angemeldeten Mitglieds ersetzt.

{{user::street}}

Wird durch den Staßennamen des angemeldeten Mitglieds ersetzt.

{{user::postal}}

Wird durch die Postleitzahl des angemeldeten Mitglieds ersetzt.

Tabelle 22.4 Insert-Tags für Eigenschaften von Frontend-Benutzer

525

22.6

22

Contao für Fortgeschrittene: Tipps und Tricks

Insert-Tag

Beschreibung

{{user::city}}

Wird durch die Stadt des angemeldeten Mitglieds ersetzt.

{{user::country}}

Wird durch das Land des angemeldeten Mitglieds ersetzt.

{{user::username}}

Wird durch den Benutzernamen des angemeldeten Mitglieds ersetzt.

Tabelle 22.4 Insert-Tags für Eigenschaften von Frontend-Benutzer (Forts.)

22.6.3 Umgebungsvariablen Mit den folgenden Insert-Tags können Umgebungsvariablen wie z. B. der Seitenname oder der Domainname (host) ausgegeben werden. Insert-Tag

Beschreibung

{{env::page_id}}

Wird durch die ID der aktuellen Seite ersetzt.

{{env::page_alias}}

Wird durch den Alias der aktuellen Seite ersetzt.

{{env::page_name}}

Wird durch den Namen der aktuellen Seite ersetzt.

{{env::page_title}}

Wird durch den Titel der aktuellen Seite ersetzt.

{{env::page_language}}

Wird durch die Sprache der aktuellen Seite ersetzt.

{{env::parent_alias}}

Wird durch den Alias der übergeordneten Seite ersetzt.

{{env::parent_name}}

Wird durch den Namen der übergeordneten Seite ersetzt.

{{env::parent_title}}

Wird durch den Titel der übergeordneten Seite ersetzt.

{{env::main_alias}}

Wird durch den Alias der übergeordneten Hauptseite ersetzt.

{{env::main_name}}

Wird durch den Namen der übergeordneten Hauptseite ersetzt.

{{env::main_title}}

Wird durch den Titel der übergeordneten Hauptseite ersetzt.

{{env::website_title}}

Wird durch den Titel der Webseite ersetzt.

{{env::host}}

Wird durch den aktuellen Hostnamen ersetzt (seit Version 2.9.0): website.de

{{env::url}}

Wird durch Protokoll und Hostnamen ersetzt: http://website.de/

{{env::path}} {{env::request}}

Wird durch Protokoll, Hostenamen und Pfad zum ContaoVerzeichnis ersetzt. Wird durch den aktuellen Request-String ersetzt, z. B. news/ items/beitrag.html

{{env::referer}}

Wird durch die URL der zuletzt besuchten Seite ersetzt.

{{env::ip}}

Wird durch die IP-Adresse des aktuellen Besuchers ersetzt.

Tabelle 22.5 Insert-Tags zum Einfügen von Umgebungsvariablen

526

Die Insert-Tags im Überblick

22.6.4 Include-Elemente Mit den folgenden Insert-Tags können Ressourcen wie z. B. Artikel, Module oder Dateien aus dem templates-Verzeichnis eingebunden werden. Insert-Tag

Beschreibung

{{insert_article::*}}

Wird durch den angegebenen Artikel ersetzt. * kann ID oder Alias sein.

{{insert_content::*}}

Wird durch das angegebene Inhaltselement ersetzt. * kann ID oder Alias sein.

{{insert_module::*}}

Wird durch das angegebene Modul ersetzt. * kann ID oder Alias sein..

{{article_teaser::*}}

Wird durch den Teaser eines Artikels ersetzt. * kann ID oder Alias sein.

{{news_teaser::*}}

Wird durch den Teaser einer Nachricht ersetzt. * kann ID oder Alias sein.

{{event_teaser::*}}

Wird durch den Teaser eines Events ersetzt. * kann ID oder Alias sein.

{{file::*}}

Wird durch den Inhalt einer .php- oder .tpl-Datei aus dem templates-Verzeichnis ersetzt. * kann ID oder Alias sein. Sie können dabei auch Argumente übergeben: {{file::file.php?arg1=val&arg2=val}}

Tabelle 22.6 Insert-Tags zum Einfügen von Elementen und Dateien

22.6.5 Verschiedenes: Datum, E-Mail und Sprachen Mit den folgenden Insert-Tags können Sie verschiedene Aufgaben erledigen und z. B. das aktuelle Datum oder ein Lightbox-Bild einfügen. Insert-Tag

Beschreibung

{{date}}

Wird durch das aktuelle Datum gemäß des globalen Datumsformats ersetzt.

{{date::*}}

Wird durch das aktuelle Datum gemäß eines individuellen Datumsformats ersetzt.

{{last_update}}

Wird durch das Datum der letzten Aktualisierung gemäß des globalen Datumsformats ersetzt. Das gilt für Änderungen an Inhaltselementen, Nachrichtenbeiträgen und Events.

{{last_update::*}}

Wird durch das Datum der letzten Aktualisierung mit einem individuellen Datumsformat ersetzt.

Tabelle 22.7 Insert-Tags für verschiedene Sachen

527

22.6

22

Contao für Fortgeschrittene: Tipps und Tricks

Insert-Tag

Beschreibung

{{email::*}}

Wird durch einen verschlüsselten mailto-Link zu einer E-MailAdresse ersetzt, sodass Spambots die Mailadresse nicht erkennen.

{{lang::*}}

Mit diesem Tag können fremdsprachige Wörter in einem Text markiert werden: {{lang::fr}}Au revoir{{lang}} = <span lang="fr" xml:lang="fr">Au revoir

{{iflng::*}}

Wird komplett entfernt, wenn die Sprache der Seite nicht mit der Tag-Sprache übereinstimmt. Sie können so sprachspezifische Bezeichnungen erstellen: {{iflng::en}}Your name{{iflng}}{{iflng::de}}Ihr Name{{iflng}}

{{image::*}}

Wird durch die Vorschauansicht eines Bildes ersetzt: {{image::tl_files/image.jpg?width=200&height=150}}

Mögliche Parameter sind: width = Breite des Vorschaubildes height = Höhe des Vorschaubildes alt = Alternativer Text class = CSS-Klasse rel = rel-Attribut (z. B. »lightbox«) mode = Modus (»proportional«, »crop« oder »box«) Tabelle 22.7 Insert-Tags für verschiedene Sachen (Forts.)

528

Index $this->framework 186, 188 $this->head 188 $this->stylesheets 188 .htaccess 85, 89, 440, 441, 443 RewriteBase 441 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 438

529

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

530

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 398

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 455 404 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 487

531

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

532

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 477

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 64

533

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

534

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 261

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 404 - 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() 65

535

Index

Webspace (Forts.) prüfen 83 WYSIWYG-Editor 씮 TinyMCE

XML (Forts.) XML-Dateien bereinigen 499 XML-Sitemap (Google) 456

X

Y

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

YAML 184, 519

536

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 471