Inhalt. Contao kennenlernen und installieren. Das ist Contao. Der Offline-Webspace: XAMPP und MAMP. Contao ist ein Content-Management-System...

Transkript

1 Einleitung... TEIL I 29 Contao kennenlernen und installieren 1 Das ist Contao 1.1 Contao ist ein Content-Management-System Brauchen Sie überhaupt ein Content-Management-System?... Ein CMS auf dem eigenen Webspace erfordert Know-how Die Website zum Programm:»contao.org« Was Contao so beliebt macht Contao hilft Ihnen bei der Erstellung und Verwaltung von en... Contao vereinfacht die Gestaltung der Webseiten... Contao hat viele Funktionen eingebaut und ist beliebig erweiterbar Die Community im Web: das Forum zu Contao Tipps zur Benutzung des Forums... Fragen zum Buch bitte auch im Forum stellen Der Offline-Webspace: XAMPP und MAMP Der Webspace auf Ihrem Rechner Statische Webseiten: der Webspace als Lagerhalle... Content-Management-System: der Webspace als Werkstatt Windows: Offline-Webspace mit XAMPP XAMPP für Windows installieren... Das XAMPP Control Panel... Testen, ob der Webserver funktioniert... Der Sicherheitscheck von XAMPP OS X: Offline-Webspace mit MAMP MAMP installieren... Das Programmfenster von MAMP... Testen, ob der Webserver funktioniert... 5

2 2.4 Der Webserver: Apache serviert Webseiten Der Apache ist ein Webserver »Document Root«: der Ordner für die Webseiten PHP: Programmiersprache und Interpreter PHP ist auf php.net zu Hause PHP: als Modul oder als CGI? MySQL serviert SQL-Datenbanken Eine relationale Datenbank besteht aus Tabellen und Beziehungen SQL ist eine Sprache zur Verwaltung von Datenbanken phpmyadmin verwaltet die Datenbanken von MySQL phpmyadmin starten Eine neue Datenbank anlegen mit phpmyadmin Hilfe bei sonstigen Installationsproblemen Umzug: von XAMPP und MAMP auf den Online-Webspace Schritt 1: Die lokale Contao-Installation entschlacken Schritt 2: Dateien auf den Online-Webspace übertragen Schritt 3: Die lokale Datenbank exportieren Schritt 4: Den SQL-Dump auf den Webspace importieren »Safe Mode Hack«: der FTP-Modus von Contao »Sie müssen den Safe Mode Hack auf diesem Server verwenden« Eine Alternative zum SMH: PHP als FastCGI So richten Sie den Safe Mode Hack ein Know-how: Dateiberechtigungen das 1 1 zu Besitzer, Benutzer und Berechtigungen: 644 und PHP und Contao: Benutzerrechte, Apache-Modul und (Fast)CGI Was der Safe Mode Hack genau macht Sicherheitsloch:»Alles auf 777«ist keine gute Idee Die Installation von Contao Die Installation vorbereiten Die Systemvoraussetzungen Die richtige Contao-Version für dieses Buch Offline: Contao auf Ihrem Rechner installieren Schritt 1: Contao-Dateien in den Ordner»contaobuch«kopieren Schritt 2: Datenbank erstellen mit phpmyadmin Schritt 3: Das Installtool starten und die Lizenz akzeptieren Schritt 4:»Installtool-Passwort«ein Passwort für das Installtool festlegen Schritt 5:»Datenbankverbindung«Kontakt mit der Datenbank aufnehmen Schritt 6:»Tabellen prüfen«die Datenbanktabellen anlegen Schritt 7:»Ein Template importieren«oder auch nicht Schritt 8: Ein Administratorkonto anlegen Online: Contao im Web installieren Informationen über Webhoster im Contao-Forum Die Ordnerstruktur auf dem Webspace Der Contao Check Online-Installation, Teil 1 Dateien auf den Webspace kopieren Online-Installation, Teil 2 die Zugangsdaten für die Datenbank Online-Installation, Teil 3 das Installtool im Überblick Schnelldurchlauf: So funktioniert Contao »Music Academy«: die Beispielsite installieren Vorbereitungen für eine neue Contao-Installation Das Installtool von Contao aufrufen Die Erweiterung [music_academy] suchen Im Backend: die Erweiterung [music_academy] installieren Im Installtool: die Beispielsite»Music Academy«importieren Das Frontend ist die Website Das Backend ist die Verwaltungsabteilung Die Seitenstruktur ist das Fundament der Website Themes bestimmen das Aussehen der Site Module erzeugen den Quelltext für das Frontend Jede Seite hat ein Seitenlayout Seitenlayouts verbinden die Seiten mit Stylesheets Jeder Artikel gehört zu einer Seite Ein Artikel besteht aus selementen Das Backend ist für Redakteure sehr übersichtlich Zusammenfassung so tickt Contao

