PART 2: Die ersten Schritte im Contao CMS

Nach der Erstellung unseres Layouts in Photoshop im ersten Teil unserer Contao-Serie und der Installation von Contao, starten wir mit den ersten grundlegenden Schritten im CMS-System.

1. Sobald Contao installiert ist, melden wir uns auf der Startseite an.
2. Zunächst legen wir unter "System" -> "Einstellungen" den Titel der Seite - in unserem Fall Webshop - fest. Danach stellen wir das europäische Datums- und Zeitformat ein und wählen die Option "URL´s umschreiben". (Hierfür muss die htaccess - Datei auf dem Server liegen und aktiviert sein.) Diese grundlegenden Einstellungen speichern wir nun.
3. Anschließend legen wir den Startpunkt der Site fest. Dazu gehen wir unter "Layout" auf "Seitenstruktur" und legen eine "Neue Seite" an. In dem sich öffnenden Dialog können wir den "Seitennamen", den "Seitentitel", die Sprache und das Sprachen-Fallback vergeben. Mit dem Häkchen bei "Seite veröffentlichen" und anschließendem Speichern haben wir den Startpunkt der Website angelegt.
4. Die erste Seite, die eigentliche Homepage, legen wir mit Auswahl einer "Neuen Seite" an und fügen sie in den Startpunkt ein. Danach vergeben wir wieder einen Seitennamen und den Seitentitel, in diesem Fall "Home". Danach muss der Seite ein Layout zugewiesen werden. Da wir noch kein Layout angelegt haben, markieren wir zunächst "Seite veröffentlichen" und speichern unsere Eingaben.
5. Zum Anlegen des Layouts wählen wir unter "Layout" -> "Themes" und "Neues Theme" anlegen. In dem sich öffnenden Dialog vergeben wir einen "Theme-Titel" und den "Autor" und speichern wieder. Nun wählen wir das Layout-Symbol neben unserem soeben angelegten Theme aus. Jetzt geben wir einen "Titel" für das Layout ein und wählen die "Zeilen", bzw. die vorgegebenen Bereiche aus. In unserem Fall hat das Layout einen festen Header- und Footer-Bereich. Hier können wir nun die Maße aus unserem Photosphop-Layout eintragen. Ebenso geben wir unter "Spalten" die Maße der linken Spalte ein. Die Eingaben können wir nun speichern und den Dialog schließen.
6. Unter "Inhalte" -> "Artikel" sehen wir nun unsere erste Seite. Zum Anlegen des ersten Artikels wählen wir unsere "Home"-Seite aus und wählen das Stift-Symbol zum Bearbeiten aus. Im sich öffnenden Dialog wählen wir "Neues Element" und fügen ein Text-Element ein. Wir geben die Überschrift "Webshop" und einen kleinen Text im Textfeld ein und speichern die Eingabe. Diese Eingaben können wir gleich auf der Homepage unserer Webseite sehen.
7. Bevor wir das Ergebnis bewundern können, müssen wir nun noch das Layout unserer Homepage zuweisen. Dazu wählen wir unter "Layout" -> "Seitenstruktur" unsere "Home" - Seite mit dem Stift-Symbol zum Bearbeiten aus. Im sich öffnenenden Dialog wählen wir unter "Ein Layout zuweisen" unser eben angelegtes Layout aus. Nach dem Speichern können wir nun im Frontend unserer Seite den ersten Artikel sehen.