Dieses Handbuch wurde auf Basis der Contao-Version 3.X erstellt. Momentan fehlt mir die Zeit dieses Handbuch zu aktualisieren.

Schnelleinstieg in das Content-Management-System Contao

1. Allgemeines

    \n
  •  Alle Daten, die in einer Contao-basierenden Webseite verwendet werden sollen, müssen zuvor in der „Dateiverwaltung“ hochgeladen werden.
  • \n

1.1. Wichtige Begriffe

    \n
  • „Backend“ ist der Editor – für den Besucher der Webseite nicht erreichbar (passwortgeschützt)
  • \n
  • „Frontend“ ist die Ausgabe der fertigen Webseite – für den Besucher sichtbar.
  • \n

1.1. Was bedeuten die Symbole?

In Contao werden Ihnen immer wieder einige Bearbeitungssymbole begegnen.
\n
Hier deren Bedeutung:
\n
 
\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
SymbolBedeutung
Stift - etwas bearbeitenEine Seite / ein Archiv bearbeiten
Plus - duplizieren Eine Seite oder ein Element duplizieren (kopieren)
duplizieren(Nur im Seitenbaum) Seite incl. aller Unterseiten duplizieren
Pfeil - verschiebenEine Seite oder ein Element verschieben
löschenEine Seite oder ein Element löschen
Auge - sichtbarDie Seite oder das Element ist vorhanden und sichtbar (öffentlich)
Auge - unsichtbarDie Seite oder das Element ist vorhanden, aber nicht sichtbar (unveröffentlicht)
Info - mehr DetailsTechnische Details zu einer Seite / einem Element anzeigen.
einfügenAn dieser Stelle etwas einfügen (Dateiverwaltung oder Seitenstruktur)
einfügenDie Seite wird als Unterseite angelegt (Seitenstruktur)
Artikel bearbeitenDen Artikel einer Seite bearbeiten
EinzelelementAuswahl eines Elementes (aktiv)
mehrere ElementeAuswahl mehrerer Elemente (aktiv)
\n

2. An- und Abmelden

2.1. Anmelden

\n

Es erscheint dieses Fenster:

\n

Login für das Backend

\n

Der Benutzername setzt sich zusammen aus dem ersten Buchstabe des Vornamens, gefolgt von einem Punkt, gefolgt vom Nachnamen. Alles ohne Leerzeichen und klein geschrieben, z.B. „p.mahler“. Das Passwort ist nur Ihnen bekannt.

\n

Nach einem Klick auf „Anmelden“ sollte das Hauptmenü von Contao erschienen sein:

\n

Hauptmenü des Backends

2.2. Abmelden

Klicken Sie in der rechten oberen Ecke auf

\n

Abmeldebutton

3. Beiträge / Neuigkeiten

3.1. Einen Beitrag / eine Neuigkeit erstellen

Vorbereiten der Bilder:

\n

Bearbeiten Sie vor dem Erstellen des eigentlichen Artikels die Bilder, die Sie in den Beitrag einfügen möchten. Ein „Titelbild“ wird immer empfohlen, da es den Beitrag interessanter macht.

\n
    \n
  • Gehen Sie nach der Anleitung unter 4. Bilder bearbeiten vor.
  • \n
  • Anschließend laden Sie das Bild hoch - 4.4. – Bilder hochladen
  • \n

Hauptanleitung:

\n

Menü mit den Backend-Modulen

\n
    \n
  • Loggen Sie sich ein --> 2.2. -Einloggen\n

     

    \n
  • \n
  • Nach dem Anmelden sollte das Hauptmenü von Contao auf der linken Seite erschienen sein.
  • \n
  • Um eine Neuigkeit zu erstellen, klicken Sie auf „Nachrichten“.
  • \n
  • Klicken Sie anschließend auf den Stift (Stift - etwas bearbeiten) von dem Archiv, in dem Sie einen Beitrag erstellen möchten.
  • \n
  • Sie erhalten nun eine Übersicht über alle Beiträge, die in dem Archiv bereits vorhanden sind.
  • \n