3 TEIL II Die erste Website mit Contao 5 Ein kurzer Rundgang im Backend Überblick: die wichtigsten Bereiche im Backend Ganz oben im Backend: der Infobereich Links: der Navigationsbereich (Backend-Module) Rechts: der Arbeitsbereich Das Backend-Modul»System Einstellungen« Der»Titel der Webseite« Das Format für Angaben von Datum und Zeit Der Dateimanager:»System Dateiverwaltung« Ordner erstellen mit dem Dateimanager Dateien mit dem Dateimanager hochladen »Synchronisieren«: Abgleich zwischen Datenbank und Ordner»files« Template-Ordner erstellen im Backend-Modul»Templates« Der Erweiterungskatalog und die Erweiterungsverwaltung Der Erweiterungskatalog auf»contao.org« Eine Erweiterung aus dem Backend heraus installieren Der erste Artikel und zwei selemente Der Artikelbaum: die Übersicht über alle Artikel Die Einstellungen für einen Artikel selemente zu einem Artikel hinzufügen Prüfen, ob Artikel im Seitenlayout eingebunden sind für die anderen Seiten erstellen mit»mehrere bearbeiten« Ein Frontend-Modul für die Navigation:»Nav Main« Ein Navigationsmodul erstellen Das Navigationsmodul im Seitenlayout einbinden Die Seite»News«erstellen Ein kurzer Blick in den Quelltext Der Style-Block im <head> Die Layoutbereiche aus dem Seitenlayout im <body> Templates erstellen das HTML für den Quelltext Frontend-Templates haben die Endung.sql Alle anderen Templates mit der Endung.html5 oder.xhtml Debugmodus: Template-Marker zeigen, welches Template den Quelltext erzeugt Das HTML der Navigation im Quelltext Backend-Modul»Templates«: Templates update-sicher anpassen Ein kurzer Blick in das Template»nav_default.html5« Das Contao-Prinzip: altogether now Die ersten Schritte zur eigenen Website »Keinen Startpunkt gefunden«die Seitenstruktur erstellen Der Startpunkt für eine neue Website Der Sprachen-Fallback für den Startpunkt ist wichtig Die Startseite für die Beispielsite erstellen Die Seitenstruktur für die Beispielsite erweitern »Kein Layout angegeben«theme und Seitenlayout erstellen Das erste Theme erstellen Das erste Seitenlayout erstellen und zuweisen Frontend-Module für den Kopf- und den Fußbereich Frontend-Module für den Kopf- und den Fußbereich erstellen Die Module für den Kopf- und den Fußbereich im Seitenlayout einbinden Contao und CSS: Webseiten gestalten Übersicht: Contao und CSS Gestatten: das CSS-Framework von Contao Interne oder externe Stylesheets So funktionieren interne Stylesheets Das erste Stylesheet erstellen Ein internes Stylesheet erstellen:»layout Themes Stylesheets« Styles für»html«und»body«erstellen CSS-Editor bedienen: Tasten und Maus in Kombination Einen Style für»#wrapper«erstellen Das Stylesheet mit dem Seitenlayout verbinden Die Symbole zur Bearbeitung von Styles im Überblick Der integrierte CSS-Reset

4 7.3 Grundlegende Gestaltung der Beispielsite Google Fonts: die Schriftart»Droid Sans«einbinden Den Kopfbereich gestalten Den Fußbereich gestalten Die Layoutbereiche für den sbereich gestalten Überschrift und Fließtext im sbereich gestalten Übung: die Navigation mit einem internen Stylesheet gestalten Die Beispielsite ist schon ein bisschen»responsive« Der CSS-Editor von Contao im Überblick Die Gruppe»Selektor und Kategorie« Breite und Höhe: die Gruppe»Abmessungen« Elemente positionieren: die Gruppe»Position« Box-Modell, Teil 1 die Gruppe»Abstand und Ausrichtung« Box-Modell, Teil 2 die Gruppe»Hintergrund« Box-Modell, Teil 3 die Gruppe»Rahmen« Text gestalten: die Gruppe»Schrift« Die Gruppen»Aufzählung«und»Eigener Code« Tipps zur Arbeit mit internen Stylesheets »Filtern«: nur Styles einer bestimmten Kategorie anzeigen »Suchen«: bestimmte Kommentare oder Selektoren suchen »Versionierung«: Versionen vergleichen und wiederherstellen Variablen in Themes und Stylesheets verwenden Praktisch: Stylesheets von der Buch-CD importieren CSS mit externen Stylesheets in Contao Externe Stylesheets speichern und im Seitenlayout einbinden Teamwork: interne und externe Stylesheets zusammen Navigationen erstellen in Contao So funktioniert Contao: Seiten, Module und Artikel Die Navigationsmodule von Contao im Überblick Die Seitenstruktur der Beispielsite erweitern Eine vertikale Navigation mit zwei Ebenen Schritt 1:»Layout Seitenstruktur«Seiten im Menü verstecken Schritt 2: Der Modultyp»Navigationsmenü«im Detail Schritt 3: Die zweite Navigationsebene per CSS gestalten Eine horizontale Dropdown-Navigation Schritt 1: Das Navigationsmodul in die Kopfzeile verschieben Schritt 2: Die erste Navigationsebene gestalten Schritt 3: Dropdown horizontale Navigation zum Ausklappen Horizontale und vertikale Navigation zusammen Meta-Navigation: eine»individuelle Navigation« Schritt 1: Das Modul»Nav Meta«erstellen Schritt 2: Das Modul»Nav Meta«einbinden Schritt 3: Die Meta-Navigation im Quelltext Schritt 4: Die Meta-Navigation gestalten Sitemap: das sverzeichnis der Website Schritt 1:»Nav Sitemap«ein Modul zur Erstellung einer Sitemap Schritt 2: Das Modul»Nav Sitemap«in einen Artikel einbinden Schritt 3: Das HTML für das Modul»Nav Sitemap« Schritt 4: Das CSS zur Gestaltung der Sitemap Weitere Navigationsmodule im Überblick Quicknavigation und Quicklink Navigationspfad: die Breadcrumb-Navigation»Sie sind hier« Buchnavigation: von einer Seite zur nächsten und zurück selemente für Texte und Bilder Artikel und selemente im HTML-Quelltext Das selement»überschrift«:»ce_headline« Die Überschrift ändern:»die Abenteuer des Lorem Ipsum« Überschriften im sbereich gestalten Das selement»text«:»ce_text« Die Eingabemaske des selements»text« Der Editor TinyMCE im Überblick Text bearbeiten im Editor Hyperlinks erstellen im Editor TinyMCE Bilder und Tabellen möglichst nicht mit dem TinyMCE einfügen Das selement»text«mit einem Bild erweitern Fotos auf den Webspace hochladen Im Seitenlayout:»MooTools«laden und»mediabox«aktivieren Ein Bild zum selement»text«hinzufügen

