Contao Community Documentation - Benutzerbeiträge [de]

Die erste Webseite

2010-07-30T04:46:40Z

ProjectX: /* Templates */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit zwei Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: zentriert
*Höhe der Kopfzeile/Header: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile/Footer: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner mit dem Namen "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

[[Datei:firstsite-templates.png|Templates]]

{{Hinweis|Dateien, die sowohl im Ordner "tl_files" als auch im Ordner "templates" liegen werden bei Updates des Contao-Cores NICHT verändert! Es empfiehlt sich aber dennoch gerade diese Dateien/Ordner als auch die Datenbank mehrfach zu sichern, da eben hier die Früchte Ihrer Arbeit und die Ihrer Redakteure liegen.}}

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigten Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes werden neben dem Namen des Themes und des Autors auch die Ordner angegeben, in denen sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Speichert man nun das neu erstellte Theme so erscheint es auch in der Theme-Manager-Übersicht. Hier erlangt man den Zugriff auf die Theme-eigenen CSS, Module und Seitenlayouts sowie grundlegende Einstellungen des Themes selbst.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Zuerst erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlen dem Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Dieses kann man aber zu diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Das macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher haben Sie ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Installation

2010-07-30T04:43:56Z

ProjectX: /* Kurzanleitung für die Installation bei einem Contao-tauglichen Webhoster */

{{stub}}
[[Category:Installation und Updates]]

=Installation von Contao=
==Kurzanleitung für die Installation bei einem Contao-fähigen Webhoster==

# Download des Contao-Cores auf www.contao.org
# Entpacken auf dem Heimrechner
# Hochladen der Dateien mittles FTP auf Ihren Server
# Hochladen des [[Systemdiagnosetool]]s ins Verzeichnis der Contao-Installation (gewöhnlicherweise das Root-Verzeichnis Ihrer Webadresse)
# Aufrufen der Diagnosedatei in der Adresszeile Ihres Browsers und eventuelle Fehlermeldungen beseitigen
# Aufrufen der Installationsdatei: www.IhreDomain.com/contao/install.php (ersetzen Sie "www.IhreDomain.com" mit Ihrer tatsächlichen Webadresse; in diesem Fall ist Contao im Rootverzeichnis Ihres Webservers installiert; der Zugang zum BackEnd (BE) liegt im Unterverzeichnis "contao/")
# Das Installationsskript führt Sie durch die abschließenden Schritte (die erforderlichen Daten zur Datenbank erhalten Sie von Ihrem Webhoster)
# Nach erfolgreicher Installation können Sie sich im BackEnd einloggen ("www.IhreDomain.com/contao/")

==Detaillierte Anleitung für die Installation bei einem kompatiblen Webhoster==

=Webhoster=
==Liste kompatibler Webhoster==
[[1 und 1 Internet]] (kompatibel mit ein paar Besonderheiten)

Hetzner.de (ab dem entsprechenden "Tarif inkl. MySQL-Datenbank" voll kompatibel)

==Workarounds für bestimmte Webhoster==
Bei manchen Webhostern ist es leider notwendig von obigem Standard Installationsschema abzuweichen.

Diese Besonderheiten sind hier aufgeführt um zu ermöglichen, dass Contao bei diesen Webhostern läuft.

Oftmals betrifft dies den so genannten [[Safemode Hack]], welcher bei etlichen Webhostern notwendig ist.
Weiterhin ist oftmals die SOAP Erweiterung nicht in PHP enthalten, was den Erweiterungskatalog nicht verwendbar macht (Mögliche Abhilfe hierbei ist jedoch [[TensideRepository]]).

{{Hinweis|In Zukunft wird hier eine Liste von Artikeln veröffentlicht, welche Anpassungen bei welchen Webhoster notwendig ist um Contao zum Laufen zu bekommen.}}

==Liste inkompatibler Webhoster==
In dieser Liste werden Webhoster gelistet, bei denen Contao nicht eingesetzt werden kann.
Bitte beim Hinzufügen von Webhostern darauf achten, dass man detailliert beschreibt woran es scheitert, wie z.B. "stellt nur PHP4 zur Verfügung".

Die erste Webseite

2010-07-30T04:21:04Z

ProjectX: /* Zwischenstand */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit zwei Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: zentriert
*Höhe der Kopfzeile/Header: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile/Footer: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner mit dem Namen "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

[[Datei:firstsite-templates.png|Templates]]