\n
\n
    \n
  • Titel: Geben Sie dem Artikel einen aussagekräftigen Titel, der die Länge der Zeile nicht überschreitet.
  • \n
  • Nachrichtenalias: Lassen Sie dieses Feld einfach frei; es wird automatisch aus dem Titel ergänzt.
  • \n
  • Datum: Geben Sie das Datum des Berichtes ein. Dies ist wichtig, da danach die Beiträge geordnet werden. Standard ist immer das heutige Datum.
  • \n
  • Unterüberschrift: Geben Sie eine Unterüberschrift für die Neuigkeit ein. Dies ist kein Muss, da im Normalfall der Titel ausreicht.
  • \n
  • Teasertext: Dieses Feld ist nicht für den eigentlichen Inhalt gedacht. Hier sollten nur 1-2 Sätze stehen, um den Leser neugierig zu machen. Es macht sich später in der Ausgabe nicht gut, wenn der Teasertext schon den gesamten Inhalt vorweg nimmt.
  • \n
  • Ein Bild hinzufügen: (Haken setzen, um ein Bild hinzufügen ) Das Bild, welches Sie hier einstellen, wird später nur in der Galerie angezeigt und dient auch nur zum Neugierig machen. Dieses solte vorher hochgeladen werden. (--> 4.4. „Hochladen von Bildern“). Wählen Sie nun, wie im Windows-Explorer, ein schönes Bild aus und bestätigen Sie es mit einem Punkt rechts (Bild auswählen).
  • \n
  • Beitrag veröffentlichen: Setzen Sie unbedingt einen Haken (Artikel veröffenlichen), da der Artikel sonst nicht angezeigt wird.
  • \n
  • Schaltfläche: „Speichern und schließen“
  • \n
\n

An dieser Stelle ist nur der Artikel ohne wirklichen Inhalt erstellt wurden. Letzteres erfahren Sie auf Seite 8. Nachdem Sie auf Speichern und schließen geklickt haben, erscheint wieder der Inhalt des aktuellen Nachrichtenarchivs.

\n
    \n
  • Klicken Sie, um den leeren Artikel mit Inhalten zu füllen, auf den Stift (Den Artikel bearbeiten) und anschließend oben rechts auf .
  • \n
  • Klicken Sie auf den Pfeil oben rechts (Das Element an dieser Stelle einfügen). Dieser ist beschriftet mit „Legen Sie als Nächstes die (neue) Position des Elements fest“. Alternativ können Sie auch, wenn schon Elemente erstellt wurde, auf das grüne Plus (Nach dem Element einfügen) klicken. Das neue Element wird dann nach dem aktuellen eingefügt.
  • \n
  • Von nun an läuft die weitere Erstellung so ab wie in der Bearbeitung der Hauptseiten.
  • \n
  • Standardmäßig ist bei Elementtyp immer „Text“ ausgewählt. Hier können Sie den kompletten Text des Artikels eintragen.
  • \n
  • Wenn Sie eine Galerie einfügen möchten, erstellen Sie ein neues Element und wählen Sie bei „Elementtyp“ Galerie aus.
  • \n
  • Wählen Sie dafür unter Quelldatei die Bilder aus, die in der Galerie gezeigt werden sollen. à Voraussetzung ist wieder, dass alle Bilder vorher hochgeladen wurden. Sie können eine optionale Überschrift für die Galerie anlegen. Bitte benutzen Sie dafür als Größe „h3“. Alle weiteren Einstellungen: - Bildbreite und Höhe: 110 und im Auswahlmenü „Mitte Mitte“, pro Reihe „4“; Haken bei Großansicht/Neues Fenster!
  • \n
  • Klicken Sie zum Abschluss auf „Speichern und schließen“ am Ende der Seite.
  • \n
\n

3.2. Einen Beitrag / eine Neuigkeit bearbeiten

    \n
  • Loggen Sie sich ein --> 2.2. Einloggen
  • \n
  • Nach dem Anmelden sollte das Hauptmenü von Contao auf der linken Seite erschienen sein.
  • \n
  • Klicken Sie auf „Nachrichten“.
  • \n
  • Klicken Sie anschließend auf den Stift (Öffnen des Archivs) von dem Archiv, in dem Sie einen Beitrag bearbeiten möchten.
  • \n
  • Sie erhalten nun eine Übersicht über alle Beiträge, die in dem Archiv bereits vorhanden sind.
  • \n
  • Wählen Sie über den Stift (Öffnen des Beitrages) den Beitrag aus, den Sie bearbeiten möchten. Es werden alle Elemente aufgelistet. 
  • \n
  • Öffnen Sie mit dem Stift (Bearbeiten des Absatzes) das Element, dessen Inhalt Sie verändern möchten.
  • \n
  • Führen Sie die Änderungen durch und klicken Sie anschließend auf „Speichern und schließen“ am Ende der Seite.
  • \n

4. Bilder bearbeiten und hochladen