5 9.4.4 Das HTML für das eingefügte Bild Eingefügte Bilder per CSS gestalten Das selement»bild«:»ce_image« Das selement»bild«im Einsatz Die Bildunterschrift gestalten »Bild-Einstellungen«: die Möglichkeiten der Bildanpassung, Teil »Bild-Einstellungen«: die Möglichkeiten der Bildanpassung, Teil Das selement»galerie«:»ce_gallery« Eine Bildergalerie erstellen Praktisch: die Reihenfolge der Bilder per Drag & Drop festlegen Das HTML für die Bildergalerie »Meta-Informationen«: die Beschriftung für die Fotos eingeben Zauberhaft: Dateien in der Dateiverwaltung nachträglich umbenennen Das selement»top-link«:»ce_toplink« Das selement»top-link«einfügen Das selement»top-link«gestalten Optional:»Top-Link«als Modul im Seitenlayout einbinden Syndikation: Drucken, PDF, Facebook, Twitter und G Die Links zur Syndikation aktivieren Die Links zur Syndikation per CSS gestalten Nach dem Laden der Seite soll das erste Akkordeon eingeklappt sein Wie man Akkordeons sonst noch einsetzen kann Externe Videos auf Webseiten einbinden Teil 1: Das selement»html«:»ce_html«vorbereiten Teil 2: Video einbinden mit dem selement»html« Die Alternative: das selement»youtube« Das selement»video/audio«:»ce_player« Schritt 1: Hochladen der Audiodatei Schritt 2: Im Seitenlayout das JavaScript-Template aktivieren Schritt 3: MP3-Datei im Artikel einbinden Das selement»markdown«:»ce_markdown« Was ist»markdown«überhaupt? Das selement»markdown«in Contao Contao verwandelt das Markdown in HTML Spezielle Editoren für Markdown Weitere selemente im Überblick: Code und Co Das selement»code«:»ce_code« Die»Include«-Elemente im Kurzüberblick TEIL III Formulare und Core-Erweiterungen 10 Weitere nützliche selemente Das selement»tabelle«:»ce_table« Der Eingabeassistent für das selement»tabelle« Importieren der Daten mit einer CSV-Datei Das HTML für das selement»tabelle« Das selement»tabelle«per CSS gestalten Tabelle im Frontend sortierbar machen Das selement»akkordeon«:»ce_accordion« Seitenlayout vorbereiten und Artikel erstellen Das Eingabeformular für das selement»akkordeon« Zugeschaut und mitgebaut: drei Akkordeons erstellen Das HTML für ein Akkordeon Das CSS zur Gestaltung eines Akkordeons Akkordeons mit Grafiken zur Statusanzeige Kontakt: der Formulargenerator von Contao Ein Kontaktformular für die Beispielsite erstellen Schritt 1:»Vielen Dank«eine Weiterleitungsseite erstellen Schritt 2: Die Eigenschaften für das Kontaktformular definieren Schritt 3: Die Formularfelder für das Kontaktformular einfügen Schritt 4: Das Kontaktformular auf der Seite»kontakt.html«einbinden Schritt 5: Die Formularüberprüfung testen Schritt 6: Das Kontaktformular abschicken Das Kontaktformular gestalten Das HTML für das Kontaktformular Schnell: das Stylesheet»Formulare«aktivieren Individuell: das Kontaktformular selbst gestalten Formulardaten auf der Seite»Vielen Dank«ausgeben