Merke: Dateien, die sowohl im Ordner "tl_files" als auch im Ordner "templates" liegen werden bei Updates des Contao-Cores NICHT verändert! Es empfiehlt sich aber dennoch gerade diese Dateien/Ordner als auch die Datenbank mehrfach zu sichern, da eben hier die Früchte Ihrer Arbeit und die Ihrer Redakteure liegen.

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigten Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes werden neben dem Namen des Themes und des Autors auch die Ordner angegeben, in denen sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Speichert man nun das neu erstellte Theme so erscheint es auch in der Theme-Manager-Übersicht. Hier erlangt man den Zugriff auf die Theme-eigenen CSS, Module und Seitenlayouts sowie grundlegende Einstellungen des Themes selbst.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Zuerst erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlen dem Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Dieses kann man aber zu diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Das macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher haben Sie ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Die erste Webseite

2010-07-30T04:19:16Z

ProjectX: /* Module Teil 1 */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit zwei Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: zentriert
*Höhe der Kopfzeile/Header: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile/Footer: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner mit dem Namen "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

[[Datei:firstsite-templates.png|Templates]]

Merke: Dateien, die sowohl im Ordner "tl_files" als auch im Ordner "templates" liegen werden bei Updates des Contao-Cores NICHT verändert! Es empfiehlt sich aber dennoch gerade diese Dateien/Ordner als auch die Datenbank mehrfach zu sichern, da eben hier die Früchte Ihrer Arbeit und die Ihrer Redakteure liegen.

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigten Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes werden neben dem Namen des Themes und des Autors auch die Ordner angegeben, in denen sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Speichert man nun das neu erstellte Theme so erscheint es auch in der Theme-Manager-Übersicht. Hier erlangt man den Zugriff auf die Theme-eigenen CSS, Module und Seitenlayouts sowie grundlegende Einstellungen des Themes selbst.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Zuerst erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlen dem Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Dieses kann man aber zu diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Das macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Die erste Webseite

2010-07-30T04:15:28Z

ProjectX: /* Theme */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit zwei Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: zentriert
*Höhe der Kopfzeile/Header: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile/Footer: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner mit dem Namen "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

[[Datei:firstsite-templates.png|Templates]]

Merke: Dateien, die sowohl im Ordner "tl_files" als auch im Ordner "templates" liegen werden bei Updates des Contao-Cores NICHT verändert! Es empfiehlt sich aber dennoch gerade diese Dateien/Ordner als auch die Datenbank mehrfach zu sichern, da eben hier die Früchte Ihrer Arbeit und die Ihrer Redakteure liegen.

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigten Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes werden neben dem Namen des Themes und des Autors auch die Ordner angegeben, in denen sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Speichert man nun das neu erstellte Theme so erscheint es auch in der Theme-Manager-Übersicht. Hier erlangt man den Zugriff auf die Theme-eigenen CSS, Module und Seitenlayouts sowie grundlegende Einstellungen des Themes selbst.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Zuerst erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlt im Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Diese kann man aber bei diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Dies macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Die erste Webseite

2010-07-30T04:05:51Z

ProjectX: /* Templates */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit zwei Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: zentriert
*Höhe der Kopfzeile/Header: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile/Footer: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner mit dem Namen "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

[[Datei:firstsite-templates.png|Templates]]

Merke: Dateien, die sowohl im Ordner "tl_files" als auch im Ordner "templates" liegen werden bei Updates des Contao-Cores NICHT verändert! Es empfiehlt sich aber dennoch gerade diese Dateien/Ordner als auch die Datenbank mehrfach zu sichern, da eben hier die Früchte Ihrer Arbeit und die Ihrer Redakteure liegen.

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigte Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes wird neben dem Namen des Themes und des Autors auch die Ordner angegeben, wo sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Wenn man das neu erstellte Theme nun speichert, sieht man in der Theme-Manager Übersicht das neue Theme. Hier werden jetzt die noch fehlenden Komponenten anhand der einzelnen Buttons recht sichtbar.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Als Erstes erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlt im Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Diese kann man aber bei diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Dies macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Die erste Webseite

2010-07-30T04:04:47Z

ProjectX: /* Templates */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit zwei Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: zentriert
*Höhe der Kopfzeile/Header: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile/Footer: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner mit dem Namen "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

