Contao Community Documentation - Benutzerbeiträge [de]

Linke und Rechte Spalte füllen

2011-02-11T21:14:22Z

RSX: ext. Link korr.

{{stub}}

[[Category:Admin HOWTOS]]

'''Am Beispiel Bildergalerien:'''

Einfache Variante für versch. Bilder auf jeder Seite oder nur für eine Seite:

Beim Seitenlayout muss der Spalte rechts und links auch das Modul 'Artikel' zugewiesen werden. Dann kannst du einfach Artikel anlegen und diese rechts oder links Positionieren und dort jeweils eine Bildergalerie anlegen.

Variante für die selben Bilder auf allen Seiten:

Da gibt es auch mehrere Wege... ich beschreibe hier mal einen etwas komplizierteren, der die Wartung aber vereinfacht:

# Eine Seite anlegen und diese im Menü verstecken
# in dieser Seite 2 Artikel anlegen. Einen für links und einen für rechts. In der Übersicht die passende ID rausfinden und aufschreiben
# 2 Module anlegen mit 'Eigenem HTML Code'
# in diese 2 Module jeweils einen Artikel mittels [http://www.contao.org/inserttags.html Inserttag] einbinden -> <nowiki>{{insert_article::*}}</nowiki>
# Im Seitenlayout dann diese Module jeweils der passenden Seite zuordnen

(Das geht auch mit Elementen in einem Artikel -> <nowiki>{{insert_content::*}}</nowiki> Ich finde es aber so übersichtlicher)

----
--[[Benutzer:MacKP|MacKP]] 20:47, 12. Apr. 2010 (UTC)

Benutzer Diskussion:BugBuster

2010-12-27T16:51:06Z

RSX:

== Rechtschreibfehler ==

Hallo BugBuster,

mir ist aufgefallen, dass Du in deinen Beiträgen sehr viele Rechtschreibfehler der selben Sorte machst.
Ich möchte Dich auf diesem Wege darauf aufmerksam machen.
Beispiel: "Benutzer Statistik" ist falsch. Es '''muss''' entweder "Benutzer-Statistik" oder "Bennutzerstatistik" heißen. ;-)
Dieser Fehler wird von sehr vielen gemacht. Es existiert sogar ein Artikel in der Wikipedia darüber: http://de.wikipedia.org/wiki/Leerzeichen_in_Komposita
Hoffe ich konnte Dir helfen ;-) --[[Benutzer:RSX|RSX]] 14:47, 18. Dez. 2010 (CET)

----

Hallo RSX,
Danke für den Hinweis, aber du meinst doch bestimmt: Benutzerstatistik :-)
Ich habe so viele Rechtschreibreformen mitgemacht, bzw. ignoriert, ich habe nun meine Eigene.
Werde versuchen bei speziell diesem Fehler mich zu bessern. :-)

----
--[[Benutzer:BugBuster|BugBuster]] 17:13, 18. Dez. 2010 (CET)

Hallo BugBuster,
Entschuldigung, natürlich hast du Recht. Es muss natürlich Benutzerstatistik heißen. :-)
Könntest Du das noch im eigentlichen Plugin korrigieren? ('Besucherstatistik' + 'Suchmaschinen-Schlüsselwörter')
Dann wäre ich als Rechtschreibfanatiker völlig happy! ;-) --[[Benutzer:RSX|RSX]] 14:31, 27. Dez. 2010 (CET)

Benutzer Diskussion:BugBuster

2010-12-27T13:31:14Z

RSX: /* Rechtschreibfehler */

== Rechtschreibfehler ==

Hallo BugBuster,

mir ist aufgefallen, dass Du in deinen Beiträgen sehr viele Rechtschreibfehler der selben Sorte machst.
Ich möchte Dich auf diesem Wege darauf aufmerksam machen.
Beispiel: "Benutzer Statistik" ist falsch. Es '''muss''' entweder "Benutzer-Statistik" oder "Bennutzerstatistik" heißen. ;-)
Dieser Fehler wird von sehr vielen gemacht. Es existiert sogar ein Artikel in der Wikipedia darüber: http://de.wikipedia.org/wiki/Leerzeichen_in_Komposita
Hoffe ich konnte Dir helfen ;-) --[[Benutzer:RSX|RSX]] 14:47, 18. Dez. 2010 (CET)