6 11.4 Formularfelder: die Feldtypen im Formulargenerator Formularfelder einfügen: die Feldtypen im Überblick Überschrift und Erklärung für zusätzliche Informationen Formularfelder gruppieren:»fieldset«und»legend« Das Passwortfeld: automatisch mit Bestätigungsfeld Das Select-Menü: Auswahllisten per Klick Das Radio-Button-Menü: Optionsfelder deluxe Das Checkbox-Menü: Kontrollkästchen deluxe »Datei-Upload«: Besucher können Dateien hochladen Die Sicherheitsfrage zur Spamvermeidung Suchfunktion: die Beispielsite durchsuchen Die Suchfunktion im Überblick Die Seite»Suchen«: Suchformular und -ergebnisse Schritt 1: Die Suchseite im Seitenbaum erstellen Schritt 2: Das Modul»Anwendung Suchfunktion«erstellen Schritt 3: Das Modul»Anwendung Suchfunktion«in einen Artikel einbinden Schritt 4: Das HTML des Moduls»Anwendung Suchfunktion« Schritt 5: Das CSS zur Gestaltung der Suchseite Ein einfaches Suchformular im Kopfbereich Schritt 1: Das Modul»Anwendung Suchformular«erstellen Schritt 2: Das Modul»Anwendung Suchformular«im Seitenlayout einbinden Schritt 3: Das HTML für das Suchformular Schritt 4: Das Suchformular im Kopfbereich positionieren Schritt 5: Den Platz für das absolut positionierte Suchformular schützen Alternative: ein flexibleres Suchformular Schritt 1: Ein Suchformular mit dem Formulargenerator erstellen Schritt 2: Ein Textfeld zum Suchformular hinzufügen Schritt 3: Bildschaltfläche eine Grafik zum Abschicken des Formulars Schritt 4: Ein Frontend-Modul mit dem Suchformular erstellen Schritt 5: Das Modul im Seitenlayout einbinden Schritt 6: Das Suchformular gestalten und positionieren Bloggen: die Erweiterung»Nachrichten« Übersicht: die Zutaten für das Nachrichtensystem Das»Newsarchiv«: Beiträge erstellen Die Seitenstruktur vorbereiten: Weiterleitungsseite erstellen Das»Newsarchiv«: ein Nachrichtenarchiv erstellen Newsbeitrag erstellen, Teil 1: Titel und Teaser Newsbeitrag erstellen, Teil 2: selemente hinzufügen Teaser und Beiträge im Frontend ausgeben Das Frontend-Modul»News Beitrag anzeigen [Nachrichtenleser]«erstellen Das Frontend-Modul»News Teaser anzeigen [Nachrichtenarchiv]«erstellen Das Frontend-Modul»News Teaser anzeigen«einbinden Social Media: Beiträge auf Twitter, Facebook und Google+ empfehlen SEO: die URL eines Nachrichtenbeitrags Optional: Template anpassen den Link»Zurück«optimieren HTML und CSS: Teaser und Beiträge gestalten Das HTML des Moduls»News Teaser anzeigen« Das CSS zur Gestaltung der Teaserübersicht auf der Seite»News« Das HTML des Moduls»News Beitrag anzeigen« Das CSS zur Gestaltung der einzelnen Beiträge Optional: Datum und Autor lieber unterhalb des Beitrags? Bilder zu Teasern und Beiträgen hinzufügen Bilder zu einem Teaser hinzufügen Bilder zum Beitrag in der Einzelansicht hinzufügen RSS-Feeds zum Abonnieren der Beiträge erstellen Interaktion mit Besuchern: die Kommentarfunktion Die Kommentarfunktion aktivieren Kommentare schreiben und überprüfen Die Kommentare gestalten Optional: Kommentarformular Beschriftung vor Eingabefeldern Kommentare im Backend verwalten Optional: Anzahl der Kommentare in der Übersicht anzeigen Die Syntax der Suchfunktion im Überblick