Merke: Dateien, die sowohl im Ordner "tl_files" als auch im Ordner "templates" liegen werden bei Updates des Contao-Cores NICHT verändert! Es empfiehlt sich aber dennoch gerade diese Dateien/Ordner als auch die Datenbank mehrfach zu sichern, da eben hier die Früchte Ihrer Arbeit und die Ihrer Redakteure liegen.

[[Datei:firstsite-templates.png|Templates]]

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigte Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes wird neben dem Namen des Themes und des Autors auch die Ordner angegeben, wo sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Wenn man das neu erstellte Theme nun speichert, sieht man in der Theme-Manager Übersicht das neue Theme. Hier werden jetzt die noch fehlenden Komponenten anhand der einzelnen Buttons recht sichtbar.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Als Erstes erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlt im Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Diese kann man aber bei diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Dies macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Die erste Webseite

2010-07-30T04:04:33Z

ProjectX: /* Templates */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit zwei Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: zentriert
*Höhe der Kopfzeile/Header: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile/Footer: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner mit dem Namen "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

Merke: Dateien, die sowohl im Ordner "tl_files" als auch im Ordner "templates" liegen werden bei Updates des Contao-Cores NICHT verändert! Es empfiehlt sich aber dennoch gerade diese Dateien/Ordner als auch die Datenbank mehrfach zu sichern, da eben hier die Früchte Ihrer Arbeit und die Ihrer Redakteure liegen.
[[Datei:firstsite-templates.png|Templates]]

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigte Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes wird neben dem Namen des Themes und des Autors auch die Ordner angegeben, wo sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Wenn man das neu erstellte Theme nun speichert, sieht man in der Theme-Manager Übersicht das neue Theme. Hier werden jetzt die noch fehlenden Komponenten anhand der einzelnen Buttons recht sichtbar.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Als Erstes erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlt im Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Diese kann man aber bei diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Dies macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Die erste Webseite

2010-07-30T03:58:53Z

ProjectX: /* Dateien */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit zwei Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: zentriert
*Höhe der Kopfzeile/Header: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile/Footer: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner mit dem Namen "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

[[Datei:firstsite-templates.png|Templates]]

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigte Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes wird neben dem Namen des Themes und des Autors auch die Ordner angegeben, wo sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Wenn man das neu erstellte Theme nun speichert, sieht man in der Theme-Manager Übersicht das neue Theme. Hier werden jetzt die noch fehlenden Komponenten anhand der einzelnen Buttons recht sichtbar.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Als Erstes erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlt im Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Diese kann man aber bei diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Dies macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Die erste Webseite

2010-07-30T03:58:12Z

ProjectX: /* Dateien */

[[Category: Erste_Schritte]]
=Einleitung=
Dieses Tutorial soll es Einsteigern erleichtern und zeigen, wie man eine Webseite in Contao aufbaut. Es geht nicht auf die Details zu jeden Einstellungspunkt ein. Es soll nur die Frage beantworten: Ich habe Contao installiert, wo beginne ich jetzt mit meiner Webseite?

Das Ergebnis dieser Anleitung wird eine Webseite mit zwei Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: zentriert
*Höhe der Kopfzeile/Header: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile/Footer: 25px

=Voraussetzung=
*Contao wurde hoch geladen und erfolgreich installiert
*Mit dem [[Systemdiagnosetool]] wurde die [[Installation]] geprüft und, falls vorhanden, alle Fehler beseitigt
*Die Beispielwebseite "Music Academy" wurde bei der Installation NICHT importiert
*HTML und CSS Kenntnisse

=Vorbereitungsarbeit=
==Dateien==
Sämtliche Dateien (Bilder, Dokumente, Filme,..), die man für die Webseite benötigt, werden bei Contao im Ordner /tl_files/ gespeichert. Um die Übersicht zu behalten, kann man verschiedene Unterordner erstellen. Contao hat eine integrierte [[Dateiverwaltung]]; zu finden im Backend unter System --> Dateiverwaltung. Bei dieser Beispielwebseite werden alle zugehörigen Dateien im Ordner /tl_files/firstsite/ gespeichert. Da die Dateien, die für die Darstellung der Webseite verwendet werden, getrennt von den Dateien, die z.B. Redakteure in Artikeln oder News verwenden, abgelegt werden sollen, erzeugt man einen weiteren Unterordner namens "theme". Der Pfad lautet daher /tl_files/firstsite/theme/.

[[Datei:firstsite-filemanager.png|Filemanager]]