----

Hallo RSX,
Danke für den Hinweis, aber du meinst doch bestimmt: Benutzerstatistik :-)
Ich habe so viele Rechtschreibreformen mitgemacht, bzw. ignoriert, ich habe nun meine Eigene.
Werde versuchen bei speziell diesem Fehler mich zu bessern. :-)

----
--[[Benutzer:BugBuster|BugBuster]] 17:13, 18. Dez. 2010 (CET)

Hallo BugBuster,
Entschuldigung, natürlich hast du Recht. Es muss natürlich Benutzerstatistik heißen. :-)
Könntest Du das noch im eigentlichen Plugin korrigieren? ('Besucherstatistik' + 'Suchmaschinen-Schlüsselwörter')
Dann wäre als Rechtschreibfanatiker völlig happy! ;-) --[[Benutzer:RSX|RSX]] 14:31, 27. Dez. 2010 (CET)

Benutzer Diskussion:BugBuster

2010-12-18T13:47:48Z

RSX: Die Seite wurde neu angelegt: „== Rechtschreibfehler == Hallo BugBuster, mir ist aufgefallen, dass Du in deinen Beiträgen sehr viele Rechtschreibfehler der selben Sorte machst. Ich möchte D…“

Visitors

2010-12-18T13:40:52Z

RSX: Viele Rechtschreibfehler korrigiert (Hauptsächlich Deppenleerzeichen)

[[File:Modul_visitors_fe_all.jpg|right|Besucher]]Ein kleines Modul welches die Zugriffe (Hits) und Besucher (Visits) zählt und zur Anzeige bringt. 
Dabei wird in der Anzeige getrennt angezeigt die Zugriffe/Besucher vom aktuellem Tag sowie die jeweilige Gesamtzahl. 
Der Zugriffszähler wird, wie der Name schon sagt, bei jedem Zugriff erhöht. Der Besucherzähler zeigt die Zahl der unterschiedlichen IP-Adressen, die innerhalb von 30 Minuten eine oder mehrere Seiten angefordert haben auf dem sich das Modul befindet. 

{{ExtInfo
| Dev=Glen Langer ([[User:BugBuster|BugBuster]])
| DevSite=http://www.contao.glen-langer.de
| ExtVersion=2.4.0
| Version=ab 2.9
| TLVersion=2.7.0 - 2.8.4 (siehe Installationshinweise)
| Depending=[[Bot Detection|Bot Detection]]
| ERLink=http://www.contao.org/erweiterungsliste/view/visitors.de.html
| DonateLink=http://www.amazon.de/wishlist/26HHEJOU03G76
| TrackerLink=http://dev.typolight-forge.org/projects/visitors/issues
| Comment=Version für Contao 2.9 verfügbar
}}
[[en:Visitors]]
[[Kategorie:Extensions]]