7 13.8 Navigation: Beiträge monatsweise auswählen Das Frontend-Modul»News Monat auswählen [Nachrichtenarchiv Menü]«erstellen Das Frontend-Modul»News Monat auswählen«einbinden Das HTML des Frontend-Moduls»News Monat auswählen« Das CSS für das Modul»News Monat auswählen« Benutzerfreundlich: ein Link, um alle Beiträge anzuzeigen Know-how: Nachrichten, Modultypen und Templates Die Modultypen und die Modultemplates»mod_news*« Die vier Subtemplates»news_*« Die Core-Erweiterungen»Events«und»FAQ« Die Core-Erweiterung»Newsletter« Die Zentrale: das Backend-Modul»Newsletter« Einen neuen Verteiler erstellen Abonnenten verwalten: die Empfänger des Newsletters Einen Newsletter erstellen Einen Newsletter versenden Newsletter im Frontend anzeigen Die Kurzanleitung zur Darstellung der Newsletter im Frontend Das HTML der Frontend-Module zur Newsletterdarstellung Newsletter im Frontend abonnieren und kündigen Die Kurzanleitung zum Abonnieren und Kündigen Das HTML der Frontend-Module»Abonnieren«und»Kündigen« Terminverwaltung: die Erweiterung»Events« Einen neuen Kalender erstellen Schritt 1: Die Weiterleitungsseite»Termine«erstellen Schritt 2: Einen Kalender zur Verwaltung der Termine erstellen Schritt 3:»Neues Event«Termine erstellen im»seminarkalender« Schritt 4: Frontend-Module erstellen in»themes Frontend-Module« Schritt 5: Frontend-Module einbinden in»e Artikel« Der noch ungestaltete Kalender im Überblick Kalender und Termin in der Einzelansicht SEO: Der Aufbau einer URL für ein Event Das HTML für Kalender und Events Das HTML vom Frontend-Modul»Kalender« Das HTML der Einzelansicht eines Events (Eventleser) Das CSS zum Gestalten eines Kalenders Kalender gestalten, Teil 1: Tabelle und Kopfbereich Kalender gestalten, Teil 2: Tage und Events Die FAQ-Erweiterung: häufig gestellte Fragen Die Kurzanleitung für die FAQ-Erweiterung Die FAQ-Erweiterung gestalten Ein neues Seitenlayout für die Startseite Der Start: Ein neues Seitenlayout für die Startseite Newsbeiträge und Termine als Liste auf der Startseite Die Frontend-Module für Newsbeiträge und Termine erstellen Die Frontend-Module in den Artikel auf der Startseite einbinden Ein neues Stylesheet für die Startseite erstellen Newsbeiträge und Termine auf der Startseite gestalten Optional: Datum der Nachrichten ohne Uhrzeit darstellen Sidebar, Teil 1: ein zufällig ausgewähltes Bild Das Modul»Startseite Sidebar Zufallsbild«erstellen Die Module in der Sidebar gestalten Sidebar, Teil 2: der Minikalender Vorbereitung: Ein Modul»Eventliste«erstellen und einbinden Ein Modul für den Minikalender erstellen und einbinden Den Minikalender in der Sidebar gestalten Sidebar, Teil 3: Lesetipps als Dropdown-Menü Ein Modul»Quicklink«für die Lesetipps erstellen und einbinden Optional: Lesetipps auswählen ohne Klick auf den»los«-button Sidebar, Teil 4: Newsletter abonnieren Sidebar, Teil 5: ein Content-Slider in der Sidebar Überblick:»Content-Slider«statt»Zufallsbild« Vorbereitungen im Seitenlayout»Startseite«

8 Einen neuen Artikel auf der Startseite erstellen Einen Slider in dem neuen Artikel erstellen Den Content-Slider konfigurieren Die HTML-Struktur für einen Content-Slider Den Content-Slider gestalten TEIL IV Contao»responsiv«und»mobil«17 Das CSS-Framework von Contao Das CSS-Framework von Contao im Überblick CSS-Editor und CSS-Framework sind nicht dasselbe Die Komponenten des CSS-Frameworks XHTML 1.0, HTML5 und Contao Von HTML über XHTML 1.0 zu HTML Neuerungen in HTML5: vereinfachte Schreibweise und neue Elemente In Contao haben Sie die Wahl zwischen XHTML und HTML HTML5 oder XHTML: Ausgabeformat im Seitenlayout definieren Alle Templates gibt es als HTML5 und als XHTML Die HTML-Struktur: das Seitentemplate»fe_page« Das HTML-Grundgerüst von Contao Der <head>-bereich der»fe_page« Der Style-Block von»$this->framework« Stylesheets einbinden:»$this->stylesheets« Die»fe_page.html5«enthält neue HTML5-Strukturelemente »html5shim«HTML5 für Internet Explorer 7 und 8 via JavaScript CSS-Framework, Teil 1:»layout.css« Teil 1 ein paar allgemeine Styles Teil 2»Holy Grail«: Weblayouts und der heilige Gral Teil 3 die Bildergalerien von Contao formatieren Teil 4 nützliche Klassen und zusätzliche Layoutbereiche CSS-Framework, Teil 2:»responsive.css« Media Query auf kleinen Bildschirmen kein»holy Grail« Flexible Bilder mit»max-width:100%« CSS-Framework, Teil 3:»reset.css« Teil 1 der Reset Teil 2 grundlegende Formatierung Teil 3 grundlegende Schriftformatierung Teil 4 Abstände CSS-Framework, Teil 4:»form.css« Grundformatierung von Eingabefeldern Normalisierung und grundlegende Gestaltung diverser Elemente Formatierung für Schaltflächen und Buttons Contao, der interne CSS-Editor und CSS Eine kurze Geschichte von CSS Wofür man CSS3 heute schon nutzen kann Die Browser-Präfixe: -moz-, -webkit-, -o- und -ms Interne Stylesheets und CSS Fallback für ältere IEs mit»css3pie« Know-how: So funktioniert der Holy Grail Hauptspalte»#main«: Im Quelltext zuerst, am Bildschirm in der Mitte Schritt 1: Platz schaffen für die Sidebars Schritt 2: Alle drei sspalten werden nach links gefloatet Intermezzo mit Gedankenspiel: Die Ausgangsposition im Detail Schritt 3: Die linke Spalte rutscht nach links, Teil Schritt 4: Die linke Spalte rutscht nach links, Teil Schritt 5: Die rechte Spalte rutscht nach rechts Der»Holy Grail«: Fazit und Einschränkungen Die Beispielsite wird responsiv Responsives Webdesign und Contao Pixel? Das Web ist nicht aus Papier Responsives Webdesign: ein HTML mehrere Stylesheets Contao und responsive Webseiten Bestandsaufnahme: Die Beispielsite Die Beispielseiten in einem großen Browserfenster Die Beispielseiten in kleinen Viewports Der erste Schritt zur Flexibilisierung: eine Breite in Prozent Die responsive Navigation im Überblick Die Navigation für kleine Viewports bis 768 px Die Navigation in mittleren Viewports von 768 px bis 944 px Die Navigation in großen Viewports ab 944 px