==Templates==
Templates (siehe auch [[Templates bearbeiten]]) werden im Ordner /templates/ verwaltet. Im Backend findet man die Templates über Layout --> Templates. Ähnlich wie bei den Files verhält es sich auch bei den Templates. Hier reicht jedoch ein Unterordner, in dem (sofern notwendig) alle modifizierten Templates der Webseite "firstsite" gespeichert werden.

[[Datei:firstsite-templates.png|Templates]]

=Theme=
Im [[Theme-Manager]] erstellt man ein neues Theme namens "firstsite". In diesem werden all die Komponenten verwaltet, die für die Darstellung der Webseite notwendig sind. Das sind die benötigte Dateien, Templates, Stylesheets, Frontend-Module und das Seitenlayout.

Beim Erstellen des Themes wird neben dem Namen des Themes und des Autors auch die Ordner angegeben, wo sich die Files und die Templates für die Darstellung der Website befinden.

[[Datei:firstsite-createtheme.png|Theme erstellen]]

Wenn man das neu erstellte Theme nun speichert, sieht man in der Theme-Manager Übersicht das neue Theme. Hier werden jetzt die noch fehlenden Komponenten anhand der einzelnen Buttons recht sichtbar.

[[Datei:firstsite-theme.png|Theme Übersicht]]

==Stylesheets==
Als Erstes erstellt man die Stylesheets, die für dieses Theme gelten. Hierfür klickt man im Theme-Manager beim Theme "firstsite" rechts auf den Button für die Stylesheets und anschliessend auf "Neues Stylesheet". In Verbindung mit der Beispielwebsite werden 2 Stylesheets erstellt: eine basic.css und eine layout.css.

Weitere Informationen über [[CSS|Contao und CSS]]

[[Datei:firstsite-createcss.png|Stylesheet erstellen]]

Der CSS-Manager sollte nun so aussehen:

[[Datei:firstsite-cssmanager.png|Stylesheet Manager]]