=Forum=
Fragen zum Visitors-Modul werden im Forum beantwortet: [http://www.contao-community.de/forumdisplay.php?28-visitors Forum - Subforen beliebter Third-Party-Erweiterungen (Extensions) - Visitors]
 
Fehler und Wünsche können im [http://dev.typolight-forge.org/projects/visitors/issues Tracking System] gemeldet werden.

=Installation=
Installation erfolgt über das Extension Repository im Backend der Contao-Installation. 
Eine manuelle Installation ist möglich, dazu die ZIP-Datei [http://www.contao.org/erweiterungsliste/view/visitors.html vom Extension Repository laden], entpacken und entsprechend übertragen. 
Dadurch sollte ein Verzeichnis /system/modules/visitors angelegt worden sein. 
Danach wie dabei üblich /contao/install.php Aufrufen - Update Database durchführen. 
( /typolight/install.php bei älteren TYPOlight Installationen ) 
'''''Da das Visitors-Modul abhängig ist vom Modul "[[Bot Detection|Bot Detection]]", muss dieses bei der manuellen Installation mit installiert werden.'''''

==Hinweis für ältere TYPOlight-Versionen==
===TYPOlight 2.8===
Nutzer von TYPOlight 2.8.x nutzen bitte Visitors-Modul-Version 1.7.1 ([http://www.contao.org/erweiterungsliste/view/visitors.10070019.de.html Direktlink])
===TYPOlight 2.7===
Nutzer von TYPOlight 2.7.x nutzen bitte Visitors-Modul-Version 1.4.1 ([http://www.contao.org/erweiterungsliste/view/visitors.10040019.de.html Direktlink])
 
==Update von Version 1.x auf Version 2.x==
{{Achtung|Die Version 2.x ist nicht vollständig kompatibel, ein Update ist aber möglich.}}
 
Was dabei zu beachten ist, kann hier nachgelesen werden.
*[[Visitors_Update_v1_auf_v2|'''Visitors-Update-Version 1 auf Version 2''']]
 

=Übersicht=
Das Visitors-Modul bringt 2 Backend- und ein Frontend-Modul mit. 
Im Backend gibt es "Besucher" und "Besucher Statistik", für das Frontend ebenfalls "Besucher".

==Backend==

===Besucher===
[[Datei:Visitors_de_backend_besucher.jpg]]

===Besucher-Statistik===
[[Datei:Visitors_de_backend_besucherstatistik.jpg]]

zeigt dann im Detail: (Klick aufs Bild für höhere Auflösung)
<gallery widths="240" heights="180" caption="Besucher Statistik">
File:Visitors_de_backend_besucherstatistikdetail.jpg|Besucher Statistik im Detail
File:Visitors_de_backend_besucherstatistikdetailBrowser.jpg|Browser Statistik
File:Visitors_de_backend_besucherstatistikdetailSearchEngine.jpg|Search Engine Referer Statistik
</gallery>

==Frontend==
Für das Frontend werden als Beispiel zwei CSS-Dateien mitgeliefert:
*mod_visitors_fe.css für die normale, zeilenweise Ausgabe
*mod_visitors_fe_horizontal.css für die horizontale Ausgabe

===Besucher-Statistik===
[[Datei:Modul_visitors_fe_all.jpg]]

===Besucher-Statistik horizontal===
[[Datei:Modul_visitors_fe_all_horizontal.jpg]]

=Erste Schritte=
Als erstes legt man über den Menüpunkt Besucher eine neue Besucher-Kategorie an. In dieser dann den Besucherzähler. 
Danach legt man ein Frontend-Modul an und baut es in das Layout der Seite ein. 
Hier nun die einzelnen Schritte, jeweils mit den Default-Angaben. Feinheiten werden [[Visitors#Feinheiten|später erklärt]].

==Anlegen einer Kategorie==
Um eine neue Besucher-Kategorie zu erstellen, klickt man links im Backend unter 'Inhalte' auf 'Besucher'. Im Hauptbereich dann auf den Button 'Neue Kategorie'.
[[Datei:Visitors_de_backend_kategorie_neu.jpg]]

Am Anfang reicht es einen Kategorie-Namen anzugeben, anschließend klickt man auf "Speichern und Schließen". 
Nun ist man in der Kategorie Übersicht. Durch Klick auf den Bleistift in der Zeile der Kategorie und nochmaligem Klick auf den Bleistift im Kopf der Kategorie gelangt man wieder zu den Einstellungen der Kategorie.

==Anlegen des Besucherzählers==
In der Kategorie Übersicht klickt man nun auf Edit (Bleistift) der Kategorie. 
Dort entweder auf 'Neuer Besucherzähler' und dann das Pfeil-Symbol oder auf das Plus im Kopf der Kategorie:
[[Datei:Visitors_de_backend_besucherzaehler_neu.jpg]]

Nun sind einige Angaben nötig:
* Namen angeben (wird über den Zahlen als Überschrift angezeigt).
* Start-Datum, ist optional, dient nur zur Anzeige im Frontend
* Optional: 'Startwerte für Zähler' eingeben
* Optional: 'Besucher pro Tag' Anzeige aktivieren
* "Veröffentlicht" aktivieren
anschließend klickt man auf "Speichern und Schließen".

==Frontend-Modul==
Ein neues Frontend-Modul wird angelegt über:
* Layout -> Themes -> Frontend Module -> Neues Modul (Contao ab 2.9)
* Layout -> Module -> Neues Modul (TYPOlight bis 2.8.x)
 
Als erstes unbedingt '''zuerst den Titel''' eingeben, erst dann bei Modultyp: 'Verschiedenes'-'Besucher' auswählen. Es ändern sich nun die Formularfelder. 
Bei 'Besucher-Kategorie' nun die vorher angelegte Kategorie auswählen, anschließend 'Speichern und Schließen'. 
 
Nun muss das angelegte Frontend-Modul noch im Layout eingebunden werden:
* Layout -> Themes -> Seitenlayout -> Edit des genutzte Layouts (Contao ab 2.9)
* Layout -> Seitenlayout -> Edit des genutzte Layouts (TYPOlight bis 2.8.x)

Bei 'Eingebundene Module' das gerade erstellte Frontend-Modul einbinden (z.b in left)

==CSS-Datei==
Wie erwähnt sind 2 CSS-Dateien mitgeliefert für die Darstellung. 
Für die ersten Tests sollte die Datei <code>mod_visitors_fe.css</code> aus dem Verzeichnis <code>/system/modules/visitors</code> kopiert werden nach <code>/tl_files</code> und dann über das Backend importiert und im Layout aktiviert werden.

=Feinheiten=
Feinheiten sind einstellbar in der Kategorie, im Besucherzähler selbst sowie im selbst angelegtem Frontend-Modul.

==Feinheiten in der Kategorie Definition==
===Zählweise===
Seit Version 1.6.0 kann die Zählweise bei eingeschaltetem Seitencache gewählt werden:
* Last Zählung, serverseitig durch Contao
* Lese Zählung, clientseitig durch Browser
** (nur im Contao cacheModus: Server- und Browsercache / Nur Browsercache)

Mit dem zweiten Punkt kann damit auch gezählt werden, wenn die Seite im Browsercache liegt und daraus aufgerufen wird.
Die System-Einstellung 'Cache-Modus' wird dabei beachtet.

{{Anmerkung|Die Anzeige der aktuellen Werte erfolgt aber weiterhin nur wenn die Seite vom Server angefordert wird.}}

==Feinheiten in der Besucherzähler-Definition==
===Blockzeit===
Die Blockzeit wird in Sekunden angegeben. Nach Zugriffspause dieser Zeit wird ein Zugriff als weiterer Besucher gezählt. 
Voreingetragen sind 1800 Sekunden, d.h. 30 Minuten.

==Feinheiten in der Frontend-Modul-Definition==
===Templates===
Jedem Modul kann per Auswahl ein Template zugeordnet werden. Zur Auswahl stehen 4 Templates.
* mod_visitors_fe_all
** Liefert alle Felder die möglich sind (siehe Beispielbild oben)
* mod_visitors_fe_hits
** Hier wurden die beiden Besucherzeilen entfernt
* mod_visitors_fe_visits
** Hier wurden die beiden Zugriffszeilen entfernt
* mod_visitors_fe_invisible.tpl
** Hier wird nichts angezeigt. Dieses Template dient dadurch zur reinen Zählung.

Es können eigene Templates erstellt werden. Diese müssen als Dateiname anfangen mit 'mod_visitors_fe_' und die Endung '.tpl' haben.

===Nur Gästen anzeigen===
Nach dem Aktivieren der Funktion wird das Modul versteckt, sobald ein Mitglied (Frontend-Nutzer) angemeldet ist.

===Modul schützen===
Hier kann nun definiert werden, dass die Anzeige des Moduls nur dann erfolgt, wenn Mitglieder bestimmter Gruppen online sind.

===Selbstzählung verhindern===
Es gab einige Ideen, wie man noch verhindern kann, eigene Zugriffe nicht zu zählen. Besonders, wenn man mit dynamischen IPs ankommt.
Hier ist nun eine Möglichkeit umgesetzt, dieses über einen angepassten User Agent String des Browsers zu tun.
 
Über:
* Layout -> Themes -> Frontend-Module -> Modul-Name (Contao ab 2.9)
* Layout -> Module -> Modul-Name (TYPOlight bis 2.8.x)
vom angelegtem Besucher-Modul kann im neuem Feld "Keine Zählung bei HTTP_USER_AGENT Teilkennung:" einen String eingegeben werden, dieser sollte eindeutig sein. 
Beispiel: CTISOK 
Es sind, wozu auch immer, auch mehrere Strings dort möglich, diese dann durch Komma getrennt eingeben. 
Im Firefox ergänzt man nun den Agent String wie folgt: 
# Tippe '''about:config''' in der Adresszeile ein und drücke ENTER
# Tippe '''general.useragent.extra.firefox''' in der Filter Zeile
# Doppelklick auf die gefunde Zeile
# Hier nun den Beispiel String von oben mit Leerzeichen getrennt anhängen, OK

z.B. wird so aus "Firefox/3.5.2" nun "Firefox/3.5.2 CTISOK" 
 
Die Kennung kann man sich dann durch Eingabe von '''about:''' + Enter anzeigen lassen. (letzte Zeile) 
 
Weitere Browser sind hier erläutert (eng):
[http://www.walkernews.net/2007/07/05/how-to-change-user-agent-string/ walkernews.net - how to change user agent string]

=Insert-Tags=
==Anzeige==
Seit der Version 1.2.0 gibt es Insert-Tags zum Anzeigen der Werte.
<source lang="text">
{{visitors::katid::name}}
{{visitors::katid::online}}
{{visitors::katid::start}}
{{visitors::katid::totalvisit}}
{{visitors::katid::totalhit}}
{{visitors::katid::todayvisit}}
{{visitors::katid::todayhit}}
{{visitors::katid::averagevisits}}
</source>
Seit der Version 1.5.0 und ab TYPOlight 2.8 können die Insert-Tags um den Präfix 'cache_' erweitert werden, damit sind diese dann auch cachesicher.
<source lang="text">
{{cache_visitors::katid::name}}
...
</source>
Das Modul zählt und zeigt normalerweise die Werte an. Wer für die Anzeige die Insert-Tags nutzen will, braucht das Modul weiterhin, aber nur zum Zählen. Mittels des Templates mod_visitors_fe_invisible kann es dazu unsichtbar geschaltet werden. 
Die "katid" ist die Kategorie-ID, in dem der Zähler angelegt wurde. Zur Ermittlung in der Kategorieübersicht des Moduls mit der Maus über das "i" gehen.

[[Datei:Visitors_de_backend_kategorie_id.jpg|Besucherzähler Kategorie-ID]]

Dabei wird als Tooltipp die ID angezeigt. 
Ab Version 2.3.1 steht die ID direkt hinter dem Kategorie-Namen. 
Bei Kategorie-ID = 1 wäre das dann also beispielsweise: 
<source lang="text">
{{visitors::1::online}}
</source>

 

==Zählung==
Eine Alternative für "nur zählen" wäre, den Insert-Tag zu nutzen, den es ab Version 1.5.0 gibt, das Modul selbst verwendet diesen ebenfalls:
<source lang="text">
{{cache_visitors::katid::count}}
</source>
Beispiel für Einbau in einen Artikel (für Kategorie-ID = 1):
<source lang="html4strict">
{{cache_visitors::1::count}}
</source>

{{Achtung|Dabei muss drauf geachtet werden, dass der Insert-Tag für die Zählung als erstes auf der Seite eingebaut wird, damit die Zählung vor der Ermittlung der Anzeigewerte erfolgt.}}

 

==Weitere Insert-Tags==
Seit der Version 2.1.0 gibt es Insert-Tags zum Anzeigen der Werte vom Tag an dem die meisten Besucher gezählt wurden.
<source lang="text">
{{visitors::katid::bestday::date}} - Tag (Datum) mit den meisten Besuchern
{{visitors::katid::bestday::visits}} - Anzahl Besucher vom Tag mit den meisten Besuchern
{{visitors::katid::bestday::hits}} - Anzahl Zugriffe vom Tag mit den meisten Besuchern
bzw.
{{cache_visitors::katid::bestday::date}}
{{cache_visitors::katid::bestday::visits}}
{{cache_visitors::katid::bestday::hits}}
</source>
Beim "date" Insert-Tag ist noch ein optionaler Parameter möglich, um die Datumsausgabe zu formatieren.(m.d.Y , Y-m-d, etc.) 
Als default wird die Systemeinstellung verwendet. Als Trennzeichen muss ein "::" verwendet werden. 
Ein komplettes Beispiel (hier mit Kategorie 1):
<source lang="text">
BestDay: {{visitors::1::bestday::date::j. F Y}} mit {{visitors::1::bestday::visits}} Besuchern (bei {{visitors::1::bestday::hits}} Hits)
</source>
ergibt:
BestDay: 31. August 2010 mit 25 Besuchern (bei 123 Hits)

 

=Besonderheiten=
==Keine Zählung==
Es wird kein Frontend-Aufruf gezählt, wenn man dabei gleichzeitig im Backend angemeldet ist.
 

==Besucher pro Tag: Ø = 0==
Der Durschnittswert pro Tag wird pro vollständigem Kalendertag berechnet. 
Hat man nun nur von einem Tag vorher oder gar nur vom aktuellem Tag eine Zählung, kann kein sinnvoller Wert berechnet werden. 
(Durschnitt = Anzahl Besucher) 
In diesen Fällen wird "0" angezeigt.
 

==Bot Detection abschalten==
Wer die Zugriffe von Bots und Suchmaschinen mitzählen möchte, kann die Bot Detection abschalten. Das geht allerdings nicht über das Backend, sondern muss über die localconfig.php passieren.
{{Achtung|Das gilt dann für alle Visitors-Module, falls mehrere Frontend Module angelegt wurden!}}
Folgender Eintrag ans Ende der localconfig.php (nach: ### INSTALL SCRIPT STOP ### ) bewirkt das Ausschalten: 
<source lang="php">
$GLOBALS['TL_CONFIG']['mod_visitors_bot_check'] = false;
</source>
 

----
--[[Benutzer:BugBuster|BugBuster]] 00:37, 12. Dez. 2010 (CET)

Im Artikel Template evenodd generieren

2010-08-11T16:46:08Z

RSX: diverse Fehler korr.

[[Category:Dev_Snippets]]

Es könnte hilfreich sein, auf einer Seite mit mehreren Artikeln, eine "even"- / "odd"-Klasse mitzuführen, da Contao/TYPOlight dies von sich aus nicht erstellt.

Hierzu sollte man das Template mod_article.tpl kopieren und diesen Quelltext am Anfang hinzufügen:
<pre>
<?php
$evenodd = '';
if (!$GLOBALS['article']['first'])
{
$evenodd .= " articleFirst";
$GLOBALS['article']['first']=1;
$GLOBALS['article']['evenodd'] = true;
}

$GLOBALS['article']['evenodd'] = !$GLOBALS['article']['evenodd'];

if ($GLOBALS['article']['evenodd'])
{
$evenodd .= " articleEven";

}
else
{
$evenodd .= " articleOdd";

}
?>

<div class="<?php echo $this->class; ?> block <?php echo $evenodd; ?> "<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

....
</pre>

{{Hinweis|In der umschliessenden DIV-Klasse um den Artikel muss wie oben aufgezeigt, die $evenodd noch eingefügt werden (<?php echo $evenodd; ?>)}}

Nun werden dem Artikel eine bis zwei CSS-Klassen hinzugefuegt. '''articleFirst''', wenn dies der erste Artikel ist. Und jeweils alternierend die Klassen '''articleEven''' und '''articleOdd'''.

PiwikTrackingTag

2010-07-26T10:16:47Z

RSX: /* Piwik in Contao einbinden */

[[Category:Extensions]]
{{ExtInfo
| Dev=Torben Stoffer
| ExtVersion=2.0.7
| Version=2.9.0
| TLVersion=2.6.0 - 2.8.x
| ERLink=http://www.contao.org/erweiterungsliste/view/PiwikTrackingTag.20000079.de.html
| DonateLink=[https://www.paypal.com/de/cgi-bin/webscr?cmd=_flow&SESSION=iCNMVLUkUFpFAaxy_i_7gZcH2-BKYkj7vcnAnom1iWcpXVqp7ioMTz3B9Ra&dispatch=5885d80a13c0db1f8e263663d3faee8d66edfb0b39be7838e3b204755610594d Paypal]
| TrackerLink=http://www.contao-community.de/showthread.php?1929-PiwikTrackingTag-Piwik-Tracking-Tag-%28ab-Version-2.0.0%29&p=11405
}}

Die Installation und Verwendung von Piwik kann [[Piwik|hier]] nachgelesen werden
=Piwik in Contao einbinden=
Sobald diese Erweiterung über den Erweiterungskatalog in Contao installiert ist, stehen die Optionen im Seitenlayout unter ''Layout'' -> ''Themes'' -> ''Seitenlayout'' -> Rubrik ''Piwik'' zur Verfügung.

'''Backend -> Seitenlayout''':

[[Datei:piwik-seitenlayout.jpg|Seitenlayout]]

Im Feld '''URL der Piwik-Installation''' wird der absolute Pfad zur Piwik-Installation eingeben.

Im Feld '''Seiten-ID''' wird die Seiten-ID eingetragen. Diese kann aus dem Tracking-Code ermittelt werden (siehe [[Piwik#Mit_dem_Tracking_Code|Piwik Tracking Code]]). Dazu sucht man sich die Zeile mit der ID; z.B.

var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", '''11''');

In diesem Beispiel ist '''11''' die ID, die in dem Feld ''Seiten-ID'' eingetragen werden muss.

=Weitere Optionen=

Option '''Benutzer zählen''': Ist diese Option aktiv, werden Backend-Benutzer mitgezählt.

Option '''Mitglieder zählen''': Ist diese Option aktiv, werden Frontend-Benutzer mitgezählt.

Option '''Seiten-Titel verwenden''': zeigt in der Statistik dann den Seitentitel anstatt der Seiten-URL an.

Option '''Verweis auf 404 Seite nicht gefunden gesondert anzeigen''':nicht gefundenen Seiten werden gesondert in der Piwik-Statistik angezeigt und können helfen, die Fehler leichter zu beseitigen.

Option '''Dateiendungen für Download-Liste''': Hier sind alle Endungen aufgeführt, die als Download in der Statistik angezeigt werden. Nicht aufgeführte Dateieiendungen lassen sich hier hinzufügen. Achtung: In Contao unter '''''Einstellungen''''' müssen die Dateiendungen für Downloads auch eingetragen und freigegeben sein!

2010-07-26T10:14:51Z

RSX: /* Personalisierte Felder hinzufügen */

{{stub}}
[[Category:Anwender_und_Redakteure]]
[[Category:Core]]

== Einen Newsletter vorbereiten ==
Das '''Newsletter-Modul''' ist Teil der Core-Distribution und bietet eine integrierte Newsletterfunktion mit [[w:de:Double_Opt-in#Double_Opt-in|Double-Opt In]]-Newsletterverwaltung.

Newsletter können in den Formaten Text und HTML erstellt und versendet werden.

Der Import von Empfängerlisten ist aus einer [[w:de:CSV_(Dateiformat)|CSV-Datei]] heraus möglich.

Versendete Newsletter können innerhalb der Webseite aufgelistet und angezeigt werden.

Es besteht die Möglichkeit, einen Newsletter für Mitglieder zu personalisieren.

=== Einen neuen Newsletter anlegen ===
Beim ersten Aufruf ist das Newsletter-Modul weitgehend leer. Ein neuer Newsletter wird angelegt, indem man auf das Icon 'neuer Verteiler anlegen klickt:

[[Datei:Mod_newsletter_be_uebersicht_newsletter_0.jpg|Newsletter Übersicht]]

Im darauf folgenden Fenster werden die Grunddaten des neuen Newsletters eingegeben:
* Der Titel des Newsletters;
* Die Weiterleitungsseite, die später dafür benutzt wird, um ein Lesen des Newsletters im Browser zu ermöglichen;
* eventuell notwendige Einstellungen, um den Newsletter nicht über die Contao-eigene Mailfunktion sondern über einen (externen) Mailserver zu versenden.

[[Datei:Mod_newsletter_be_neuernewsletter.jpg|Newsletter erstellen]]

Nach Bestätigung der Angaben mit ''Speichern und Schließen'' gelang man erneut in die Newsletter-Übersicht.

=== Ein Newsletter-Template einbinden ===

==== Die Datei 'mail_default.tpl' ====

Diese Datei bildet die Basis einer HTML-Newsletter-Mail.

<code>
<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 3.2//EN\"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>"> 
<meta name="Generator" content="TYPOlight Open Source CMS"> 
<title><?php echo $this->title; ?></title> 
<?php echo $this->css; ?> 
</head> 
<body> 
<?php echo $this->body; ?> 
</body> 
</html> 
</code>

Der Text des Newsletters wird mit der Anweisung <code><?php echo $this->body; ?></code> vom Template ausgegeben. Für Header, CSS-Stylesheets und den Titel des Newsletters ist das Template zuständig.

==== Tabellenbasiertes Newsletter-Theme ====

==== CSS für einen Newsletter einbinden ====

Das Contao-Framework sorgt dafür, dass eine vorhandene CSS-Datei mit dem Namen 'newsletter.css' automatisch dem Newsletter im Kopfbereich hinzugefügt wird. In dieser Datei vorhandene CSS-Definitionen werden als Inline-CSS im Newsletter ausgegeben.

Dies ist notwendig, da Mailclients in der Regel keine externen Stylesheets unterstützen.

Eine Liste der CSS-Anweisungen im Hinblick auf unterschiedliche Mailclients findet sich unter [http://www.campaignmonitor.com/css http://www.campaignmonitor.com/css]

=== Personalisierung des Newsletters ===

==== Verteiler importieren ====

==== Personalisierte Felder hinzufügen ====

Das Newsletter-Modul benutzt die Benutzerverwaltung und generiert aus einer definierten Benutzerguppe heraus die Liste der zu versendenden Mails.

Grundsätzlich ist es daher möglich, die in der Benutzerverwaltung hinterlegten Daten zur Personalisierung von Newslettern zu verwenden. Dazu werden die gewünschten Spalten der Tabelle tl_member innerhalb des Newslettertextes nach folgendem Muster eingesetzt:

<code>Sehr geehrte/r ##firstname## ##lastname##</code>

Das Ergebnis sieht im versendeten Newsletter dann so aus:

<code>Sehr geehrte/r Angelika Mustermann</code>

{{Hinweis|Die personalisierten Felder werden bei einem Testversand nicht durch Inhalte ersetzt, sondern erst beim endgültigen Mailversand.}}

=== Anzeige im Browser einrichten ===

== Einen Newsletter versenden ==

=== Verteiler auswählen ===

=== Testsendung ===

=== Newsletter senden ===

== Einen Newsletter verwalten ==

Die erste Webseite

2010-07-24T18:52:57Z

RSX: /* Dateien */ So ist der Name für den Ordner besser erkenntlich

[[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 soll, macht man einen weiteren Unterordner "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-24T18:41:47Z

RSX: /* Einleitung */ bis 13 schreibt man alle Zahlen aus

[[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 soll, macht 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.

Die erste Webseite

2010-07-24T18:24:57Z

RSX: /* Einleitung */

[[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 2 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 soll, macht 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.

Die erste Webseite

2010-07-24T18:19:52Z

RSX: /* Einleitung */

[[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 2 Spalten, einen Header und einen Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: mittig zentriert
*Höhe der Kopfzeile: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile: 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 soll, macht 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.

Die erste Webseite

2010-07-24T18:18:47Z

RSX: /* Einleitung */ Spalten sind immer vertikal

[[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 2 Spalten, einen Header und einem Footer sein, welche ein paar Seiten und Artikel enthält. Die Anforderung der Webseite sind:
*Breite: 960px
*Ausrichtung: mittig zentriert
*Höhe der Kopfzeile: 50px
*Breite der linken Spalte: 220px
*Höhe der Fußzeile: 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 soll, macht 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.

Benutzer:RSX

2010-07-24T16:15:23Z

RSX: Die Seite wurde neu angelegt: „Hauptsächlich angemeldet, um das Projekt durch Verbesserung der vorhandenen Rechtschreibfehler zu fördern. Ihr könnt mir eine Nachricht auf meiner Diskussion…“

Hauptsächlich angemeldet, um das Projekt durch Verbesserung der vorhandenen Rechtschreibfehler zu fördern.

Ihr könnt mir eine Nachricht auf meiner Diskussion-Seite hinterlassen oder über Jabber unter rsx@jabber.ccc.de (keine e-Mail-Adresse!)