9 18.4 Die Navigation für kleine Viewports erstellen Schritt 1: Menübutton erstellen Schritt 2: Das Stylesheet»navigation«umbenennen und anpassen Schritt 3: Neues Stylesheet erstellen und Menübutton positionieren Schritt 4: Den Menübutton gestalten Intermezzo: Das Suchfeld positionieren und gestalten Schritt 5: Die Gestaltung des Navigationsbereichs Schritt 6: Die Links im Navigationsbereich gestalten Schritt 7: Right on»:target«die Navigation in Aktion Das Layout für kleine Viewports optimieren Das Stylesheet»layout-small«erstellen und einbinden Abstände der Layoutbereiche optimieren:»body«und»#wrapper« Abstände der Layoutbereiche im Wrapper optimieren Die e für kleine Viewports optimieren Stylesheets»inhalte-943«erstellen und einbinden Startseite:»Die neuesten Nachrichten«und»Die nächsten Termine« Startseite: Die Bilder im Slider optimieren Meta-Navigation, Sitemap und Newsmenü für alle Bildschirmbreiten Optimierungen an en auf verschiedenen Seiten Feinschliff: Abstände für die Navigation korrigieren Mobile Seitenlayouts und 12-Spalten Grid Mobile Seitenlayouts und responsives Webdesign »Media Queries«: Die Beispielseiten passen sich dem Viewport an »Mobile Seitenlayouts«: Contao serviert zum Teil anderes HTML Wie Contao mobile Geräte erkennt »Music Academy«: Mobile Seitenlayouts in Aktion Die»Music Academy«reagiert nicht auf die Viewportgröße Die»Music Academy«sieht auf mobilen Geräten ganz anders aus Überblick: Die Seitenlayouts in der»music Academy« Vergleich: Die Einstellungen in»default«und in»default mobile« Fazit: mobile Seitenlayouts und responsives Webdesign Mobile Seitenlayouts für die»beispielsite Contaobuch« Beispiel 1: Die Startseite mit Zufallsbild statt Slider Beispiel 2: Die Startseite mit einem Anrufbutton in der Sidebar Gridlayouts mit dem 12-Spalten Grid von Contao Das Contao-Grid hat zwölf Spalten, die zusammen 960 px breit sind Layoutraster werden einfach durch Zuweisen der Gridklassen erstellt Das Contao-Grid passt sich bei kleinen Viewports automatisch an »Seitenlayout«: Voraussetzungen für das Arbeiten mit dem Grid »selemente«: Regeln bei der Arbeit mit den Gridklassen Das CSS zum 12-Spalten Grid Das 12-Spalten Grid, Teil 1 das Fundament Das 12-Spalten Grid, Teil 2 das Grid wird ein Grid Das 12-Spalten Grid, Teil 3 das Grid wird responsive TEIL V Systemverwaltung 20 SEO: die Optimierung für Suchmaschinen Lesbare Adressen: URLs umschreiben Content-Management-Systeme und URLs »System Einstellungen«: drei wichtige URL-Einstellungen Drei Voraussetzungen zum Umschreiben der URLs Die Rewrite-Regel zum URL-Umschreiben in der».htaccess« Contao im Unterordner: die»rewritebase«in der».htaccess« So wird s gemacht: URLs umschreiben in der Praxis Perfekt: URLs ohne»items«und»events« Flache oder Ordner-URLs Contao kann beides URLs bei statischen Webseiten und bei CMSystemen Contao erzeugt von Haus aus flache URLs Contao kann auch Ordner-URLs