==Seitenlayout==
Der nächste Schritt ist die Erstellung eines [[Seitenlayout|Seitenlayouts]]. Dazu wechselt man wieder zurück zum Theme-Manager und klickt im Theme "firstsite" auf den Button für den Seitenlayout-Manager, und anschließend wiederum auf "Neues Layout". Gemäß der Vorgabe (siehe [[#Einleitung|Einleitung]]) nimmt man folgende Einstellungen vor:

[[Datei:firstsite-createlayout-1.png|Layout erstellen #1]]
[[Datei:firstsite-createlayout-2.png|Layout erstellen #2]]

Der Layout-Manager sollte nun so aussehen:

[[Datei:firstsite-layoutmanager.png|Layout Manager]]

==Module Teil 1==
Eigentlich fehlt im Theme jetzt nur mehr die Module. Die Beispielwebseite kommt mit einem Modul aus, dem Navigationsmodul. Diese kann man aber bei diesem Zeitpunkt noch nicht erstellen, da noch keine Seitenstruktur angelegt ist (siehe [[#Module_Teil_2|Module Teil 2]]). Eine Ausnahme bildet das Module "Artikel". Dieses muss nicht angelegt werden, sondern ist per Standardeinstellung vorhanden. Man muss dem Modul Artikel nur sagen, wo es angezeigt werden soll. Dies macht man im eben erstellten Seitenlayout unter dem Punkt "Frontend-Module". Bei dieser Beispielwebseite sollen die Artikel im Hauptbereich angezeigt werden.

[[Datei:firstsite-module-1.png|Layout Artikel zuweisen]]

=Seitenstruktur=
Die [[Seitenstruktur]] findet man im Backend unter Layout --> Seitenstruktur. Die Seitenstruktur legt die Hierarchie der Artikel der Webseite fest. Da Contao multidomainfähig ist, legt man zuerst den Startpunkt für die Webseite fest. Um einen Startpunkt festzulegen, klickt man auf "Neue Seite", gibt einen Namen für die Seite ein und wählt als Seitentyp "Startpunkt einer Webseite". Die restlichen Einstellungen für den Startpunkt werden wie auf den folgenden Screenshots gesetzt:

[[Datei:firstsite-startpoint-1.png|Startpunkt einer Webseite #1]]
[[Datei:firstsite-startpoint-2.png|Startpunkt einer Webseite #2]]

Im Anschluss erstellt man mehrere Webseiten vom Seitentyp "Reguläre Seite" ''innerhalb'' des Startpunktes der Webseite.

[[Datei:firstsite-regularpage.png|Reguläre Seite]]

Die Beispielwebseite erhält 4 Hauptnavigationspunkte:
*Startseite
*Über Mich
*Meine Eltern
*Impressum / Kontakt
Der Hauptnavigationspunkt "Meine Eltern" erhält als Unternavigationspunkte die Seiten:
*Mein Vater
*Meine Mutter

Die Seitenstruktur sollte nun wie folgt aussehen:

[[Datei:firstsite-sitestructure.png|Seitenstruktur]]

=Zwischenstand=
Bisher hat man ein Theme inkl. Seitenlayout und Stylesheets erstellt, gefolgt von der Seitenstruktur. War bis jetzt im Frontend nur die Meldung "Page not found" zu sehen, sieht man jetzt eine (vermeintlich) leere Seite. Schaut man sich jedoch den Quelltext an, sieht man, dass das Grundgerüst schon angezeigt wird. Um das auch optisch sichtbar zu machen, gibt man den Containern mittels CSS ein wenig Farbe. Dazu geht man zum Stylesheet layout.css (Theme --> Theme "firstsite" --> CSS --> layout.css --> bearbeiten) und fügt dort folgende Formatdefinitionen ein:

[[Datei:firstsite-layoutcolor.png|Dem Layout Farbe geben]]

Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontendlayout.png|Frontend Layout]]

Folgende Vorgaben der Website sind jetzt schon sichtbar:
*Die (feste) Breite der Seite
*Die Höhe des Headers
*Die Breite der linken Seite (die Breite des Hauptbereiches ergibt sich automatisch aus der Gesamtbreite minus der Breite der linken Seite)
*Die Höhe des Footers

=Module Teil 2=
Nun wird das Navigationsmodul erstellt. Dazu wechselt man in den Module-Manager (Themes --> Theme "firstsite" --> Frontend-Module und klickt auf neues Modul. Die [[ModulNavigation|Einstellungen]] sind wie folgt zu setzten:

[[Datei:firstsite-navi.png|Navigationsmodul]]

Das war jedoch nur der erste Teil. Im zweiten Teil muss das erstellte Modul noch dem Seitenlayout zugewiesen werden. Man wechselt im Theme-Manager wieder zum Layout-Manager und bearbeitet das im Abschnitt [[#Seitenlayout|Seitenlayout]] erstellte "default"-Layout. Unter dem Abschnitt "Frontend-Module" fügt man das Navigationsmodul hinzu und weist es der Spalte "Linke Spalte" hinzu.

[[Datei:firstsite-module-2.png|Layout Navimodule einbinden]]

Die Navigation ist jetzt im Frontend in der linken Spalte sichtbar.

=Artikel=
Zu guter Letzt erstellt man noch die Artikel für die angelegten Seiten. Sobald man in der Seitenstruktur eine neue Seite erstellt, wird automatisch für diese Seite ein (leerer) Artikel angelegt. Die Artikelverwaltung findet man im Backend unter Inhalte --> Artikel. Da für die Beispielwebseite 6 Seiten existieren, gibt es auch schon 6 Artikel; für jede Seite eine. Um einen Artikel mit Inhalt zu füllen, bearbeitet man den jeweiligen Artikel mit dem "Bleistift"-Button.

[[Datei:firstsite-articlemanager.png|Artikel Manager]]

Anschließend erstellt man ein neues [[Inhaltselemente|Inhaltselement]] vom Typ ''Text'' und speichert dieses ab.

[[Datei:firstsite-article.png|Artikel]]

Diese Schritte wiederholt man in den anderen 5 Artikeln.

=Die Webseite=
Die Beispielwebseite ist somit in ihren Grundzügen fertig gestellt. Das Frontend sollte nun so aussehen:

[[Datei:firstsite-frontend.png|Die fertige Webseite]]

Alle Anforderungen an die Webseite sind erfüllt. Natürlich kann eine Webseite so nicht veröffentlicht werden, aber das ist auch nicht die Aufgabe dieser Anleitung. Es fehlen noch Bilder, der Header, der Footer, die Formatierungen usw usw. Der jetzige Stand der Webseite ist nur der erste Schritt, und diese sollten nun ein bisschen klarer sein.

Installation

2010-07-30T03:47:59Z

ProjectX: /* Kurzanleitung für die Installation bei einem Contao-tauglichen Webhoster */

{{stub}}
[[Category:Installation und Updates]]

=Installation von Contao=
==Kurzanleitung für die Installation bei einem Contao-tauglichen Webhoster==

# Download des Contao-Cores auf www.contao.org
# Entpacken auf dem Heimrechner
# Hochladen der Dateien mittles FTP auf Ihren Server
# Hochladen des [[Systemdiagnosetool]]s ins Verzeichnis der Contao-Installation (gewöhnlicherweise das Root-Verzeichnis Ihrer Webadresse)
# Aufrufen der Diagnosedatei in der Adresszeile Ihres Browsers und eventuelle Fehlermeldungen beseitigen
# Aufrufen der Installationsdatei: www.IhreDomain.com/contao/install.php (ersetzen Sie "www.IhreDomain.com" mit Ihrer tatsächlichen Webadresse; in diesem Fall ist Contao im Rootverzeichnis Ihres Webservers installiert; der Zugang zum BackEnd (BE) liegt im Unterverzeichnis "contao/")
# Das Installationsskript führt Sie durch die abschließenden Schritte (die erforderlichen Daten zur Datenbank erhalten Sie von Ihrem Webhoster)
# Nach erfolgreicher Installation können Sie sich im BackEnd einloggen ("www.IhreDomain.com/contao/")

==Detaillierte Anleitung für die Installation bei einem kompatiblen Webhoster==

=Webhoster=
==Liste kompatibler Webhoster==
[[1 und 1 Internet]] (kompatibel mit ein paar Besonderheiten)

Hetzner.de (ab dem entsprechenden "Tarif inkl. MySQL-Datenbank" voll kompatibel)

==Workarounds für bestimmte Webhoster==
Bei manchen Webhostern ist es leider notwendig von obigem Standard Installationsschema abzuweichen.

Diese Besonderheiten sind hier aufgeführt um zu ermöglichen, dass Contao bei diesen Webhostern läuft.

Oftmals betrifft dies den so genannten [[Safemode Hack]], welcher bei etlichen Webhostern notwendig ist.
Weiterhin ist oftmals die SOAP Erweiterung nicht in PHP enthalten, was den Erweiterungskatalog nicht verwendbar macht (Mögliche Abhilfe hierbei ist jedoch [[TensideRepository]]).

{{Hinweis|In Zukunft wird hier eine Liste von Artikeln veröffentlicht, welche Anpassungen bei welchen Webhoster notwendig ist um Contao zum Laufen zu bekommen.}}

==Liste inkompatibler Webhoster==
In dieser Liste werden Webhoster gelistet, bei denen Contao nicht eingesetzt werden kann.
Bitte beim Hinzufügen von Webhostern darauf achten, dass man detailliert beschreibt woran es scheitert, wie z.B. "stellt nur PHP4 zur Verfügung".

Installation

2010-07-30T03:45:56Z

ProjectX: /* Liste kompatibler Webhoster */

{{stub}}
[[Category:Installation und Updates]]

=Installation von Contao=
==Kurzanleitung für die Installation bei einem Contao-tauglichen Webhoster==

# Download des Contao-Cores auf www.contao.org
# Entpacken auf dem Heimrechner
# Hochladen der Dateien mittles FTP auf Ihren Server
# Hochladen des [[Systemdiagnosetool]]s ins Verzeichnis der Contao-Installation (gewöhnlicherweise das Root-Verzeichnis Ihrer Webadresse)
# Aufrufen der Diagnosedatei in der Adresszeile Ihres Browsers und eventuelle Fehlermeldungen beseitigen
# Aufrufen der Installationsdatei: www.IhreDomain.com/contao/install.php (ersetzen Sie 'www.IhreDomain.com' mit Ihrer tatsächlichen Webadresse; in diesem Fall ist Contao im Rootverzeichnis Ihres Webservers installiert; der Zugang zum Backend liegt im Unterverzeichnis '/contao')
# Das Installationsskript führt Sie durch die abschließenden Schritte (die erforderlichen Daten zur Datenbank erhalten Sie von Ihrem Webhoster)
# Nach erfolgreicher Installation können Sie sich im Backend (BE) einloggen ('www.IhreDomain.com/contao/')

Kommt es während der Installation zu Komplikationen hilft die [[Fehlersuche]] weiter.

==Detaillierte Anleitung für die Installation bei einem kompatiblen Webhoster==

=Webhoster=
==Liste kompatibler Webhoster==
[[1 und 1 Internet]] (kompatibel mit ein paar Besonderheiten)

Hetzner.de (ab dem entsprechenden "Tarif inkl. MySQL-Datenbank" voll kompatibel)

==Workarounds für bestimmte Webhoster==
Bei manchen Webhostern ist es leider notwendig von obigem Standard Installationsschema abzuweichen.

Diese Besonderheiten sind hier aufgeführt um zu ermöglichen, dass Contao bei diesen Webhostern läuft.

Oftmals betrifft dies den so genannten [[Safemode Hack]], welcher bei etlichen Webhostern notwendig ist.
Weiterhin ist oftmals die SOAP Erweiterung nicht in PHP enthalten, was den Erweiterungskatalog nicht verwendbar macht (Mögliche Abhilfe hierbei ist jedoch [[TensideRepository]]).

{{Hinweis|In Zukunft wird hier eine Liste von Artikeln veröffentlicht, welche Anpassungen bei welchen Webhoster notwendig ist um Contao zum Laufen zu bekommen.}}

==Liste inkompatibler Webhoster==
In dieser Liste werden Webhoster gelistet, bei denen Contao nicht eingesetzt werden kann.
Bitte beim Hinzufügen von Webhostern darauf achten, dass man detailliert beschreibt woran es scheitert, wie z.B. "stellt nur PHP4 zur Verfügung".

Installation

2010-07-30T03:41:31Z

ProjectX: /* Schnellanleitung für die Installation bei einem kompatiblen Webhoster */

{{stub}}
[[Category:Installation und Updates]]

=Installation von Contao=
==Kurzanleitung für die Installation bei einem Contao-tauglichen Webhoster==

# Download des Contao-Cores auf www.contao.org
# Entpacken auf dem Heimrechner
# Hochladen der Dateien mittles FTP auf Ihren Server
# Hochladen des [[Systemdiagnosetool]]s ins Verzeichnis der Contao-Installation (gewöhnlicherweise das Root-Verzeichnis Ihrer Webadresse)
# Aufrufen der Diagnosedatei in der Adresszeile Ihres Browsers und eventuelle Fehlermeldungen beseitigen
# Aufrufen der Installationsdatei: www.IhreDomain.com/contao/install.php (ersetzen Sie 'www.IhreDomain.com' mit Ihrer tatsächlichen Webadresse; in diesem Fall ist Contao im Rootverzeichnis Ihres Webservers installiert; der Zugang zum Backend liegt im Unterverzeichnis '/contao')
# Das Installationsskript führt Sie durch die abschließenden Schritte (die erforderlichen Daten zur Datenbank erhalten Sie von Ihrem Webhoster)
# Nach erfolgreicher Installation können Sie sich im Backend (BE) einloggen ('www.IhreDomain.com/contao/')

Kommt es während der Installation zu Komplikationen hilft die [[Fehlersuche]] weiter.

==Detaillierte Anleitung für die Installation bei einem kompatiblen Webhoster==

=Webhoster=
==Liste kompatibler Webhoster==
[[1 und 1 Internet]] kompatibel mit ein paar Besonderheiten

==Workarounds für bestimmte Webhoster==
Bei manchen Webhostern ist es leider notwendig von obigem Standard Installationsschema abzuweichen.

Diese Besonderheiten sind hier aufgeführt um zu ermöglichen, dass Contao bei diesen Webhostern läuft.

Oftmals betrifft dies den so genannten [[Safemode Hack]], welcher bei etlichen Webhostern notwendig ist.
Weiterhin ist oftmals die SOAP Erweiterung nicht in PHP enthalten, was den Erweiterungskatalog nicht verwendbar macht (Mögliche Abhilfe hierbei ist jedoch [[TensideRepository]]).

{{Hinweis|In Zukunft wird hier eine Liste von Artikeln veröffentlicht, welche Anpassungen bei welchen Webhoster notwendig ist um Contao zum Laufen zu bekommen.}}

==Liste inkompatibler Webhoster==
In dieser Liste werden Webhoster gelistet, bei denen Contao nicht eingesetzt werden kann.
Bitte beim Hinzufügen von Webhostern darauf achten, dass man detailliert beschreibt woran es scheitert, wie z.B. "stellt nur PHP4 zur Verfügung".