Viele Kameras nehmen sehr hochauflösende Bilder auf. Eine solche Qualität ist gerade im Internet nicht immer erforderlich. Alle Bilder müssen vor dem Einbau in die Internetseite verkleinert werden, um den Upload Prozess und die Ladezeit zu beschleunigen. Bilder, die bereits eine Breite von 1024 Pixeln haben oder kleiner sind, müssen nicht skaliert werden. Wer nicht Photoshop zur Verfügung hat, kann eines der folgenden Programme benutzen:

4.1. Bilder bearbeiten (Microsoft Office Picture Manager)

Dieses Programm ist Bestandteil von Microsoft Office (ab 2007). Download der Demoversion.

\n
    \n
  • Durch die Auto-Korrektur kann das Bild etwas ausgebes-sert werden. Klicken Sie auf Microsoft Picture Manager - Auto-Korrektur im oberen Bild-schirmbereich.
  • \n
  • Klicken Sie anschließend, um die Größe anzupassen auf Microsoft Picture Manager - Bilder bearbeiten im oberen Bildschirmbereich. Es öffnet sich rechts ein Bearbeitungsmenü.
  • \n
  • Klicken Sie unter „Bildergrößen ändern“ auf Microsoft Picture Manager - Größe änden.
  • \n
  • Wählen Sie anschließend unter „Vordefinierte Breite x Hö-he:“ aus der Auswahlliste „Dokument Groß (1024 x 768 px)“. Mit einem Klick auf „OK“ wird das Bild skaliert.
  • \n
  • Klicken Sie, um das Bild zu Speichern auf Datei – Speichern. Fertig!
  • \n

4.2. Bilder bearbeiten (Paint.NET)

Dieses Programm bekommen Sie unter www.getpaint.net/download.htmlPaint.NET - Größe ändern

\n
    \n
  • Öffnen Sie das Bild mit Paint.NET – klicken Sie, um die Größe des Bildes zu ändern, unter „Bild“ auf „Größe ändern“
  • \n
  • Vergewissern Sie sich, dass „Seitenverhältnis beibehalten“ angehakt ist und tragen Sie bei Breite „1024“ ein. Die Höhe wird automatisch ergänzt. Klicken Sie anschließend auf OK.
  • \n
  • Abschließend speichern Sie das Bild über „Datei“ - „Speichern“
  • \n
\n

 

 

\n
    \n
  • Geben Sie bei „Qualität“ einePaint.NET Bilder abspeichern / Qualitätn Wert von „90“ ein - das reicht für Internetseiten aus.
  • \n

4.3. Bilder bearbeiten (IrfanView)

Dieses Programm bekommen Sie unter www.irfanview.de/download.phpGröße des Bildes ändern – Irfan-View

\n
    \n
  • Wenn das Bild etwas blässlich wirkt, können Sie dies durch Anwendung der Auto-Korrektur ausbessern: Klicken Sie in der Menüleiste auf „Bild“ – „Auto-Korrektur“.
  • \n
  • Alle Bilder sollten eine Breite von 1024 Pixel nicht über-schreiten: Klicken Sie, um das Bild zu skalieren auf „Bild“ – „Größe ändern“ – im Feld „Neue Größe“ Breite „1024“ ein-tragen die Höhe wird automatisch ergänzt.
  • \n
\n

 

Fertiges Bild speichern - Irfan-View

\n
    \n
  • Zum Schluss sollten Sie das Bild als JPG speichern: Klicken Sie dazu auf „Datei“ – „Speichern (Ori-ginal-Verzeichnis)“ – Dateityp: „JPG (Standard)“. Über-nehmen Sie die Einstellungen, wie in Abbildung 7 darge-stellt. Mit einem Klick auf „Speichern“, wird das fertige Bild gespeichert.
  • \n

4.4. Bilder hochladen

Alle Bilder, die Sie hochladen, dürfen nicht breiter als 1024 Pi-xel sein! - Bilder bearbeiten.

\n
    \n
  • Um die Bilder hochzuladen, klicken Sie auf „Dateiverwal-tung“.
  • \n
\n

Die folgenden Schritte müssen individuell ausgeführt werden.

\n
    \n
  • Klicken Sie auf Contao Dateiverwaltung - Neuer Ordner (befindet sich im oberen Bereich)
  • \n
  • Klicken Sie im übergeordneten Ordner auf Contao Dateiverwaltung - Den Unterodner innerhalb dieses Ordners erstellen. , um einen Unterordner zu erstellen. 
  • \n
\n


Beispiel:

\n
    \n
  • Wenn Sie unter „events-berichte“ auf „Contao Dateiverwaltung - Den Unterodner hier einfügen “ klicken, wird auf der gleichen Contao Datenverwaltung - Ordnerhierarchie als BeispielEbene von „kreisreiterball-2012“ ein weiterer Ordner erstellt. Legen Sie für jeden neuen Artikel und des-sen Daten einen neuen Unterordner an, um die Übersicht zu behalten.
  • \n
  • Speichern und schließen
  • \n
\n
    \n
  • Um in den eben erstellten Ordner Bilder hochzuladen, kli-cken Sie auf  Contao Dateiverwaltung - Daten auf den Webserver hochladen (upload) (befindet sich im oberen Be-reich).
  • \n
  • Und wählen Sie mit „Contao Dateiverwaltung - Zielordner für die Daten auswählen, die hochgeladen werden sollen“ den eben erstellten Ordner aus.
  • \n
  • Es erscheint diese Seite:
  • \n
\n

Contao Dateiverwaltung - Formular zum Daten hochladen

\n
    \n
  • Wählen Sie über „Durchsuchen“ das Bild aus, welches Sie hochlanden möchten und klicken Sie anschließend\n
      \n
    • Wenn Sie weitere Bilder hochlanden möchten, auf „Daten hochladen“
    • \n
    • Wenn Sie nur dieses Bild hochladen möchten oder es das letzte Bild war, auf „Daten hochladen und zurück“
    • \n
    \n
  • \n

5. Daten zu Download anbieten

5.1. Dokumente vorbereiten

    \n
  • Speichern Sie das Dokument im PDF-Format ab. Die dabei erzeugte Datei *.pdf kann später nicht verändert werden.
  • \n
  • Möglicherweise benötigen Sie in Microsoft Office eine Erweiterung, die Sie kostenlos bekommen.
  • \n

5.2. Allgemeine Daten hochladen

Unter 4.4 finden Sie eine Anleitung, in der ausschließlich das Hochladen von Bildern erklärt ist.

\n
    \n
  • Um allgemeine Daten hochzuladen, klicken Sie unter Backend-Module auf „Dateiverwaltung“.
  • \n
  • Nutzen Sie für weitere Daten entweder den Ordner „downloads“ oder erstellen Sie einen neuen (4.4. Bilder hochladen).
  • \n
  • Klicken Sie auf Contao Dateiverwaltung - Datei-Upload und wählen Sie mit Contao Dateiverwaltung - Diesen Ordner benutzten den entsprechenden Ordner aus.
  • \n
  • Anschließend können Sie über Durchsuchen Ihre Daten hochladen.
  • \n

6. Hauptseiten

6.1. Eine neue Hauptseite anlegen

    \n
  • Einloggen - 2.2. Einloggen
  • \n
  • Klicken Sie unter Backendmodule (linke Seite) auf „Seitenstruktur“. Hier finden Sie alle vorhandenen Seiten.
  • \n
  • Klicken Sie im oberen Bereich auf „Neue Seite “.
  • \n
  • Sie müssen nun noch festlegen, an welcher Stelle die neue Seite eingefügt wird.
  • \n
  • Am Ende der Bearbeitungsknöpfe erscheinen nun zwei weitere.\n
      \n
    • Contao Seitenstruktur - Seite als Unterseite einfügenDie neue Seite in die aktuelle Seite als Unterseite einfügen.
    • \n
    • Contao Seitenstruktur - Seite als Hauptseite einfügenDie neue Seite nach dieser als Hauptseite einfügen.
    • \n
    \n
  • \n
  • Das Einfügen der Seiten funktioniert so ähnlich, wie das Erstellen eines neuen Ordners im Datenmanager.
  • \n
  • Füllen Sie anschließend alle benötigten Felder aus.
  • \n
  • Mit einem Klick auf „Speichern und Schließen“, wird der Vorgang abgeschlossen.
  • \n

6.2. Den Inhalt einer Hauptseite bearbeiten

    \n
  • Einloggen - 2.2. Einloggen
  • \n
  • Klicken Sie unter Backendmodule (linke Seite) auf „Artikel“. Hier finden Sie alle vorhandenen Seiten mit ihren Artikeln.
  • \n
  • Klicken Sie auf den Stift (Stift - etwas bearbeiten), um einen Artikel zu bearbeiten.
  • \n
  • Nun erhalten Sie eine Übersicht der einzelnen Elemente, die Sie nun mit dem Bearbeitungssymbol (Stift - etwas bearbeiten) bearbeiten können.
  • \n