10 20.3 Seitenalias, Seitentitel und Seitenbeschreibung optimieren Seitenname und Seitenalias im Backend von Contao Der Titel der Seite:»<title>... </title>« Die Beschreibung der Seite:»<meta name="description">« Abfangjäger: 404 und Statusmeldungen: Der Webserver schickt eine Nummer mit Seite nicht gefunden: Darf s vielleicht was anderes sein? Zugriff verweigert: Diese Seite gibt es, aber nicht für Sie Eine XML-Sitemap für Google & Co Die Google Webmaster-Tools Eine XML-Sitemap in Contao erstellen Schritt 2: Den Ordner»Downloads«in der Dateiverwaltung schützen Schritt 3: Das selement»downloads«konfigurieren Weitere Möglichkeiten zur Mitgliederverwaltung Das Modul»Passwort vergessen« Das Modul»Persönliche Daten« Die automatische Registrierung für Mitglieder Benutzer: im Backend angemeldete Mitarbeiter Benutzerverwaltung: die Übersicht Mitglieder: im Frontend angemeldete Besucher Mitglieder und Benutzer: der Unterschied Mitgliedergruppen und Mitglieder einrichten Mitgliedergruppen einrichten Neue Mitglieder erstellen Seiten für die An- und Abmeldung erstellen Frontend-Module für die An- und Abmeldung erstellen Die Frontend-Module zur Anmeldung im Überblick Modul Nr. 1: Das Anmeldeformular»[Login-Formular]« Modul Nr. 2: Die Abmeldung»[Automatischer Logout]« Modul Nr. 4: Der Link zur Anmeldeseite»[Eigener HTML-Code]« Modul Nr. 4: Anmeldename und Abmeldelink»[Eigener HTML-Code]« Die erstellten Module einbinden Die Frontend-Module zum An- und Abmelden in Artikeln einbinden Die Links zur An- und Abmeldung im Fußbereich einbinden Die Frontend-Module gestalten Das HTML für die Links und das Formular zur Anmeldung Das CSS für die Links und das Formular zur Anmeldung Testen, ob An- und Abmeldung funktionieren Einen geschützten Downloadbereich einrichten Schritt 1: Zugriffsschutz für die Seite»Downloads«einrichten Die Benutzergruppe»Redakteure Nachrichten« Schritt 1: Name eingeben und erlaubte Module freigeben Schritt 2: Pagemounts und Filemounts einrichten Schritt 3: Rechte für Erweiterungen»Nachrichten-Rechte« Schritt 4: Erlaubte Felder Berechtigungen für die Tabelle»tl_news« Die Benutzerin»Helen Lewis«einrichten Schritt 1: Benutzername und Passwort Schritt 2: Benutzergruppen und Rechtevererbung Schritt 3: Testen ein Klick, und Kevin Jones ist Helen Lewis Die Benutzergruppe»Redakteure Artikel« Die Benutzergruppe»Redakteure Artikel«einrichten Benutzer der Benutzergruppe»Redakteure Artikel«zuweisen Zugriffsrechte für Seiten und Artikel setzen Zugriffsrechte: Was mit Seite und Artikel gemacht werden darf Zugriffsrechte für die freigegebenen Seiten setzen Wartung: die Website im Alltag Das»System-Log«schreibt mit Die»Systemwartung«im Überblick »Systemwartung«: Suchindex neu aufbauen »Systemwartung«: Daten bereinigen Cache leeren für Redakteure:»Persönliche Daten Daten bereinigen«

11 23.3 Den»Cache-Flow«in Contao kontrollieren Cache as cache can: Cache gibt es in Contao und im Browser Der»Cache-Modus«von Contao in»system Einstellungen« Die»Cache-Einstellungen«in der Seitenstruktur definieren Backups erstellen: Datenbank und Dateien sichern Die MySQL-Datenbank sichern Die Daten auf dem Webspace sichern Updates: die Versionsnummern von Contao Das Bugfix-Release: 3.3.x Das Minor-Release: 3.x Das Major-Release: x »Long-Term-Support«: LTS-Releases werden länger unterstützt Sollte ich eine funktionierende Contao-Website updaten? Checkliste vor einem Update Der»Live Update«-Service im Backend von Contao Mit dem»contao-check«prüfen, ob der Webspace geeignet ist Das»Live Update«kann auch bestehende Installationen reparieren Das»Live Update«macht auch ein Datenbank-Backup Machen Sie vor dem ersten»live Update«ein Komplett-Backup Eine»Live Update ID«erwerben Das manuelle Update per FTP Schritt 1: Backup von Datenbank und Dateien Schritt 2: Aktuelle Contao-Version herunterladen und entpacken Schritt 3: Das entpackte Archiv vorbereiten Schritt 4: Das Archiv auf den Webspace kopieren und synchronisieren Schritt 5: Datenbank mit dem Installtool aktualisieren Webstatistiken mit Google Analytics und Piwik Themes und Frontend-Templates Ein Theme bestimmt das Aussehen der Website Der Theme-Manager verwaltet bekannte Komponenten »Theme One«von der Beispielsite exportieren und analysieren All-in-one: das Innenleben einer CTO-Datei Ein Blick in die Datei»theme_one.cto« Was nicht in einem Theme enthalten ist: e, Seiten usw Einige Quellen für Contao-Themes Einsatzgebiete: Wozu man Themes einsetzen kann Der Contao Theme-Store:»themes.contao.org« RockSolid Themes: rocksolidthemes.com Weitere Websites mit Contao-Themes Die Beispielsite im Look der»music Academy« Schritt 1: Theme im Backend importieren Schritt 2: Theme»Music Academy«aktivieren Über die Anpassung von Themes Was im neuen Theme fehlt In Artikeln eingebundene Frontend-Module sind Reparatur: Anpassung von in Artikeln eingebundenen Modulen Frontend-Templates: Theme plus Seiten, e und Benutzer »Theme«vs.»Frontend-Template« Frontend-Templates sind nützlich zum»einfrieren«von Websites In den Beispieldateien: ein Frontend-Templates für (fast) jedes Kapitel Sicherheitshinweise (nicht nur für Contao) Das potenzielle Problem Vertrauenswürdige Quellen Ein Theme prüfen Backend-Benutzer: Angriff von innen TEIL VI Tipps und Tricks 25 Tipps und Tricks bei der Arbeit mit en Text im Fußbereich mit dem TinyMCE pflegen Recycling: e auf mehreren Seiten wiederholen »Verknüpfungen«: zum Einfügen auf einzelnen Seiten »Frontend-Module«: zum Einfügen auf allen Seiten eines Seitenlayouts Artikelteaser auf Übersichtsseiten Teasertexte für die drei Artikel erstellen Die Teasertexte auf der Seite»Artikel«einbinden Das HTML für die Teasertexte auf der Seite»Artikel erstellen« Alternative zur Teaserliste: automatische Weiterleitung auf die erste Unterseite

12 25.4 Mehrere Artikel auf einer Seite Methode 1: Nur ein Artikel pro Seite und Spalte Methode 2: Mehrere komplette Artikel pro Seite und Spalte Methode 3: Mehrere angeteaserte Artikel pro Seite und Spalte Die Frontend-Module»Artikelliste«und»Artikelnavigation« Die Erweiterung für Google Maps: [dlh_googlemaps] Die Erweiterung [dlh_googlemaps] im Überblick Schritt 1: Eine Karte erstellen in»e Google Maps« Schritt 2: Karten-Elemente eine Info-Sprechblase hinzufügen Schritt 3: Das selement»google Map«in Contao einbinden Gewusst wie: die manuelle Ermittlung der Geo-Koordinaten Begrenzt nützlich: mehrere Domains in einer Contao-Installation Domainumleitung: zu domain.de (oder umgekehrt) Zusammenfassung: mehrere Websites in mehreren Sprachen Die Inserttags im Überblick Inserttags für Link-Elemente Benutzereigenschaften: Inserttags für Frontend-Benutzer Seiteneigenschaften: Inserttags für alles rund um Seiten Umgebungsvariablen Include-Elemente Verschiedenes: Datum, und Sprachen Tipps und Tricks zur Systemverwaltung Tipps und Tricks zum TinyMCE Vordefinierte CSS-Klassen im TinyMCE-Stylesheet»files/tinymce.css« Die Schrift im TinyMCE gestalten im Stylesheet»files/tinymce.css« Textbausteine im TinyMCE: e aus der Vorlage einfügen Layouts für Fortgeschrittene »Sticky Footer«ohne Änderungen am Seitentemplate»fe_page« »Fullpage-Layout«: Header und Footer so breit wie das Browserfenster Seitenlayout: eigene Layoutbereiche erstellen und aktivieren Seitentemplate Marke Eigenbau:»fe_irgendwas« Contao mit anderen CSS-Frameworks nutzen Die Systemkonfiguration:»localconfig.php« Einige Erweiterungen von Drittanbietern Nützliche Helfer im Backend »EasyThemes«ist auch bei nur einem Theme nützlich »Sticky Backend Footer«fixiert die Speichern-Leiste im Arbeitsbereich Kleine Erweiterungen für das Frontend »Social Images«: Bilder für soziale Netze bereitstellen Mehrspaltige e im sbereich Isotope, MetaModels und ungefähr weitere Erweiterungen »Isotope ecommerce«ein Shop-System für Contao »MetaModels«Datenstrukturen jenseits des Seitenbaums Ausblick: Erweiterungsverwaltung wird Composer Index Die Sprachkonfiguration:»langconfig.php« Ein Beispiel:»Mehr «statt»weiterlesen « Der Aufbau der Einträge in der»langconfig.php« Ein zweites Beispiel: Die Überschrift»Einen Kommentar schreiben«ändern Infos zu Datenbanktabellen:»dcaconfig.php« Mehrere Websites in einer Contao-Installation Jede Website muss einen eigenen Startpunkt haben Mehrsprachige Websites